Урок №1

Введение в профессию
Конспект

Принципы современного веб-дизайна 11

Продуманные цветовые решения 1
Грамотно подобранные фотографии 2
Хорошая типографика 4
Продуманная композиция 5
Единство стиля 6
Простота и лаконичность 6
Примеры современного и устаревшего дизайна 8

Принципы современного веб-дизайна

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

Продуманные цветовые решения

Сайт – это лицо компании в интернете, поэтому он должен полностью соответствовать
стилю и настроению компании. А настроение чаще всего передается с помощью
цвета.

Если у компании есть фирменные цвета и выработанный стиль, то его нужно

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

Если компания позиционирует себя как прогрессивная, активная и яркая организация,

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

Советы по использованию цвета в проекте:

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

Сравните 2 примера главных экранов и подумайте, в каком из них хорошо продумана

цветовая палитра, а в каком нет.

Грамотно подобранные фотографии

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

Сравните 2 примера и оцените работу дизайнеров по подбору фотографий:

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

Советы по подбору шрифтов:

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

Сравните 2 примера и подумайте, где хорошо продумано использование шрифта:

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

Советы по созданию композиции:

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

Сравните 2 примера и продуманность их композиции:

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

Сравните 2 проекта и отметьте для себя, какой из них выполнен в единой стилистике,
а какой как будто собран из частей разных проектов:
пример 1
пример 2

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

Советы по созданию лаконичного макета:

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

Сравните 2 примера и то, насколько они понятны и лаконичны:

Примеры современного и устаревшего дизайна

Чтобы окончательно разобраться в различиях между “хорошим” и “плохим” дизайном,

рассмотрим примеры.

Примеры современного дизайна, в которых отлично подобраны цветовые цветовые и

шрифтовые решения, стильные и грамотно подобранные фотографии:
пример 1
пример 2

Примеры устаревшего дизайна сайтов, в которых цвета не очень подходят к тематике

проекта, тексты плохо читаются, а изображения не самого хорошего качества:
пример