The expressions of web design include a huge variety of terms you should know. Whether you create your first blog or website, manage a web designer or web developer, or want to learn more about web design in general. This page will reach the most important terms used in the industry. We’ll also jump into the details of what constructs up the web design process, including problem-solving techniques and workflow.
Web design includes an extension between disciplines. The list of vocabulary that deals with branding, structure, shade, and typography. Knowing how to communicate the language of web design will aid you to seek better answers, communicate more, and produce a more beneficial outcome. You can also notice how these terms apply across a vast variety of websites (for better or worse). Because web design is a holistic process, web designers are qualified to see the bigger picture and also the smallest details.
Branding Terms
Branding is the expression of an organization’s information, assessments, and expertise. Everything from a company’s logo and identifiable design details to the “gut feeling” people get about an organization. When it comes to web design, you can generate experiences that support the most important thing – the company’s brand.
Lettermark / Wordmark / Logotype: A sample of the logo created by stylized characters (IBM) or words (Coca-Cola)
Brandmark: A type of Logo delivered with a graphical representation (Apple, Target)
Icon: A simplified rendering of an object or concept. A logo and an icon are not the same things.
Design System: A repository of reusable digital parts that combine to create a website.
Brand Guide: A visual and thoughtful reference for a brand’s color, personality, and voice
User Knowledge Terminologies
User experience involves how people interact and engage with a website. User experience influences how we direct users through the site. How to assist them to specific end goals. It includes many elements of design and development including how something looks and works. Make functionality decisions with the end-user in mind, not your personal preference or the tools you are using.
Persona: Fictional character that represents a primary user of your site/product. Usually, personas are very well-developed because they should describe real people with real motivations.
Wireframe: Low-fidelity layout of a site, representation of general block-level content, and interactive elements.
Mockup: High-fidelity layout of a site, representation of final color, typography, imagery, etc.
Prototype: Interactive version of a site, may not be developed with the last code.
CTA: Call to action, regularly matched with a key.
Conversion: When a user takes a specific wanted action.
Landing Page: Single page optimized for a distinct viewers or search generator result
Usability: How real users cooperate with your site, normally tested by examining a series of supervised tasks
User Interface Indications
User interface (UX, UI) includes components on the page with which the user interacts. Your user interface does affect your user experience, although they aren’t the same thing. Don’t require your users to think. Design an intuitive interface that takes advantage of modern patterns.
Breadcrumb: Hierarchical content links.
Menu: Primary navigation area, sometimes with a dropdown or flyout of sub-menu items.
Filter: Predefined elements that allow narrowing down of visible content by various taxonomies (taxonomies are a fancy way of saying categories).
Search: Open-ended input that queries content and returns a list of results.
Slider: A trendy, animated way of presenting data that you apparently shouldn’t apply.
Construction Terminologies
Composition relates to how the content and aesthetics of a website work together. Each component on the web page should feel like it belongs within the website layout, not added as an afterthought.
Balance: Applying comparable or parallel design elements to make the composition seem equal.
Repetition: Using recurring elements to reinforce patterns or serve as familiar visual cues.
Whitespace: How much “breathing room” does each element have?
Grid: Underlying structure to a design that determines how everything lays out.
Rule of Thirds: A visual concept that states the most pleasing focal points are at the intersection of three rows and columns
Hierarchy Terminologies
Hierarchy involves the relative importance of clarity of pieces of information. Visual hierarchy is a collection of details like typography, color, proximity also balance. Having a great hierarchy benefits with the scannability of information. Helps users focus on information on the page by importance. Hierarchy also is of use to direct users through a website. Decisions made about the styling and position of elements produce a usual impact on website experience.
Scale: How large or small are the elements on the page relative to each other?
Proximity/Alignment: Which elements on the page are associated with each other?
Focal Point: The place on the page to which we are directing the user’s attention
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, proper alignment, column size also relative sizing of a kind have a massive impact on user experience as well as aesthetics. Typographic choices should be deliberate, both reinforcing big-picture systems and being appealing and easy to read or understand.
Font (typeface): Collection of letters & glyphs/symbols
Font-family: Which typeface are you using?
Font-size: How big/small is it?
Font-weight: How heavy/light is it?
Font-style: Italic, underline, strike.
Line-height (leading): How much space between lines?
Letter-spacing (tracking): Adjusting the spacing between groups of letters/blocks of text.
Kerning: The spacing between individual letters.
Text-decoration: Is the text underlined or does it have additional styling?
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 incorporates aesthetic decisions about the use of color in a composition. Color can be applied to evoke emotion, emphasis, divide, or group elements. Color can establish visual unity and balance. Color is usually related to branding. Tone choices should be deliberate and used across the entire website.
HEX: On websites, the hexadecimal color, a six-digit number used to represent color in HTML/CSS.
RGB: Additive color model used for screens, red/green/blue light values combining to form colors.
CMYK: For printing, a subtractive color model used for ink, cyan/magenta/yellow/black ink combining to form colors.
Pantone/spot color: Specific custom inks of a particular color. Big brands usually have their custom Pantone color.
Hue: Where is it on the color spectrum?
Saturation: How vivid or dull is the color?
Contrast: How much does it stand out?
Opacity: Solid or transparent?
Imagery Terms
Imagery terms include the visual and graphical elements of a website. Imagery is necessary for communicating your message and connecting with your audience. Yet, when imagery remains used, it can include extra bulk to a website’s loading time while not doing much for user experience. Use imagery to support your message. Use the right image format for the content.
Vector: Images that are made out of math (SVG, EPS).
Raster: Images that are made out of pixels (JPG, TIFF, PNG, GIF).
Resolution: How many pixels raster images have (e.g. 800×600 or 2400×1200). A higher resolution will typically be a larger size, but higher detail.
Compression: Optimization (large/small file size).
JPG/JPEG: Best for photography including detailed images.
PNG: Best for graphics, simple color, and images with transparency.
GIF: Best for low detail graphics or animations.
TIFF: Best for print quality, not suited for screen display.
SVG: A vector image format suitable for display on the web, best for graphics & logos.
Web Terminology Terms
Web terminology terms include general vocabulary when designing for the web. Web designers don’t know about design. They also understand the technology they’re designed for.
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.
Body Copy/Body Text: The original written content, usually paragraphs, lists, quotes, etc.
Hero: The central image/graphic on a homepage or landing page, usually with a primary call to action.
Single-Scroll: A website where a majority of content is included within a single page.
Responsive Design: A design that is not fixed, but adapts to the user’s screen size and/or device.
Breakpoint: A specific point (e.g. width) where a website’s content/layout will change to fit a different interface.
Accessible: Ability of a website to be used by all audiences, including impaired vision, hearing, or motor function, through assistive technology or standard navigation.
Front-End: In general, dealing with code that runs in a browser and controls what is seen and interacted with.
Back-End: In general, dealing with code that runs on a server and controls the content and logic.
Final words
Designers have a vocabulary all their own. If you’re getting design work done, knowing the right terminology will aid you communicate with one another and obtain the results you envision. (We promise it’s a whole lot easier than high school French.)
Take a look at these design terms. Examine them. Commit them to memory. That’s too much work. Bookmark this page and use it as your design word cheat sheet. Over here are the most important descriptive design words you should know.
