GENERAL DESIGN PRINCIPALS
A grid is the underlying structure of intersecting vertical or horizontal lines which helps us organize content and other visual elements. Most commonly, a layout will have columns to help divide the text and visual elements. This provides a foundation and “skeleton” for a layout.
Hierarchy is an arrangement of visual elements making an ordered structure by utilizing scale, proximity, colours, etc. An example of visual hierarchy is organizing text into headings, body text, and captions. We use hierarchy to help draw a reader’s attention to the most important information.
Balance is a distribution of different elements in the design. With each design we find the ratio of information, visual elements and whitespace. This dictates how long each project needs to be to retain the reader’s attention while not overwhelm them.
White space describes an empty area (of any colour) that surrounds the design elements. It is an active design element making information stand out when used correctly. Putting too many elements in one area and not using enough whitespace can lead to a busy, overcrowded design.
COLOURS
RGB is the colour system used in electronic devices. The name is an abbreviation of three colours: red, green, and blue. Designs meant to be seen on screens should be in the RGB colour space.
HEX is a hexadecimal way of writing the red, green, and blue values in a particular colour. Each hex uses six different characters by combining letters from A – F and numbers from
0 – 9. Brand guidelines should include each brand colour’s HEX code as well as the RGB and CYMK values.
CMYK is a colour system we use in print. It stands for cyan, magenta, yellow, and key, which is black. Each value tells the printer how much ink of each colour to use.
Pantone is a universal language of color that enables standardization across various materials and finishes. It ensures brands and manufacturers can control color quality from inspiration to realization.
A tint is a mixture of a particular colour with white, which increases a colour’s lightness. It’s common to use tints of brand colours if the colour palette is limited.
A shade is a mixture of a particular colour with black, to darken it down.
TYPOGRAPHY
Dummy text or placeholder text is used during the conceptual phase when there is no final or draft content to work with. This allows us to show the concept and gain our clients feedback on the look and feel. Lorem ipsum is the most commonly used filler text and the most famous one, but you can use any text.
Leading is the vertical space between two lines of text.
Kerning adjusts the horizontal space between two characters (letters and numbers).
Tracking or letter-spacing applies spacing for a range of characters instead of just the individual letter.
A widow is the end of a paragraph (a single line of text consisting of one or more words) that appears at the top of a column. A widow interrupts the reader’s eye and diminishes readability. An orphan is a single word (or syllable) that sits at the bottom of a paragraph of text.
The Deck text refers to the opening paragraph of an article that helps the reader asses what the article will be about. This can be styled similar to the body text or more defined.
A call-out is a short paragraph of text treated differently for emphasis. It can be accentuated by having a different colour, size, background, accompanying an icon or arrow to drawn in the readers attention.
The Em dash (—) separates information within a sentence, it represents a break. This dash can also be used as a pause in thought.
An En dash (–) is most often used between numbers, dates, or other notations to signify “(up) to and including.” For example, the bakery will be closed August 1–August 31.
Dash/Hyphens (-) show up more frequently in text. Hyphens are used to link elements in compound words.
FILES AND PRINTING
Resolution is the level of detail an image has. Low resolution means fewer details or quality, and vice versa. We measure resolution in DPI or PPI.
DPI or dots per inch is a measure of resolution used in print. It says how many dots of ink will be used per square inch. Images used in printed files should have a high dpi (as close to 300 as possible).
PPI or pixels per inch is a measure of resolution on screens. Typical computer screens are 72 dpi, phones and other “retina”-type displays are 400ppi+.
Print-ready files include CMYK colour modes, images converted to CMYK with high DPI, vector graphics, PDF with bleeds, crop marks, and slug marks (when needed).
Screen-ready files include RGB colour modes, images covered to RGB with high PPI.
Vector graphics are computer graphics (shapes or lines) that have infinite scalability. Vector graphics are ideal for printing — especially for large designs or applications as it will keep the same crisp quality. Formats include .svg, .ai, .eps and sometimes a PDF can be a vector.
WEB DESIGN TERMINOLOGY
A sitemap determines the structure of pages for the website. This can help determine the scope of the project.
A wireframe is a skeleton preview of a design that focuses on information and features of the website, without using any colour or decorative elements.
A prototype is a design for testing and previewing the look and feel before the coding stage begins.
User journeys are the step-by-step journey that a user takes to reach their goal. This journey will often consist of a number of website pages and decision points that carry the user from one step to another.
Responsive design is creating a design that functions and resizes across all devices and for all people. This includes making a website AODA/WCAG compliant. This includes colour contrast checkers, and screen readers.
AODA stands for Accessibility for Ontarians with Disabilities Act.
WCAG stands for Web Content Accessibility Guidelines.
UI or User Interface refers to the screens, buttons, toggles, icons, and other visual elements that you interact with when using a website.
UX or User experience refers to the entire interaction the audience has with the website, including how they feel about the interaction.
