Элементарные правила дизайна для простых смертных. Обязательно прочитайте книгу «Дизайн для недизайнеров» — там мало страниц и много картинок, читать — одно удовольствие, зато польза огромная.

1. 4-й слой
семинар о 4м слое дизайна по мотивам книги «Дизайн для недизайнеров»
P.S. о слоях дизайна читайте здесь (ссылка кликабельна): http://leadmachine.ru/2013/10/23/the_dribbblisation_of_design/

2. Привет! Меня зовут Надя Поминова,
я не дизайнер, но мне часто приходится
что-нибудь оформлять.
Пришлось познакомиться с некоторыми
правилами дизайна или узнать какие-то вещи
опытным путём.
Теперь я расскажу всё это вам.

3. Плохой дизайн вокруг нас.
Его создаём мы сами.

4. Слайд семинара

5. Документ

6. Целевая страница

7. Слайд презентации

8. Я и сама так делала

9. Страница отчёта

10. Почему так происходит?

11. Как вы видите то,
что вы сделали

12. Как вы видите то,
что вы сделали
Как это на самом
деле выглядит

13. Важно научиться видеть плохое и понимать,
почему это плохо. Для этого надо знать самые
основные правила дизайна.

14. Правило приближения

15. Связанные элементы необходимо объединять
в группы.

16. Плохо
Все элементы находятся на равном удалении
друг от друга, даже пункты списка, которые
следует сгруппировать.

17. Плохо
Описание «На этот email придёт письмо с файлом»
находится не на своём месте — из-за того, что оно далеко
от поля «email», становится непонятно, к чем оно
относится. Надпись «Скачивая файл...» относится
к кнопке, но визуально это непонятно

18. Плохо
Описание «На этот email придёт письмо с файлом»
находится не на своём месте — из-за того, что оно далеко
от поля «email», становится непонятно, к чем оно
относится. Надпись «Скачивая файл...» относится
к кнопке, но визуально это непонятно
Хорошо

19. Правило приближения
Правило приближения структурирует материал.
Так его легче воспринимать и запоминать
Важно:
используйте расстояние между элементами для
построения логических связей.

20. Правило выравнивания

21. Ни один элемент страницы не можеть быть
расположен случайным образом.

22. Плохо
На одной странице применено два выравнивания: по центру и по левому краю.
Элементы не выровнены относительно друг друга.

23. Лучше
Единое выравнивание на всей странице, но выровнено по центру

24. Хорошо
Единое выравнивание по левому краю, общая граница связывает
элементы и придаёт выразительность

25. Почему лучше не выравнивать по центру?

26. Почему лучше не выравнивать по центру?
Посмотрите на этот абзац. Часто, когда абзац
выровнен по центру, так сразу и не поймёшь,
выровнен он по центру специально, или это
просто неопрятность. Как здесь. Строки
не сильно отличаются по длине, но при этом
разные. Тогда уж лучше выровнять по краю.

27. Почему лучше не выравнивать по центру?
Посмотрите на этот абзац. Часто, когда абзац
выровнен по центру, так сразу и не поймёшь,
выровнен он по центру специально, или это
просто неопрятность. Как здесь. Строки
не сильно отличаются по длине, но при этом
разные. Тогда уж лучше выровнять по краю.
ница
гра
ьная
л
ьным
зите
ител
а
выр
ыраз
Не
нев
зайн
ет ди
дела

28. То же самое о выравнивании по ширине
Посмотрите на этот абзац. Он выглядит убого.
Бедненький! Сколько у него проплешин. Может,
не стоит так издеваться над текстом? Может,
выровним его по левому краю, чтобы он
смотрелся красиво?

29. Правило выравнивания
Правило выравнивания придаёт оформлению
выразительность и гармонию
Важно:
располагайте элементы на странице осозанно.

30. Правило повтора

31. Некоторые компоненты дизайна должны
повторяться по всей публикации.

32. Плохо
Разные шрифты, разное расстояние между строками, одни объявления
набраны прописными, другие — строчными буквами.
P.S. Прошу прощения за плохое качество картинки

33. Хорошо
Разные страницы явно принадлежат одному и тому же документу. Это видно
благодаря одинаково оформленным заголовкам и номерам разделов,
повторяюшимся колонтитулам.

34. Правило повтора
Повторяющиеся элементы объединяют части
документа в единое целое
Важно:
избегайте избыточного повтора.

35. Правило контраста

36. Контраст должен быть сильным, только тогда он
работает. Следуйте принципу «Don’t be a wimp»*
*Не будь слабаком

37. Какая пара запомнится вам сильнее?

38. Плохо
Наборный текст почти не отличается по размеру от заголовка. Как для текста,
так и для заголовка выбран один и тот же шрифт. Слайд не привлекает
внимания и не вызывает желания его читать

39. Хорошо
Реакция и выводы
95%
считают,
что
это
невозможно!
Компания
разорится
или,
по
крайней
мере,
потеряет
много
денег.
Это
значит,
вы
знаете
о
недостатках
в
работе
с
Клиентами
и
в
вашей
работе,
но
не
исправляете.

40. Правило контраста
Контраст привлекает внимание читателя.
Важно:
будьте смелее — невозможно создать контраст
между шрифтом 11 кегля и шрифтом 14.

41. Убирайте лишнее

42. Все элементы, которые можно убирать, убирайте.
Чем меньше элементов, тем лучше.

43. Плохо

44. Плохо
Реакция и выводы
95%
считают,
что
это
невозможно!
Компания
разорится
или,
по
крайней
мере,
потеряет
много
денег.
Это
значит,
вы
знаете
о
недостатках
в
работе
с
Клиентами
и
в
вашей
работе,
но
не
исправляете.

45. Хорошо
95%
считают,
что
это
невозможно

46. Немного о шрифтах

47. О шрифтах надо запомнить:
шрифты есть с засечками и без засечек
есть изящные шрифты, где линия имеет сильный
переход от тонкой к толстой (Garamond), а есть
такие, как этот — почти без конраста

49. Пара правил для сочетания
шрифтов
сочетая шрифты, создавайте контраст
не используйте больше 3 шрифтов в одном
документе

50. « И одна последняя вещь »
Стив Джобс

51. Не используйте клипарт

52. Не используйте клипарт
НИКОГДА

53. Давайте делать красиво