Website Design 101: Essential Terms
Published in
6 min readAug 5, 2021
Website Design Process
What do you need to know to design for the internet? A typical website process involves planning, design, development and testing, and a launch. Some of these steps may happen at the same time, and the whole process should involve many conversations with stakeholders: anyone who has the power to affect, or be affected by, the project.
Planning
- Define the goals of the website. Who and what is it for?
- Determine how the website will be organized and what content is needed.
- Establish deadlines, roles, and how the website will be made.
Design
- Create wireframes to determine layout and visual structure.
- Establish visual styles. What images, colors, and fonts will be used?
- Create mockups and prototypes to show off the design and any interactions.
Development & Testing
- Recreate the designs and interactions for the web using code, by writing the code or using a visual tool or template to create the site.
- Throughout the process, make sure you test to make sure the site is functional, accessible, and meets your goals.
Launch
- Make it live! Continue the ongoing process of review, discussion, and testing to make sure the website continues to meet goals for all stakeholders.
The Anatomy of a Website
- Browser: Application for accessing internet
- Favicon: small image displayed in browser’s address bar
- URL: Uniform Resource Locator (web address)
- Navigation: also nav or navbar, a set of links to other pages in the site
- Dropdown: additional menu options
- Header: the top section of a webpage, usually the same on every page of the website
- Hamburger menu: button, usually three lines, that shows a hidden menu
- Hero Image: large featured image, usually the first thing people notice
- Call to Action (CTA): content intended to promote a specific action
- Button: any element that triggers an event
- Fold: the bottom border of the web browser, the term comes from newspaper design. Users scroll to see content “below the fold”
- Carousel/slider: A list of shifting cards or images that can be viewed one at a time
- Sidebar: Not the main content of the page, often a list or other content on the side of the page
- Body: large area of page content between the header and footer
- Hyperlink: a link to other content
- Hover State: alteration of appearance when the mouse is on top of content
- Cards: small, self-contained boxes of content
- Footer: the bottom section of a webpage, usually the same on every page of the website
Web Design Terminology
- Accessibility: Making sure that everyone can perceive, understand, navigate, and interact with the Web regardless of disability.
- Alt Text: Alternative text that appears when an image can’t be displayed. If a user is listening to a screen reader to interact with the website, the alt text will be used to describe the image.
- Anchor Link / Jump Link / In-page link: A link to content on the same page you are already on.
- Assets: Anything used to create a design, including images, illustrations, typography, colors, 3D elements, or templates.
- Breakpoint: A point, typically a set pixel width, when the layout of a website needs to adjust. For instance, a design might have two or three columns on a a wide screen, but a single column on a narrow screen.
- Components: Objects you can reuse when designing a website or app. Components might be things like buttons, cards, a consistent header or footer, or any other element that can be used multiple times.
- CSS: Cascading Style Sheets, a written set of instructions for how a website is presented, including things like layout, color, and fonts.
- Home Page: The main or default page of a website, usually acting as an introduction or table of contents to all other site content.
- HTML: Hypertext Markup Language, the standard way of describing the content and structure of a webpage.
- Landing Page: the first page a user “lands” on after clicking a link from a search engine, email, ad or other source.
- Micro-Interactions: small moments of interaction around a single task, like logging in, “liking” something, or a message being sent.
- Mobile-First: Starting a design from the smallest possible size, then designing larger possible sizes. Since most users access google search on a mobile device, google now organizes search results based on how the site appears on a smart phone.
- Overlay: content such as a pop-up, dialog box, or light box that appears above the regular content on the page.
- Prototype: a mockup or demonstration of what a website will look like. It may be low-fidelity (limited details, placeholder boxes in place of content, used in early stages) or high-fidelity (very close to the final product, including real content and interaction).
- Responsive / Adaptive: Different ways of describing web designs that adjust based on the size of the window. Responsive designs adjust fluidly to the width of the screen, adaptive designs “snap” to fit set page sizes for things like desktop, tablet, or mobile devices.
- SEO: Search Engine Optimization, used to make your site appear higher in a search engine like Google.
- Sitemap: A list of all pages within a website. Typically shown as a flow-chart including all site pages and how they connect. Used to ensure content is organized and logically-placed.
- Stakeholders: People, groups or individuals who have the power to affect, or are affected by a project.
- Style Guide / Pattern Library: A set of guidelines that ensure consistency in a website’s typography, colors, buttons, image treatments, animation, writing, and more.
- Transition: An animated change between two changes or views, such as after a user clicks a link or as a user scrolls down a page.
- User Experience (UX): UX focuses on the user’s needs, wants, values, abilities, and limitations. It involves designing with users in mind to make sure content is useful, usable, desirable, findable, accessible, and credible.
- User Interface (UI): UI focusses on the structure and look of a project. It usually addresses visuals including layout, transitions, and styles. May include voice-controls or gestural controls.
- Wireframe: A 2-dimensional sketch or outline of a website or app. Wirefames could be drawn by hand or using a digital program. They typically use boxes or scribbles as placeholders for content, but could 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.
Finding Inspiration for Web Design
If you want to design for the web, it helps to look for inspiration beyond your usual experience. You can look at award-winning websites to see current trends in web design, discover unexpected possibilities, and to look at a design critically from an outsider’s perspective. Some great collections of inspiring web designs are:
