21
Авг

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

источникwebdesign.tutsplus.com
авторJoni Trythall

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

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

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

Доволен ли этот пользователь?

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

Контент

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

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

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

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

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

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

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

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

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

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

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

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

Иконки

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

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

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

Вы же знаете, что они значат?

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

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

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

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

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

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

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

Воздух

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

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

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

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

Воздух на «Tuts+ Town»

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

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

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

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

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

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

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

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

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

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

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

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

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

комментариикомментарии по теме