With a birds’ eye view of your project’s flow established it’s important to start to think about its look and feel, and its visual design. This is what I call ‘visual grammar’ and it’s the visual approach you’ll be adopting in your design. In part three of Comprehensive Guide to UX Design, I’ll discuss how to communicate visual design.
With an ever-increasing proliferation of devices to design for – watches, phones (from small to large), tablets, desktops and other media – the idea of developing a single pixel perfect visual has become dated.
In response to this changing landscape we’ve seen a move towards design artifacts that move away from pixel perfection in favor of capturing the ‘flavor’ of a design. These artifacts include, for example:
- Moodboards
- Style Tiles
- Element Collages
Everyone’s process is different, but at this stage in the process I use a combination of moodboards and element collages to help to establish direction: moodboards help you to get into the right ballpark, element collages act as a bridge between your visual design and your user interface design.
Moodboarding
Moodboarding, as its name implies, establishes the mood, helping you to zone in on a particular look and feel that fits your overall goal. Moodboards are useful as conversation starters, acting as a focus around which you can build. As a rule of thumb, I usually put together between three and five different moodboards, each signposting different directions.
You might have a particular look and feel in mind, but – as we all know, all too well, I’m sure – your preferred option might not match your client’s point of view. I find it helps to have alternatives and often find the end result drawing together different elements from different moodboards.
When developing the moodboards for Tiny Books I adopted both analog (left) and digital (right) approaches. My digital moodboards helped to provide direction to Vic Bell who graciously developed the site’s branding.The bottom line: At this stage you’re presenting a high-level visual design, not getting lost creating pixel-perfect designs, which are futile in an age of widely differing screen sizes. Detailed mockups will follow at the wireframing and prototyping stage.
This point in the process is about developing design artefacts that can be used to spark conversations. To drive that creative discussion it helps to have a variety of different moodboards each with a different look and feel.
When putting together moodboards it’s important to consider analog approaches as well as digital approaches. If you’re visual inspiration is 100% digital you run the risk of what I call ‘everythinglooksthesame’ness where one design looks exactly like another. Consider looking beyond the screen for inspiration, using old unwanted magazines for inspiration, do so and your designs will stand out.
Element Collages
With feedback gathered on your moodboards it’s time to start developing some design components, applying your visual direction to some typical user interface elements so that you can settle on a ‘visual grammar’.
As Samantha Warren, who developed the Style Tiles methodology, puts it: “Style Tiles are a catalyst for discussions around the preferences and goals of the client.” This emphasis – on having a discussion about look and feel – is the strength of these two methods. They save a considerable amount of time, removing the need at this stage to create pixel-perfect renderings at multiple sizes.
In my experience Style Tiles can be misread by clients who mistakenly think they’re visual mockups. I prefer a more freeform, less template-based approach, and when I discovered Dan Mall’s Element Collage approach I was hooked.
Element Collages – like this one by Dan Mall for Reading is Fundamental – are helpful for capturing a variety of different visual elements and kickstarting a conversation around a potential design direction.In an excellent post detailing his design process on a project for Reading is Fundamental, Mall stresses the need to replace presentations with conversations, getting the client involved in the process. Element Collages are an excellent way of driving this conversational approach. As Mall puts it:
When talking about design with my clients, I like to have as much visual fodder as I can, in order to ensure we’re talking about the same thing. My version of Style Tiles integrates my love of collaging for a different type of execution I call an ‘Element Collage’. That particular phrase creates an expectation that what we’re looking at isn’t a final design but rather an assembly of disparate pieces without specific logic or order.
Dan Mall, Reading is Fundamental
The beauty of Element Collages is that they act as a bridge between your moodboards and your (soon to be developed) UI components. They’re flexible enough to show clients to establish a feel for what we’ll be building. Above all they’re a useful tool for helping you to gain consensus around your visual grammar before you start to develop more time-intensive prototypes.
Conclusion
Before we get down to the details of user interface (UI) design and building interactive prototypes, it’s important to get the high-level flow of the design in place, establishing a skeleton around which we can build our design.
By establishing a high level process to kick off the design phase of your projects you can work more efficiently to get a clear framework in place. At this stage in the process it’s important not to get lost in the details, but rather to focus on getting the broad brushstrokes in place.
It’s important to get the broad brushstrokes right before diving deeper into designing UI and developing wireframes and prototypes. Focus on establishing a clear design direction, and some clear user goals, before getting into the details. Resisting the urge to focus on details without clear design goals established saves wasted work.
In short, don’t get lost in the detail until you have everything mapped out.