The Vital First Steps You Can’t Miss in the Web Design Process- Part 2: Mood Boards

Graphic of Visual InspirationHi,

Last week I started to go through the process I carry out when I take on a web design project. We reviewed research, site mapping and wireframing/prototyping. These may seem non-glamorous on the surface but they are actually crucial when building a website. Click Here to see the full post.

To recap, we went over:

Initial Consultation: Sit-down or Video-Conference Meeting where we talk about your business; what it is, what your goals are for your business and what your goals are for the site.
Deliverable: a Purpose Statement that will anchor the design process.

Competitive Analysis: I will research businesses similar to you in order to determine industry standards and best practices that will feed the functionality and design of your website.
Deliverable: a report on my findings as well as a list of recommendations for the direction of your website.

Site Mapping: Laying out the flow of the site, the navigation. Where will everything go?
Deliverable: a blueprint of the navigation of your website. A snapshot of a site map that I have done is below.

Image of a Sitemap

Wireframe/Prototype: Displays (printable or actual html and css webpages) that build on the site map and contain blocked off areas for graphics, text, navigation, headers and footers. Here you can get an idea of how I will structure the pages of your site.
Deliverable: printable pages of the displays for the major levels of your website and/or an actual website of these displays that you can click through and explore.

Image of a Home Page Wireframe

Moving On…

This week I’d like to go over the next phase of the web design process; color selection, typography and mood boarding. For a deeper look on color, check out this post that I wrote. This is where we take a turn towards the visual and begin establishing the look and feel of the website. This will all be tied back in to the wireframes that were built and- ultimately will result in the final design of the site.

Mood boards are great design tools to utilize on projects because they let you take a step back and focus on the bigger picture of the site. This is also a great place to directly involve my client as I open this step up and build the mood board with the client. I often find that clients love to be involved in this part of the design process. And after all, no one knows a business better than its owner and I want to be absolutely sure that I stay on track with my client’s business goals. If they’d rather leave this up to me, no problem, I’ll develop and share the mood board on my own.

How I build a mood board is I’ll create a folder in Dropbox (or Google or iCloud) that I share with the client. Now, each of us can add to the folder. The client adding images, photos, pre-existing logos, colors, etc.; me adding more pieces for consideration as well as the updated board. Say the client sees an ad that really depicts the feel of their business or brand. Maybe they saw a fabric or pattern in their closet or at the mall that is perfect for feeling they are going for. The client simply needs to send it to me or upload it for incorporation. Anything goes.

I love file/folder sharing, especially for this, because my clients and I can share work with each other from anywhere at anytime. I also set up a huge physical board where I’ll tape and paste our selected elements so that, if the client lives in my area, we can meet in my office and go over our design direction. It also helps me have a visual reference in close proximity while I work. It’s really fun, as design projects should be.

I always do all that I can to ensure that I am collaborating with my client thought the whole process – as well as staying focused and on track.

Not only is this step fun, but it makes the site much easier for me to design. When I take a top-down approach like this, I can work out the details of the site more efficiently.

Main elements of a Mood Board are:

-Color Palette
-Photographs and Illustrations
-Typeface Samples
-Keywords

To build on the site that I was writing about in my last post, which is a website design for a Day Spa in New York City, I am sharing the mood board that I developed for it so that you an see what I mean about Mood Boards. As you can see there is logic along with a collage-like feel.

From here the client and I will lock down our final color palette, typography and graphics. Then it’s on to building the site!

Again Mood Boarding is a lot of fun and is a tremendous help in the web design process. The look and feel is an incredibly important aspect to websites. It’s vital that we communicate the business’ brand here as often it is the first impression that a business makes on potential customers.

Stay tuned, more of this design and design process to come!

Jen

Jennifer is a Marketing, Graphic and Web Design professional. She has worked for companies small and large all over the world in her career and is now working towards a masters degree in Web Design and New Media while launching her own Marketing and Design Business, Pure Designs. When she’s not researching, sketching, designing, taking a class or writing, Jen loves to spend time with her family, cook, run and read.

Advertisements

3 thoughts on “The Vital First Steps You Can’t Miss in the Web Design Process- Part 2: Mood Boards

  1. Pingback: Bringing your Website to Life with Images and Graphics | Pure Designs Blog

  2. Pingback: Are You Making The Most Common Mistake When Building A Home? | "Building California Homes" by James and Joe Halsell

  3. Pingback: The Core of Your Brand Identity: Your LOGO | Pure Designs Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s