Design for-not-designers

Принципы дизайна для не-дизайнеров

или как научиться видеть недостатки в дизайне

Повысить зрительную чувствительность

Наша цель

4 основных принципа дизайна Модульная верстка Практика

Содержание

Приближенность Выравнивание Контраст Повтор

4 основных принципа дизайна

Приближенность

Приближенность

Цель правила: организовать текст

Суть: взаимосвязанные элементы должны располагаться рядом.

Приближенность

Плюсы: ◦ Чтобы выглядеть как одна логическая группа.◦ Чтобы знать откуда начинать читать и где

заканчивать.◦ Облегчает быстрое чтение и поиск нужной

информации

Приближенность

Присмотритесь к странице◦ 3-5 групп◦ Информация не разнесена по

углам или только в центре◦ Связанные между собой

элементы – близко◦ Не связанные - отделены

Приближенность

Приближенность

Приближенность

Приближенность

Выравнивание

Цель: придать странице единство Чем меньше

вертикальных/горизонтальных линий, тем лучше

Выравнивание

Выравнивание

Избегайте выравнивания по центру – текст получается официальным и безликим

Выравнивание

Выравнивание

Выравнивание

Блоки текста должны быть выровнены по правому или левому краю

Рисунки – под края текста или любых других блоков на странице

Нашему взгляду нравится видеть порядок В хорошо оформленном материале видны линии,

соединяющие выровненные части Даже если дизайн хорош, погрешности в

выравнивании его невыносимо ПОРТЯТ Даже если элементы расположены далеко друг от

друга, ищите линии под которые их можно выровнять

Не более одного вида выравнивания на странице

Выравнивание

Выравнивание

Выравнивание

Выравнивание

Повтор

Цель: объединить и придать внешнюю привлекательность

Суть: элементы оформления повторяются на протяжении всего проекта◦ Все заголовки одинаковым

шрифтом одинакового размера

Найдите существующие повторы и усильте их

Повтор

Повтор

Повтор

Или введите повторяющийся элемент сами

Но не переборщите

Повтор

Повтор

Контраст

Контраст

Цель: привлечь внимание, сделать страницу интересной

Контраст должен быть сильным◦ Не «похожие» элементы,

а «совершенно разные»!

◦ Темно-коричневый и черный не контрастируют!

◦ 12 и 14 пт шрифты не контрастируют!

Контраст

Контраст

Элементы страницы (цвет, шрифт, размер, толщина штриха, контур, пробелы), НЕ означающие одно и то же, должны быть оформлены по-разному.

Контраст

Контраст

Контраст

Контраст

Не бойтесь свободного пространства Не бойтесь нарушить симметрию Не бойтесь делать сильный контраст

Не робеть

Приближенность Выравнивание Контраст Повтор

4 основных принципа дизайна

Дизайнерская мысль пошла дальше...

Модульная верстка

Модуль — условная единица измерения объектов, связанных в систему◦ 1 метр = 100 см◦ 1 человек = 7 голов◦ 1 удав = 38 попугаев

Сетка — система пропорций

Модуль и сетка

Пример

Виды –> Колоночная сетка

Виды –> Модульная сеткаНа пересечении вертикальных и горизонтальных линий – модуль

Поиск места◦ Поиск геометрического

места элемента в макете занимает меньше времени.

Пропорциональность◦ Элементы в макете

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

Единообразность◦ Разработав сетку, мы

делаем основу для решений на будущее.

Плюсы сетки

Бутерброд 2.0

Пример...

Золотое сечение

Золотое сечение

Золотое сечение

Хорошие примеры: oz.by, thegrids.ru, http://www.viget.com/, games.pho.to,

http://960.gs/ Плохие: unite.com, funny rush, tut.by

Примеры

Блог Леши Черенкевича: http://cherenkevich.livejournal.com/38085.html

http://thegrids.ru/ Робин Уильямс, Недизайнерская книга о

дизайне. Недизайнерская книга о шрифтах. http://webdesignledger.com/tips/the-principle-

of-contrast-in-web-design

Что почитать

Вопросы?

Если еще остались силы...