The Headspace Process - Part Two

10.31.2014 | in Design & UX Technology | by Ashley Hurshman

Welcome to part two of a series we’re calling The Headspace Process, a collection of blog posts crafted to shed just enough insight into our stages of development to whet your appetite, without sharing any spoilers or giving away too much of the magic. We think we’ve struck the balance just right. Check out Part One to get caught up, or read on!

Part One of The Headspace Process was all about kickoffs. We started the series, laid the groundwork for what to expect and got the creative spark crackling! Today, we’re going to talk about structure. Structure in all things; your ideas, your website’s blueprints, and our presentation of how the two come together is ultimately what will define the backbone of the project. Naturally, we work hard to make sure we lay strong groundwork.

Believe it or not, the design elements of your soon-to-be website can only be successful if they’re built on a comprehensive structure. This ‘road map’ is what positions your users to take action on your website, navigate, and see the results promised to them. Because navigation will help to determine how many people stay on your site, intuitive structural design is a necessity.

Following our kickoff meeting and after doing a little research to answer the questions posed in our brief, we’re primed to move the web project forward (woohoo!). This is the fun part - we take your ideas, our ideas, a sprinkle of best practices, and mix thoroughly to start building out both the structural and visual facets of your site. For now, these two destined siblings are kept apart, informing decisions but not interfering with one another.

At this point in the game, one of our primary interests is ensuring that none of your requests are lost in translation. Moving directly from the kickoff to the design phase keeps your ambition vivid in our designers’ minds, but at the point when every note from our brief tries to fit its way into the final design, some pieces can get lost in the battle for placement. This is why we create wireframes and mood boards!

If you’re wondering what a wireframe is, that’s fine. It certainly isn’t a common term. In short, a wireframe uses shapes and lines to illustrate the layout of each page on your website and easily map what links to where, and how ‘where’ will look. For example, your homepage may have a large box at the top, with some lines for text placement in it, and two smaller boxes underneath it with lines as well. This could represent your homepage, with a banner and two callouts to other sections of your site, like your blog or services page. We continue with each page of the website, laying out the different style of pages one by one based on notes from the kickoff and the initial navigation structure. By planning these routes and designs in advance, you can be sure that your site is structured to best serve your goals and your users.

So, we’ve got the wireframes down, which means the skeleton of your website is in place. Now it’s time to add a little character. Enter the mood board. They may be difficult to truly grasp until you’ve seen one, but mood boards are the collage of images, fonts, textures, colours, and typography that will ultimately act as the soul of your design. Your mood board should invoke a feeling that’s in line with how you want your users to feel and how your brand carries itself. Think of it not as an exact design, but an idea of how varying elements will come together to present themselves as a whole. Don’t worry - we’ll bring a couple. Everyone needs a little selection, right?

Mood boards, wireframes, you’ve seen them both and naturally, there’s a little tinkering to do. We’ll add sections you hadn’t thought of, give another section more prominence, change a font or a colour, and all of that’s OK because these are the tweaks that will ensure we’ve covered each individual piece of the grand puzzle. When everything runs smoothly and both parties give a thumbs up, it’s a good thing.

Remember those two destined siblings from earlier, the structural and visual facets of your website? Yep, it’s time to merge them together to create your website design! The design we produce will call on the exact layout and structure of the approved wireframes and incorporate the majority of the elements from the mood board. After a little polish, you’ll see what will eventually become a working website. At this point we’re still working with pictures, complicated, multi-layered pictures, but pictures none the less. This means you can request the adjustments that will make you the happiest without disrupting the entire design. Give every corner your attention, and we’ll produce an incredible vision of what’s to come.

Now let’s bring it to life; it’s time to add some code!

• Web Design
• Mood Boards
• Wireframes