The imagination – a mysterious beast inside of us that has a habit of running wild. My beck and call for the beast is an important part of my design process, but a certain amount of self-control must be used if I am to successfully answer a client’s brief. Add to that the medium of the screen, and the format of a website, and the ring-pull on a family-sized can of worms has been firmly pulled!
This is where I like to divide the task in hand into two parts – first of which is all about the research.
The client has a product and it needs to be presented correctly and efficiently. It requires a visual language that will form a connection with the target audience without them having to think about it. The audience may be a group of people within a particular age-range, or an industry that spans a broader demographic. Understanding what that audience is ensures a solid starting point.
Once I know my audience I think about their browsing habits, what devices they might use to view the website, and about the journey the user would be taken on for them to reach the goal of obtaining the product that the client has on offer.
Browsing habits can vary a lot depending on the age group involved. A typical teenage user will more than likely be fluent in all things internet having being born into the digital age. This would enable me to go down a more contemporary or even experimental route, looking to push the boundaries in terms of functionality and user experience. At the opposite end of the spectrum, those of us with more candles on our cake feel comfortable with an experience that is self-explanatory – a user interface that does what it says on the tin. One method of research I’ve found reliable is to look at a range websites that our audience would be interested in, be it newspapers, tech blogs or fashion shopping sites, and note the kind of navigation and page layouts that they would more than likely feel comfortable using. My aim is to provide the end user with an experience that they love but they can’t quite put their finger on a reason why.
Talking of fingers… all age groups are now familiar with touch screen devices and they have one of the starring roles in my approach to website design. No matter what the target audience one of the most important ways to ensure a silky smooth user experience is that I recommend that buttons and links should always be available to interact with at a decent size. Part of a study carried out in 2003 on human fingertips to investigate the mechanics of tactile sense, (yes, really!), by the Massachusetts Institute of Technology revealed that the average size of an index finger is between 16 and 20 millimetres, which is estimated to take up around 50 pixels of screen area. This now forms a part of my must-haves for any website that I design.
Wireframing and site-mapping follow – these simple structural sketches help both the client and the team working on the project understand what the website will contain and how the user journey pans out.
With the research half of the project complete, this now forms a canvas onto which I can apply a look and feel. This is where the imagination comes back out to play.
Multiple layouts for that cater different devices are created that include the content determined by the wireframes created earlier. I always opt to start designing for a landscape tablet view first as it’s a good mid-point between the larger monitors of desktop computers and the small screens of mobile phones.
Careful consideration then goes into the typography and how the various levels of headings and body copy will look. The choice of font can instantly alter the tone of the website and now, thanks to Google’s web fonts and the @font-face rule the choices are vast unlike a few years ago when we were stuck with the very limited set of web safe fonts. That being said, the choice of font must be legible and sit comfortably with the product and appeal to the target audience. The colour palette is then developed, often based on the brand of the client or the product that is being sold.
Photography is more important now than ever before. With the introduction of 4G mobile networks and superfast fibre broadband, combined with clever optimisation techniques we’re fortunate to be able to shower the user in fabulous imagery. The well known saying, “A picture speaks a thousand words” is true but let’s raise the bar and immerse the user even further with the inclusion of video. Whether moving or still imagery its now standard practice to have different sizes of the same image that can be loaded depending which device the user is viewing the website on. The advantage here is that I’m able to take control of the cropping the images to suit each size, which results in the image always looking its best, no matter what device is being used.
The icing on the cake is animations and transitions. Whether it be a subtle movement of an image within a box, a spin of a menu icon when clicked or a full blown transition as you leave one page and go to the next, these are the secret agents that sneak in under the radar and give the user an experience they love and don’t quite know why.
When all of these elements are combined together, I’m able to create a design that will appeal and engage the client’s target audience. The heart of any good web design will have an audience journey at the forefront of all decisions. It doesn’t matter how many fancy fonts and animations are used if the users are not fully understood.
At Barques, we understand that to maximise client’s sales or business objectives, design needs to play a big part in appealing to those all-important audiences.