19 примеров использования иллюстраций в веб-дизайне


Содержание

16 лучших примеров дизайна главной страницы сайта

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

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

Что делает хороший дизайн главной страницы сайта

1) Дизайн главной страницы четко отвечает на вопрос «Кто я?», «Что я предлагаю?» и/или «Что пользователь может сделать здесь?»

Если вы представляете хорошо известный бренд ( например, Coca-Cola ), вам может сойти с рук отсутствие описания того, кто вы и что вы делаете. Но большинство компаний должны отвечать на эти вопросы, так чтобы каждый посетитель знал, что он находится в « нужном месте ». Если пользователи в течение нескольких секунд не смогут понять, что вы делаете, долго они не задержаться.

2) Резонанс с целевой аудиторией

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

3) Сообщение о ценном предложении

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

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

5) Включает в себя призыв к действию (СТА-элемент)

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

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

6) Постоянно изменяется

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

7) Использует отличный общий дизайн

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

Вдохновляющий веб-дизайн: 16 лучших дизайнов главной страницы

1) FreshBooks

Этот дизайн гениален, потому что:

  • Прост в использовании. Возникает много споров о том, какие домашние страницы лучше — короткие или длинные. Если вы выберете последний вариант, то должны обеспечить легкое прокручивание и чтение. Эта страница выглядит практически как история;
  • Удачно использовано сочетание цветов и позиционирование первичных СТА-элементов . Когда заходите на главную страницу сразу становится понятно, что компания хочет привлечь ваше внимание;
  • Очень заманчивый текст на СТА-элементе : « Попробуйте бесплатно в течение 30 дней »;
  • Эффектный подзаголовок: « Для более чем 5 миллионов людей, использующих FreshBooks , отправлять счета и следить за расходами теперь не проблема ». Это заявление привлекательно для целевой аудитории, потому что освоение бухгалтерского программного обеспечения, как правило, « мучительно сложно » для фрилансеров и владельцев малого бизнеса.

2) Airbnb

  • Это оформление главной страницы сайта пример впечатляет: она встречает посетителей полноэкранным видео с красивыми кадрами, высокого разрешения. Она рассказывает о путешественниках, которые проводят время, как будто они местные жители: готовят пищу на кухне, покупают местные сыры. Выглядит очень естественно и достоверно;
  • Прямо по центру главной страницы располагается форма поиска с местом назначения и датой прибытия/отбытия, которую ищет большинство посетителей, направляя пользователей к следующему логическому шагу;
  • Форма поиска « умная «: она автоматически отобразит последний поиск пользователя, если тот авторизован;
  • Основной призыв к действию (« Поиск «) контрастирует с фоном и выделяется, а вторичный призыв к действию виден в верней части.

3) Mint

  • Это супер простой дизайн с сильным заголовком и подзаголовком без сленга;
  • Домашняя страница обеспечивает безопасную, но спокойную атмосферу, что очень важно для продукта, который обрабатывает финансовую информацию;
  • Он также содержит простой и убедительный призыв к действию: « Зарегистрируйтесь бесплатно «. Дизайн CTA также замечателен — иконка в виде замочка попадает точно в цель, сообщая о безопасности еще раз.

4) Dropbox(Consumer)

  • Главная страница сайта Dropbox — пример предельной простоты. Ограничено использование рекламы и видеороликов, а также объединено все фоновое пространство;
  • По статическому скриншоту выше трудно понять, но этот оформления сайтов вариант привлекает внимание тонким использованием причудливой анимации в графике;
  • Подзаголовок — простой, но мощный: « Открывайте свои файлы где угодно и на любых устройствах, и без труда предоставляйте к ним доступ ». Не нужно расшифровывать какую-либо терминологию, чтобы понять, что делает Dropbox ;
  • Акцент на одном первичном призыве к действию: « Зарегистрируйтесь бесплатно «.

5) Dropbox(Business)

  • Это яркий пример обеспечения поддержки сайта для разной аудитории. Она отличается от главной страницы, которая изначально была создана для потребителя ( смотрите выше ). Бизнес-пользователи требуют больше информации, а также дополнительное подтверждение того, что Dropbox(Business) — безопасное и масштабируемое решение для компаний ( проблему восприятия Dropbox решает непосредственно на своей домашней странице );
  • Dropbox по-прежнему продолжает применять простой дизайн и брендинг. Он включает в себя только то, что важно: большое изображение с поддержкой рекламы и кнопку « Попробуй бесплатную 30-дневную ознакомительную версию «, призывающую к действию.

6) Whitehouse.gov

  • Создание сайта, который выступает за целую нацию — задача не из легких. Whitehouse.gov постоянно меняется, чтобы отразить главные проблемы и приоритеты. Тестирование и оптимизация — ключевой компонент блестящего дизайна домашней страницы;
  • Что особенно замечательно в Whitehouse.gov так это отличие от большинства сайтов, связанных c правительством. Он имеет чистый дизайн и способствует развитию сообщества;
  • Довольно легко найти то, что вы ищете, когда оказываетесь здесь. А если вы не можете сразу найти то, что нужно, есть удобное поле поиска.

7) 4 Rivers Smokehouse

  • В сочетании с большой картинкой для оформления сайта заголовок « ГРУДИНКА. 18 лет мастерства. Для вашего удовольствия » звучит заманчиво;
  • Прокрутка параллакса проведет для вас краткую презентацию услуг, меню и покажет людей, прекрасно проводящих время – прекрасное использование популярного дизайнерского тренда.

8) Cobb Pediatric Therapy Services

  • Заголовок и подзаголовок обращаются к эмоциональной стороне посетителей: « Работайте с компанией. Это стоит того. Доверьтесь нам. Мы были там тоже. Мы найдем вам работу там, где вы сможете полностью проявить себя » Это предложение является уникальным и убедительным;
  • Заголовок находится на вращающейся карусели, которая учитывает категорию посетителей, от соискателей до людей, ищущих психотерапевта для своих школ;
  • Есть несколько путей для посетителей, по которым можно пройти на страницу. Но призы к действию расположены хорошо, сформулированы просто и контрастируют с остальной частью страницы.

9) Jill Konrath

  • Дизайн простой и переходит прямо к делу. Из заголовка и подзаголовка сразу понятно, чем занимается Джилл Конрэт ( и как она может помочь вашему бизнесу );
  • Также предоставляется легкий доступ к аналитическим материалам Джил , что важно для установления ее авторитета в качестве основного докладчика;
  • Легко подписаться на рассылку новостей и установить контакт – два ее основных призыва к действию;
  • Включает в себя логотипы новостных каналов и отзывы, как социальное признание – все правила оформления сайта соблюдены.

10) Evernote

  • За эти годы Evernote превратился из простого приложения, сохраняющего записи в набор инструментов для бизнеса. Это не всегда легко передать на домашней странице, но Evernote проделал хорошую работу по компоновке возможных сообщений в несколько ключевых преимуществ;
  • Эта домашняя страница использует сочетание насыщенных, приглушенных цветов в видео, а также подписи ярко-зеленого и белого цвета, чтобы выделить их на общем фоне;
  • После простого заголовка (« Помни все »), взгляд останавливается на призыве к действию « Зарегистрируйтесь Бесплатно ».

11) Telerik by Progress

  • « Скучное предприятие » — это не то чувство, которое возникнет, когда вы зайдете на сайт Telerik . Компания предлагает множество технологий и продуктов, использует смелые цвета, интересные дизайны и видеосъемку с энергетикой подобно Google . Одним из важных аспектов является создание обстановки, чтобы посетители чувствовали себя желанными и знали, что имеют дело с реальными людьми;
  • Мне нравится простой, выполненный на высоком уровне обзор шести товарных предложений. Это абсолютно понятный способ сообщить о том, что делает компания;
  • Реклама несерьезная и легко читается. Они говорят на языке своих клиентов.

12) Boxbee

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

13) eWedding

  • Для влюбленных, планирующих важный день, eWedding – прекрасное место для создания свадебного сайта. Домашняя страница не загромождена и включает в себя только необходимые элементы;
  • Подзаголовок « Создано более чем 800,000 свадебных сайтов! » — это большое социальное доказательство;
  • Включает в себя отличные видеоролики продукта, отличный заголовок и убедительный призыв к действию, который уменьшает сомнения благодаря тексту: « Создайте сайт ».

14) Basecamp

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

15) charity: water

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

16) TechValidate

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

Данная публикация представляет собой перевод статьи « 16 of the Best Website Homepage Design Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

65 Трендов Веб-дизайна в 2020 году. Топовые советы от профи

Привет. На связи Чигарев Илья. Данная подборка трендов веб-дизайна 2020 собрана из 4-х материалов с сайта Behance. Это посты, которые набирают наибольшую популярность и положительные отзывы среди комьюнити дизайнеров. Итак, давайте посмотрим какие тренды выделяют топовые дизайнеры со всего мира.

Безлимитная графика для ваших проектов

Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.

Главные тренды веб-дизайна в 2020 году

1. Смелые, яркие цвета

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

Проект: Show Go Poster Collection 2020 / Автор: ∆ Studio—JQ ∆

Проект: Daily Posters / Автор: Magdiel Lopez

2. Яркие и насыщенные градиенты

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

Проект: Magic.co / Автор: Ludmila Schevenko

Проект: Electric Objects / Автор: Rose Pilkington

Проект: Gradient Studies / Автор: Evgeniya Righini-Brand

3. Цвет года (Пантон)

PANTONE® 16-1546 Живой коралл (Living Coral)

Проект: Pantone Color of the Year 2020 | Living Coral / Автор: ∆ Studio—JQ ∆

4. Простота и удобство

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

Проект: Creative case / Автор: Nikita Mahaev

Проект: A propos du cancer / Автор: Extra

5. Больше дизайна с дополненной реальностью

Быстрый рост популярности дополненной реальности, или AR, будет заметен не только в индустрии игр, видео и приложений. У AR хорошие шансы охватить область дизайна, особенно за счет популярности мобильных устройств. Вероятным идейным вдохновителем могут стать DIA Studio, применяющие 3D типографику к повседневным объектам.

Проект: DIA / Автор: DIA

6. Экстра глубина (и полуплоский дизайн)

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

Проект: Nike Promotion Ads — Parallax Effect / Автор: Jardson Almeida

Проект: Flyknit Lunar 3 / Автор: Callum Notman

Проект: Made You Look�� 255 | Live a little more / Автор: STUDIOJQ

7. Геометрические элементы

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

Проект: Nike Le Quartier / Автор: Atelier Irradié

Проект: France Colombia cultural season Brand design / Автор: Graphéine

8. Больше творческой фотографии

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

Проект: Aizone / Автор: Sagmeister&Walsh

Проект: Monkifesto / Автор: Snask

Проект: Nike AMD Revolution / Автор: Happy Finish

9. Дуплекс

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

Проект: Stranger Things Concept UI UX Design Web / Автор: Manuel Rovira

10. Брутализм

Брутализм — грубая концепция, рассчитанная на захват внимания. Брутализм применяется в дизайне с 50-х годов прошлого века, в основном для оформления плакатов и афиш (направление возникло в архитектуре 40-х и стало трендом). Концепция снова востребована, ее можно встретить во всех сферах дизайна. Направление призвано шокировать аудиторию прямолинейным подходом, громоздкой типографикой и неизящными дизайнерскими техниками.

Проект: DoD Cyber Guide / Автор: Marçal Prats

Проект: Power A political party / Автор: Bruce Vansteenwinkel

11. Анимация, Gift-картинки и синемаграфика

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

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

Проект: RED / Автор: Kevin Hou

Проект: cinemagraphs.com / Автор: Kevin Burg, Jamie Beck

Проект: Strong Women / Автор: Andreea Robescu

12. Генеративный дизайн

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

Проект: Debrecen 2023 European Capital of Culture / Автор: Classmate Studio

Проект: Sydney School of Entrepreneurship / Автор: For The People

Проект: Archdiploma Dynamic Identity / Автор: Process

13. Набор цветов и узоров из 80-90-х

Где мы это видели? Ну конечно же: это возвращение популярных в 80-90-е цветов с их кислотным розовым и дерзкой контрастностью. Можно ли назвать эти ностальгические настроения вернувшимся трендом? Или все объясняется тем, что молодые дизайнеры — это люди, чье детство прошло в окружении сумасшедших цветов тех лет?

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

Проект: Yes To All / Автор: Nick Liefhebber

Проект: LOGOFOLIO 2020 / Автор: 268 Estúdio Design

Проект: 80’s inspired Pattern / Автор: Rahul Das

14. Кастомные иллюстрации

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

Проект: Bitcoin Illustrations Freebies / Автор: Milo Themes

Проект: Illustrations for Koypo Industries / Автор: Milo Themes

Проект: Lifecycle / Автор: Paperpillar Studio

15. Иллюстрации в миксе с фотографией

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

Проект: Magazine covers / Автор: Andreea Robescu

Проект: Insects Love / Автор: Andreea Robescu

16. Реальные фото

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

17. Изометрический дизайн и фотография

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

Проект: Ultraviolet Break of Day / Автор: Field.io

Проект: Abstractions Vol.1 / Автор: Mohamed Samir

Проект: Isometric House / Автор: Angela Chan

18. Сочетание 2D и 3D

Создавать 3D объекты и помещать их в 2D проекты стало очень модно. Это сочетание дает уникальную внешнюю эстетику, соединяя глубину и плоскость. Технику можно применить в разных направлениях дизайна: от создания логотипов до веб-сайтов и рекламного видео. Конечный результат представляет собой сложную визуальную презентацию, которую невозможно забыть.

Проект: Daily Posters / Автор: Baugasm

19. Монохром

За последние несколько месяцев появилось множество композиций в одной цветовой гамме, на которых фон и объект на переднем плане или шрифт и тени/3D эффекты одинакового цвета.

Что произойдет, если 3D пойдет дальше в создании объема для объектов одного оттенка? Использование одноцветного 3D позволяет дизайнерам добиться иллюзии объема с помощью глубины цвета и теней.

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

Проект: Magrela Popcorn / Автор: Hugo Aranha

Проект: Amazonia Beverages / Автор: Hugo Aranha

Проект: Nespresso Expertise / Автор: JVG ™

20. Дудлы (иллюстрации, нарисованные вручную)

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

Проект: Toasted Pets! / Автор: Brosmind ®

Проект: Awake Festival Proposal / Автор: Milo Themes

Проект: Art Hub Bahrain | Packaging / Автор: Elias Madan

21. Смешение и пересечение стилей

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

Проект: Styled Social Media kit / Автор: Maksat Amirzhanuly

Дизайн логотипа

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

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

Проект: Responsive Logos / Автор: Joe Harrison

Автор: Design Studio

23. Логотипы с анимацией

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

Проект: Type With Pride Gilbert font / Автор: Fontself Team

Проект: Logo Visual identity / Автор: Mariusz Mitkow

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

Проекты: Axel Flores , Vladimir Lifanov , Silvestri Thierry , Vadim Carazan , Onrepeat Studio , Serafim Mendes

25. Негативное пространство

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

Проекты: SeisTrece Studio , Vadim Carazan , Quim Marin , Bureau Rabensteiner , Andrei Traista

26. Геометрические фигуры и узоры

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

Проекты: islam biko , Quim Marin , Silvestri Thierry , Vadim Carazan

27. Монограммы

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

Проекты: Milo Themes , Romain Billaud

28. Градиенты

Градиенты — один из главных трендов, унаследованных от 2020-2020 годов, и конечно же, он коснется дизайна логотипов. Легкий градиент или смелые переходы, что выберете вы?

Проекты: MICHAEL SPITZ , Nicholas Slater , Jeroen van Eerden , Vadim Carazan

29. Наложения

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

Проекты: CaveLantern , Fontself Team , Rosie Manning

Веб-дизайн (Ui/Ux)

30. Концепция Mobile First

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

Проект: Food Drinks app Interaction Collection / Автор: Johny vino™ .

31. Микровзаимодействия

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

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

Проект: Brewskies v2 / Автор: Kevin Yang

Проект: Gesichtspunkt / Автор: Alim Maasoglu

32. Встроенная анимация

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

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

Проект: inturn website / Автор: INTURN

33. Креативные экраны загрузки

Сайты, использующих скучные экраны загрузки, устарели. Почему бы не компенсировать пользователю время вынужденного ожидания креативным подходом? Ниже приведены 2 выдающихся примера применения креативных вариантов загрузки сайтами Contemple и Awwwards.

Проект: Awwwards Conference / Автор: Adoratorio

34. Раскладка с ломаной «сеткой»

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

Проект: The Refugee Nation Web Design Branding / Автор: Justin Au

Проект: Ueno Concepts / Автор: Ben Mingo

35. Разбивка страницы

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

Проект: Product Landing Page UI / Автор: Dinesh Shrestha

Проект: Design Thinking / Автор: Radowan Nakif Rehan

36. Больше (интерактивного) 3D в оформлении

Главный тренд, который признает современный веб дизайн 2020 — восхождение (интерактивных) 3D элементов, экспериментирующих с глубиной, движением, текстурой и перспективой. Использование 3D элементов и 3D среды делает каждый веб-сайт выcокоуникальным, улучшая его внешний вид и/или пользовательский опыт. В качестве примера можно привести Atacac, который создал интерактивный футуристичный шоу-рум виртуальной реальности, позволяющий посетителям сайта рассмотреть каждый предмет одежды со всех сторон. Другой яркий пример — вращающаяся 3D скульптура сайта The Artery.

Проект: Atacac 2020 Yearbook

Проект: The Artery

37. Закругленные углы и плавные формы

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

Проект: LuxuryClean UIUX iOS App / Автор: Mariusz Mitkow

Проект: Landing page project design / Автор: Mariusz Mitkow

38. Фоны с движущимися элементами

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

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

Проект: Wibicom / Автор: Wibicom Agency

39. Футуристические узоры

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

Сценарий утратил свою привлекательность, когда стало понятно, насколько далеко фильм отошел от реальности, которая оказалась намного менее футуристичной. Однако благодаря Глубокому Анализу и Big Data мы наблюдаем возвращение робототехнических трендов: футуристические орнаменты найдут применение и в 2020.

Проект: Crown Tech / Автор: Jan Wolinger

Проект: SpaceShip / Автор: Arif Rachman Hakim

Проект: Data Visualization Concept / Автор: Mario Šimić

40. Монохромные иконки

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

Проект: Icon Design / Автор: Eaton

41. Иконки, частично заполненные цветом

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

Проект: Alfred icons / Автор: Andrea O

Проект: Icons / Автор: Alisa_

42. Скроллинг с Parallax

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

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

Проект: Dex Multi-Layer Parallax / Автор: Milo Themes

43. Мондрианизм

Желание свободы и эквилибриума (гармонии) — врожденное стремление человека (по причине присутствия в нем вселенной)», сказал Пит Мондриан. Мондрианизм станет трендом 2020 года: стиль, в котором соединяются базовые цвета — красный, желтый и синий, создавая впечатление чистоты, гармонии и уравновешенности.

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

Проект: Mondrian / Автор: Stugbear

Проект: Guernica / Автор: Shota

Типографика

44. 3D — моделирование

3D — многообещающий тренд, охвативший все сферы дизайна. Объемный текст добавляет реалистичности общей композиции.

Проект: Atypical / Автор: Pawel Nolbert

Проект: Alphabet Project / Автор: Serafim Mendes

Проект: RE NEON vI / Автор: Omar. Aqil

45. Жирная типографика

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

Проект: Club AVi’s XII-year Anniversary Posters Series / Автор: Milo Themes


Проект: TEDxGroningen / Автор: Rudmer van Hulzen

46. Serif шрифты

На протяжении нескольких лет в типографике преобладали sans-serif шрифты, но сейчас наблюдается возвращение serif. Ниже представлены несколько интересных проектов, авторы которых выбрали serif шрифты и добились впечатляющих результатов.

Проект: Custom Type Design / Автор: Moshik Nadav Typography

Проект: Lux Naturalis Gala Invitation

47. Геометрический шрифт

Геометрические шрифты были востребованы последние несколько лет и остаются важным трендом и в 2020 году.

Проект: VitrineMedia / Автор: Graphéine

Проект: Sydney School of Entrepreneurship / Автор: For The People

48. Кастомные шрифты

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

Проект: Lingerie XO The Sexiest Most Powerful Typeface Yet / Автор: Moshik Nadav Typography

Автор: Jeanne Bataille

49. Эксперименты с выравниванием и кернинг

Хаотичность в типографике была одним из главных трендов 2020 и остается на вершине в 2020 году. Забудьте о правилах и дайте простор фантазии!

Проект: Studio Studio / Автор: Rudmer van Hulzen

Проект: nyMusikk annual report 2020 / Автор: Non-Format

50. Экспериментальная типографика

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

Проект: Experimental Chinese Typography / Автор: Letitia Lin

51. Типографика в миксе реальными фото

Эклектичные тренды всегда эффектны, и этот не исключение. Добавляйте типографику в фотоснимки или 3D отрисовки и получайте авангардный дизайн.

52. Креативная типографика

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

Цукерберг рекомендует:  Отправка писем с помощью Mandrill REST API

Проект: ILOVEDUST — 3D TYPE COLLECTION 1 / Автор: ILOVEDUST

Проект: Typography 3D — 9 / Автор: Alexis Persani

Дизайн упаковки

53. Плоский дизайн

Плоский дизайн до сих пор остается востребован в оформлении лейблов и упаковок. Плоские фигуры, узоры и кастомные иллюстрации — верный выбор в 2020 году.

Проект: Cheddar-Cheese-Melt-Mcdonalds-Packaging / Автор: Mostafa Abdelmawla

Проект: The-Gang / Автор: MARKA NETWORK

Проект: Melio / Автор: Rachael Batley

54. Минималистский дизайн

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

Проект: Sarta-Milano / Автор: MARKA NETWORK

Проект: Gyalmo / Автор: Łobzowska Studio

55. Узоры и фигуры

Геометрические

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

Проект: NICHE-Tea / Автор: IWANT design

Кастомные фигуры и элементы

Персонализированный дизайн — обязательная составляющая в построении идентичности бренда.

Проект: aleFanty / Автор: less

Проект: Nature Organic Chocolates / Автор: Mike Karolos

Дудлы

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

Проект: Zoe-Juices / Автор: Beetroot Design

Винтаж

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

Проект: Mutti Special Edition for FICO Eataly World / Автор: Auge Design

56. Смелая типографика

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

Проект: Amilk & Adidas / Автор: Duy Dao

57. Цвета

Дерзкие цвета

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

Проект: Deker-rebranding / Автор: less

Проект: Mochila / Автор: Sweety & Co.

Пастельные цвета

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

Проект: Freshly Baked / Автор: Design Happy

Проект: Ela cosmetics / Автор: ChocoToy cute

58. Необычные текстуры и формы

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

Проект: Sprout Green Paulownia Wooden Box / Автор: Yinjue

Проект: Eco bamboo tooth brush / Автор: Margas Family

59. Голографический эффект

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

Проект: EAT ME / Автор: PACKVISION AGENCY

Проект: Sphynx / Автор: Anagrama Studio

60. Градиенты на упаковке

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

Проект: YOU & OIL natural cosmetics / Автор: Irmantas Savulionis

61. 3D натюрморты

Последние годы был заметен рост числа проектов с 3D дизайном. Наблюдая работы некоторых 3D художников из топа, например MVSM или Питера Тарка, можно предсказать, что в 2020 году популярность 3D натюмортов возрастет. Для корпоративных коллабораций тренд окажется на одном уровне важности с разработкой лого и размещением продукции.

Проект: Squarespace stillife / Автор: MVSM

Проект: Adobe Government / Автор: Peter Tarka

Проект: Audi Q-Riosity / Автор: Peter Tarka

62. Абстрактные фигуры

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

Проект: Logitech CRAFT / Автор: Pawel Nolbert

Проект: SWEET SPIRALS / Автор: Kirill Maksimchuk

63. 3D отрисовка в стиле металлик

3D отрисовка в стиле металлик смотрится эффектно и несомненно относится к трендам, которые интересно отслеживать в 2020.

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

Проект: Grand Spectacular 2020 / Автор: Mustaali Raj

Проект: Various Concepts / Автор: Oleg Morozov

Проект: NIKE FC 3D Golden balls in the real world / Автор: T A V O .

64. 3D графика с анимацией

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

Проект: NIKOPICTO SHOWREEL 2020 / Автор: Nikopicto

65. Очень реалистичное 3D

3D всегда вызывает восторг и будет возглавлять современные тенденции веб дизайна 2020. Этот эффект способен обыграть реальность и вымысел так тонко, что их практически невозможно отличить. Картинка это или отрисовка? Грани продолжают стираться…

Проект: YOOX: Make a Wish / Автор: JVG ™

Проект: Air Max ’17 / Автор: Berd .

Статья собрана из источников:

Спасибо, дорогой друг, что дочитал данный лонгрид с трендами веб дизайна 2020 до конца. На его сбор, перевод и публикацию ушло 8 дней и если вам не сложно уделите 30 секунд, чтобы поделиться им в соц.сетях или на своем ресурсе, тем самым вы очень поможете распространить данный материал. Спасибо большое =)

33 тренда в графическом дизайне 2020 (с примерами)

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

Мы подобрали ТОП 33 тенденции дизайна, которые будут популярными в 2020 году. Это позволит вам быть в тренде и создавать уникальные авторские иллюстрации.

Оглавление:

01.

Темнота: немного мистичности

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

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

Это действительно интересная тенденция, которая последнее время встречается все чаще.

02.

Мазки краски: придаем проекту человеческой души

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

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

03.

Нео Гео: новое концептуальное движение

Нео Гео – это геометрическое концептуальное художественное движение, которое берет свое начало в 1986 году. Оно было создано под влиянием более ранних движений, таких как минимализм, поп-арт и оп-арт. Сегодня Нео Гео по праву считается отдельным движением в искусстве, которое имеет свои отличительные черты.

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

Цветовые схемы на нашем сайте.

04.

Mary Jane: в ногу с законом

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

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

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

05.

Искажение пространства и времени

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

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

06.

Оптические иллюзии: задержать взгляд зрителя

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

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

Дизайнерам и художникам важно не переборщить с оптическими иллюзиями в своих проектах.

07.

Цветной фон: еще больше цвета

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

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

08.

Дада: возвращаем Авангард

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

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

09.

Дизайн упаковки в 2020

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

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

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

10.

Анимированные письма: инновационный маркетинг

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

Чаще всего анимация используется только для выделения логотипа. Например, моушн лого можно увидеть даже в консервативных публикациях, как New York Times. Их мобильное приложение использует анимацию логотипа и других элементов, в том числе рекламные блоки. Поэтому анимацию можно применять не только в электронных письмах, а и в других инструментах обращения к аудитории.

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

11.

Обрезки: мозаика, коллажи и сюрреализм

Данный тренд может показаться слегка похожим на тренд № 24, который мы рассмотрим ниже. Но разница заметна. В данном случае вы не просто совмещаете реализм с абстракцией, фото с рисунком, а создаете некий протест. Это радикальная тенденция, с которой стоит быть аккуратным. Ее часто можно встретить в индустрии красоты и моды: промо-ролики, презентации, реклама, упаковка, журналы.

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

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

12.

Аптекарь: максимум минимализма

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

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

13.

Цифры, цифры, цифры

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

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

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

14.

Открытая композиция: выйти за рамки

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

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

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

  • Иллюстрация Луи Витон будто продолжается за кадром. Lionel Durimel
  • Сайт моделирования с веб-дизайном на открытой композиции. Kieran

Веб-сайт Creativity Is In The Air Веб-сайт Titan. Viita-watches

15.

3D: глубина нового поколения

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

Последние несколько лет трехмерные изображения входят в число трендов, поэтому можно смело ожидать 3D-графику и после 2020 года. Популярность такого стиля возможна в разных типах графического дизайна: рисунки, печатные изображения, веб-дизайн, реклама и пр.

  • Дизайн Maxim Shkret
  • Дизайн Sawdust

Современные программы (Cinema 4d, Blender и др) позволяют быстро создавать 3D-шедевры, которые заставляют зрителя внимательнее всмотреться в изображение, задержать на нем взгляд.

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

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

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

  • Богатые текстильные текстуры в виде вина. Isse Miyake
  • Мороженное. Isse Miyake
  • Работа EikoOjala совмещает в себе футуристические и ретро элементы в 3D иллюстрации
  • Веселый мини-ландшафт от EFL
  • Веб-сайт Arche68
  • Дизайн Sawdust

16.

Антигравитация: летающие и плавающие элементы

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

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

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

17.

Яркие цвета: путешествие в мир чудес

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

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

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

  • Дизайн Leonardoworx LWX
  • Дизайн Santi Zoraidez

Проект Vacaciones Mounstrosamente divertidasm Проект Vacaciones Mounstrosamente divertidas

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

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

18.

Металлик: еще больше блеска

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

  • Дизайн Ben Fearnley
  • Дизайн Ben Fearnley

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

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

Особо красиво сочетаются металлические элементы с 3D-объектами и ликвидом, о котором мы расскажем чуть ниже. Но классическое сочетание черно-белого отблеска тоже не останется без внимания.

19.

Ликвид: пусть течет

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

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

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

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

  • Веб-сайт Robin Mastromarino
  • Веб-сайт Yard Agency

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

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

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

20.

Большой текст – большое влияние

Пользователи стали все больше экономить свое время. Поэтому им не до чтения сухого текста – они требуют картинок. Лучшим вариантом будет сочетание изображения и типографики.

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

Типографика в графическом дизайне 2020 определенно будет максимальной. Она будет активно участвовать в проекте. В стремлении к более эффективному графическому дизайну мы ожидаем от дизайнеров удивить нас.

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

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

Более того, текст может быть трехмерным, к нему можно добавить эффект жидкости, придать блеска металла и много других эффектов.

  • Дизайн Andrea Bianchi
  • Проект DPDK

21.

Контурная типографика: пустые буквы и цифры

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

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

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

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

  • Веб-сайт Good Fortune
  • Веб-сайт OneWorldOneFace

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

Использование контурного текста в анимации от borisfernandez.

22.

Типографика с фоном: ретро вдохновение

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

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

Работая с текстом на фоне, нужно быть осторожным, чтобы не испортить вид картины.


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

23.

Альтернативное искусство: штрихи, пятна, каракули

В 2020 году тенденции идут в сторону альтернативного искусства. Встраивание альтернативного видения мира в графический дизайн делает произведение выделяющимся.

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

Главное преимущество такого стиля – неограниченные возможности для импровизации и проявления фантазии. Карикатуры и рисунки от руки всегда отлично смотрятся на векторных изображениях и анимациях.

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

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

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

  • Дизайн Estudio Pum
  • Дизайн multiple owners

24.

Реализм + двухмерный рисунок: сочетаем противоположности

Противоположности всегда притягиваются друг к другу. В 2020 году вы сможете сочетать противоположные вещи, создавая качественные 2D иллюстрации.

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

Реальные объекты в сочетании с плоскими визуальными элементами (2D рисунками) будет одной из тенденций графического дизайна 2020 года. Такой метод может использоваться на любом типе графической продукции: веб-сайты, упаковки, реклама, искусство. Поэтому его популярность возрастает бешеными темпами.

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

25.

Асимметрия: отключить сетку

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

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

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

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

  • Асимметричный дизайн каталога мебели. Artem Oberland.
  • Веб-дизайнс нетрадиционным видением сетки. JesseShowalter

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

26.

Арт-деко: минимализм и роскошь

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

Вследствие этого зародилась отдельная ветвь дизайна – Арт-деко. Она совмещает в себе насыщенность гламуром и органические формы.

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

  • Логотип Tulipan Husene. Прекрасный металлический логотип от Arthean.
  • Логотип Cannabis Regulatory Compliance от aarif.
  • Дизайн логотипа Peacock от flycr.
  • Логотип Insaaph. Изображение льва в стиле арт-деко. Arthean.

27.

Средневековый модерн: старинные цветовые палитры

Простые краски и формы пришли на замену максимализму. Вдохновение стиля пришло со Средневековья, когда активно процветала живопись. Старинные цветовые палитры позволяют создавать простые для восприятия иллюстрации (создаются в основном в Adobe Illustrator). Такие изображения вызывают чувство спокойствия и доверия к бренду.

Стильный слайдер на сайте с ретро-эффектом. Paarth Desai.

  • Ретро постер предстоящего события в мире бокса. ANAMOLLY.
  • Иллюстрация в легком стиле, со старинной цветовой палитрой. Spoon Lancer.
  • Дизайн упаковки спичек «Золотое Правило», выполненный в стиле «атомик», который был популярен в середине прошлого века. NicolaBroderick.
  • Логотип Solar Eliquids. Еще одна космическая гонка вдохновила на дизайн. Arthean.

Стиль особо активно использовался в дизайне упаковочной продукции в середине прошлого века.

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

28.

Дуотон и градиенты: цветовые переходы в двух тонах

Градиенты – «переходы цвета» популярны уже более десяти лет. Но последние годы их начали чаще использовать при создании логотипов.

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

Существуют классические комбинации цветов: синий и фиолетовый, красный и оранжевый, синий и красный. Но увеличивается тенденция к переходам цветов, которые не сочетаются между собой. Так создаются резкие и смелые иллюстрации.

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

  • Веб-дизайн студии по печати на одежде. Яркие градиенты на коммерческом сайте. mikebarnes.
  • Дизайн плаката из смелых градиентов от Bruno Pego.

29.

Теплые, пастельные тона: меньше яркости и цвета

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

  • Тусклые оттенки в фотографиях Tiago Ferreira.
  • Печатное издание с использованием пастельных тонов. lasho.

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

  • Фото девушки с приглушенными тонами под ретро. Fernando Machado.
  • Fernando Machado.
  • Обложка микстейпа Lil Yachty от дизайнера nevergohungry.
  • Обложка книги Шерман Алекси «Вы не должны говорить, что любите меня». nevergohungry.

30.

Максимализм + тонкость линий: завоевать доверие

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

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

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

  • Легкая упаковка дезодорантного средства. Органичность и натуральность. Wooden Horse.
  • Логотип Sea Monster Software. Gwydion.
  • На создание одежды дизайнера вдохновили старые ботанические рисунки одуванчика. Yokaona.
  • Логотип Seattle Baby Company — производителя детской продукции от Mad Pepper.

31.

Шрифт с засечкой: придаем буквам характер

В 2020 смело можно использовать sans-serifs (без засечек) шрифты. Но дизайнеры обещают порадовать большим разнообразием шрифтов с засечками. Усиленные шрифты делают текст убедительнее, передают строгость и богатство.

Впечатляющий дизайн сайта от Nathan Riley.

На фоне роскошных засечек на буквах, sans-serifs шрифты становятся безликими и серыми. Известные бренды выделяются за счет засечек разной длины, формы и типа. Уже сейчас в сети интернет можно найти неисчислимое количество таких стилей. В 2020 они точно станут одной из топовых тенденций.

  • Логотип D. McQuillan Construction and Fine Homes. Авторские засечки на шрифте делают его элитным. DaveRoach.
  • Логотип ресторана The Good Grub с засечками под классику. tulimilka.
  • Дизайн сайта в ультра-минималистском стиле. Alex Capellan.
  • Брендинг бара «Тосты с соком». Levi Lowell.

32.

Изометрический дизайн: 3D в двух измерениях

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

Название стиля звучит технически, но способ создания таких иллюстраций намного проще, чем кажется. Это способ рисования трехмерных объектов в двухмерном пространстве. Рисунок получается простой, но имеет глубину, которая не присуща обычным 2D изображениям.

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

  • Дизайн сайта CryptoGoal.io с удивительными изометричными горами. KisaDesign.
  • Веб-дизайн Savagely. Интерактивный и интересный лендинг от GhaniPradita.
  • На иллюстрации отлично видно, как изометрический дизайн передает ощущение активного движения. Dmitrii Kharchenko.
  • Изображение персонала компании для сайта или брендбука от Daria V.

33.

Цвет года 2020

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

В 2020 году самым привлекательным цветом был признан ультрафиолет (Ultra Violet) – роскошный и мистический оттенок фиолетового.

В 2020 Международный исследовательский институт Pantone объявил долгожданный цвет года. Это оптимистический и радостный цвет «живой корал». Будьте уверенны, что в 2020 году вы часто увидите оттенок 16-1546 Living Coral в рекламных и дизайнерских проектах.

Тренды графического дизайна 2020: выводы

Подытожив все вышесказанное, можно утверждать, что в 2020 году мы увидим много открытых композиционных проектов, которые используют воображение зрителя. 3D-дизайн будет массовым, но не скучным – реализм заставит зрителя погрузиться в композицию. Яркие цветовые схемы, а также металлические элементы сделают дизайн красивым и мечтательным.

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

Посмотрите шикарный видеоролик, в котором использованы почти все из вышеперечисленных трендов.

20 самых важных принципов дизайна в картинках

Дизайн — это сложный, запутанный, веселый и увлекательный бизнес.

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

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

01. Линия

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

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

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

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

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

Линия — это многогранный, простой и эффективный графический элемент, который точно не стоит принимать как должное! Экспериментируйте с линиями, и вы увидите, насколько крутым они могут сделать ваш дизайн!

02. Масштаб

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

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

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

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

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

В этом дизайне от фирмы The Consult некоторые цифры, показатели и данные представлены в укрупненном масштабе, чтобы пользователи сразу обратили на них внимание.

Хотите еще несколько полезных советов по масштабу? Почитайте статью 5 интересных способов использования масштаба в дизайне.

03. Цвет

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

Цукерберг рекомендует:  Кто заработает на творчестве искусственного интеллекта

Давайте рассмотрим два примера брендинга. Первым номером у нас идет работа от Smack Bang Designs — дизайн услуги по омоложению кожи “Lite Luxe” для женщин. В этом дизайне предпочтение отдано светлым, мягким, пастельным цвета. Белый, светло-серый, мягкий багровый, а также немного медного и золотистого — все эти цвета мягко дополняют друг друга, и в результате получается спокойный, элегантный и женственный дизайн.

С другой стороны, у нас есть второй пример: оформление бренда Frooti (производителя соков) от Sagmeister & Walsh. В отличие от предыдущего примера, в котором цвета выбранной палитры мягко дополняли друг друга, в данном случае мы видимо очень контрастные цвета, за счет которых дизайн становится более активным, энергичным и игривым.

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

Вы создаете изящный и утонченный дизайн постера? Почему бы не использовать монохромный фильтр в черных тонах и с высокой резкостью — как, например, фильтр “Street” от Canva. Или, может быть, вы хотите создать эксцентричный образ? Немного снизьте контрастность изображения, чтобы приглушить цвета, сделать их мягче и спокойнее.

04. Повторение

Возьмите любой известный бренд — Coca-Cola, Apple, Nike — и, я уверен, вы сможете представить их логотип, образ и цветовую схему. Почему же все это моментально всплывает в памяти? Ага, правильно, дело в повторении.

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

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

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

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

Хотите еще вдохновляющих примеров брендинга с использованием паттернов? Почитайте эту статью: 50 восхитительных геометрических паттернов в графическом дизайне!

05. Негативное пространство

Скажем прямо: негативное пространство — это “пространство между”, область внутри и вокруг элементов, у которой есть своя форма.

Общепризнанным королем и первопроходцем негативного пространства был художник Мауриц Эшер: я уверен, его работы уже встречались вам и ставили в тупик. Эшер создал множество работ-мозаик, в которых одна форма плавно перетекала в другую через негативное пространство, как на этой гравюре “Sky & Water I”.

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

Если пользоваться негативным пространством с умом и продуманно, можно создать поистине поразительные и интересные дизайны. Посмотрите на эти простые иконки животных от дизайнера Джорджа Бохуа: при помощи простых, чистых форм формируется понятный образ каждого животного.

06. Симметрия

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

Симметрию часто используют в логотипах, чтобы добиться гармоничного и сбалансированного дизайна. Примеров симметричных логотипов множество: Target, McDonald’s, Chanel, Starbucks и т.д.

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

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

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

Посмотрите на дизайн этого ежегодного отчета от Brighten the Corners и Аниша Капура — колонки текста симметричны относительно середины разворота.

Если использовать в лейауте немного симметрии, можно создать ощущение баланса и порядка. Так что в следующий раз, когда будете создавать дизайн как-нибудь публикации или работать с большими объемами текста, обратите внимание на симметрию: возможно ее слишком много (или слишком мало)? Если кажется, что с дизайном что-то не то, поэкспериментируйте с симметрией.

07. Прозрачность

Степень прозрачности элемента показывает, насколько мы можем видеть “сквозь него”. Чем выше прозрачность, тем легче и незаметнее выглядит элемент; чем ниже прозрачность — тем он массивнее.

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

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

Прозрачность используется не только в цифровой графике. Вот, например, приглашение в Нью-Йоркский музей стекла, напечатанное на прозрачном стекле — это делает дизайн уникальным и увлекательным. Обязательно учитывайте, на каком носителе будет размещаться ваш дизайн: если есть возможность “поиграть” с прозрачностью, подумайте, как можно творчески обыграть это.

08. Текстура

Чистый, четкий и гладкий графический дизайн — это классно, но иногда немного “грубой” текстуры не помешает. Текстура делает дизайн более глубоким и тактильным и привносит в него интересные эффекты.

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

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

Конечно, если вам по стилю подходит “грязный” образ, то текстуры отлично сработают, но если вы хотите привнести в дизайн лишь легкое ощущение тактильности, оставайтесь с нами.

Давайте рассмотрим пример использования текстуры для усиления эффекта дизайна. Благодаря текстуре эта прекрасная типографика от Дэна Кассаро выглядит действительно винтажно. Заметьте, грубая текстура не отвлекает, а скорее усиливает эффект от дизайна: делает его более целостным и создает ощущение ручной работы.

А теперь рассмотрим дизайн визитки от Inkdot для компании Foremost Wine. Дизайнер вывел использование текстуры на новый уровень — сама бумага для визитки сделана рельефной. Заранее продумывайте ощущения, которые будет вызывать ваш дизайн (не только в духовном, но и в материальном смысле) — и вы сможете создавать действительно выдающиеся работы.

09. Баланс

Баланс важен во всех сферах нашей жизни — и в дизайне, конечно, тоже.

Чтобы освоить баланс, нужно видеть “вес” каждого элемента: от текстовых блоков до картинок. Нужно учитывать цвета, размеры, формы элементов и на основании этого оценивать их “вес” относительно других деталей.

Есть хороший способ сделать это: представьте, что ваш дизайн напечатан на 3D принтере. Подумайте, что выделяется? Что перевешивает?

Посмотрите на этот логотип с кошкой от Джорджа Бохуа — работа прекрасно сбалансирована. Если такой логотип распечатать, скорее всего он будет выглядеть гармонично.

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

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

10. Иерархия

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

Посмотрите на эти примеры из журнала A2 Magazine: мы видим три разных способа подчеркнуть важность заголовка — от самого сдержанного до кричащего. Какой из способов вы бы ни выбрали, удостоверьтесь, что он соответствует содержимому заголовка.

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

Посмотрите на это приглашение от фирмы Southern Fried Paper. Заметьте, что дата (очень важная часть свадебного приглашения) выполнена крупным, жирным шрифтом, что делает ее более заметной, чем текст в нижней части. И все же дата не затмевает заголовка “Audrey and Grant”.

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

Взгляните на этот постер The Night Market от Мэри Гэллоуэй. Сразу выделяется заголовок, подзаголовок и дата, а внизу размещается менее важная дополнительная информация.

Конечно, иерархия — это больше, чем просто размер шрифта. У графики тоже есть своя иерархия: вспомните, мы говорили об этом в разделе “Масштаб”. Чем ярче и красочнее элемент, чем ближе к центру он расположен — тем выше его иерархия по отношению к более мелким, бледным или удаленным элементам.

11. Контраст

Часто бывает, что именно контраст выступает тем главным ингредиентом, благодаря которому дизайн “бросается в глаза” — а ведь именно этого (как бы грустно это ни звучало) хотят многие клиенты.

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

Наиболее распространенными формами контраста являются темный/светлый, толстый/тонкий, большой/маленький и т.п.

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

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

Представьте, что автор написал бы “New York” тем же цветом, что и “Bike Expo” — контраст был бы гораздо ниже и фразу было бы сложно разобрать.

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

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

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

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

12. Рамочки

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

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

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

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

13. Сетка

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

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

Давайте рассмотрим несколько примеров использования различных сеток.

В этом примере от Николы из Magazine Designing мы видим пятиколоночную сетку в деле. Заметьте, как одни элементы занимают одну колонку, а другие — две, а то и три, и все же благодаря сетке дизайн выглядит аккуратно, чисто и ровно.

Если хотите сделать сетку более гибкой, добавьте больше колонок, как в следующем примере.

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

Поэтому найдите сетку, которая подходит вам и вашему дизайну, и отталкивайтесь от нее.

Теперь, когда мы определились, что такое сетка и как она работает, давайте рассмотрим несколько настоящих примеров. Взгляните на этот пример от Мэтта Уайли и попробуйте сказать, сколько колонок входит в состав сетки.

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

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

14. Беспорядок

До этого момента вы восхваляли выравнивание и порядок. Но как же быть с более органичными, грубыми и хаотичными дизайнами? Беспорядок играет в дизайне важную роль, но беспорядок тоже бывает разным. Давайте введем термин “дизайнерский беспорядок”.

“Дизайнерский беспорядок” отличается от других форм беспорядка своей целью и исполнением. Основной целью дизайна должно быть сообщение. Что мы хотим сказать клиенту своей работой? Понятно ли мы это доносим? Можно ли усилить эффективность передачи информации?

К примеру, давайте рассмотрим дизайн, в котором шрифт выглядит беспорядочно, но у этого беспорядка есть цель. На постере Хита Киллена к фильму “The Killer Inside Me” мы видим нацарапанные от руки буквы, а в тех местах, где использован шрифт, расстояния между буквами “прыгают” в беспорядке.

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

В этом то и заключается основное различие между “беспорядком” и “дизайнерским беспорядком”. Если бы дизайнер использовал такой прием при создании постера детского фильма про веселых говорящих животных, то форма дизайна не соответствовала бы его содержанию. Но в случае с фильмом The Killer Inside Me (Убийца внутри меня) дизайн идеально дополняет картину.

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

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

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

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

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

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

15. Направление

Важным аспектом дизайна выступает “поток” внимания — то есть путь, по которому движется взгляд пользователя. В каком порядке мы изучаем содержимое? Как читателю понять, куда смотреть дальше? Логично ли направление, по которому следует взгляд?

Ученые исследовали природу движений человеческого взгляда и вывели несколько закономерностей. Взгляните на это исследование, проведенное Nielsen Norman Group: ученые фиксировали направление взгляда людей при просмотре веб-страниц, чтобы выявить паттерны “потребления” контента. Ниже вы видите результаты в форме тепловых карт.

Исследования доказали, что существуют стандартные паттерны движения взгляда (в форме букв “F” и “E”), поэтому больше всего внимания пользователь уделит тому, что расположено по левому или по верхнему краю. Еще один распространенный паттерн — форма буквы “Z”.

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

Не нужно каждый раз на 100% закладывать в дизайн все эти паттерны. Рассматривайте каждую работу в отдельности и подбирайте наиболее подходящий способ направить “поток” внимания. Просто учитывайте, что максимум внимания концентрируется в верхнем левом углу страницы, а при движении вниз оно плавно рассеивается.

Давайте рассмотрим пример того, как правильно и эффективно направлять внимание.

Этот дизайн от Atelier Martine&Jana очень мягко и органично направляет наше внимание за счет того, что текст размещен вдоль изгибов и плавных линий изображения. Сначала мы видим заголовок и дату (здесь использована небольшая иерархия), а потому начинаем скользить вниз, одновременно изучая и текстовую информацию, и изображение.

Короче говоря, поток внимания распределяется между текстом и фотографией.

16. Правила

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

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

Тем не менее, многие дизайнеры уверены: как только вы освоили эти правила — пора их нарушать.

Давайте рассмотрим пример, в котором правила нарушены намеренно. На этом постере дизайнер Шахир Заг нарушает несколько основных правил типографики ради шутки (кстати, очень правдивой).

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

Есть одна замечательная история о Карсоне. Его попросили оформить интервью с музыкантом Брайаном Ферри. Изучив текст, дизайнер нашел его слишком скучным — и оформил интервью шрифтом Zapf Dingbats (символьный шрифт, наподобие Wingdings), что сделало статью совершенно нечитаемой. Смотрите картинку ниже:

У Карсона был принцип в отношении дизайна: “ не стоит считать разборчивость залогом эффективной коммуникации”.

Карсону и многим другим дизайнерам удается передавать суть идеи, полностью игнорируя правила. Постер Шахира Зага о головной боли (мы обсуждали его ранее) нарушает правила ради смеха, а работа Карсона — чтобы отразить суть интервью.

Получается, что коммуникация остается эффективной, несмотря на то, что разборчивость страдает.

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

17. Движение

Наверняка вам случалось слышать, что в какой-либо картине или произведении искусства “много движения”? Возможно, впервые такая характеристика поставила вас в тупик — откуда же взяться движению в статичной картине? Но движение играет важную роль в изобразительном искусстве — а значит и в графическом дизайне тоже.

До этого мы говорили о потоке и направлении внимания в дизайне — именно эти факторы играют важную роль при создании ощущения движения. Если ваша работа органично направляет поток внимания зрителя сверху вниз, слева направо, из точки А в точку Б — то дизайн будет “двигаться” плавно.

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

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

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

Похожий эффект используется в постере Алана Кларка для Олимпийских Игр 2012 года. Наслоение простых полупрозрачных форм создает ощущение движения и скорости.

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

В данном случае мы видим дизайн обложки от немецких дизайнеров Анцингера, Вюшнера и Распа: края и углы буквы F размыты, что создает иллюзию движения.

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

В этой работе Мэтта Чейза линии движения на слове “futute” создают ненавязчивое ощущение, что слово движется. Линии отлично подходят для создания такого мягкого и легкого ощущения движения.

18. Глубина

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

Так как же придать нашим дизайнам глубины? Существует множество тактик, давайте разберем несколько из них.

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

Давайте рассмотрим пример, который иллюстрирует эффективное использавние теней для создания глубины. На этом постере к книге дизайнер Доминик Шмитц использует множество разные теней: они выглядят достаточно сложно, зато очень реалистично. Взгляните: каждая тень исполнена по-разному и идеально подходит к “своему” элементу дизайна. Реализм требует больших усилий, но результат того стоит!

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

Еще один способ — поиграть с перспективой: это обычно означает создание элементов с эффектом 3D. Правильно настроив перспективу, дизайнер может “приподнять” некоторые элементы над страницей, создавая ощущение глубины. Давайте рассмотрим пример.

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

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

Самый известный ценитель плоского дизайна — компания Apple. В сентябре 2013 года компания Apple запустила новую операционную систему, которая шла в комплекте с полностью обновленным дизайном: пропали тени и глубина, а им на смену пришли плоские иконки приложений, интерфейсы и т.п.

19. Типографика

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

Чтобы тщательно изучить все, что относится к шрифтам и типографике, обязательно загляните в эту шпаргалку с советами, подсказками и ссылками, которые помогут вам освоить искусство слова!

Давайте рассмотрим пример “показной” типографики (display typography). Для тех, кто не знает, показной типографикой обычно называют более яркие, стилизованные типографические дизайны. Это и постеры к фильмам, и заголовки журналов и т.п.

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

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

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

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

Если хотите поподробнее разобраться с основами подбора шрифтов, обязательно почитайте эту статью: “20 типографических ошибок, которые допускает каждый новичок!”

Тем не менее, я все же еще раз обозначу несколько базовых мудростей:

  • Следите за кернингом в заголовках
  • Убедитесь, что основной текст не выглядит слишком большим/маленьким на том носителей, который вы используете
  • Постарайтесь не использовать слишком много шрифтов сразу
  • Если вы работаете с большим объемом текста, лучше выровнять его по левому краю
  • Если сомневаетесь в подборе шрифта, распечатайте дизайн (на листе странные шрифты будут заметнее, чем на экране)

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

В журнале 99U Magazine используется один и тот же набор шрифтов, но дизайнерам удается комбинировать их множеством различных способов. Эффективно и стильно! Смотрите:

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

20. Композиция

Композиция отлично подойдет, чтобы подытожить все вышеизложенные принципы.

“Композиция” — это общая организация элементов вашего дизайна. Знаю, объяснение звучит скучновато, но на практике это самый веселый раздел дизайна. Именно здесь можно поиграть, поэкспериментировать и добиться прекрасного внешнего вида.

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


Давайте возьмем несколько дизайнов и разберем их композиции. Во-первых, у нас есть рассылка от J.Crew. В этом дизайне акцент сделан на “30” — для выделения этого элемента использованы масштаб и глубина. Часть внимания также уделяется заголовку — это достигается за счет иерархии, размещения заголовка в центре страницы, увеличения размера шрифта и добавления рамки.

В этом простом дизайне использовано несколько техник. Посмотрите, как каждый элемент вносит свой вклад в создание сильного, привлекательного и эффективного дизайна.

Вот еще один случайный пример — на этот раз это постер от Lab B Design Office. В этом дизайне применяются похожие техники и те же принципы, но результат получился совсем другим. В этой работе используются масштаб и глубина: блоки текста разные по размеру, а расположение текста за фотографией создает глубину. Кроме того, очевидно использование иерархии и рамок: белый фон обрамляет текст, а текст служит “рамкой” для изображения.

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

Пусть это будет вашим “до ре ми”. Как только вы освоите ноты, сможете бесконечно комбинировать их, создавая самые разные мелодии.

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

  • Сбалансирован ли дизайн?
  • Логична ли иерархия в дизайне?
  • Скользит ли глаз по странице легко и логично?
  • Понятна ли аудитории основная идея дизайна?

Заключение

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

Относитесь к каждому “правилу” скептически и применяйте его только тогда, когда это уместно (а если неуместно — забейте на правила!). Дизайн — это постоянно развивающаяся и изменяющаяся область, и каждый случай по-своему сложен, уникален и интересен.

Но если вы новичок, держите в голове эти 20 принципов. Где бы вы ни были — замечайте постеры, меню, знаки и пытайтесь понять, какие принципы в них применяются. Развивайте в себе “взгляд дизайнера” и собирайте — в голове или на каком-то носителе — интересные случаи использования принципов дизайна (пригодится на черный день).

А вообще, получайте удовольствие. Играйте, экспериментируйте — но делайте это намеренно и осторожно. Удачи!

У вас есть свои техники и советы для начинающих? Или какие-то свои принципы? Если готовы раскрыть пару своих секретов, пишите в комментариях!

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

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

Тренды веб-дизайна на 2020 год от awwwards

Здравствуйте, дорогие читатели, мы рады представить статью, в которой совершенно по-новому освещаются тренды веб-дизайна на 2020 год. Вы можете прочитать больше о представленных здесь трендах в нашей новой книге «NOW. A Contemporary Landscape for Digital Thinkers 2». Книга похожа на пробуждение после футуристического сна. Мы собрали все, что удивило нас за последний год, и проанализировали тенденции в веб-дизайне, UX копирайтинге, визуальном поиске, ИИ-ботах, 5G, игрушке Фёрби и Fortnite.

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

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

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

Поэтому мы составили «Список основных трендов веб-дизайна на 2020 год».

Визуальный дизайн и взаимодействия

1. Передача индивидуальности бренда с помощью иллюстраций

Иллюстрация используется как элемент различия, потому что она культурно напоминает нам об исключительной природе искусства. В эпоху расцвета иллюстраций в индустрии высоких технологий у нас есть примеры от Slack, Airbnb, Mailchimp, Dropbox и WeTransfer, демонстрирующие, как сделать процесс ожидания более приятным для пользователя и передать эмоции и ценности бренда.

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

2. Макеты, основанные на типографике

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

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

Дело не столько в выборе шрифтов или их комбинаций, сколько в использовании «слов», в качестве основного элемента эстетики и семантики.

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

3. Вариативные шрифты

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

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

Мы можем в общем анимировать оси шрифта в CSS, сжимая или расширяя его, но другие его свойства (те, которые относятся к его морфологии) будут определяться дизайнером шрифтов. Хорошим примером является Decovar – многоуровневый декоративный вариантивный шрифт от Дэвида Берлоу, разработанный для параметризации нескольких свойств.

4. Декорированные, дополненные и большие абзацы

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

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

5. Анимация: вторичные элементы и органичное движение

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

С такими инструментами, как Lottie и Bodymovin, оживают органические и сложные анимации. Конечно, CSS и Javascript предлагают много возможностей для анимации интерфейсов, они позволяют контролировать много параметров, кривых плавности, режимов наложения, фильтров, изменения SVG и т. д., но они требуют скилл.

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

6. Микровзаимодействия и мини-игры

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

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

7. Брутализм и максимализм – наконец-то прирученные дикие силы

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

8. Эффекты изображения, проблема искажений и волновых эффектов

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

«Проблема GLSL-шейдеров в том, что все страницы, созданные в 2020 году, должны были где-то содержать вид искажения или эффекта».

9. Нажмите и удерживайте

Это самая скрытая навигация. Никогда не будет более неудобного взаимодействия. Когда вы впервые видите его, оно может показаться интригующим, но, когда эффект новизны проходит, это уже не смешно. Нажмите и удерживайте (Press & Hold) с точки зрения обнаружения – плохое решение. Подводя итог, можно сказать, что, хотя этот приём упоминается на некоторых экспериментальных площадках, его не следует воспринимать как общий тренд.

Цукерберг рекомендует:  Документирование API. Swagger

10. Эра независимых дизайнеров + креативных разработчиков

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

11. Кастомные курсоры и �� эффекты мыши

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

12. Крупные меню

Как и в случае с абзацами, меню также значительно увеличилось в размере. Помните эти крошечные меню с пиксельными шрифтами в 2005 году? Невероятно, что за несколько лет все стало наоборот. Мода так непостоянна!

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

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

13. Смешанный скролл

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

На сайте badass.shoes-up.com мы видим пример скролла в разных направлениях. Его навигация сочетает в себе вертикальный и горизонтальный скроллинг в макете одной страницы.

14. Индивидуальные цветовые схемы

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

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

15. Смешивание 2D и 3D элементов

За последние несколько лет 3D анимация оказала большое влияние на дизайн. Такие программы, как Blender или Cinema 4D, сделали его доступным для большого количества дизайнеров. VR, AR и 3D-печать привели к возобновлению производства цифрового 3D-контента.

В легендарном эффекте параллакса использовалось поддельное 3D, построенное из двухмерных плоскостей в разных осях Z. В CSS-анимации очень часто имитируют этот трехмерный эффект. Основная идея этого тренда – поиск контраста, 3D элементы над плоскими цветами или 2D плоскостями, создающие ложный 3D-сценарий.

16. Редакционные стили макетов

Благодаря прогрессивной стандартизации CSS-сетки и flexbox мы создаем макеты, которые являются более «свободными» и не ограничены сеткой, которую необходимо реструктурировать в разные столбцы для создания отзывчивых контрольных точек. Мы должны отказаться от фантазий об отзывчивом веб-дизайне, никто не ожидает, что один единый дизайн может гибко реагировать на 10 устройств.

ИИ, PWA, UX копирайтинг, голосовые интерфейсы и многое другое….

17. UX копирайтинг, микротекст и индивидуальность бренда

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

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

Очень приятно получить дерзкое «Спасибо, детка!», когда вы добавляете товар в корзину для покупок. И кто сможет сопротивляться этому сообщению из Medium: «Вы верите в судьбу?». Невозможно не нажать на этот «призыв к действию».

Многие года до этого мы снова и снова выбирали в своих интерфейсах один и тот же старый стандартизированный обмен сообщениями.

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

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

18. Прогрессивные веб-приложения – это новый отзывчивый дизайн

Мы можем официально сказать, что прогрессивные веб-приложения (Progressive web apps или PWA) – это новый стандарт, что-то вроде нового отзывчивого веб-дизайна, благодаря преимуществам, которые они предоставляют. Мобильные версии не являются сокращенными версиями приложения, это другой опыт, который можно и нужно оптимизировать для обеспечения хорошей производительности, индексации и конверсий.

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

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

19. Дизайн-системы

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

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

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

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

20. ИИ повсюду, проектирование для конфиденциальности и безопасности

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

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

Как вы можете прочитать в нашей электронной книге «AI Driven Design», есть множество примеров, когда ИИ ошибался и был расистом, сексистом и так далее. Но, с другой стороны, у нас есть множество положительных примеров, таких как LYNA, который использует Google Computer Vision для выявления рака молочной железы, правильно идентифицируя паттерны метастазирования в 99% случаев по сравнению с 62%, обнаруженными врачами-патологами.

21. Машинное обучение, посредством веб-технологий

Что мы понимаем под машинным обучением, что такое модель? Как она обучается, и как мы можем ее реализовать? К счастью для нас, этот год был полон примеров веб-экспериментов с искусственным интеллектом. Многие из них можно легко использовать в наших проектах или для создания прототипов других экспериментов, поскольку они основаны на библиотеках JS, таких как TensorFlow.js, , для этого не требуется особенно сложная серверная архитектура. TensorFlow.js – очень мощный инструмент, основанный на Node.js. которые мы можем использовать с существующими моделями javascript ML или даже создавать свои собственные, обучая их или переобучая существующие модели, используя данные, поступающие с датчиков, подключенных непосредственно к браузеру. Мы взаимодействуем только с клиентской стороной, поэтому ответ очень быстрый.

22. Год виртуальных помощников

В этом году виртуальные помощники пришли в массы и зарекомендовали себя как потребительский продукт. Siri и Google Assistant уже широко используются на мобильных устройствах и в скором времени станут частью бытовой техники. Google Home и особенно Alexa разрабатывают огромные экосистемы, которые позволяют нам взаимодействовать с ними и интегрировать их в продукты и услуги.

Согласно этому отчету Amazon, с 1 сентября 2020 года было разработано более 50 000 навыков Alexa.

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

23. Меньше приложений и больше мультиплатформенной интеграции

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

24. Голосовые интерфейсы

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

В известном отчете Gartner о новых технологиях прогнозируется, что в 2020 году 30% посещений веб-сайтов будут осуществляться посредством голоса, и, по оценкам ComScore, в том же году 50% всех поисковых запросов будут осуществляться посредством голосового интерфейса.

25. Визуальный поиск

Камера – это новое окно поиска, многие приложения в конечном итоге представят поисковую систему, уже используемую в Pinterest Lens, AliExpress и Google Lens.

Amazon был пионером в области визуального поиска с функцией Flow в 2014 году. Flow в настоящее время неактивна. Она использовала распознавание изображений для поиска продуктов.

Snapchat, как ранний последователь AR, не собирался упускать возможность визуального поиска. В сентябре 2020 года была анонсирована новая функция в стратегическом сотрудничестве с Amazon. Эта новая функция Snapchat позволяет пользователю «сканировать» штрих-коды с помощью камеры. Если результат положительный, отображается дополнительная информация о продукте или «дополняется» в виде карточки Amazon с другими аналогичными продуктами и кнопкой «Купить».

26. Будущее – это 3D

За последние несколько лет акции и сообщества 3D-ресурсов значительно выросли, и их ждет светлое будущее. Это было связано с созданием игр для рынка мобильных приложений, которое стало проще благодаря таким инструментам, как Cinema 4D, Blender и Unity, а появление 3D-печати стало еще одним фактором роста. На сегодняшний день существует множество сообществ, таких как Sketchfab, предлагающих замечательные ресурсы для загрузки, покупки и продажи моделей, которые можно использовать в любых средах, WebGL, играх и 3D-печати. Существует неограниченное количество сцен, созданных с помощью таких VR-инструментов, как Tilt Brush и Google Blocks. Еще одно известное сообщество – Poly от Google, отличный ресурс для загрузки низкополигональных 3D-ресурсов, идеально подходящих для WebGL, VR и AR.Существует множество 3D-сообществ, ориентированных на 3D-печать с открытым исходным кодом, таких как MyMinifactory, Thingiverse и CGTrader.

27. Преобразование дополненной реальности и рай для создателей контента

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

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

Такие технологии, как AR, VR и их микс смешанная реальность (MR) и расширенная реальность (XR) добавят больше слоев информации, что потребует много работы с точки зрения проектирования интерфейсов и контента. Одним словом, прекрасная возможность для творцов.

Как мне заполучить эту удивительную книгу, которая изменит мою жизнь?

Мы думаем, что после прочтения этой статьи вам не терпится прочитать нашу новую книгу, верно? К сожалению, тираж печатной версии полностью распродан. Если вы хотите получить копию книги, вам придется приехать на одну из наших грядущих конференций в 2020 году в Сан-Франциско или Нью-Йорк, поскольку мы раздадим их в приветственных пакетах. Но не бойтесь, вы также можете приобрести цифровую версию прямо здесь.

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Олейник Антон

Тимлид в продуктовой компании. Проектирую интерфейсы веб-сайтов и мобильных приложений. Люблю типографику и простые понятные интерфейсы.

20+ вдохновляющих сайтов с плоскими иллюстрациями в дизайне

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

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

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

1. Creddy

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

2. Modus Leadership

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

3. Pitch Tents

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

4. Minergie

Юбилейный сайт швейцарской строительной компании использует плоский дизайн, CSS3/HTML5 и анимированные векторные иллюстрации на компактной главной странице.

5. Психология и бизнес

Новый дизайн для сайта компании «Психология и бизнес» от веб-студии ReConcept. Разработчик уверяет, что на подбор стиля для иллюстраций ушло 90% времени. В результате решено было иллюстрировать сайт в спокойной палитре цветов.

6. ABC Dental

Красиво проиллюстрированный сайт стоматологической клиники из Техаса. Светлые легкие текстуры фона и забавные CSS-анимации уже с главного экрана настраивают на позитив.

7. Debiopharm Group

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

8. Insurance Experiments

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

Сайт калифорнийской правовой компании из 40 юристов. Название юр.фирмы и доменное имя символизируют 911-помощь (в рунете есть адвокат-911.рф, www.9111.ru). Тут, для лаконичного представления услуг подходит компактный дизайн с понятным интерфейсом, интерактивом и флэт-иллюстрациями.

10. Inside the Head

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

11. Kasra Design

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

12. Reech

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

13. Studio Pigeon

Польская студия специализируется на разработке персонажей. Сайт наполнен плоскими иллюстрациями и flat-видео.

14. HEADSPACE

Приветливым flat-дизайном с забавными персонажами, зацикленной / скролл анимацией, веб-ресурс добивается клиентской лояльности. Свободное пространство с мягкими контрастами пастельных оттенков, довершая образ удобного e-mail сервиса, позволяют укрупнить кнопки с призывами им воспользоваться.

15. Ruya

Сайт дубайского бренд-маркетингового агентства добавляет градиентную тень, делая векторные иллюстрации «мягкими». Главный экран и разделы, оформленные в оригинальном стилистике с эффектом осветления выглядят чистенькими и аккуратными. WordPress сайт использует Css3/Html5, Jquery,WebGL.

16. Etch Design Studio

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

17. Malika Favre

Впечатляюще оформлен плитками персональный сайт-портфолио иллюстраторши Малики Фавр, которая выросла во Франции, в семье хиппи. Потомственная художница стала замечательным иллюстратором и графическим дизайнером, а бунтарский дух движения проявился в творчестве (См. eCommerce проект 18+ Малики The Kamasutra). Смелое совмещение стилей Поп-Арт и Optical Art оценили престижные клиенты: издания The New Yorker, Vogue, BAFTA, агентство Sephora and Penguin. Портфолио на главной странице представлено сплошным коллажем иллюстраций с красиво анимированными GIF.

И напоследок

Сайты известных иллюстраторов, интересно и оригинально использующих в своем творчестве стиль Flat:

Блог о дизайне и веб-мастеринге
Полезные ресурсы для разработчиков и дизайнеров
Статьи о движке WordPress и сервисе Twitter

Лучшие статьи категории «Веб-сайты»

Подписка

  • Статьи (500+)
  • Twitter (2350+)
  • Google Plus (150+)
  • E-mail подписка
  • Реклама
  • О блоге и команде

Использование иллюстраций в веб-дизайне

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

Начнем с основных задач, которые ставятся перед иллюстрацией:

  1. Графическая составляющая сайта или сервиса
  2. Примеры работ, объектов или каких-либо вещей
  3. Визуальное пояснение и украшение данных

Можно перечислить еще несколько задач, но они, так или иначе, будут пересекаться с теми, что мы описали выше. Так же, как правило, при разработке дизайна, эти задачи совмещаются и объединяются для большей эффективности. Если вы зададите себе вопрос о роли иллюстрации на странице, то, в большинстве случаев, вы назовете как минимум две, из указанных задач. Тем не менее, это не означает, что дизайн не может быть успешным и функциональным, если выполняется только одна задача. В этом вы убедитесь в ходе изучения примеров, которые вы найдете в статьях из рубрики «Иллюстрации».

Тематические иллюстрации

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

Иллюстрации талисманов

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

Иллюстрированные украшения

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

Иллюстрированный текст

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

Информационные иллюстрации

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

Заключение

Количество сайтов с иллюстрациями необычайно велико, поэтому мы настоятельно рекомендуем прочитать и посмотреть продолжение этой статьи, а также обратить внимание на всю рубрику «Веб-сайты» в целом.

Похожие статьи

Комментарии (4)

Igor / 5 Декабрь 2011 в 14:20

Очень интересные примеры оформления. Особенно понравился html cafe, не знаю почему. Когда нибудь и себе подобный дизайн нарисую. Вообще нарисовать — не проблема, а вот переложить на движок вордпресс пока не получается, учусь. Ваш сайт в закладки, однозначно!

Илья Федотов / 5 Декабрь 2011 в 18:50

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

Igor / 8 Декабрь 2011 в 16:50

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

Мебляр / 14 Декабрь 2011 в 11:30

Дизайнерский шрифт — прекрасная возможность приукрасить страницы своего ресурса.

16 лучших примеров дизайна главной страницы сайта

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

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

Что делает хороший дизайн главной страницы сайта

1) Дизайн главной страницы четко отвечает на вопрос «Кто я?», «Что я предлагаю?» и/или «Что пользователь может сделать здесь?»

Если вы представляете хорошо известный бренд ( например, Coca-Cola ), вам может сойти с рук отсутствие описания того, кто вы и что вы делаете. Но большинство компаний должны отвечать на эти вопросы, так чтобы каждый посетитель знал, что он находится в « нужном месте ». Если пользователи в течение нескольких секунд не смогут понять, что вы делаете, долго они не задержаться.

2) Резонанс с целевой аудиторией

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

3) Сообщение о ценном предложении

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

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

5) Включает в себя призыв к действию (СТА-элемент)

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

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

6) Постоянно изменяется

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

7) Использует отличный общий дизайн

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

Вдохновляющий веб-дизайн: 16 лучших дизайнов главной страницы

1) FreshBooks

Этот дизайн гениален, потому что:

  • Прост в использовании. Возникает много споров о том, какие домашние страницы лучше — короткие или длинные. Если вы выберете последний вариант, то должны обеспечить легкое прокручивание и чтение. Эта страница выглядит практически как история;
  • Удачно использовано сочетание цветов и позиционирование первичных СТА-элементов . Когда заходите на главную страницу сразу становится понятно, что компания хочет привлечь ваше внимание;
  • Очень заманчивый текст на СТА-элементе : « Попробуйте бесплатно в течение 30 дней »;
  • Эффектный подзаголовок: « Для более чем 5 миллионов людей, использующих FreshBooks , отправлять счета и следить за расходами теперь не проблема ». Это заявление привлекательно для целевой аудитории, потому что освоение бухгалтерского программного обеспечения, как правило, « мучительно сложно » для фрилансеров и владельцев малого бизнеса.

2) Airbnb

  • Это оформление главной страницы сайта пример впечатляет: она встречает посетителей полноэкранным видео с красивыми кадрами, высокого разрешения. Она рассказывает о путешественниках, которые проводят время, как будто они местные жители: готовят пищу на кухне, покупают местные сыры. Выглядит очень естественно и достоверно;
  • Прямо по центру главной страницы располагается форма поиска с местом назначения и датой прибытия/отбытия, которую ищет большинство посетителей, направляя пользователей к следующему логическому шагу;
  • Форма поиска « умная «: она автоматически отобразит последний поиск пользователя, если тот авторизован;
  • Основной призыв к действию (« Поиск «) контрастирует с фоном и выделяется, а вторичный призыв к действию виден в верней части.

3) Mint

  • Это супер простой дизайн с сильным заголовком и подзаголовком без сленга;
  • Домашняя страница обеспечивает безопасную, но спокойную атмосферу, что очень важно для продукта, который обрабатывает финансовую информацию;
  • Он также содержит простой и убедительный призыв к действию: « Зарегистрируйтесь бесплатно «. Дизайн CTA также замечателен — иконка в виде замочка попадает точно в цель, сообщая о безопасности еще раз.

4) Dropbox(Consumer)

  • Главная страница сайта Dropbox — пример предельной простоты. Ограничено использование рекламы и видеороликов, а также объединено все фоновое пространство;
  • По статическому скриншоту выше трудно понять, но этот оформления сайтов вариант привлекает внимание тонким использованием причудливой анимации в графике;
  • Подзаголовок — простой, но мощный: « Открывайте свои файлы где угодно и на любых устройствах, и без труда предоставляйте к ним доступ ». Не нужно расшифровывать какую-либо терминологию, чтобы понять, что делает Dropbox ;
  • Акцент на одном первичном призыве к действию: « Зарегистрируйтесь бесплатно «.

5) Dropbox(Business)

  • Это яркий пример обеспечения поддержки сайта для разной аудитории. Она отличается от главной страницы, которая изначально была создана для потребителя ( смотрите выше ). Бизнес-пользователи требуют больше информации, а также дополнительное подтверждение того, что Dropbox(Business) — безопасное и масштабируемое решение для компаний ( проблему восприятия Dropbox решает непосредственно на своей домашней странице );
  • Dropbox по-прежнему продолжает применять простой дизайн и брендинг. Он включает в себя только то, что важно: большое изображение с поддержкой рекламы и кнопку « Попробуй бесплатную 30-дневную ознакомительную версию «, призывающую к действию.

6) Whitehouse.gov

  • Создание сайта, который выступает за целую нацию — задача не из легких. Whitehouse.gov постоянно меняется, чтобы отразить главные проблемы и приоритеты. Тестирование и оптимизация — ключевой компонент блестящего дизайна домашней страницы;
  • Что особенно замечательно в Whitehouse.gov так это отличие от большинства сайтов, связанных c правительством. Он имеет чистый дизайн и способствует развитию сообщества;
  • Довольно легко найти то, что вы ищете, когда оказываетесь здесь. А если вы не можете сразу найти то, что нужно, есть удобное поле поиска.

7) 4 Rivers Smokehouse

  • В сочетании с большой картинкой для оформления сайта заголовок « ГРУДИНКА. 18 лет мастерства. Для вашего удовольствия » звучит заманчиво;
  • Прокрутка параллакса проведет для вас краткую презентацию услуг, меню и покажет людей, прекрасно проводящих время – прекрасное использование популярного дизайнерского тренда.

8) Cobb Pediatric Therapy Services

  • Заголовок и подзаголовок обращаются к эмоциональной стороне посетителей: « Работайте с компанией. Это стоит того. Доверьтесь нам. Мы были там тоже. Мы найдем вам работу там, где вы сможете полностью проявить себя » Это предложение является уникальным и убедительным;
  • Заголовок находится на вращающейся карусели, которая учитывает категорию посетителей, от соискателей до людей, ищущих психотерапевта для своих школ;
  • Есть несколько путей для посетителей, по которым можно пройти на страницу. Но призы к действию расположены хорошо, сформулированы просто и контрастируют с остальной частью страницы.

9) Jill Konrath

  • Дизайн простой и переходит прямо к делу. Из заголовка и подзаголовка сразу понятно, чем занимается Джилл Конрэт ( и как она может помочь вашему бизнесу );
  • Также предоставляется легкий доступ к аналитическим материалам Джил , что важно для установления ее авторитета в качестве основного докладчика;
  • Легко подписаться на рассылку новостей и установить контакт – два ее основных призыва к действию;
  • Включает в себя логотипы новостных каналов и отзывы, как социальное признание – все правила оформления сайта соблюдены.

10) Evernote

  • За эти годы Evernote превратился из простого приложения, сохраняющего записи в набор инструментов для бизнеса. Это не всегда легко передать на домашней странице, но Evernote проделал хорошую работу по компоновке возможных сообщений в несколько ключевых преимуществ;
  • Эта домашняя страница использует сочетание насыщенных, приглушенных цветов в видео, а также подписи ярко-зеленого и белого цвета, чтобы выделить их на общем фоне;
  • После простого заголовка (« Помни все »), взгляд останавливается на призыве к действию « Зарегистрируйтесь Бесплатно ».

11) Telerik by Progress

  • « Скучное предприятие » — это не то чувство, которое возникнет, когда вы зайдете на сайт Telerik . Компания предлагает множество технологий и продуктов, использует смелые цвета, интересные дизайны и видеосъемку с энергетикой подобно Google . Одним из важных аспектов является создание обстановки, чтобы посетители чувствовали себя желанными и знали, что имеют дело с реальными людьми;
  • Мне нравится простой, выполненный на высоком уровне обзор шести товарных предложений. Это абсолютно понятный способ сообщить о том, что делает компания;
  • Реклама несерьезная и легко читается. Они говорят на языке своих клиентов.

12) Boxbee

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

13) eWedding

  • Для влюбленных, планирующих важный день, eWedding – прекрасное место для создания свадебного сайта. Домашняя страница не загромождена и включает в себя только необходимые элементы;
  • Подзаголовок « Создано более чем 800,000 свадебных сайтов! » — это большое социальное доказательство;
  • Включает в себя отличные видеоролики продукта, отличный заголовок и убедительный призыв к действию, который уменьшает сомнения благодаря тексту: « Создайте сайт ».

14) Basecamp

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

15) charity: water

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

16) TechValidate

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

Данная публикация представляет собой перевод статьи « 16 of the Best Website Homepage Design Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

25 веб-сайтов с привлекательными иллюстрациями

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

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

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Шаблоны одностраничных веб-сайтов

Креативные примеры дизайнов одностраничных веб-сайтов

Бесплатный сувенир: Комплект векторных иллюстраций

Подборка оригинальных веб-дизайнерских находок, вдохновляющих на творчество

Яркие впечатляющие иллюстрации в графическом дизайне: 36 примеров

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

35 оригинальных веб-дизайнов с векторными иллюстрациями

Вкусные иллюстрации напитков от Фабио Рекса

Неистовые впечатляющие автомобили (иллюстрации погони) в искусстве CGi

35 фотоиллюстраций, которые несомненно произведут на вас впечатление

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

Армированный скотч — назначение и характеристики

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

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

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

Иллюстрации в веб-дизайне

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

Многие запоминающиеся сайты базируются на иллюстрациях, которые придают им оригинальный внешний вид. Яркий тому пример – дизайн сайта War Child. Его дизайнеры могли бы прибегнуть к фотографиям, использовав их как средство выражения соответствующего посыла. Однако иллюстрация создает намного более оригинальный образ, и сайт просто невозможно забыть после посещения.

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

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

Для примера рассмотрим сайт Bellstrike. Изображения не являются центральными элементами, как в случае с War Child. Иллюстрации были использованы для создания стандартных компонентов сайта. С этой точки зрения почти любой сайт можно было бы считать выполненным в иллюстрационном стиле, а разница заключалась бы в художественном подходе, который демонстрирует уникальную личную задумку.

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

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

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих