The Importance of Mood Boards & Wireframing
Too often, designers skip over these two items. Executing a proper mood board and wireframes for your project are vital to the future of its success. Here’s why…
Creating a product or website is much like building a house. A plan must be put into place and you need to lay a foundation. Without this foundation, your house is likely to weeble and wobble and one day come crashing down.
When we start a new project and sit down with our client, we plan everything out and task every little thing to be completed. We get a sense of what the client’s needs are and then break off to create a mood board for the client. Here’s why this is so vitally important. You are designing for the CLIENT, not for yourself. Not a ground breaking realization, I know, but something we can easily forget.
We as designers may look at the needs of a project and say “I’ve already got what it will look like in my head, I’m ready to start”. If you pursue this course, you’re likely to design something rad, but not at all what the client was picturing, wants, or they prefer stylistically (likely requiring you to start over).
Creating a mood board which you collaboratively create WITH your client (they drop in items too), results in having open conversations with the client to understand why they gravitate towards certain designs, solutions, colors, typography and more. Likewise, it gives you an opportunity to present your solutions and ideas to see if you can get the client on board with those things.
Skipping this and missing the mark can result in hours or weeks of “wasted time and lost budget” for the client going down paths that aren’t what your client needs or desires.
A good mood board can be completed in a few hours, perhaps a few days or a week depending on how large the project is and it’s complications. Invest in this time to save yourself and your client money and time in the long run!
Often times, folks think of mood boards as a photo collage of magazine tear outs. So what does a good mood board look like? The process can be a little different for everyone, but you want to utilize your board to flush out all the good ideas and flush away all the bad ones. Throw up a few color palettes and quickly test them (you’ll usually find that half of them don’t work anywhere near as well as you thought they would), gather photography to set a tone, choose the type of photos in terms of clarity or editing style, and gather various UI or branding examples that have a look or feel you are going after. In the end, you should be able to take 5 mins to study your board, walk away without ever looking back at it and go create something with that inspiration and direction.
Let’s talk about wireframes.
Again, I feel like a lot of designers tend to skip past wireframes and just start designing. The result?
You design out something really cool, until the client tells you that something else has to be added and it completely throws everything you’ve done out of whack and you either have to A. scrap it and start over completely or B. you sorta piece meal a “patch” that makes it work, but your design went from stellar to “meh”.
There’s several ways to go about wire framing and tons of methods or programs to use to do it. Before we cover some of the different methods or tools, let’s talk about what makes a good wireframe and why it’s so beneficial.
A good wireframe accounts for:
- Content
- Rough structure or layout
- Visual hierarchy
- Development needs, requirements, and technologies
- Your mood board
- Your research
A good wireframe:
- Does not use color (if it does, it’s used intentionally to differentiate things, NOT for design)
- Uses actual content or NO content. Wait what? A good wireframe uses actual content and copy either provided by the client, you come up with (because designers are usually non-official copywriters anyways), or a copywriter delivers. NEVER EVER use lorem ipsum. Client’s don’t understand it, and it really isn’t effective. If you don’t have content, use a block font or create type lines to simulate that content will exist somewhere, without distracting the client on what the content is or will be at this time. Depending on the client and project, I bounce between both methods myself.
- Is rough. I know, as designers we want everything perfectly aligned and spaced, and all that stuff, but in my opinion, that’s a waste of time. Wireframes should be executed as fast as possible to complete and objective and move into design.
- Iterate fast and review as a team. Wireframes can be completed anywhere from 10 minutes to an hour long. Get it out quick and in front of your team members quickly to get feedback, poke holes at things, and reiterate before presenting to the client. Spending hours or days on your wireframes can result in going back to the drawing board and losing valuable time. Sometimes your team members are there to find the flaws, and other times they are there to solidify that your decision is correct.
- Keeps the focus off the design. If you’re doing your wireframes digitally (rather than on pen and paper), keep design elements off the page. Don’t use a standard font or something you may consider for the project, use something stupid, like Comic Sans. I hereby give you permission to use this God forsaken abomination of a font in this instance. Comic Sans is great for wire framing because it’s so abundantly clear that this isn’t the font you will be using, that the client doesn’t fixate on it. If you use Open Sans, Roboto, Lato, or Proximo Nova your client is likely to fixate and comment on sizing, weight, and whether or not they like the “a” or “r” of the font. The same may go for photos and icons. Unless you are doing a very high fidelity wireframe, use an X or image icon to signify graphics or videos. For icons, draw circles or use an obscurely playful icon back or something super standard and clean.
Set up your wireframes for success by:
- Setting client expectations. Most clients don’t know what a wireframe is when you start working together. Educate them. Explain that a wireframe is created to solidify development needs, structure, content and purpose. These screens are rough and shouldn’t be over analyzed from a design perspective, don’t focus on the fonts or what photo is FPO (for placement only) at the time. Doing this will save you hours of headache trying to get the client to stop fixating on these things later.
- Set up a clickable prototype for your wires. We use InVision to link everything up so the client can interactively engage with the wire and see the flow to ensure everything works as desired.
- Present your wireframe. Don’t blindly send out a link and expect your client to “magically approve everything”. Either hop on a screenshare, use InVision’s LiveShare tool, or create a video screencast recording to walk your client through each page and aspect of the wireframe so they understand the layout, thought, and purpose of everything you’ve done. Do this and you’ll find the approval process is much smoother. This also increases collaboration with your client. Remember, they know their business and objectives better than you. You may have overlooked or not thought of something. This creates an opportunity for them to speak up and explain WHY they think something may not work and propose ideas and work together to find a new solution.
Wireframing Tools
- Pen and paper or a Whiteboard. K.I.S.S. (Keep it simple stupid). It’s always good to start on paper and just flush out a few directions to let your brain sit on some ideas before you take things digital. I also find that sometimes I get wrapped up in the complexity of some wireframes and fight “designing in wires”, but if I step back and go back to paper, I’m not focused on those things anymore and can get over a mental roadblock and hash out my ideas fast.
- Balsamic. Personally, I loathe the tool, but it’s a favorite amongst many. Balsamic creates Comic Sansy’ wireframes that keep the client focused on the structure and off the design.
- UXPin. A bit pricey, and I haven’t used it myself, but I’ve heard good things about it.
- Photoshop. If you like watching your mouse icon spin, this is the program for you.
- Sketch. Hello my friend ❤. Since Sketch is my preferred UI design program (PS sits pretty lonely in my Applications folder these days), I really like wire framing in Sketch. I’m so familiar with the product/tool and it’s really easy to just quickly build shapes to flush out a wireframe. Sketch’s easy measurement tools also makes it simple enough to make your wireframe look nice and clean (evenly spaced, etc) without much effort and added time).
All of these things are TOOLS, and it really doesn’t matter which one you use, but how you use them. Find what works best for your workflow and efficiencies and you’ll be golden.
Wireframe Types:
- Pen and Paper or Whiteboard
- Low Fidelity
- Medium Fidelity
- High fidelity
Good mood boards and wireframes allow us to ideate, iterate, and solve complicated objectives and find solutions before we ever touch a design file. Investing in a few days or weeks for this process is guaranteed to save you time, budget, and headache if you think you can afford to skip over this vital part of the design and UX process.
The Results of Following This Process
Here are a few shots showcasing the work that resulted from creating, utilizing, and collaborating on good mood boards and wireframes with our clients:
