Где веб-дизайнеры подсматривают идеи. Портфолио иллюстрирует процесс создания дизайна

В сфере создания сайтов креатив был востребован всегда. Как только не проявлялась фантазия веб-дизайнеров! С появлением HTML5 / CSS3 / SVG и прочего, наконец-то, для создания крутых сайтов появились все возможности. Свободные (фрилансеры), креативные агентства и дизайнерские студии – первые, кто должны бы их использовать для создания невероятных веб-сайтов. И хотя появилась мода на яркие цвета, нельзя не заметить, что WEB переживает совсем иные тенденции. Это если не минимализм, то по крайней мере, простота и чистый дизайн.

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

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

01. Sibirix

Выразительный современный сайт студии интернет-решений разработан специалистами Сибири.

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

Читайте также: Навигационное меню: 15 примеров нестандартного дизайна

Используемые веб-тренды:

• Стиль FLAT
• Модульный дизайн привлекает внимание эффектно оформленными плитками
• Микроитерации и красиво анимированный интерфейс развлекают посетителя

02. Cuberto

Современные позволяют выразить себя, задать настрой на позитив.

Эмоциональным минимализмом сайт студии поддерживает оптимизм клиентов. Технологии: , GSAP Animation, SVG. Используемые веб-тренды:

• Разделенный экран с анимированными элементами в общем пространстве
• Необычная навигация, скролл-эффекты,
• Фоновое видео (в закольцованных видеороликах мелькают лица энергичных заказчика и счастливых пользователей)

03. Nikoland

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

• Плитки в дизайне
• Чистый

04. Red Collar

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

Сайт на HTML5 запоминается (которые собраны на ), а привлекает стильными эффектами с красивыми переходами. Используемые веб-тренды:

• Минималистичный дизайн с утонченными элементами навигации
• Анимированные микровзаимодействия в UI

Читайте также: Анимация по правилам UX-дизайна: полное руководство

05. 12wave

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

Команда студии представлена креативными баранами, занятыми творчеством на планетах, в открытом космосе и на борту корабля. Иллюстрирование в стиле Smooth Shading позволило сделать оформление ироничным и реалистичным. Используемые веб-тренды:

• Красочный дизайн с занимательными персонажами
• Анимация & Интерактивная анимация в HTML5
• Векторная графика 3D

06. Hungry Boys

Голодные парни» стартовали 5 лет назад и вышли в десятку лучших студий РФ.

Сегодня дизайн-студия создает проекты для стартапов и корпораций рунета / буржунета, входит в состав международной сети агентств POSSIBLE Group. Используемые веб-тренды:

• с эффектными призрачными кнопками
• Легкая анимация

Читайте также: 30+ примеров и идей оформления кнопок целевого действия

07. Promo

Старейшее веб-агентство с репутацией и именитыми клиентами в портфолио основано в 1997 г.

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

Результаты опроса, проведенного руководителем студии «Сибирикс»

В закладки

Руководитель студии «Сибирикс» Владимир Завертайлов опросил своих коллег и собрал ряд ресурсов, на которых дизайнеры могут найти идеи и вдохновение для создания собственных продуктов.

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

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

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

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

• Собрать идеи для сайта.
• Найти конкретный элемент.
• Нахвататься визуального вдохновения.
• Посмотреть всё в одном месте.
• Подтянуть матчасть.

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

Собрать идеи для сайта

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

• Awwwards . Не баян, а классика. Хотя «Коллекции» на Awwwards - относительно свежая фишка.
• The FWA , CSS Design Awards , Website Design Award . Пачка конкурсов сайтов, на которых работы, бывает, повторяются. Но проскакивают и оригинальные номинанты.
• Designer News . Ресурс, где можно и крутые примеры найти, и мнение коллег со всего мира почитать. Обычно все дизайны, которые выкладываются на Awwwards, сперва появляются здесь.
• Site Inspire . Симпатичные сайты, которые редко пересекаются с Awwwards и Ко. Не всегда конкурсные, но всё равно оригинальные и интересные.
• Cargo Сollective . Подборка минималистичных сайтов с какой-то потаённой изюминкой.

• The Best Designs . Тут сайты попроще - бегунок креатива выкручен не больше, чем на 20%.
• The Perfect Grid . Подборка сайтов с нестандартной сеткой - тренд 2017 года, между прочим.
• Sibirix"s Pinterest . Когда наши дизайнеры не рисуют годноту, они добавляют сайты, которые им понравились, вот сюда.
• Minimal gallery . Галерея радикального минимализма. Шикарно вставляет. Чего стоит хотя бы этот экспонат, где на главной странице только текст и курсор в виде банана.
• Hover States . Подборка необычных сайтов с удобным фильтром по тегам.
• Siiimple . Здесь порционно раз в день добавляется по одному хорошему минималистичному сайту.
• One Page Love . Собрание одностраничных сайтов. Веселых, а порой и не очень приличных. Слабонервные и неженки, ходите аккуратно.

Найти конкретный элемент

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

• Dribbble . По праву затёртый до дыр ресурс - здесь гигабайты идей для иконок и микровзаимодействий. Самое сложное - найти среди них что-то полезное.
• Motion UI . Субъективная выжимка из Dribbble - для тех, кто не хочет ворошить его завалы самостоятельно.
• Codepen Codrops . Ресурсы, где хранятся уже готовые рабочие элементы: хоть сейчас вставляй на сайт. Находите что-то крутое, обыгрываете в своём дизайне и несёте нужный кусок кода верстальщику - профит.
• Web Design Freebies . Подборка иконок, шрифтов, иногда проскакивают мокапы - золотая жила для мудборда. Больше не обновляется, так что пользуйтесь, пока не протухло.
• Color Supplyyy App . Простое и приятное приложение для подбора цветовой гаммы.
• Fonts Google . Шрифты, которые Google одобряет.
• Uimovement . Коллекция няшных микровзаимодействий.

Нахвататься визуального вдохновения

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

• Design Collector . Фото, видео, картинки и прочая мишура, которая помогает нащупать вектор, в котором нужно творить.
• Ffffound . Чуть более хипстерский склад изображений: больше глитча и кислотных гифок.
• Designspiration . Сборная солянка из дизайнерских работ и фотографий из Instagram.

Посмотреть всё в одном месте

Если вам нужно посмотреть сразу и макеты, и иконки, и шрифты, но вы слишком цените свой work in progress, чтобы переключаться между сайтами, познакомьтесь с ресурсами ниже. Там есть всё, только поисковый запрос уточните.

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

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

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

R&D

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

Mast

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

A Day Out

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

Lg2

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

Mathematic

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

Phoenix

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

2LG

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

Designgoat

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

Gin Lane

Простой сайт от Gin Lane использует приятный шрифт с засечками на фоне приглушенного градиента. Он отлично вписывается в легкий дизайн главной страницы.

P22

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