Графические элементы в веб дизайне: 6 основных элементов графического дизайна — Независимое театральное объединение "Зрительские симпатии"

Содержание

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

Графический дизайн – это творческий процесс объединения текста и графики при разработке веб-сайтов, логотипов, визитных карточек, макетов брошюр и журналов. Дизайнеры достигают своих целей, комбинируя элементы и принципы графического дизайна. Вот краткий список элементов, являющихся основой любого графического проекта.

Линии

Могут быть прямыми, изогнутыми, толстыми, тонкими, сплошными, прерывистыми. Они используются для разделения пространства и создания форм. Линии, которые соединяют несколько элементов, направляют глаза зрителя от одного элемента к другому.

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

Формы

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

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

С графическим программным обеспечением, таким как Illustrator, Photoshop, создавать фигуры новых форм проще, чем когда-либо.

Цвет

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

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

Текстура

Использование текстуры позволяет создавать убедительные и реалистичные дизайн-проекты. Различные текстуры, такие как бумага, камень, бетон, кирпич, ткань, мрамор придают объем обычным цветам. Элементы графического изображения в этом случае выглядят осязаемыми, привлекают к себе внимание. Текстура в качестве фона подчеркивает расположенные на нем объекты.

Создание собственных текстур – процесс трудоемкий, но существует много ресурсов с уже готовыми вариантами.

Шрифт

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

Шрифт–это целое искусство. Некоторые дизайнеры занимаются исключительно разработкой шрифтов.

Иллюстрация и фотография

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

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

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

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

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

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

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

Почему?

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

Начнем!

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