A few tips and suggestions for people starting screen design.

1. a subjective guide to screen design
part I
Öznur Özkurt

2. 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.
Öznur Özkurt
March 2011, London

3. before you begin

4. Get familiar with guidelines.
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.
a subjective guide to screen design 4

5. CGA
320 × 200
Know what you’re designing for. WVGA
800 × 480
WVGA
QVGA 854 × 480
There are quite a few different screen ratios and resolutions. Knowing
320 × 240
WSVGA HD 720
what you’re designing for will help minimise pain half way through your
1024 × 600 1280 × 720
design process. 1152 × 768
WXGA
VGA 1280 × 768
640 × 480
PAL 1366 × 768 WXGA
768 × 576 1280 × 800 WSXGA+
1680 × 1050
1440 × 900
SVGA HD 1080
800 × 600 1440 × 960 1920 × 1080
XGA 2K
1024 × 768 1280 × 854 2048 × 1080
1280 × 960
WUXGA
1920 × 1200
SXGA
1280 × 1024
17:9
SXGA+
1400 × 1050
5:3 16:9
UXGA
a subjective guide to screen design 1600 × 1200 5 8:5
3:2 (16:10)

6. Don’t take wireframes at face value.
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.
a subjective guide to screen design 6

7. when you’re doing it

8. Check your document colour mode
Whichever software you use, make sure you’re working in RGB,
not CMYK.
RGB CMYK
a subjective guide to screen design 8

9. Set all units to pixels.
Seriously.
a subjective guide to screen design 9

10. Nothing can be .x pixels.
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.
a subjective guide to screen design 10

11. Check your document raster effects.
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.
a subjective guide to screen design 11

12. Illustrator works in funny ways.
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.
a subjective guide to screen design 12

13. Forget you can drag with your mouse.
The easiest way to ensure everything is the same size is to work with
numbers. Scale and move using your keyboard, not your mouse.
a subjective guide to screen design 13

14. Grids are useful.
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.
550x870
a subjective guide to screen design 14

15. 246824682468246824682468246824
Love your numbers.
682468246824682468246824682468
It’d be great if your element sizes were somewhat coherent. Don’t go
246824682468246824682468246824
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.
682468246824682468246824682468
Even numbers are your friend; you can scale them up or down, cut them
246824682468246824682468246824
in half, and they still work.
682468246824682468246824682468
246824682468246824682468246824
682468246824682468246824682468
a subjective guide to screen design 15

16. Keep an eye on layer effects.
If you can’t export your elements as bitmaps, they won’t work when
someone starts coding it.
a subjective guide to screen design 16

17. Keep an eye on scaling effects.
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.
a subjective guide to screen design 17

18. Avoid unnecessary transparency.
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.
a subjective guide to screen design 18

19. Never scale a rounded rectangle.*
*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.
a subjective guide to screen design 19

20. Think before applying a style...
...unless you’re absolutely sure that is what you need.
Or just don’t. Keep your options open;)
a subjective guide to screen design 20

21. Reference point is your best friend.
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.
a subjective guide to screen design 21

22. feel free to shoot questions my way.
oznurozkurt@gmail.com