Web_Designer_UK__May_2018

GET PRO DESIGN SKILLS
DESIGNING LAYOUTS The Design phase of a project typically
includes a number of processes
This image shows the design process for the Baltic Training website, from
initial sketches through wireframes and design to the final live website
THE PROCESS
The design phase of a project usually
begins with a scoping document of
some description. This document
will contain a specification of what
you’re designing.
The starting point for designing
layouts really depends on the
complexity of the project:
Brochure websites — for example
— will usually use a fairly simple design
phase and usually include the
following processes: content gathering
-> site map creation -> wireframing ->
high-fidelity concept design.
Whereas a more complex web app
design phase might include a few
extra processes: gathering content ->
site map creation ->
wireframing -> low-fidelity
prototype -> high-fidelity
concept design -> highfidelity
prototype.
There’s no right or wrong
way to do this and different
designers use different processes. It’s
up to you — as the designer — to find
the right process for the project at
hand. This may also be dictated by the
project’s budget, when this is the case
you need to decide which of these
processes are the most important for
the project you’re working on.
HIGH- VS LOW-FIDELITY
In the process diagrams explained
above they mention both high- and
low-fidelity designs and prototypes —
this simply is how far you go with the
design. A low-fidelity prototype, for
example, is usually made up from the
elements in the wireframes; whereas
a low-fidelity design may be slightly
more designed than the wireframe
you might use for the project’s brand
colours and fonts.
APPLYING THE BRAND
This includes obvious things such as
the logo and colours and typography,
but also everything else that comes
with it: the language; the intent (is it
playfulorcorporate?Isitconfident
and loud?); any printed materials; and
anything the company has that
ELEMENTS AND RULES ARE
USUALLY REPRESENTED BY
THE BRAND GUIDELINES
represents them. This will help you
understand how to display the content
on the screen.
These elements and rules are
usually represented by the brand
guidelines document — if you have
one, be sure to study it!
Once you understand the brand
you can look for ways to apply it to
your design — are there any brand
elements you can use, such as shapes
or patterns? Are there any ways to use
what you know about the brand to
influence the layout and design of
your project?
These details are what will give the
design meaning and help cement the
brand into the company’s DNA. For a
lot of users the website will be the first
time they see the brand and, since
youdon’tgettomakeafirst
impression twice, you need to get this
right! Besides, being on-brand should
help keep the client happy too, and
that’s always good!
STRUCTURING THE DATA
You can use the wireframing stage of
the design in order to work out the
content that needs to be structured.
It’s always best to get the
content before you start the
high-fidelity design stage, in
the real world this very rarely
happens, but it’s much easier
to design something when
you know what information
you need to include. Once you know
the content of the page you can start
to structure the data by breaking it
down into sections or chunks.
Depending on the quality of the
content this can be a really simple or a
really difficult thing to do. It’s important
to keep linked information together so
you don’t confuse the user, but you
can use these sections or chunks of
content to influence the type of layout
you’re going to create.
SITEMAPS
Visual Sitemaps
Anecessarypartofthedesign.
They tell everyone involved in a
projectwhatpagesaregoingto
be in the project and how they
are going to be linked together.
You can simply draw these on
paperorcreatethemusinga
graphics editor, you could use
MicrosoftWordorevenExcelfor
that matter. The idea here is to
structurethedatafortheproject.
There are a number of tools
builtspecificallyforcreating
sitemaps, such as Slickplan,
MindNode and WriteMaps.
XML Sitemaps
Thesearecreatedoncethe
projecthasfinished,andareused
by search engines to index your
project’s contents and structure.
Whiletheycanbecreatedby
hand, there are a number of
tools available for generating
sitemaps — the tool you need will
depend on your project. If you’re
using WordPress as the backend
you can use a plugin to generate
the XML sitemap. Once created
you need to submit the sitemap
to the search engines using their
webmaster tools.
feature _________________________________________________63