Веб-дизайн для детей: Основы дизайна

Добро пожаловать на восьмой урок нашей серии статей Web Design for Kids!

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

Не забывайте задавать вопросы в комментах внизу страницы!

Пользователь

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

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

Контент

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

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

Организация контента и макет

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

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

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

Зрительный ряд

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

Графика и изображения

Из предыдущих уроков мы уже многое знаем о применении изображений в веб-дизайне.  В прошлом уроке мы вставили в дизайн сайта "Tuts+ Town" 4 изображения и изучили разные типы изображений, используемые в веб.

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

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

Иконки

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

Хорошую иконку понять просто, она может сделать поиск какой-либо информации на сайте быстрее.

Вот несколько примеров действительно полезных иконок:

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

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

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

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

Это изображение неба "Tuts+ Town" было задумано для того, чтобы убедиться, что воздушный шар первый привлекает внимание зрителя, а затем уже облака. Всё остальное на картинке было сделано менее выделяющимся, чтобы воздушный шар и облака больше выделялись.

На следующем изображении мы обращаем внимание в начале уже на другие вещи. Вы же сначала смотрите на облака, а не на шар, не так ли?

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

Воздух

Воздух (whitespace) - это пустое пространство на сайте, но оно не обязательно должно быть белым! Это места без текста и изображений. То место, куда мы определяем воздух, очень важно, потому что от этого зависит, какие части сайта будут выделяться, и как хорошо мы сможем "читать" контент.

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

Итак, давайте посмотрим, сможем ли мы что-нибудь с этим сделать!

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

Воздух на "Tuts+ Town"

Воздух на сайте "Tuts+ Town" на самом деле светло-жёлтый.

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

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

Типографика и цвет

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

Типографика - это искусство выбора и организации шрифта так, чтобы он был максимально привлекательным и читаемым. Хотя на нашем "Tuts+ Town" не так много текста, на самом деле мы много думали о выборе шрифта и его организации.

Выбор цвета - тоже сильная часть дизайна. У цветов есть значения, и они могут помочь передать пользователям особые ощущения бренда или сайта. Цвета на "Tuts+ Town" способствуют созданию весёлого и гостеприимного ощущения от нашего города. 

Но, опять же, мы поговорим о цветах в отдельной статье!

Краткое заключение

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

Смысл дизайна в придании вещам лёгкости и приятности для восприятия их людьми. Мы достигли этого на нашем "Tuts+ Town" с помощью макета, изображений, цвета и воздуха.

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

Увидимся в городе!