Ростелеком ТВ 

Дизайн для веб студии. Где веб-дизайнеры подсматривают идеи. Когда веб-дизайн убивает искусство

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

Встречают по одежке

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

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

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

1. Каким не должен быть сайт

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

Создатели этого сайта специально допустили следующие ошибки:

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

2. Когда gif-анимация может нанести серьезные увечья

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


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

3. Как скрыть самую важную информацию

Чтобы ни один человек не узнал военную тайну, опубликуйте ее на сайте. Возьмите пример с автора сайта Time cube. Он не стал тратить время на визуальный дизайн, ограничившись изменениями размера и цвета шрифта. Зачем тратить время на визуальную привлекательность, если сайт посвящен «новой модели реальности»?


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

4. Как заставить пользователя забыть о цели визита

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


5. Норвежцы тоже могут сделать Amazon

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


6. Почему у Артемия Лебедева аллергия на креативные решения

В разделе «О нас» студии Артемия Лебедева написано, что «у них» аллергия на словосочетание «креативные решения». Природа этой аллергии становится понятной, если взглянуть на сайт Reforms.net . Креативности здесь очень много. Собственно, на сайте нет ничего, кроме креативности.


7. Не оставайтесь в 90-х

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


8. Как удивить посетителя

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


9. Как причинить посетителю боль

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


10. Почему фэншуй и веб-дизайн несовместимы

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

  • Сложная навигация.
  • Нечитабельность контента.
  • Сочетание нейтрального фона с яркими разноцветными элементами навигации.


11. Как запутать посетителя

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


12. Как проверить эрудицию посетителей

В популярной игре «Угадай, кто» участники должны узнавать знаменитостей по фото. Создатели сайта DS+R предложили посетителям новый вариант этой игры. Они должны найти желаемый элемент меню по превью фотографии.


13. Когда веб-дизайн убивает искусство

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

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

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

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

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

Портфолио содержит примеры адаптивных дизайнов.

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

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

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

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

В портфолио упоминаются проведенные исследования.

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


Когда Нетта Маршалл работала на Tally, она приводила примеры того, как исследования влияют на окончательный дизайн. Она объясняла, каким образом было проведено исследование (в данном случае, посредством волонтеров) и как результаты исследования отразились на изменении дизайна. И хотя она не слишком вдавалась в детали, очевидно, что именно исследование оказало огромное влияние на окончательный результат работы.

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

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

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

Я восхищаюсь портфолио Хьюн Сео. На первый взгляд в нем слишком много текста, и мало скриншотов. И это хорошо. Потому что его кейс-исследование для Cloud Security Enforcer от IBM объясняет проект потенциальному клиенту, почему дизайнер решает поставленную задачу именно таким образом. Оно на ¾ состоит из текста и на ¼ из скриншотов, большая часть которых приведена уже в конце документа. Его кейс-исследование подробно описывает роль дизайнера в проекте, проблему, стоящую перед ним и варианты ее решения
Нужен дизайнер-художник или тот, кто способен решить проблему?

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

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

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

Портфолио иллюстрирует процесс создания дизайна.

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

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

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

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

Дизайн сайтов качественно. Заключение.

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

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


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

32 шаблона для сайта веб студии, агентства, smm, маркетинга на WordPress

1. Salient

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


2. Composer

Многофункциональная адаптивная тема с высокой производительностью. Из 85 демо Composer 20 относятся к категории «Агентство / стартап», без учета лендингов и портфолио. Дизайнерами подготовлено 12 вариантов блоков для размещения графических примеров работ, в том числе с наложением слоев и parallax. Шаблон сео оптимизирован и может использовать дочерние темы.


3. Jupiter

В числе демо этой универсальной адаптивной темы есть сайты для СММ, креативных агентств и бизнес проектов. Одна из особенностей Jupiter — эксклюзивный parallax слайдер. Для каждой страницы сайта можно взять любой из 18 готовых хедеров или создать свой. В шаблоне 3 варианта оформления портфолио и 6 вариантов hover эффектов для фото.


4. The7

Набор инструментов для создания сайта любой тематики на WordPress. Шаблон позволяет использовать 6 премиальных плагинов без дополнительной платы, среди них Visual Composer и Ultimate Addons. Имеется несколько демо для Mobile App Design и разных видов агентств. Тема поставляется с эксклюзивным плагином The7 Elements, который расширяет возможности Visual Composer.

Подборка: 50+ шаблонов для создания портфолио —


5. BeTheme

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


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


7. Bridge

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


8. Incubator

Mobile-friendly бизнес тема для start up проектов c 12-ю встроенными демо, каждое из которых можно быстро адаптировать под реальный проект. Среди преимуществ шаблона — возможность использовать дочернюю тему, WPML совместимость, parallax скроллинг, наличие страницы «заглушки». Скорость загрузки и высокая производительность — главные характеристики сайта на Incubator.

Подборка: 30 бизнес шаблонов для создания сайта —


9. Caliris

Адаптивный WordPress шаблон для одностраничных сайтов с ajax подгрузкой, идеален для креативных лендингов. В красочно оформленное демо включено 9 готовых секций, в том числе блоки для портфолио и презентации сотрудников. Шаблон полностью совместим с современными браузерами. При просмотре контента лендинга на Caliris используется плавная прокрутка.


10. Uncode

Креативная SEO оптимизированная pixel-perfect тема. В Uncode предусмотрено 16+ вариантов оформления портфолио, позволяющих разместить примеры работ списком, «сеткой» (классической, masonry и metro), вывести через слайдер или карусель. Доступно более 40 демо с уникальной концепцией.


11. Stockholm

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


12. Pofo

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


13. Intact

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

Подборка: 100+ тем для создания сайта визитки —


14. Oshine

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


15. Jevelin

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


16. Kallyas


17. TheGem

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


18. Kalium

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


19. H-code

Адаптивный мультифункциональный шаблон, идеальный для бизнес проектов, креативных сайтов и интернет-магазинов. Современный и креативный дизайн H-Code оценят и веб-студия, и агентство. К шаблону прилагается 20 одностраничных демо для тех, кому достаточно минимальной кастомизации и требуется быстрый запуск проекта.


20. Massive Dynamic

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


21. Sarto

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


22. Haar

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

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

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


23. Kvell

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


24. Pxlz

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


25. Dekko

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

  • бесплатным плагинам - конструктору и пакету слайдер-анимаций;
  • мощной админ-панели - вплоть до мелких настроек;
  • совместимости с WooCommerce.

Дизайны смотрятся современно, в модном «плоском» стиле. Всегда можно поменять один или несколько элементов.


26. Smiltė

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


27. Tahoe

Очень яркая и креативная подборка заготовок для Вордпресс. Авторы постарались сделать запоминающийся дизайн для каждого варианта. Помимо того:

  • внешний вид и структура настраивается и меняется в любой момент;
  • много вариантов для кастомизации хедеров, футеров;

    • 28. Kenozoik

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


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


    30. Agmycoo

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

    • 20 полностью готовых домашних страниц;
    • 105 внутренних страниц;
    • 350 отдельных элементов;
    • все это - полностью по принципу «перетащи и брось».

    Шаблон отличается не только «чистым» ярким дизайном, актуальным в 2019 году, но и таким же отличным кодом.


    31. Rhodos


    32. Nanum

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

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

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

В закладки

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

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

Если вы внаглую обводите сайты дня с 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 подошли к своему сайту с сочетанием минимализма и брутализма. Ограниченный текст логотипа привлекателен и противопоставляется заполненной типографике, использующейся в остальной части монохромного дизайна.