12
PREPARE FOR PRESENTATION
It’s always great to show your client how
the design will look in a browser, to give them the
picture of how things will be aligned and scaled on
a computer screen and a mobile screen. On
FileSilo you can find some pre-made assets of an
iMac screen and an iPhone. These are great tools
to help sell your design and create a better
awareness on the client’s side of how the final
outcome will look and feel.11
#2%!4%Ĉ4(%Ĉ-/#+Ɏ50Ĉ&/2Ĉ-/"),%Ĉ
After you have re-organised the folder and
layers, it’s time to re-organise the position and sizes.
A few key rules are to scale all your icons to about 30
per cent of what they were on desktop. If your icons
are already small in the desktop design, you might
want to double that scale. Another tip is to never use
a text size less than 24pt – it’s just going to be hard to
read on a mobile screen. Place a new layer on top of
your mobile folder and create two black shapes to the
sides of the workspace so you have all your focus on
the centre part where the mobile design will be. Make
a new margin from the edge of the design at 30px on
both sides to keep some space between your
elements and the edge of the screen.13
7/2+).'Ĉ7)4(Ĉ4(%Ĉ$%6)#%Ĉ4%-0,!4%3
Open up ‘iMac_screen.psd’ from the assets,
double-click the layer called ‘Put your design here’,
then open up your PSD file with the web design. Go
to Image>Image Size and scale it down to 1440 x
900px, then with the mobile folder off, merge the
desktop folder with all the layers and drag it over to
the Smart Object called ‘Screen_11’ that you opened
from ‘iMac_screen.psd’. Now make sure it’s centred
and save it. Repeat the same steps for the ‘iPhone_
screen.psd’ to get the phone screen.10
02%0!2%Ĉ4(%Ĉ03$Ĉ&),%Ĉ
&/2Ĉ-/"),%Ĉ$%3)'.
Make two new folders on top of all your layers (click
on the folder icon at the bottom of your Layers panel
or hit Cmd/Ctrl+G). Name them ‘Desktop’ and
‘Mobile’. After that, copy all your current layers into
the desktop folder, and copy all the layers a second
time into your mobile folder. Do this by Shift-
selecting all the layers (besides the two recently
created folders called Desktop and Mobile), and drag
all the layers into the folder while holding Opt/Alt
down on your keyboard.09
FINISHING DESKTOP
Now let’s finish up on the desktop design. Add a few more details like the slide options on the left
side that indicates that the imagery in the background can be interactive in some way. Then take a look at the
mobile safe-zone, marked red on the picture. You now need to make sure all of your elements can scale and
work down to that space. It’s a simple matter of re-organising your elements so they fit within the safe zone,
with some space on the sides.REDESIGN FOR MOBILE
ADJUST THE SIZE AND POSITIONING OF ELEMENTS FOR MOBILE DEVICES001 HELPING HAND
Set up an on-screen grid and use existing industry imagery for inspiration and
colour reference002 WORKING WITH FONTS
Research typography and place in a nice header text to make a bold statement in
the centre of the design003 PREPARING FOR MOBILE
Reorganise the elements from your desktop design into their own folder so it
fits on a mobile screen001003002It’s always great to show
your client how the designwill look in a browser, to give
them the picture of how thingswill be aligned and scaled
ICON FONTS VS SVGS
There aren’t fundamental differences between the two when you just want to display a couple of resolution-
independent monotone icons on your site. Of the two, icon fonts have greater support of out-of-date software, so
if you’re working on a larger scale project that is expected to get great traffic from less techy audiences, you might
want to go with icon fonts. If, however, you want to use the power of recent browsers and mobile OSs, then SVGs
are for you. While creating icon fonts is a bit of setup work and you’ll probably look into a proper software tool
that’ll help you do it, SVGs don’t require anything. Simply export to the format from Illustrator and your job is done.RESPONSIVE DESIGN