MediaLabPro Logo

Designing a Website: Getting Started with Concepts, Moodboards, and Scamps

Proficient website design combines a fluid user experience with color palettes and imagery selected and arranged to evoke specific emotions and visceral reactions that augment the user experience.  Therefore, it is essential to understand a client's brand and market  in order to design a website that appeals to the appropriate market demographics and is consistent with existing brand identity.  It is also equally important to understand what the client wants - which at times can run opposed to the initial intuitions of the designer.

In order to reduce the risk of heavily investing time and effort into a design part that does not suit the taste of the customer, designers often start with preliminary documentation: including Concept documents, Moodboards, and Scamps.

"So how do we get started?"

For any custom website design project, it is important to first review the client's business and identify clear online business objectives for their project, then you can start putting together your ideas for design - here are some exercises that can help get the ball rolling: 

Basic Conceptual Document

To get the design process started, start with a very basic one-page worksheet - a Word doc is fine - that asks the client to provide input on general themes related to their preferences in terms of colors, moods, feelings, and specific examples of websites they like.  Most clients will provide rather vague, seemingly useless feedback - but don't be dismayed, the examples they provide and colors they mention are enough of a starting point to make this a useful step.

Once your client completes your worksheet, schedule a followup meeting to review their notes, and use this time to review the examples they provided for sites they like, and ask questions that relate their other notes to their example sites so you can get a better sense of mood, colors, and layout preferences.

Mood Boards

A "Mood Board" is a visual document that shows images, colors palettes, text snippets, and pattern concepts that may be used as design elements within the website. Moodboards can be arranged to demonstrate template colors and design themes as well as show ideas for specific interface design elements such as menus and login boxes.

Example Moodboard:

Once you get some ideas going, your clients can on Pinterest.com to share their own design ideas.

Color Theory and Color Psychology demonstrate that certain color combinations are more 'harmonious' to viewers and that different colors can effect mood and behavior in different situations - for example, orange and blue buttons have been shown to increase conversion rates on websites where trust is an essential element to convincing the user to buy the project; while red buttons have been shown to increase conversions when users are motivated to feel a sense of urgency in their decision to buy: for example with a time-sensitive promotion or limited quantity product.

Split-testing of websites with identical layouts but different color combinations have shown that specific colors can lead to a dramatic increase in conversions - and website design that follows color theory concepts reinforce customer confidence and promote conversions.

Here's a helpful tool for picking color combinations: ColorSchemeDesigner.com

Scamps (aka. "Mockups")

"Scamps" are typically hand-drawn or manually created, crude mockups that demonstrate general design concepts, layouts, and ideas.  When designing a logo, scamps typically demonstrate several different concepts in different colors, fonts, and design variations. When designing a website, scamps are often used to layout the position of logos, menus, body text areas, calls to action, and supplemental modules.

Example Scamps for Logo Design:

These mockups can be created in Word, PowerPoint, Photoshop, or even can be hand-drawn on a piece of paper and captured with a smart phone camera - the main purpose is to provide the first rendition of getting an idea out of your head and into a format that can be shared with others.

Conclusion

Collect design input through a series of collaborative exercises to reduces the risk of creating website designs that do not fit the client's vision or market.  By using a few basic techniques, web designers can guide clients through the process of selecting appropriate color themes and designing a user interface that effectively engages their target clients with optimized 

Professional Development and Customization for

WordPress, Joomla, Drupal, Magento & More