Week 2 Page 6: Step 5

STEP 5: Start the design process

SketchbookAfter all the planning, it's time to start on the design and layout! But how should you go about this?! Here's a process that many designers use:

Brainstorm design ideas using small, quick sketches (often called thumbnails). Use pencil and paper for these!

Select sketches to develop into more detailed design ideas (often called mockups, comps or wireframes). These may still be on paper! Some designers might move to the computer at this stage.

Develop a moodboard or style sheet to visually explain design ideas to the client.

 

 

Brainstorm the Design Elements

Thumbnails

Thumbnail Designs: Brainstorming is a great way to generate screen design ideas for a web project. Most designers work with a humble pencil and paper to draw small thumbnail sketches that explore various design ideas. They might sketch small sections of layouts, e.g. the navigation design.

Here is an example of some thumbnails drawn by web designers: http://pixelbell.com/website-sketch/ Links to an external site.

Writing-first Design: Occasionally designers will also brainstorm by typing out their ideas in a wordprocessing program. This has been referred to as "writing-first design." If you're interested, here's an article about the benefits of writing-first design: https://signalvnoise.com/posts/3801-writing-first-design Links to an external site.

Please note! You should not skip the "thumbnail" phase of design. It is an essential part of the creative process.

Finding Design Inspiration: Many designers also look at inspirational sites to gather ideas for their own designs. Obviously they would not directly copy from them! Here is an overview of some web design inspiration sites: http://sixrevisions.com/web_design/16_sites_web_design_inspiratio/ Links to an external site.

A few words about sketching by hand...
Many designers find that the best way to generate design ideas is to sketch using pencil and paper. That may seem very "old school" but one of the benefits of sketching on paper is that you are not distracted by details like you would be on a computer. Once on the computer, the temptation is to fiddle with sizes, colors, fonts etc. instead of focusing on the basic layout of a design.

 

Create Wireframes, Comps and Mockups 

WireframeAfter the thumbnail sketches, the design ideas are developed into rough, skeleton layouts (wireframes) and sketches that contain more detail. Comps and mockups are more detailed versions of wireframes.

Wireframes are barebones layouts for the structure of each page. Here are some examples of wireframes: http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches/ Links to an external site.

Wireframes have several purposes:
1. To quickly layout the basic components of a page without adding much detail

2. To experiment with layouts before any coding or graphics are developed
3. To quickly show a client a very basic layout idea (although many clients find basic wireframes hard to interpret. Designers may have to use a mockup tool to create a more visual representation of the future site.)

The wireframes are later refined into onscreen comps (see definition of comp on page 2 of your text book) or mockups which are better to show to the client. Sometimes a designer will show smaller units of the design rather than a full comp. It is much more time-efficient to create small components (such as snapshots of navigation design, buttons, containers for photos etc.) to give a client an idea of where the design is going rather than producing a full screen comprehensive in Photoshop.

Be sure to consider all pages of the site in your design development phase! Don't just focus on the home page but also think about the layout for the subpages. This helps with the consistency of the design and also helps to anticipate any layout requirements that subpages might have.

Tools for Mockups and Comps

Designers seem to have a "tool" of preference when it comes to developing their site designs. Photoshop is a popular choice since it allows a designer to create an entire site page, slice up the page into graphics, navigation and content areas and export the results as CSS and HTML. Illustrator and InDesign are also useful. For quick mockups, PowerPoint or Keynote can work well. Generally, it's a poor idea to create a mockup in coding for display on a browser because of the time involved.

Newer tools have recently appeared on the web. Here are a few:

 

Create a Moodboard or Style Sheet

Moodboard 1  

The purpose of a moodboard is to create a visual "pin board" with a variety of concept ideas for a project.

A moodboard might be a slightly chaotic assortment of photos, type and swatches, or an organized layout more suitable for showing to a client (a style sheet).

Moodboards help designers brainstorm various design elements and also help them to communicate these ideas to team members or clients. They can help a client visualize the creative direction of a project. This enables them to give feedback on the mood/atmosphere of a design in the early stages of a project before significant time has been devoted to computer mockups.

Usually a moodboard (or style sheet) will include: photos, fonts, color swatches or textures, and adjectives that describe the "mood" the designer is aiming to create.

Designers might use Photoshop, InDesign or Illustrator to create moodboards although MS Word or Powerpoint have enough layout flexibility to accomplish the same task. 

Style Tiles
Another option for creating a moodboard is to use a Photoshop template from a site called: Style Tiles. The results are professional enough that these can easily be shown to clients.

 

Go to Page 7 >>