1. OOO «Ричмедиа»
Алексей Жуков
Ведущий дизайнер
Шайхутдинов Ринат
Руководитель проектов

2. Анатомия Web страницы
ООО «Ричмедиа» , iSpring Solutions, Inc. 2

3. Ограничения проекта
ООО «Ричмедиа» , iSpring Solutions, Inc. 3
Время Ресурсы
Функциональность
Качество

4. OOO «Ричмедиа»
• Акцентирование
• Контрастирование
• Балансировка
• Выравнивание
• Повторение
• Обеспечение удобства восприятия
ООО «Ричмедиа» , iSpring Solutions, Inc. 4

5. Контрастирование
ООО «Ричмедиа» , iSpring Solutions, Inc. 5
Как выделить
элементы из окружения?

6. Примеры контрастирования
ООО «Ричмедиа» , iSpring Solutions, Inc. 6
“Без контраста вы ноль”
Пол Рэнд,
дизайнер

7. Перетц Розенбаум vs Стив Джобс
ООО «Ричмедиа» , iSpring Solutions, Inc. 7

8. Контрастирование: Цвет
ООО «Ричмедиа» , iSpring Solutions, Inc. 8

9. Контрастирование: Размер
ООО «Ричмедиа» , iSpring Solutions, Inc. 9

10. Контрастирование: Выравнивание
ООО «Ричмедиа» , iSpring Solutions, Inc. 10

11. Контрастирование: Форма
ООО «Ричмедиа» , iSpring Solutions, Inc. 11

12. Контрастирование: Оттенок
ООО «Ричмедиа» , iSpring Solutions, Inc. 12

13. And the winner is…
ООО «Ричмедиа» , iSpring Solutions, Inc. 13
A E
D B F C
H G

14. Способ контрастирования?
ООО «Ричмедиа» , iSpring Solutions, Inc. 14

15. Способ контрастирования?
ООО «Ричмедиа» , iSpring Solutions, Inc. 15

16. Способ контрастирования?
ООО «Ричмедиа» , iSpring Solutions, Inc. 16

17. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 17

18. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 18

19. The Gutenberg Rule
ООО «Ричмедиа» , iSpring Solutions, Inc. 19
Johannes Gutenberg
15th century
Reading Gravity

20. ООО «Ричмедиа» , iSpring Solutions, Inc. 20

21. ООО «Ричмедиа» , iSpring Solutions, Inc. 21

22. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 22

23. Z-Pattern Layout: Направление
ООО «Ричмедиа» , iSpring Solutions, Inc. 23
• Брэндинг, иерархия структура, call to action

24. ООО «Ричмедиа» , iSpring Solutions, Inc. 24

25. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 25

26. Zig-Zag Pattern: Направление
ООО «Ричмедиа» , iSpring Solutions, Inc. 26
1 2
3 4
5 6
7 8

27. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 27

28. Golden Triangle Pattern: Направление
ООО «Ричмедиа» , iSpring Solutions, Inc. 28
1 2
3

29. ООО «Ричмедиа» , iSpring Solutions, Inc. 29

30. ООО «Ричмедиа» , iSpring Solutions, Inc. 30

31. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 31

32. F-Pattern Layout
ООО «Ричмедиа» , iSpring Solutions, Inc. 32
1 2
3 4
5 6
7 8
9

33. F-Layout: Heatmap
ООО «Ричмедиа» , iSpring Solutions, Inc. 33

34. F-Layout: Макет
ООО «Ричмедиа» , iSpring Solutions, Inc. 34

35. F-Layout: Добавим контента
ООО «Ричмедиа» , iSpring Solutions, Inc. 35

36. F-Layout: Да это он =)
ООО «Ричмедиа» , iSpring Solutions, Inc. 36

37. ООО «Ричмедиа» , iSpring Solutions, Inc. 37

38. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 38

39. Значимость элементов
ООО «Ричмедиа» , iSpring Solutions, Inc. 39

40. Комфортный просмотр
ООО «Ричмедиа» , iSpring Solutions, Inc. 40

41. Значимость элементов
ООО «Ричмедиа» , iSpring Solutions, Inc. 41
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique, metus consectetur consequat viverra,
magna turpis faucibus est, in congue dui risus ut erat. Donec sed lorem ac neque commodo aliquet vel in urna.
Vestibulum lobortis diam at lorem venenatis vitae placerat justo consectetur. Mauris vestibulum, ligula vitae
euismod sagittis, nibh sem euismod purus, sit amet lacinia tortor diam quis enim. Quisque tempus diam non
mauris ornare cursus.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Integer tristique, metus consectetur consequat viverra.
Magna turpis faucibus est
In congue dui risus ut erat. Donec sed lorem ac neque commodo aliquet vel in urna.
Vestibulum lobortis diam at lorem venenatis vitae placerat justo consectetur:
• mauris vestibulum
• ligula vitae
Euismod sagittis
Nibh sem euismod purus
sit amet lacinia tortor diam quis enim.
Quisque tempus diam nonauris ornare cursus.
versus

42. Большой = важный?
ООО «Ричмедиа» , iSpring Solutions, Inc. 42

43. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 43

44. Сетка
ООО «Ричмедиа» , iSpring Solutions, Inc. 44

45. Сетка
ООО «Ричмедиа» , iSpring Solutions, Inc. 45

46. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 46

47. Golden Ratio: Формула
ООО «Ричмедиа» , iSpring Solutions, Inc. 47

48. Мона? Лиза?
ООО «Ричмедиа» , iSpring Solutions, Inc. 48
Ага :)

49. Apple: Golden Ratio in Logo Design
ООО «Ричмедиа» , iSpring Solutions, Inc. 49

50. Golden Ratio: Twitter
ООО «Ричмедиа» , iSpring Solutions, Inc. 50

51. Golden Ration: Two column layout
ООО «Ричмедиа» , iSpring Solutions, Inc. 51

52. ООО «Ричмедиа» , iSpring Solutions, Inc. 52

53. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 53

54. Правило Третей: Основы
ООО «Ричмедиа» , iSpring Solutions, Inc. 54

55. Правило Третей
ООО «Ричмедиа» , iSpring Solutions, Inc. 55
ItWorks =)

56. Don't be evil
ООО «Ричмедиа» , iSpring Solutions, Inc. 56

57. Найдётся всё
ООО «Ричмедиа» , iSpring Solutions, Inc. 57

58. Ещё один пример
ООО «Ричмедиа» , iSpring Solutions, Inc. 58

59. И ещё
ООО «Ричмедиа» , iSpring Solutions, Inc. 59

60. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 60

61. Инструменты
ООО «Ричмедиа» , iSpring Solutions, Inc. 61

62. OOO «Ричмедиа»
ООО «Ричмедиа» , iSpring Solutions, Inc. 62

63. ООО «Ричмедиа» , iSpring Solutions, Inc. 63

64. Как достичь результат?
ООО «Ричмедиа» , iSpring Solutions, Inc. 64

65. ООО «Ричмедиа» , iSpring Solutions, Inc. 65

66. Компоновка посвободнее…
ООО «Ричмедиа» , iSpring Solutions, Inc. 66