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
На изображении Тукан, кажется, принадлежит зеленой зоне, но заходит в желтый контейнер
Если у вас есть изображения с прозрачным фоном, вы можете создавать многослойность. Если у вас их нет – используйте remove.bg.
С помощью Z-индекса в CSS вы можете поставить изображение позади или перед другими элементами, создавая 3D-иллюзию. Поверьте, это всегда смотрится эффектно.
Перед вами – пример простого дизайна, где использована эта техника. Кажется, что тукан расположен на зеленом фоне, но в то же время он «заглядывает» на желтую плашку.
5) Начните использовать пастельные цвета
Красный прямоугольник на изображении содержит много интересных цветов. Обратите на них внимание
Яркие цвета прекрасны, с этим никто не спорит, но из-за них дизайн нередко получается агрессивным, а цветовые комбинации неудачными.
1Gai.Ru
Кроме того, сегодня пастельный дизайн считается трендовым, поэтому сейчас самое время поэкспериментировать с цветовой палитрой – в ней много интересных глубоких оттенков.
4) Добавьте больше воздуха
Большое количество пробелов (в данном случае черного) очень помогает
Много пробелов – лучше, чем мало пробелов. Загроможденный дизайн – просто отстой. Добавить ему немного воздуха можно несколькими способами:
- Высветляйте тени фона.
- Избегайте эффекта текстового полотна с помощью абзацев и интервалов.
- Используйте изображения, которые не привлекают слишком много внимания.
- Сокращайте текст, оставляя только цепляющие фразы.
3) Откройте для себя силу шума
Тонкий шум создает впечатление бумажного фона. Портрет Джессики Фелисио.
Чаще всего, когда мы думаем о дизайне, то на ум приходят такие понятия, как «чистый», «гладкий», «ясный». Но на самом деле совершенство – в дефектах.
Шум – большой друг вашего дизайна, особенно если вы пытаетесь придать сайту элегантный творческий вид. Кроме того, легкий шум придает композиции кинематографический эффект, который хорошо работает с видео- и динамическими веб-сайтами.
Вы можете получить шумовую текстуру, используя Photoshop: создайте гауссовский шум 2-4K на белом фоне, а затем «положите» его поверх монтажной области.
2) Запаситесь хорошими шрифтами
Существует много ужасных шрифтов, особенно среди тех, которые уже установлены на наших компьютерах. Чтобы найти хорошие – отправляйтесь в старый добрый Интернет или посмотрите видео на YouTube от ведущих дизайнеров.
Но будьте осторожны: многие шрифты не бесплатны, и их использование без лицензии может привести к неприятностям.
Хорошая новость: большинство шрифтов имеют бесплатную версию!
В шрифтовом мире существуют тонны разных семейств и стилей, но в целом их можно разделить на три основные категории:
- Элегантные шрифты
- Современные шрифты
- Шрифты для основного текста
Зачастую первые два шрифта являются шрифтами дисплея: создатели подразумевали, чтобы их использовали в качестве заголовков.
Среди элегантных шрифтов неплохими считаются Abril Fatface, Playfair Display, Volux, Chalga и др. Среди современных – Metropolis, ITC Avant Garde, Redwing, Takota, Gotham.
1) Используйте геометрию
Буква А в этом концептуальном описании приложения Abmeister сработала идеально
Вероятно, это самый трудный в использовании трюк, но при правильном применении это просто бомба!
Использование геометрических фигур делает дизайн более концептуальным и наводит порядок в макете – при таком дизайне даже не нужны изображения. Но найти правильную геометрическую форму трудно, поэтому метод сложен на практике.
Один большой лайфхак – использовать в качестве геометрии буквы, цифры и заголовки из основного текста. Вы можете сделать их гигантскими, но тонкими или использовать конкретные буквы в качестве фигур. Например, с «А» это проходит лучше всего. Экспериментируйте!
Обложка: shutterstock.com
Источник статьи: 10 easy tricks to improve your website design
