Design Pitfalls for Implementation

Intro

Image and Text Dimension Relationship

• Avoid creating width/height relationships between adjacent elements. Further, presenting this to the client can create unrealistic expectaions.
• Plan on the heights or widths not matching.

Original Presented Design

My Site

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum. Aliquam eget ex ac eros dapibus semper. Morbi laoreet blandit sapien. Pellentesque varius faucibus leo ut ullamcorper. Sed lacinia nunc tempor, dignissim arcu ut, faucibus massa. Praesent enim nunc, pretium in dapibus vitae, tempus sit amet dui. Duis sed urna sapien. Aliquam id ultrices sem, nec fringilla ipsum. Ut non diam tempus, imperdiet ligula non, tincidunt felis.

50%/50% Ratio

Presented Design Width

My Site

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum. Aliquam eget ex ac eros dapibus semper. Morbi laoreet blandit sapien. Pellentesque varius faucibus leo ut ullamcorper. Sed lacinia nunc tempor, dignissim arcu ut, faucibus massa. Praesent enim nunc, pretium in dapibus vitae, tempus sit amet dui. Duis sed urna sapien. Aliquam id ultrices sem, nec fringilla ipsum. Ut non diam tempus, imperdiet ligula non, tincidunt felis.

Static Left

Presented Design Width

My Site

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum. Aliquam eget ex ac eros dapibus semper. Morbi laoreet blandit sapien. Pellentesque varius faucibus leo ut ullamcorper. Sed lacinia nunc tempor, dignissim arcu ut, faucibus massa. Praesent enim nunc, pretium in dapibus vitae, tempus sit amet dui. Duis sed urna sapien. Aliquam id ultrices sem, nec fringilla ipsum. Ut non diam tempus, imperdiet ligula non, tincidunt felis.

Image and Text Position Relationship

• Avoid creating relationships between foreground and background elements, particularly with text, which word-wrap unexpectedly.
• Avoid embedding the text inside the image file, as this poses accessibility/responsive issues.
• Create consistency in placement, and content management guidelines, particularly if there'll be ongoing updates, or multiple versions.

Positioning

The dotted white box indicates where the text block is.

Original Presented Design

Static Text Position with Cropping Image

Relative Text Position with Static Cropping Image

Relative Text Position with Covering Cropping Image

Relative Text Position with Containing Cropping Image

Text Embedded in Image

Text may become unreadably small, or comically large.

Consistency Across Content

• Avoid scenarios where the client may add different background behind text.
• Create consistency in placement, and content management guidelines, particularly if there'll be ongoing updates, or multiple versions.

Original Presented Design

High Contrast Example

Background images can change over time, and what works for one, may not work for another, especially at different sizes.

This is an extreme-contrast example, but problems can arise even at lower contrast.

Mid-Contrast Example

Possible Fix

Create a predictable semi-transparent background behind the text.

WCAG2.0 Requirements

WCAG2.0 requires 3:1 contrast for text for large text, and 4.5:1 contrast for regular text. For instance, no part of the text on this background meets contrast requirements. One should measure the brightest background point versus the darkest foreground point.

Proportionality

• Avoid creating dependencies on proportionality for the presentation.
• Create decoupled, independent components.
• Plan for what happens when the screen is larger than the presented design, not just smaller.

Original Presented Design

Pay attention to how the relative sizes the components seem "right" versus each other in the original presented design.

A "screen view" is added to show what's above-the-fold versus below-the-fold on a typical 16:9 horizontal screen.

Full-Width Scaling (no max-width)

Allow component rows go to the edge of the monitor/screen.

Max-Width Scaling

Allow component rows go scale up to a maximum width.

Mixed Scaling

Some components stretch - some don't.

Uniform Scaling

Everything scales the same amount, including padding, font sizes, border witdths, etc. The biggest issue is that eveything becomes rediculously large on large screens.

Designing on a Grid

Most front-end frameworks use a 12-column grid system.

Front-end frameworks are only useful if the designs deliberately incorporate and adhere to the framework's tenets.

Note: This relates heavily to the quesiton of prime-number column count . Namely, that prime numbered columns (outside of 2) does not evenly fit into a 12-column grid structure.

• Avoid arbitrary sizes of columns.
• Plan using a grid system - likely a 12-column one.

Example 12-Column Design

With Real Content

Similar to other warnings on this page, the amount of content in each panel can make the design awkward. Prepare for this.

Presented Design Width

My Site

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, lacus vitae commodo cursus,orci mi pulvinar sem, et egestas elit dui pellentesque ipsum. Aliquam eget ex ac eros dapibus semper. Morbi laoreet blandit sapien. Pellentesque varius faucibus leo ut ullamcorper.

In pretium, lacus vitae commodo cursus,orci mi pulvinar sem, et egestas elit dui pellentesque ipsum. Aliquam eget ex ac eros dapibus semper. Morbi laoreet blandit sapien. Pellentesque varius faucibus leo ut ullamcorper. Sed lacinia nunc tempor, dignissim arcu ut, faucibus massa. Praesent enim nunc, pretium in dapibus vitae, tempus sit amet dui. Duis sed urna sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, lacus vitae commodo cursus,orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

Primes and Columns

Note: This relates heavily to the quesiton of using a standard grid. Namely, that prime numbered columns (outside of 2) does not evenly fit into a 12-column grid structure.

• Avoid prime number columns (3, 5, 7, 11, etc)
• Use numbers which have multiple divisors, like 6 (6x1, 3x2, 2x3, 1x6)

Original Presented Design

Wrapping

Because there's no even breakdown, we're left having lopsided presentation.

Potential Fix - Non-primes

A column count of 4 can subdivide more evenly.

Designing around Breakpoints

Most front-end frameworks use a 12-column grid system.

Front-end frameworks are only useful if the designs deliberately incorporate and adhere to the framework's tenets.

Note: This relates heavily to the quesiton of grid systems.

• Avoid design elements or situations that need specific spacing or proportionality to "work".
• Avoid design elements or situations that need custom behavioral styles that change outside of the standard established breakpoints.
• Plan using a grid system - likely a 12-column one.

Example 12-Column Design

With Real Content

Similar to other warnings on this page, the amount of content in each panel can make the design awkward. Prepare for this.

Perfect Content

• Avoid copy/pasting placeholder text, creating perfect balance in the presentation.
• Use varied content, with realistic varying lengths that'd happen in the real world.
• Avoid character limits as a solution. The client inevitably doesn't provide content which adheres to the rules, and most font families are variable-width fonts.
  
  "WWWWWWWWWWWWWWWWWWWW" and "iiiiiiiiiiiiiiiiiiii" are both 20 characters long. This, along with word-wrapping rules, reduces the usefulness of character-limits in creating predictable outcomes.

Original Presented Design

My Site

Example Panel Label Text

In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Example Panel Label Text

In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Example Panel Label Text

In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Example Panel Label Text

In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Example Panel Label Text

In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Example Panel Label Text

In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Realistic Design

Presented Design Width

My Site

Lorem

In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Nullam varius, turpis et documentationes, est eros bibendum elit, nec luctus magna felis sollicitudin mauri

In pretium.

View More

Lacus vitae commodo

Excepteur sint occaecat responsabilitas cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus, nulla gravida orci a odio. Nullam varius, turpis et documentationes, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.

View More

Econsectetur administrationes adipiscing

Excepteur sint occaecat responsabilitas cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

View More

Vestibulum tortor quam, feugiat vitae

In pretium, lacus vitae mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Occaecat

Elit dui.

View More

Having some kind of box/outline can change the dynamics of the presentation.

Presented Design Width

My Site

Lorem

In pretium, lacus vitae commodo cursus, orci mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Nullam varius, turpis et documentationes, est eros bibendum elit, nec luctus magna felis sollicitudin mauri

In pretium.

View More

Lacus vitae commodo

Excepteur sint occaecat responsabilitas cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus, nulla gravida orci a odio. Nullam varius, turpis et documentationes, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.

View More

Econsectetur administrationes adipiscing

Excepteur sint occaecat responsabilitas cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

View More

Vestibulum tortor quam, feugiat vitae

In pretium, lacus vitae mi pulvinar sem, et egestas elit dui pellentesque ipsum.

View More

Occaecat

Elit dui.

View More

Sticky Headers

• Avoid sticky excessive headers/footers — especially for small screens. They permanently use up vertical real estate.
• Maybe disengage the stickiness below a certain "comfortable" resolution.
• Avoid large page headers/footers — keep them trim -— if sticky.

Original Presented Design

Varying Widths; Regular Scaling

Also: beware of dropdown panels that go offscreen.

Compressable Space

• Avoid filling every blank space with something in the design.
• Plan on having blank space ("crumple zones") available for things to move into, on smaller screens.
• If the implementation goals include CMS-integration, it'd be better to avoid horizontal navbars entirely. Or, to configure the CMS to police this strictly.
  
  Otherwise, this opens up the chances that the client or content manager will add a new nav entry, see that it "works" for them on their screen, and deploy without bothering to check other resolutions, resulting in breaking the site at lower resolutions.

Original Presented Design

Broken Under Varying Widths

If the design doesn't have a plan or space for smaller/larger widths, the design quickly breaks. What the developer supposed to do if there's no room at lower resolutions?

Design with Compressable space

• Avoid designing for "mobile", "tablet" and "desktop" - switch the mentality and framing to "low", "medium" and "high" resolutions, for example.
• Focus on device-agnostic designs that are based on capaibilities.
• Provide resolutions and pixel density - don't make the developer guess at what resolution they're examining.