Дизайн сайта 2018 примеры: не только цвет года Pantone

Содержание

не только цвет года Pantone

Законодатель цветовых трендов Pantone 6 декабря 2018 года объявил цвет года. Им стал «Живой Коралл 16-1546»:

Pantone написал о том, где можно с успехом использовать этот «жизнеутверждающий цвет»

В сети уже подхватили тренд и показали, какими будут все сайты в 2019 году:

Но одним лишь цветом дизайнеры не обойдутся. Вместе с руководителем отдела дизайна TexTerra, Святославом Грошевым, мы рассмотрим, что нового в дизайне на 2019 год:

Основные тренды.
Тренды дизайна упаковки.
Тренды в дизайне пользовательского интерфейса и опыта (UI/UX).
Тренды в типографике.
Тренды в моушн-дизайне.
Тренды в брендинге и дизайне логотипов.

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

Основные тренды

Яркие цвета

Тренд плавно кочует из 2018 в 2019 год.

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

Асимметричность

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

Анимированная графика

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

Использование градиентов

Тренд начал оформляться в 2017-ом, укрепился в этом году и будет актуален в 2019. А еще он активно используется в брендинге.

Как создать макет в Figma

Изометрические иллюстрации

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

Актуальности тренд не теряет и смело шагает в 2019 год.

Дополненная реальность (AR)

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

Пример дополненной реальности (AR)

Уникальные и аутентичные фотографии

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

Как обработать фото онлайн: 90+ инструментов для работы с изображениями

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

Выделить что-то одно и сделать красиво: тренд решает такую задачу. Нет – «мусорному» дизайну. Да – смыслу!

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

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

Тренды дизайна упаковки

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

Тренды в дизайне пользовательского интерфейса и опыта (UI/UX)

Интерфейс мобильных приложений

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

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

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

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

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

Фото для блога: 40 источников бесплатных картинок для коммерческого использования

Иллюстративные значки

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

Жидкие, геометрические и асимметричные фигуры

Liquid Forms были в тренде и в 2017, и в 2018. Комбинируя их с градиентами и яркими красками, дизайнеры по-прежнему задают тон в индустрии.

Гайд по созданию визуального контента: инструменты и практика

Видео на фоне

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

Пример фонового видео на сайте

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

Micro Interactions – анимированные элементы, которые используются в создании визуальных эффектов в мобильных платформах. Поскольку в пользовательских интерфейсах (UI) сегодня множество элементов, не так уж сложно обнаружить там такие взаимодействия.

Жирные шрифты как альтернатива изображениям

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

«Разорванная» модульная сетка и перекрывающиеся элементы

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

Трехмерные иллюстрации

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

Тренды в типографике

Акцент на типографику

Шрифты из «подручного средства» все больше становятся самостоятельным элементом в дизайне.

Собственные шрифты

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

Большие и смелые шрифты

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

Контурная типографика

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

Использование шрифтов с засечками

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

[Запись вебинара] Какой должна быть типографика на сайте?

Тренды моушн-дизайна

Зернистость

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

Плоская 2D-анимация

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

Видеоинфографика, сделанная в шуточном стиле для компании «Жалюзи. рф»

Трехмерная графика в анимации

Рекламное видео, выполненное в 3D-графике, показывает хорошую конверсию – это зрелищно и красиво. Бренды продолжат использовать тренд в 2019 году. И не только они (привет, «Диснею»!).

Делаем живые изображения из статичных. Подробнее

Тренды в брендинге и дизайне логотипов

Коллеги из Logaster собрали и прокомментировали лого-тренды 2019 года.

Упрощение

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

Потерянные фрагменты

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

Текстовые лого

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

Градиент

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

Неон

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

Акцент на деталях

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

Вертикальное размещение

Совсем недавно Letter stacking вдохновлял дизайнеров на эксперименты с выстраиванием надписей на текстовых логотипах. В 2019-м вертикально ориентированные тексты будут дополнены другими элементами, позволяя создавать оригинальные и смелые композиции. Из-за сложностей с использованием вертикальных лого (например, в шапке сайта) этот тренд может не стать долгосрочным, но интересным он является однозначно.

Углы и сгибы

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

Округлость

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

Полоски

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

Hand-drawn

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

Тонкие линии

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

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

Гербы и эмблемы

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

Благодарим коллег из Logaster за ра

20 актуальных графических приёмов — Дизайн на vc.ru

{«id»:32555,»url»:»https:\/\/vc.ru\/design\/32555-dizayn-v-2018-godu-20-aktualnyh-graficheskih-priemov»,»title»:»\u0414\u0438\u0437\u0430\u0439\u043d \u0432 2018 \u0433\u043e\u0434\u0443: 20 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u0451\u043c\u043e\u0432″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/32555-dizayn-v-2018-godu-20-aktualnyh-graficheskih-priemov»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk. com\/share.php?url=https:\/\/vc.ru\/design\/32555-dizayn-v-2018-godu-20-aktualnyh-graficheskih-priemov&title=\u0414\u0438\u0437\u0430\u0439\u043d \u0432 2018 \u0433\u043e\u0434\u0443: 20 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u0451\u043c\u043e\u0432″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/32555-dizayn-v-2018-godu-20-aktualnyh-graficheskih-priemov&text=\u0414\u0438\u0437\u0430\u0439\u043d \u0432 2018 \u0433\u043e\u0434\u0443: 20 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u0451\u043c\u043e\u0432″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/32555-dizayn-v-2018-godu-20-aktualnyh-graficheskih-priemov&text=\u0414\u0438\u0437\u0430\u0439\u043d \u0432 2018 \u0433\u043e\u0434\u0443: 20 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u0451\u043c\u043e\u0432″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect. ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/32555-dizayn-v-2018-godu-20-aktualnyh-graficheskih-priemov»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0414\u0438\u0437\u0430\u0439\u043d \u0432 2018 \u0433\u043e\u0434\u0443: 20 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u0451\u043c\u043e\u0432&body=https:\/\/vc.ru\/design\/32555-dizayn-v-2018-godu-20-aktualnyh-graficheskih-priemov»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

82 379 просмотров

7 ТРЕНДОВ ВЕБ-ДИЗАЙНА 2018 ДЛЯ СОЗДАНИЯ ИДЕАЛЬНОГО САЙТА

Легко впасть в снобизм, рассуждая о трендах веб-дизайна 2018: мол, что такого креативного в том, чтобы следовать за модой? Конечно, креатив — это непрерывный поиск, поэтому стоит относиться к понятию «тренды web-дизайна» как к подсказке, путеводной нити. Можно принимать или отвергать их, но о них стоит знать, учитывать их при решении, как придумать дизайн сайта.

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

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

Анимация и микровзаимодействия

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

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

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

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

Можно также анимировать навигацию и меню, сделать анимированную галерею или слайд-шоу.

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

3D-графика

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

3D фигурирует в кейсах веб-дизайна с 2011 года, когда был запущен WebGL — java-скрипта для создания 3D-графики без дополнительных программ прямо внутри совместимого браузера. В последующие годы дизайнеры с воодушевлением работали с возможностями, которые им давало 3D.

Пару лет назад первоначальная волна шумихи спала. Но сегодня новый подъем интереса к 3D подогревается более обдуманными и интересными способами его использования. Раньше 3D вставляли ради него самого — чтобы удивить пользователя: «Смотри, это же 3D!» Теперь 3D из цели превратилось в средство, способ создать интересное впечатление от сайта в целом. Сайты, умело применяющие 3D, обычно получают призы дизайнерских конкурсов.

Фишки и новинки 3D могут быть маленькими и аккуратными, а могут раздуваться до эпических размеров. Кто-то использует красивые анимированные заголовки в стиле стрит-арта; кто-то генерирует целые фантастические города; кто-то превращает меню из обычного списка во вращающийся многогранник. Посмотрите на такие завязанные на дизайне платформы, как Behance, Dribbble or Pinterest.

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

Полуплоский дизайн и иллюстрации

К числу современных трендов стоит отнести полуплоский дизайн и иллюстрации (Semi-flat design). Этот тренд пришел на смену скевоморфизму, чтобы удовлетворить меняющиеся вкусы потребителей и воспользоваться новым витком технологий.

Полуплоский дизайн (его еще называеют Flat 2.0) — это возвращение к относительной объемности изображения и красочному интерфейсу. С помощью кода в него добавляются большие цыетные тени. Во многом тут чувствуется влияние шведской школы художественного минимализма и гугловского Material design. Semi-flat привнес в дизайн объем и реалистичность, добавил контраста.

Перечислим плюсы этого стиля:

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

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

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

Широкие шрифты

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

Всякий шрифт обладает собственным характером. Сегодня в веб-дтзайне популярны широкие шрифты (Extended Fonts). Дизайнеры шутят: «Много текста, мало места — используй сжатый; мало текста, много места — бери широкий». Но дело не совсем в этом.

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

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

Как правильно пользоваться широкими шрифтами, в каких случаях их следует применять?

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

SaaS-приложения

Трендом последних лет стал расцвет SaaS-приложений для дизайнеров. SaaS расшифровывается как «Software as a Service» (ПО как услуга). Речь идет об онлайн-инструментах, доступ к которым осуществляется по платной подписке. В последнее время появилось много действительно полезных сервисов, таких как Invision, Figma, Avocode.

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

Теперь дизайнеры могут платить ровно за тот объем использования ПО, который им нужен. Это добавляет дизайнеру гибкости, он уже не привязан к одному-двум инструментам, и может воспользоваться новым приложением (или набором приложений) для каждого нового проекта. С тех пор, как SaaS утвердились на рынке, стало гораздо проще работать в сфере digital вообще и в веб-дизайне в частности.

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

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

Ломанные сетки

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

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

Так зачем же эту структуру нужно ломать?

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

Ломать сетку можно с помощью слоев. Слои помогают отойти от сетки, сохраняя единство дизайна. Пользователи невольно обращают внимание на элементы, которые пересекают границы панелей, находятся как бы поверх них. Если таких элементов несколько, то пользователь мысленно связывает их между собой. Но нужно оставить пользователю возможность скрыть подобные элементы.
Намеренные пустоты. Дизайнеры нередко отходят от сетки, чтобы создать больше пустого пространства и сфокусировать внимание на конкретных элементах — тексте или логотипе. Например, можно оставить больше свободного пространства вокруг плашки с призывом к действию (call to action).
Поместите элементы в контейнер, обведите их общей рамкой. Это позволяет объединять элементы, когда сетка сломана. Нарисуйте нужные границы на фоне, чтобы пользователь догадался, какие элементы связаны между собой.

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

Шум в дизайне

Последним трендом, о котором мы сегодня поговорим, является шум в дизайне (noise in design) — еще один оригинальный способ добавить изображениям объема и пространственности. Как и полуплоский дизайн — это реакция на минимализм предыдущего периода, стремление вернуть картинке детали, наполнить ее элементами.

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

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

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

тенденции графического дизайна – 2018

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