Перейти к содержанию
×
×
  • Создать...

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


Вальтер

Рекомендуемые сообщения

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

1614155813_4122.jpg

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

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

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

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

1614150437_1.png

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

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

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

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

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

1614150470_2.png

 

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

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

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

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

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

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

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

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

1614150583_3.png

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

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

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

Смотрите также
1581014287_1-2547.png
7) Используйте рекомендации по размерам

1614150769_4.jpeg

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

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

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

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

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

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

1614150870_5.png

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

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

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

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

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

1614150930_6.png

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

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

1614151310_6-3.png

1614151280_6-2.png

 1Gai.Ru

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

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

1614151336_7.png

1614151319_7-3.png

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

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

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

1614151376_8.png

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

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

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

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

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

 

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

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

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

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

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

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

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

1614151500_9.png

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

1614151468_544454.png

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

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

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

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

Обложка: shutterstock.com

Источник статьи:

Смотрите также
1580400450_88744.jpg
Смотрите также
1586162862_7744774.jpg
Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.