Оптион
Твиттер Facebook Mail.ru Одноклассники Вконтакте
  • г.Киров
    ул. Калинина, 38

    8(8332)22-62-35
    тех.поддержка

    8(8332)22-61-57
    8(8332)22-61-59
    отдел продаж

    8(912)820-29-23
  • Кировская область
    г. Белая Холуница
    ул. Глазырина, 2а
    8(83364)4-24-75
    отдел продаж

    8(912)820-32-80
    отдел продаж

Вверх

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

Юзабилити Сайта

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

У каждого web-сайта своя цель, и её посетитель должен понять в первые секунды нахождения на странице. По статистике 60% пользователей сети интернет не могут без каких-либо проблем отыскать информацию, причина тому — малопонятная навигация. Именно поэтому не нужно придумывать что-то сверхъестественное. Современному человеку все равно, он ищет какую-то информацию. Если в первые секунды, при просматривании страницы web-сайта, посетителю не удается найти то что он искал, он просто уходит недовольным. А если вы без труда находите и понимаете все что находится перед вашими глазами – вы преподнесены, удовлетворены и скорее всего вернетесь на тот web-ресурс. Наблюдайте за собой… Как вы используете интернет?  Какие web-сайты Вас привлекают и чем?

 

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

 

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

 

Эффективность. Легко ли тому или иному пользователю найти информацию или пользоваться сторонними сервисами. Не стоит заставлять думать  посетителя. Оптимально-эффективный дизайн web-страницы, который будет понятен Вашей бабушке. Вы скажете это не круто? Не круто напрягать посетителей сайта, а простота – это верх искусства дизайна. Нужно выбрать 3-5  важных на Ваш взгляд блоков, в которых будут нуждаться, как постоянные так и для новые посетители.

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

Предотвращение ошибок. Сколько неверных и ненужных ходов совершают пользователи сайтов и насколько они критичны. Например: в сайтах каталогах есть разделы Медицина и Домашние животные. И какому каталогу отнести сайты о ветеринарии? Когда Вы переходите в раздел «медицина», вы не видите нужные сайты, а если перейти в рубрику «домашние животные» происходит та же ситуация. В последствии выясняется следующий факт, что сайты о ветеринарии находятся в разделе  «Наука и образование». Эти сложности, не должны ставить пользователя в тупик. Тоже самое касается и форм. Например: намного удобнее получать сообщение о невозможности использования логина в связи с его занятостью до нажатия кнопки зарегистрироваться.

Удовлетворенность. Это то состояние, которое должно сохраняться у посетителя после визита к Вам на web-сайт. Это тоже самое, как просматривать кино в кинотеатре, или дома смотреть экранку, снятую в зале кинотеатра

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

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

  1. Психология посетителя

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

  1. Выраженность

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

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

  1. Иллюстративность

Важнейшая особенность создания дизайна сайта, посетитель на 83% информации воспринимает зрительным аппаратом. При зрительном контакте 40% информации усваивается, что в 2 раза больше, чем от прослушивания (20%). Иллюстративность – не только фото, видео и картинки. Цифровой контент, тоже дают хороший воображаемый эффект. Они создают возможность понимания реальной величины, значений, объема определенного понятия. Много цифр тоже плохо. Если стоит показать много цифр, наилучшим вариантом будет, нарисовать график. Выведение графика на веб-странице значительно повышает запоминаемость цифр (40%), что практически не реально было бы с помощью обычного текста. Разрабатывая дизайн сайта для компании, советую заострить внимание на иллюстративность материалов.

 

  1. Символика

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

Какие иконки стоит использовать в дизайне?

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

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

Многие говорят, что лучше воспринимается одноцветная иконка. Мне кажется, это не так, 2-3 цвета хорошо будут смотреться в иконке.

Размер должен быть пропорционален объемам элементов иконки.Не известные для посетителя иконки также должны быть больше (32 на 32). Маленькими стоит делать только популярные иконки ( печать, домашняя страница, email).

  1. Психология цвета

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

 

Красный

Европа: уверенность,  лидерство, выраженность

Христианство: страсть,  любовь, жертва.

 

Голубой

Европа: Спокойствие

В мире: цвет устойчивости

 

Желтый

Европа: радость, надежда, слабость, трусость в опасностях, счастье.

Япония: смелость, мужество, решимость

 

Оранжевый

Европа: творчество, урожай, осень,

Ирландия: религиозные протестанты

 

Коричневый

Колумбия: затруднение продаж

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

 

Зеленый

Европа:новое рождение, весна,

США:  Рождество (с красным)

 

Белый

Европа: ангелы, брак, врачи, мир, больница/

 

Фиолетовый

Европа: грусть, озабоченность, стиль,

 

Черный

Европа: бунт, похороны, смерть, траур, спокойствие.

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

  1. Эмоции в цветах

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

 

Процесс разработки дизайна сайта

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

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

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

Adobe Photoshop. Куда же без него, делайте шаблон по слоям. сортируя все последующие слои по папкам, для простого ориентирования. Создайте несколько вариантов макетов.

Верстка. Или перенос макета в html форму. Здесь стоит соблюдать семантические правила  (нужно сделать так, чтобы каждый тег соответствал контенту: p– параграф текста, h1 – заголовок, quote– цитата и т.д.) Все стили для удобства нужно вынести в CSS файл.

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

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

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

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

Многие думают, что тестирование это очень затратное дело. Нет, в среднем на разработку проекта нужно провести 3-5 тестирований. Это значит нанять 6-15 человек (по 2-3 на каждый тест), заплатить за час работы и все. Из оборудования понадобиться программа, позволяющая записывать видео с монитора и микрофон. На мой взгляд, это не большие затраты, которые равны 2-3 ежесуточным заработным платам. Но эти затраты позволят поднять эффективность вашего сайта на 30-60%. При проведении тестирования вы сами убедитесь в этом.

Что делать если я работаю на себя? У меня нет денег на тестирование.

Для этого существует альтернативное решение. Вы можете протестировать ваш дизайн сайта с помощью сервиса metrika.yandex.ru «вебвизор». Кроме статистических данных о ваших пользователях вы получаете карту кликов по сайту + видеозаписи, которые позволяют лучше понять поведение человека на вашем сайте.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>