65 Web Design Terms You Should Know

The language of web design includes many web design terms you should know. Whether you build your own blog or website, work with a web designer or web developer, or want to learn more about web design in general, this post will cover the most important terms used in web design. We’ll also dive into the details of what makes up the web design process, including problem-solving methods and workflow. During a recent webinar with web design expert Michelle Schulp, we gained insight into web design terms and learned how to have a better conversation about web design.

Web Design Terms: Vocabulary for Web Design

[pullquote]Web design often involves overlap between disciplines, so we’ve included vocabulary that deals with branding, composition, color and typography.[/pullquote] Knowing how to speak the language of web design will help you ask better questions, communicate more effectively and produce a better final product. You can also notice how these terms are implemented across a wide variety of websites (for better or worse). Because web design is a holistic process, web designers are trained to see the bigger picture and also the details. [content_upgrade cu_id=”51491″]Learn more about web terminology in the new ebook:
65 Web Design Terms You Should Know[content_upgrade_button]Download now[/content_upgrade_button][/content_upgrade]

Branding Terms

Branding is the communication of an organization’s message, values and experience. Everything from a company’s logo and identifiable design elements to the “gut feeling” people get about an organization driver of the why behind a website. When it comes to web design, you have the opportunity to create experiences that reinforce the company’s brand.

• 1. Identity: The entire visual representation of your brand, can include logo, color, typography, imagery, voice, etc. Not just a logo.
• 2. Lettermark/Wordmark/Logotype: A type of logo made with stylized letters (IBM) or words (Coca-Cola)
• 3. Brandmark: A type of Logo made with a graphical representation (Apple, Target)
• 4. Icon: A simplified rendering of an object or concept. A logo and an icon are not the same thing.
• 5. Design System: A repository of reusable digital components that combine to form a website.
• 6. Brand Guide: A visual and philosophical reference for a brand’s color, personality and voice.

User Experience Terms

User experience encompasses how people interact and engage with a website. User experience influences how we direct users through the site and lead them to specific end goals. It encompasses many elements of design and development including how something looks and works. Make functionality decisions with the end-user in mind, not your own preference or the tools you are using.

• 7. Persona: Fictional character that represents a primary user of your site/product. Usually, personas are very well-developed because they should represent real people with real motivations.
• 8. Wireframe: Low-fidelity layout of a site, representation of general block-level content and interactive elements.
• 9. Mockup: High-fidelity layout of a site, representation of final color, typography, imagery, etc.
• 10. Prototype: Interactive version of a site, may not be built with final code.
• 11. CTA: Call to action, usually paired with a button.
• 12. Conversion: When a user takes a specific desired action.
• 13. Landing Page: Single page optimized for a specific audience or search engine result.
• 14. Usability: How real users actually interact with your site, usually tested by observing a series of guided tasks.

User Interface Terms

User interface (UX, UI) includes elements on the page with which the user interacts. Your user interface does impact your user experience, although they aren’t the same thing. Don’t make your users think; Design an intuitive interface that takes advantage of modern patterns.

• 15. Breadcrumb: Hierarchical content links.
• 16. Menu: Primary navigation area, sometimes with a dropdown or flyout of sub-menu items.
• 17. Filter: Pre-defined elements that allow narrowing down of visible content by various taxonomies (taxonomies are a fancy way of saying categories).
• 18. Search: Open-ended input that queries content and returns a list of results.
• 19. Slider: A trendy, animated way of displaying information that you probably shouldn’t use. 🙂

Composition Terms

Composition refers to how the content and aesthetics of a website work together. Each element on web page should feel like it belongs within the website layout, not added as an afterthought.

• 20. Balance: Using similar or complementary design elements to make the composition feel equal.
• 21. Repetition: Using recurring elements to reinforce patterns or serve as familiar visual cues.
• 22. Whitespace: How much “breathing room” does each element have?
• 23. Grid: Underlying structure to a design that determines how everything lays out.
• 24. Rule of Thirds: A visual concept that states the most pleasing focal points are at the intersection of three rows and columns.

Hierarchy Terms

Hierarchy involves the relative importance of visibility of pieces of information. Visual hierarchy is usually a collection of small details such as typography, color, proximity and balance. Having good hierarchy helps with the scannability of information and helps users prioritize information on the page by importance. Hierarchy also helps direct users through a website. Decisions made about the styling and position of elements have a huge impact on website experience.

• 25. Scale: How large or small are the elements on the page relative to each other?
• 26. Proximity/Alignment: Which elements on the page are associated with each other?
• 27. Focal Point: The place on the page to which we are directing the user’s attention
• 28. Semantic Markup: Using HTML elements correctly to imply hierarchy and usage within the content.

Typography Terms

Typography is the aesthetic decisions about the arrangement of type. Size, spacing, alignment, column size and relative sizing of type have a big impact on user experience as well as just aesthetics. Typographic choices should be deliberate, both reinforcing big-picture systems and being aesthetically appealing and easy to read/understand.

• 29. font (typeface): Collection of letters & glyphs/symbols
• 30. font-family: Which typeface are you using?
• 31. font-size: How big/small is it?
• 32. font-weight: How heavy/light is it?
• 33. font-style: Italic, underline, strike
• 34. line-height (leading): How much space between lines?
• 35. letter-spacing (tracking): Adjusting the spacing between groups of letters/blocks of text.
• 36. kerning: The spacing between individual letters.
• 37. text-decoration: Is the text underlined or does it have additional styling?
• 38. serif/sans serif: Serif fonts have an extra decorative stroke or line to the end of letters while a Sans Serif font is without.

Color Terms

Color encompasses aesthetic decisions about the use of color in a composition. Color can be used to evoke emotion, emphasis, divide or group elements; color can create visual unity and balance. Color is usually related to branding. Color choices should be deliberate and used consistently across the entire website.

• 39. HEX: On websites, the hexadecimal color, a six digit number used to represent color in HTML/CSS.
• 40. RGB: Additive color model used for screens, red/green/blue light values combining to form colors.
• 41. CMYK: For printing, subtractive color model used for ink, cyan/magenta/yellow/black ink combining to form colors.
• 42. Pantone/spot color: Specific custom inks of a certain color. Big brands usually have their own custom Pantone color.
• 43. Hue: Where is it on the color spectrum?
• 44. Saturation: How vivid or dull is the color?
• 45. Contrast: How much does it stand out?
• 46. Opacity: Solid or transparent?

Imagery Terms

Imagery terms include the visual and graphical elements of a website. Imagery is important for communicating your message and connecting with your audience. However, when imagery is used improperly, it can add extra bulk to a website’s loading time while not doing much for user experience. Use imagery to support your messaging; Use the right image format for the content.

• 47. Vector: Images that are made out of math (SVG, EPS).
• 48. Raster: Images that are made out of pixels (JPG, TIFF, PNG, GIF).
• 49. Resolution: How many pixels a raster images has (e.g. 800×600 or 2400×1200). A higher resolution will typically be a larger size, but higher detail.
• 50. Compression: Optimization (large/small file size).
• 51. JPG/JPEG: Best for photography and detailed images.
• 52. PNG: Best for graphics, simple color, and images with transparency.
• 53. GIF: Best for low detail graphics or animations.
• 54. TIFF: Best for print quality, not suited for screen display.
• 55. SVG: A vector image format suitable for display on the web, best for graphics & logos.

Web Terminology Terms

Web terminology terms encompass general vocabulary when designing for the web. Web designers don’t just know about design, they also understand the technology they’re designing for.

• 56. Heading: Titles and subtitles, written semantically with h1 – h6 tags. Useful for organizing information into a hierarchy and are utilized by search engines and screen readers.
• 57. Body Copy/Body Text: The primary written content, usually paragraphs, lists, quotes, etc.
• 58. Hero: The main image/graphic on a homepage or landing page, usually with a primary call to action.
• 59. Single-Scroll: A website where a majority of content is contained within a single page
• 60. Responsive Design: A design that is not fixed, but adapts to the user’s screen size and/or device.
• 61. Breakpoint: A specific point (e.g. width) where a website’s content/layout will change to fit a different interface.
• 62. Accessible: Ability of a website to be used by all audiences, including impaired vision, hearing, or motor function, through assistive technology or standard navigation.
• 63. Front-End: In general, dealing with code that runs in a browser and controls what is seen and interacted with.
• 64. Back-End: In general, dealing with code that runs on a server and controls the content and logic.
• 65. CMS: Content management system (like WordPress).

More Resources for Web Design Terms

For more information on web design terms, check out this 4 Key Principles of Web Design and 99 Descriptive Design Words You Should Know.

Watch the Webinar Replay: How to Speak Unicorn – Understanding the Language of Design

Michelle Schulp of Marktime Media is an independent graphic designer and frontend developer in Minneapolis. Prior to beginning her career, she studied Visual Communications, with minors in Psychology and Sociology. As her work progressed, she also branched into front-end development and user experience design to round out her skillset. This combination of disciplines led her to adopt a strategy-based approach to design, focused on solving tangible problems and achieving real goals based on how people think. Learn more about web design with Michelle during Web Design Bootcamp. [content_upgrade cu_id=”51491″]Learn more about web terminology in the new ebook:
65 Web Design Terms You Should Know[content_upgrade_button]Download now[/content_upgrade_button][/content_upgrade]