Шшш! Не делитесь этой инсайдерской тайной о принципах дизайна CRAP

Использование принципов дизайна CRAP - прекрасный способ создать эффективный визуальный дизайн.

«ЧТО ?!» вы все сказали, не так ли? Что ж, это наверняка было сюрпризом для вас, если вы никогда раньше не слышали о CRAP. Робин Патриция Уильямс, потрясающий американский писатель, написавшая множество книг, связанных с компьютерами, описала набор принципов графического дизайна в своей книге The Non-Designer's InDesign Book. Она назвала это ДЕРЬМО.

(Вы также можете прочитать краткое интервью с ней здесь ).

Итак, что такое ДЕРЬМО? Конечно, не тот, которого мы знаем!

Что ж, чтобы создавать эффектные, привлекающие внимание дизайны, мы должны действовать последовательно. Последовательность приходит с внедрением основ и основ, которые всегда необходимы. Эти основы - самые простые вещи, которые должен постоянно учитывать любой дизайнер.

Ваша задача как графического дизайнера - создать что-то, что гипнотизирует зрителя так, что он не может покинуть веб-сайт. Зрители должны быть приклеены к своим сиденьям с вашим захватывающим графическим дизайном, и для этого есть CRAP.

CRAP - это аббревиатура, обозначающая контраст, повторение, выравнивание и близость.

1. Контраст

Контраст описывается как «сопоставление разнородных элементов (например, цвета, тона или эмоции) в произведении искусства». Контраст - это то, что выделяет элементы. Прежде чем углубиться в это, вам следует учесть один совет. Если вы используете функцию контрастирования слишком много раз, вы просто уменьшаете контраст, а не увеличиваете его. Почему? Потому что контраст означает то, что означает, когда вы хотите выделить несколько элементов. Если все выделяется, ничто не выделяется! Как важный элемент в принципах дизайна дерьма, вы должны знать, как его правильно использовать. Итак, приступим!

Цвет

Вы можете использовать разницу в цветах для создания контраста. Консорциум World Wide Web (W3C) разработал рекомендации по минимальному контрасту, необходимому между текстом и его фоном. Хотя высокая контрастность является обязательной, когда речь идет о тексте и фоне, это неверно, когда мы говорим о разных элементах. Высокий контраст между различными элементами может утомить глаза пользователей. Вы можете посмотреть на версию своего дизайна в оттенках серого, чтобы увидеть, был ли использован оптимальный контраст.

Как правило, хорошей практикой может быть использование оттенков дополнительных цветов, которые не создают утомляющего глаза высокого контраста.

Размер

Различия в размерах элементов, особенно когда речь идет о тексте, могут быть источником контраста. Если размер элемента будет значительно больше, чем у других окружающих его элементов, это сделает его привлекательным. Кнопки с призывом к действию (CTA) также могут иметь больший размер. Ваши зрители будут замечать их больше, и они помогут вам с вашим CRO. Кроме того, если вам нужна дополнительная помощь с вашими стратегиями CRO, ознакомьтесь с этим руководством.

Форма

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

Шрифт

Мы можем разделить шрифты на разные группы. Засечки, без засечек, шрифт, моноширинный шрифт и отображение являются основными классификациями машинописного текста. Использование разных групп шрифтов может создать контраст для текста, который мы хотим обозначить. Кроме того, использование шрифтов разной толщины (полужирный или обычный), стилей шрифтов (курсив, непрозрачный или нормальный) и оформления шрифтов (подчеркивание, зачеркивание и т. Д.) Может вывести вашу игру на новый уровень.

2. Повторение

Как человеческие существа, наш разум запрограммирован на модели симпатий; Ищем их везде. Что создает узоры? Повторение! Кроме того, мы создаем чувство идентичности, когда сталкиваемся с повторением вещей. Подумайте о музыкальном произведении, в котором не повторяются основные темы. Вы бы почувствовали себя потерянным.

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

Повторение в дизайне - еще один важный принцип в четырех принципах дизайна CRAP. Пользователь должен чувствовать себя в безопасности, а не потеряться. Это помогает оптимизировать UX вашего сайта.

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

Выравнивание, как еще один решающий фактор в принципах дизайна CRAP, определяет расположение элемента в дизайне. Это то, что придает дизайну целостность и порядок. Что касается элементов, вы можете выровнять их по краям или центрам. Однако текст может быть выровнен по левому краю, правому краю, по центру или может быть просто выровнен по ширине. В зависимости от используемого языка текста наиболее популярными являются выравнивание по левому и правому краю, будь то LTR или RTL. Мы можем использовать выравнивание по центру для коротких фрагментов текста (но его трудно читать на длинных текстах). Обоснование - хороший выбор, когда длина строки большая, размер шрифта небольшой, а слова короче (использование его на узких строках, состоящих из длинных слов, снижает удобочитаемость).

Каждый дизайн должен иметь несколько вертикальных линий, которые служат направляющими для горизонтального выравнивания. Текст, плавающий повсюду на странице, просто сбивает с толку вашего зрителя. Ваши зрители должны просто уметь понимать отношение каждой части страницы друг к другу.

4. Близость

И последнее, но не менее важное: близость - еще один принцип, который играет жизненно важную роль в дизайне CRAP. Близость в дизайне означает, что мы должны размещать элементы, которые связаны друг с другом и тесно связаны друг с другом. В этом есть смысл, не так ли? Вы же не хотите искать ссылку, относящуюся к статье, которую вы читаете, на панели навигации, не так ли? Кроме того, равномерное расположение элементов по всей странице затрудняет отслеживание дизайна. Сгруппируйте связанные элементы как можно больше, чтобы вашему зрителю было легче найти нужную информацию.

Правило трех секунд

«Чтобы влюбиться, нужно всего 3 секунды».

Итак, последний тест, на который вы можете пойти, чтобы убедиться, что ваш дизайн CRAP безупречен, - это проверить, эффективен ли он через 3 секунды. Вы можете сделать это сами, очистив свой разум и отведя взгляд, а затем снова вернувшись к нему. Вы также можете спросить мнение друга или родственника через 3 секунды. Мы решаем, привлекает ли нас что-то и хотим ли мы продолжать это или нет, всего за 3 секунды.

Отношения

Мы не должны использовать эти принципы изолированно. Повторение и выравнивание работают вместе, чтобы обеспечить «нормальное» состояние, которое позволяет изменять форму или расположение фрагмента текста для создания контраста. Кроме того, повторение и близость работают вместе для создания эффективных форматов, таких как маркированные списки - повторение маркера подчеркивает близость точек.

Вывод

Оскар Уайльд в предисловии к своей самой известной книге «Картина Дориана Грея» говорит: «Художник - творец прекрасных вещей. Раскрыть искусство и скрыть художника - цель искусства ».

Наконец, цель состоит в том, чтобы усилия, которые вы вложили в создание документа, исчезли, стали невидимыми, давая вашему читателю или зрителю неограниченный доступ к идеям, которые вы пытаетесь передать, - как непосредственно в тексте, так и очень тонко, через ваш выбор конструктивных элементов. В этом отношении это неблагодарная работа, поскольку мало кто заметит (или даже заметит) качество дизайна, но они заметят сообщение и отреагируют на него. Разве не в этом все дело?