A (98)

CREATE A RESPONSIVE FRONT PAGE WITH

PRESENTATION MATERIAL

MASTER RESPONSIVE

DESIGN

A

s well as having to design for desktop,

tablet and smartphone, and deciding

whether to use fluid or non-fluid content

grids, responsive design bears yet another

challenge: making sure all your assets look sharp on

HD screens. If it were only @2x, this would be rather

easy. But with the dozens of sizes and resolution

types that Android devices bring with them –

sometimes as high as @4x – things get more

complex. This tutorial will focus on how to design a

responsive website, and how to easily prepare it for

client presentations along the way. We will be

looking into everything from setting up the ideal

GETTING STARTED

PREPARE THE DOCUMENT AND CREATE THE GRAPHICS

Photoshop document as a template to work from, to

working with grids, guidelines and vector Smart

Objects, which allow you to create SVG files for your

final website that can be animated on rollover and

work perfectly on Retina screens.

While most graphic assets like images will still look

acceptable when scaled a tad up or down, it’s not as

easy when it comes to icons. There’s a simple reason

for that: icons are usually much more filigree and

detailed than most other image assets. Thin outlines

especially don’t scale well. There are two great

solutions that are lightweight and incredibly easy to

implement and use: SVG sprites or icon fonts.

01

SET UP THE DOCUMENT

Start by designing in 1600px in width,

with a safe zone of 1000px in height. Then you

know anything within the 1600 x 1000px will be

available at the desktop version of the site. And

it’s easy to prepare the presentation in monitor

screens later, as the ratio also works in an image

of a cinema screen that is 1440 x 900px.

02

PICK COLOURS AND THINK MOBILE

The first thing to do after setting up the

document is to add three guidelines: one that

defines the centre of the document and two more

that define the 640px mobile height. You can also

search for images to base your colour inspiration

on, which can be taken from the product trends

and similar.

03

START FROM THE TOP

Start out by doing the navigation. Just

get an icon next to text and see how it looks with

the chosen colours. I chose a margin of 75px from

the edge. Create basic icons, like the menu icon,

straight in Photoshop. You can then re-create

them later in Illustrator just to make sure you

have it in vector for SVG output later.

FROM RAW TO RESPONSIVE

WORK IN

PROGRESS

Progress 1: Create the

SVG-ready icons

Progress 2: Add the graphics

Progress 3: Prepare for mobile

ROLF A. JENSEN

http://www.portfolio.works

@rolfajensen

OUR EXPERT

Rolf A. Jensen is an international

award-winning Norwegian art

director, designer and co-founder

of Good Morning, an interactive

design agency. In a career spanning

over a decade, he’s worked with

clients such as DreamWorks,

Electronic Arts, Warner Bros, Ford,

Sony and Toyota.

SOURCE FILES

Included on FileSilo.co.uk/bks-609

is the final Photoshop file of the web

design as well as presentation and

vector resources. The main image is

available at http://www.thinkstockphotos.

com/image/stock-photo-sensual-

couple/184738880.

With the dozens of sizes and resolution types that Android

devices bring with them – sometimes as high as @4x – things

can get complex

RESPONSIVE DESIGN