Heads up! We've updated our pricing structure. Check it out here
There are few groups who use more jargon than those tackling web design.
Design terminology especially causes confusion on cross-disciplinary creative teams and full-service agencies, where not everyone speaks the same language. In order to design great websites, landing pages, product UX, and other digital experiences that are as usable as they are pleasing to the eye, both sides of the brain must fire together in synchronization.
Simply put, you need a unified language of creative feedback to get the work done efficiently.
This lexicon of design terminology has nothing to do with snobbery, by the way, but is a reflection of the sophisticated principles and tools in play. The issue is that not everyone is fluent in the same web design terms, which can make web projects a tricky collaboration.
As a creative director, I experience this on a regular basis. I often collaborate across different disciplines. In a given week I have to speak video production, web design, typography, marketing — each of which has its own specialized language.
When I encounter unfamiliar terms, the best reaction would be to ask for clarification. Yet I sometimes stay quiet, either because I don’t want to disrupt the flow of the conversation, or because I feel sheepish not knowing all the terminology.
It’s likely that you’ve experienced something similar as you give feedback on web design projects.
In the siloed work structures of the past, specialized jargon didn’t need to be accessible. Those who were fluent spoke it with their colleagues, while anyone on the outside kept a respectable distance and trusted that the work was being done. Designers spoke with designers; developers with developers.
Today, we’re living in the age of collaboration. We know that when teams communicate with a common language, the feedback is clearer and the result is always better.
In this article, we’ll review the 15 must-know web design terms to give you a unified language of feedback for your next web project. So if you don’t know parallax scrolling from hamburger menus, take heart. We’ll explain these key graphic design terms, and will also clear up what they don’t mean.
What It Means: Content that’s visible once the user loads a page — no scrolling required. The phrase has been used since the old days of the newspaper industry to refer to what is immediately visible to a reader (opposed to articles located below the literal fold in the paper). Web content that’s below the fold is out of view until a user scrolls down to it.
What It Doesn’t Mean: That you should put all the emphasis on what goes above the fold, overloading the layout with elements. Your designs should provide a journey for users. Start with the most crucial elements to grab attention, then build upon them as the user scrolls down and experiences the full story. If you’re telling a story and your product requires more education before a visitor can take action, then placing your Call To Action (CTA) below the fold is totally fair game.
It’s a common misconception that “no one scrolls on the internet.” According to a study by Chartbeat as featured in TIME, 66% of attention is spent below the fold. This research was done in 2014, and the more recent mobile behavior of endless content (Instagram, TikTok and other apps) has gotten people even more used to scrolling.
What It Means: The best practice of making your website or digital experience usable by as many people as you can. This includes leveling the playing field for people with visual impairments, cognitive disabilities, hearing loss, and even slow network connections. Accessibility in web design leads to a better online experience that benefits everyone.
This excerpt from Mozilla’s developer documentation sums it up well:
“You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances. Just as it is wrong to exclude someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a website because they have a visual impairment.”
What It Doesn’t Mean: Accessibility is not just for visual impairments like color-blindedness. And it doesn’t mean you should make accessibility an afterthought. With 15% of people worldwide experiencing some kind of disability (approximately one billion people), this is not a niche group that designers can ignore. Be mindful of accessible best practices throughout your web design process — from concept to wireframe to specific choices like UI elements, motion graphics and color contrast — and you will ultimately create better products and experiences for all.
What It Means: An approach that makes it more likely for a website to fit a user’s device. For example, the designer would create fixed layouts in common screen widths such as 320 pixels, 480 pixels, 760 pixels, 960 pixels, 1200 pixels, and 1600 pixels. The most relevant layout would then be displayed for each user’s device.
What It Doesn’t Mean: That you can count on an ideal experience each time. The vast array of devices used in modern times makes it impossible for adaptive designs to always display perfectly. So you need to be aware of the limitations and figure out other ways to improve the user experience.
See “Above the Fold”, above. Elements that are below the fold require scrolling to get to. As mentioned, this isn’t necessarily an issue. If you design a user experience that guides the reader’s eye down the page through storytelling (both visual and written), they will ultimately land on the single action you want them to take.
What It Means: Navigational elements that show a user how they came to their current webpage. Who says design terminology can’t be fun? We’ve already seen two words mashed together to form a new word, and now we’ve got a term that harkens back to fairy tales like Hansel and Gretel. Just as those children left a trail of bread behind them to find their way through the forest, these web elements track the pages or subpages clicked to reach a certain point.
For example, if you went to Zappos.com in search of women’s beach sandals, the breadcrumbs on the results page might show “Women > Shoes > Sandals > Flip Flops.” If you wanted to view other types of sandals, you could just back up to the main sandals page and look at broader options.
A key benefit of breadcrumbing in web design is creating a content hierarchy. Especially in larger websites with lots of pages, breadcrumbs help the user find their way around and understand where they are in the grand scheme of your website.
An added SEO bonus to hierarchy is that the Google gods will better understand how to crawl your website, and this can result in better search rankings as well.
What It Doesn’t Mean: That your site can have numerous subpages within subpages. While breadcrumbs are helpful, your ultimate goal should be simple navigation. If a user has to click more than three times to get to a page on your site (or an action you want them to take, like upgrading a subscription), it’s time to reconsider the routing.
What It Means: Content on your website, emails, or other web properties that is personalized to the user. For example, an email about Medicare policies could adapt to recipients by providing specific information based on their medical specialty.
What It Doesn’t Mean: That you should just make a few aspects of something dynamic and then always deliver that same content to the masses. Often, it’s better to use targeting to dial in on the most important recipients, then cater a message directly to them.
What It Means: The area of the page where a user’s eye will gravitate. Our eyes are already trained where to go in some scenarios. For example, when reading a book in English, your eyes focus on the upper left corner of each page and then scroll left-to-right along the lines.
A web page lacks this standardized sight path. So good designers know how to create a focal point on the page and then make sure that space is occupied by something that deserves users’ attention.
What It Doesn’t Mean: That you should prioritize what’s most important to you. The user experience trumps your preferences. If you have a landing page for a new product, the “Buy Now” button might be your ultimate destination. But you first need to use the focal point to share the product’s benefits to the user — or show a photo of a person using the product — which can then guide them along to hopefully make the purchase.
What It Means: An element, also known as a hamburger icon, that uses a trio of horizontal bars to indicate that a navigation menu will emerge if clicked. It’s a convenient way to minimize clutter, while also making additional information available to the user.
The hamburger menu is often used in mobile versions of websites, and mobile apps, since there is far less real estate to include your full navigation bar.
What It Doesn’t Mean: That you can use your hidden menus as a junk drawer. This unfortunate phenomenon occurs when a team decides that a navigation menu can be “bigger than normal, since it’s not visible unless clicked.”
The hamburger menu debate rages on for nearly a decade. Is it still OK to use hamburger menus? Do we need to find a better UX solution? The jury is still out. Nonetheless, this is an important web design term that everyone must know.
What It Means: The numbering system used to identify colors online. Also known as a hex code, it has six digits (three pairs of letters or numbers) that allow you to lock down a color. The first pair refers to the red hue, the second pair refers to the green hue, and the final pair is for the blue.
For example, the color black has a hex code of #000000. The code for red is #FF0000.
What It Doesn’t Mean: That you can get complacent with your color choices just because the use of a hex code will ensure they’re consistent. Always test your designs on multiple screens to see how they look. Certain colors might look great on your high-end monitor but could look awful for a large portion of users on lower quality screens.
It’s also important to think about color accessibility in web design. Do these colors contrast enough to make it readable, especially for those who may have visual impairments or color blindness?
Google has a helpful color tool for UI design that lets you test different color palettes and measure their accessibility level (e.g. should the text color be changed to black or white, so that it contrasts enough with the background color?).
What It Means: There’s no “bottom of the page” to your website because content is loaded on a continual basis as the user scrolls. You’ve likely seen this presentation style in action on Facebook or Instagram, and publications with lots of articles. No matter how much you scroll down, you’ll never run out of posts to view.
What It Doesn’t Mean: That you can use it to serve up all the stuff you’ve ever created. Don’t employ infinite scroll unless you have an abundance of relevant content for your users. Otherwise, you’re just throwing up unnecessary obstacles that prevent the user from reaching the bottom of the page.
Of course there are some best practices and good uses of infinite scroll, if it makes sense for your site or app. If your web design project doesn’t fit into these use cases, you may be better off doing one of the following alternatives:
What It Means: When the elements on a page move at various speeds and distances as the user scrolls, creating a feeling of depth. Elements that move quickly feel closer, while other elements would have subtle movement to create the illusion of a more distant background.
A real-world example of this would be if you were looking out the window of an airplane that’s accelerating down the runway prior to takeoff. Any signposts or objects near you would whip by in a blur, while the terminal in the distance would appear to move much slower.
What It Doesn’t Mean: That your users should feel like they’re on a roller coaster when scrolling through your site. Parallax scrolling can have a particularly negative affect on people with vestibular disorders. If you want to use this design technique on your site, do so in a restrained manner – avoid the effect taking up a lot of space on the page, happening multiple times on a page, or taking place behind or near text.
Generally speaking, when it comes to web design trends like parallax scrolling, avoid “doing it just to do it.”
What It Means: A design approach that ensures a website responds to the user’s device. For example, a desktop monitor would get a horizontal layout of elements, while the size constraints of a smartphone screen would necessitate a more vertical layout.
Given the wide range of devices in use around the globe these days, responsive design is essential to providing an optimal experience to as many users as possible.
What It Doesn’t Mean: That you don’t need to test your designs on various screens before going live. Remember that responsive design is a concept, not a silver bullet. So you’ll still need to consistently evaluate your website on different devices to catch display issues. You can’t simply make a site responsive and then rest on your laurels.
Responsive is also one of those web design terms that often gets mixed up with adaptive. In the diagram above you’ll notice the difference.
What They Mean: Both user interface (UI) and user experience (UX) are ways of evaluating the relationship of users with your website design or app. Think of UI as the micro view, while UX is more of the macro view.
What They Don’t Mean: The same thing. These two terms are thrown around interchangeably far too often. While they share common DNA, and often work together, you’ll only confuse others and muddle your strategy if you don’t understand the differences.
What It Means: The arranging of elements to emphasize their importance. Visual hierarchy has relevance to everything from the design of menu icons to photos on a landing page. Designers choose colors, size, placement, and other factors to guide the user and deliver the right messages.
What It Doesn’t Mean: That you only need to consider your own priorities in the design process. User research should help you understand what they’re looking for and how you can deliver it. An effective visual hierarchy is catered to the user experience, not the whims of the stakeholder.
This guide only scratches the surface of what it takes to establish a common language between creators and collaborators. Consider it the first line or two of the Rosetta Stone. There are many additional web design terms, project management terms, and other distinct forms of language that should be familiar to anyone involved in the process.
The professionals with whom you work may have their own interpretations for all the elements in this glossary. It’s worthwhile to align on design terminology at the start of a project, and get everyone on the same page.
Plus, this is a rapidly evolving discipline. Attempts to memorize a handful of terms and then coast for the next few years will inevitably leave you in the dark.
Our ultimate goals should be to communicate so clearly that it’s impossible to be misunderstood. Strive for this and you’ll finish projects faster and deal with fewer headaches.
Achieving this higher level of clarity calls for empathy, mutual respect, and a sincere desire to work closer as a team. It takes continual effort. But the result will always be higher quality creations that we can all be proud of.
