css tricks

Well, that might be a slight exaggeration, but these CSS tricks are sure to help improve your toolset! We wanted to drop this article as we use these CSS gems on almost every site we design, yet once upon a time never knew they existed. We’ve also ordered the list so each tip should follow the last in terms of practive & usability. Read More →

mood boards design

Your site-architecture & layout is in order, but you need to give your client a few options on the style of their website. Use mood-boards to simplify the process & further define your style…

Following on from last week’s article on designing with wire-frames, we’ve decided to write on the pro’s of designing with mood-boards, explaining a little about them and just what they can do for your project.

“A mood board is a type of poster design that may consist of images, text, and samples of objects in a mood boards designcomposition of the choice of the mood board creator. Designers and others use mood-boards to develop their design concepts and to communicate to other members of the design team. The mood board may be used as a frame of reference during the design process in a variety of abstract disciplines”
Mood board – Wikipedia, the free encyclopedia

In these early stages of a website project, we can use mood-boards to show our client some different ideas & takes on their website. Each mood-board will show a “mood” or “feeling” we wish to create from the site. Once we have created several mood-boards, we can then compare them and make a clear decision on the direction we wish to take our design in.

An example Mood-board for fictional website “Midnight Sky”

There are some specific elements we include on our mood board, that when added together can show us the “atmosphere” or “mood” we would generate from our website. We include the following elements in ours:

  • Designer Notes
  • Typography
  • Colours
  • Icon Sets
  • Illustrations – Vector Art, etc
  • Photography / Stock Photos
  • Patterns & Textures

Sometimes not all of these are required, but as standard they are the ones we look over when creating each board. They allows us to take in all the visual aspects of a design, lettings us consider why they would be good for the website – or in some case’s why they would not.

Mood boards are a great technique to embody, because:

1) Nothing is set in stone

Just like with our wire-frames in the previous article, mood-boards are not set in stone; they simply provide an insight to a particular design style. Once a range of these are laid out next to each other it makes it very easy to explain to a client your ideas & the reasoning behind each.

2) They help make you question “why?”

Many designers decide to use sIFR to allow creative fonts in headings. Some client’s may put forward having the website colour-scheme “purple” as it’s their favourite colour. Mood-boards help you to actually consider why you have made these decisions, and how they effect the website’s atmosphere.

3) They allow clarity of your website’s design direction

It is not enough to design without reason – simply saying “a Georgia font would make the website look jazzy”. Mood-boards allow us to consider what “mood” we want the user to get when arriving at our website. From this we can decide on design elements & techniques that will aid the design, not just push it along.

Summary

At Peakflow Design we use mood-boards because in the preliminary stages of a website we need something that can allow us to consider different design styles to take the website in. We can show these mood-boards to our clients, and also keep them on record in case we wish to consult them further into the project.

Try creating a mood-board today and see how clear it allows you to make design decisions for a project.

using wireframes design

So, you’ve been commissioned to create XY’s new website, and you’ve stepped into the project. Your at the stage to begin mocking up your design, but don’t know where to start. Need a hand? Wire-frames could lead the way…

When you create a wire-frame, you’re restricting your mind to focusing on what truly matters – the websites content. That is, we’re taking away all the graphical elements and simply labelling them from number 1, upwards; we’re breaking the site down into key content areas, which allow us to move them about much easier than if you had already started on header graphics and such forth.

To demonstrate this the easiest way, we’re going to pretend that we are a designer currently working on Fisherman’s Delight website – Client A requires a website for his fishing committee to post news & updates of the goings on at his local club. After our discussions at several meetings, we’ve found what he needs to display on his home page, shown in the list below:

  • Site Name/Logo
  • Navigation Bar
  • Introduction to the website
  • Featured Article
  • A more detailed overview of Fisherman’s Delight
  • News Entries
  • Footer containing contact information

What we are going to do now is take each of these areas, and think of them as what they truly are – using wireframes designcontent blocks of information. Our own methods of wire-framing take either the course of pencil & pad or Photoshop – either is okay. We can now create as many wire-frames as we’d like, moving the content blocks position & also their sizes, to create different design layouts. Here are a couple mock-ups including how they affect the content to the user.

Wire-frame mockups

Notice how we’re not touching on any visual elements – simply the website’s content. This allows us to see & decide on a layout which will help Fisherman’s Delight reach their viewers in the way we wish for, not just simply look nice & fancy.
“Speed & Flexibility”

One of the great things about using the wire-frame technique is the speed & flexibility you’re offering yourself as a designer. You can quickly see how different layouts would turn out. It also removes any possible frustration you might create from having to spend the time creating a Photoshop design, only to realise half way through that it isn’t working.
“We can decide where to take our users, instead of simply hoping for the best”

Depending on the order & size of your content blocks, we effect how our users are going to read through or scan our website. Through different wire-frames we can anticipate how this would play out, and thus decide on a design which takes our users where we want them to, instead of simply hoping for the best from our Photoshop design.

The best part of wire-frames – and why we enjoy using them so much, is how once we choose on one or several to work with, we’ve still got the entire design elements to look into: colour schemes, fonts, the lot! But the fact is now we’re already travelling in a direction that is going to work for our website – a layout we’ve tied down to build upon.

From here we can try out many different colours, fonts & design elements, knowing that whichever combination we end up with, our users are going to be able to view and discover our content the way we truly intended.

At the same time, we can easily step it back, and review our wire-frames if we feel something is missing or needs to be added. We know it takes little time to draw out some more :)

Summary

So to wrap up, we think wire-frames are awesome! They allow you the ease of trying out various designs, incrementally changing them and deciding which works in a super-fast environment that is both productive & enjoyable.

Although our example of Fisherman’s Delight is a relativity small & simple website, the use of wire-frames can be seen greater on a larger, wide-spread website (check out Jesse’s article in our further reading). We encourage you to try out wire-frames on your next project, whether personal or commercial – and see where it can take you.