Что такое Web-дизайн?

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

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

Семь правил web-дизайна:

1. Главный критерий – удобство пользователя. Есть негласное правило – сайт должен корректно отображаться при разрешении 800х600 точек с палитрой 256 цветов.
2. Сайт должен идентично отображаться как в IE, так и в NN.
3. Все страницы сайта должны быть минимальны по объему.
4. Навигация по сайту должна обеспечивать легкий доступ ко всей выложенной информации.
5. Весь проект должен быть выдержан в едином стиле.
6. Максимальное количество шрифтов на одной странице – три.
7. Максимальное количество цветов на одной странице – три, корректность цветовых схем.

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

С одной стороны, факторы субъективного представления и объективных психофизических законов восприятия формируют определенные требования к форматам представления данных на экране монитора.

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

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

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

Какие требования предъявляются к дизайну интернет-ресурса?

1. Во первых минимальное поддерживаемое разрешение должно быть — 1024х768. На 800х640 допустима горизонтальная прокрутка, однако строка основного текста обязательно должна умещаться в 800px.

2. Если резина, то тянется примерно с 950px до 1200px, чтобы на больших разрешениях строки не становились слишком длинными. Если используется фиксированная ширина, то это примерно 1000px.

3. Необходимо предусмотреть, как будет выглядеть сайт на 1600х1200 и больше.

4. Невысокая шапка сайта, пикселей 200 максимум.

5. Боковая колонка может быть фиксированной ширины. Не делайте её слишком узкой. Список ссылок в боковой колонке не должен слишком сильно растягиваться по высоте.

6. Обязательно предусмотрите дизайн подвала.

7. Все ссылки обязательно должны быть подчеркнуты.

8. Уже посещённые ссылки должны отличаться от непосещённых, также должны выделяться ссылки, на которые направлен курсор

9. Необходимо разработать стили для текущих пунктов меню

10. Стили таблицы, в том числе и шапки таблицы, тоже необходимо проработать.

11. Не забудьте про стили для маркированных списков

12. Стили для трёх уровней заголовков

13. Также разработайте стили нумерации страниц

14. Очень важно придумать, как выделять новинки и специальные предложения в каталоге.

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

16. Видео с Youtube должно как можно более органично смотреться на страницах вашего сайта.

17. Разработайте стили для лайтбокса.

18. Форум должен быть в одной стилистике с сайтом.

Какие правила необходимо соблюдать при разработке web-дизайна?

Правило 1: Юзабилити

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

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

Правило 2: Скорость загрузки страницы

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

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

Правило 3: Навигация

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

Правило 4: Единый стиль

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

Правило 5: Шрифты

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

Правило 6: Цветовая схема

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

Правило 7: Визуализация

Для более комфортного восприятия информации и перемещения пользователей по сайту постарайтесь использовать общепринятые иконки. К примеру, картинка с лупой у всех уже ассоциируется с поиском, дискета — с сохранением данных или файлов, корзинка — с покупкой товара и т. д.

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

Правило 8: Фон

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

Правило 9: Мультибраузерное отображение

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

Следовательно, один и тот же элемент может отображаться в Google Chrome и Internet Explorer по-разному. Не забывайте проверять предварительный шаблон на идентичность во всех браузерах, иначе это будет напрямую свидетельствовать о вашем непрофессионализме.

Правило 10: Эмоциональный дизайн

Что такое эмоциональный дизайн?

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

Место эмоционального дизайна —

В книге «Эмоциональный веб-дизайн» Аарон Уолтер тщательно проанализировал концепцию эмоционального дизайна и разработал альтернативу пирамиде Маслоу. Эта пирамида состоит из различных уровней — потребностей пользователей продукта. Эти уровни появлялись по мере развития технологий: интернета, различных устройств и других…

Пирамида Маслоу и пирамида Аарона Уолтера

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

Затем, благодаря развитию технологий, появилась возможность создать аккаунт, произвести оплату, поделиться контентом… Благодаря таким возможностям у пользователей возникла новая потребность: безопасность и надёжность — первый уровень. Второй уровень связан с юзабилити. Интерфейс должен быть понятным и быстрым в использовании. Это сфера UX: в интерфейсе я должен легко найти способ достижения своей цели.

Наконец, последний уровень становится всё более и более важным, особенно для того, чтобы выделиться среди конкурентов. Он касается удовольствия от использования продукта. Если юзабилити можно сравнить со съедобностью, то удовольствие от использования сродни вкусности. Здесь мы говорим о фирменном стиле, дизайне интерфейса, анимации…

И вишенка на торте — вершина пирамиды: эмоциональный дизайн. Цель: вызвать эмоции, которые окажут положительное влияние на опыт взаимодействия пользователя с продуктом.

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

Из чего он сделан? —

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

Три уровня привлекательности дизайна от Дона Нормана

• Висцеральный уровень

Висцеральный уровень — часть эмоций, которые мы не контролируем и которые носят компульсивный характер. Это касается визуального аспекта, который позволяет продукту отличаться от других. Брендинг — один из ключевых составляющих этого уровня. Вселенная Марио, которая охватывает несколько поколений, может стать отличным источником для создания интерфейса. Цель в данном случае — затронуть чувства и привязанности пользователей.

• Поведенческий

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

• Рефлексивный

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

Вывод.

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

 

Изображение от upklyak на Freepik