Примеры сайтов

Темная тема

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

При создании дизайна в темных тонах, тщательно продумайте взаимодействие его с пользователями

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

Нетрадиционная прокрутка

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

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

Основные требования современного web дизайна

Качество веб-дизайна всегда имеет первостепенное значение, так как от него во многом зависит успех сайта. Команда дизайнеров веб-студии АВАНЗЕТ не просто следит за современными трендами, мы постоянно их тестируем и применяем самые успешные для того, чтобы создавать такие решения, которые помогают нашим клиентам конвертировать посетителей в постоянных клиентов. И в любом проекте соблюдаем эти правила:

• интуитивно понятное графическое оформление сайта
• разработка интуитивно понятной навигации (визуальной структуры)
• формирование простой логики сайта
• комфорт взаимодействия пользователя с сайтом

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

Анимация оживляет дизайн и делает акценты на главном

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

При создании дизайна обычной веб страницы для практического воплощения такого функционала потребуются 3 или 4 разных графических файла для каждой кнопки. Каждый из этих файлов будет отвечать за определенное состояние (обычное, при наведении и при нажатии). Загрузка той или иной картинки будет происходить посредством правил CSS, которые описаны ниже: 

1. a – обычная ссылка, для которой задается цвет и первое фоновое изображение.
2. a:hover – ссылка при наведении на нее мышки (также описывается цвет и путь ко 2-ой фоновой картинке).
3. a:active – здесь описываются параметры ссылки в непосредственный момент нажатия на нее. 
4. a:visited – указываются параметры уже посещенной ранее ссылки в состоянии, когда на нее не наведена мышь.

ВЫВОД: Слишком яркие анимированные кнопки целесообразно использовать только для посадочных страниц, в остальных случаях вполне достаточно анимации при наведении.

Готовы ли вы поднять дизайн сайта на новый уровень? Мы являемся командой специалистов по разработке веб-сайтов и с экспертами UX-дизайна, которые готовы помочь сделать именно это!Если вашему бизнесу требуется создание современного сайта, не пренебрегайте анимацией, она сделает его более живым и интересным. Только помните про чувство меры, оно никогда не бывает лишним. 

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

18.04.2021

Дизайн сайта определяет его цель

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

Ниже рассмотрим наиболее распространённые типы сайтов.

Сайт-визитка (landing page)

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

Интенсив «Профессия Data Scientist: учимся обработке и анализу данных за 3 дня»

26–28 апреля, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

Пример лендинга программы лояльности «Совести»:

https://sovest.ru/loyalty_info

Корпоративный сайт

Создаётся компаниями, чтобы рассказать клиентам о себе — кто мы такие, чем занимаемся, наша миссия, контакты, структура, портфолио и прочее. Может быть нужен

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

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

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

https://sovest.ru/

Сайт-витрина

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

https://www.marykay.ru

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

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

https://aliexpress.ru

Портал

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

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

Пример — сайт Мэра Москвы, там и новости, и статьи, и услуги.

https://www.mos.ru

БОЛЬШИЕ заголовки, привлекающие внимание

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

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

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

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

Креативные, творческие, дизайнерские сайты

Jess Marks Photography

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

Team Les Chameaux

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

We are CMYK

Необычный сайт с интересным доменным неймингом (увязано с оформлением) и плоским стилем дизайна. В агентстве Адама Шера (специалиста по UI/UX и моушн-графике) концентрируются на эстетической привлекательности & опыте взаимодействий. Идея, креативным контентом и уникальностью показать – у нас нет клише-решений. Интересные «фишки» в неизбитом web-дизайнерами виде: персонификация, многоцветные страницы с анимациями, графика с разбивкой на квадратики – пиксели.

Flat дизайн

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

• Двумерная графика.
• Интуитивно-понятный интерфейс
• Акцент на типографике
• Сочные, сочетающиеся цвета.

Впервые данный стиль был представлен Apple в 2012 году для операционной системы Ios и стал фаворитом среди дизайнеров, уставших от реализма. С тех пор он претерпел много изменений, но остается популярным и по сей день.

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

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

1. Быстрота загрузки такого приложения или сайта (векторная графика весит меньше, чем качественный растр)
2. Экономия на разработке, так как не нужно сохранять изображения под расширения разных устройств. Достаточно сохранить их в формате SVG.

«Keep it simple, stupid» — принцип проектирования KISS, утверждает, что большинство систем работают лучше всего, если они остаются простыми, а не усложняются. Был впервые сформулирован специалистами ВМС США, но получил свое распространение в анимационных фильмах и дизайне.

Figma

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

Многопользовательский режим редактирования

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

Привлечение разработчиков

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

Автоматическое сохранение и история данных

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

Компоненты

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

Инструменты

Vector Networks и Arc показали дизайнерам новый уровень работы с пером и круговыми элементами, на котором работа с опорными точками стала ещё проще. А расширенные возможности OpenType помогают сделать шрифт индивидуальным, и даже эксклюзивным.

Сетки

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

Бесплатная версия

Figma располагает линейкой тарифов, на момент публикации статьи это: Professional за $12-$15 долларов в месяц, Organization за $45 в месяц с расширенным функционалом, а также бесплатной версией, наиболее полной в сравнении с аналогичными программами. Некоммерческая версия предполагает три основных ограничения:

• До 3 проектов;

• До 2 редакторов;

• 30-дневное хранение истории версий.

Недостатки

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

6 сайтов для дизайнеров о шрифтах и типографике

• https://ilovetypography.com. Один из лучших ресурсов для тех, кто небезразличен к буквам. На этом сайте вы найдете массу полезных и просто интересных заметок о типографике и том, что с ней связано.
• https://fonts.google.com. Подборка бесплатных шрифтов от Google, которой чаще всего пользуются дизайнеры. Самое полезное — возможность посмотреть, с какими шрифтами чаще всего сочетается выбранный вами вариант.
• https://www.paratype.ru. Отличный сайт с хорошей подборкой шрифтов. Из приятного — можно без особого труда подобрать даже красивый русский шрифт, из печального — большинство шрифтов придется приобретать (но на сайте часто проводятся распродажи).
• https://fontshop.com. Магазин шрифтов, где можно подобрать удачное решение для своего проекта. Но особенно интересен сайт даже не количеством самих шрифтов, а примерами их применения, которые позволяют лучше оценить, насколько выбранный шрифт подходит для вашей задачи.
• https://www.dafont.com. Огромная подборка шрифтов для самых разных задач, а еще — удобный интерфейс и много новинок.
• https://typejournal.ru. Полезный интернет-журнал о типографике и шрифтах.

Склад туалетной бумаги

Идея: онлайн-магазин для обычной туалетной бумаги. Если вы когда-либо использовали туалетную бумагу (надеюсь, все это делали), то поймёте существенную разницу между видами туалетной бумаги. После того как придётся подтереться каким-то эквивалентом картона, вы проклянёте владельцев фирмы и будете желать им зла. Это должен быть сайт для любителей туалетной бумаги…если такие вообще существуют.

Ключевые функции:

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

Ключевые дизайнерские решения:

• Пользователи могут никуда ехать, чтобы купить туалетную бумагу. Почему они должны выбрать ваш сайт? Может быть, из-за юмористических объявлений? Или простого процесса покупки? Возможности подписаться? Подумайте, как сделать сайт уникальным среди всех остальных сайтов в сфере электронной коммерции.
• Кто ваши клиенты? Мамочки? Элитные рестораны? Роскошные отели? Гермофобы? Это во многом будет определять то, какая продукция будет на вашем сайте.
• Как будете структурировать посадочные страницы? Хотите чтобы пользователи переходили сразу в интерфейс покупок или иметь главную страницу, которая представит весь сайт?

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

Сайт для вдохновения: diapers.com.

Дизайн сайта в стиле Веб-2

Относительно новый стиль дизайна сайтов, примеры которому все чаще встречаются в Сети, это стиль Веб-2. Стиль развился параллельно с развитием технологий RSS-потоков, CMS и Ajax, а также появлением тегов-ключевиков. Благодаря Веб-2 появилась возможность моментального добавления/обновления контента без перезагрузки сайта.

Особенности Веб-2:

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

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

09.05.2020

Стильные текстуры в фоне

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

Современные веб-дизайны творчески применяющие фоновые текстуры:

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

abcdentaltexas.com – необычное для сайта стоматологии мультяшное оформление с красивой текстурой фона

djeco.com/ru – клетчатый фоновый паттерн и другие текстуры в красивом мультяшном дизайне сайта компании

Персональный сайт Марио

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

Тип сайта: персональный сайт.

Ключевые функции:

• Как и любой персональный сайт, он должен рассказывать обо всех достижениях и навыках.
• Расскажите историю Марио визуально, ведь он мультипликационный персонаж. Не только рассказывайте о его опыте работы, но и используйте небольшие визуальные анимации, чтобы привнести в достижения жизнь.
• Берите измеримые величины, чтобы показать достижения в его карьере: как много спас принцесс? Сколько игр продалось? И тому подобное.

Ключевые дизайнерские решения:

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

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

Изометрия в дизайне

Вероятно, возвращение изометрического дизайна стало реакцией на FLAT-экспансию по всему миру.

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

Примеры современных изометрических дизайнов:

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

brightscout.com – зеленый дизайн сайта компании красиво проиллюстрирован, использован полу-плоский стиль с тенями, градиентами и скорлл-эффектами

mibexsoftware.com – сайт софт-компании, современный плоский изометрический дизайн с фирменным персонажем

11 сайтов о логотипах

LogoDesignLove — сайт о хороших логотипах

• https://logopond.com. Сотни примеров логотипов, как удачных, так и не очень, в вашем распоряжении. Плюс ресурса в том, что вариантов на нем очень много, а еще их можно по-разному отсортировать.
• https://www.logaster.com. Сервис позволяет очень быстро генерировать логотипы. Да, уникальный логотип с его помощью не сделать, но сайт очень выручает, когда у клиента еще нет логотипа, а в шапку сайта нужно что-то поставить.
• https://logo.squarespace.com/. Аналогичный сервис для создания логотипов небольшого размера. Вы вводите название компании и попадаете в редактор, в котором к логотипу можно добавить иконку, а заодно посмотреть, как все это смотрится на визитке, мониторе и футболке.
• http://logofaves.com. В подборках логотипов на этом ресурсе можно найти не только идеи, но и контакты дизайнера, а также ссылку на его Behance-профиль. Это очень удобно в случае, когда вам нужно не только посмотреть логотип, но и найти исполнителя.
• https://www.hipsterlogogenerator.com. Еще один генератор, позволяющий создать простой, но достаточно эффектный логотип за пару минут.

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

• http://logotypes101.com. Подборка бесплатных векторных логотипов. Если у вас есть время и вы готовы его потратить, то сможете найти неплохой вариант.
• https://logobaker.ru. Сайт для тех, кто разрабатывает логотипы. Здесь есть неплохая подборка, а также возможность попросить совета или получить фидбек.
• https://www.logofury.com. В этом сервисе от вас требуется только ввести название компании, выбрать категорию и добавить слоган (при желании), все остальное генератор делает за вас, мгновенно создавая десятки вариантов.
• https://www.logomoose.com. Очень солидная подборка логотипов со всего мира. Что интересно, есть действительно много хороших вариантов, которые можно использовать для вдохновения.
• http://www.thelogomix.com. И снова подборка логотипов, но на этот раз с расширенной сортировкой: можно выбрать логотипы по определенному цвету или тематике. Когда нужно что-то быстро придумать, очень выручает.

Tilda Publishing

Лёгкость вёрстки и разнообразная библиотекаDrag-and-drop интеграция изображенийАдаптивностьДизайн-контрольОптимизация и продвижение.Недостатки:

• Бесплатная версия площадки имеет существенные ограничения: вы можете разрабатывать только 1 проект с выделенным объемом памяти на сервере в 50Mb. Вам не будут доступны полная коллекция блоков, многие инструменты аналитики, SEO и добавление собственных шрифтов.
• Все шаблоны одностраничные.
• Кастомный CSS только для Zero Block Нет возможности редактировать стили стандартных блоков.
• Ограниченный функционал элементов и отсутствие их стилей. Настройки отображения нельзя сохранять в стили, что усложняет работу над многостраничными проектами с группами повторяющихся элементов.
• Медленная загрузка шрифтов в проект: даже при использовании «сторонних» баз шрифтов сначала происходит загрузка дефолтных.
• Передача доступа для редактирования страниц доступна только в платных версиях.
• Ограниченный экспорт сайта: для перевода сайта на свой хостинг понадобится экспорт, доступный только в тарифе Business.
• Скорость загрузки сайта низкая из-за абсолютной позиционированности всех элементов.

8 полезных сайтов про иконки

https://www.iconfinder.com. Один из самых популярных сайтов для дизайнеров с огромным количеством иконок на все случаи жизни. Иконки делятся на платные и бесплатные, а скачать их можно как в PNG, так и в SVG-формате.

https://thenounproject.com. Очень приятный ресурс с большим выбором, легким дизайном и красивыми иконками. Для того, чтобы начать пользоваться, нужно лишь зарегистрироваться.

Round Icons – 45,000 Premium Icon packs flat icons line icons solid icons

Здесь можно найти очень необычные решения (обратите внимание на подборку doodle-иконок). Что самое приятное, небольшие наборы доступны для бесплатного скачивания.

https://iconmonstr.com

Очень похожий на уже рассмотренные нами ресурсы — множество иконок, удобный поиск и несколько форматов для скачивания (SVG, EPS, PSD, PNG).

Не всегда стоит тратить время на создание уникальной иконки

Асимметричные макеты и «ломаная» сетка

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

Дизайны с асимметричной разметкой и наслаиванием элементов:

welikesmall.com – ультрасовременный дизайн digital-агентства использует ломаную сетку с асимметричными пересечениями элементов. Крутые эффекты и микро-анимации интерфейса

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

originalterritory.com – приятный eCommerce сайт «Территория собак» с асимметричной разметкой. Дизайн мягкий, компактный и современный

imsproductions.com – красивое применение тренда на сайте американской продакшн компании

heeds.eu – яркий и нестандартный дизайн. Двуцветная коррекция изображений, градиенты, ломанная разметка

Проектирование систем

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

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

Дизайн с элементами анимации становится намного более выразительным

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

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

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

Использование прокрутки

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

На сайте Apple прокрутка активирует милейшую анимацию.

Использование 3D-объектов

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

Минимализм

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

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

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

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

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

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

Blog and form by Bogdan Nikitin

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

Брутальный веб-дизайн

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

Стиль брутализм применяемый в веб-дизайнах:

gift.gucci.com – интерес к брутализму проявляют не только в веб дизайнерской среде: звездный бренд применяет не ради забавы

balenciaga.com – этот вид Web брутализма критик назвал минимализмом на стероидах (к примеру, mahzedahrbakery.com уже выглядит простым минималистичным сайтом)

Градиенты 2.0

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

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

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

Duotone и оверлей поверх изображений

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

Современные и эстетичные веб-дизайны применяющие дуотон:  

muller.it – итальянский продуктовый бренд красиво оформил сайт дуотон-видеобекграундом с добавлением мягкого градиента

cliquestudios.com – на главной странице сайта дизайн-агентства кейсы разграничены цветовыми фильтрами (overlay)

socialplayground.com.au – дуотон фото усиливают социальные доказательства, украшают главную и страницу «О нас»

В заключение

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

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