Web design often involves an overlap between disciplines, and that is why we are including vocabulary for branding, composition, Colour, and typography. Knowing how to speak the language of web design will help you ask better questions, communicate more effectively, and produce a better end product. You can also see how these terms are implemented across a wide variety of websites (for better or for worse). Because web design is a holistic process, web designers are trained to see the bigger picture as well as the details.

Brand terms

The brand is the communication of the message, the values ​​, and the experience of an organization. Everything from the company logo and identifiable design elements to the ‘gut feelings’ people get about an organization’s engine of 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: Any visual representation of your brand can include logo, Colour, typography, images, voice, etc. Not just a logo.

2. Lettermark/Wordmark/Logotype: a type of logo made from stylized letters (IBM) or words (Coca-Cola)

3. Brandmark: a type of logo made with a graphical representation (Apple, Target)

4. Icon: A simplified representation of an object or concept. A logo and an icon are not the same.

5. Design System: A repository of reusable digital components that are combined to form a website.

6. Brand Guide: A visual and philosophical reference for a brand’s Colour, personality, and voice.

User experience terms

User experience encompasses how people interact and interact with a website. User experience influences how we guide 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. Person: a fictional character that represents a main user of your site / product. People are generally very well developed because they should represent real people with real motivations.

8. Wireframe: Low-fidelity site layout, block-level rendering of general content, and interactive elements.

9. Mockup (Mockup): high-fidelity design of a site, representation of the final Colour, typography, images, etc.

10. Prototype: an interactive version of a site, it cannot be built with the final code.

11. CTA: Call to action, usually paired with a button.

12. Conversion – When a user performs 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 looking at a series of guided tasks.

User interface terms

The user interface (also known as UX & UI) includes elements on the page that the user interacts with. Their user interface impacts your user experience, although they are not the same. Don’t make your users think; Design an intuitive interface that takes advantage of modern patterns.

15. Breadcrumb (Ariadna’s breadcrumb or thread is a navigation technique used in many graphical user interfaces, in addition to web pages): hierarchical content links.

16. Menu: Main navigation area, sometimes with a drop-down or floating menu of sub-menu items.

17. Filter: predefined elements that allow you to reduce the content visible by various taxonomies (taxonomies are a fancy way of saying categories).

18. Search open entry that queries the content and returns a list of results.

19. Slider – A modern, animated way of displaying information that you probably shouldn’t be using.

Composition terms

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

20. Balance: use of similar or complementary design elements to make the composition feel the same.

21. Repetition: use of recurring elements to reinforce patterns or serve as familiar visual cues.

22. Whitespace: How much “breathing room” does each item have?

23. Grid: Structure underlying a design that determines to show everything that is presented.

24. Rule of Thirds: A visual concept that states that the most pleasant focal points are at the intersection of three rows and columns. In the visual arts and cinematographic area such as painting, photography and design, the rule of thirds is a form of composition to order objects within the image. This rule divides an image into nine different parts, using two horizontally equally spaced parallel imaginary lines and two more of the same features vertically, and recommends using the intersection points of these lines to distribute the objects in the scene. The rule of thirds is frequently used in all kinds of scenes such as portraits, landscapes, or still lives.

Hierarchy terms

The hierarchy implies the relative importance of the visibility of the pieces of information. The visual hierarchy is usually a collection of small details such as typography, Colour, proximity, and balance. Having a good hierarchy helps scan information and helps users prioritize the information on the page by importance. The hierarchy also helps direct users through a website. Decisions made about the style and position of elements have a huge impact on the website experience.

25. Scale: How big or small are the elements on the page relative to each other?

26. Proximity/Alignment: What 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: Use HTML elements correctly to imply hierarchy and usage within the content.

Typography Terms 

Typography is the aesthetic decisions about the layout of the type. The size, spacing, alignment, column size, and relative type size all have a huge impact on the user experience, as well as just aesthetics.

29. Font (typeface) (font) (typeface): Collection of letters and glyphs / symbols

30. Font-family: What font are you using?

31. Font-size: How big/small is it?

32. Font-weight: How heavy/light is it?

33. Font-style: text-decoration: italic, underline, strikethrough

34. Line-height (leading) (line height) (leading): How much space between lines?

35. Letter-spacing (tracking): adjusting the spacing between groups of letters/text blocks.

36. Kerning: the space between individual letters.

37. Serif/sans serif: Serif fonts have an additional decorative stroke or line at the end of the letters, while a Sans Serif font does not.

Colour terms

Colour encompasses aesthetic decisions about the use of Colour in a composition. Color can be used to evoke emotion, emphasis, division, or group elements; Colour can create visual unity and balance. The Colour is generally related to the brand. Color options should be released and used consistently throughout the website.

39. HEX – On websites, hexadecimal Colour, is a six-digit number used to represent Colour in HTML/CSS.

40. RGB – Additive Colour model used for displays. Red/green/blue light values combined to form Colours.

41. CMYK: For printing, the subtractive Colour model used for ink, cyan/magenta/yellow/black are combined to form Colours.

42. Pantone/spot Colour: custom inks specific to a certain Colour. Big brands often have their own custom Pantone Colour.

43. Hue: Where is it on the Colour spectrum?

44. Saturation: How vivid or dull is the Colour?

45. Contrast: How much does it stand out?

46. Opacity: Solid or transparent?

Image Terms

Image terms include the visual and graphic elements of a website. Images are important for communicating your message and connecting with your audience. However, when images are used improperly, it can add extra bulk to a website’s loading time without doing much for the user experience. Use images to back up your messages; use the correct image format for the content.

47. Vector (Vector) – images made of mathematics (SVG, EPS).

48. Raster – Images that are made of pixels (JPG, TIFF, PNG, GIF).

49. Resolution – How many pixels have a raster image (for example, 800 × 600 or 2400 × 1200)? Higher resolution will generally be larger in size, but with greater detail.

50. Compression – optimization (large/small file size).

51. JPG/JPEG – Best for photography and detailed images.

52. PNG – Ideal for graphics, simple Colours, and images with transparency.

53. GIF – Ideal for low-detail graphics or animations.

54. TIFF – Best for print quality, not suitable for on-screen display.

55. SVG – A vector image format suitable for display on the web, best for graphics and logos.

Web terminology terms

Web terminology terms encompass a general vocabulary when designing for the web. Web designers not only know design, they also understand the technology they are designing for.

56. Heading: titles and subtitles, written semantically with h1 – h6 tags. Useful for organizing information in a hierarchy and is used by search engines and screen readers.

57. Body Copy/Body Text: The main written content, usually paragraphs, lists, citations, etc.

58. Hero – The main image/graphic on a home or landing page, usually with a main call to action.

59. Single-Scroll – A website where most of the content is contained on a single page.

60. Responsive Design – A design that is not fixed, but adapts to the size of the user’s screen and/or device.

61. Breakpoint – A specific point (e.g. width) where the content/layout of a website will change to fit a different interface.

62. Accessible: the ability of a website to be used by all audiences, including visual, hearing, or motor disabilities, using assistive technology or standard navigation.

63. Front-End: In general, this is the code that runs in a browser and controls what is seen and interacted with.

64. Back-End – Generally, this is code that runs on a server and controls content and logic.

65. CMS: content management system (like WordPress).

You may also like website redesign price