Каждый начинает свой дизайнерский путь с роли новичка. Но эстетике и насмотренности можно обучиться, как и всему остальному. Да, время от времени полезно заглядывать на Behance и Dribbble, но порой дизайн просто вам нравится, и вы не понимаете, почему.
Отсутствие идей. Плохие исходники. Нет понимания, что именно делать. Эти и многие другие причины могут замедлить вас и расстроить, поэтому держите 10 простых трюков для веб-дизайна, которые не требуют конкретных навыков и улучшат любой визуал.
Помните: это не правила, а просто рабочие трюки.
Просто, но эффективно
Нет идей? Нет хороших изображений? Используйте Ч/Б. У вас получится бруталистический дизайн с правильной композицией. Так вы поймете, где и что сбалансировать, где заполнить пробелы и как лучше всего внедрить текст и геометрию.
Рассмотрим небольшой пример. Перед вами концепт веб-сайта портфолио. Просто, но эффектно!
Просто замените все содержимое веб-страницы простыми черно-белыми геометрическими фигурами. Светлые и небольшие объекты заменяйте фигурами серого цвета. Цель – уравнять количество черных элементов в левой, правой, верхней и нижней частях экрана. Если применить этот метод к сайту портфолио выше, получится что-то вроде такого:
Конечно, все можно сделать на глаз, но давайте посмотрим на некоторые расчеты.
Черные прямоугольники в левой области суммируются в
(236 * 138) + (934 * 132) + (313 * 69) + (674 * 44) = 207109 пикселей.
В то время как большой правый прямоугольник имеет значение около 446 * 446 = 198916 пикселей.
Элементы слева и справа отличаются друг от друга всего на 3,9558%!
Комментарий: да, чернильное пятно меньше прямоугольника, но оно довольно четкое и детальное и привлекает больше внимания.
Поначалу придется считать, но после нескольких лет практики процесс расположения объектов станет автоматическим, ведь ваш глаз будет чувствовать неправильный баланс.
Кофейные зерна придают изображению глубину и контекст
Пример, который вы видели выше, представлен на сером фоне, но вы можете попробовать разные варианты. Такой трюк помогает создать некоторую глубину и сформулировать контекст вокруг вашего дизайна.
Но будьте осторожны: на настоящем сайте у вас не будет дополнительного пространства, так что это просто трюк для эффектной презентации сайта заказчику!
Абзац: 18, Заголовок 96. (шрифт Roboto)
Перестаньте терять время, тратя весь день на эксперименты с размерами. В итоге ваши абзацы все равно будут около 14-18 пунктов, подзаголовки – 24-36, а заголовки – от 96 до 144 пунктов. Размеры Figma, выстраиваемые по умолчанию, хорошо подходят для типографики.
Они будут выглядеть слишком маленькими, но это нормально: вы не работаете в полноэкранном режиме.
Будьте осторожны: некоторые шрифты в разы меньше или больше, чем другие. Ориентируйтесь на стандартные шрифты вроде Roboto: если шрифт большой, как 14-18 пунктов Roboto, то считайте, что он идеально подходит для основного текста.
В этом примере текст набран 18 кеглем, текст кнопки – 24-м, а заголовок – 96-м.
На изображении Тукан, кажется, принадлежит зеленой зоне, но заходит в желтый контейнер
Если у вас есть изображения с прозрачным фоном, вы можете создавать многослойность. Если у вас их нет – используйте remove.bg.
С помощью Z-индекса в CSS вы можете поставить изображение позади или перед другими элементами, создавая 3D-иллюзию. Поверьте, это всегда смотрится эффектно.
Перед вами – пример простого дизайна, где использована эта техника. Кажется, что тукан расположен на зеленом фоне, но в то же время он «заглядывает» на желтую плашку.
Красный прямоугольник на изображении содержит много интересных цветов. Обратите на них внимание
Яркие цвета прекрасны, с этим никто не спорит, но из-за них дизайн нередко получается агрессивным, а цветовые комбинации неудачными.
1Gai.Ru
Кроме того, сегодня пастельный дизайн считается трендовым, поэтому сейчас самое время поэкспериментировать с цветовой палитрой – в ней много интересных глубоких оттенков.
Большое количество пробелов (в данном случае черного) очень помогает
Много пробелов – лучше, чем мало пробелов. Загроможденный дизайн – просто отстой. Добавить ему немного воздуха можно несколькими способами:
Тонкий шум создает впечатление бумажного фона. Портрет Джессики Фелисио.
Чаще всего, когда мы думаем о дизайне, то на ум приходят такие понятия, как «чистый», «гладкий», «ясный». Но на самом деле совершенство – в дефектах.
Шум – большой друг вашего дизайна, особенно если вы пытаетесь придать сайту элегантный творческий вид. Кроме того, легкий шум придает композиции кинематографический эффект, который хорошо работает с видео- и динамическими веб-сайтами.
Вы можете получить шумовую текстуру, используя Photoshop: создайте гауссовский шум 2-4K на белом фоне, а затем «положите» его поверх монтажной области.
Существует много ужасных шрифтов, особенно среди тех, которые уже установлены на наших компьютерах. Чтобы найти хорошие – отправляйтесь в старый добрый Интернет или посмотрите видео на YouTube от ведущих дизайнеров.
Но будьте осторожны: многие шрифты не бесплатны, и их использование без лицензии может привести к неприятностям.
Хорошая новость: большинство шрифтов имеют бесплатную версию!
В шрифтовом мире существуют тонны разных семейств и стилей, но в целом их можно разделить на три основные категории:
Зачастую первые два шрифта являются шрифтами дисплея: создатели подразумевали, чтобы их использовали в качестве заголовков.
Среди элегантных шрифтов неплохими считаются Abril Fatface, Playfair Display, Volux, Chalga и др. Среди современных – Metropolis, ITC Avant Garde, Redwing, Takota, Gotham.
Буква А в этом концептуальном описании приложения Abmeister сработала идеально
Вероятно, это самый трудный в использовании трюк, но при правильном применении это просто бомба!
Использование геометрических фигур делает дизайн более концептуальным и наводит порядок в макете – при таком дизайне даже не нужны изображения. Но найти правильную геометрическую форму трудно, поэтому метод сложен на практике.
Один большой лайфхак – использовать в качестве геометрии буквы, цифры и заголовки из основного текста. Вы можете сделать их гигантскими, но тонкими или использовать конкретные буквы в качестве фигур. Например, с «А» это проходит лучше всего. Экспериментируйте!
Обложка: shutterstock.com
Источник статьи: 10 easy tricks to improve your website design