Разработка дизайна сайта

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

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

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

Юзабилити

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

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

Юзабилити включает в себя следующие факторы:

  • Простота освоения. Насколько быстро пользователь сможет освоить выполнение простых задач, если до этого он никогда не видел интерфейс системы?
  • Эффективность использования. После того, как пользователь научился пользоваться системой, насколько быстро он сможет выполнять задачи?
  • Количество и серьезность ошибок. Как часто пользователь ошибается при работе с системой, насколько серьезны эти ошибки и как их исправить?
  • Запоминаемость. Если пользователь работал ранее с системой, сколько он смог запомнить и не придется ли ему изучать систему снова?
  • Субъективное удовлетворение. В какой мере пользователю нравится работать с системой?

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

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

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

Психологическое восприятие сайта

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

На психологическое восприятие сайта пользователем влияют многие факторы.

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

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

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

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

Единого алгоритма для создания динамичного, красивого web-сайта не существует. Конструирование сайта – занятие творческое, и многое зависит от воображения и возможностей мастера. Однако есть несколько основных правил, которые помогут вам в работе.

Структура страницы

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

Цветовая гамма

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

Графика на сайте

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

Шрифтовое оформление

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

Тестирование дизайна сайта

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

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

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

После завершения тестирования полученные данные анализируются, обрабатываются и делаются выводы о необходимых изменениях.

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

Полезные ресурсы

Загляните на досуге

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100