Web_Designer_UK__May_2018

GET PRO DESIGN SKILLS
WIREFRAMES
Wireframes are structural designs of the layout
Initial sketch for the Baltic
Training website homepage
These structural designs are meant to
bekeptsimpleandtheyneedtobe
quick and easy to make. They serve
as a visual representation of the data
that’s to be provided to the user on a
particular page.
Multiple iterations on the same
page can be made at this stage.
Wireframes should be used to flesh
out initial ideas; the good, the bad and
the ugly. Wireframes aren’t meant to
be beautiful and the initial wireframes
don’t even need to be shown to the
client or stakeholders. Write down a list
of elements and content you need to
include and create every variation you
can think of — it’s very rare that your
first idea is your best! During the
wireframing stage designers tend to
be much less attached to an idea too,
probably because of the amount they/
you have created.
The amount of time you spend
wireframing a project will usually
depend on its complexity and on
budgetary constraints but wireframing
a project and getting everything right
at this stage can save a lot of money
and heartache later on. By sharing
these wireframes with the client or
stakeholders early in the design phase,
problems in the layout and usability
can be spotted and fixed much more
quickly and less expensively than in a
concept design, or worse during the
build process.
CREATING WIREFRAMES
The best place to get all of your ideas
down is on paper. A good method is
to use some kind of felt-tip pen since
this won’t let you get into too much
detail, we’re just creating structure at
this point. You can draw them again
later with a finer pen to flesh out more
of the details.
Draw blocks on the page and think
about how they can be changed and
moved and how this will affect the
WIREFRAMES
SHOULD BE USED
TO FLESH OUT
INITIAL IDEAS;
THE GOOD, THE
BAD & THE UGLY
DESIGNS
Now you have the wireframes in
placeyournextstepistotochoose
whichofthelayoutsyou’reactually
going to design.
By sharing wireframes with the
clientorstakeholdersyouwillhave
a clear indication of which of the
wireframed designs is going to
work best for them.
Thedesigniswhereyouwill
applythebrandtotheproject(the
fonts, colours and logo); the brand
language and content (if you have
it); plus imagery and design assets.
This is where you make the design
truly unique to the project. These
designscanbecreatedina
number of different software
packages. However, the two most
popular are the Adobe Creative
Suite and Sketch.
WHAT TO USE:
Adobe Creative Suite
This is an industry-standard
powerhouse and includes many
different applications that you
can use for your design, with
Photoshop and Illustrator being
the most popular. They both offer
a number of useful features for
web design. The grid system and
smart guides are really useful if
you’re following a rigid grid (like
Bootstrap) and the custom
document presets are useful for
creating canvases sized to
particular devices. Photoshop
has a useful feature enabling you
to copy elements from the layers
panel to either SVG or CSS, while
Illustrator excels when it comes
to vector graphics.
Sketch
Sketch is a vector-based design
tool for the Mac with a focus on
screen design. When compared
with Adobe’s Creative Suite apps
it is closest to Illustrator. Sketch
makes designing for the screen
a breeze with an
intuitive interface and
simple-to-use tools.
The third-party
plugins allow for the
functionality to be
extended, offering
almost endless
possibilities. Sketch
also integrates with
a number of
prototyping apps
such as InVision. The
rendering in Sketch
(unlike Photoshop) is close to
how the web renders content,
ensuring that the design will be
truer to the final product. Sketch
is also fast and creates much
smaller design files than some
of its competitors.
64 _________________________________________________feature