Учимся рисовать красивый дизайн сайта

Вы задались идеей создать действительно выдающийся сайт, который не стыдно будет показать в своем портфолио. Отличная затея, но раз вы здесь, значит вы понятия не имеете, как ее реализовать. Хотите узнать в чем отличие действительно уникального сайта от шаблонной серости? В этой статье я может и не расскажу об универсальной формуле шедевра, но я дам вам понимание того из чего он состоит. Возможно, прокачав каждый навык из ниже представленных, у вас может что-нибудь да выйдет. Что ж, хватит предисловий, расчехляйте фотошоп, мы начинаем!

Типографика

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

Не используйте необычные шрифты.

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

Не используйте несколько шрифтов.

Двух основных шрифтов вполне достаточно, ну и третий для привлечения внимания к деталям (кнопки «купи») и то на крайний случай. Чрезмерное количество шрифтов рассеивает внимание, да и выглядит неряшливо.

Контрастные шрифты

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

Размер

Размер основной массы текста должен быть в диапазоне от 14 до 18px — наиболее читабельные размеры.

Длинна строки

Постарайтесь на глаз определить оптимальный размер строки. Она должна быть удобночитабельной, а значит не слишком длинной, не слишком короткой. Если уж говорить о точных числах, то ГОСТ для печатных изданий равен 70 знаков, аналогично и для вебсайтов.

Межстрочное расстояние

Оно должно равняться 125% от размера шрифты. Это идеальные пропорции текста и пустоты за ним

Переносы — это зло.

Избегайте большого количества переносов, а лучше уберите их полностью. Переносите слова целиком, это увеличивает читабельность.

Расстояние между строчными.

Не увеличивайте между строчными (малыми) буквами. Читать такой текст невозможно.

Расстояние между прописными.

С прописными все наоборот – большие отступы улучшают читабельность (не перестарайтесь).

Ширина букв.

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

Цвет

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

Что ж, приступим к знакомству с магией цвета.

  • Голубой – спокойствие, надежность, стабильность, доверие.
  • Желтый – живость, энергичность, радость, развлечение.
  • Оранжевый – бодрость, творчество, дружелюбие.
  • Фиолетовый — Благородство, власть, богатство, роскошь.
  • Зеленый – природа, жизнь, здоровье, иногда деньги, рост.
  • Коричневый – доверие, комфорт, надежность.
  • Серый – серьезность, консерватизм.
  • Розовый – нежность, романтичность, женственность.
  • Черный – стиль, власть, изысканность.
  • Белый – чистота, невинность, простота, свежесть.
  • Красный – власть, важность.

Выбор цвета

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

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

Контрастные цвета

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

Аналогичные цвета

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

Ну а теперь ответ на вопрос, как найти ту самую гармонию цвета.

  1. Использовать два цвета на противоположных сторонах цветового круга, то есть контрастные.
  2. Использовать три цвета, равноудаленные друг от друга и образующие равносторонний треугольник
  3. Использовать четыре цвета, образующие прямоугольник.
  4. Использовать три аналогичных цвета.

Начинающим стоит ограничиться двумя-тремя цветами.

Фото

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

Смысловая составляющая

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

Визуальная составляющая

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

Качество фото

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

Наиболее популярные:

Unsplash

StockSnap

Pixabay

Техническая составляющая

Выйдет не очень, если ваш сайт будет грузиться по несколько десятков секунд. Тогда вашим дизайном насладятся только самые терпеливые посетители. Чтобы избежать подобной неувязки, нужно править фото перед их внедрением. Разрешение должно быть примерно 70 пикселей на дюйм. Это все еще хорошее качество, но вес таких фотографий приемлем. И если уж говорить о весе, то изображение должно быть не больше 200 кб. Наиболее легким и в то же время «вместимым» форматом является jpeg. Существует множество сервисов для подгонки фото под данные параметры, но лично я, это все делаю в фотошопе.

Композиция и размещение

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

Зрительный образ

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

Золотое сечение

Божественная пропорция равная примерно 1 к 1,618. Оно лежит в основе всего живого и потому породило кучу мифов и теорий в кругу художников и дизайнеров. Можете подогнать под эти пропорции изображения, блоки, да и все остальное.

Правило третей

Кадр делится двумя горизонтальными и двумя вертикальными линиями так, чтобы равные его части имели пропорции 1 к 2. Точки пересечения линий в этом случае станут оптимальными центрами внимания.

Сходство и близость

Мозгу свойственно систематизировать получаемую информацию, поэтому похожие по каким-то характеристикам, объекты объединяются в одну группу. Чаще всего объекты группируются по размеру, форме и цвету. Также немаловажную роль играет близость между составляющими. Объекты, находящиеся рядом – одно, что по одаль – другое. Пользуясь этим правилом можно систематизировать элементы дизайна в угоду нашему мозгу.

Правило струн

Это очередное свойство нашего мозга. Не осознано мы проводим свисающие линии от каждого объекта на странице – струны. И когда этих струн оказывается слишком много, дизайн начинает выглядеть неряшливо. Чтобы этого избежать, создайте несколько вертикальных линий (не больше 5) и выравниваем все блоки по ним. Человеческий глаз способен увидеть мельчайшую асимметрию или отклонение. Будьте внимательны к каждой мелочи. К примеру, Шрифты имеют такое свойство – смещаться немного вправо вниз при увеличении размера, поэтому они требуют отдельной корректировки. То же самое касается изображений с нечеткими (размытыми) краями. В этом случае выставлять нужно не по реальным границам фото, а «на глаз».

Z и F макет

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

Анимации

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

  • Имитация удара
  • Вращение
  • Скольжение
  • Вспышка, пульсация
  •  Перемещение
  • Качание
  • Исчезновение
  • Изменение формы

И многое другое

Для чего нужна

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

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

читайте так же
Правильный блог. Какой он?
views 3
  Доброго времени суток, друзья. Это очередная статья по ведению блога и сегодня будем говорить на тему правильный блог. Итак, что значит правильный блог? Мы разберем основные части и элементы блога, а так же то, какими они должны быть. Дело ...

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

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