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
Графические элементы — Win32 apps
Twitter LinkedIn Facebook Адрес электронной почты
- Статья
- Чтение занимает 5 мин
Примечание
Это руководство по проектированию было создано для Windows 7 и не было обновлено для более новых версий Windows.
Большая часть рекомендаций по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.
Графические элементы отображают связи, иерархию и визуальное выделение. К ним относятся фон, баннеры, стекло, агрегаторы, разделители, тени и дескрипторы.
Пример с несколькими типами графических элементов.
Графические элементы обычно не являются интерактивными. Однако разделители являются интерактивными для изменяемого содержимого и дескрипторов — это графика, показывающая интерактивность.
Примечание: Рекомендации, связанные с групповыми полями, анимациями, значками и фирменной символиками , представлены в отдельных статьях.
Это правильный пользовательский интерфейс?
Хотя графические элементы являются сильным визуальным средством для указания связей, чрезмерное использование их добавляет визуальный беспорядок и сокращает пространство, доступное на поверхности. Их следует использовать экономно.
Тенденция дизайна в Microsoft Windows — это более простой, более чистый внешний вид, устраняя ненужные графические элементы и линии.
Чтобы решить, требуется ли графический элемент, рассмотрите следующие вопросы:
- Является ли презентация и коммуникация дизайна столь же четкой и эффективной без элемента? Если да, удалите его.
- Можете ли вы эффективно обмениваться связями с помощью макета самостоятельно? Если да, используйте вместо этого макет . Вы можете разместить связанные элементы управления рядом друг с другом и поместить дополнительные интервалы между несвязанными элементами управления. Вы также можете использовать отступ для отображения иерархических связей.
В этом примере только макет используется для отображения связей элементов управления.
- Эффективна ли связь без текста? В противном случае используйте поле группы, разделитель с метками или другую метку.
Варианты использования
Графические элементы имеют несколько шаблонов использования:
| Элемент | Описание |
|---|---|
| Рисунки используется для визуального взаимодействия с идеей.  | Графические иллюстрации похожи на значки, за исключением того, что они могут иметь любой размер и обычно не являются интерактивными. В этом примере рисунок используется для определения характера признака. |
| Фон используется для выделения или отмены выделения различных типов содержимого. | Фон можно использовать для выделения важного содержимого. в этом примере фон используется для выделения важной задачи. Фоновые фоны также можно использовать для отмены выделения дополнительного содержимого. В этом примере вторичные задачи удаляются путем их размещения в области задач. |
| Баннеры используется для указания важного состояния. | В отличие от фона, баннеры подчеркивают в первую очередь одну текстовую строку. В этом примере баннер используется для указания того, что параметры страницы управляются групповая политика. |
| Стекло используйте стратегически, чтобы уменьшить визуальный вес окна.  | Стекло может уменьшить вес поверхности, фокусируясь на содержимом, а не на самом окне. В этом примере стекло фокусирует внимание пользователя на содержимом, а не на элементах управления. |
| Агрегаторы используется для создания визуальной связи между строго связанными элементами управления. | в этом примере фон агрегатора используется для выделения связи между кнопками назад и вперед в обозревателе. В этом примере агрегатор границ используется для подчеркивания связи между элементами управления и делает их похожими на единый элемент управления вместо восьми. |
| Разделители используется для разделения слабо связанных или несвязанных элементов управления. | Разделители могут быть интерактивными или неинтерактивными. интерактивные разделители между изменяемыми размерами содержимого называются разделителями. в этом примере интерактивный разделитель используется для изменяемого содержимого.  В этом примере разделитель не является интерактивным. |
| Тени используется для визуального выделяния содержимого на фоне. | В этом примере тени выделяются рисунками на фоне. |
| Маркеры используется для указания, что объект можно переместить или изменить размер. | Маркеры всегда являются интерактивными, и их поведение предлагается указателем мыши на наведении указателя мыши. В этих примерах дескрипторы указывают, что объект можно изменить. |
Рекомендации
Общее
- Не передавайте важную информацию только через графические элементы. Это приводит к проблемам со специальными возможностями для пользователей с нарушениями зрения или нарушениями.
Графические макеты
Графика наиболее эффективна, когда они укрепляют одну простую идею. Сложная графика, требующая мысли о том, что интерпретация не работает хорошо.
Хиероглифы лучше всего оставить для пещерных рисунков.Неправильно:
В этом примере сложный рисунок из Windows XP неэффективно пытается объяснить сложное решение о доверии.
Не используйте стрелки, шевроны, рамки кнопок или другие возможности, связанные с интерактивными элементами управления. Это позволяет пользователям взаимодействовать с графикой.
Избегайте полос чистой красной, желтой и зеленой в ваших конструкциях. Чтобы избежать путаницы, зарезервировать эти цвета для обмена данными о состоянии. Если вы должны использовать эти цвета для чего-то, кроме состояния, используйте отключаемые тона вместо чистых цветов.
Используйте культурные нейтральные конструкции. То, что может иметь определенное значение в одной стране, регионе или культуре, может не иметь того же значения в другой.
Избегайте использования людей, лиц, полов или частей тела, а также религиозных, политических и национальных символов.
Такие изображения могут не легко переводить или быть оскорбительными.Когда необходимо представлять пользователей или пользователей, их можно представить в общем виде; избегайте реалистичных изображений.
Хиероглифы лучше всего оставить для пещерных рисунков.
Такие изображения могут не легко переводить или быть оскорбительными.Чтобы подчеркнуть содержимое, используйте темный текст на светлом фоне. Черный текст на светло-сером или желтом фоне хорошо работает.
В этом примере ссылка получает внимание пользователя, так как она находится на желтом фоне.
Для отмены выделения содержимого используйте светлый текст на темном фоне. Белый текст на темно-сером или синем фоне хорошо работает.
В этом примере темный фон отменяет акцент на содержимом.
Если используется градиент, убедитесь, что цвет текста имеет хорошую контрастность по всему градиенту.
Всегда используйте значок пикселя 16×16, чтобы привлечь внимание к баннеру.
Баннеры слишком легко упускать из виду в противном случае. Дополнительные рекомендации и примеры см. в разделе «Стандартные значки».Используйте фон и баннеры с осторожностью. Хотя цель фона или баннера может быть подчеркнуть содержание, довольно часто результаты являются противоположными явлением, известным как «баннер слепоты».
Баннеры слишком легко упускать из виду в противном случае. Дополнительные рекомендации и примеры см. в разделе «Стандартные значки».Стекло
- Рассмотрите возможность использования стекла стратегически в небольших регионах, касающихся рамки окна без текста. Это может дать программе более простой, легкий, более сплоченный вид, делая регион, как представляется, частью кадра.
- Не используйте стекло в ситуациях, когда обычный фон окна будет более привлекательным или проще использовать.
Разделители
- Используйте вертикальные и горизонтальные линии для разделителей. Убедитесь, что между разделителями и разделителями должно быть достаточно места.
- Для разделителей между изменяемым содержимым (разделителями) отображается указатель на изменение размера при наведении указателя мыши.
В этих примерах указатели изменения размера отображаются при наведении указателя мыши.
Тени
- Используйте только для того, чтобы наиболее значительное содержимое или объекты вашей программы были выделяться визуально на фоне. Рассмотрим тени, чтобы быть визуальным беспорядок в других обстоятельствах.
Поддержка высокой точек на дюйм
- Поддержка 96 и 120 точек на дюйм (dpi) режимов видео. Обнаружение режима dpi при запуске и обработка событий изменения точек на дюйм. Windows оптимизирован для 96 и 120 точек на дюйм и по умолчанию использует 96 точек на дюйм.
- Предпочитать предоставлять отдельные растровые рисунки, отображаемые специально для 96 и 120 точек на дюйм над масштабированием графики. По крайней мере укажите версии 96 и 120 точек на дюйм для наиболее важных, видимых растровых изображений, а также центра или масштабирования других. Такие приложения считаются «высоко dpi aware» и обеспечивают лучший общий визуальный интерфейс, чем программы, которые автоматически масштабируются Windows.
- Разработчики: вы можете объявить высокодипликационный (и предотвратить автоматическое масштабирование) установки флага с поддержкой dpi в манифесте программы или путем вызова API SetProcessDPIAware() во время инициализации программы. Макросы можно использовать для упрощения выбора правильной графики. Для растровых изображений Win32 для масштабирования можно использовать SS_CENTERIMAGE для центра или SS_REALSIZECONTROL.
- Проверьте свою программу в 96 и 120 точек на дюйм для:
- Слишком малая или слишком большая графика.
- Графики обрезаются, перекрываются или не подходят должным образом.
- Графики, которые плохо растягиваются («pixilated»).
- Текст, обрезанный или не соответствующий графическим фонам.
Такие приложения считаются «высоко dpi aware» и обеспечивают лучший общий визуальный интерфейс, чем программы, которые автоматически масштабируются Windows.текст
- Для специальных возможностей и локализации не используйте текст в графике. Создавать исключения только для представления фирменной символики и текста в качестве абстрактной концепции.
Создавать исключения только для представления фирменной символики и текста в качестве абстрактной концепции.Vector & Layered Graphics — Envato Elements
Refine by
Refine by
Trending:
- happy easter
Popular:
- background
- logo
- pattern
- abstract
- 3d
Сортировать по ПопулярныеНовые
Симпатичная девочка с пасхальными кроликами и пасхальными яйцами.
Автор: masastarus
Добавить в коллекцию
Скачать
Flat Creative Workspace Tools
от Vuuuds
Add to Collection
Скачать
Животные векторные иллюстрация
от Danjazza
Add Collection
Скачать
HIELWWARY В hall
HIELWWAYD
.
Добавить в коллекцию
Скачать
50 Абстрактный фон сетки
By micromove
Добавить в коллекцию
Скачать
Old Movie Title — Text Effect n° 3 of 6
By ShinyPixel
Add to collection
Download
Geometric Waves Collection
By codetoform
Add to collection
Download
Cute Winter Kitten
By shymoff
Добавить в коллекцию
Скачать
Люди, мужчины и женщины, в разных позах для чтения
By BoykoPictures
Add to collection
Download
Awesome Cyber Security Icons
By CkyBe
Add to collection
Download
100 Snow Overlays
By M-e-f
Add to collection
Download
Voronoi Diagram Vector Backgrounds
By Vackground
Добавить в коллекцию
Скачать
Retro Kitchen
By iatsun
Add to Collection
Скачать
Лондон — Бесполезное баннер
от Frimages
Добавить в коллекцию
Скачать
80 Map & Navigation Icons
By Krafted
Add Collection
9
Doadly
By Krafted
.
80s Cd Cover Artwork
By Sko4
Добавить в коллекцию
Download
Portrait of a Devil Boy
By ddraw
Add to collection
Download
Sweet Valentine Banners
By barsrsind
Add to collection
Download
Education Icons Set 1- Flat Series
By introwiz1
Add to collection
Download
Джентльмены-байкеры
By Blankids
Добавить в коллекцию
Скачать
Зимний город Городской зимний пейзаж
By Faber14
Add to collection
Download
20 Valentine Line Multicolor Icons
By IconBunny
Add to collection
Download
Winter Holiday Characters
By moonery
Add to collection
Скачать
Burger Food Elements
By BarcelonaDesignShop
Добавить в коллекцию
Скачать
Паттерны камуфляжа Установки
от Mastaka
Добавить в коллекцию
Скачать
Дети, играющие — Векторная иллюстрация
от AQRSTUDIO
Добавить в коллекцию
Скачать
Рождественские Doodles.
Vector, PNG, SVGАвтор helga_helga
Добавить в коллекцию
Скачать
80 Banners — Shop Edition
Автор WebDonut
Добавить в коллекцию
Download
Vintage Motorcycle Silhouettes
By adrianpelletier
Add to collection
Download
Isometric Map Icons
By designhatti
Add to collection
Download
20 Facebook Post Banners — Здоровое питание
Автор Wutip
Добавить в коллекцию
Скачать
Винтажные текстуры песка
Автор ghostlypixels
Добавить в коллекцию
Скачать
Солнечный мраморная текстура Vol.
1от Digital_infusion
Добавить в коллекцию
Скачать
20 Дизайн и ремесленные значки
by mir_design
Add add to Collect Скачать
Набор из 13 фонов из старой бумаги
Автор: AnnaIvanir
Добавить в коллекцию
Скачать
Органические узоры — 2 цветовые палитры
By Youandigraphics
Add to collection
Download
FOOTBALL
By Olexstudio
Add to collection
Download
Graphic Design Line Icons
By iconsoul
Add to collection
Download
Vintage Paper Textures Volume 1
By MJGDesigns
Добавить в коллекцию
Скачать
Комплект «Весна и вороны»
от Mikibith
Add to Collection
Скачать
7 Ночной лесной игры.
коллекцияСкачать
Акварельный Амазон Клипарт
Автор: a_slowik
Добавить в коллекцию
Скачать
набор декоративных домашних растений
от Artness
Add to Collection
Скачать
57 Знаки веб -разработки и мобильные разработки
от Polshindanil
Добавить в коллекцию
Скачать
Farm Table Vect Том 1
Автор: DesignPanoply
Добавить в коллекцию
Скачать
Тропические листья в векторе, акварель
Автор: designloverstudio
Добавить в коллекцию
Скачать
Акварельные бесшовные узоры.
Наборот Switzergirl
Добавить в коллекцию
Скачать
Vector, PNG, SVG
1
коллекция
НаборFelefure Hygrics
Вы хотя бы посмотрели на, казалось бы, простую конструкцию и подумали: Я вполне мог бы это сделать.
Но позже, когда вы садитесь, чтобы попробовать, вы не понимаете, почему ваша попытка не соответствует профессиональной версии. Что дает?
Оказывается, у профессиональных графических дизайнеров есть несколько трюков в рукаве, чтобы их работа выглядела, ну, профессионально . Несмотря на все потрясающие бесплатные инструменты, доступные в наши дни начинающим графическим дизайнерам, любители, как правило, не обладают базовыми знаниями, необходимыми для создания стабильно выглядящих дизайнов.
Чтобы помочь вам, мы составили список из семи основных элементов графического дизайна. Это ни в коем случае не степень графического дизайна, но базовое понимание этих семи основных элементов может повысить ваши навыки создания контента и улучшить вашу способность сообщать о своих предпочтениях в дизайне, если вы когда-нибудь решите нанять профессионала.
Мы подробно рассмотрим семь элементов, приведенных ниже, и расскажем, что они из себя представляют, почему вас это должно волновать и как использовать их для создания более профессионально выглядящих проектов, даже если вы работаете с нулевым бюджетом.
1) Цвет
Сэру Исааку Ньютону широко приписывают создание самого первого цветового круга еще в 1706 году. Как гласит история, Ньютон взял спектр цветов, возникающих при прохождении света через призму (красный, оранжевый, желтый, зеленый). , синий, индиго и фиолетовый) и расположили их в виде сегментированного круга. Когда круг быстро вращался на вращающемся диске, цвета сливались вместе, и человеческому глазу они казались совершенно белыми.
Ниже вы можете получить представление о том, как, вероятно, появилось цветовое колесо Ньютона. Эта версия 1708 года была проиллюстрирована французским художником Клодом Буте и ссылается на исследования теории цвета Ньютона.
Система визуальной категоризации цвета Ньютона была принята и расширена учеными, художниками и философами на протяжении многих лет, что в конечном итоге привело к современному цветовому кругу, который мы все знаем сегодня.
Современный цветовой круг состоит из трех основных цветов — красного, желтого и синего — которые теоретически можно смешивать в различных соотношениях для получения вторичных и промежуточных цветов. Хотя современные исследования говорят нам, что теория цвета на самом деле немного сложнее, цветовой круг по-прежнему является ценным инструментом для графических дизайнеров, ищущих эстетически приятные цветовые комбинации.
При выборе оттенков для проекта рассмотрите цвета, которые расположены непосредственно друг напротив друга или рядом друг с другом на цветовом круге — они, как правило, создают наиболее приятные сочетания. Вы также можете использовать бесплатный онлайн-инструмент для составления схемы цветов, например ColorSchemer, который сделает всю работу за вас.
Изображение предоставлено: Lifehacker
Цвет в действии:
Этот пример от ∆ Studio–JQ ∆ — отличный пример использования дополнительных цветов в действии. Фиолетовый и желтый, которые на современном цветовом круге кажутся прямо противоположными, в сочетании друг с другом создают смелый и визуально привлекательный эффект.
Изображение предоставлено: ∆ Studio–JQ ∆
2) Линия
Линии — это больше, чем просто разделители — правильные линии могут передать движение и эмоции, связав вашу композицию воедино и придав ей безупречный и профессиональный вид.
Рикард Родин, графический дизайнер и блогер с более чем 15-летним опытом работы в области дизайна, объясняет, что линии могут формировать основную архитектуру вашего проекта. Определение линии движения в вашей композиции до начала работы может помочь вам создать дизайн, который достигнет желаемого настроения.
«Вы можете использовать линии настроения практически в каждом элементе вашего дизайна», — пишет Роден в своем блоге. «Или вы можете сопоставить разные линии настроения в разных частях вашего дизайна, чтобы создать более многослойный дизайн. Возьмем, например, линию настроения «СТАБИЛЬНАЯ». Вы можете использовать ее при создании своего макета. Вы можете использовать ее в своей фотографии. И вы можете использовать его при выборе шрифта».
Линии настроения не обязательно должны быть видны в вашей окончательной композиции — они могут просто служить ориентиром, определяя структуру и направление вашей работы. Конечно, линия также может быть заметно включена в ваш окончательный дизайн.
Изображение предоставлено: ZevenDesign
Линия в действии:
Дизайнер Александр Кольцов и сотрудники Shuka Design создали этот потрясающий визуальный образ для чемпионата мира по шахматам 2016 года в Нью-Йорке. Команда использовала целенаправленные, но асимметричные завихрения перекрывающихся линий, чтобы представить «мыслительный процесс шахматиста».
Масштаб — это не совсем то же самое, что размера (хотя многие люди склонны неправильно использовать их как взаимозаменяемые при обсуждении дизайна, т.
е. «Сделайте логотип больше!»). Размер относится к абсолютному размеру (например, лист бумаги 8 дюймов на 11 дюймов), а масштаб относится к прямой связи между элементами в дизайне (например, круг в два раза больше квадрата).
Вы можете использовать масштаб для создания визуальной иерархии для вашего дизайна. Когда элемент отображается в относительно большем масштабе , чем другие элементы в композиции, наши глаза естественным образом притягиваются к нему.
Масштаб в действии:
Чтобы создать ощущение драмы и важности, графический дизайнер из Нью-Йорка Аурелио Санчес Эскудеро использует высококонтрастную шкалу между элементами в этих рекламных материалах для Недели социальных инноваций в Сан-Франциско.
Изображение предоставлено: Аурелио Санчес Эскудеро
4) Форма
Формы: они не только для дошкольников! Форма может быть приблизительно объяснена как что-либо, определяемое границами. Есть две категории фигур, которые следует учитывать:
Геометрические формы , которые определяются идеальными однородными пропорциями (например, круг, квадрат, треугольник), и органические формы , которые имеют менее четкие края, плавные пропорции и практически не имеют правил ( такие как волнистые, похожие на капли вещи, которые не вписываются ни в одну реальную категорию).
Изображение через: Creative Market
При работе над дизайном рассмотрите обе формы, которые вы намеренно включаете (положительные формы), и формы, естественно сформированные вокруг этих фигур (негативные формы).
Изображение предоставлено The International Business Times
Пожалуй, самый известный пример, иллюстрирующий различие позитивных и негативных форм, – это ваза Рубина. Разработанная в 1915 году датским психологом Эдгаром Рубином, эта теперь вездесущая оптическая иллюзия показывает два совершенно разных изображения при просмотре негативных форм и при просмотре позитивных форм.
Узнайте больше о том, как наш мозг воспринимает формы и понимает дизайн, из видео ниже:
Форма в действии:
Скромный круг всегда был популярным и надежным способом отображения информации в четкой, единой композиции.
Компания Made Somewhere из Сиднея разработала этот простой современный логотип для блога Hidden Gems of Sydney, посвященного местным достопримечательностям.
Изображение предоставлено: Где-то сделано
5) Выравнивание
Думайте о выравнивании как о невидимой оси, которая проходит между элементами, визуально соединяя их либо по краям, либо по центрам (см. изображение ниже).
Выравнивание чаще всего возникает при обсуждении дизайна текста и типографики, но не менее важно учитывать выравнивание нетекстовых элементов при создании сбалансированной, упорядоченной композиции.
Изображение предоставлено: Strohacker Studio
В приведенном выше примере показано равномерное выравнивание по краям и центру, но это не означает, что все элементы в вашей композиции всегда должны следовать единому шаблону выравнивания. На изображении ниже видно, что элементы выровнены по краям, но не объединены одной осью.
Изображение предоставлено: Palomar College
Согласование в действии:
Издательство Oscar Riera Ojeda разработало эту минималистическую обложку для книги Chasing the Sky , посвященной карьере влиятельных женщин-архитекторов. Типографика заголовка выровнена вокруг геометрической формы.
Изображение предоставлено: Oscar Riera Ojeda Publishers
6) Контраст
Контраст относится к сопоставлению элементов, которые сильно различаются (большие и маленькие, светлые и темные и т. д.), чтобы создать визуальный интерес или привлечь внимание к отдельным элементам.
Без контраста наши дизайны не только тусклы и скучны на вид, но и трудны для понимания. Недостаток контраста часто отличает посредственную дизайнерскую работу от проектов, которые выглядят профессиональными, отполированными и четкими.
Возьмем, к примеру, изображения ниже — на картинке слева нет достаточного контраста между фоновой фотографией человека, работающего за столом, и белым текстом.
Это не так легко для глаз, и сообщение трудно понять. На изображении справа фон затемнен, чтобы создать больше контраста, что облегчает чтение текста.
Контраст в действии:
Команда toormix из Барселоны умело играет с различными контрастами в дизайне этого плаката для Barcelona Design Week 2016.
Изображение предоставлено toormix именно то, на что это похоже: пустые области между элементами вашего дизайна. Когда дело доходит до самостоятельного создания профессионально выглядящих проектов, иногда то, что вы не включаете , так же важно, как и то, что вы делаете.
При работе над дизайном учитывайте не только элементы, которые вы включаете (например, изображения и текст), но и то, как они расположены и сгруппированы в композиции. Может показаться заманчивым заполнить чем-то каждый дюйм вашего цифрового холста, но постарайтесь дать элементам немного места для дыхания.
В приведенном ниже примере вы можете увидеть, как изменение пространства и группировка элементов создают совершенно другое ощущение в композиции.