11 принципов создания простого дизайна

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


Делайте все проще. Эта концепция восходит к 1960 году, когда ВМС США осуществили принцип Kiss, который утверждает, что большинство систем работают лучше, если они простые, а не сложные. То же самое касается практически любого дизайн-проекта.
Однако создание простой конструкции немного сложнее, чем кажется. Вот одиннадцать правил дизайна, которые помогут вам создать простую, но эффектную страницу.

1. Установите одну цель для страницы


Любой дизайн, не только простой, начинается с формулирования цели проекта и конкретных целей для каждой страницы сайта. Каждая страница должна вести посетителей к одному действию (кроме навигации и нижнего колонтитула).
Цель может быть любой – от ссылки до заполнения формы, от игры до просмотра видео. Но каждая страница должна быть направлена на одно действие для пользователя. Слишком большое количество возможных действий запутает пользователя и отпугнет. В некоторых ситуациях посетителю дают выбор из двух действий, но больше уже будет перебором.

Постарайтесь спланировать структуру сайта таким образом, чтобы каждая страница предлагала выполнить только одно целевое действие. Все Call-To-Action-кнопки, которые вы разместили на странице, должны приводить к одному и тому же действию. Простота делает дизайн легким и интересным.

2. Используйте два семейства шрифтов


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

Хорошо, если они будут включать нестандартное начертание или символы, способствующие подчеркиванию важности заголовка или текста. Используйте возможности css – увеличьте пространство между буквами, пользуйтесь разными размерами. Это поможет создать читаемую и легкую страницу, которая имеет визуальную непротиворечивость.

3. Последовательно выравнивайте все элементы на странице


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

Выравнивание влево и по центру – наиболее распространены. Но если у вас много текста, предпочтительней выбрать левое выравнивание. Это наиболее удобочитаемый вариант.

4. Установите иерархию элементов


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

Не забывайте про F-шаблон – взгляд пользователя скользит таким образом, что получается буква F. Именно поэтому меню можно отнести к третьему визуальному блоку, если оно расположено справа.

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

5. Оставьте пустое пространство вокруг элементов


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

Воспользуйтесь модульной сеткой и установите правила для количества пустого пространства. Даже то, что визуально выглядит хаотично – просчитано, помните об этом. Используйте не только вертикальное расположение элементов, но и горизонтальное – рассчитайте высоту строк. Ее регулирование позволит вам управлять пространством вокруг элементов.
Если ваша страница выглядит пустой – измените размер блоков в модульной сетке или ограничьте их количество. Протестируйте на себе или на знакомых. При открытии страницы посетитель должен первым делом увидеть то, что вы считаете главным. При этом не должно создаваться ощущение, что страница пуста.

6. Усильте контраст


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

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

7. Используйте иконки и элементы в общем стиле сайта


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

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

8. Избегайте размытых краев


Размытие блоков и кнопок часто выглядит неаккуратно и не всегда вписывается в минималистичный дизайн. Если вы все же решили добавить этот эффект, постарайтесь, чтобы размытие выглядело гармонично. Ровные четкие края все же выглядят строже и подчеркивают важность вашего предложения.

Особенно это важно для кнопок. Они должны быть явно заметны и контрастны. Поэтому предпочтительней использовать четкую рамку. Можно использовать легкий эффект размытия при нажатии кнопки.
Если вы решили использовать тень, то помните: тень ложится лучше на фон, который светлее чем сам элемент. В обратном случае подбирать цвет тени надо аккуратно.

9. Проработайте детали


Тени, текстуры, прозрачность, эффекты – каждая деталь дизайна имеет огромное значение. Постарайтесь разрабатывать каждый элемент с точки зрения самого важного.

10. Используйте изображения


Изображения гораздо быстрее, чем текст формирую восприятие информации. Единого совета по их использованию нет и не может быть. Но все же полезно знать, что слишком яркое фоновое изображение отвлечет внимание от основных элементов страницы. Изображения хорошо использовать для усиления заголовков и текста. Однако не забывайте, что люди соскучились по чтению качественной информации. Все чаще предлагаются картинки – инфографика, диаграммы и прочее. Это не всегда хорошо. Подчеркните изображением важность, но заменить информативный текст оно не сможет.

11. Осторожнее с анимацией


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

У использования анимации есть два подводных камня:
  • ненужное привлечение внимания к несущественному элементу;
  • скорость загрузки.
В первом случае вы используете анимированный блок просто для красочности, но кнопка призыва к действию остается незамеченной. И целевого перехода не происходит.
Второй случай еще хуже. Сайт с анимацией грузится намного дольше, чем простая страница. Далеко не все пользователи имеют суперсовременный компьютер с терабайтами оперативной памяти. И, откроем вам секрет, даже не все используют последнюю версию самого популярного браузера. Для разнообразия, попробуйте открыть свой сайт на старом компьютере родителей в Internet Explorer. Результат может вас неприятно поразить.
И учитывайте пропускную способность каналов связи. Даже в городе могут обнаружиться провальные места, и часть целевой аудитории просто не дождется загрузки. Это не значит, что вы должны создать черно-белую страницу без картинок (что, кстати, тоже можно неплохо обыграть). Но и думать, что все имеют суперсовременные девайсы с отличной связью – тоже верх наивности.

Помните!


Простой дизайн не означает минимализм, возведенный в абсолют. Он может включать разные элементы из набора пользовательского опыта. Простой дизайн максимально интуитивен и понятен. Он основан на опыте пользователя и обладает хорошим юзабилити. Действия должны быть очевидны, навигация доступна, а изображения соответствовать конечной цели страницы.
Сложный дизайн – это хорошо, но вспомните слова Стива Джобса: «Решить, что не надо делать так же важно, как решить, что делать».

Заключение


В качестве итога мы позволим себе дать несколько советов начинающему дизайнеру, которые помогут при создании сайтов.

1. Следите за трендами. Они постоянно меняются, появляется что-то новое, а что-то выходит из моды. Не обязательно придерживаться только нового, но и быть освистанным за применение устаревших шаблонов тоже неприятно.
2. Новое – это хорошо забытое старое! Вы можете создать собственный тренд, как следует порывшись в прошлом. Присмотритесь к моде в одежде. Срок оборота составляет примерно 20-25 лет. Мы говорим не о ретро, а о том, что действительно модно. В начале 90-х толстые шарфы крупной вязки были очень популярны. Они вернулись в 2015. Многие модельеры берут модные тренды прошлого и придают старым вещам новое звучание. Почему бы и вам не поискать?
3. Делайте заготовки удачных находок и храните их в своей библиотеке. Иной раз бывает не сложно чуть-чуть изменить дизайн элемента, чтобы он подошел еще к одному сайту.
4. Сделайте собственную подборку инструментов. Используйте то, что вам удобно. Главное результат.
5. Не бойтесь собственных идей, будьте уверены в себе. Это не означает, что надо ругаться с заказчиком, с пеной у рта доказывая, что вы гуру, а он ничего не понимает. Заказчик всегда прав. Но человек с самоуважением невольно вызывает уважение у других.
6. Хороший дизайнер – специалист по юзабилити. Не надо проектировать лабиринт. Даже если он безумно привлекателен, посетитель найдет простой выход – кнопку «Закрыть» в окне браузера.
7. Не забывайте о тех, кто превратит ваш дизайн в реальный сайт. Эти люди считают в числах. Блоки имеют ширину и высоту, отступы тщательно отмеряются. Верстка – это технологический процесс, основанный на математике. Используйте модульную сетку и, располагая элементы на экране, думайте числами.
04 march 2017, 16:48    Ivan Web-дизайн 0    14 0

Comments (0)

    You need to login to create comments.