Как создать свой веб дизайн


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

Темы этой статьи:

Принципы и как создать свой веб дизайн правила web дизайна (юзабилити, символика, психология, цвета, эмоции)

Процесс создания дизайна сайта (С чего начать? Как создается дизайна сайта).

Анализ и тестирование дизайна (без тестирования, дизайн это пустышка)

Принципы и правила web дизайна

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

Принципы дизайна сайта

1. Юзабилити сайта

2. Психология пользователя

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

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

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

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

Взгляд на дизайн вашего сайта

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

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

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

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

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

Удовлетворенность. Это то ощущение, которое должно оставаться у пользователя после посещения вашего сайта. Это равнозначно, как прокатиться на «ВАЗ» или на дорогом «BMW».

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

Поэтому сайт в первую очередь должен быть удобным!

Психология пользователя

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

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

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

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

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

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

Символика

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

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

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

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

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

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

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

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

Красный

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

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

Голубой

Европа: успокоение

Христианство: цвет Христа

В мире: цвет безопасности

Желтый

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

Япония: мужество

Оранжевый

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

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

Коричневый

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

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

Зеленый

Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным)

Фиолетовый

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

Белый

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

Черный

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

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

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

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

Эмоции в веб дизайне

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С уважением администрация sitear.ru


Источник: http://sitear.ru/section/verstka



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как создать дизайн сайта Интерьер с галогеновыми люстрами


Как создать свой веб дизайн Как создать свой веб дизайн Как создать свой веб дизайн Как создать свой веб дизайн Как создать свой веб дизайн Как создать свой веб дизайн Как создать свой веб дизайн Как создать свой веб дизайн


ШОКИРУЮЩИЕ НОВОСТИ