Designing for the web is quite different to designing for print. Unlike print, the web is an interactive medium, where space is not confined to a fixed page size. A website is not static, it is a moving form that links from page to page, with animations and rich media.
As such, designing a website is more about creating a user experience. You need to consider how the user moves around your content, navigating from page to page. Focus on usability and clarity is vital and too often ignored.
The F2X site was quite large with a lot of information. So before we started the graphic design, our first stage of the development process was to produce a site map. A site map is simply a table of contents, in which each listed item links directly to its counterpart sections of the website. It identifies where each page of the site sits in relation to the other pages and can also help to detail the exact content of each page. Together with the client we then worked on a plan to map out what content was needed for each page. It is a lot quicker and cheaper to change ideas at this stage before any design and development has taken place.
The next stage was to build a wireframe. Wireframing is an important step in any web development process, it helps to concentrate on the content and takes into account user needs and user journeys. It primarily allows you to define the information hierarchy of your site, making it easier for you to plan the layout according to how you want your user to process the information. Built using wireframing software that was stripped of any graphics or imagery, we created an interactive PDF where the developer and client could understand the entire structure of the site and experience how each page links to another. It demonstrated how the menu and hyperlinks etc. worked.
Once the site map and wireframe were signed-off, we had a firm foundation on which to start the graphic design stage.
The website design
Keep in mind that a website also acts as a brand ambassador, so it needs to convey all the values of the business it represents. For F2X, this was not only achieved through the brilliant copywriting by the client, but also by attention to detail to each part of the design: colour palette, typography and imagery.
Indeed, a core part of the design process focused on imagery. We adopted a hierarchy: firstly using abstract pictures for the hero images, then carefully selected people shots, both of which helped to tell the story of what F2X do in an unusual and creative way. We also used subtle linework backgrounds and symbols as a third layer of graphics. Each of these elements threaded cleverly together to enforce a clear branding presence throughout the site.
The site was built in WordPress so the client could edit the final. We optimised the site using ‘lazy-loading’ techniques where possible. This reduces load times, as images below the fold (images off screen) are not loaded until just before you scroll down to them. As this was an image-heavy site, we also did resolution switching, which is a way of loading an image, which is relevant to that screen size. There is no point in loading a large desktop image when viewing the site on a mobile.
Another speed enhancement we made was to use CSS sprite sheets, which are a means of combining multiple images into a single image file for use on the website. This reduces the overhead of having to fetch multiple images, improving performance. On the F2X website we made sure all the icons on the site were delivered this way, and in SVG format.
F2X, has offices in London and Cambridgeshire, so the Contact Us page has two Google maps showing each office location. To make these maps fit in with the look and feel of the website we customised the colouring and added a bespoke pin. Extra coding was added so the user could easily get directions to the office by clicking on the pin.
Here are some more examples of some of our web development projects in the London area: LOM architect website and Rosa’s Thai Cafe.
Please feel free to contact us, if you are interest in learning more about our web development services.