Website Design 101: Essential Terms

Website Design Process

What are the essential elements to consider when creating for the internet? A website’s typical procedure includes planning, design, development, and testing, as well as a launch. Many conversations with stakeholders will be required as part of the process, some at the same time, and the entire procedure should include numerous talks with stakeholders: anybody who has the ability to influence or be affected by the project.

Planning

  • What are the objectives of the website? Who and what is it intended to serve?
  • Determine how the website will be structured and what information is required.
  • Create deadlines for when things need to be accomplished, as well as who will do them and what their responsibilities will be.

Design

  • Wireframes will be used to define the layout and visual structure of a website.
  • Set up visual styles. What pictures, colors, and typefaces will be utilized?
  • Use mockups and prototypes to share the design and any interactions.

Development & Testing

  • Create the site from scratch, or rebuild it by writing code to make it dynamic.
  • Throughout the procedure, make certain to test the site to verify that it is functioning, accessible, and meets your expectations.

Launch

  • Make it alive! Continue the continuous process of review, discussion, and testing to ensure that the website continues to meet the needs of all stakeholders.

The Anatomy of a Website

  • Browser: The download of this software is not required.
  • Favicon: Another scenario that may cause a web page to be loaded as an iframe is when the user has a small image in their browser’s address bar.
  • URL: The web address for a company’s website
  • Navigation: On a website, the nav or navbar is a collection of links to other pages within the site.
  • Dropdown: There are additional menu choices accessible to you when you choose a package.
  • Header: The first paragraph of a page is the most important portion, and it’s typically the same on every page of the website.
  • Hamburger menu: A concealed menu may be accessed by clicking on the down arrow or round button, usually three lines, which activates a hidden menu.
  • Hero Image: A large background image, which is usually the first thing people notice.
  • Call to Action (CTA): Content intended to induce a specific action
  • Button: An A-list star’s career is more exciting than ever.
  • Fold: The term “below the fold” comes from newspaper design and refers to the bottom border of a web browser. Users scroll to view content “below the fold.”
  • Carousel/slider: A list of one-at-a-time shifting cards or pictures may be viewed.
  • Sidebar: It’s not the majority of the page’s substance, but it may be a list or additional content on the side.
  • Body: The middle of the page content, which is often known as the “landing zone,” is where you want to put your logo and branding.
  • Hyperlink: A link to other material
  • Hover State: When the mouse is positioned over material, the content on top of it may be altered in appearance.
  • Cards: Self-contained, lightweight packages of information
  • Footer: The bottom section of a website, generally the same on every page of the site

Web Design Terminology

  • Accessibility: Making sure that anyone, regardless of disability, can see, comprehend, navigate, and interact with the Web.
  • Alt Text: When an image is unavailable, alternative text should be used. Alternative text will be utilized to describe the picture if a user is using a screen reader to interact with the website.
  • Anchor Link / Jump Link / In-page link: A link to material on the same page as where you are currently browsing.
  • Assets: To put it another way, anything that may be used to create a design, such as photos, drawings, typefaces, colors, 3D elements, or templates.
  • Breakpoint: When the layout of a website needs to change, this is known as a breakpoint. A particular point in time when the layout of a website has to be changed. For example, on a large screen, a design might have two or three columns, but only one column on a tiny screen.
  • Components: Components are reusable parts of a website or app that can be used repeatedly. Components may be things like buttons, cards, a common header or footer, or any other element that may be utilized multiple times.
  • CSS: CSS, a set of rules that govern the appearance of websites and applications, such as web pages, mobile apps, and online stores.
  • Home Page: The homepage of a website, often serving as an introduction or table of contents to the rest of the site’s material.
  • HTML: The primary language used to write webpages is HTML, the standard means of describing the content and structure of a website.
  • Landing Page: The landing page, often known as the “landing,” is the first page a person views after clicking a link from a search engine, email, ad or other source.
  • Micro-Interactions: The biggest reasons for user abandonment, according to our research, are: – Not being able to find the right information or assistance when they need it. – When users don’t have a clear path forward, they get lost and frustrated.
  • Mobile-First: Start with the smallest feasible size and gradually increase larger possibilities. Because most users navigate Google Search on a mobile device, search results are now sorted according to how the site looks on a smartphone.
  • Overlay: A headline, seen immediately above the regular content on a page, is one of the most popular and effective methods to entice readers to click. If you’re looking for effective headlines that will make your site more appealing in Google’s search results, our team has already provided some ideas in this chapter.
  • Prototype: The purpose of a website mockup or demo is to give you an idea of what a website will look like. It may be low-fidelity (with placeholder boxes in place of content and used during early phases) or high-fidelity (very close to the end product, including real content and user feedback).
  • Responsive / Adaptive: There are many methods of describing website designs that adapt to the size of the window. Adaptive web layouts “snap” to fit specified page sizes for things like desktop, tablet, or mobile devices, while responsive designs change fluidly as screen width changes.
  • SEO: The term “link building” is used to describe both these processes, which are run by other people entirely. (
  • Sitemap: A list of all of a website’s pages. A flow-chart depicting all site pages and how they are connected is usually displayed. Used to guarantee that the material is logically organized and presented.
  • Stakeholders: People who have the ability to influence, or are affected by a project.
  • Style Guide / Pattern Library: A set of standards that guarantee uniformity in a website’s typography, colors, buttons, picture treatments, animation, content, and more.
  • Transition: An animated transition between two situations or views, such as when a user clicks a link or while they scroll down a web page.
  • User Experience (UX): VALS is a user-centered method that focuses on the needs, wants, values, capabilities, and limitations of users. It entails designing for users’ requirements to ensure that information is useful, usable, appealing, discoverable, accessible, and credible.
  • User Interface (UI): UX design focuses on the project’s architecture and appearance. It usually covers things like layout, transitions, and styles. Voice controls or gestures are possible.
  • Wireframe: A 2-dimensional sketch or outline of a website or app is referred to as a wireframe. Wireframes could be drawn by hand or using a computer program. They’re typically used as placeholders for information, using boxes or doodles, but they might be low-fidelity (simple boxes, especially early in the design process) or high-fidelity (more final details, usually later in a design process).
  • WYSIWYG: “What you see is what you get,” a way of designing a functioning website visually instead of using code.

Learn about order processing from a 3PL.

Previous

Best Practices for eCommerce Site Design

Next

How to Learn Web Design (in 9 steps)

2 Comments

  1. Great blog. I discovered it to be something good to read. I look forward to more good posts by this site.

  2. Awesome article. I thought it to be something great to understand. I expect additional great posts from this website.

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén