10 простых трюков, которые улучшат дизайн вашего сайта

[Вальтер]

Дизайнерские советы в студию: советы по дизайну сайтов, которые не требуют конкретных навыков. 

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

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

Помните: это не правила, а просто .

10) Монохром – ваше все

^{Просто, но эффективно}

Нет идей? Нет хороших изображений? Используйте Ч/Б. У вас получится бруталистический дизайн с правильной композицией. Так вы поймете, где и что сбалансировать, где заполнить пробелы и как лучше всего внедрить текст и геометрию.

Рассмотрим небольшой пример. Перед вами концепт веб-сайта портфолио. Просто, но эффектно!

9) Создайте «балансовую схему»

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

 

Конечно, все можно сделать на глаз, но давайте посмотрим на некоторые расчеты.

Черные прямоугольники в левой области суммируются в

(236 * 138) + (934 * 132) + (313 * 69) + (674 * 44) = 207109 пикселей.

В то время как большой правый прямоугольник имеет значение около 446 * 446 = 198916 пикселей.

Элементы слева и справа отличаются друг от друга всего на 3,9558%!

Комментарий: да, чернильное пятно меньше прямоугольника, но оно довольно четкое и детальное и привлекает больше внимания.

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

8) Презентуйте дизайн сайта на фоне

^{Кофейные зерна придают изображению глубину и контекст}

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

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

Смотрите также

7) Используйте рекомендации по размерам

^{Абзац: 18, Заголовок 96. (шрифт Roboto)}

Перестаньте терять время, тратя весь день на эксперименты с размерами. В итоге ваши абзацы все равно будут около 14-18 пунктов, подзаголовки – 24-36, а заголовки ­– от 96 до 144 пунктов. Размеры Figma, выстраиваемые по умолчанию, хорошо подходят для типографики.

Они будут выглядеть слишком маленькими, но это нормально: вы не работаете в полноэкранном режиме.

Будьте осторожны: некоторые шрифты в разы меньше или больше, чем другие. Ориентируйтесь на стандартные шрифты вроде Roboto: если шрифт большой, как 14-18 пунктов Roboto, то считайте, что он идеально подходит для основного текста.

В этом примере текст набран 18 кеглем, текст кнопки – 24-м, а заголовок – 96-м.

6) Не забывайте про Z-Index

^{На изображении Тукан, кажется, принадлежит зеленой зоне, но заходит в желтый контейнер}

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

С помощью Z-индекса в CSS вы можете поставить изображение позади или перед другими элементами, создавая 3D-иллюзию. Поверьте, это всегда смотрится эффектно.

Перед вами – пример простого дизайна, где использована эта техника. Кажется, что тукан расположен на зеленом фоне, но в то же время он «заглядывает» на желтую плашку.

5) Начните использовать пастельные цвета

^{Красный прямоугольник на изображении содержит много интересных цветов. Обратите на них внимание}

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

 ^1Gai.Ru

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

4) Добавьте больше воздуха

^{Большое количество пробелов (в данном случае черного) очень помогает}

Много пробелов – лучше, чем мало пробелов. Загроможденный дизайн – просто отстой. Добавить ему немного воздуха можно несколькими способами:

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

3) Откройте для себя силу шума

^{Тонкий шум создает впечатление бумажного фона. Портрет Джессики Фелисио.}

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

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

Вы можете получить шумовую текстуру, используя Photoshop: создайте гауссовский шум 2-4K на белом фоне, а затем «положите» его поверх монтажной области.

2) Запаситесь хорошими шрифтами

 

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

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

Хорошая новость: !

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

• Элегантные шрифты
• Современные шрифты
• Шрифты для основного текста

Зачастую первые два шрифта являются : создатели подразумевали, чтобы их использовали в качестве заголовков.

Среди элегантных шрифтов неплохими считаются Abril Fatface, Playfair Display, Volux, Chalga и др. Среди современных – Metropolis, ITC Avant Garde, Redwing, Takota, Gotham.

1) Используйте геометрию

^{Буква А в этом концептуальном описании приложения Abmeister сработала идеально}

Вероятно, это самый трудный в использовании трюк, но при правильном применении это просто бомба!

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

Один большой лайфхак – использовать в качестве геометрии буквы, цифры и заголовки из основного текста. Вы можете сделать их гигантскими, но тонкими или использовать конкретные буквы в качестве фигур. Например, с «А» это проходит лучше всего. Экспериментируйте!

^{Обложка: shutterstock.com}

^{Источник статьи:}

Смотрите также

Смотрите также