Basic Best Practices for Web Design

When onboarding new designers, I like to introduce them to basic best practices to follow during the design phase of a full web build process.

CONTENT HAND-OFF

At the start of week six in my agency’s web build process, phases for discovery, site structure planning and content creation are complete. A Lead Strategist begins the design phase by handing off the following materials to our Creative team:

  • Creative Brief — a document that guides the project and fully summarizes objectives, target audiences, tone, message, initial feedback and examples from stakeholders, etc.  
  • Client Assets — photography, video, vector logos, existing brand guidelines, etc.
  • Content — consisting of listed assets and copy from a subject expert
  • Wireframes — showing the basic framework of information and functionality
  • Site map — visualization of the website structure and main navigation
  • Timelines — with internal deadlines, external deadlines and specified ownership

Our first responsibility as web designers is to get what we need.
Ideally, we would have all complete information upfront in order to make the most informed and timely decisions possible.

WEB DESIGN PHASE

Stay true to a brand.
While designers consider the following elements of composition, they must remember to stay true to either a pre-existing brand, a refreshed brand or their entirely new brand. Designers should develop and build a brand while maintaining its strength and consistency.

TYPOGRAPHY

My in-house developers suggest that we design with a maximum of five different fonts—which includes font weights—so as not to impact loading time. I suggest designers select a great workhorse for body copy and use the Light, Italic and Bold weights plus two display fonts for headlines, callouts, and block quotes. We use a mix of Typekit, Google Fonts and custom purchased fonts when budget allows.

A great resource for web typography trends is Typewolf (www.typewolf.com.)

Typography is essential in communicating hierarchy and creating structure, both to a user and search engine.
All headlines, from <H1> – <H6>, need to be styled in order of descending importance. Even if all of these labeled styles aren’t used in the current homepage or subpage templates, they need to be available in a client’s publishing platform (such as WordPress or Drupal.)

COLOR PALETTE

Don’t mix color models.
When working with an existing brand, refer to its digital palette specified in the brand guidelines. One common mistake that I see is a mixing of color models. Use only the RGB builds or HEX codes from a provided Brand Guidelines and only place graphics that use the same color model. If a designer uses the correct HEX colors but places a logo with PMS colors—they won’t match.

Reserve an accent color for indicating interactivity.
Use it consistently on buttons and text links without competing backgrounds in order to drive users to your call-to-actions. When selecting this accent color, make sure it works on the full range of background colors from the darkest you intend to use to the lightest gray and white.

LAYOUT

A wireframe serves as a framework for the content’s flow and functionality. It is not an intended layout. Our Creative team takes the provided wireframes and combines them with best practices for UI/UX and brand strategy in order to create fully-designed desktop and mobile layouts.

Web design needs to be device-agnostic in order to provide a seamless brand experience
Designers need to consider a multi-device approach. Desktop working designs should be viewed on both a large screen monitor and a small laptop. Mobile designs should be viewed on a smartphone in real time with the Adobe Preview CC mobile app. There is no substitute for viewing working designs as they are meant to be viewed.

All of my agency's webpage layouts align to Bootstrap’s flexible grid system. Column widths will be set in percentages during the site development phase so that the layouts automatically size to the width of the browser window. In this way, our designs are always responsive to any current or future device on the market.

Function before Form; Usability must come first. 
Usability has to be effortless as possible, which is why a direct, simple approach should always be considered because it is often the most successful.

Use interaction, not for its own sake, but for user engagement and navigational cues. Extra bells and whistles work best when they work to reinforce the brand and messaging.

No matter what the medium, the rules of good graphic design apply. 
To conclude, web designers have their own challenges, but they also need to heed the rules of good graphic design and brand strategy that apply to every medium.