subjective guide to screen design - part 1

Öznur Özkurt

a subjective guide to screen designpart I

Öznur ÖzkurtMarch 2011, London

These suggestions are aimed at designers who are getting into user interface design for the first time and don’t quite know where to start. They are not so much tips about how to design screens but more about where to begin and how to set up your tools correctly so you can work better and get the best output from your creative process.

My tool of choice is Illustrator, but these rules may apply to other software as well.

All suggestions are based on personal experience and things that made me think “I wish I’d known that before spending 3 days on this single button”.

Hope it will be useful for some.

before you begin

a subjective guide to screen design

Get familiar with guidelines.

4

Some clients will have guidelines for you to work with.

Examine and learn them inside out. If you feel you can push them, try and improve on them with your design.

SXGA1280 ! 1024

QVGA320 ! 240

1280 ! 960

VGA640 ! 480

PAL768 ! 576

SVGA800 ! 600

XGA1024 ! 768

SXGA+1400 ! 1050

UXGA1600 ! 1200

QXGA

1152 ! 768

1440 ! 960

1440 ! 900

CGA320 ! 200

1366 ! 768

WXGA1280 ! 768

WSVGA1024 ! 600

HD 7201280 ! 720

WUXGA1920 ! 1200

HD 10801920 ! 1080

WVGA800 ! 480

WVGA854 ! 480

1280 ! 854

WXGA1280 ! 800 WSXGA+

1680 ! 1050

2K2048 ! 1080

3:2 8:5(16:10)

5:3 16:9

17:9


There are quite a few different screen ratios and resolutions. Knowing what you’re designing for will help minimise pain half way through your design process.

Know what you’re designing for.

5


Just because something is blue and in a red box in a wireframe, it doesn’t necessarily mean your design needs to follow that.

Spend some time with the wireframes (and maybe with the person who’s done them if they’re around) and understand what’s important to keep and what can change.

Don’t be afraid to move things around.

Don’t take wireframes at face value.

6

when you’re doing it


Whichever software you use, make sure you’re working in RGB, not CMYK.

Check your document colour mode

8

RGB CMYK


Seriously.

Set all units to pixels.

9


Make sure your elements are all in rounded pixel sizes. Again, Illustrator seems to play tricks, from file to file, version to version, beware. Double check and make sure you see a round number in that box.

Not 319.999.

Nothing can be .x pixels.

10


Set them to 72ppi for screen design.

You can use 300 if you’re doing print, but stick to 72 for screens, this will improve your computer’s performance.

Check your document raster effects.

11


If your tool of choice is Illustrator, to avoid seeing blurry lines, make sure your element’s width and height are even numbers and place your elements on exact pixels.

Even numbers also come in handy when you need to scale your elements up or down.

Illustrator works in funny ways.

12

The easiest way to ensure everything is the same size is to work with numbers. Scale and move using your keyboard, not your mouse.


Forget you can drag with your mouse.

13

550x870


To ensure everything is aligned, easiest way is to duplicate your design on a grid.

For example, when designing screens at 480x800, you can move things by 550 px horizontally and 870 px vertically on your canvas. Decide on your numbers and make a grid, so whoever picks up your file can follow.

Grids are useful.

14

246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824682468246824


It’d be great if your element sizes were somewhat coherent. Don’t go picking arbitrary numbers for each element in your design because they looked good at the time. It makes it very hard for someone else to understand the logic behind your work then.

Even numbers are your friend; you can scale them up or down, cut them in half, and they still work.

Love your numbers.

15


If you can’t export your elements as bitmaps, they won’t work when someone starts coding it.

Keep an eye on layer effects.

16


Depending on what you are doing, you might need to scale effects or keep them as they are. Keep an eye on your drop shadows, line weights, rounded corners.

Keep an eye on scaling effects.

17


Use transparency when the element needs to show what’s behind it (like a drop shadow on a list).

If you want to make a button light gray, go and change the colour, not the opacity of the element.

Avoid unnecessary transparency.

18


*if the style is applied to it

Corners will go wonky and you will spend ages trying to bring it back to what it was.

Never scale a rounded rectangle.*

19


...unless you’re absolutely sure that is what you need.

Or just don’t. Keep your options open;)

Think before applying a style...

20


When setting up your design, think about how your elements will scale.

Choose your text alignment based on how the element works. Are your buttons center aligned? Make the text center aligned.

Reference point is your best friend.

21

[email protected]

feel free to shoot questions my way.

mailto:[email protected]

mailto:[email protected]

subjective guide to screen design - part 1

Technology