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.
Your Primer for Web Design Terms
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.
Above the Fold
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.
Below the Fold
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.
Hexadecimal (or Hex Code)
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:
- “Load more” button – Effectively an infinite scroll delivered in small doses, that puts the control in the user’s hands.
- Blog restructuring – Rethinking your content hierarchy, navigation, and tagging, to provide a helpful user experience for your reader that recommends relevant information to them.
- Sub-category navigation – If you have an ecommerce store with lots of SKUs, for example, a better feature than infinite scrolling would be creating a sub-category grid or dropdown. Create a hierarchy of product categories and allow the user to more easily navigate the catalog.
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.
UI vs. UX Design
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.
- UI (user interface): How the user interacts with your specific pages, software, application, etc. This may include aesthetic elements like typography, colors, buttons, menu navigation, or even UI sounds that trigger an emotional response.
- UX (user experience): How the user experiences the fuller journey of your product or service, and how you get them from “A” (problem) to “B” (the solution or desired outcome). The UX process involves user research to pinpoint the customer’s needs, information architecture, wireframing, and crafting a user flow.
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.
The Vibrant Nature of Web Design Terms
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.
Need to give feedback on web design projects? Try Punchlist for free — an annotation layer over your creative work. Test drive it with a live URL.
How to Set Up Your Team for Success in PunchlistAugust 12, 2022
Trying to dig up Slack threads, endless email chains, or client meeting notes can seriously ruin your productivity as a project manager. Not to mention, this causes delays for your whole team. The old process of wrangling feedback can easily lead to missing a critical change in your next deliverable. How can you simplify the [...]
What's It Like To Build In Webflow? [Video Series]July 20, 2022
What’s it like to build in Webflow? Our friends at Edgar Allan invited us to their “EA Live” series to show you the ropes. In this video walkthrough, their team does a live design & build of the Punchlist.com homepage. Webflow is an online visual editor platform allowing users to create websites without having to [...]
How to Write a Creative Brief That Inspires Your TeamJune 29, 2022
Learning how to write a creative brief might sound tedious, but it’s one of the most important aspects of any creative endeavor. To understand the relationship between a creative brief and finished project, let’s talk structural engineering for a moment. We’re all familiar with Italy’s Tower of Pisa. Did you know that a faulty foundation [...]
Dealing with Difficult Feedback: The Creative's ToolkitMay 20, 2022
Creative teams often have a familial vibe. This is unsurprising, as we often spend more time working together than we do with our loved ones. We toil together, learn together, grow together, and even eat dinner together as we dedicate long hours to major projects, pitches and launches. This family dynamic really manifests itself when [...]
How to Avoid Micromanaging Your Creatives Into the GroundApril 22, 2022
Those in creative leadership must understand the dangers of micromanaging if their teams are to thrive. Creativity is delicate. Designers, writers and developers will often come up with a far better solution if given the right challenge to solve or goal to achieve, versus telling them “Do it this exact way.” That’s why we’ve prepared [...]
5 Ways to Get Better Design Feedback from Your ClientMarch 25, 2022
Your design team spends various sprints working on a large project for a prominent client, and the most important day arrives — the big unveiling. Presenting the creative work is exciting and fun (and yes, a bit anxiety-inducing). But what follows is actually the most crucial part: the client’s feedback. How do you get productive [...]
7 Ways to Give & Get Better Creative Feedback [Punchlist Video Features]March 11, 2022
Sometimes it’s all in the ask. How you ask for feedback — whether it’s from a client, teammate, or stakeholder — can make all the difference on the quality of feedback you receive. Creating that ask is something that deserves your time and attention, as it impacts the relationship with the person delivering feedback, the [...]
Client Onboarding: 6 Ways to Create Lasting Client RelationshipsMarch 8, 2022
Client onboarding is a double-edged sword for agencies, studios, and freelancers. While your clients supply the work and pay the bills, they also require back-and-forth email conversations and time-intensive education on your work process that ultimately distract from the best part of your job — being creative. Fortunately, it doesn’t have to be this way. [...]
Website Launch Checklist: 13 Actionable StepsOctober 15, 2021
Any website launch is challenging. The beginning of the website building process was exciting. You felt like there you made massive progress every time you went to work on it. But it’s not like that close to the end. It feels like you’re stuck at 95% complete. The structure is there, the design looks good, [...]
5 Tips for Better Client-Designer CommunicationSeptember 22, 2021
The client-designer relationship can be a breezy ride or a teeth-grinding journey. It all depends on how prepared you are to effectively communicate with your designer. Going in blind is a normal thing for clients to do when first looking for a designer. But starting the design process with a little preparation will go a [...]
Freelance Design Websites for Every ProjectSeptember 16, 2021
The freelance design world is hot with talent waiting for your project — you just have to know where to find it. We’ve marked out 10 platforms with freelance designers available for hire. Each one differs in price, client leg-work and expertise. So, jot out your priorities and see which fits your project best! Fiverr [...]
How to Audit Content Like a Pro in 2021January 27, 2021
Running a content audit can be hard. Knowing how to crush it for your client shouldn’t be. Content audit. There it is again. Creating content is one thing; auditing it is quite another. Regardless if you work for an agency or for yourself, you likely depend on your clients to provide content for you. But [...]
4 Things To Consider When Creating Your New WebsiteJanuary 4, 2021
They say your business website is like your virtual handshake – the first impression you will make on a potential client. With this in mind, it is vital that your website is seamless, easy to maneuver, and on brand. Whether you are building your website yourself, or you’ve reached out to an agency for support, [...]
Top 3 Tips When Providing Project Feedback To Your AgencyDecember 22, 2020
At Punchlist, communication is one of our top values. It’s the entire premise behind what we do! We believe communication lays the foundation for any business, project, or relationship in general. It’s a known fact that communication can get complicated when you don’t have the person right in front of you. We have all misread [...]
Your Pre-Launch Checklist!December 21, 2020
We all know the pressure that comes when it’s finally time to launch a website. With all the complexities, we can often catch ourselves thinking of all the things that could go wrong. No one wants to experience the frustration of grammatical errors or a failed capture form. That’s why we created our Pre-Launch essential [...]
5 Best Practices When Communicating With ClientsOctober 1, 2020
We’ve all been there – you feel like you are running in circles with a client, and you’re at a loss for how you can better explain your thought process. The constant back and forth can take up tons of time, and create plenty of unnecessary frustration. Some misunderstandings can even lead to losing the [...]