Thu, March 31

·

11 AM - 1 PM

Concepting Methods

Concepting methods are particularly useful in the early stages of your project. On one hand they help you set the initial look and visual language of your product idea – you can make several design exploration in a short amount of time. And on the other they help your colleagues and your clients understand the visual direction you want to follow.

Mood boards

A mood board is basically a collection of images and patterns that will evolve into a product visual style guide. They are helpful especially within a creative or design team because you can easily show your colleagues a proposed look for a product without investing too much time in a failed direction.1

Mood board for an online store selling baby blothing and accessories

They are also useful with clients because if they haven’t been very forthcoming about what they want their new site to look like it’s even harder to hit the mark in one shot. Visuals communicate things that words cannot.

A picture is worth a thousand words, and mood boards are a great tool to create that picture for your client.

Mood boards are extremely useful for establishing the aesthetic feel of a website. It usually fits into the process somewhere after the content definition. When you know the type of content and the contexts it’s easier to find the most appropriate visual language to reinforce and communicate it. Things that can be explored in the mood board include photography style, color palettes, typography, patterns, and the overall look and feel of the site.2

Style Tiles

With the words of her creator – Samantha Warren, style tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They are usually less vague than a mood board and not too precise as a mockup. After a kickoff meeting with the stakeholders you try to break down the client feedback and interpret how the adjectives and themes you discovered translate into design principles such as balance and emphasis.3 FInally you iterate and define a design language with the goal of matching up the aggregated adjectives with styles.

Style tile example for the Examiner Washington website

Visual inventory

Another fast way to communicate your design proposal without sacrificing quality is the visual inventory method developed by Dan Mall. Instead of asking yourself questions like “What should this site look like” you shift the focus to more abstract question like “What should this site feel like?”

Visual inventory presentation by Dan Mall

In order to build an effective visual inventory you should at least focus on these three criteria: concept, color and tone. For each of this criteria you select a bunch of websites that gives to the client a good range of different languages and approaches. You can even place the logo of your client above the website logo in order to make it easier for him or her to embrace the concept.

Taking as example the visual inventory that Dan Mall did for one of his client you can clearly understand how to set the language. For instance, regarding the concept you could describe it as: “software as lifestyle choice” or “human-centered narratives.” When you talk about the color you can explore things like “big swashes of flat color” or “largely type-driven color-constrained” or even “monochromatic.” And regarding tone you could say and look into “professional and approachable” or “playful and whimsical.”

A slide from the visual inventory presentation by Dan Mall

Storyboards

Storyboards help you visualize a consumer story by defining a series of action they do to satisfy their need while using your product. It’s useful because it places features and functionalities in real-life situations that involve place, people, and other potentially informative ambient artifacts. You can often learn unexpected things from storyboards, and embedding that context into your design efforts helps keep them grounded in the reality of the users’ lives.4

A storyboard that illustrates how to find a close bus stop

The storyboard is series of rough sketches that outline the sequence of events a person will experience when before, during and after using your product.5 Usually a story is defined by a problem, a solution and a benefit. So as a designer you should try to understand and contextualize the problem. Then you should ask yourself if your solution solves the problem completely and finally outline is your idea delight the consumer.

User flow

The user flow is a visual representation of the user’s flow to complete task in the website. It helps you understand the user perspective on the site architecture, making easier to identify what step could be improved or redesigned.

When you design a website you not only define what goes on each page but also how those pages flow together. This is extremely crucial otherwise you could forget to to design certain pages or you forget to design call-to-actions that link pages together.

Customers don’t land on screens from out of nowhere.6

Moreover for example, resetting a forgotten password involves more than clicking through pages. Users have to acknowledge feedback, type in a form field and check their email. A user flow allows you to examine every aspect of the task, so that you can make it quicker and easier.7

A user flow in drawings

In the early stages of your project can happen that some portion of your website or app are entirely undesigned. A user flow doesn’t necessarily required to be drawn but it can also be written text.

Each moment in a flow is like a coin with two sides.6

Actually the approach of Ryan Singer makes it really easy to put on paper UI flows.

A simple user flow in written words

You simply define on one side what the user sees and what they can do. And on the other what they see next and what they can do next. This approach allows you to fast design and define user flows, even complex once which could include separate alternate actions.

A complex user flow in written words