15 графических элементов, которые улучшат ваш дизайн

Если вы новичок в UX / UI или веб-дизайне, вам необходимо изучить многие области знаний, например, психологию, социологию, маркетинг и особенно графический дизайн, и различные подходы к ним.

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

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

Теперь я хочу поделиться с вами списком из 15 распространенных современных графических элементов, которые вы можете использовать для улучшения дизайна веб-сайта, как с оглядкой на настоящее, так и на прошлое.

Зачем?

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

Приступим!

(ПРИМЕЧАНИЕ. Большинство представленных примеров созданы мной в процессе быстрого проектирования во время написания этой статьи. Не принимайте их за первоклассные концепции. Я потратил около полутора часов на ВСЕ проекты... так что около 5 минут каждый!)

Часть I: Макро-макеты

15) Половина страницы

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

14) Окно просмотра в рамке

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

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

13) Горизонтальный скроллинг

Это может быть очень интересно, но также и пугающе, а, если он плохо реализован, то полностью испортит весь опыт.

Выбирайте его только в том случае, если действительно уверены, что собираетесь делать… и у вас есть хорошие разработчики.

НИКОГДА НЕ ИСПОЛЬЗУЙТЕ ЕГО В МОБИЛЬНЫХ ДИЗАЙНАХ.

12) Скошенный макет

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

Сайт Lamborghini

11) Динамический 3D-объект

Часто этот вид макета используется для энергетических напитков и аналогичных продуктов, где, прокручиваемый контент синхронизируется с предварительно отрисованным видео или 3D-сценой. работающими в качестве фона.

Чрезвычайно мощный метод, но требует серьезного кодинга.

Часть II: Единичные графические элементы

10) Линия

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

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

9) Ссылка в виде стрелки

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

Вы можете видеть ее на изображении выше.

8) Бегущая строка

Этот элемент был «запрещен» в прошлом веб-дизайна, потому что многие находили его раздражающим и трудным для чтения. За последние два года бегущая строка снова обрела свою славу в качестве декоративного элемента для быстро движущихся сайтов.

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

Сайт Shift

7) Хаотично центированный hero image

Я начал встречать этот тренд в 2021 году: он состоит из горизонтально центрированного hero image, в котором используются разные шрифты, гарнитуры и смещенные изображения.

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

Пример автора

Пример от GSoft

6) Могильный камень

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

Концепт от Halo UI/UX

5) Смещенная карточка

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

Пример от ChercheSusan

4) Гамбургер-меню

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

Традиционное гамбургер-меню состоит из 3-х равных строк, но вы можете попробовать десятки разных вариантов.

3) Форма Баухауса

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

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

Пример сайта от Sinx

2) Повернутый текст

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

1) Анимированный курсор

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

Этот вид курсора также может содержать текст, который появляется при наведении.

Выводы

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

Очевидно, что они не подходят для всех стилей и сообщений, поэтому вы должны тщательно понимать, нужно ли их использовать.

---

Перевод статьи uxplanet.org