3 типичные ошибки в флэт-иллюстрации | by Саша Окунев | /designer

И как их исправить.

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

Мэд учит иллюстрации. В этой статье он рассказывает о самых частых косяках, которые видел у своих студентов.

Достаточно было добавить еле-заметную тень

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

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

Плоские тени — основной способ показать форму иллюстрации в флэте. Вот два объекта:

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

В рисунке А нижняя поверхность плоская. В Б тень падает на цилиндр. Посмотри на реальный объект. Тень ведёт себя так же:

Источник: Starbucks

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

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

Вывод:

Задача флэт-иллюстратора не игнорировать объем, а стилизовать его.

Упрощать так, чтобы подчеркнуть форму предмета, не меняя её.

Ссылки по теме

• Николай Ли — Основы академического рисунка (Озон, 700 р.)
• Основы объёмного рисования в Photoshop. Большой часовой урок, из которого можно узнать, как правильно работать с тенями.
• academic drawing simple shape на Пинтересте

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

На разборе одной из работ Мэд назвал ракурс в анфас в честь ученицы:

Флэт-иллюстрация совершенно не отменяет того что можно использовать интересную перспективу. Классический вариант — это изометрия.

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

Unsplash

Вот два рисунка чашки:

Первое, что мы определяем — источник света. В данном случае он слева.

На рисунке А объем недостаточно проработан: высота кружки и положение рукоятки находятся на одном уровне и сливаются в одну форму. Однако, рукоятка должна быть дальше от зрителя, чем край кружки. Значит, на неё должна падать тень.

Исправляем ошибку на рисунке Б. Стало лучше, но пока всё-ещё скучно. Что если добавить блюдце?

Форма стала более узнаваемой, а иллюстрация глубже, её стало интереснее разглядывать.

Хороший приём:

Клади объекты друг на друга.

Мэд активно применяет его в своих иллюстрациях:

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

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

Для них покрасить объект — это неприятная необходимая процедура. Причина провала в том, что нет понимания, как смешивать цвета.

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

Что делать:

Смешивай исходный цвет с его комплиментарным аналогом.

Чтобы найти комплиментарный, воспользуйся цветовым кругом Йоханнеса Иттена:

Цветовой круг подсказывает комбинации цветов. Комплиментарные цвета — один из способов создавать приятную глазу палитру. Главное, чтобы комплиментарного цвета было совсем чуть-чуть. Подробнее про цвета — в ролике Beginning Graphic Design: Color.

Курсы Мэд Рэбита. Подробнее:

Центр подготовки графических дизайнеров и иллюстраторов

Объявляет набор в свои ряды.

designpub.ru

Я веду /designer — телеграм-канал о Скетче и дизайне интерфейсов. В нём я рассказываю о горячих клавишах, плагинах, прототипах, дизайн-системах и UI-анимации.

5 основных принципов / Все о дизайне / Pollskill

Надежда Лёвкина

· 09 апр. 2017
·

45.2K

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

http://bewilder.tv/

Знакомство с flat дизайном

На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.

https://dribbble.com/rikitanone

Хочется отметить, что «плоско» — не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия». Они, наконец, делают контент понятным. Осталось узнать основные принципы, чтобы применять их на практике.

• Принцип №1: долой ненужные эффекты

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

https://dribbble.com/dylanopet

• Принцип №2: чем проще, тем лучше

Рекомендуется использование односложных фигур в дизайне, как и следить за четкостью контуров, что призвано подчеркнуть легкость и невесомость. Кроме того, такие лаконичные элементы хорошо имитируют сенсор, порождая желание к взаимодействию с объектом (призыв к нажатию, прикосновению). Впрочем, простота элементов не равна простоте дизайна в целом — это относится только к очертаниям. В результате, все, что видит пользователь, ему понятно, и он может с легкостью этим пользоваться.

• Принцип №3: типографика и ее важность

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

http://www.tvlcorp.com/

• Принцип №4: цветовые акценты

Не только шрифт, но и цвет —существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.

https://dribbble.com/fffabs

• Принцип №5: выбор в пользу минимализма

Flat дизайн — это яркий пример такого всемирного тренда, как минимализм. Дизайнеры отказываются от излишних «наворотов», уходят от сложных и неявных подходов к визуализации, что дает свои плоды в виде пользовательской активности.

http://www.flatvsrealism.com/

Плоский или почти плоский? Ищем компромисс!

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

Также трендом 2017 года стал Semi Flat Design — полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.

https://www.behance.net/gallery/45942097/Resourse-UIUX-Tool-for-Web-Services

Интересные материалы

Вход через социальные сети:

ВКонтакте

Yandex

Регистрация Забыли пароль?

Забыли пароль

Имя пользователя

Или Электронная почта

Вход Регистрация

Язык дизайна IBM — плоский стиль

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

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

Комплект плоского стиля (.ai)

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

Два квадрата и два круга для глаз.

Два круга и один квадрат, чтобы сделать сердце.

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

Построение на базе 2x Grid,
базовая сетка для плоского стиля была установлена ​​​​на 8 пикселей, а не 4 пикселя для
сетка в стиле линии. Этот метод гарантирует, что ваш минимальный размер формы и
интервал составляет не менее 8 пикселей, а также поможет убедиться, что ваши иллюстрации
не становитесь слишком многолюдными и занятыми.

Плоские иллюстрации должны создаваться с использованием функции «привязка к сетке».
в Adobe Illustrator. Этот параметр гарантирует, что точки на вашем чертеже
может привязываться к линиям сетки под вашими линиями. Позиционирование сетки
линия придает точную и продуманную эстетику, которая жизненно важна для любого IBM
иллюстрация.

Убедитесь, что точка привязки четко приземляется на пересекающиеся линии сетки.

Не забудьте использовать «привязку к сетке», иначе это может привести к смещению опорных точек.

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

Используйте четко расположенные фигуры с интервалом не менее 8 пикселей.

Не используйте случайно расположенные фигуры с расстоянием между ними менее 8 пикселей.

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

Пожалуйста, используйте стандартные углы — предпочтительнее 15°, 30°, 45°, 60°, 75° и 90°. С использованием
эти стандартные углы помогут вашим иллюстрациям выглядеть последовательными. Хотя
вы можете использовать любой угол, мы рекомендуем придерживаться предложенных стандартных углов
здесь.

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

По возможности используйте четкие и правильные кривые.

Не используйте кривые неправильной формы, если их можно избежать.

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

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

Вложенные линии этой кривой должны оставаться на одинаковом расстоянии друг от друга с увеличением радиуса.

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

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

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

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

Руководство для начинающих по плоскому дизайну

(Изображение предоставлено корпорацией Burger King)

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

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

Windows 8 была в авангарде тенденции плоского дизайна.

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

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

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

Минималистичность не означает скучность

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

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

У плоского дизайна определенно есть шанс — не зашло ли это слишком далеко? (Изображение предоставлено Тобиасом ван Шнайдером)

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

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

На приведенных выше значках показаны лишь некоторые из значков, которые будут использоваться в 2021 году, включая прошлогодний неоднозначный ребрендинг значков Google. Опасность здесь заключается в том, что, поскольку все они следуют тенденции плоского дизайна и используют яркие цвета для улучшения своих дизайнов, они становятся почти слишком похожими (как мы исследовали в этой статье). Это просто показывает, что существует тонкая грань между следованием таким тенденциям, как плоский дизайн, и тем, чтобы выделиться из толпы.

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

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

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

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

Цвета и значки помогают прояснить смысл с минимальным текстом

Этот дизайн приложения для планирования поездки (открывается в новой вкладке) от индонезийского дизайнера пользовательского интерфейса Бади (открывается в новой вкладке) делает его чрезвычайно легко забронировать рейс на основе пакетов и бюджетов. Все четко и понятно, а дизайн в основном опирается на цвета и значки, чтобы придать смысл. Копия краткая, а аспект пользовательского интерфейса поиска идеального полета очевиден.

Веб-сайт Burger King соответствует своему недавнему ребрендингу (Изображение предоставлено Burger King)

Burger King провел ребрендинг в начале 2021 года и получил широкое признание, а его новый логотип представляет собой мастер-класс плоского дизайна. Его веб-сайт (открывается в новой вкладке) был переработан, чтобы соответствовать ему, и использует простые иллюстрации и значки, чтобы направлять пользователей по сайту. Приложение также использует аналогичный упрощенный подход.

Плоский дизайн не зависит от ярких цветов

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

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

Статьи по теме:

• Новый логотип Nissan присоединяется к вечеринке в области плоского дизайна
• Где найти вдохновение для создания логотипов
• Лучшее платное и бесплатное программное обеспечение для создания логотипов

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

Подпишитесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!

Свяжитесь со мной, чтобы сообщить о новостях и предложениях от других брендов Future.