How do you take your web - Flat, white and on the go...

Down Arrow

Great design, both online and offline, is an essential part of your brands image, arguably the most important element. The keen eyes amongst you may have noticed, we have recently launched our newly branded website. Our swanky new web presence has been influenced by some of the latest web design trends out there, some of which we wanted to share with you to give you an understanding of what web designers mean when they discuss the layout and design features of a website.

Flat, scrolling design

The term ‘flat design’ is given to any style of design in which the elements lose any type of stylistic characteristics that make them appear to lift off the page. Effectively, removing stylistic characters such as drop shadows, gradients, textures, and any other type of design that is meant to make the element feel three-dimensional. The opposite of flat design is described by The Next Web as ‘rich design’, best described as adding ‘design ornaments’ to make elements, such as buttons, appear more tactile, as if they come out of the page.

Flat design is one of the most well established principles of modern graphical design. Thought to originate back to the age of International Typographic style, or Swiss Design. This style of design originated in Switzerland in the 1940s and 50s and was typically used in print design, favouring legible fonts and asymmetrical layouts. The beauty of these designs lie in their simplicity. Paul Rand, one of America’s founding fathers of modern graphic design summed up why simple design doesn’t need to elaborate:

“Design is so simple, that’s why it is so complicated.”

- Paul Rand

To emphasise the point, one ‘love it or hate it’ example of flat design is the Windows 8 interface:

windows8.png

Image credit: PC Advisor

Why this has failed to become widely acceptable by users is probably due to the seismic shift in interface design from Windows 7. Panic about locating the elusive ‘Start’ button that users had learned to know and love over years of desktop interfaces wasn’t there anymore, which is potentially a leapfrog too far. The ‘familiarity’ effect, i.e. ‘can I find what I’m looking for without thinking’, applies to all great functional design.

This seems like a good trajectory to mention Microsoft’s biggest rival. The Apple brand abandoned their more rounded, bevelled buttons last year (known specifically as skeuomorphism), launching a more flat style in their iOS 7 release. Anything prior to the current release now looks dated. Perceptions to designs change over time and good designs adapt with them but don’t change the whole game in one fail swoop like Microsoft did. People are now used to using touch-screen devices that they don’t need physical edges and drop shadows to tell if something is clickable or not. If that feature isn’t obviously to the user, the iPhone is effectively rendered as an expensive ornament.

Flat design can still incorporate layered scrolling, oft referred to as ‘parallax’, i.e. when you scroll down the page the background image stays intact and ‘rolls’ at a different rate to the text overlaying it. It just all appears to be synced as a flat element even though it isn’t built in that way. Another influence related to display techniques and flat design is minimalism, which is what we will come on to next.

Room to breath

Embrace the space. Big Images are good. Words are bad. That’s pretty much all you need to know. Shall we move on? Good.

In all seriousness, lets take these points individually and take a look at why they are so important. Firstly, embracing ‘white space’ is crucial to getting the aesthetic balance of your website right. Oft confused with literal white space, this technique is to ensure that there are plentiful elements of empty space in your design. If you want the Design 101 on this, take a look at Treehouse’s excellent blog on the subject. In summary, less is always more, this applies for text and imagery. They will both appear more powerful when they are a greater sum of all of the page parts rather than a sum of many. A call to action will be far clearer to the user if it isn’t muddled between 50 lines of text.

Next up is imagery. Our guidance on this is short and sweet. Be bold and be imaginative. Use large scale original images to portray what your brand is about. These can act as the differential between your brand and your competitor’s brand. Brand imagery can be highly subjective, but having a website that is universally visually appealing to the eye can only add to the end user’s experience. Being selective about what makes a good image translates across all elements of the site. For example you would only hang your best artwork in a physical gallery, so why clutter your online portfolio pages with every single client you have serviced since the year dot.

Last but not least is text, or lack of it to be more precise. If you want to write reams of content, write a book. To see a great example of stripped back content, take a look at the Jac in a Box website. Now, we’re not insinuating that you go to this extent, but if you can keep your page content down to an absolute minimum, whilst relaying all the facts, you are on to a winner. Another reason for this is because of the rise in viewing sites on multiple devices, which we will cover in the next section.

For an example of all of these three elements in practice, take a look at our new home page:

homepage.PNG

Visually, the main focus is the image and white text. This effect can be reversed with a lower contrast image e.g. sepia or black and white against a darker font overlay. However the two should never combine as your eyes may spontaneously combust, but can be switched accordingly to give a content rich feel without causing information overload. The emphasis is on stopping people in their tracks, but helping them back onto them easily and clearly.

Responsive as standard

When viewed on a mobile device especially, no one wants to scroll down through reams and reams of content just to find an email address or name. We are all busy people and we need to be able to consume information right here, right now.

Mobile internet usage overtook desktop usage this year for the first time, and tablet is anticipated to swiftly follow suit as the second in command. These changing usage trends make it all the more important for you to ensure that your website caters for all devices, otherwise you risk putting potential customers off because they can’t access your information on the go. Customers’ expectations of this requirement have shifted drastically in the last couple of years, which is why all of our websites, including are own, use responsive design techniques as standard. We just won’t accept that this is not an end-user requirement, regardless of the client or sector we are building it for.

Flat design and responsive design go together like all great partners in life, wine and cheese, tea and biscuits, Ant and Dec, etc. Why I hear you ask… well, it is due to them both being like all good things in life, simple. One of the trade-offs with using pliable elements that render well across all screen dimensions is that websites have to use high resolution imagery, which takes up space and time to load, so designers sacrifice fancy coded elements to ensure that end-users don’t have to put on ‘hold music’ when they are waiting for the site to open in their browser. Having said this, with internet download and browser loading speeds improving all the time, this issue is likely to become a null point in years to come.

Responsive elements also appear more crisply on the page as they are high resolution and space is not compromised when they load to fit the screen, an increasing important consideration for designers with the introduction of retina display. Think about the difference in the display of responsive and non-responsive as the difference between BBC1 and BBC1 HD (other TV channels are available…). They show exactly the same thing, but HD is loads better.

Want to know if your current website is responsive? Well, there is one easy trick. Open a new web browser, tap in your URL, then minimize the screen, reducing the horizontal width of the browser. If the content, by this I mean wording and imagery, magically starts to fit round to fit the reduced screen resolution, you’ve got yourself a responsive website. If not, the time really is now to consider implementing a website that is friendly to all devices.

We think of effective web design like building with Lego. It starts off as a blank canvas, we then build it up, brick by brick, page by page, and turn it into something beautiful. The analogy continues in that Lego can be taken apart and rebuilt and you can start again, it is a constantly moveable feast. So to make sure that you keep up with your competitors, get in touch for a quote and we can help your online presence go from mediocre to magnificent. But in the meantime, if I could offer you one piece of advice for any of your branding activities, it would be this: Keep it simple.

SHARE
comments powered by Disqus

Get in touch today!

Start your project