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!

Why HTML5 Is Alive

November 15th, 2013 in Design, Development, Web code development html5

If you’ve only recently got used to the idea that websites are written in some weird language known as ‘HTML’, we might have bad news for you: we’re already on the fifth version of it! The good news, though, is that this makes a real difference to the effectiveness of your website.

‘HTML’ stands for ‘HyperText Markup Language’ and was invented in the early 1990s by the British scientist Tim Berners-Lee. Its primary purpose was to enable users to ‘mark-up’ text on the internet, particularly with links to other texts but also with instructions for how to display the text – as italics, for instance, or in bold.

HTML encloses text within certain tags in order to achieve the desired effect. For instance, text can be rendered italic by enclosing it with ‘<i>’ or, more recently, ‘<em>’ tags. This function has been fundamental to the success of the World Wide Web: HTML is the reason computers can display attractive, navigable text immediately and without any coding knowledge on the part of the user.

Like any successful innovation, HTML has been subject to further developments. The number of usable tags have increased, for example, so that even the apparently simplest function – opening a link from which Google can read some information in a new window, for instance – can be expressed in a number of complex ways. (One of the many far-from-perfect methods might be ‘<a href=”” alt=”Image Plus” title=”Image Plus” target=”_blank”>’. Clear as mud? Thought so!)

Berners-Lee is now director of the World Wide Web Consortium (or W3C), which exists to promote ‘web standards’ – essentially encouraging the millions of people who write code for the web to do so in as uniform, simplified and accessible a manner as possible. That’s why HTML5 is about to be introduced: to iron out the many kinks and inconsistencies that have developed over the last twenty-five years of HTML improvisation.

So why is this important to you? Because HTML5 will make the World Wide Web work better: it replaces not just HTML4, but XHTML1 and DOM Level 2 HTML (don’t worry, there’s no test later). It adds new support for media – fast becoming as important to the web as text, if not more so – and it eliminates many tags which once existed in order to keep the code manageable and (relatively) easy to read for humans. Finally, it makes sure that HTML will still make sense in an increasingly multi-platform world – on desktop computers, on mobile phones, on tablets and even on TV.

HTML5 is still in the testing stage, and won’t be fully released until the end of 2014. But at Image Plus we’re already engaging with this key new language for the web, and making your website ready for the future: with new functionality, better on mobile, easier and quicker to read and convert for screen, and – most importantly – readable everywhere by everyone.

Your website is your shop window. HTML5 keeps it clean.