Как создать дизайн сайта, делаем дизайн сайта правильно!
Создание дизайна сайта – это процесс, направленный на решение оптимального варианта расположения элементов сайта, а также их выраженности относительно друг друга.
Темы этой статьи:
Принципы и правила 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
Использование иконок наиболее эффективный способ создать интересный дизайн сайта. На странице должны присутствовать элементы, на которых в первую очередь фокусируется пользователь. Добавление соответствующих иконок прояснит интерфейс и расставит акценты в вашем приложении.
В этой статье, мы подобрали 9 проверенных наборов иконок, - это лучшие предложения на сегодня. Мы сгруппировали их в 3 категории: иконки шрифты, SVG иконки и CSS иконки.
Стремительно развивающиеся технологии заставляют нас идти в ногу со временем. Если раньше дизайн создавался на чистом HTML и CSS коде, то сегодня время библиотек кода.
Многие фронт энд разработчики, которые ценят свое время, давно уже используют шаблонизаторы, сетчастые структуры, SESS, LESS, Bootstrap и другие решения. Это правильно, зачем усложнять себе жизнь, когда есть готовые коллекции и реализации задач.
Сегодня мы рассмотрим, как просто можно создавать блочные сетки на bootstrap 3.0. Хотя с уверенностью могу сказать, через пол года, нужно будет вникать в новую 4 версию бутстрапа.
При написании CSS кода возникает проблема медленного ранжирования в старых браузерах и компьютерах. Сегодня мы рассмотрим способы написания кода, который будет потреблять меньше пользовательский ресурсов и ранжироваться быстрее.
Мы объединим все идеи и рекомендации существующие на данный момент, после чего обсудим детальнее каждую из них.
В этой статье мы рассмотрим различные способы создания мульти колоночных шаблонов с помощью HTML и CSS. Вы узнаете как создавать шаблоны используя обтекание и прямое позиционирование. Большинство сайтов используют 2 или 3 колонки, поэтому этот факт взят за основу. При создании будем соблюдать семантику кода.
В этой статье обсуждаются некоторые методы и техники создания div колонок, а также их выравнивания по высоте. Требования к этим способам будут простые – работоспособность во всех браузерах (даже в IE6). Все эти методы будут реализованы на 3 колоночном div шаблоне.
Создадим шаблон, в котором все три div колонки будут растянуты по одинаковой высоте.
Для нас, разработчиков, выбор редактора исходного кода не является чем-то малозначительным. Это среда, в которой мы тратим большинство своего времени. От редактора кода зависит наша продуктивность.
Нет двоих схожих разработчиков, поэтому здесь предоставлено изобилие редакторов кода, из которых можете выбрать лучший для себя. Чтобы понять, какой из них лучший, мы будем оценивать разные критерии по 5 бальной шкале. Мы обратим внимание на:
- Удобство использования – насколько редактор прост для новичков, насколько интуитивно понятен, когда мы открываем его впервые.
- Мощность – критерий всех новшеств, возможностей редактирования кода, автодополнение, режимы редактирования и т.д.
- Расширяемость – поддерживает ли редактор плагины, дополнительные библиотеки.
- Эстетика – мы любим красоту в нашей работе, насколько среда приятная на вид, насколько аккуратно выглядит код в ней.
- Скорость – насколько быстро запускается редактор, насколько быстро открывает большие файлы.
- Кросс-платформенность – доступен ли редактор для нескольких операционных систем.
- Цена – самая дешевая цена, получает наивысшую отметку.
Сегодня, практически в каждом дизайне сайта присутствует красивая background картинка.
Каждый верстальщик знает, что самый простой способ создания дизайна – лучшее, что может быть. Одним из простых и удобных техник является растягивание background на весь экран, с помощью нескольких строк css кода.
Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняя семантическую верстку.
В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе.
Действительно приходиться много труда приложить, чтобы достичь одного вида странички во всех браузерах. Вам не придется изобретать колесо каждый раз, если вы воспользуетесь этой подборкой кроссбраузерного HTML + CSS кода. Надеемся наш труд был не напрасен, а для вас будет полезен.
Цель данной статьи собрать полезные решения на HTML и CSS коде, соответственно кроссбраузерности. То есть, эти примеры кода будут отображаться во всех браузерах одинаково.
Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!
Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.
Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.
В книге «Парадокс выбора», Барри Шварц пришел к интересному заключению, по отношению к человеческому выбору.
Люди выбирают, базируясь не на том, что важно, но на том, что проще оценить.
Наше чувство подсказывает нам, что если дать список предложений, мы выберем наиболее важное для нас. Но в реальности мы выбираем наиболее простое для нашего понимания и осознания. Очень часто мы делаем это, потому что не имеем времени погружаться в исследования. Политический выбор базируется не на наших фундаментальных исследованиях, а на том, что мы когда-то слышали или видели о деятеле.
Давайте вернемся к нашему дизайну сайта. Мы представляем, что люди будут принимать информированные решения, что делать далее. Хотя, они за день принимают свыше 400 решений, которые гораздо важнее нашей структуры дизайна. Если вы не согласны, что простой дизайн сайта лучше, читайте статью до конца. Я уверен, она изменит ваше мнение о веб дизайне.
Сегодня мы будем создавать простое горизонтальное меню с помощью CSS. Для начала мы создадим скелет меню на HTML, и усвоим главные навыки создания горизонтальных меню. После чего мы придадим красивый вид для меню, используя CSS. Как известно, корифеи верстки, предпочитают семантику, от которой мы постараемся не отступать.
В данном видео, будет подробно рассказано и показано как с помощью CSS делается горизонтальное меню, используя спрайты. Видео является пошаговой инструкцией создания горизонтального меню на css.
В данной кнгие рассмотрены вопросы создания интерактивных Web-сайтов с помощью HTML, JavaScript, PHP и MySQL. Представлен материал о применении каскадных таблиц стилей (CSS) для форматирования Web-страниц. Даны основные конструкции языка PHP, на примерах показаны приемы написания сценариев, наиболее часто используемых при разработке Web-сайтов.
Книга «CSS: 100 и 1 совет» будет интересна для веб-дизайнеров и разработчиков, у которых нет времени на штудирование огромного количества теоретических материалов при создании собственного сайта. Это сборник готовых решений наиболее распространенных проблем, которые можно сразу применить на практике; более того, они могут послужить основой для разработки собственных методов.
Development — Taras Moroz