Working on the design for your online store should be a fun process. While watching your brand come to life on the web is exciting, sometimes maintaining a fresh design may begin to feel overwhelming. Will this font work with my brand? Why is this image a low resolution?
To make sure you’re getting the most out of your design, it’s important to understand basic design terminology. We’ve put together this glossary of some design terms you’ll need to know to understand design and how it works on the web!
Body Copy: The main font used for large amounts of text in a design. For example, this type that you’re reading right now is all body copy.
CMYK: A color mode made up of Cyan, Magenta, Yellow, Key (black). CMYK is used for print purposes.
Display font: Used to attract attention and stand apart from the body copy. In the Design Department in Creative Services, we use display fonts not only to draw attention to important areas of a site, but to add visual interest to the design as well.
Grid: The base and framework made up of evenly spaced and divided columns. Working on a grid is crucial when designing a responsive site for 2 major reasons: 1. It allows designers to cleanly and neatly arrange elements in a consistent manner, and 2. It helps the developers when it comes time to code a design. It’s much easier for a developer to code a site with elements and text boxes that are all consistently aligned instead of all over the place.
Hex Code: A six-digit figure used in code to represent colors. For reference #000000 is the hex code for black, and #ffffff is the hex code for white.
Hierarchy: The visual arrangement of elements on a page that help rank importance. For example, we might make a title large and bold to attract attention and keep image captions smaller and less prominent.
Leading: The space between lines of text. Leading (pronounced ‘ledding’) affects the density of a group of text. Try to avoid tight leading, as that may cause overlap of text making the content unreadable. Alternatively, try to avoid very loose leading. Lines of text with too much space in between can look disjointed.
Opacity: The transparency of a design element. The lower the opacity, the more transparent it is.
RGB: A color mode made up of Red, Green, Blue. RGB is used for on-screen purposes. This color mode is what Creative Services Designers use most often.
Raster Object: Design elements comprised of pixels. When pixels are shrunk or stretched, they lose clarity and can make for a very blurry image.
Responsive: A design’s ability to adapt to various devices and screen sizes. Creative Services Designers work to ensure that a design works well across all devices to provide an optimal shopping experience for users.
Sans serif font: Fonts without decorative strokes at the end of horizontal and vertical lines of a character. Sans serif fonts are generally more clean and modern. For example, Verdana is a sans serif font.
Serif font: A font with decorative strokes (hello, serifs) at the ends of letters and symbols. Serif fonts generally give a professional and traditional tone. Times Roman is an example of a serif font.
Tracking: The space between letters. The tracking of a body of text changes its density and appearance. If text has loose tracking, the letters are spaced far apart. Tight tracking pushes the letters closer together.
UI: User Interface. UI design basically means to design an intuitive, user-friendly interface that’s clear and easy to use.
UX: User Experience. UX is basically how a person feels when interacting with a web application, software or website.
Vector Object: Design elements comprised of points and curves. Unlike raster objects, vector objects allow you to freely scale an object in any direction without losing quality or resolution. If possible, logos should always be in vector format to allow for maximum flexibility both offline and on.
Just remember, throwing yourself into the world of web design doesn’t have to feel like you’re learning a new language. We hope that this glossary of design terms comes in handy as you tackle your own design endeavors with Volusion!