Grid Systems

The Grid System

In graphic design, a grid is a structure of intersecting lines that serve to guide the layout of content. This framework is used to organize content in a rational, easy to process manner through the layout.

Not only do grids serve as a guide for positioning elements within a layout, they also help with responsive design (web pages must render well on a variety of devices, browser window sizes, and screen sizes). In short, grids assist designers in creating a unified structure. They speed up design and make it easier to align future elements against existing ones.

The Rule of Thirds

A common application of grids is “the rule of thirds.” This rule — often applied in photography — utilizes an invisible grid of two horizontal and two vertical lines. The important elements in the image should be placed along those lines or at the points at which those lines meet.

For instance, on the grid below the intersection points noted in red. In the photograph below the important element — the pineapple — is placed where the left two intersection points would be. To most, this layout is more interesting and appealing to the eye than a layout in which the pineapple is centered.

Phi (Golden Ratio 1.61803399)

The Golden ratio is a special number found by dividing a line into two parts so that the longer part divided by the smaller part is also equal to the whole length divided by the longer part.

The Golden Ratio determines the most pleasing set of proportions for an object and can be simplified by the ‘rules of thirds’. When the Golden Ratio is combined with a grid, rules for size, position and proportion can help a layout feel coherent and aesthetically appealing.

You can apply Phi to your design by taking the length or width of your page and dividing it by Phi.

The image below shows a horizontal and vertical split using this dimension.

Applying the Rule of Thirds & the Golden Ratio.

12 Column Grids

Common Breakpoints for responsive designs

Setting up a spacing system with units of 8 pixels

Set up a spacing system to create a consistent grid system.

Start by defining a base number for your grid.

Material Design principles use divisions of 8: 8px / 16px / 24px / 32px / 40px / 48px / 56px and so on for all padding / margin between elements (sometimes 4px if you need to go in tight).

You can use other base number like 5: 5  / 10 / 15 / 20 etc..

Creating Grids in Sketch using 8 px Units

Select Artboard

View menu > canvas > show rulers (if, not already showing)

View (icon top right) > show layout (lets you see grid on artboard)

View (icon top right) > layout settings (lets you define the settings

Columns

  • Total width = width of Grid.
  • Off set = if the width of the grid is less than the full width you divide the excess by two to center the grid – so…. Artboard width – Total Grid width / 2 = offset
  • Number of columns (Desktop = 12, Tablet 9” 12, Mobile 6)

Rows

  • Gutter height set as 4 (smallest division when using 8px unit base)
  • Row height set as 1

Desktop HD w1440 with 1248 Grid

Tablet 9” w768 with 720 Grid

iPhone 7 w375 with 360 Grid

Grid Further Reading

Grid Resources

 

 

Typography

Like other key design elements, typography matters. It can set a tone and mood, and even influence the meaning a reader draws from the text.

Font vs Typeface

A typeface is a family of fonts.

For example, Helvetica is a Typeface and within this font family  are fonts of varying weights and styles e.g. 12 pt Helvetica Bold.

There are 5 Typeface Families

Geometric Sans

  • Represents 3 different groups Geometric, Realist and Grotesk
  • Geometric Sans-Serifs are those faces that are based on strict geometric forms.
  • Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

Humanist Sans

  • These are Sans faces that are derived from handwriting
  • Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

Old Style (aka Venetian)

  • These are our oldest typefaces.
  • Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond

Transitional & Modern

  • Typefaces emerged as type designers experimented with making their letterforms more geometric, sharp and virtuosic
  • Examples of transitional typefaces: Times New Roman, Baskerville. Examples of Modern serifs: Bodoni, Didot.

Slab Serif (aka Egyptian)

  • They convey very specific — and yet often quite contradictory — associations.
  • Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

Popular Type Faces

Sans Styles

  • Myriad
  • Gotham
  • DIN
  • Akzidenz Grotesk
  • Interstate

Sans Serif

  • Mercury
  • Electra
  • Perpetua

Anatomy of a Typeface

Ascenders, Meanline, Baseline & Descenders

Kerning, Tracking and Leading

Tracking is overall letterspacing.

Kerning is selective letterspacing.

Leading is the space between rows.

Choosing the right fonts

  1. Consider your brand & Audience
  2. Make sure it’s readable
  3. Factor in information hierachy
  4. Contrast font family & weights

Best Practices

  • Make sure the body copy is readable.  Readability has a lot to do with color contrast, character spacing, tracking, and leading.
  • Bold, sans-serif, all-caps works well for header text
  • Medium serif works well for body text.
  • To create visual hierarchy play with size, weight, color and position.
  • You can use just one typeface but useful to have different fonts to create information hierarchy
  • Break long text up with bulleted lists if possible
  • Chunk copy into sections with easily scanable sub-headers
  • Avoid single words on a single line at the bottom of a par (Widow) or at the top (Oprhan).
  • Point size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels. Not every font appears equally large at a given point size, so be prepared to adjust as necessary.
  • Line spacing is the vertical distance between lines. It should be 120–145% of the point size. In word processors, use the “Exact” linespacing option to achieve this. The default singleline option is too tight; the 1½ line option is too loose. In CSS, use line-height. The easiest way to calcualte is to multiply the font by 1.5 (16pt / 24, 21pt / 32, 24pt / 36 or 32pt / 48)
  • Line length is the horizontal width of the text block. Line length should be an av­er­age of 45–90 characters per line (use your word-count function) or 2–3 lowercase alphabet, like so:abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Questions to evaluate Typefaces

  • How legible is it? Do the letterforms feel organic or more stylised or geometric?
  • How readable is it? Does it invite long-form reading, or is it more suited to headlines?
  • How flexible is it? Does it work in different sizes and weights? Does it function in both body copy and titles?
  • How unique is it? Is it memorable? Does it have interesting details? Does it have amazing numerals or an interesting looking lowercase g?
  • How classy is it? Does it feel elegant or more down-to-earth?
  • Has it been optimized for screen? Will it look good on Macs, PCs and mobile devices?

Creating a Design System for Typography

  • Header
  • Sub Heads
  • Intro Par
  • Body copy
  • by lines
  • Time Stamps
  • Grid definition (vertical and horizontal)

Tips

  • Most brands have existing Typefaces so best to refer to Brand toolkits or guidelines before selecting a new typeface for a client
  • Remember most typefaces cost money – each weight or style will add to the price tag
  • Some typefaces are designed specifically for Headlines (aka “display faces”.  Examples include, League Gothic, Mardrone, Didot, Grafolita, azo sans uber.
  • Use a reputable foundry to source your fonts. Adobe Subscribers can use Type kit to test various typeface’s weights and styles. Google Fonts (using free resources runs the risk of missing characters or punctuations
  • When selecting typefaces keep it exactly the same, or change it a lot!

Further Reading

Typography Resources

  • Fontface Ninja (a browser extension that lets you inspect, try, buy and bookmark any fonts on any website) https://fontface.ninja/
  • Kerntype (a font spacing game) by Mark MacKay for Method of Actions http://type.method.ac/
  • Google Fonts: hundreds of high-quality open-source web fonts. (You can download .ttf fonts by adding fonts to your collection and clicking the download arrow in the top right of the screen.)  http://www.google.com/fonts/
  • The League of Movable Type: a collection of high-quality open-source typefaces that are licensed for use on the web, and available for download as .otf font files. https://www.theleagueofmoveabletype.com
  • Typedia.com: A Shared Encyclopedia of Typefaces. Typedia is a resource to classify, categorize, and connect typefaces. Search for typefaces, designers, foundries, and more.

Color Theory

Color Theory 101

Hue – Color in its purest form.

Saturation – intensity of color expressed as the degree to which it differs from white.

Value – how light or how dark the color is.

Contrast

The degree to which colors differentiate from each other in terms of their hue, saturation and color.

If contrast is too high it can cause strain on the eye of the user.

If contrast is too low – low contrast limits legibility.

Color Wheel

Primary, Secondary & Tertiary Colors

Primary Colors are Blue, Red & Yellow

Secondary colors are created by mixing two adjacent primary colors.

  • Primary + Primary = Secondary
  • Blue + Yellow = Green
  • Red + Yellow = Orange
  • Blue + Red = Purple

Tertiary colors made by mixing Adjacent Primary and secondary colors.

  • Primary + Secondary = Tertiary Color
  • Blue + Purple = Blue Violet
  • Red + Purple = Red Violet
  • Red + Orange = Red Orange
  • Yellow + Orange = Yellow Orange
  • Blue + Green = Blue Green
  • Yellow + Green = Yellow Green

Color Combinations

Monochromatic

Light and dark values and tones of a single color.

Use tints, shades and tones as complementary colors.

Triads

Taking three colors that are adjacent from one-another.

Analogous

Taking three colors next to each other.

You choose a main color and then select the two colors either side.  If yellow was your main color you’d also have green and orange as your complementary colors.

Complementary

Two color on opposite sides of the pallet.

When placed together the boarder can look like its vibrating which can be jarring.  So break the colors up with neutral colors or find different tints and tones of the color to avoid this.

Split Complements

Taking one color and selecting the complementary colors either side of the color directly opposite.

Square Colors

The square color model takes four colors evenly spaced around the color wheel. In the example above, the colors are blue, orange, red-violet, and yellow-green. This color scheme is really nice and would work well with one strong color and muted versions of the other colors.

Tetradic Colors

Tetradic color schemes are built by creating a rectangle on the color wheel. Select two opposites on the color wheel and then select another color two spaces over and its compliment across the color wheel.

Tints & Shades

A tint of a color is when you take a color, such as blue, and add white to it. A shade is a hue that has black added to it. You can create a monochromatic color scheme buy using tints and shades of the same hue.

Warm Colors

Warm colors (Red > Yellow) create a sense of warmth and heat in an image or a design. When you see warm colors, you think of the sun, heat, fire, and love (passion). Red is the color of blood, which is warm, and orange and yellow go along with summer. Adding an orange photo filter to an image instantly makes it look warmer and happier.

Cool Colors

Cool colors (Purple > Green) carry connotations of cool climates, winter, death, sadness, ice, night, and water. Cool colors can be associated with calmness, tranquility, trust, cleanliness. Purple is associated with royalty, because they are supposed to be reserved.

Psychology of Color

Red. It symbolizes both good and bad feelings including love, confidence, passion, and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness, the sunlight, joy, and warmth.

Green. The color of nature which brings calming and renewing feelings.

Blue. It often represents some corporate images. May be associated with distance and sadness.

Purple. Long associated with royalty and wealth. It’s also a color of a mystery and magic.

Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.

White. The color means purity and innocence, as well as wholeness and clarity.

Selecting UI Colors

A simple strategy for selecting web pallet is to select a hero image and accent color and support with neutrals.

This pallet would look like this:

  • Hero Color
  • Accent Color
  • White
  • Dark gray
  • Light gray

Color Tools

Further Reading

Visual Design Resources

TYPES & FONTS

  • Google Fonts: hundreds of high-quality open-source web fonts. (You can download .ttf fonts by adding fonts to your collection and clicking the download arrow in the top right of the screen.)  http://www.google.com/fonts/

COLOR

GRIDS

PHOTOGRAPHY

The following are a few collections of free high-quality images that you may download and incorporate into your designs.

ICONS & SYMBOLS

  • FontAwesome: a web-friendly, open-source icon font. You will need to open “glyphs” under the type menu in Illustrator to access these icons.  http://fontawesome.io/
  • The Noun Project: another source for creative commons (open-source) icons. You will need to search for individual icons and download them one at a time as either png files if you are working in Photoshop, or svg files if you are using Illustrator. To gain free access to these icons, you will need to create an account and agree to attribute the icon designer in your design. For the purposes of this class, you may assume that your client would pay for the icon, so attribute the icon designer in your presentation deck, not in your polished landing page design.  http://thenounproject.com/
  • Material Design Baseline Icons: https://material.io/tools/icons/?style=baseline
  • Font Awsome Icon Cheatsheet: https://fontawesome.com/cheatsheet?from=io

VISUAL DESIGN INSPIRATION

 

Accessibility Testing Environments

Download some Browsers

The first thing you need to do to set-up a Accessibility Testing environment is download a couple of browsers.

Firefox is the first browser you need.  It’s compliant with all web coding standards and has a lot of free plug-ins.

You can download Firefox from: http://www.mozilla.org/en-US/

The next browser is called Lynx.  It’s a text only web browser.  You can download it here and ther are instructions to follow as well:

http://www.vordweb.co.uk/standards/download_lynx.htm

Lynx isn’t straight forward to use so you’ll need to refer to these guides:  http://www.vordweb.co.uk/lynx/lynx_help_main.html

Configure Firefox with some extensions.

WEB DEVELOPER

The first extension is called Web Developer and can be downloaded here:

http://chrispederick.com/work/web-developer

The Web Developer Tool bar allows you to manipulate and test live web pages.

  • Disable – Allows you to disable a number of features from your browser such as Javascript which allows you to view you page without JavaScript.
  • Cookies – Allows you to manipulate cookies to check the differences when testing cookie based scenarios
  • CSS – Features a disable styles to allow you to view web pages as plain text
  • Forms – enables manipulation of form attributes
  • Images – good for checking how sites look without images or checking alt tag data

The second is called the Accessibility Evaluation Tool, and you can download that here:

https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/?src=search

The Accessibility Evaluation Tool supports web developers in testing their web resources for functional accessibility features based on the iCITA HTML Best Practices (http://html.cita.uiuc.edu).

Support documentation can be found at: http://firefox.cita.illinois.edu

Accessibility Evaluation Tools includes a number of interesting features:

  • Navigation – Allows you to isolate and view features of a page in a table (e.g. Titles, Headings) which makes it easy to review these items. An interesting one is the Links option which is similar to how Screen Readers will view links and you can review how well the links are tagged and explained.
  • Style – Select High contrast view 1 to see how your site works for the visually impaired
  • Validators – test you page against the w3c web standards
  • Tools – check how well your web page performs against accesibility tests like Cythia says.

Fangs is the next extension you’ll need:

http://www.standards-schmandards.com/projects/fangs

Fangs will help you learn more about how screen readers work. It can make it easier for you to understand how a web page may appear in a screen reader.

Fangs doesn’t appear on your browser as a button or as a link in a menu.  You need to right click to get it.

When you run Fangs you’ll see a page how Jaws, a popular screen reader, would see it.

WCAG Contrast Checker – this extension can check the combination of colors to see if it is appropriate for visual perception based on the requirements of the WCAG 1 and WCAG 2.  You can download it here:

https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/?src=search

You access the Contrast Checker from the Tools menu under Color Checker.

Tools to Bookmark

Colorblind Web Page Filter – View your actual web pages through the eyes of visitors with three different types of color blindness.

http://colorfilter.wickline.org

Vischeck – color blindness emulator for images

http://www.vischeck.com/vischeck/vischeckImage.php

Colour Contrast Check

http://www.snook.ca/technical/colour_contrast/colour.html

Juicy Studio Readability test

http://juicystudio.com/services/readability.php

Automatic Accessibility Tools

Cynthia Says checks your  website for compliance against WCAG or Section 508 (if you’re in the USA). You can find it here:

www.cynthiasays.com

All you need to do is enter your URL and it’s worth checking the “Include the Alternative Text Quality Report” option.

Jaws Screen Reader

This is a program used by blind and visually impaired web users to read content off the screen.

Jaws is not a free program but you can download a fully enabled demo from their website:

http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp

 

Web Accessibility General Principles

Consistency

  • Patterns help everyone understand information.
  • There may not always be a best answer so pick one and stick to it.
  • Even when sites have inaccessibility problems, if they are consistent about them, users can often figure them out and make do

Seperation of content, presentation, and behaviour

Use each web technology for intended purpose:

  • HTML: Marking up what content is
  • CSS: Controlling the visual presentation
  • JavaScript: controlling the behaviour of the content

This enables progressive enhancement and makes your content accessible even when the script and styling is stripped away.

Test out the accessibility technology

  • Try and understand screen readers and accessibilty tools.  This includes the software used by people with disabilities, emulators of disabilities and compliance checkers.
  • However, unless you use these tools on a daily basis or actually have a disbaility yourself you wont use it like a real user

Use real people for testing, source them from:

  • Organisations for specific disabilities or cross-disabilities
  • College and university programs for students with disabilities
  • Local disability-related support groups
  • Local or regional government rehabilitation or disability services departments
  • Senior organisations and local senior centres
  • Independent living organisations

Learn from Accessibility reviews from both experts and people with disabilities

Web Accessibility Standards

Web Content Accessibility Guidelines are published by W3C.  You can learn more here:

http://www.w3.org/WAI/intro/wcag

WCAG 2.0 has 12 guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust. For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA.

In short, WCAG 2.0:

Perceivable

Operable

Understandable

Robust

Maximize compatibility with current and future user tools.

Most people will use the supporting materials when developing Web content and Web tools, instead of the actual technical standards document. The WCAG 2.0 supporting technical materials include:

 

Web Accessibility

What is Web Accessibility?

Web Accessibility simply means enabling people with disabilities to use the web.

This covers all disabilities that may affect one’s access to the web:

  • Visual
  • Auditory
  • Speech
  • Physical
  • Learning
  • Cognitive
  • Neurological

In practice you can’t make content accessible to everyone but you can make it more accessible.

Like most most web development, planning web accessibility at the start of a project makes life alot easier.  Examples of accessible sites can be seen at:

How do people with disabilities access the web?

There are two main ways people disabilities access the web.  Either through Assitive Technologies (better known as AT) or by manipulating the common technologies we use.

Assistive Technology (AT)

  • Screen readers & magnifiers
  • Refreshable Braille display
  • Captioning Software
  • Switches and pointer sticks
  • Touch screens

Same Technology used differently

  • Keyboard navigation
  • Browser or system font size
  • Briwser window size
  • Color settings
  • User style sheets

To review demo’s of accessible and inaccessible sites wisit W3C’s Web Accessibilty Initiative (WAI) at:

http://www.w3.org/WAI/demos/bad/

Brand Guidelines in Web Design

Key questions that will help you understand expectations around a brand related role are these:

  • Do brand guidelines exist already?
  • If so, how closely do they need to be adhered to for this project?
  • Who is responsible for setting or maintaining brand messaging, brand look and feel, and tone of content (such casual or professional)?
  • Are new audiences going to be targeted that aren’t covered by previous brand deffinitions? If so, who is responsible for ensuring the brand guidelines are still appropriate to those audiences?
  • Will there be naming or renaming activities?  If so, how should I plan to be involved? e.g. creating a name for a new tool that will be heavily promoted)