Принципы веб дизайна: Создание веб-сайта. Курс молодого бойца / Хабр

---

16.01.2022 Разное

---

Создание веб-сайта. Курс молодого бойца / Хабр

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

Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:

Данный этап можно разделить на несколько подэтапов:

• Создание идеи
• Разработка структуры проекта
• Проработка макета проекта

Создание идеи

На данном этапе нам необходимо определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические.

Разработка структуры проекта

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

Проработка макета проекта

После того, как мы определились со структурой проекта можно составить макет проекта (схематично).

Для отрисовки наброска можно использовать бумагу и ручку, Photoshop, любой другой редактор графики (раньше часто использовали Adobe Fireworks). Важно отметить, что данный этап – это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.

Основные элементы страницы

Зачастую основными элементами страницы являются: содержащий блок (wrapper, container), логотип, навигация, контент, футер (нижний колонтитул), свободное пространство (по сути свободное пространство — это не элемент дизайна, но понятие, помня о котором при составлении макета страницы, наш проект не будет выглядеть как нагромождение блоков).

Содержащий блок (контейнер)

Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed).

Логотип

Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета).

Навигация

Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).

Контент

Контент – это основная составляющая веб-страницы. Он занимает главенствующую роль в дизайне страницы, поэтому занимает большее пространство, подкреплён, помимо текста, графикой.

Нижний колонтитул (footer)

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

Резиновый и фиксированный макет

Фиксированный макет

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

Резиновый макет

«Резиновый» макет подразумевает, что страница сайта будет стараться занять всё доступное ей пространство на экране пользователя, подстраиваясь под разрешение.

В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.

На данном изображении показаны оба подхода. Сверху блок «отзывается» на любые изменения размера контейнера, снизу «адаптируется» под определённую ширину

Полезные ссылки по теме:

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

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

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

Перед составлением схемы проекта так же необходимо уяснить понятие модульной сетки. Модульная сетка подразумевает под собой разделение страницы на отдельные колонки по вертикали и выстраивание контента, при разработке дизайн макета, именно по этой сетке.

Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).

Так же стоит отметить, что при разработке «резинового» макета страницы существует понятие максимальной ширины. Данное утверждение основывается на удобстве восприятия информации. Если предположить, что наш сайт не имеет максимального значения по ширине, то на больших мониторах информация будет сильно растягиваться и её неудобно будет читать. Чаще всего ограничиваются шириной в 1280 пикселей.

Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www. designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).

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

Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.

Полезные ссылки и материалы:

Макеты веб-страниц

Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:

• Навигация в левом столбце

• Навигация в правом столбце
  
  
• Навигация в трёх столбцах

• Горизонтальная навигация
  . На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.

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

Mobile First

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

Данный подход учитывает практически весь цикл разработки, поэтому мы ещё к нему вернёмся.

Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.

После создания макета проекта можно переходить непосредственно к созданию дизайн-макета. На данном этапе начать стоит с определения цветовой гаммы проекта.

Один из способов определения основного цвета в проекте – это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.

Для работы с выбранным цветом и составлением палитры цветов нашего сайта можно использовать следующие инструменты:

• Color Scheme Designer 3 (http://colorschemedesigner. com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте

• Adobe Color CC (https://color.adobe.com/ru/). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

• COLORlovers (http://www.colourlovers.com/). Обширное сообщество, где можно подобрать различные палитры.

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

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

Элементы Call to Action

Понятие призыва к действию относится к интерактивным элементам сайта: кнопки, баннеры и пр. Данные элементы оформляются таким образом, что пользователю должно хотеться непременно на них нажать. Например, это может быть кнопка с призывом к действию (Нажми, Купи, Сэкономь), яркий баннер с заманчивым предложением, яркой картинкой и пр.

Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).

AIDA

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

• Привлечение внимания
• Интерес
• Желание
• Действие

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

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

Схема просмотра страницы

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

Визуальные направляющие

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

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

Тот же эффект продемонстрирован на втором изображении с наложенной тепловой картой: в первом случае нас привлекает в основном прямой взгляд ребенка (прямо в глаза), во втором случае направление взгляда ребенка и его поза невольно обращают взгляд пользователя на блок справа.

Фрэймворки

Стоит так же отметить, что иногда, при разработке дизайна страницы, используют фрэймворки Bootstrap, Foundation, Material Design Lite, которые, помимо готовых элементов дизайна (кнопки, формы ввода и пр.), предлагают свою модульную сетку, CSS сниппеты (часть кода, разметки, которая может неоднократно использоваться) для вставки элементов в страницу (тех же кнопок, элементов форм и пр.) и классы разметки, а так же JS скрипты для соответствующих интерактивных элементов.

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

_{Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)}

Трэнды

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

Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделённую на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаётся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счётчики, анимация и пр.).

Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.

Скевоморфизм

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

Плоский дизайн

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

Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях iOS сначала использовала имитацию реальных объектов, а затем всё упростила до плоского дизайна (Flat UI). Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google.

Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/

По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

Из наиболее популярных редакторов кода на сегодня можно выделить три:

От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less). За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.

Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).

Чтобы определиться, что подходит лично вам для разработки, стоит самим покопаться в многообразии средств и выбрать то, что больше всего удовлетворяет вашим потребностям.

Обзоры текстовых редакторов:

Структура проекта

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

Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js. В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.

Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.

Работа над проектом

Итак, определившись с редактором кода, структурой мы можем приступать к разработке. Прежде всего стоит отметить, что вёрстка страницы делается поэтапно: сначала пишется HTML-структура (HTML-код), затем добавляются стили, а после, если необходимо, пишутся скрипты (JS), добавляются необходимые плагины и библиотеки.

Учитывая вышесказанное, мы можем условно разделить работу над проектом на следующие этапы:

Написание HTML

Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (https://github. com/afarkas/html5shiv), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (https://modernizr.com/) (html5shiv входит в сборку Modernizr), которая определяет возможности браузера, с помощью которого просматривается сайт.

При вёрстке сайтов в настоящее время, априори, используется блочный подход, никаких таблиц, iframe’ов и пр. Таблицы выполняют только свою прямую роль – представление информации в виде таблицы. В вёрстке таблицы используются лишь при работе с электронными письмами.

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

При написании разметки мы так же сразу можем прописывать элементам классы и идентификаторы.

Правила именования классов

В проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

БЭМ

На сегодняшний день есть один популярный подход, который касается принципов построения проекта в целом, но на данном этапе нас интересует именно именование классов. Подход называется БЭМ и расшифровывается, как Блок Элемент Модификатор.

Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (. block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).

Таким образом мы представляем наш код, как композицию блоков, элементов и их модификаций.

Более полная информация о методологии: https://ru.bem.info/

SMACSS

Так же существует подход SMACSS (расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

• К базовому уровню будет относиться всё, что касается непосредственно тэгов html.
• К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.
• К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.
• Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.
• Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

• Макет: .l- или .layout-
• Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр.
• Состояния имеют префикс .is-, например .is-hidden {}
• Уровень Темы именуется подобно модулям.

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

Информация о методологии и онлайн книга: https://smacss. com/
Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

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

Небольшой курс по основам HTML: Смотреть

Написание CSS

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

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался reset.css, написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Normalize.css

Normalize.css наоборот, не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к более-менее однообразию во всех современных браузерах.

У обоих сводов правил есть свои плюсы и минусы, на данный момент популярен normalize.css. Популярность данного свода правил обусловлена ещё и тем, что вам не приходится при разработке заново прописывать основные свойства для базовых элементов страниц, а лишь модифицировать их по необходимости.

Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства {margin: 0; padding: 0}. Таким образом мы сбрасываем все внутренние и внешние отступы для всех элементов страницы. Но данную технику не рекомендуется использовать, так как она замедляет процесс отрисовки страницы, да и по сути имеет мало смыла (на мой взгляд).

Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета. Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.

Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т. д. пока он не доберётся до содержащего класса.

Специфичность кода, так же означает чрезмерную привязку к базовым тэгам. Например, если мы хотим, чтобы элемент внутри .block был синим и при разметке использовали элемент span (в правилах мы написали .block span {background-color: blue}), то при замене его на div, например, нам нужно будет написать новое правило уже для div внутри .block. Таким образом наш код будет обрастать ненужными правилами, которые по сути дублируют друг друга. Гораздо проще определить всего лишь один класс (класс элемента), который при присвоении внутренним элементам будет приводить нас к желаемому результату.

Ещё один пример контекстной зависимости кода – это использование имен тэгов вместе с именами классов, например, div.block {display: block}. Если мы захотим тот же класс применить к span, то нам придётся написать опять span.block {display: block} или span.block, div.block {display: block}, что в любом случае приведёт к увеличению кода на лишнюю строчку.

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

Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.

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

Полезные ссылки и материалы:

Написание JS

Итак, заключительным этапом является написание JS скриптов. При создании веб страниц стало, практически, стандартом использование библиотеки jQuery, которая позволяет с лёгкостью манипулировать элементами web-страницы (DOM узлами), навешивать прослушку событий, отправлять запросы на сервер, обрабатывать результат выполнения и пр. Но не стоит слепо доверять трендам, на сегодняшний день нативный JavaScript достиг такого уровня, что вам возможно уже не нужен jQuery. Поэтому, прежде чем слепо прикреплять jQuery, стоит задуматься, так ли он нужен для ваших задач и не достаточно ли встроенных возможностей языка JavaScript.

Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).

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

Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:

document.querySelector(‘.list__item’).style.color = ‘red’;

и т.д.
Небольшой пример с возможными способами присваивания класса (присвоение модификатора происходит при нажатии на зелёный квадрат): http://jsbin.com/.

Не рекомендуется решать задачи, которые явно относятся к уровню CSS с помощью JavaScript, пытаясь как-то выровнять объект или добавить ему стили при наведении и пр.

Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:
Благодаря данным сервисам можно проверить не забыли ли вы где-то закрыть тэг, верно ли используете параметры и атрибуты, всё ли в порядке с вашими стилями и правилами в них, а так же проверить ваш код на правильность написания функций, методов и пр.

Статьи с рекомендациями по написанию JS, HTML и CSS:

Средства автоматизации

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

960GS

Мы уже говорили об этом средстве разработки в разделе про модульные сетки и дизайн. Нужно сказать, что 960GS предлагает не только макеты для создания дизайна, но и свою систему именования классов. Используя предлагаемые классы при вёрстке и при подключении css файла системы в проект, блоки сайта будут выстроены по этой сетке, что сэкономит время на написании практически того же самого самостоятельно.

<div>
  <div>
      <div>
          . ..
      </div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
  </div>
  <div>
      ...
  </div>
</div>

Emmet

Emmet – это средство работы с html и css (http://emmet.io/). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка .block>ul.list>li.list__item*3, может быть раскрыта в полноценный код:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка w:100px+h:150px+bgc:#ff0 раскрывается в:

width: 100px;
height: 150px;
background-color: #ff0;

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

Jade

Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (http://jade-lang.com/). Опять-таки, с помощью jade писать html становится быстрее и удобнее, а так же появляется возможность создания переиспользуемых блоков кода и миксинов, передавая которым на вход те или иные параметры мы будет получать нужную нам разметку. Благодаря jade в проекте, касательно разметки и написания страниц, может поддерживаться модульность, а часто используемые названия и блоки кода могут выноситься в качестве переменных (названия, имена страниц и пр.) или миксинов в отдельные файлы настроек и файлы, соответственно. Для работы с jade, а точнее для преобразования написанного кода из jade в html, необходимо использовать командную строку, а так же установить на ваш компьютер платформу nodejs (https://nodejs. org/en/, http://nodejs.ru/).

Командная строка

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

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

Sass

Далее стоит поговорить о таком языке как Sass (http://sass-lang.com/). Данный язык упрощает работу с css. Благодаря Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла, что в значительной степени упрощает дальнейшую работу со стилями и упрощает изменение тех или иных величин, так как они все будут храниться в одном месте и не нужно будет «ходить» по всему проекту и вносить соответствующие правки. Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь: http://sass-lang.com/install.

HTML5Boilerplate

HTML5Boilerplate (https://html5boilerplate.com/) представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. В index.html, например, уже заранее прописаны основные куски кода, которые необходимы при написании html страницы. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку: http://www.initializr.com/. Опять-таки, принцип прост: зачем тратить время на написание одних и тех же строк или на проделывание одних и тех же манипуляций, если мы сразу можем сосредоточиться непосредственно на работе с проектом.

Gulp и Grunt

Gulp (http://gulpjs.com/) и Grunt (http://gruntjs.com/) представляют собой сервисы запуска задач, которые описываются в основных файлах данных сервисов, выполняются с помощью совместимых модулей и запускаются на выполнение с помощью консоли.

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

Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/

Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

Bootrstrap, Foundation, Material Design Lite

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

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

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework’и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

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

12 законов и правил, которые помогут в создании успешного дизайна

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

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

1. Бритва Оккама

Бритва Оккама (или закон минимума допущений) — сформулированный в 14 веке Отцом Церкви Вильямом Оккамом закон, который опередил своё время. Этот закон не является неоспоримой истиной, без него может обойтись научный прогресс, но, однако, он показывает, что чаще всего правильным решением является наиболее простое решение. Если сказать иначе, предпочтительным является самое простое объяснение или теория, и они чаще всего оказываются правильными.

Не следует без необходимости множить сущее. Множество не должно без необходимости становиться главным доказательством.

Как отмечал Леонардо да Винчи: «Простота – это высшая утончённость». Применительно к дизайну Бритва Оккама предупреждает о том, что нужно избегать излишней сложности как в оформлении, так и в подаче информации.

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

Читать по теме: Occam’s Razor: A Great Principle for Designers

2. Закон Хика

Закон Хика был предложен британским психологом Вильямом Эдмундом Хиком в 1950-е годы и является непрямым подтверждением Бритвы Оккама. Этот закон гласит, что чем больше выбор, тем более долгим и сложным будет процесс принятия решения.

Время принятия решения возрастает в зависимости от количества возможных вариантов выбора.

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

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

Читать по теме: How To Improve Usability With Fitts’ and Hick’s Laws

3. Закон Фиттса

Закон Фиттса – порождение мысли Пола Фиттса, который в 1954 году описал зависимость между количеством времени, требуемым для передвижения к цели, размером этой цели и расстоянием до неё. Чем легче найти цель и чем короче расстояние, тем быстрее и легче будет передвижение к этой цели.

T = a + b log2 (1 + D/W), где: T – время, а – начальное/конечное время, b – скорость передвижения, D – расстояние, W — ширина цели или допустимая погрешность.

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

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

Читать по теме: Improving Usability with Fitts’ Law

4. Последовательность Фибоначчи

Последовательность Фибоначчи, названная в честь Леонардо Пизанского, который также был известен под именем Фибоначчи, была воссоздана в начале 13 века, но она и раньше встречалась в работах старых индийских математиков. Список чисел продолжается при помощи сложения последних двух сумм. Он начинается с 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 и т.д. Интересно, что эта последовательность проявляется и в природе. Например, в разветвлениях деревьев, в лепестках и листьях очень многих растений, а также в поведении пчёл.

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

Читать по теме: Fibonacci and Golden Ratio in Web Design

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

Золотое сечение – на самом деле это математическая вариация последовательности Фибоначчи. Золотое сечение – это иррациональная математическая константа, равная приблизительно 1,6180339887. Этот закон уже был осознан более чем 2000 назад, но впервые его определение было предложено Евклидом. Золотое сечение обосновывает предпочтительность выбора пропорций форм и конструкций так, чтобы они выглядели наиболее привлекательными.
«У геометрии есть два сокровища: одно из них – теорема Пифагора; другое – деление линии на золотое сечение. Первое — это благородные металлы геометрии, второе – это её драгоценные камни». – Иоганн Кеплер

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

Открытки, игральные карты, киноафиши и даже самые обычные выключатели будут выигрывать и подсознательно угождать вкусам пользователей, если у них будут именно эти пропорции. Они могут применяться в дизайне, в рекламе, в искусстве и во многих других сферах профессиональной деятельности.
Золотое сечение, которое ещё обозначают греческой буквой ψ (пси), считается «удобной» пропорцией, которая окружает нас повсюду, и глаз воспринимает её как самое правильное и самое пропорциональное соотношение.

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

Читать по теме: Applying the Golden Ratio to Your Web Designs

6. Правило третей

Правило третей может показаться тем же самым золотым сечением, но, на самом деле, это не одно и то же. Этот закон впервые был констатирован в 1797 году в книге Джона Томаса Смита «Заметки на фоне сельского пейзажа». Смит рассматривал своё открытие как обобщённое правило, а не как абсолютный закон. Однако, в действительности получается так, что если дизайнеры не пренебрегают этим законом, результаты получаются наиболее привлекательными для большинства пользователей.

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

Читать по теме: Applying Divine Proportion To Your Web Designs

7. Закон Парето

Суть закона Парето или правила 80/20 хорошо известна всем, кто руководит коллективами, собраниями или студентами в аудиториях, даже если руководитель и не знает, что это и есть закон Парето.
Закон Парето утверждает, что сколько бы не происходило событий, 80% результатов будет приходиться на 20% усилий.

Джозеф М. Джуран в 1906 году назвал это явление в честь Вилфредо Парето, показавшего, что 80% земли в Италии принадлежит 20% населения Италии. Этот закон стал объяснением, почему 80% преступников совершают 20% всех преступлений и почему 20% всех, кто пользуется системой здравоохранения использует 80% всех её услуг. Иначе, почему 80% результата приходится на 20% действия.

Для практического применения на веб-сайте, инструкция может быть такова: если 80% посетителей используют только 20% предлагаемой информации, колонок, кнопок и т.д., значит всё то, что не используется, должно быть сокращено или заменено на более эффективное. Такое решение поддерживается Бритвой Оккама — иррациональным подходом к простоте употребления.

Читать по теме: The 80/20 Rule Applied to Web Design

8. Ментальные модели

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

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

9. Возможность ошибки

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

10. Соотношение сигнал-шум

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

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

Если вы позволите важной и полезной информации занять главное место и снизите уровень ненужной и бесполезной информации, это принесёт вам положительные результаты.

Читать по теме: What’s The Signal to Noise Ratio Of Your Design?

11.Постоянство и изменчивость законов использования

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

12.Закон восприятия информации

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

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

Другие ценные универсальные правила дизайна

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

Понимание того, что «есть одно общее сознание для каждого индивидуума» (Р.В. Эмерсон) значит, что чем лучше вы поймёте человеческую природу и то, что движет нашим восприятием, тем успешнее будет созданный вами дизайн.

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

Оригинал статьи: 12 Laws and Principles to Aid You in Your Design
Перевод осуществлен переводчиками проекта BigIdeas.

9 основных правил веб-дизайна, которые дизайнер может иногда нарушать | DesigNonstop

9 основных правил веб-дизайна, которые дизайнер может иногда нарушать

18

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

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

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

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

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

5. Навигация должна быть проста и понятна
С одной стороны, навигация должна быть проста и понятна, а с другой стороны, этот элемент тоже может быть объектом применения креатива. Зачастую это приводит к тому, что пользователю приходится ломать голову, чтобы разобраться в навигации, но при этом это превращается в весьма увлекательный и занимательный процесс.

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

7. Не использовать анимацию в дизайне
Пользователи очень не любят, когда их отвлекают от чтения каким-нибудь движущимся объектом. Однако, неужели этот милый паучок не добавит немного беспорядка в аккуратную конструкцию сайта и не придаст сайту изюминку?

8. Придерживаться безопасных шрифтов
Это правило нарушается уже самим развитием интернета. Уже сейчас есть возможность использовать технологии замещения шрифтов. И эта тенденция будет только развиваться.

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

Базовые принципы веб-дизайна, основные принципы web-дизайна

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

Зачастую неопытные разработчики не придерживаются общепринятых стандартов, то ли из-за незнания, то ли из-за мыслей, что они умней других, а потому получают на выходе ужасный результат. Современный веб-дизайн можно разделить на 6 основных составляющих: акцент, контраст, баланс, точность, стиль и удобство восприятия.

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

Акцент

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

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

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

Контраст

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

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

Баланс

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

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

Точность

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

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

Стиль

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

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

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

Удобство восприятия

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

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

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

Если хотите узнать о том, с чего лучше начать карьеру веб-дизайнера, или у вас есть еще какие-либо вопросы, обращайтесь, чем смогу помогу. Делитесь ссылкой на блог с друзьями, да и сами заходите почаще, всем пока!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

когда он действительно имеет значение — Дизайн на vc.ru

Мы, лаборатория Friendly Design, следим за трендами и исследованиями в области дизайна и около. Хотим поделиться с вами переводом статьи про развитие веб-дизайна, конструкторах, которые замедляют его развитие, и новое поколение веб-дизайна 3.0

{«id»:65925,»url»:»https:\/\/vc.ru\/design\/65925-veb-dizayn-3-0-kogda-on-deystvitelno-imeet-znachenie»,»title»:»\u0412\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d 3.0: \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/65925-veb-dizayn-3-0-kogda-on-deystvitelno-imeet-znachenie»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/65925-veb-dizayn-3-0-kogda-on-deystvitelno-imeet-znachenie&title=\u0412\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d 3.0: \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/65925-veb-dizayn-3-0-kogda-on-deystvitelno-imeet-znachenie&text=\u0412\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d 3.0: \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/65925-veb-dizayn-3-0-kogda-on-deystvitelno-imeet-znachenie&text=\u0412\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d 3.0: \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/65925-veb-dizayn-3-0-kogda-on-deystvitelno-imeet-znachenie»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0412\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d 3.0: \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435&body=https:\/\/vc.ru\/design\/65925-veb-dizayn-3-0-kogda-on-deystvitelno-imeet-znachenie»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

22 631 просмотров

Время чтения: 21 минута, мы предупредили

Введение

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

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

Эта статья состоит из нескольких частей:

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

Во второй части поговорим о конструкторах сайтов, которые отстают от основных тенденций веб-дизайна и замедляют его эволюцию.

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

Часть 1: веб-дизайн меняется

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

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

Первые сайты

Первые сайты были текстовыми. И трудно сказать, что у них был какой-то веб-дизайн (в современном понимании).

Переход к веб-дизайну 1.0

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

10 эффективных принципов веб-дизайна, которые должен знать каждый дизайнер

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

10 принципов хорошего веб-дизайна

Вот 10 принципов, которые помогут составить основу для вашего следующего веб-сайта.

1.Назначение закладывает фундамент

У Latinxs Who Design очевидная миссия.

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

Дизайн сайта — это не то, что вы должны придумывать по ходу дела. Цель даст вам четкий план и направит дизайн и создание контента.Это не практическая философия дизайна.

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

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

2. Содержание дает смысл

Purple Mattress просто и оптимистично рассказывает о преимуществах своего бренда.

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

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

— Якоб Нильсен, «10 эвристик юзабилити для проектирования пользовательского интерфейса»

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

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

Порадуйте свою аудиторию отличным контентом, который отвечает их потребностям. В противном случае ваш сайт мог бы выглядеть так:

3.Визуализация привлекает людей

Finsweet использует необычные изображения и анимацию, чтобы привлечь ваше внимание — например, неоново-розово-зеленый лев.

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

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

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

4. Гармония заставляет дизайн петь

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

Все важные элементы макета должны работать вместе — вплоть до HTML и CSS. Если у большой кнопки контрастного цвета нет веских причин для несоответствия, она не будет считаться правильной. Несоответствия отвлекают и мешают работе пользователей. Трудно увидеть в целом хорошее, когда что-то не так. Точно так же плохой пользовательский опыт может привести к тому, что посетители веб-сайта откажутся, что снизит ваши шансы на ранжирование в Google.

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

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

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

5. Восприятие форм типографики

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

Самое важное в печати — это то, что она передает мысли, идеи, образы от одного разума к другому.

— Беатрис Вард, «Хрустальный кубок»

Типографика — это сосуд для мыслей. Наряду с собственно словами, форма и стилизация букв передают смысл. Типографика подобна кольцу-декодеру, переводящему идеи автора в визуальное представление.

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

Неправильный шрифт может испортить важную информацию. Просто спросите ученых, объявивших об открытии частицы бозона Хиггса, с помощью слайд-шоу с изображением Comic Sans. Люди могли многое сказать об этом выборе типографики. И кто знает — может быть, скептики ошибались? Убедитесь, что вам нравится ваша причина выбора шрифта.

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

6. Организация объединяет

Упорядоченный дизайн сайта Blue Apron позволяет легко и увлекательно читать об их подписках на наборы продуктов.

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

Заголовочные теги

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

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

7. Цвета задают тон

Используя упаковку своего продукта и ингредиенты для создания цветовой палитры сайта, Simply Chocolate объединяет дизайн своего бренда и демонстрирует их вкусные плитки шоколада.

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

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

8. Белое пространство создает баланс

В онлайн-портфолио Дэна Мачадо используются огромные участки белого пространства и четкие линии.

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

9. Визуальная иерархия упрощает навигацию

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

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

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

10. Подлинность вызывает доверие

С момента своего основания до приобретения крупной корпорацией Ben & Jerry’s сохраняла верность своим ценностям.

«Хороший дизайн — это честно. Это не делает продукт более инновационным, мощным или ценным, чем он есть на самом деле. Он не пытается манипулировать потребителем обещаниями, которые невозможно выполнить ». — Из книги Витсое «Сила хорошего дизайна».

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

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

Несколько простых правил направят ваши безграничные возможности дизайна

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

Какие принципы лежат в основе вашей работы? Расскажите нам в комментариях, что направляет ваш процесс и помогает лучше проектировать.

Основные принципы визуального дизайна для веб-дизайнеров

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

Каждый визуальный дизайн стремится либо создать ощущение единства между разрозненными элементами, либо творчески разрушить это единство, чтобы стимулировать конкретное действие.

К счастью, есть несколько простых, но действенных рекомендаций по созданию — и нарушению — унифицированных дизайнов. Кого мы должны за это благодарить? Гештальт-психологи.

Если вы не знакомы, это поможет понять, что гештальт означает:

Структура, конфигурация или образец физических, биологических или психологических явлений, интегрированных таким образом, чтобы составлять функциональную единицу со свойствами, которые нельзя получить путем суммирования ее частей

(Звучит как веб-сайт, правда?)

По сути, гештальт-психологи искали способ объяснить, как люди приходят к осмысленным (и / или обманчивым) представлениям в хаотическом мире.Благодаря этим усилиям они определили 4 основных концепции, описывающих, как люди интерпретируют визуальные данные.

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

Вот четыре основных принципа:

1. Возникновение

Принцип эмерджентности гласит, что мы пытаемся осмыслить целое до того, как начнем определять его части.

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

Что означает появление для дизайна?

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

Итак, как бы вы ни хотели сходить с ума от своего следующего дизайна формы, вероятно, лучше всего придерживаться стилей, которые люди видели раньше. Ясно очерченные и помеченные поля с кнопкой «отправить» в конце будут распознаны как форма быстрее, чем более «креативный» дизайн. Но подожди. Это не значит, что вам следует перестать читать или заниматься творчеством.

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

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

2. Реификация

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

Это означает, что у вас не должно возникнуть проблем с распознаванием значения этого символа:

Вы понимаете, даже если половина изображения исчезла?

Итак, что означает овеществление для дизайна?

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

A List Apart использует материализацию, чтобы ограничить пространство, которое занимает их словесный знак.

3. Мультистабильность

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

Лица или ваза? Мультистабильность означает, что вы действительно можете видеть только по одному.

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

Что означает мультистабильность для дизайна?

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

Но, как за прошедшие годы доказали десятки ярких логотипов, вы можете использовать мультистабильность для создания действительно запоминающихся и приятно удивительных дизайнов, таких как логотип FedEx. Как только вы увидите эту стрелку (между буквами E и X) и другие стрелки, которые предполагает овеществление, ее довольно сложно не заметить.

Мультистабильность означает, что вы увидите стрелку … как только заметите ее.

4. Инвариантность

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

Помните девушку в красном платье в The Matrix ? Как насчет маленькой девочки в красной куртке из «Список Шиндлера »? Эти двое так выделяются — и остаются такими запоминающимися, — потому что их яркий цвет практически кричит из однородного черно-белого фона, на котором они движутся. Он отмечает их как значимые и достойные вашего внимания.

Что означает неизменность дизайна?

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

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

Какой столбец привлекает ваше внимание больше всего? На странице цен

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

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

Дизайнеры MailChimp используют неизменность, чтобы привлечь внимание к кнопкам «Зарегистрироваться бесплатно».

Это позволяет пользователю узнать, какое действие сайт хочет от вас, что упрощает взаимодействие с пользователем.В примере MailChimp идентичный дизайн и язык двух основных CTA также дают понять, что любая ссылка приведет вас в одно и то же место.

Уже чувствуете себя экспертом по основным принципам? Потрясающе. Давайте погрузимся немного глубже.

Применение принципов гештальта в веб-дизайне

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

Другими словами, когда дело доходит до интерпретации визуальных стимулов, мы всегда ищем самый простой способ понять что-либо. Гештальт-психологи назвали это:

Закон Прегнанца (он же «хороший показатель» или «закон простоты»)

Люди интерпретируют неоднозначные или сложные изображения как простейшие возможные формы.

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

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

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

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

Сёра знал, что мы увидим формы на его пуантилистских картинах.

Что аккуратно подводит нас к принципу закрытия.

Закрытие

Когда мы видим сложную структуру, мы ищем один узнаваемый узор.

Мы всегда пытаемся придать смысл и порядок бессмысленному хаосу (и мы не говорим о ваших последних отношениях), и наши глаза делают это посредством овеществления: восполнения недостающих данных, чтобы придать смысл тому, что мы видим.

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

Ваш ум стремится к завершению, создавая букву F из ничего.

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

Закрытие — это то, что заставляет работать все минимальные логотипы.

Симметрия и порядок

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

Наша любовь к симметрии объясняет популярность дизайна с тремя колоннами.

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

Фигурка / фон

Люди видят объекты либо как фигуру (фокус), либо как землю (фон).

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

Один из способов сделать это — сравнить размеры двух (или более) объектов, автоматически определяя, что меньший объект является фигурой, а больший — землей. Вы можете видеть, что на изображениях выше — независимо от его цвета, мы всегда видим меньший прямоугольник как рисунок, а больший как фон.

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

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

Evernote использует фигуру / фон, чтобы привлечь внимание к этой кнопке регистрации.

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

Равномерная связность

Мы видим элементы, которые связаны визуально, как более связанные, чем элементы без связи.

Формы слева кажутся более связанными, чем те, что справа — даже если формы такие же!

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

Обратите внимание, что соединительный элемент (маленький прямоугольник наверху) не обязательно должен касаться других объектов, чтобы создать ощущение взаимосвязи. Это объясняет, почему стрелки часто используются для соединения текста с изображением, как вы можете видеть на изображении ниже.

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

Без стрелок можно связать «здесь и здесь хорошо» с соответствующими изображениями, но для этого потребуются некоторые выводы со стороны зрителя, чтобы понять, что одно «здесь» относится к планшету, а другое — к телефону.Стрелки делают связь между копией и изображением более четкой, облегчая понимание всего этого.

Общие регионы

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

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

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

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

Окрестности

Мы рассматриваем объекты, которые расположены близко друг к другу, как более связанные, чем объекты, которые находятся далеко друг от друга.

Визуально расстояние определяет родство. Объекты, которые расположены близко друг к другу, рассматриваются как связанные, а объекты, которые находятся далеко друг от друга … нет.

Например, посетите сайт Google Now ниже. Текст Spotify явно связан со всем содержимым на карточке ниже — даже если он не заключен в карточку — потому что он ближе к карточке, чем, скажем, текст «OpenTable.”

Близость помогает нам сохранять четкость сложных взаимоотношений на этом изображении.

Вы также можете комбинировать близость и общие области для создания более сложных эффектов. Узнайте, как это сделать в Mook, бесплатном шаблоне Webflow для творческих агентств, разработанном Тимом Ноа.

Близость в действии в шаблоне Tim Noah’s Mook.

Здесь Тим использует как близость, так и общие регионы, чтобы дать понять, что «Наша работа» и «Узнай, что мы сделали для других» связаны.То же самое касается единицы «Стратегия», основного текста и изображения ниже.

Продолжение

Мы видим элементы, которые находятся на линии или кривой, как более связанные, чем элементы, которые не находятся на линии или кривой.

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

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

Общая судьба (синхронно)

Мы видим элементы, которые движутся в одном направлении, как более связанные, чем элементы, которые неподвижны или движутся в разных направлениях.

Лодка связывает изображение и текст общей судьбой.

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

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

Параллельность

Мы рассматриваем параллельные элементы как более связанные, чем непараллельные элементы.

Чтобы увидеть параллелизм в действии, я не могу придумать лучшего примера, чем итальянский футурист Ф. Классическая визуальная поэма Маринетти «Parole in liberta» («Свободные слова» или «Слова на свободе»).

Строки параллельного текста помогают нам понять этот сложный клубок букв.

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

Сходство

Мы считаем, что элементы с одинаковыми характеристиками более связаны друг с другом, чем те, у которых их нет.

Вы уже видели несколько примеров подобия в действии (см. Раздел о равномерной связности и дизайн MailChimp в разделе о неизменности). Но чтобы еще немного увеличить масштаб, взгляните на этот дизайн от Designer News:

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

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

Координаторы

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

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

Конечно, есть множество способов сделать акцент в дизайне, в том числе:

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

И многое другое.

Прошлый опыт

Мы воспринимаем вещи с точки зрения нашего прошлого опыта.

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

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

Или человек может страдать непереносимостью лактозы.Образ мороженого навсегда останется с ассоциациями… неприятности.

Вы также должны учитывать различия в аудитории. Если вы разрабатываете веб-сайты или продукты для международной аудитории — или даже для аудитории разного возраста — вам необходимо помнить, что эмоциональный и практический резонанс некоторых изображений или элементов дизайна может различаться в зависимости от сегмента.

Основные принципы визуального дизайна для веб-дизайнеров

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

К счастью, есть несколько простых, но действенных рекомендаций по созданию — и нарушению — унифицированных дизайнов. И мы должны благодарить гештальт-психологов за это.

Если вы не знакомы, это поможет понять, что гештальт означает:

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

(Звучит как веб-сайт, верно?)

По сути, гештальт-психологи искали способ объяснить, как люди приходят к осмысленным (и / или обманчивым) представлениям в хаотическом мире.Благодаря этим усилиям они определили 4 основных концепции, которые описывают, как люди интерпретируют визуальные данные.

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

Четыре основных принципа гештальт-теории

1. Эмерджентность

Принцип эмерджентности гласит, что мы пытаемся разобраться в целом, прежде чем мы начнем определять его части.

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

Что означает эмерджентность для дизайна?

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

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

Но подожди. Это не значит, что вам следует перестать читать или заниматься творчеством.

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

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

2. Рефикация

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

Это означает, что у вас не должно возникнуть проблем с распознаванием значения этого символа:

Вы понимаете, даже если половина изображения исчезла, верно?

Итак, что означает овеществление для дизайна?

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

A List Apart использует овеществление, чтобы ограничить пространство, которое занимает их словесный знак.

3. Мультистабильность

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

Лица или ваза? Мультистабильность означает, что вы действительно можете видеть только по одному.

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

Очаровательно, правда? Вроде как заставляет задуматься о политике.Но пойдем дальше.

Что означает мультистабильность для дизайна?

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

Но, как за прошедшие годы доказали десятки ярких логотипов, вы можете использовать мультистабильность для создания действительно запоминающихся и приятно удивительных дизайнов, таких как логотип FedEx. Как только вы увидите эту стрелку (между буквами E и X), ее довольно сложно не заметить.

Мультистабильность означает, что вы увидите стрелку … как только заметите ее.

4. Инвариантность

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

Помните даму в красном платье в The Matrix ? Как насчет маленькой девочки в красной куртке из «Список Шиндлера »? Эти двое так выделяются — и остаются такими запоминающимися, — потому что их яркий цвет практически кричит из однородного черно-белого фона, на котором они движутся.Он отмечает их как значимые и достойные нашего внимания.

Что означает неизменность для дизайна?

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

Одна из областей, где вы часто увидите, что это применяется, — это страницы с ценами на товары, где один столбец выделен цветом или размером из остальной части таблицы цен.

Какой столбец привлекает внимание больше всего? На странице цен

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

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

Дизайнеры MailChimp используют неизменность, чтобы привлечь внимание к кнопкам «Зарегистрироваться бесплатно».

Это позволяет пользователю узнать, какое действие сайт хочет от вас, что упрощает взаимодействие с пользователем.В примере MailChimp идентичный дизайн и язык двух основных CTA также дают понять, что любая ссылка приведет вас в одно и то же место.

Еще не чувствуете себя экспертом по основным принципам? Потрясающе. Давайте погрузимся немного глубже.

Применение принципов гештальта к веб-дизайну

В целом принципы гештальта помогают нам понять, как мы обрабатываем визуальную информацию, либо:

1. Начиная с целого и затем переходя к частям, либо
2. попытка разбить сбивающее с толку целое на более простые составные части

Другими словами, когда дело доходит до нашей интерпретации визуальных стимулов, мы всегда ищем простейший способ понять вещь.Гештальт-психологи назвали это:

Закон Прананца (он же «хорошая фигура» или «закон простоты»)

Люди интерпретируют неоднозначные или сложные образы как простейшие формы.

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

Согласно Закону Прананца, мы видим олимпийский логотип как взаимосвязанные кольца (слева), а не как набор бессмысленных сложных форм (справа).

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

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

Сёра знал, что мы увидим формы на его пуантилистских картинах.

Что аккуратно подводит нас к принципу закрытия.

Застежка

Когда мы видим сложную структуру, мы ищем один узнаваемый узор.

Мы всегда пытаемся придать смысл и порядок бессмысленному хаосу (и мы не говорим о ваших последних отношениях), и наши глаза делают это посредством овеществления: заполнения недостающих данных, чтобы понять то, что мы видим.

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

Ваш ум ищет завершение, создавая букву F из ничего.

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

Закрытие — это то, что заставляет работать все минимальные логотипы.

Симметрия и порядок

Неудивительно, что люди склонны искать порядок в объектах, а симметрия — одно из средств достижения этого.Вот почему нас так радует симметрия: это простое, гармоничное правило, передающее чувство порядка и правильности в вещах.

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

Наша любовь к симметрии объясняет популярность дизайна из трех столбцов, который использовался для старой целевой страницы Webflow.

Хотя симметричные формы вызывают удовлетворение, они также могут казаться немного статичными или устаревшими из-за всей этой гармонии.Иногда им не хватает чувства движения или динамизма.

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

Фигура / фон

Люди видят объекты либо как фигуру (фокус), либо как землю (фон).

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

Один из способов сделать это — сравнить размеры двух (или более) объектов, автоматически определяя, что меньший объект соответствует фигуре, а больший — земле. Вы можете видеть, что на изображениях выше — независимо от его цвета, мы всегда видим меньший прямоугольник как рисунок, а больший как фон.

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

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

Evernote когда-то использовал фигуру / фон, чтобы привлечь внимание к своей кнопке «Зарегистрироваться».

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

Равномерная связность

Мы видим элементы, которые связаны визуально, как более взаимосвязанные, чем элементы без связи.

Формы слева кажутся более связанными, чем формы справа — даже если формы такие же!

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

Обратите внимание, что соединительный элемент (маленький прямоугольник наверху) не должен касаться других объектов, чтобы создать это ощущение взаимосвязи. Это объясняет, почему стрелки часто используются для соединения текста с изображением, как вы можете видеть на изображении ниже.

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

Без стрелок можно связать «здесь и здесь хорошо» с соответствующими изображениями, но для этого потребуются некоторые выводы со стороны зрителя, чтобы понять, что одно «здесь» относится к планшету, а другое — к телефону.Стрелки делают связь между копией и изображением более четкой, облегчая понимание всего этого.

Общие области

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

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

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

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

Близость

Мы видим объекты, которые расположены близко друг к другу, как более связанные, чем объекты, которые находятся далеко друг от друга.

Визуально расстояние определяет родство. Объекты, которые расположены близко друг к другу, рассматриваются как связанные, а объекты, которые находятся далеко друг от друга … нет.

Например, посмотрите еще один пример с сайта Google Now ниже. Текст Spotify явно связан со всем содержимым на карточке ниже — даже если он не заключен в карточку — потому что он ближе к карточке, чем, скажем, текст «OpenTable.

Близость помогает нам сохранить четкость сложных отношений, изображенных на этом изображении.

Вы также можете комбинировать близость и общие области для создания более сложных эффектов. Узнайте, как это сделать в Mook, бесплатном шаблоне Webflow для творческих агентств, разработанном Тимом Ноа.

Proximity в шаблоне Tim Noah’s Mook.

Здесь Тим использует как близость, так и общие регионы, чтобы дать понять, что «Наша работа» и «Узнай, что мы сделали для других» связаны. То же самое касается блока «Стратегия», основного текста и изображения ниже.

Продолжение

Мы видим, что элементы, расположенные на линии или кривой, более взаимосвязаны, чем элементы, которые не находятся на линии или кривой.

Мы знаем, что эти три точки связаны между собой из-за продолжения.

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

Общая судьба (синхронность)

Мы видим элементы, которые движутся в одном направлении, как более связанные, чем элементы, которые неподвижны или движутся в разных направлениях.

Лодка связывает изображение и текст общей судьбой.

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

Со всем этим движением вас простят за то, что вы упустили тот факт, что текст в центре экрана выше связан с двумя изображениями переднего плана, между которыми он находится.Но по мере того, как лодка и разбрасываемые штормом волны обычно движутся вправо от экрана, взаимосвязь между текстом и изображениями переднего плана становится более ясной — потому что они движутся вверх по экрану. (Хотя дизайнеры добавили драматизма, наклонив и сдвинув текст и изображение при прокрутке.)

Параллелизм

Мы видим параллельные элементы как более связанные, чем непараллельные элементы.

Чтобы увидеть параллелизм в действии, я не могу придумать лучшего примера, чем итальянский футурист Ф. Классическая визуальная поэма Маринетти «Parole in liberta» («Свободные слова» или «Слова на свободе»).

Строки параллельного текста помогают нам разобраться в этом сложном клубке букв.

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

Сходство

Мы считаем, что элементы с одинаковыми характеристиками более связаны между собой, чем те, у которых их нет.

Вы уже видели несколько примеров сходства в действии (см. Раздел однородной связности и дизайн MailChimp в разделе неизменности). Но чтобы увеличить масштаб, взгляните на этот дизайн из Designer News:

Круглый значок помогает нам понять, что два сообщения о дизайне сайта связаны (т. Е. Сообщения одного типа).

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

Фокусные точки

Точки интереса, акценты или различия захватывают и удерживают наше внимание.

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

Конечно, есть все виды способов сделать акцент в дизайне, в том числе:

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

И многое другое.

Прошлый опыт

Мы воспринимаем вещи с точки зрения нашего прошлого опыта.

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

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

Или человек может страдать от непереносимости лактозы. Оставив навсегда образ мороженого с ассоциациями… неприятности.

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

10 главных принципов эффективного веб-дизайна

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

1. Назначение

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

2. Связь

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

3. Гарнитуры

В целом, шрифты без засечек, такие как Arial и Verdana, легче читать в Интернете (шрифты без засечек — это современные шрифты без декоративной отделки).Идеальный размер шрифта для удобного чтения в Интернете — 16 пикселей и используйте максимум 3 шрифта и максимум 3 размера кегля, чтобы ваш дизайн был оптимизирован.

4. Цвета

Хорошо продуманная цветовая палитра может иметь большое значение для улучшения пользовательского опыта. Дополнительные цвета создают баланс и гармонию. Использование контрастных цветов для текста и фона облегчит чтение для глаз. Яркие цвета вызывают эмоции, и их следует использовать экономно (например, для кнопок и призывов к действию).И последнее, но не менее важное: пустое пространство / негативное пространство очень эффективно придают вашему сайту современный и лаконичный вид.

5. Изображения

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

6. Навигация

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

7. Макеты на основе сетки

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

8. «F» Образец

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

9. Время загрузки

Все ненавидят веб-сайт, на загрузку которого уходит много времени. Советы по повышению эффективности времени загрузки страницы включают оптимизацию размеров изображений (размер и масштаб), объединение кода в центральный файл CSS или JavaScript (это уменьшает количество HTTP-запросов) и минимизацию HTML, CSS, JavaScript (сжатие для ускорения времени загрузки).

10: оптимизировано для мобильных устройств

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

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

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

Это может быть достаточно правдой с точки зрения того, кто уже знаком с основами, но если фразы вроде «CSS-адаптивная сеточная система» и «Google Web Fonts» вам чужды, тогда переходите к якобы «о-так-просто» мир веб-дизайна может все еще казаться устрашающим.

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

1. Сетевые системы
_

Рукопись через Graphics.com; Наложение сетки New York Times через Design O ’Blog

С момента изобретения кодекса в 1 веке сетка определяла, как мы читаем. Со временем появились тысячи вариаций, включающих разное расположение строк и столбцов.

Подумайте, как расположены текст и изображения в книгах, газетах и ​​журналах. Это системы, которые более или менее напрямую были перенесены в Интернет, и они работают.Слово мудрому: многие дизайнеры пытались избежать использования сетки во имя «творчества»; многие такие сайты остаются непрочитанными.

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

Profound Grid — это пример совместимой, готовой к реагированию грид-системы

Чтобы облегчить нашу жизнь, появилось огромное количество готовых грид-систем, которые адаптивны, совместимы с основными языками программирования и, как правило, бесплатны для загрузки.

Некоторыми популярными являются 960.gs, Simple Grid и Golden Grid System, но список хороших вариантов действительно огромен, некоторые из них более сложные, чем другие. Вот хорошая статья от WebDesignerDepot для начала.

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

2. Визуальная иерархия
_

На веб-сайте конференции Build используются принципы иерархии.

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

Хорошие веб-страницы создаются в ответ на эти измеренные шаблоны чтения путем размещения важных элементов, таких как логотип, призыв к действию или ключевое изображение, вдоль осей, которые, как ожидается, будет сканировать читатель.Обычно они имеют форму буквы «F» или «Z».

Демонстрация F-паттерна с помощью Nielsen Norman Group

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

3. Веб-шрифты
_

Open Sans — хороший веб-шрифт от Google Web Fonts

. В 2014 году термин «веб-безопасные шрифты» уже казался чем-то вроде анахронизма.На заре Интернета браузеры поддерживали очень ограниченное количество шрифтов — обычно только те, которые уже были установлены в текстовых редакторах пользователей, — и если вы отклонитесь от них, некоторые посетители просто увидят случайные символы.

Сегодня по-прежнему верно, что одни шрифты поддерживаются большинством браузеров, а другие — нет, но количество веб-безопасных опций резко возросло благодаря внедрению так называемого встраивания @ font-face в большинстве современных браузеров.Действительно, многие дизайнеры жалуются, что у слишком много для выбора.

Платные услуги шрифтов включают Typekit, WebINK и Fontspring. Вы также можете найти хорошие бесплатные шрифты, если немного поищете в бесплатных сервисах, таких как Google Web Fonts. Вот недавний обзор хороших бесплатных веб-шрифтов от CreativeBloq.

Arvo — еще один хороший шрифт от Google Web Fonts

. Теперь, когда вы знаете, где искать, нужно помнить лишь о нескольких общих правилах:

• Шрифты с засечками для заголовков
  В веб-дизайне шрифты с засечками всегда зарезервированы для заголовков, потому что при меньшем размере их становится трудно читать.Основной текст обычно должен быть без засечек.
• Используйте минимальное количество шрифтов
  Чтобы уменьшить беспорядок, сведите количество различных шрифтов на веб-сайте к минимуму. Максимум два-три. Ознакомьтесь с нашей недавней статьей об умном сочетании шрифтов для получения дополнительной информации.
• Не занимайте слишком много места
  Помните, что некоторые файлы шрифтов могут быть довольно большими, и это потенциально может замедлить время загрузки веб-сайта.

4. Изображения и цвета

Шумиха! жирный, но монохромный

Принципы размещения изображений и цветов не являются уникальными для веб-дизайна, поэтому мы не будем вдаваться в подробности.Главный принцип, который следует соблюдать: не переусердствуйте.

Для цветов:

• Сохраняйте минимальную цветовую палитру
  Как и шрифты, просто придерживайтесь 2 или 3. Они, конечно же, должны повторять брендинг хоста, одновременно выделяя важные области, как указано в разделе «визуальная иерархия».
• Учитывайте дальтонизм
  Еще одно соображение, о котором стоит помнить, — это тот факт, что около 5% (мужского) населения страдают дальтонизмом, так что будьте осторожны с сочетаниями цветов.Мы написали более подробную статью по этому поводу здесь.
Фотография

Square поможет вам понять продукт

Для изображений:

• Сохраняйте минимальное движение
  Избегайте движущихся изображений. Не поддавайтесь желанию вспыхнуть. Даже .gifs очень сомнительны, если не выполнены с максимальным мастерством. В целом исследования показывают, что зрители предпочитают неподвижные сайты.
• Выбирайте изображения вдумчиво
  Не используйте изображения просто как способ заполнить пространство; посетители сразу это заметят и могут потерять интерес к вашей странице.Вместо этого используйте только изображения, которые передают полезную информацию — иллюстрируют сопроводительный текст или объясняют что-то об описываемом продукте. В статье о Designinstruct этот вопрос рассматривается более подробно.
• Всегда соблюдать все ограничения лицензирования стоковых изображений.
  Помните о лицензионных ограничениях, связанных с вашими изображениями. Большинство изображений защищены авторским правом, а это означает, что вам или вашему клиенту придется заплатить за их использование в соответствии с вашими потребностями.Вы можете ознакомиться с этой темой, используя прошлые статьи, которые мы написали.
• Сохраняйте размеры файлов маленькими
  Убедитесь, что размеры ваших изображений минимальны (разрешение веб-страниц 72 ppi). Изображения часто составляют 60% или более от размера / времени загрузки веб-страницы.

Ищете идеального веб-дизайнера?

У нас есть дизайнеры на любой стиль и любой бюджет.

Семь принципов веб-дизайна для каждого типа сайта — WordPress.com

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

Чтобы обеспечить удовлетворение потребностей посетителей сайта, вы можете следовать нескольким основным принципам веб-дизайна. Они не требуют каких-либо навыков дизайна, поскольку представляют собой доступные указатели, которые можно применить к любому сайту в любой отрасли.

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

1. Остаток

Balance делает веб-сайты приятными, добавляя ощущение симметрии каждому элементу на странице. Есть два типа баланса:

• Симметричный, в котором каждая «половина» равна. На изображении ниже левая и правая половины страницы почти идентичны.

• Асимметричный, в котором каждая «половина» неравна, но все же сбалансирована. На изображении ниже большой рисунок справа «тяжелее», чем текст слева, но общий дизайн все еще сбалансирован.

2. Пустое пространство

Пустое пространство — это именно то, на что это похоже: пустое пространство.

Предоставление посетителям сайта возможности дышать позволяет им сосредоточиться на вашем контенте. В свою очередь, это улучшает их понимание.

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

3. Сетки

Большинство веб-сайтов созданы на основе системы сеток. По сути, это разбивает страницу на столбцы и строки. Сетки гарантируют, что все на вашем сайте выровнено, что сохраняет макеты чистыми и сбалансированными.

Большинство тем WordPress.com основаны на сетках. Фактически, Rebalance демонстрирует сетку, пустое пространство и баланс в действии.

Кроме того, шаблоны страниц вашей темы могут помочь вам создать сбалансированный дизайн.

4. Цвет

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

Выбор цветов, которые дополняют друг друга, может быть трудным, поэтому планы WordPress.com Premium и Business включают встроенную функцию палитры.

Чтобы изменить цвета темы, перейдите на вкладку Цвета в настройщике.

5. Графика

Многие люди учатся визуально, и использование описательных изображений — отличный способ поддержать ваш контент при добавлении к дизайну вашего сайта.

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

6. Типографика

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

• Ваш текст не должен быть слишком маленьким или слишком большим. Для основного текста оптимальным является 16 пикселей, при этом 12 пикселей — это абсолютный наименьший размер, который по-прежнему доступен для просмотра на мобильных устройствах, согласно Google.

• Используйте разборчивые шрифты. Все темы WordPress.com снабжены набором шрифтов, которые обеспечивают баланс между дизайном и удобочитаемостью.

Чтобы выбрать шрифт своего сайта WordPress.com, перейдите на вкладку Fonts в настройщике.