How Websites Are Just Flesh and Bone

November 15th, 2013 in Design, Web Design website wireframing

How does a website start its life? All those familiar elements – the navigation bar, the main content area, the splash image – don’t materialise from the ether. They’re planned and carefully placed to produce not just an appealing visual experience but also one which guides the user’s eye and helps them use the website in the best way possible. So how do we do it?

The web designer’s is a shadowy art, half aesthetic connoisseurship and half technical coding which is often unintelligible to the untrained eye. But it’s also a collaborative activity, in which everyone on the team should be involved – most especially the client. Web design is about capturing what makes the client different, special or unique and getting it online – because to do so will be to persuade browsers to become buyers.

For instance, one of the key first steps in any web design process is ‘wireframing’. This is the technical term for drawing up a schematic or blueprint for which elements of content and functionality the website will include, and how it will display those elements. Think of it as the website’s skeleton, the bones of a page layout or content arrangement onto which the designer can later add the ‘flesh’: font styles, colours and graphics. When we look at a skeleton, we see how a joint might move, rather than how the limb will look. It’s the same with a wireframe.

The key, though, is to make sure the joint moves in the direction the client requires. At Image Plus, we work as a team so that each of us understands the wireframe, and thus the project. But every part of it is informed by the client’s needs and goals: wireframing isn’t about detailing every last item about the website, but it is about fundamentals, and the client is best versed in the essentials of their business, product and audience.

Once we know what the website must do, we can turn to how it should look. Again, the client will almost always have some ideas about the look and feel of their site – corporate or contemporary, monochrome or colourful – which we will be taken onboard and applied to the final site. We do a lot of this graphic design work in Photoshop, which has become a crucial tool for every designer.

Photoshop is an image manipulation software package, making it ideal for the building of websites – which still rely on a wide array of imagery if they are to look exciting and pleasing to the eye. Web browsers don’t produce exciting visual effects alone – they read code and display images which have been carefully put together by the design to look good and operate well. That makes Photoshop a good means of putting together the background images, content area shapes, font colours, foreground graphics and other imagistic elements which will make your website attractive as well as useful to your visitors.

The internet is changing – increasingly websites are less like a magazine, designed in Photoshop to certain dimensions and specifications – and more fluid, displayable on many devices in many ways. But graphical content is still key, and the graphic designs we come up with in Photoshop can be laid over the skeleton we built in the wireframe to bring together look and functionality in one highly effective package.

So. That’s web design in a nutshell. But it all starts with that conversation with the client – so drop us a line today!