A gdyby wszystkich grafików świata rozdziobały kruki, wrony? Czy świat stanąłby w płomieniach? Prawdopodobnie tak. Chyba, że znasz tę listę 20 zasad zrozumiałych dla programistów, którą graficy trzymali przed Tobą w tajemnicy…

1. A gdyby wszystkich
grafików świata
rozdzióbały kruki, wrony?
Marcin Kosedowski

10. Zacznij od treści. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat tortor et sapien
sollicitudin hendrerit. Donec id eleifend est. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Maecenas bibendum libero vitae gravida lobortis. Cras quis molestie nunc.
Nunc eleifend libero non sem molestie tincidunt. Vivamus vitae purus vehicula, finibus sem vitae, tristique
mi. Sed venenatis aliquam purus, non accumsan ante tincidunt ac. Donec vel imperdiet enim. Sed
fermentum facilisis ex. Sed feugiat, libero vitae fermentum vulputate, purus tortor elementum sapien, ac
accumsan nibh mauris a nibh. Vestibulum accumsan mi a est ultricies porttitor. Curabitur magna sem,
accumsan sed aliquam a, malesuada sed massa. Donec tempus mattis neque suscipit hendrerit. Cras luctus
mauris sit amet consequat condimentum. Etiam sit amet eros vel dui aliquam rhoncus et at nisi. Nulla
condimentum nisl ut nisi interdum, eget dignissim felis luctus. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Donec id dapibus est. Morbi quis odio non leo
facilisis ullamcorper. Pellentesque lacinia lacus sed odio convallis, finibus venenatis odio iaculis. Duis nibh
nisi, egestas in nisl at, ullamcorper faucibus urna. Curabitur orci diam, pretium id nisl sed, luctus ultrices
elit. Nulla ac ullamcorper leo, vitae dictum nisi. Quisque at eros in enim volutpat dapibus. Vestibulum
ultricies tincidunt ipsum. Vivamus sit amet dignissim ipsum. Nullam lobortis est vitae ipsum placerat, non
lobortis purus rutrum. Donec vitae nibh purus. Nam velit massa, consectetur non quam id, posuere finibus
mi. Etiam ligula lorem, rutrum vitae malesuada vitae, condimentum eget massa. Morbi dignissim id elit at
fermentum. Vivamus suscipit placerat turpis quis tempor. Nam lectus erat, dignissim in ultrices sed, congue
auctor enim. Nunc et dolor consectetur, vulputate lacus nec, porta nulla. Ut turpis erat, facilisis non nisl ac,
posuere posuere lectus. Pellentesque pellentesque sollicitudin neque sit amet convallis. Morbi elementum
enim vel dui rutrum, vitae consequat nibh suscipit. Vivamus suscipit imperdiet libero, nec lobortis nulla
mollis sed. Mauris vitae massa dignissim arcu dictum eleifend. Sed sem orci, elementum ac pharetra eu,
aliquet vitae diam. Integer eget porttitor purus. Suspendisse eros felis, semper et quam ultricies, dignissim
interdum purus. Vestibulum bibendum ullamcorper tempus. Sed elementum aliquam lorem vitae pulvinar.
Maecenas tempus bibendum ante, vitae sagittis augue. Cras magna massa, elementum sed vehicula nec,
suscipit id diam. Suspendisse consequat lectus nulla. Pellentesque eu lacus sapien. Sed quis eros tellus.
Suspendisse iaculis ut velit id viverra. Proin aliquet dignissim tellus nec sagittis.

11. Ustal szerokość kolumny z tekstem. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nulla
placerat tortor et sapien sollicitudin hendrerit. Donec id
eleifend est. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.
Maecenas bibendum libero vitae gravida lobortis. Cras
quis molestie nunc. Nunc eleifend libero non sem
molestie tincidunt. Vivamus vitae purus vehicula,
finibus sem vitae, tristique mi. Sed venenatis aliquam
purus, non accumsan ante tincidunt ac. Donec vel
imperdiet enim. Sed fermentum facilisis ex. Sed
feugiat, libero vitae fermentum vulputate, purus tortor
elementum sapien, ac accumsan nibh mauris a nibh.
Vestibulum accumsan mi a est ultricies porttitor.
Curabitur magna sem, accumsan sed aliquam a,
malesuada sed massa. Donec tempus mattis neque
suscipit hendrerit. Cras luctus mauris sit amet
consequat condimentum. Etiam sit amet eros vel dui
aliquam rhoncus et at nisi. Nulla condimentum nisl ut
nisi interdum, eget dignissim felis luctus. Pellentesque
habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec id dapibus est. Morbi
quis odio non leo facilisis ullamcorper. Pellentesque
lacinia lacus sed odio convallis, finibus venenatis odio
iaculis. Duis nibh nisi, egestas in nisl at, ullamcorper
faucibus urna. Curabitur orci diam, pretium id nisl sed,
luctus ultrices elit. Nulla ac ullamcorper leo, vitae

12. Rozbij tekst na akapity. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nulla placerat tortor et
sapien sollicitudin hendrerit. Donec id eleifend est.
Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Maecenas
bibendum libero vitae gravida lobortis. Cras quis
molestie nunc. Nunc eleifend libero non sem molestie
tincidunt.
Vivamus vitae purus vehicula, finibus sem vitae,
tristique mi. Sed venenatis aliquam purus, non
accumsan ante tincidunt ac. Donec vel imperdiet enim.
Sed fermentum facilisis ex.
Sed feugiat, libero vitae fermentum vulputate, purus
tortor elementum sapien, ac accumsan nibh mauris a
nibh. Vestibulum accumsan mi a est ultricies porttitor.
Curabitur magna sem, accumsan sed aliquam a,
malesuada sed massa.
Donec tempus mattis neque suscipit hendrerit. Cras
luctus mauris sit amet consequat condimentum. Etiam
sit amet eros vel dui aliquam rhoncus et at nisi.
Nulla condimentum nisl ut nisi interdum, eget
dignissim felis luctus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis

13. Dodaj nagłówki
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla placerat tortor et sapien sollicitudin hendrerit.
Donec id eleifend est.
…i śródtytuły
Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Maecenas
bibendum libero vitae gravida lobortis. Cras quis
molestie nunc. Nunc eleifend libero non sem molestie
tincidunt.
Vivamus vitae purus vehicula, finibus sem vitae,
tristique mi. Sed venenatis aliquam purus, non
accumsan ante tincidunt ac. Donec vel imperdiet enim.
Sed fermentum facilisis ex.
To też jest śródtytuł
Sed feugiat, libero vitae fermentum vulputate, purus
tortor elementum sapien, ac accumsan nibh mauris a
nibh. Vestibulum accumsan mi a est ultricies porttitor.
Curabitur magna sem, accumsan sed aliquam a,
malesuada sed massa.
Donec tempus mattis neque suscipit hendrerit. Cras

14. Ustal proporcje
kolejnych
nagłówków na
1 : 1.618
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla placerat tortor et sapien sollicitudin hendrerit.
Donec id eleifend est.
…np. 16, 24, 42px
Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Maecenas
bibendum libero vitae gravida lobortis. Cras quis
molestie nunc. Nunc eleifend libero non sem molestie
tincidunt.
Ten tak samo jak poprzedni
Vivamus vitae purus vehicula, finibus sem vitae,

15. Zmień tego
Timesa!
Rozbij tekst na akapity. Ustal
szerokość kolumny z tekstem. Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Nulla placerat tortor et sapien sollicitudin
hendrerit. Donec id eleifend est.
To jest Montserrat
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos
himenaeos. Maecenas bibendum libero vitae
gravida lobortis. Cras quis molestie nunc.
Nunc eleifend libero non sem molestie
tincidunt.
To też, ale cieńszy. Vivamus
vitae purus vehicula, finibus
sem vitae, tristique mi.

16. Dodaj ładne
zdjęcia
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla http://pexels.com tortor
et sapien sollicitudin hendrerit. Donec id
eleifend est.
Pexels.com
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos
himenaeos. Maecenas bibendum libero vitae
gravida lobortis. Cras quis molestie nunc.
Nunc eleifend libero non sem molestie
tincidunt.
Vivamus vitae purus vehicula, finibus sem
vitae, tristique mi. Sed venenatis aliquam
purus, non accumsan ante tincidunt ac.
Donec vel imperdiet enim. Sed fermentum
facilisis ex.

17. Wybierz kolor z
prawego
górnego rogu
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos
himenaeos. Maecenas bibendum libero vitae
gravida lobortis. www.colorpicker.com Cras
quis molestie nunc. Nunc eleifend libero non
sem molestie tincidunt.
Vivamus vitae purus vehicula, finibus sem
vitae, tristique mi. Sed venenatis aliquam
purus, non accumsan ante tincidunt ac.
Donec vel imperdiet enim. Sed fermentum
facilisis ex.
Sed feugiat, libero vitae fermentum
vulputate, purus tortor elementum sapien,
ac accumsan nibh mauris a nibh. Vestibulum

18. Dobierz kolejne
kolory z
gotowej palety
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos
himenaeos. Maecenas bibendum libero vitae
gravida lobortis. color.adobe.com Cras quis
molestie nunc. Nunc eleifend libero non sem
molestie tincidunt.
Vivamus vitae purus vehicula, finibus sem
vitae, tristique mi. Sed venenatis aliquam
purus, non accumsan ante tincidunt ac.
Donec vel imperdiet enim. Sed fermentum
facilisis ex.
Sed feugiat, libero vitae fermentum
vulputate, purus tortor elementum sapien,
ac accumsan nibh mauris a nibh. Vestibulum

19. t
Biały to też kolor!
Pamiętaj!

20. Zadbaj o
odpowiedni
kontrast
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos
himenaeos. Maecenas bibendum libero vitae
ul webaim.org/resources/contrastchecker/
Cras quis molestie nunc. Nunc eleifend
libero non sem molestie tincidunt.
Vivamus vitae purus vehicula, finibus sem
vitae, tristique mi. Sed venenatis aliquam
purus, non accumsan ante tincidunt ac.
Donec vel imperdiet enim. Sed fermentum
facilisis ex.
Sed feugiat, libero vitae fermentum
vulputate, purus tortor elementum sapien,
ac accumsan nibh mauris a nibh. Vestibulum
21 : 1
7 : 1
3 : 1
3 : 1

21. Zadbaj o
odpowiedni
kontrast kolorów
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos
himenaeos. Maecenas bibendum libero vitae
ul webaim.org/resources/contrastchecker/
Cras quis molestie nunc. Nunc eleifend
libero non sem molestie tincidunt.
Vivamus vitae purus vehicula, finibus sem
vitae, tristique mi. Sed venenatis aliquam
purus, non accumsan ante tincidunt ac.
Donec vel imperdiet enim. Sed fermentum
facilisis ex.
Sed feugiat, libero vitae fermentum
vulputate, purus tortor elementum sapien,
ac accumsan nibh mauris a nibh. Vestibulum
5.21 : 1
1.92 : 1
3.66 : 1
3.03 : 1
1.58 : 1

22. 1.5 Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla placerat tortor et sapien sollicitudin hendrerit.
Donec id eleifend est.
Wypróbuj 100 px zamiast 6 - 8 px
1.5 Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Maecenas
bibendum libero vitae gravida lobortis.
2.0. Cras quis molestie nunc. Nunc eleifend libero non
sem molestie tincidunt. Vivamus vitae purus vehicula,
finibus sem vitae, tristique mi. Sed venenatis aliquam
purus, non accumsan ante tincidunt ac. Donec vel
imperdiet enim. Sed fermentum facilisis ex.
Albo 150
Sed feugiat, libero vitae fermentum vulputate, purus
tortor elementum sapien, ac accumsan nibh mauris a
nibh. Vestibulum accumsan mi a est ultricies porttitor.
Curabitur magna sem, accumsan sed aliquam a,
Wprowadź
marginesy

23. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla placerat tortor et sapien sollicitudin hendrerit.
Donec id eleifend est.
Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Maecenas
bibendum libero vitae gravida lobortis.
1.5. Cras quis molestie nunc. Nunc eleifend libero non
sem molestie tincidunt. Vivamus vitae purus vehicula,
Ustaw więcej
światła

24. 1.5 Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla placerat tortor et sapien sollicitudin hendrerit.
Donec id eleifend est.
1.5 Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Maecenas
bibendum libero vitae gravida lobortis.
2.0. Cras quis molestie nunc. Nunc eleifend libero non
sem molestie tincidunt. Vivamus vitae purus vehicula,
finibus sem vitae, tristique mi. Sed venenatis aliquam
Powiększ
Interlinię do 1.5+

25. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla placerat tortor et sapien sollicitudin
hendrerit. Donec id eleifend est.
Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Maecenas
bibendum libero vitae gravida lobortis.
Ułóż treść
w gridzie

26. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla placerat tortor et sapien sollicitudin
hendrerit. Donec id eleifend est.
Ułóż treść
w gridzie (2)
Ustaw margines nad nagłówkiem
Class aptent taciti sociosqu ad litora torquent per

27. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla placerat tortor et sapien sollicitudin
Ustaw animację
(transition!)

28. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla placerat tortor et sapien
sollicitudin hendrerit. Donec id eleifend est.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla placerat tortor et sapien sollicitudin
hendrerit. Donec id eleifend est.
lorem
ipsum
dolor
sit
Dodaj
pierdolniki
+
„
....

29. Biały to też kolor!
Pamiętaj!