Стили веб дизайна: минимализм, ретро, футуризм, гранж, Metro и др.

Содержание

6 стилей веб-дизайна — «ДоменАРТ»

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

Основные стили

Минимализм – предполагает минимум используемых материалов и простоты, логика, упорядоченность, некоторая сухость, девиз: совершенство не в том, что нечего добавить, а в том, что нечего убрать!

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

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

Гранж – сайт с намеком на ретро, все состаренное, затертое. Джинсы рваные, бумажные обертки разбросаны, идея: нам все по фигу! Или: небрежность и удобство. Условно к этому стилю можно отнести стиль игровых сайтов с картинками фэнтези;

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

бизнес со скоростью мысли.

Промо – само название говорит о функциональном назначении стиля, это стиль продвижения. Много графики, коллажи, градиенты, спецэффекты. Очень часто такой стиль используется для презентаций, создания портфолио. Девиз: я – лучший!

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

Читать также:

Дизайн сайта продаж

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

13.04.2018

Яндекс.Директ отбирает работу у веб-дизайнеров

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

25.11.2016

Стили в веб-дизайне: гранж

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

26.11.2013

Основные стили веб-дизайна

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

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

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

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

Цвет в дизайне веб-сайта

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

Дизайн сайта по количеству графики

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

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

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

Структура сайта

Различают 4 основные структуры сайтов, это:

Минимальная структура;
Двухколоночная;
Трехлоконочная;
Сложная структура.

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

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

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

Дизайн сайта должен соответствовать разрешению экрана. Самое популярное разрешение экрана это 1280х1024 и большинство дизайнов рисуется под такой параметр.

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

Фиксированный дизайн — стандартный подход, при любом разрешении экрана ширина не меняется.

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

Распространенные стили веб-сайтов

Наиболее распространенными стилями в дизайне являются:

Классический;
Журнальный;
Мультипликационный;
Гранжевый;
Ретро-стиль;
Футуристический
Векторный;
Бизнес-стиль.

Классический дизайн. Такое оформление в веб-сайтах встречается очень часто, обычно это современный дизайн в стиле WEB 2.0.

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

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

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

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

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

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

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

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

Еще статьи по теме:

Популярные стили WEB-дизайна. Какой выбрать?

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

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

Минимализм

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

Как правило, минимализм это:

Простые геометрические формы
Простые цвета (черный, белый, серый) – не более трех на проект
Однотонный фон.
Минимум шрифтов – простая типографика.
Отсутствие теней, градиентов или их незначительное присутствие.
Понятный, функциональный UI.

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

Сайт натуральной косметики в минималистичном стиле

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

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

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

Blog and form by Bogdan Nikitin

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

Стили веб дизайна

Оглавление

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

1. Введение. Необходимость классифицирования.

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

Тогда я решил поискать существующий теоретический материал по этой теме. Было найдено множество информации отечественных и зарубежных авторов, усвоить которую оказалось непростым делом. Одни авторы разделяли стили веб дизайна, исходя из источника возникновения (те же готические сайты, стиль чертежей и моделей, кибер-панк, стиль бумажных пакетов и т.д.) , другие полагались на сферу применения (домашние странички, фирменные сайты, корпоративные сайты, контентные сайты). Встретил даже такую необычную классификацию сайтов Рунета: сайты в стиле Артемия Лебедева и сайты в стиле Василия Пирогова. Первые известны чистотой дизайна и кода, выверенной логической структурой сайта, соблюдением правил юзабилити и русского языка. Вторые пропагандируют объективно красивый дизайн, применяя элементы окружающей нас действительности, воздействуя в своих работах на эмоциональную сферу посетителя сайта.

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

Что такое классификация? Это не что иное, как условное распределение всей совокупности веб сайтов по группам в соответствии с какими-либо общими признаками.

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

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

2. Обзор существующих классификаций стилей веб дизайна.

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

Классификация Курта Клонингера (Curt Cloninger).

HTMинимаLизм. (HTMinimaLism School ).
Мондриановский плакатный стиль. (Mondrian Poster School).
Табличный пиктографический стиль. (Grid-Based Icon School).
Суперминиатюрный, в стиле Сим Сити. (SuperTiny SimCity School).
Низкокачественный грандж. (Lo-Fi Grunge School).
Стиль бумажных пакетов. (Paper Bag School).
Готический органический стиль. (Gothic Organic School).
Пиксельный панк-рок стиль. (Pixelated Punk Rock School).
Стиль чертежей и моделей. (Drafting Table/ Transformer School).
Стиль 1950-х «Привет, Китти!» (1950s Hello Kitty School).
Солнечный схематичный стиль семидесятых. (1970s Dayglow Outline School).
Аналоговый стиль ручного рисунка. (Hand-Drawn Analog School).
Пустынный ковбойский стиль. (Dusty Cowboy School).

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

Персональная страничка.
Некоммерческие сайты.
Корпоративные сайты.
Контентные сайты.

В сети Интернет встречается множество других классификаций. Некоторые из них являются интерпретированными графическими стилями. Некоторые разделяются по технике исполнения, например, векторные, растровые. Разделяют также сайты по способу верстки: табличные, блочные. Попадались такие названия стилей, как чистые, футуристические, Web PopArt, классические, художественные и даже «отстойные».

3. Основные аспекты формирования стиля веб дизайна.

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

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

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

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

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

Способы обработки изображений. Технические приемы. Для каждого стиля веб дизайна присущи свои методы и приемы. Например, векторная или растровая обработка изображений. Разумное применение анимации, различных технологий (Flash, JavaScript, DHTML…). Различные методы художественной отрисовки элементов. На одних сайтах допустима компьютерная графика, на других идеально подходит качественно обработанная фотография, на третьих необходима 3D визуализация.

4. Актуальная классификация стилей веб дизайна.

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

Готический органический стиль.
Табличный стиль, пиктографический.
Минимализм. Миниатюрный стиль.
Текстовый стиль.
Плакатный стиль.
Журнальный стиль.
Стиль кибер-панк. Пиксельный панковский дизайн. Футуристический стиль. Стиль хай-тек.
Стиль хиппи. Стиль дневного света и цветов.
Стиль грандж.
Стиль Web 2.0.

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

Обзор стиля.
Цели и применение.
Источник вдохновения.
Технические приемы.

6. Заключение. Советы заказчикам и веб дизайнерам.

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

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

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

На сегодняшний день по данным исследовательской компании Netcraft, количество сайтов, работающих в интернете по состоянию на 31 мая 2007 года, достигло отметки в 122 000 635 сайтов. Задача дизайнеров, художников и, особенно, заказчиков создавать красивые сайты, создавать новые стили, течения и движения в веб дизайне. Стоит подхватывать новые идеи, рисковать, создавая что-то новое. Интернету нужен Креатив в истинном смысле. В осуществлении этой задачи и работает коллектив студии веб дизайна TopCreative, наряду с другими командами профессионалов.

Рустам aka _malysh_, дизайнер студии TopCreative

Свежие стили для вашего сайта — Частные вопросы веб-дизайна

Введение

Проблема: Большинство сайтов США очень схожи по внешнему виду и дизайну. Все это связано с кровосмешением. Считается, если так делает microsoft.com, значит это должно присутствовать на любом профессиональном корпоративном сайте. Потому то все сайты и выглядят как сайт Microsft (или Adobe, или Ebay, или …)

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

Где НЕ СЛЕДУЕТ черпать новые дизайнерские идеи:

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

Где же поднабраться свежих дизайнерских идей?

Экспериментальные домашние страницы и сайты фирм, никогда не работавших в издательском деле. Для них Web — не новая информационная среда, для них Web — ЕДИНСТВЕННАЯ среда. Они не рассматривают журналы в поисках идей. Они любуются медицинскими картами, интерфейсами программ 80-х годов, корзинками для грибов, мультфильмами и собственно самим окном броузера. Их экспериментальные стили уже наполняют Web. По мере того, как путешественники по Web-у привыкнут к нему, ирония, юмор и насмешка над собой станут ценными маркетинговыми идеями. Многие телевизионные рекламные клипы уже сейчас подшучивают над тем, что они являются рекламой.

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

Десять свежих стилей для вашего сайта

A. Готическая органическая школа

источник вдохновения: человеческое тело/арабский алфавит
приемы: неправильные органические формы, коллажи из реальных предметов, абстрактные анимированные гифы низкого разрешения в качестве фона, прозрачные анимированные гифы в качестве текстурного фона, верстка подразумевает и использует вертикальную прокрутку страницы
домашние страницы/дизайнерские фирмы: Entropy8, Greyscale, SmokeymonkeyS
примеры коммерческих сайтов: Conscience Records, Janet Jackson

B. Школа проволочного стиля

Источник вдохновения: интерфейсы старого программного обеспечения и видеоигр.
Приемы: графики, таблицы, мусор из графиков в качестве абстрактных дизайнерских элементов, использование сообщений об ошибках в качестве юмора, неработающие функции-обманки, использование несглаженных шрифтов в виде гифов для оттенения низкокачественных HTML-шрифтов.
домашние страницы/дизайнерские фирмы: Test Pilot Collective (pre-5/00), mike cina, hoggorm, Hel13, zx26, Prototype 19
примеры коммерческих сайтов: levi’s europe, adidas, Fusion banner ads, Wired logo

С. «Низкопробный» мусорный дизайн

Источник вдохновения: грязные пятна, кляксы, наложения, пиктограммы старой школы
Приемы: имитация линий развертки старых телевизоров, точки и тире, силуэты изображений неправильной формы, парные фоновые гифы с такими же гифами на первом плане, использование для наложения друг на друга.
домашние страницы/дизайнерские фирмы: sueellen, jump into the light, smallprint
примеры коммерческих сайтов: Nokian Tyres, Skate’n Fun

D. «Упаковочная» школа

Источник вдохновения: комиксы середины столетья, бумажные пакеты
Приемы: полутоновые и двухтоновые изображения, ручные шрифты, неровности, нарочитое подчеркивание швов, использование цветов для выделения (если все серое, одна деталь, выделенная цветом, непременно привлечет все внимание), утонченные анимации в качестве фонового изображения или просто для развлечения, иногда намеренно неверное расположение навигационной панели
домашние страницы/дизайнерские фирмы: Funny Garbage, p2, stereomedia
примеры коммерческих сайтов: levi’s vintage, Ka-Ching

E. Стиль a la Пит Мондриан

Источник вдохновения: Пит Мондриан, Роберт Лонго. Постеры, выполненные в их технике.
Приемы: Нарочито большие элементы меню, вкрапленные в общий дизайн, частое использование отрицательных смещений, все чисто, без суматохи. Все окно броузера рассматривается как единое пространство для дизайна.
домашние страницы/дизайнерские фирмы: 617, Once Upon a Forest
примеры коммерческих сайтов: Lundstrom Architecture

F. Пиксельный панковский дизайн

Источник вдохновения: хаос, необычное поведение машин, программный код, Жорж Серо (George Seraut), дадаизм.
Приемы: сильно увеличенные и искаженные джипеги и гифы, случайным образом сгенерированные изображения, постоянное движение, html-код и элементы форм в качестве абстрактных деталей дизайна, сияющие неоновые цвета, режущие слух звуки, навороченный dhtml, намеренно испорченная навигация.
домашние страницы/дизайнерские фирмы: Day-Dream, Titler, soulbath’s requiem for a dream, e13, dream7, ShaG, pixeljam
примеры коммерческих сайтов: ???

G. Стиль «Hello Kitty» 1950-х годов

Источник вдохновения: комиксы для девчонок, рождественские сувениры, атрибуты домов-прицепов 50-ых годов.
Приемы: 3-хмерные объекты/текст, скругленные правильные края, яркие цвета на светлом фоне, курсивный шрифт, подростковый юмор
домашние страницы/дизайнерские фирмы: Future Farmers, Atlas Magazine, Post Tool, Milky Elephant, You Grow Girl
примеры коммерческих сайтов: California College of Arts and Crafts, Avant Card

H. HTMинимаLизм

Источник вдохновения: HTML-код, мозг Якоба Нильсена (Jakob Neilsen)
Приемы: игры со шрифтом с помощью CSS, упор на цвет для выделения смысла, быстро загружаемые логотипы в виде гифов, html и текст — элементы дизайна
домашние страницы/дизайнерские фирмы: 37signals, jovino, test pilot collective (post-5/00), dreamless, a list apart, suffocate, endquote, mesa.beta.font
примеры коммерческих сайтов: gettyone

I. Стиль чертежной доски, инструкций и руководств

Источник вдохновения: Архитектурные кальки Захи Хадид (Zaha Hadid), технические руководства, игрушки роботы-трансформеры, шрих-код, миллиметровка, тексты мелким шрифтом
Приемы: ПО 3-хмерного моделирования, мелкие плохо читаемые нео-технологические шрифты, отрицательное смещение, крупные элементы, запутанные элементы навигации
домашние страницы/дизайнерские фирмы: DFORM1, Vir2L, chapter3, mr. eel
примеры коммерческих сайтов: mtv2

J. Сверхтонкий дизайн в стиле SimCity

Источник вдохновения: игра SimCity, игры для Commodore 64, обертки японских конфет
Приемы: тонкие сглаженные шрифты, излишнее дробление и детализация, мелкие пиксельные изображения людей/строений/объектов
домашние страницы/дизайнерские фирмы: kaliber 10000, the icon factory, flipflopflyin, hi-res
примеры коммерческих сайтов: iTurf

3. FAQ

Какой стиль мне следует использовать?: Зависит от проекта.

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

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

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

В чем главная идея?: Избегайте стерильности. Цифровой компьютер просто предназначен для того, чтобы избавляться от застоя и порядка. Если вы хотите, чтобы ваши сайты выделялись на общем фоне, выделите его. Будьте таким как Джон Колтрейн (John Coltrane), а не как Kenny G. Люди постепенно станут это воспринимать как должное. И хватит спать со своей двоюродной сестрой… Если только у вас хватает сил от нее отказаться.

Приложение

Я переделываю этот сайт в книгу Fresh Styles for Designers: Eye Candy from the Underground, которая будет опубликована издательством Macmillan/Que в марте 2001 года. С ума сойти.

Также, я буду обсуждать эту тему на конференции builder.com, что пройдет в Нью-Орлеане 6-10 декабря 2000 года. Почему бы не приехать и не послушать? Сейчас я создаю сайт, который будет состоять из 10 страниц, и каждая страница будет оформлена в том стиле, который будет обсуждаться на этой странице.

Также, как вы заметили, у меня отсутствует пример коммерческого сайта для стиля » F. Пиксельный панковский дизайн» (сомневаюсь, что таковой можно найти, по известным причинам). Но все же, если вы знаете какой-либо сайт, который подпадает под один из описанных стилей, пришлите мне ссылку. (Спасибо Andrew за пример Avant Card. Спасибо Peter за пример сайта в стиле Хадид (Hadid))

Курт Клонингер (Curt Cloninger)

« назад к списку статей

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

Автор Илья Чигарев На чтение 24 мин. Просмотров 50.8k. Обновлено 16.06.2020

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

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

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

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

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

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

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor», где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый — 2020 года. Берите пока свежий. Подробнее читайте по ссылке.

Проект: 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 2019 | Living Coral / Автор: ∆ Studio—JQ ∆

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

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

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

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

Проект: Nona Home E-commerce Website / Автор: Daniel Tan

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

Источник: Spotify

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 2017 / Автор: 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. Реальные фото

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

Источник: unsplash

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

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

22. Адаптивные лого

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

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

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

Автор: Design Studio

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

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

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

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

24. Яркие и забавные лого

Красочные лого с забавными элементами, анимацией и кастомными рисунками — значимый тренд 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. Градиенты

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

Проекты: 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 году.

Проект: My idea | An incident in front of you! | Playlist — Radial Interaction / Автор: Johny vino™ .

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

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

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

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

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

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

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

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

Проект: Contemple

Проект: 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 2017 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. Эксперименты с выравниванием и кернинг

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

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

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

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

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

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

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

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

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

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

Проект: 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. Смелая типографика

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

Проект: Refresh

Проект: 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

3D

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 2016 / Автор: 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 2018 / Автор: Nikopicto

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

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

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

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

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

Design Trends Guide by Milo Themes
Design Trends by Duminda Perera, Massimiliano Albizzati, Secil Kaya, Camilla Maccaferri
Design Trends by Filip Triner
Design Trends by Epicco Digital, Mark Banaynal
Design Trends by Rylan Ziesing, Rhino Design

СПАСИБО!

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

от тёмной цветовой схемы к моушн-дизайну — CMS Magazine

Какие тренды в веб-дизайне будут на пике популярности в следующем году? Мы в дизайн-студии Магвай неустанно следим за всеми новшествами и с радостью подготовили перевод статьи от экспертов Envato (Envato — австралийская it-компания, которая управляет 8-ю интернет-сервисами, ориентированными на продажу графического контента, такого как: шаблоны для веб-дизайна, графические элементы, 3D-модели и т.д).

Профессионалы из Envato рассказывают о главных тенденциях, на которые следует обратить внимание в 2021 году.

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

Тёмная цветовая схема
Коллаж
Антидизайн
Минимализм
Органический дизайн
Иллюстрации
Функциональность, инклюзивность и доступность
Моушн-дизайн и интерактивность
3D и геометрический дизайн

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

И всё же — от тёмной цветовой схемы до интерактивности: какие популярные тренды в веб-дизайне покорят интернет в следующем году? Мы спросили экспертов из Envato, что отличало классный сайт в 2020, а также их мнение о последних и наиболее удачных тенденциях в веб-дизайне, на которые следует обратить внимание в 2021 году.

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Тёмная цветовая схема

Тёмная цветовая схема — главная страница Apple

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

Что такое тёмная цветовая схема?

Тёмная цветовая схема — главная страница Clock Strikes Twelve

Крупные бренды, такие как Apple, Hublot, и отдельные дизайнеры, например, Clock Strikes Twelve, для своих продуктов и портфолио используют тёмный фон, так как это отличный способ сделать сайт современным и элегантным. Помимо того, что дизайнеры могут в этом случае поиграть с разными элементами, такими как пастель или неон (два главных тренда 2020 года), исследования также показали, что тёмный режим меньше расходует заряд устройства, кроме того, он лучше подходит для восприятия, поскольку уменьшает негативное воздействие синего цвета на глаза.

«Похоже, сегодня появляется больше продуктов, которые имеют в настройках тёмный режим или ориентированы только на тёмную цветовую схему, это продиктовано исследованиями, в которых изучили воздействие яркого синего света на человека, а также на время автономной работы батареи», — говорит UI-дизайнер из Envato Шон Фихан.

Тёмный режим не только лощёный, элегантный и приятный для глаз, он также увеличивает контраст и делает элементы дизайна более заметными. Вы даже можете добавить на свой сайт переключатель тёмного режима, как показано в этих примерах от Johny Vino, Koos Looijesteijn и Adrian Verde Studio, чтобы посетители могли настраивать сайт под себя.

Переключатель режима — главная страница Johny Vino

«По моему мнению, тёмный фоновый режим — определённо тенденция, которая оказала наибольшее влияние на веб-дизайн в 2020 году, — говорит UX-дизайнер из Envato, Талия Джаннополас. — Благодаря тому, что тёмный режим стал популярным, я уже видела несколько сайтов, где был добавлен переключатель (от светлого к тёмному). Это великолепно и в тоже время так просто, когда пользователь может выбрать настройки, основываясь на своих предпочтениях».

Всё больше и больше неоморфных вариантов с противоречивым UX-дизайном, основанным на скевоморфизме и flat дизайне (такие примеры часто встречаются в интерфейсе iOS или Android), включают опцию тёмного фона, несмотря на то что изначально создавались с использованием исключительно белых и светлых цветовых схем.

Коллаж и смешанные техники

Коллаж — главная страница City Circus

Коллаж — одна из самых популярных тенденций этого года в графическом дизайне и в социальных сетях, этот тренд быстро завоевал популярность и в мире веб-дизайна. Смешанная техника снова в центре внимания благодаря художникам из мира digital и инфлюенсерам, его также приняли многие бренды и веб-дизайнеры, включая Chobani, City Circus и Urban Outfitters.

Что же такое коллаж?

Коллаж — страница бронирования City Circus

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

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

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

Коллаж — главная страница Urban Outfitters

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

Антидизайн

Антидизайн — главная страница Roze Bunker

Предупреждение: мы знаем, что этот тренд не для каждого!

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

Антидизайн — главная страница Play Type

Что такое антидизайн?

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

Антидизайн — главная страница XXIX

Многие профессионалы сейчас увлечены странным миром антидизайна, один из примеров — хаотичный, но причудливый сайт голландского бренда Roze Bunker и дизайн-студий Play Type и XXIX. Даже австралийский музыкант Flume решился на такой яркий, смелый и брутальный подход для своего сайта. Несмотря на то, что подобный тренд всегда выделяется среди множества конкурентов (надеемся, что в положительном смысле), эффективный веб-дизайн всё-таки про баланс. Если вы действительно хотите попробовать антидизайн, важно позаботиться, чтобы интерфейс вашего сайта оставался простым, функциональным и удобным для пользователя.

Антидизайн — главная страница Dynamic MTL

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

Минимализм

Минимализм — Главная страница ETQ

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

Минимализм — главная страница Huge Inc.

Среди брендов есть прекрасные примеры, когда в дизайне используется минимализм. Например, обувь премиум-сегмента ETQ Amsterdam, а также агентство развития бизнеса Huge Inc из Бруклина. При этом часто минимализм ассоциируют с монохромом и белым фоном, однако минимализм — это не просто чёрное или белое. Красочный, яркий минимализм набирает обороты как в графическом, так и в веб-дизайне, в этом случае для создания простого, но потрясающего сайта используются блочные цвета и яркий фон, простые шрифты без засечек и минималистичные шрифты, а также небольшой набор элементов.

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

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

Органический дизайн

Органический дизайн — главная страница Ora

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

На органический дизайн влияет повышенное внимание к экологии и защите окружающей среды, отсюда тёплые землистые цвета, естественные формы и необработанные органические текстуры — как это видно на сайтах от Ora Floral Agency, A Better Source и Abbotsford Convent в Мельбурне.

Органический дизайн — страница сайта Abbotsford Convent

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

Органический дизайн — веб-страница A Better Source

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

Иллюстрация

Иллюстрация — Главная страница AHM

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

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

Иллюстрация — страница результатов поиска Huge Inc

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

3D иллюстрация — дизайн сайта, отрисованный Амритом Пэлом

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

Функциональность, а также инклюзивный и доступный дизайн

Функциональность — главная страница Blue Receipt

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

Доступность — страница сайта Blue Receipt

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

Доступность — страница сайта Cat Person

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

Вот несколько способов сделать ваш сайт более доступным:

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

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

Моушн-дизайн и интерактивность

Моушн-дизайн — главная страница Gridspace

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

Аналогичным образом многие бренды и компании, такие как YouTube Rewind, начали добавлять на сайты больше интерактивных элементов (викторины, игры, квизы и опросы). Отличный пример такого подхода — бренд Estee Lauder. На сайте компании есть интерактивная аркадная игра под названием «THE ANRCADE», это футуристический квест, где пользователи зарабатывают «очки молодости», а бренд таким образом продвигает свой крем Advanced Night Repair.

Интерактивность — игра ANRCADE бренда Estee Lauder

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

Интерактивность — страница поиска YouTube Rewind

«По мере того, как технологии развиваются, становится всё проще применять моушн-дизайн, и это помогает создавать потрясающие впечатления (при правильном использовании), — говорит Шон. — Я вижу, что это хорошо получается, когда есть переход между контентом и взаимодействием с элементами».

3D и геометрический дизайн

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

Геометрический дизайн — главная страница The Imagineers

Трёхмерные формы и плавающие объекты в геометрическом дизайне появляются, благодаря смешению сюрреалистичных анимаций с реальными объектами, таким образом создаётся завораживающий футуристический эффект. Этот стиль часто используется в рекламных роликах для демонстрации новых продуктов, которые в этом случае вращаются, словно подвешенные в воздухе. Чтобы ваш сайт привлекал посетителей, можно добавить ещё один слой или измерение. Один из таких примеров — сайт The Artery, который сочетает геометрические элементы с минималистичными простыми линиями модульной сетки.

Трехмерные плавающие объекты — дизайн страницы The Artery

Использование простых линий сетки, границ и других структурных элементов также стало трендом в области веб-дизайна. Например, эту тенденцию можно оценить на сайтах Rail Road Ladies, Monograph Comms и The Imagineers.

Геометрический дизайн у The Railroad Ladies

«Я заметил, что в веб-дизайне снова начинают использовать геометрические элементы и сетку. И мне, как человеку, который любит структуру и порядок, это по-настоящему нравится», — говорит Шон.

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

По материалам статьи.

10 тенденций современного веб-дизайна, которые вдохновят вашу стратегию на 2020 год

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

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

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

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

Вам нужно больше вдохновения для современного веб-дизайна? Свяжитесь с WebFX или позвоните нам по телефону 888-601-5359!

Вам также может понравиться: Статистика веб-сайта 2020

1.Белое пространство

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

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

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

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

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

Пример: Взгляните на пустое пространство в цифровом портфолио Майлза Нгуена как веб-дизайнера и дизайнера взаимодействия.

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

Этот пример современного веб-дизайна переопределяет минимализм с продуманным использованием белого пространства.

2. Полностраничные заголовки

Полностраничные заголовки — это путь к современному веб-дизайну в 2020 году.

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

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

Пример: Сайт Discord, предлагающий приложение для голосового и текстового чата для геймеров, является хорошим примером.

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

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

3. Игривые курсоры

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

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

Пример: Паоло Форнасье установил потрясающий курсор в своем онлайн-портфолио. Курсор отображает разные фотографии с волнистой анимацией и звуком фортепиано при прокрутке выровненного по вертикали текста в меню навигации.

Благодаря игривости анимации пользователи легко проводят пару минут, перемещая курсор по меню навигации.

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

4. Динамическая прокрутка

Динамическая прокрутка — еще одна тенденция современного веб-дизайна на 2020 год.

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

Пример: Взгляните на сайт Crypton, чтобы увидеть, насколько забавна динамическая прокрутка делает сайт.

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

5. Пользовательские иллюстрации

Иллюстрации вдохнут жизнь в ваш бренд и веб-сайт.

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

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

Пример: Взгляните, например, на искусство известного иллюстратора Алисы Ли.Она разработала индивидуальные иллюстрации для популярных брендов, таких как Macy’s и The Washington Post. Вот один, который она создала для Airbnb.

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

И с расширенными возможностями кодирования, иллюстрации продолжают развиваться за пределы 2D-дизайна.

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

Например:

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

6. Расчетная сетка

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

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

Многие ведущие дизайнеры используют CSS Grid Layout, чтобы перенести все возможности макета печати в Интернет.

Также известный как Grid, CSS Grid Layout — это система макета 2D-сетки для Cascading Styles Sheet, языка кодирования, который описывает макет страницы сайта HTML. Сетка позволяет веб-дизайнерам более легко и последовательно создавать макеты для сложного адаптивного веб-дизайна в разных браузерах.

Макет CSS-сетки

еще предстоит пройти, прежде чем он станет совместимым со всеми интерфейсами, но он продолжает набирать обороты как главный тренд веб-дизайна на 2020 год.

7. Цветовые тренды в 2020 году

В современном веб-дизайне используются цветовые палитры, и каждый год в Интернете появляются новые цвета. В 2018 году он был желтым, 2019 — синим, а в 2020 году сообщество прогнозирования тенденций WGSN предсказывает монетный двор.

В целом Venngage прогнозирует, что цветовые палитры онлайн станут более приглушенными в 2020 г.2019.

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

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

Некоторые более мелкие тенденции в цветах, вероятно, сохранятся с 2019 по 2020 год. Кажется, что:

Мягкие, холодные цвета (синий, бирюзовый и серый) = Информация и фон
Смелые, теплые цвета (красные, оранжевые, даже зеленые) = призывы к действию (CTA)

Пример: Посетите веб-сайт Trello, чтобы найти программное обеспечение для совместной работы над проектами и организации.

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

8. Жирный шрифт

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

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

Пример: Посмотрите, как Startup Lab использует выделение изображений жирным шрифтом.Они придают сайту смелость и объемность, но при этом выглядят профессионально.

Весело, правда?

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

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

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

9. Повышенное внимание к UX / UI

В 2019 году современный веб-дизайн ориентирован на людей, а в 2020 году он станет еще более важным.

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

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

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

Голосовые интерфейсы
Подписи к изображениям
Транскрипция видео
Никаких отвлекающих элементов
Конструкция со сбалансированным движением

Повысьте уровень UX / UI вашего сайта с помощью:

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

Также важно отметить, что мобильный серфинг станет больше в 2020 году по сравнению с2019. Более 50% интернет-трафика поступает с мобильных устройств, и ожидается, что это число будет расти.

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

Пример: Взгляните на элегантный мобильный дизайн Чобани.

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

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

10. Эффектные, увлекательные истории

Наконец, современные веб-сайты в 2020 году будут рассказывать истории.

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

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

Пример: Веб-сайт экологически чистого продовольственного бренда Zume — хороший пример использования вашего веб-сайта для рассказа историй.

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

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

Хотите вдохновения для более современного веб-дизайна?

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

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

Позвоните нам по телефону 888-601-5359 или свяжитесь с нами через Интернет, чтобы узнать, как наши услуги веб-дизайна могут превратить вас в гуру современного веб-дизайна!

20 тенденций веб-дизайна на 2019 год

Дизайнеры… трепетно относятся к представлениям о тенденциях.С одной стороны, следовать за толпой — это неправильно — в конце концов, творчество не делает ничего, кроме того, что делают все остальные? С этой точки зрения единственная ценность в том, чтобы знать, что в моде, — это знать, против чего вы выступаете. Конечно, вы не можете просто пойти против тренда. Но знание последних тенденций веб-дизайна облегчает их тонкие комментарии и / или критику.

Ознакомьтесь с нашим последним постом: 21 тенденция веб-дизайна на 2021 год

С другой стороны, есть идея, что «креативность — это знание того, как скрыть свои источники» — цитата, которую часто приписывают Альберту Эйнштейну, хотя скорее всего, придуман юмористом Ч.Э.М. Джоад. (Подходит, нет?)

В любом случае, нетрудно узнать, что в моде. Просто оторвите глаза от смартфона и осмотритесь — или не делайте этого!

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

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

Таким образом, тенденции — это история в процессе становления.

Предпочитаете смотреть ваш модный контент?

У нас есть краткое изложение этой публикации от дизайнера, подкастера и видеоблогера Чарли Прейнджли:

Спасибо, Чарли!

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

1. Трехмерная иллюстрация

Источник

‍

Когда вы думали, что будущее плоское, такие бренды, как Pitch и Stripe, вкладывают свой вес в новую, старомодную форму иллюстрации: 3D.

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

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

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

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

2. От игривого словесного знака к серьезному логотипу — он же гельветизация фирменного стиля

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

Или, как я люблю это выражаться: все идентичности брендов в конечном итоге приводят к версии Helvetica.

Старый логотип Marketo слева, новый справа. Источник.
Пожалуй, наиболее подходящий ребрендинг: MailChimp classic слева, Mailchimp 2.0 справа. Обратите внимание на изменение корпуса! Источник.
Uber, бренд, который мы любили ненавидеть, слева, Uber, пытающийся избавиться от своего уродливого прошлого, справа. Источник.

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

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

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

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

3. Контурный шрифт

Как и любой бренд, ориентированный на дизайн, мы в Webflow большие поклонники типографики, поэтому мы всегда ищем новые тенденции в тексте (подробнее см. Ниже!).

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

Источник
Источник

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

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

4. Продолжающийся рост жестокости

Мы говорили это в прошлом году, и мы повторяем это снова в этом году:

Будущее будет жестоким.

(Слишком реально? Я знаю. Извините.)

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

Нужны примеры? У нас есть:

Концепции плакатов для «Дизайн-шипа» в Asana.

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

Кадр с сайта brand.squarespace.com.

Стойкость брутализма предполагает интересный аспект возникновения и принятия тенденций в дизайне, который напоминает мне феномен поп-панка конца 90-х (вот и свидания со мной!): Какой бы ни была тенденция, неважно, насколько «мятежная» или «вольная». ваше лицо »может показаться на первый взгляд, он может и будет кооптирован для популярного рынка.И этот рост от «субкультурной» тенденции до мейнстрима может растянуться на несколько лет.

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

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

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

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

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

Большая мина розовая стрела.

5.Более разнообразные, иконоборческие стили иллюстраций

В своем удивительно подробном и очень увлекательном тематическом исследовании своей работы для Slack иллюстратор Алиса Ли напоминает нам:

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

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

Например, стиль фотоколлажа, изучаемый в Medium и Intercom.

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

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

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

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

Джастин Трэн «Как оставаться лаконичным» illo.

Или «маркетинг жизненного цикла»:

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

6. Более авантюрный и винтажный шрифт

В то время как работа над дизайном логотипа может продолжать стремиться к однородности, мы и Zack видим , что также появляются некоторые более эксцентричные варианты, такие как принятие Mailchimp (не) известного Шрифт Cooper Black (славы Tootsie Roll!) За фирменный шрифт:

Abstract, раскачивающий восхитительно толстый Vesterbro Black (а также Regular и Heavy) в сочетании с America Mono от Grilli Type:

И восхитительно пухлым Recoleta в Pablo Stanley. недавняя библиотека иллюстраций (которая составляет полных отголосков Алисы Ли!), Humaaans.

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

Спасибо за отслеживание тенденций, Зак!

Нашим следующим участником является Саша Гриф, дизайнер, разработчик и предприниматель, живущая в Киото, Япония. Возможно, вы знаете его по его фантастическому (и минималистичному) сайту и новостной рассылке, боковой панели или Vulcan.js.

Он был достаточно любезен, чтобы сделать свои собственные короткие рецензии, так что вот список тенденций Саши, его собственными словами:

7. Инклюзивный дизайн

Уже было написано много строк о важности доступности, но ребрендинг это как «Инклюзивный дизайн», и у вас есть совершенно новое невостребованное модное слово, о котором можно писать книги и эссе!

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

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

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

В конце концов: мы все иногда инвалиды.

8. Дизайн + код

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

Примечание редактора: не говоря уже о таких инструментах, как Webflow, которые пропускают сразу API и плагины, позволяя вам разработать код .О, и если вы поклонник Figma, вам стоит посмотреть видео дизайнера Чарли Мари о переводе дизайнов Figma в функциональные сайты Webflow:

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

По какой-то причине любой список тенденций дизайна всегда должен включать «жирную типографику». Учитывая, что типографика существует с 1439 года, вы не можете ошибиться с этим. (Ну, за исключением того короткого периода в 2013 году, когда Apple решила, что теперь все должно быть настроено в Helvetica Neue Ultra Light).

Примечание редактора: Виновен по обвинению , Саша. Подробнее об этом ниже.

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

Тем более что запустили…

10. CSS grid

Святая родинка! Обожаю Грид, чувак !!!

–Pablo Stanley

Для многих веб-дизайнеров и разработчиков flexbox стал своего рода святым Граалем.Он отвечает на извечный вопрос о том, как правильно центрировать объекты как по вертикали, так и по горизонтали. Это позволяет относительно легко реализовать ранее сложные макеты. Он даже (в буквальном смысле) позволяет использовать легендарный макет «Святой Грааль».

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

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

И еще: никто им не пользуется.

Ну, почти никто. Особенно если смотреть на это относительно flexbox.

Согласно статусу платформы Chrome, примерно 83% просмотров страниц включают flexbox. CSS-сетка? Примерно всего 1,5%.

Почему, спросите вы? Что ж, ответ, как это часто бывает с инструментами веб-верстки, — неравномерная поддержка.

Или, более конкретно, никогда не неожиданное отсутствие поддержки (ненадежной поддержки), предлагаемой Internet Explorer (IE), который, несмотря на то, что Microsoft не поддерживает его, по-прежнему непропорционально полагается на многие компании.

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

Что имеет смысл. Эти основные платформы, вероятно, начали использовать flexbox совсем недавно. И переделать макеты сайтов, привлекающих миллиарды пользователей, — задача не из легких.

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

Начните работу с сеткой в Webflow.

В качестве следующего приглашенного дизайнера-мыслителя я обратился к Лос Монтойе, ведущему дизайнеру социального приложения Mappen и креативному директору Juxta Labs.Вот слова Лоса:

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

11. Противоположные подходы к цвету на основе рыночной позиции

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

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

12. Сетка разрывает сетку

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

13. Анимация, ориентированная на мобильные устройства

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

14. Год великих писаний

Я считаю, что все это является естественным развитием того, что мы наблюдали в 2018 году. В некотором смысле визуальный дизайн как для Интернета, так и для продукта стабилизировался. У нас есть прочная платформа проверенных и проверенных UX-потоков и взаимодействий как для веб-дизайна, так и для дизайна продуктов.В результате цифровые продукты и веб-сайты выглядят как близкие родственники, если не братья и сестры.

Вот почему, если вы хотите создать бренд, который любят люди, и ваша работа — дизайнер [Insert Desired Title], вам необходимо укрепить свои навыки повествования и повысить эффективность как писателя. Слишком легко развить отличный вкус с точки зрения визуального дизайна. У вас есть так много примеров красивых дизайнов, на которых можно учиться. У вас есть проверенные потоки маркетинговых воронок и UX-потоки цифровых продуктов, которые вам легко доступны, поэтому вы можете создать такой опыт, который будет легко понятен большинству клиентов.

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

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

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

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

2019 год — год, когда можно построить что-то достойное любви.

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

15.Слишком много движения

В шекспировском Как вам это понравится, Розалинда спрашивает: «Можно ли желать слишком много хорошего?»

Теперь вы, наверное, задаетесь вопросом, как мы можем связать пасторальную комедию, написанную в 1599 году, с тенденциями в веб-дизайне 2019 года. Два слова: моушн-дизайн.

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

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

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

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

Предупреждение: если вы светочувствительны, пропустите этот сайт.

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

Что из этого тренда?

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

Далее: маленький оле я.

16. Массивный, доминирующий на экране текст

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

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

И бросает несколько невероятно больших купить кнопок для загрузки.

Или возьмите этот снимок из (на данный момент) суперсекретного внутреннего проекта:

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

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

‍

Даже Huffpost участвует в масштабных текстовых махинациях:

Для справки, это все, что я вижу на своем MacBook Pro:

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

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

17. Игривый дизайн курсора и анимация

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

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

Например, от точки к точке курсор выполняет большую работу:

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

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

Моя единственная надежда на Никколо в том, что он фактически не работает с 5 утра до полуночи.

18. Приветствую нового однородного героя

До недавнего времени мы все разделяли видение повсеместного веб-сайта. Это выглядело примерно так:

Source

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

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

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

Et voilà! Взгляните на нового однородного героя.

Airtable.com
Dropbox.com
Mailchimp.com
Stripe.com

‍

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

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

Но это точно в моде.

19. Все элементы перекрывают друг друга

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

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

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

И этот настраиваемый коллаж из фотографии и копии:

Анимация Жени Рынжука о странице

на сайте японского креативного агентства SONICJAM:

Меню открыто для добавления эффекта.(Также обратите внимание на забавный курсор!)

‍

20. Год, когда «пользователи» сопротивляются

«Mobile Lovers», by Banksy‍

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

И мы устали от всего этого. Нам надоела агрессивность. Заблуждение и нечестность. Пышная риторика о соединении мира перед лицом новостей об утечках, манипуляциях со СМИ и (возможно?) Фальсификациях на выборах.

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

Но это осознание заставляет многих из нас, «пользователей», задаться вопросом: стоит ли цена входа окупаемости инвестиций? Обошелся ли переход от мобильного «телефона» к карманному суперкомпьютеру больше, чем он принес?

А если это так: как исправить дисбаланс? Можем ли мы съесть свой торт и тоже его съесть?

Но вы, читая это, не можете просто ответить на эти вопросы как «пользователь», как часть аудитории.Вы тоже, наверное, производитель. Итак, в 2019 году пришло время (уже пора) спросить себя:

Что может сделать I , чтобы вернуть людям контроль над своей вовлеченностью, их использованием и своей жизнью?

8 элементов современного веб-дизайна (и тенденции веб-дизайна, за которыми следует следить)

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

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

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

8 элементов и тенденций современного дизайна веб-сайтов

1.Уникальная и крупная типографика

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

Например, The New Yorker мгновенно узнается благодаря использованию уникального шрифта Adobe Caslon Pro. В то время как более уникальные шрифты, такие как Blokletters-Balpen, начали использоваться стартапами и технологическими компаниями, такими как Zero.

Почему это полезно?

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

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

2. Большие и отзывчивые изображения героев

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

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

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

Почему это полезно?

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

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

3. Фоновое видео

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

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

Это фоновое видео служит отличным способом побудить посетителя перейти к основному видео.

Почему это полезно?

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

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

4. Полу-плоский дизайн

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

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

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

Почему это полезно?

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

5. Меню гамбургеров

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

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

Источник: движение UX

Хотите знать, почему это называется гамбургер-меню?

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

Почему это полезно?

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

6. Гигантские изображения продуктов

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

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

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

Почему это полезно?

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

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

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

7. Дизайн карты

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

Домашняя страница Brit + Co служит отличным примером дизайна карты в действии:

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

Почему это полезно?

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

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

8. Короткие видеоролики о продуктах или функциях

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

Яркий тому пример — сотрудники InVision. Они демонстрируют этот короткий иллюстратор того, как легко использовать их продукт, перетаскивая дизайн прямо на их домашнюю страницу:

Почему это полезно?

По данным Inc.Magazine, 92% клиентов B2B смотрят онлайн-видео, а 43% клиентов B2B смотрят онлайн-видео при изучении продуктов и услуг для своего бизнеса. Поэтому компаниям B2B необходимо создавать видеоролики, объясняющие их продукты, поскольку они влияют на процесс принятия решений покупателем.

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

Примечание редактора: этот пост был первоначально опубликован в августе 2018 года и был обновлен для полноты.

различных стилей дизайна веб-страниц

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

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

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

Дизайн должен воплощать; не различать бизнес и его владельца. Его элементы должны представлять владельца и поддерживать цель, задачи, послание и общее видение бизнеса.

Наш процесс проектирования в Mountaintop Web Design
В Mountaintop Web Design нам нравится думать о себе как о художниках и ученых.Мы исследуем границы творчества через художественное выражение. Однако в то же время мы уважаем правила и точность науки веб-дизайна. Существуют теории, рекомендации и принципы веб-дизайна, которые мы используем в качестве основы для реализации художественных концепций.
Мы проводим исследования перед тем, как приступить к формальному процессу проектирования. Исследования делятся на две области: эмпирические и интуитивные.
Эмпирические исследования
В рамках эмпирических исследований мы собираем факты, соответствующую информацию, обновленные данные и другие формы пригодных для использования и измеримых данных о типе бизнеса и отрасли.Мы также внедряем лучшие практики веб-дизайна, которые также включают собственные исследования. Эти принципы пронизывают каждый веб-сайт, который мы создаем.
После более глубокого понимания природы предприятия мы проводим сравнительный анализ отрасли. Это включает в себя просмотр веб-сайтов ближайших конкурентов клиента. Мы обращаем внимание на элементы дизайна и сходство в содержании.
Мы также просматриваем аккаунты конкурентов в социальных сетях. Мы хотим увидеть, есть ли соответствие или какое-то соответствие между его элементами дизайна и элементами веб-сайта.
Интуитивное исследование
Интуитивное исследование ориентировано на человека, стоящего за клиентом. Это похоже на подход банка к KYC или «Знай своего клиента». Мы хотим знать, кто является клиентом. Какова его цель? Как он / она попал в этот вид бизнеса? Какие мотивирующие факторы?
Наша цель — уловить суть клиента. Его личность должна проявляться на каждой странице сайта. Его элементы должны отражать клиента.Когда посетитель просматривает дизайн и читает контент, он / она должны иметь точное представление о том, кто является владельцем бизнеса.
Такие элементы, как использование цвета, промежутков, углов, линий и содержания, дадут посетителям понять, кем является владелец. Основываясь на взаимодействии или реакции на элементы дизайна и контента, посетитель веб-сайта будет полагаться на свою интуицию, чтобы сформировать профиль владельца бизнеса.
5 популярных стилей веб-дизайна
Существует множество стилей веб-дизайна.Нам нужно будет написать электронную книгу, чтобы дать вам полное изложение всех стилей, которые можно использовать для разработки веб-сайтов. К счастью, мы не пишем учебник.
Цель написания этой статьи — дать вам представление о том, как работает процесс проектирования. Это поможет вам лучше понять, чем занимается профессиональный веб-дизайнер и как с ним работать при создании собственного сайта.
В этом разделе мы обсудим пять самых популярных стилей веб-дизайна.Затем мы перейдем к собственному подходу к созданию сайтов для клиентов.
1. Иллюстративный стиль
Иллюстративный стиль веб-дизайна очень нагляден в презентации. Он использует рисунок в качестве основного инструмента для дизайна. У нас есть графические дизайнеры и художники, которые могут придумывать рисунки или изображения на основе обмена идеями с владельцем бизнеса.
Представления — это визуальные выражения или концепции, которые, по мнению команды, лучше всего передают сообщение веб-сайта.Создание иллюстративного дизайна — это процесс тесного сотрудничества с клиентом. Мы поощряем клиента выкладывать идеи на дизайнерский стол.
Как профессиональные веб-дизайнеры, мы используем принципы дизайна для завершения концепции. Часто у клиента может быть иное представление. Часть нашей работы — провести клиента через процесс дизайна, чтобы он или она лучше понимали принципы веб-дизайна. Так разрешаются творческие разногласия.
Окончательный дизайн — это тот, который, по мнению клиента, точно представляет бизнес и в то же время остается в пределах параметров эффективных методов веб-дизайна.
2. Стиль одной страницы
Одностраничный подход к веб-дизайну часто путают с иллюстративным, поскольку он использует представление или описание концепции в качестве основного элемента дизайна. Он может быть красочным или простым. Он мог быть ярким или приглушенным.
Его основная цель — упростить веб-дизайн.Структура очень проста и удобна в навигации. Вы не найдете много текстового содержания на главной странице, поскольку фокус остается на изображении.
Стиль одностраничный несет тот же риск, что и иллюстративный, поскольку идея дизайна может не сразу найти отклик у посетителя сайта. Изображение может выглядеть визуально привлекательно, но если его использовать в символических целях, его смысл может потеряться при переводе.
Эти стили веб-дизайна могут работать с эстетической точки зрения. Однако с функциональной точки зрения или с точки зрения обмена сообщениями использование символических изображений может не дать желаемых результатов.Поэтому мы не рекомендуем эти стили нашим клиентам.
Мы предупреждаем клиентов, которые предпочитают этот стиль дизайна, проявлять осторожность, когда речь идет об использовании изображений в качестве метафор или символики. В максимально возможной степени концепция дизайна должна обеспечивать визуальные сигналы, которые облегчают посетителям сайта понимание того, чем занимается бизнес; кто такие владельцы, чем они занимаются, их цель и видение. Контент должен немедленно находить отклик у зрителя.
3.Минималистский
Вы когда-нибудь сталкивались с веб-сайтом, где главная страница выглядит как абстрактная картина? Как насчет веб-сайта, где кажется, что вы только что попали в лабиринт? Помимо мигрени или ощущения себя лабораторной мышью, в этих конструкциях так много всего, что их назначение и функциональность теряются.
Минималистский стиль убирает весь беспорядок, поэтому все, что остается, — это основные элементы, функции, концепции и формы. Такой дизайн очень приятен для глаз.Хорошими примерами стиля минимализм являются веб-сайты, которые сильно используют пространство. Вы видите только черный и белый цвета. Ориентация очень чистая и организованная.
Минималистский дизайн популярен, потому что он действует как противовес хаосу в Интернете. Имеется информационная перегрузка; выполните поисковый запрос, и вы прокрутите сотни и тысячи веб-сайтов. Минималист работает, потому что он фокусируется только на вашем центральном сообщении.
4. Плоский веб-дизайн
Если вы сталкивались с веб-сайтом Microsoft, вы хорошо понимаете, что такое плоский веб-дизайн.Этот стиль веб-дизайна сочетает в себе минимализм с удобством использования. Он пытается удалить ненужные элементы и просто сосредоточиться на элементах, которые в значительной степени поддерживают удобство использования и функциональность.
Сторонники плоского веб-дизайна обычно используют сочетание пространства с яркими или доминирующими цветами в качестве определяющих областей ссылок. Общий дизайн остается чистым; добавление цветов с более резкими оттенками создает лучшее различие между другими элементами.
Когда мы реализуем подход плоского веб-дизайна, мы хотим, чтобы дизайн был заметным, но не настолько, чтобы он отвлекал от цели веб-сайта.Навигация никогда не должна ухудшаться.
5. Типографский
Есть веская причина, по которой рекрутеры обычно отклоняют резюме, составленные с использованием шрифта Comic Sans. Тебя просто не примут всерьез. Рекрутеры всегда будут рекомендовать Calibri, Cambria, Helvetica и часто используемый, но все еще популярный Arial.
Тип используемого шрифта — это элемент дизайна, который может успешно создать или сломать ваше сообщение. Это вызывает эмоциональный сигнал и последующую реакцию.При правильном использовании с графическим и текстовым контентом типографский стиль может помочь вам рассказать мощную и убедительную историю.
Недостатком типографского стиля является то, что он может замедлять время загрузки. Особенно это актуально при использовании мобильных устройств.
Подход Mountaintop Web Design к веб-дизайну
Наш основной принцип в веб-дизайне — всегда применять лучшие практики. Лучшие практики в веб-дизайне — это проверенные временем элементы, которые доказали свою эффективность.В этом смысле мы одинаково подходим ко всем нашим клиентам. Мы можем применить любой стиль веб-дизайна, который хочет клиент и который, по нашему мнению, решительно поддерживает цель и задачи веб-сайта.
Однако наш подход никогда не отклоняется от стандартных рекомендаций по эффективному веб-дизайну:
Веб-сайт должен адаптироваться для мобильных устройств. Design должен легко настраиваться на мобильных устройствах независимо от размера экрана. Он должен быть доступен для больших групп людей.
Веб-сайт должен иметь высокую скорость загрузки. Наш многолетний опыт работы с разными клиентами и изучения различных отраслей показал, что потребители нетерпеливы. Наша цель — обеспечить доступ к веб-сайту клиента в течение 3 секунд.
Дизайн следует оптимизировать. Даже если у вас самые лучшие изображения и текст, они не будут иметь большого значения для вашего веб-сайта, если их нельзя будет найти. Мы внедряем принципы SEO или поисковой оптимизации, чтобы все изображения и текстовый контент можно было легко найти, найти и проиндексировать поисковыми роботами.
Должны быть приняты надежные меры безопасности. Мы понимаем ценность веб-сайта для вашего бизнеса. Таким образом, мы гарантируем, что все наши веб-сайты построены с использованием последних версий лучшего программного обеспечения для обеспечения безопасности. Мы также проводим регулярные аудиты сайта для запуска обновлений плагинов и решения других проблем, которые могут представлять уязвимости для его безопасности.
Пример: укрытие для суровых погодных условий
Мы разработали этот веб-сайт для некоммерческого министерства.Целью нашего подхода к дизайну было четко выделить услуги министерства. Это было эффективно сделано за счет использования соответствующих изображений, организации сайта и макета, которые были собственностью министерства.
Общий эффект дизайна заключался в том, чтобы передать ясное сообщение, которое было мощным и актуальным, но искренним и упрощенным по тону и содержанию.
Дизайн дает посетителям веб-сайта точное представление о том, кто такое министерство, что они делают, как работают, и помогает им глубже понять свою цель.Как мы упоминали ранее, дизайн веб-сайта должен отражать цель и видение бизнеса.
В данном случае цель служения раскрывается в вопросе: «Почему министерство создало эту организацию?» Изображения, использование цвета, пространства и макета подчеркивают намерение министерства помогать нуждающимся.
Мы объединили использование этих провокационных изображений с реальной статистикой, чтобы побудить посетителя к действию. Это, безусловно, помогло увеличить количество пожертвований и взносов в министерство.
При наличии идеальных элементов дизайна нашей самой большой проблемой стала платформа для пожертвований. Мы хотели, чтобы люди могли пользоваться им легко и безопасно. К счастью, мы смогли реализовать для них подходящую платформу, и на сегодняшний день министерство продолжает получать пожертвования через свой веб-сайт.
Если вы планируете создать веб-сайт для своей компании или думаете о том, чтобы изменить дизайн вашего текущего веб-сайта, пожалуйста, позвоните нам или напишите нам по электронной почте.
11 главных тенденций веб-дизайна, которые будут править в 2020 году | от студии PopArt | NYC Design
Можете ли вы вспомнить, как выглядел дизайн Facebook в момент своего появления, полтора десятилетия назад? По современным меркам — не очень лестно. Так что, если вам случится сегодня встретить такой дизайн веб-сайтов, признайте это, вы, вероятно, сразу же потерялись бы.
Быть в курсе последних тенденций в дизайне полезно независимо от того, являетесь ли вы профессиональным веб-дизайнером, новичком в отрасли или предпринимателем, который хочет, чтобы его бизнес-сайт отличался высоким качеством.
Кроме того, включение последних и самых популярных тенденций веб-дизайна гарантирует, что ваш веб-сайт будет выглядеть современным, обновленным и действительно ухоженным — большой плюс, когда дело доходит до создания впечатления надежности в глазах ваших клиентов.
Мы обозначили тенденции веб-дизайна, которые будут доминировать в 2020 году, а также несколько профессиональных советов о том, как успешно реализовать их в своем дизайне.
Как может такая простая вещь, как размещение светлого текста, значков и элементов пользовательского интерфейса на темном фоне, быть настолько мощной? Темный режим — это тенденция веб-дизайна, которая, несомненно, доминировала в 2019 году, и маловероятно, что ее господство закончится в 2020 году.
Темный режим покоряет онлайн-мир с появлением лучших приложений и веб-сайтов, таких как Facebook Messenger, YouTube, Instagram, Viber, WhatsApp и Chrome, а также последних выпусков операционных систем Android и Apple. свет гаснет один за другим.
Популярность цветовой схемы заключается в ее многочисленных преимуществах, от предложения пользователям более элегантной и элегантной рабочей среды до положительного влияния на время автономной работы устройства и энергопотребление. Между тем, так называемый ночной режим также удобен, потому что он уменьшает использование светлых пикселей, что, в свою очередь, снижает общую яркость экрана, вызывая меньшее напряжение глаз и облегчая чтение.
Совет. Чтобы создать визуально потрясающий веб-сайт, смешайте темный режим с минималистичными белыми элементами и чистой графикой и типографикой. Для большей эстетической привлекательности добавьте несколько ярких акцентных цветовых схем, светящуюся неоновую типографику или футуристические элементы.
Источник: https://dribbble.com/shots/
66-Furniture-e-commerce-app Источник: https://dribbble.com/shots/4992178-Reuters-News-Night-Mode Источник: https://dribbble.com / shots / 8565906-The-Energetic-Tumbler-Landing-Page
Взрыв из прошлого, минимализм — это классическая тенденция веб-дизайна, которая останется неизменной.Хотя формы и особенности минимализма с годами изменились, его основные принципы остались прежними, завоевывая сердца как дизайнеров, так и конечных пользователей своей элегантностью, удобством использования и простотой.
Минимализм в веб-дизайне может означать множество вещей — от минималистичных графических элементов и узких цветовых палитр до минимума текста и навигации по сайту.
Эта тенденция приобрела известность как способ приспособиться к уменьшающимся размерам экрана и продолжительности внимания. Удобство использования и навигация по веб-сайту облегчаются благодаря чрезвычайно минималистичному меню, которое устраняет большую часть трудностей, смещая фокус посетителей с того, как найти определенную информацию, на использование самой информации.
Хороший способ достичь минимализма в веб-дизайне — отказаться от тяжелого абзаца для высококачественного изображения или видео, которое передало бы смысл текста более заманчиво и прямо.
Совет. Минимализм и функциональность идут рука об руку, поэтому при разработке навигации по веб-сайту избегайте втискивания несвязанной информации в один раздел. Сделайте так, чтобы вашим посетителям было легко найти услуги, которые вы предлагаете, страницу контактов или часто задаваемые вопросы, сохраняя при этом легкость.
Источник: https: // dribbble.com / shots / 3583923-Mono-WeatherSource: https://dribbble.com/shots/8622369-Mobile-app-Vegan-mealSource: https://dribbble.com/shots/8631208-Unix-Banking-App
2020 будет быть годом минимализма даже в цветовой гамме веб-сайта. Черное и белое в сочетании с очень узким спектром оттенков серого неизменно элегантны, эстетичны и современны.
Чтобы ваш веб-сайт не выглядел скучным, добавьте несколько высококачественных черно-белых фотографий или художественных иллюстраций.
Совет: 50 оттенков серого могут быть литературным бестселлером, но в дизайне веб-сайтов это провал.Если вы выбираете черно-белый веб-сайт с элементами в оттенках серого, придерживайтесь двух-трех оттенков серого.
Источник: https://dribbble.com/shots/5179726-Lookbook-Black-White Источник: https://dribbble.com/shots/7117245-HI-RISE-BUILDERS-DEVELOPERSS Источник: https://dribbble.com/shots /
14-Week-31-Photo-Discovery-App-Concept
Напротив, светящиеся цветовые схемы станут шагом вперед в изометрической тенденции в веб-дизайне. Светящиеся неоновые цвета, такие как синий, фиолетовый и розовый, сделают ваш сайт современным и футуристическим.В сочетании с более глубокими и темными оттенками эти яркие цвета будут появляться с экранов, создавая смелый и дерзкий вид вашего сайта.
Совет. Элементы неонового цвета хорошо сочетаются с любой из вышеупомянутых тенденций веб-дизайна (темный режим, минимализм, черный и белый), поскольку более темный, не красочный фон делает эти светящиеся цвета еще более заметными.
Источник: https://dribbble.com/shots/5577531-Atomic-DNA-Manifesto-Introduction Источник: https://dribbble.com/shots/47-Landing-Page-ICO Источник: https: // dribbble.com / shots / 4827534-Saving-Animals-Illustration
Ориентированный на человека подход в дизайне в последнее время переживает эпоху возрождения, и нет лучшего примера этого, чем рисованные элементы. Будь то карикатурные иллюстрации, нарисованные значки или рукописные надписи, технологии последних лет — это все, что связано с эмоциями, человечностью и индивидуальным подходом.
Кроме того, нарисованная от руки графика излучает позитив, душевность и легкость, поэтому эта тенденция является обязательной для 2020 года, если вы стремитесь показать своим клиентам, насколько вы креативны и изобретательны.
Совет. Художественные иллюстрации добавят немного аутентичности и непринужденности вашему веб-сайту, но будьте осторожны — иллюстрированный веб-сайт принесет пользу не всем профессиям. Чтобы ваша веб-презентация выглядела детской, легкомысленной или легкомысленной и, следовательно, отпугивала как существующих, так и потенциальных клиентов, обратитесь за советом к профессионалу в области веб-дизайна.
Источник: https://dribbble.com/shots/7160309-Snapsound-Homepage-In-progress Источник: https://dribbble.com/shots/6685757-Vacation-House-Cooking-Landing-Page Источник: https: // dribbble .com / shots / 9220552-Landing-page-Nature
В последние годы основной целью веб-дизайнеров было обеспечение приятного взаимодействия с пользователем. Один из самых важных аспектов хорошего UX — чистая, разборчивая типографика. Жирные шрифты с заглавными буквами, монохромные цвета или прозрачные с контуром — самая популярная тенденция сегодня.
Курсивные шрифты трудно читать, и очень легко смешивать похожие на вид буквы, поэтому такая типографика не имеет ничего общего с новым, современным веб-сайтом, который нацелен на хороший UX.
Совет. Крупный шрифт отлично подходит для привлечения внимания посетителей, но убедитесь, что размер букв правильный на всех устройствах, от настольных компьютеров до смартфонов. Одна буква, занимающая весь экран смартфона, — плохой пользовательский опыт.
Источник: https://dribbble.com/shots/6103123-Thrive-Conference-Promo-March-15-16 Источник: https://dribbble.com/shots/7725993-Funky-Fresh Источник: https://dribbble.com / shots / 7088514-Ten
Вероятно, одна из самых заманчивых тенденций веб-дизайна выходит на широкую ногу благодаря огромным технологическим достижениям последних лет.Трехмерные элементы — это весело, увлекательно и, как правило, дольше удерживают посетителей на сайте.
Depth добавляет ощущение реализма, качество, которое может быть особенно полезным для электронной коммерции, где трехмерные изображения могут использоваться для презентации продуктов с различных точек зрения или для практического использования.
Совет. 3D-элементы могут быть довольно тяжелыми для загрузки, поэтому не волнуйтесь, добавляя их на свой веб-сайт. Умеренно занятые, они могут творить чудеса; чрезмерно они могут снизить эффективность SEO вашего сайта.
Источник: https://dribbble.com/shots/6759955-Pastel-Pink-Lighting-Material-StudySource: https://dribbble.com/shots/6247971-Push-WeightSource: https://dribbble.com/shots / 8811213-3D-Design-Shoes-for-Commercial-Characters Источник: https://dribbble.com/shots/7779269-Otto
Приглушите хвастовство 3D, используя тени, слои и плавающие элементы. Это шаг вперед по сравнению с тенденцией материального дизайна, которая может превратить простое изображение в великолепный элемент. Этот псевдо-3D-эффект может быть применен также к значкам, графике и тексту.
Еще одна приземленная тенденция, которая может создать иллюзию глубины, — это перекрытие слоев. Размещение нескольких элементов, таких как текст, изображения, видео, значки и т. Д., Может превратить переполненный и загруженный веб-сайт в веб-презентацию с продуманным расположением и безмятежным потоком.
Совет: здесь определенно применимо старое доброе «меньше значит больше». Если ваш веб-сайт начинает напоминать презентацию PowerPoint со всеми доступными эффектами, такими как затухание, (исчезновение) появления, изменение размера, отбрасывание теней и т. Д.- прервать миссию.
Источник: https://dribbble.com/shots/6762159-Reimagining-99pi Источник: https://dribbble.com/shots/4677040-Porcelanosa-web-designhttps://dribbble.com/shots/6768450-99pi-Miss -Manhattan
До недавнего времени анимация веб-сайтов в основном происходила сама по себе, независимо от действий посетителей на самом сайте. 2020 год изменит это с появлением анимации, запускаемой пользователем.
Вышеупомянутые тренды трехмерных, плавающих или многослойных элементов можно включить в анимацию, запускаемую пользователем.Щелчки, наведение и другие действия посетителей могут привести к изменению цвета, размера, дизайна и т. Д. Эти анимации полезны, когда вы хотите, чтобы ваш веб-сайт был более увлекательным и стимулирующим, но при этом сохранял свою простоту и элегантность.
Совет: не переусердствуйте — одной или двух анимаций, запускаемых пользователем, вполне достаточно. Большое количество анимаций может привести к тому, что каждое движение мыши пользователя будет делать что-то на веб-сайте, создавая путаницу и неудовлетворенность.
Источник: https: // dribbble.com / shots / 7885798-Pet-food-website-design Источник: https://dribbble.com/shots/8493535-Book-Festival-Website-Interactions
Градиенты снова в моде, сильнее, чем когда-либо. В 2020 году появятся смелые разноцветные градиенты на всем, от фона до текстовых заливок. Сочетание нескольких цветов, создающих контраст и иллюзию глубины, — это выигрышная комбинация для гладкого, ультрасовременного внешнего вида веб-сайта.
Совет. Избегайте монотонных градиентов, поскольку они выглядят неряшливо, скучно и не стильно.
Источник: https://dribbble.com/shots/8660936-Birds-Guide-APPS Источник: https://dribbble.com/shots/5635469-Hero-image-illustration-for-music Источник: https://dribbble.com / shots / 7013067-App-concept
«Картинка стоит тысячи слов». Верно для 2019 года, но благодаря высокоскоростному подключению к Интернету статические изображения героев исчезли. Вместо этого высококачественные видеоролики, которые создают впечатление фильма, являются отличным способом приветствовать, вовлекать и развлекать посетителей в 2020 году. Изображения имеют решающее значение в визуальном дизайне, потому что они позволяют доставлять сообщение быстро и прямо, и нет лучшего способа показать это чем использование видео.
Au contraire, есть только текстовые герои. Большая, жирная, жирная типографика, без фотографий и видео, оформленная в монохромной цветовой схеме, — новая горячая тенденция 2020 года. Удаление той части веб-сайта, которую посетители увидят первой, — это смелый эксперимент, но тенденция, которая обязательно будет очевидна. его пик в текущем году.
Совет. Для загрузки видео требуется время, поэтому, если вы выберете один из главных разделов, убедитесь, что он имеет правильный размер и не задерживает время загрузки вашего веб-сайта.Поместить видео с YouTube в героя — большой запрет — либо интегрируйте его на свой веб-сайт, либо полностью избегайте видео.
Источник: https://dribbble.com/shots/3169448-Type-color
2020 год станет годом разнообразия, когда дело доходит до тенденций, доминирующих в мире веб-дизайна. От абсолютной простоты до чрезмерных сочетаний цветов и элементов, у дизайнеров будет широкий выбор того, как создать веб-сайт, который будет выделяться среди всех других привлекающих внимание дизайнов.
Дизайнерам, которые стремятся к лучшему UX и привлекательному внешнему виду веб-сайтов, следует помнить о некоторых из тенденций веб-дизайна, которые будут доминировать в 2020 году:
Темный режим
Минимализм
Черно-белый
Световые цветовые схемы
Рисованные от руки элементы
Полужирная типография
3D-элементы
Тени, слои и плавающие элементы
Анимация, запускаемая пользователем
Разноцветные градиенты
Видео или текстовые герои
Уже в этом году выглядит многообещающе, как для дизайнеров, которые будут заняты объединением этих тенденций, так и для маглов веб-дизайна, которые получат возможность наблюдать и наслаждаться ими по всей сети.
Как создать полное руководство по стилю веб-дизайна + шаблон
Веб-технологии и тенденции дизайна постоянно развиваются. Это относится и к предприятиям, поэтому со временем вам придется обновлять язык бренда. В результате ваше руководство по стилю не останется статичным. Скорее всего, сразу после его создания следует ожидать, что вы будете регулярно вносить в него изменения.
Это требует гибкости и внимания к деталям от дизайнера. Вам нужно будет идти в ногу с последними отраслевыми тенденциями и быть готовым адаптироваться к ним.
Чтобы помочь вам сохранить единообразие языка дизайна, Elementor 3.0 представляет Global Site Settings . Теперь вы можете управлять всем своим сайтом в редакторе. Новая панель Site Settings предоставляет множество инструментов настройки и дает вам центральное место для изменения всех параметров вашего сайта.
На любой странице, которую вы редактируете с помощью Elementor, перейдите на левую панель и щелкните значок в верхнем левом углу. Вы попадете на панель Global Settings . Здесь вы можете получить доступ ко многим настройкам вашего сайта, таким как настройки лайтбокса, а также к настройкам макета по умолчанию.
Вы также найдете Site Identity для настройки вашей межсайтовой идентичности с параметрами, связанными с вашим логотипом, значком, заголовком, слоганом и т. Д. В разделе Design System раздела Site Settings , Global Colors и Global Fonts также можно обеспечить единообразие дизайна для всего сайта.
Макет позволяет вам определять настройки макета Elementor по умолчанию, такие как ширина содержимого и макет страницы. Lightbox позволяет вам установить стиль по умолчанию для лайтбоксов Elementor. Стиль темы предоставляет глобальные настройки для определения стиля по умолчанию для различных элементов, не связанных с Elementor, таких как заголовки, кнопки, изображения и поля формы.
С помощью этих новых функций вы можете обеспечить единообразие дизайна и узнаваемость бренда на всем своем веб-сайте.
5 популярных веб-дизайнов, которые вы должны знать
* Последнее обновление 19 октября 2016 г.
Цель различных типов веб-дизайна — наилучшим образом использовать существующие технологии для создания привлекательных веб-сайтов, служащих самой цели их концепции.
Два различных стиля веб-дизайна, доступных сегодня, — это статический и динамический веб-дизайн. Сегодня я покажу вам несколько популярных сегодня креативных веб-дизайнов, которые вам следует знать. Пора отказаться от старых привычек и попробовать разные типы веб-дизайна:
1. ИЛЛЮСТРАТИВНЫЙ ВЕБ-ДИЗАЙН
Иллюстрация — невероятно универсальный инструмент, который может найти множество различных применений в дизайне. А когда дело доходит до веб-дизайна, мы можем найти чрезвычайно широкий спектр реализаций.
Иллюстрации и карикатуры действительно могут оживить веб-дизайн. Рисование — это творческое занятие по определению, и включение его в дизайн веб-сайта — один из самых креативных методов представления информации в сети. В 2016 году иллюстрация стала жизненно важной частью веб-внешнего вида благодаря своим заманчивым и забавным маленьким элементам, таким как значки. Кроме того, сайт станет более личным для пользователей и будет лучше связывать пользователей.
Посмотрите примеры ниже.
DE VLAAMSE KUST EXTRA DELUXE
КЛИМАТ ПОД ДАВЛЕНИЕМ
2.МИНИМАЛЬНЫЙ ВЕБ-ДИЗАЙН
Цель минимализма — раскрыть сущность дизайна, исключив все несущественные формы, особенности и концепции. В веб-дизайне минимализм стирает потенциальные отвлекающие факторы и превращает элементы в их самые простые формы.
Это стиль, который продолжает оставаться модным, являясь реакцией на хаос и поток информации, присущий Интернету. И если единственная цель вашего портфолио — продемонстрировать лучшую работу, которую вы когда-либо создавали, самая большая услуга, которую вы можете сделать для себя, — просто уйти с дороги.
ДИЗАЙН-АГЕНТСТВО HOCHBURG
JSN MINI
3. ВЕБ-ДИЗАЙН ТИПОГРАФИИ
Первые впечатления — неизгладимые впечатления. Осознаете вы это или нет, ваша типографика помогает создать впечатление для пользователей, прежде чем они даже прочитают слово или нажмут кнопку. Типографика может выйти за рамки простого рассказа истории — она показывает пользователю, кто стоит за сайтом и о чем он.Обработка шрифта создает атмосферу и вызывает реакцию во многом так же, как тон голоса
Как один из основных принципов дизайна, типографика действительно может улучшить или испортить дизайн веб-сайта. Несмотря на недавние достижения в технологии веб-шрифтов, мы все еще довольно ограничены, когда дело доходит до креативных макетов типографики, а это означает, что методы замены изображений по-прежнему распространены, но в наши дни у нас есть огромный выбор, когда дело доходит до выбора шрифтов для наших дизайнов.
Однако с ростом использования мобильных устройств в последние годы можно утверждать, что дизайн типографики является недостатком, поскольку он уменьшает время загрузки веб-сайта.Вы можете легко решить эту проблему, отображая типографику в зависимости от разрешения устройства.
MD
ДЕГОРДИАН
4. ОДНОСТРАНИЧНЫЙ ВЕБ-ДИЗАЙН
Одностраничный веб-дизайн, безусловно, не новая тенденция. Продолжительность его существования говорит о том, что он более практичен и эффективен, чем многие другие. Как и все тенденции, одностраничные сайты имеют свои преимущества и недостатки, но в мире, где ежедневно создаются тысячи новых веб-сайтов, одностраничный веб-дизайн может быть лучшим способом удовлетворить постоянно сокращающийся объем внимания человека.
Следует отметить, что одностраничный веб-дизайн не идеален для всех целей. Четкая цель вашего дизайна, размещение вашего контента на одной странице и создание интересного макета — вот некоторые из наиболее важных моментов, позволяющих полностью раскрыть потенциал вашего дизайна одной страницы.
АГЕНТСТВО КРЕАТИВНОГО ВЕБ-ДИЗАЙНА
ЖИВИ, ЧТОБЫ ИЗМЕНИТЬ МИР
JSN YOYO
5.ПЛОСКИЙ ВЕБ-ДИЗАЙН
Flat design — это минималистичный дизайнерский подход, подчеркивающий удобство использования. Он отличается чистым открытым пространством, четкими краями, яркими цветами и двумерными / плоскими иллюстрациями.
Microsoft была одной из первых, кто применил этот стиль дизайна к своему интерфейсу. Вместо того, чтобы превращать реальный объект, такой как календарь, в крошечную реалистичную иллюстрацию, сторонники плоского дизайна идентифицируют приложения с простыми изображениями в виде значков. Вместо того, чтобы привносить в интерфейс аспекты реальной жизни, это демонстрирует четкое разделение между технологиями и тактильными объектами.
JSN METRO
KLM ПЛОСКОЕ ИЛИ НЕ
УЗНАТЬ БОЛЬШЕ ШАБЛОНОВ JOOMLASHINE
Какой из них выбрать для своего сайта на Joomla?
Выбор подходящего дизайна для вашего веб-сайта — непростая задача. Это будет во многом зависеть от типа вашего сайта и того, что вы собираетесь с ним делать. Кроме того, это не всегда лучший дизайнерский тренд.
Говоря о том, чтобы ваш сайт на Joomla выглядел хорошо, акцент на визуальном оформлении является большим преимуществом с помощью потрясающего слайдера изображений или впечатляющей витрины изображений.Поэтому убедитесь, что вы уделяете этому элементу особое внимание.
ПОПРОБУЙТЕ РАСШИРЕНИЯ JOOMLASHINE
Я познакомил вас с некоторыми из самых популярных тенденций веб-дизайна.
No related posts.