25+ сайтов с вдохновляющими идеями для дизайна и веб
Где находить идеи вдохновляющего дизайна для сайтов, лендингов, оформления постов и вообще всего, что касается графики? Сейчас в Интернете есть десятки ресурсов, где публикуют удачные референсы, которые часто сопровождают пояснительными заметками и советами.
Представляем вам подборку из 25+ сайтов, где собраны лучшие примеры веб-дизайна для сайтов, логотипов, почтовых рассылок и т.п. Вы наверняка сможете найти там немало по-настоящему яркого, креативного и вдохновляющего.
Сайты с лучшими идеями дизайнов Pinterest | pinterest.com
Pinterest — настоящий рай для тех, кто ищет любые форматы вдохновляющего дизайна. А найти там можно практически все, ведь это вторая по популярности визуальная социальная сеть после Instagram.
Плюсы этой площадки для веб-разработчиков:
- Миллионы идей, цветовых решений, инструкций и лайфхаков для веб-дизайна сайтов, коммерческих предложений, медиакитов и не только.
- Возможность подписки на интересующих авторов.
- Персональные подборки (доски) и расширенный поиск.
- Возможность создавать закрытые папки для сохранения идей.
Название говорит само за себя — здесь собран весь нектар, сливки вдохновляющего веб-дизайна. Причина этому — тщательная модерация экспертами перед публикацией. Причём для авторов эта проверка платная, что ставит еще один фильтр.
Каждый день в галерею CSS Nectar добавляют новые образцы веб-графики. Здесь публикуют работы авторов со всего мира, поэтому каждый, кто пришел сюда за порцией вдохновения, найдет что-то стоящее.
SiteInspire | siteinspire.com
Еще один пример сайта с веб-дизайнами для вдохновения – SiteInspire. Более 7000 примеров сайтов помогут веб-разработчикам найти креативные решения для работы. В основном здесь собраны классические дизайны. Их можно найти через детальный поиск по цвету, стилю, предметам и т. п.
Behance | behance.net
Одна из самых популярных платформ для любителей творчества и тех, кто ищет что-то по-настоящему вдохновляющее в дизайне: от обычных визиток и решений по визуальной упаковке контента до порталов и промо-полиграфии.
Что особенного есть на Behance для веб-разработчиков:
- Детальные поисковые фильтры, с которыми можно найти все что угодно — от самых популярных японских дизайнов этого сезона до новых имён в отрасли.
- Фильтр по высшей оценке. На Behance есть возможность отфильтровать ленту по самым популярным работам среди пользователей.
Awwwards | awwwards. comНа Behance также есть возможность выбрать инструменты, с помощью которых сделан дизайн. Большинство подобных сайтов c веб-дизайнами не располагают подобной функцией.
Здесь вы можете отфильтровать дизайны сайтов, выбрав только подходящие инструменты или исключив те, с которыми вы не работаете.
Выставка конкурсных веб-дизайнов, которые отмечают по рейтингу. Здесь опубликованы лучшие работы со всего мира.
Особенности Awwwards:
— Экспертное жюри платформы рассматривает дизайн, удобство функционала, креативность и содержание сайта, затем присваивает каждому параметру оценку.
— Разбивка баллов помогает взять на заметку не только визуал, но и функциональные решения.
— Простая навигация и поиск. Awwwards помечает каждый сайт тегами: доминирующие цвета, инструменты, тематика, фреймворки.
— На сайте представлено более 25 тысяч шаблонов веб-дизайна в разных нишах.
Abduzeedo | abduzeedo.com
Веб-разработчики могут найти на Abduzeedo ежедневную порцию вдохновения в веб-дизайне и быть в курсе последних трендов. А поскольку материалы не ограничиваются исключительно сайтами, почерпнуть идеи вы можете из чего угодно!
Почему стоит ознакомиться с этим сайтом креативных идей и примеров:
- Большой спектр направлений в дизайне. Как известно, широкий кругозор стимулирует к поиску нестандартных решений.
- Много форматов. Есть не только подборки дизайнерских решений, но и статьи по темам, советы и туториалы.
Популярный ресурс для поиска вдохновляющих концептов (сайты, графика, полиграфия и т.п.п) и прокачки своих навыков. Если хотите научиться делать красиво и стильно — вам на Dribble. Это огромное портфолио проектов, начиная от анимаций и заканчивая дизайнами упаковки.
Особенности Dribble:
- Фидбек от других дизайнеров. Здесь вы можете увидеть, что думают коллеги и таким образом учится на своих и чужих ошибках.
- Возможность публикации части проекта на стадии разработки. Опять же, полезная функция, чтобы получить отклик от коллег и исправить ошибки, пока работа не закончена.
Когда люди ищут вдохновение, магазин лицензионных шаблонов приходит на ум в последнюю очередь. Однако…почему нет?
На Template Monster есть, что изучить и посмотреть. Маркетплейс содержит все, что нужно для вдохновения веб-разработчику. На сайте представлено более 25 тысяч шаблонов тем для WordPress, интернет-магазинов, логотипов и иконок.
Admire The Web | admiretheweb.com
Admire the Web понравится любителям минималистичных и элегантных дизайнов.
Главный плюс сайта — возможность поиска по похожим работам. Очень удобная функция, если хочется посмотреть больше примеров понравившихся веб-дизайнов. Жаль, что на подобных ресурсах ее можно встретить нечасто.
The Great Discontent | thegreatdiscontent.com
Иногда вдохновение исходит не из визуального источника и не ограничивается конкретным проектом. Вместо этого вы можете найти мотивационную историю, которая подтолкнет вас к дальнейшему продвижению в работе и карьере.
Частая причина творческих застоев – это прокрастинация, с которой нужно бороться, пока она не уничтожила вас как профессионала.
Интервью и статьи на The Great Discontent помогут разжечь ваш творческий огонь. В погоне за новыми трендами веб-разработок дизайнеры часто забывают, что за всеми проектами стоят реальные люди.
Сайт дает редкую возможность заглянуть по ту сторону экрана, чтобы исследовать более эмоциональные вопросы, с которыми сталкиваются люди той же профессии. Личные истории могут помочь выбраться из творческого кризиса и по другому взглянуть на свою работу.
CalltoIdea | calltoidea.com
На CalltoIdea вы можете найти не только “пассивное” вдохновение, но и реальные решения для разработки своих проектов.
Широкий выбор категорий страниц — главное преимущество. На сайте публикуют примеры креативного веб-дизайна страницы 404, формы входа на сайт и других разделов, на которые дизайнеры обычно обращают меньше внимания.
Best Website Gallery | bestwebsite.gallery
Коллекция из более чем 2000 первоклассных дизайнов поражает воображение. Все материалы лично отбираются создателем проекта, дизайнером Девидом Хелманом.
Best Website Gallery, или BWG, использует систему тегов, чтобы вы могли быстро находить сайты в зависимости от их стиля, цветов и функционала.
Commerce Cream | commercecream.com
Проект специализируется на домашних страницах интернет-магазинов, созданных на Shopify. Дизайны Commerce Cream отвечают всем трендам электронной коммерции — минимализм, яркие цветовые палитры, смелые шрифты.
К тому же там публикуют статьи авторов некоторых проектов. В блоге сайта можно почитать свежие новости в мире дизайна.
Ecomm.design | ecomm.design
Коллекция вдохновляющих дизайнов страниц для электронной коммерции. Здесь собрано более 3000 шаблонов для интернет-магазинов. Удобный поиск по инструментам, категориям и платформам.
Designspiration | designspiration.com
Designspiration построен по типу новостной ленты, функционал схож с Pinterest. Такой формат особенно удобен для тех, кому нужно просто вдохновиться чужими работами без привязки к тематике, а не искать определенный проект.
Идеи вдохновляющих дизайнов для мобильных версий сайтовPttrns | pttrns.com
Это платформа с обширной коллекцией дизайнерских идей, шаблонов интерфейса и общего вдохновения.
Это нишевый сайт, на котором можно увидеть много примеров мобильных дизайнов не только для первой страницы, что является редкостью.
Muzli | muz.li
Более 500 примеров веб-дизайна мобильных приложений вдохновят вас в процессе разработки мобильных версий сайтов.
У Muzli есть также удобный плагин Google Chrome, который объединяет последние новости дизайна и идеи со всего Интернета на домашней странице браузера. Иными словами, постоянный источник вдохновения, даже заходить никуда не надо!
Вдохновение для дизайна лендингов One Page Love | onepagelove. com
Ресурс хорош тем, что можно освоить приемы по размещению информации на маленьком одностраничном изображении.
На One Page Love вы можете найти:
- примеры дизайнов для блоков сайта;
- шаблоны для собственных проектов;
- примеры веб-дизайнов для лендингов.
Здесь даже есть блог, в котором регулярно публикуют новости о новых трендах в веб-дизайне, советы, туториалы и интервью с ведущими специалистами в этой области.
Land book | land-book.com
Сайт ориентирован в основном на лендинги и магазины электронной коммерции. Здесь также можно найти готовые шаблоны для своих проектов. Идеален для тех, кому нравятся простые и светлые работы без перегруза декоративных элементов.
Landingfolio | landingfolio.com
Огромная подборка качественных целевых страниц для вдохновения.
- Есть категоризация по темам.
- Ежедневные обновления.
- Множество шаблонов для собственных веб-дизайнов.
- Множество категорий. Лендинги, представленные на Lapa Ninja, разделены на 47 категорий. Ищете дизайн на основе иллюстраций? Сайты, с градиентами? Для всего этого почти всегда уже есть категория. Также на платформе можно фильтровать дизайны по цвету.
- Полностраничные скриншоты. Удобная особенность: скриншоты на сайте захватывают всю страницу, а не только начало. Нет необходимости тратить время и переходить на сайт, чтобы оценить дизайн целиком.
Примеры веб-дизайна email10 примеров лендингов с высокой конверсией
С email-рассылками у вас не будет второго шанса произвести нужное впечатление. Непривлекательный дизайн, слабое УТП или нелогичная структура – и считай, рекламная кампания провалена. В этом материале мы по пунктам рассказываем, на что обратить внимание в тексте продающего письма.
Email-Competitors | email-competitors.ruСайт целиком направлен на дизайн электронных писем. Что можно делать на Email-Competitors:
- Отслеживать современные тренды email-маркетинга.
- Брать новые идеи для дизайна писем call-to-action и рассылок.
- Искать примеры по типу писем и направлению бизнеса.
Еще один хороший сайт для поиска новых дизайнов для электронных писем. Ресурс полон стильных шаблонов, разбитых по множеству категорий. Поисковая система позволяет искать нужные дизайны по тематикам и брендам.
Campaign Monitor | campaignmonitor.comCampaign Monitor предлагает веб-дизайнерам большую галерею профессиональных работ по дизайну электронных писем. Они разделены на категории, например, рекламные предложения, объявления, события, информационные письма и т. п.
Сайты с подборками логотипов для вдохновенияVintage Logos | vintagelogos.comЕсли вы хотите узнать больше об истоках дизайна логотипов или сделать упор на ретро стиль в разработке лого, этот ресурс точно для вас!
BrandColors | brandcolors. netBrandColors — это необычный ресурс для разработки логотипов, но, тем не менее, посетить его стоит, если вы хотите вдохновиться удачными цветовыми решениями. Здесь можно выполнить поиск по фирменным цветам, которые используют крупные компании, и даже щелкнуть на понравившийся цвет и скопировать HEX-код.
LogoLounge | logolounge.comLogoLounge — это фантастический ресурс для исследования лучших примеров логотипов, вдохновения и развития своих навыков. Сайт содержит более 175 000 примеров лого. Logo Lounge позволяет разработчикам легко и быстро обмениваться идеями и концепциями с коллегами.
Logo Design Love | logodesignlove.comЕсли вы хотите узнать больше об историях, стоящих за культовыми логотипами, то Logo Design Love для вас. Из небольших статей с иллюстрациями вы прочитаете, как появились некоторые из самых известных логотипов и какие факторы определяют успех и долговечность логотипа.
Полезно, если вам тоже предстоит разработать свою айдентику, но вы не знаете, каких принципов придерживаться в дизайне.
Иметь свою подборку проверенных сайтов для веб-дизайна полезно, чтобы сэкономить время, когда сроки уже поджимают, а идеи закончились.
Советуем вам отнестись к этому занятию как к собственному исследованию, ведь в процессе изучения вы не только увидите качественные примеры веб-дизайна рекламных буклетов, сайтов, КП и т.п., но и узнаете о текущих трендах.
Опечатка? Пожалуйста, выделите её и нажмите Ctrl+Enter. Спасибо!
Арина Сычева
Копирайтер проекта “Панда-копирайтинг”. Специализация: маркетинговые статьи
15 примеров хорошей типографики в веб-дизайне
Широко известно, что сейчас одним из самых популярных трендов веб-дизайна является крупная типографика. Если вы спроектировали эффектный, экстравагантный, привлекающий внимание крупный шрифт с большим весом, ваш сайт, несомненно, привлечет внимание и покорит большинство посетителей.
В этой статье мы собрали 15 лучших примеров типографики в веб-дизайне, а также представили лучшие практики для вашего вдохновения.
Что такое типографика в веб-дизайне?
Типографика — это структура, внешний вид и стиль шрифта. Это искусство расположения текста таким образом, чтобы он был разборчивым, четким и визуально привлекательным для читателя. Она играет важную роль в веб-дизайне, поскольку может вызывать определенные эмоции и передавать определенные сообщения.
Короче говоря, типографика оживляет слова. Она придает смысл выравниванию, размеру, шрифту, макету и цветам сайта. Все эти детали важны, потому что вместе они обеспечивают комфортное чтение как можно большему количеству посетителей.
15 лучших примеров типографики в веб-дизайне
Чтобы вдохновить вас, ниже представлено 15 лучших примеров крупной типографики в веб-дизайне.
1. Van Holtz Co
Van Holtz Co – это студия, специализирующаяся на усовершенствованных цифровых веб-приложениях с упором на анимированный, адаптивный и интерактивный контент. Домашняя страница сайта имеет прекрасный дизайн , выполненный в оттенках фиолетового, в то время, как массивная, интерактивная, анимированная типографика доминирует на странице. Крупные буквы в правой части экрана перечисляют все проекты, над которыми работала студия, и, если вы наведете курсор на название проекта, буквы потеряют заливку и станут обведенными, что служит отличным примером типографического дизайна.
2. Cambridge International School
Cambridge International School – пример образовательного веб-сайта. Его типографика включает в себя тексты разных размеров, но все они выполняют четкую и простую функцию. На этом сайте посетители могут найти идеальную навигацию. Это пример хорошо спроектированных меню, навигационных систем и кнопок.
3. Child’s own
Child’s own – это сайт, на котором детские рисунки используются для изготовления мягких игрушек. Что касается типографики, то дизайнер использовал два контрастных шрифта, но они хорошо сочетаются друг с другом. Шрифт заголовков контрастирует со шрифтом инструкций. Шрифт заголовка делает дизайн игривым, что соответствует «детской» тематике сайта.
4. The Next Rembrandt
The Next Rembrandt — это напечатанная на 3D-принтере картина, созданная на основе данных о произведениях Рембрандта. Дизайн этого сайта выделяется значительным негативным пространством и набором текста. Общий минималистичный характер этой страницы выделяет центральный текст и фокусируется на теме сайта. Панель навигации также проста и понятна.
5. 1MD
1MD — еще один пример хорошо спроектированного сайта. Дизайнер использовал уникальный шрифт для заголовков, навигации и основного текста. Его уникальные шаблоны и дизайн не будут отвлекать посетителей и заставят их задержаться на странице.
6. Kashoo
Kashoo — это опытная команда разработчиков-новаторов, креативных дизайнеров и опытных консультантов по маркетингу. Этот сайт создан с эффектом анимированной зернистой текстуры, что делает его похожим на фильм. Интересная типографика вдохновляет нас оставаться на сайте и хотеть узнать больше о нем.
7. Innovator. Boris Ignatovich
Boris Ignatovich — мастер русской авангардной фотографии. Хотя, не рекомендуется использовать слишком мелкий шрифт, в данном случае сочетание цветов и вес выбранных шрифтов создают должный контраст. У посетителей может возникнуть ощущение, что им нравится сайт, но они не знают почему.
8. Evolve Wealth
Evolvewealth – это компания, которая предлагает своим клиентам индивидуальные независимые финансовые консультации, начиная от налогового планирования и заканчивая накоплением капитала, его сохранением и планированием дальнейшей жизни. Дизайн страницы использует в заголовке огромный белый шрифт, чтобы выразить девиз компании, и горизонтальные полосы фрагментов информации.
9. RSQ
Red Square — это агентство, которое занимается идеями, медиа и дизайном. Дизайн домашней страницы их сайта — еще один пример чистого дизайна, в котором используется правильная типографика и цветовая палитра. Текст на странице — главная достопримечательность этого дизайна, поэтому шрифты подобраны очень удачно.
10. Luke Stephenson
Luke Stephenson – это фотопутешествие, посвященное бренду мороженого. Эта страница имеет чистый и элегантный дизайн и является хорошим примером выбора правильной типографики.
11. Pest Stop Boys
Pest Stop Boys — компания по борьбе с вредителями. На этой странице используется много отличных цветов как для фона, так и для текста. Активное использование типографики, большой фоновой графики и анимированных тараканов выделяет предоставляемые услуги и контактную информацию компании.
12. By the Books
By The Books – это виртуальный литературный фестиваль, на котором представлены книги, рекомендованные Аминату Соу и Энн Фридман. Это отличный пример того, как типографика может влиять на дизайн сайта. Заголовки и основной текст используют одинаковую типографику на всей странице, но в разных книгах используются дополнительные шрифты, что делает дизайн слегка контрастным, но согласованным.
13. Marianne Brandt
Люди могут ожидать много разных вещей, когда слышат имя Марианны Брандт, но как его можно отразить в виде сайта? Этот сайт отражает влияние школы дизайна Баухауз с его плоскими цветами и шрифтами Futura. Общая эстетика дизайна минималистична и аккуратна, но при этом не заставит посетителей скучать.
14. Rijksmuseum
Rijksmuseum – это сайт, посвященный последним новостям, эксклюзивному закулисью мира искусства и произведениям искусства мирового уровня. Что касается дизайна страницы, то большие буквы нестандартного шрифта охватывают весь экран и продолжаются за пределами страницы, из-за чего Rijksmuseum кажется больше, чем он есть в реальной жизни. Дизайн основной навигации также может привлечь внимание посетителя; при нажатии он скользит вниз, чтобы пользователи могли выбрать подкатегорию.
15. KOTI Sleepover
Дизайн домашней страницы KOTI очень прост, и это одна из самых аккуратных, но эффективных реализаций тяжелой типографики, которую я когда-либо видел. Минималистичный иллюстративный стиль прекрасно контрастирует с крупным черным фирменным шрифтом.
Лучшие практики типографики в веб-дизайне
Из приведенных выше примеров мы можем понять, что хороший выбор типографики не будет отвлекать людей от чтения и заставит их продолжать скроллить ваш сайт. Хорошая типографика никогда не увеличит когнитивную нагрузку на пользователя. Так как же создать хорошую типографику для своего веб-сайта?
Ограничьте количество шрифтов
Чтобы четко и точно передать ценность вашего бренда, вы должны ограничить количество шрифтов, используемых в дизайне, потому что более трех разных шрифтов сделает сайт неструктурированным и выглядящим непрофессионально. Если вы используете более одного шрифта, убедитесь, что они визуально совместимы, но отличимы друг от друга. Более того, вам необходимо учитывать устройство, с которого пользователи в основном будут заходить на ваш сайт, будь то ноутбуки, планшеты или смартфоны. Это поможет вам выбрать разборчивые шрифты, которые хорошо отображаются на целевых устройствах.
Сопоставьте шрифты и подберите правильные сочетания
Вам доступно множество инструментов дизайна, а системные шрифты в вашем инструменте дизайна — беспроигрышный вариант, поскольку они просты в использовании и не создают сложного макета. Чтобы получить хорошо организованный дизайн, вам нужно умело выбирать шрифты и правильно их смешивать, а такой инструмент дизайна, как Mockplus, сможет вам в этом помочь.
Ограничьте длину строки
Длина вашей строки будет определять легкость, с которой пользователь сможет прочитать и понять сообщение. Пользователям будет трудно читать длинные строки, поэтому вам нужно ограничить строку примерно до 50–60 символов.
Установите межстрочный интервал
Если вы правильно используете пробелы между строками текста, улучшится не только визуальная привлекательность, но и удобочитаемость. Чтобы текст было легче читать, можно установить междустрочный интервал 120–145 % от кегля. Если вы используете такой инструмент дизайна, как Mockplus, вы можете легко установить межстрочный интервал на левой панели.
Используйте цветовой контраст
Ваш сайт может легко читаться и сканироваться, если вы добились достаточного цветового контраста. Не используйте одинаковый или похожий цвет для текста и фона. Также избегайте использования только красного и зеленого цветов для передачи информации, потому что слепота на красный и зеленый цвета является наиболее распространенной формой дальтонизма.
Старайтесь не писать текст только заглавными буквами
Написание текста только заглавными буквами создаст неприятный пользовательский опыт. Пользователям может показаться, что вы кричите или навязываете свое мнение. Текст, написанный исключительно заглавными буквами, будет неприятным для глаз читателей, и большинство из них даже не дочитают сообщение до конца, так как это, скорее всего, оттолкнет их.
Не забудьте проверить текст
Учитывая все вышеперечисленные методы, вы сможете создать отличную типографику для своего сайта, но не забывайте о заключительном этапе любой итерации текстового дизайна: пользовательском тестировании. Независимо от того, что вы публикуете, простое описание продукта или любовный роман, вам необходимо учесть в своей типографике отзывы людей, и тогда вы получите легко читаемый сайт, четко отражающий ценности вашего бренда.
Вывод
Типографика играет важную роль на любом сайте. Хорошая типографика может облегчить чтение и улучшить читабельность и разборчивость текста на вашем сайте. Надеюсь, что приведенные выше примеры вдохновят вас, а использование указанных выше рекомендаций поможет сделать типографику читабельной, понятной и разборчивой.
Перевод статьи uxplanet.org
4 эффективных примера дизайна домашней страницы с учетом продукта (и почему они работают)
50 миллисекунд. Меньше секунды.
После того, как кто-то заходит на ваш сайт, примерно столько времени им требуется, чтобы сформировать мнение о вашем продукте.
Первое впечатление — это действительно все. Наберите положительное впечатление в течение этого крошечного периода времени, и это может привести к тому, что человек останется рядом, последует вашему призыву к действию и подпишется на пробную версию. И если этот человек производит не очень хорошее впечатление, результат вам известен: низкий коэффициент конверсии и высокий показатель отказов, что может привести к катастрофе для вашего бизнеса.
Если вы уже заинтересованы в росте, ориентированном на продукт, вы знаете, что иметь действительно отличный продукт, решающий болевые точки, абсолютно необходимо. Но на мгновение поставьте себя на место потенциального клиента, который только что впервые зашел на ваш сайт: достаточно ли иметь отличный продукт, чтобы заставить его остаться, зарегистрироваться и стать ежедневным пользователем?
Не совсем так.
Чтобы побудить кого-то совершить действие на главной странице продукта, вы не можете скрестить пальцы и надеяться, что они потратят некоторое время на размышления о том, что они видят, или выяснят, что именно вы хотите, чтобы они сделали дальше. Все дело в великолепном дизайне, и он должен быть настолько хорош, чтобы людям даже не нужно было думать.
Читайте также: Что такое рост, основанный на продукте?
В статье для CognitiveClouds Гопинат Мелон сказал: «Отличный дизайн — это единственное, что отличает ваш продукт SaaS от продуктов и услуг, предлагаемых вашими конкурентами».
Melon также подчеркнула его важность: «Отличный дизайн сочетает в себе отличный пользовательский опыт (UX) с великолепно выглядящим пользовательским интерфейсом (UI), чтобы создать целостный опыт продукта, поразить ваших клиентов и превратить их в ваших самых больших сторонников».
Поскольку вы зашли так далеко, я полагаю, вы цените ту роль, которую дизайн домашней страницы SaaS играет в стимулировании роста. И поскольку вы это делаете, я покажу вам четыре дизайна домашней страницы SaaS, из которых вы можете черпать вдохновение, чтобы улучшить работу своего веб-сайта.
Но перед этим, одно небольшое замечание:
Преимущества отличного дизайна
Помимо помощи в создании первого хорошего впечатления, продуманный веб-сайт SaaS имеет и другие преимущества.
Во-первых, как только потенциальные клиенты попадают на ваш сайт, в игру вступает очень много сил. Согласно этому отчету Vanseo Design, наиболее заметными из этих сил являются:
- Что они знают (как они нашли ваш продукт)
- Что они ожидают (предварительное восприятие продукта)
- Что они хотят делать (проблемы, которые хотят решить/цели, которых хотят достичь)
Когда кто-то просматривает веб-страницу, его глаза посылают в мозг миллионы сигналов.
Источник: Inside Design. , подталкивая потенциальных клиентов к желаемому взаимовыгодному действию. Пользовательский опыт плавный, не утомительный и не разочаровывающий.
И как сказал бы мой народ (уникальные жители Икот-Иньянга, деревни в Нигерии): «Сначала едят глаза, и вы должны насытить их, чтобы заставить другие части тела двигаться». В этом контексте ваш дизайн должен привлекать внимание, если вы хотите, чтобы кто-то нажимал на ваш призыв к действию.
Во-вторых, и это очень важно, ваш дизайн должен ориентироваться на продукт. Это означает, что он должен дать людям представление о том, что ваш продукт может им помочь — проблемы, которые он решает, и цели, которых они могут достичь с его помощью, если зарегистрируются.
Как вы увидите в приведенных ниже примерах, когда он делает это, он обращается к третьему и последнему фактору, который, как сообщается в отчете Vanseo Design, действует, когда потенциальные клиенты посещают ваш сайт: что они хотят делать (проблемы, которые они хотят решать/цели, которых они хотят достичь).
В статье Inside Design Джозеф Шаффери также отметил следующее: «При разработке кнопок и взаимодействий учитывайте возможные действия и последствия».
Я изучил несколько отчетов, таких как этот от HubSpot, этот от Responsive Inbound Marketing и несколько других. Всего я нашел около 43 продуктов SaaS с выдающимся дизайном домашней страницы.
Я сократил свой список до четырех, начав с поиска домашних страниц, отвечающих двум важным преимуществам отличного дизайна, упомянутым выше:
- Передача необходимой информации за секунду и
- Был ориентирован на продукт, давая посетителям представление о том, какие проблемы решает продукт.
Но на этом я не закончил. Изучая эту статью, я нашел это исследование Эми Альбертс, исследователя, работавшего в Microsoft, как сообщает FastCompany.
Исследование Эми показало, что при разработке интерфейсов, в том числе домашних страниц, «большие числа на контрастном фоне и настоящие человеческие лица почти мгновенно привлекают внимание».
В отчете Эми также отметила, что ее исследование показало, что «наш мозг устроен так, чтобы смотреть на человеческое лицо».
Это исследование заставило меня задуматься и, в конце концов, привело к осознанию того, что лично я влюбился в дизайн домашней страницы продукта с настоящими человеческими лицами.
Поэтому я решил, что при правильном использовании и с контрастным фоном (согласно исследованию Эми) это были отличительные факторы, которые могли превратить дизайн домашней страницы из хорошего в великолепный.
Приведенные ниже примеры соответствуют всем этим критериям.
1. Zenefits
Zenefits получил почетную награду от awwwards, и это неудивительно — их сайт отличает четкий копирайтинг главной страницы SaaS, проекция бренда, правильное использование цветового контраста и настоящее человеческое лицо, вызывающее эмоции у посетителей.
Посмотрите на скриншот ниже. С левой стороны есть ценностное предложение, подзаголовок, призыв к действию и сопутствующие преимущества для обеспечения лаконичного и прямолинейного призыва к действию.
И справа улыбающееся человеческое лицо с наложенным логотипом вызывает радость, которую инструмент HR может помочь пользователю испытать. В то же время ее глаза возвращают вас к тексту продукта и ценностному предложению — напоминая о необходимости действовать.
Когда вы прокручиваете вниз, создается впечатление, что вы находитесь в туре, видя, как работают различные функции продукта и в чем его преимущества:
Для меня это яркий пример дизайна домашней страницы. быть ориентированным на продукт.
И благодаря этому каждый элемент и навигация на этом веб-сайте объединены, чтобы дать посетителям представление о том, что делает продукт.
2. Slack
Не так давно Slack заменил на своей домашней странице иллюстрации на настоящие человеческие лица, и это был разумный шаг. Домашняя страница Slack, одной из самых известных растущих компаний, ориентированных на продукт, является еще одним ярким примером лидерства в дизайне с продуктом и брендом.
Сразу же Slack приветствует вас, показывая, чего вы можете достичь с помощью их продукта:
С левой стороны копирайтинг и сопутствующие CTA проецируют бренд компании и завершаются ценностным предложением, которое вы не можете игнорировать: «Slack — это место, где происходит работа».
Исключительной особенностью дизайна домашней страницы Slack является соблюдение правила дизайна 60-30-10, которое гласит, что ваш основной цвет должен занимать 60% веб-страницы, вторичные цвета должны занимать 30%, а остальные 10%. можно перейти к нейтральным цветам.
И даже если вы прокрутите страницу вниз, вы увидите, как действует правило дизайна 60-30-10.
Дизайн сайта Slack демонстрирует, что они действительно ориентированы на продукт. Каждый раздел сайта показывает в режиме реального времени, как продукт решает вашу проблему:
3. Lessonly
Веб-сайт Lessonly использует более минималистский подход к дизайну, но он настолько эффективен. В разделе героев мы видим реальных людей, которые с удовольствием используют продукт для изучения новых навыков.
Этот раздел возвращает вас к ценностному предложению Lessonly «Работайте лучше» и призыву к действию, чтобы увидеть предварительный просмотр продукта:
Вы найдете тот же минималистичный подход к дизайну продукта на всей домашней странице Lessonly при прокрутке. вниз.
Например, прямо под разделом героев Lessonly не имеет копии. Вместо этого они показывают бренды, которые используют их продукт. Далее следует еще один раздел, посвященный Lessonly:
4. FreshBooks
FreshBooks не нуждается в представлении в мире SaaS, а их домашняя страница превосходно передает их ценностное предложение.
Как и Slack, вы найдете FreshBooks включенным в множество обзоров «лучший дизайн домашней страницы», таких как этот от HubSpot.
В разделе героев собрано все, что было найдено в исследовании Эми Альбертс, и показано, что большие числа, отличная контрастность и настоящее человеческое лицо необходимы для эффективного дизайна: человеческого лица на странице естественным образом направляют посетителей к кнопке «Начать». Мы видели это и на домашней странице Zenefits — это действительно помогает людям действовать.
При прокрутке страницы вы увидите раздел, в котором описаны все функции продукта. Функции не просто перечислены — в сопроводительном тексте подчеркиваются преимущества каждой из них. А с правой стороны мы видим продукт в действии, выполняя то, что обсуждается слева:
Основные выводы из этих примеров
Не существует универсального подхода к разработке домашних страниц SaaS, но после внимательно изучив эти четыре примера, я могу выделить несколько моментов:
- Показывайте реальных людей на своем веб-сайте — в конце концов, ваш продукт предназначен для реальных людей
- Сделайте так, чтобы людям было легко увидеть, что они получат — покажите свой продукт в действии!
- Включите четкое ценностное предложение, подкрепленное логическими призывами к действию, чтобы помочь побудить людей к действию
- Дизайн с ориентацией на продукт. Это означает привязку функций продукта к преимуществам и демонстрацию в режиме реального времени того, как ваш продукт делает это.
Дополнительные ресурсы для роста с помощью продуктов
- 3 столпа роста, основанного на продукте
- Как Calendly использует PLG и вирусность для роста
- Будущее роста за счет продукта может скрываться там, где вы меньше всего этого ожидаете
50 отличных примеров дизайна корпоративного сайта — Radii
14 марта 2012 г. по радиусамПри рассмотрении вопроса о редизайне веб-сайта вашей компании лучшее, что вы можете сделать для подготовки, — это изучить то, что вы хотите. Возможно, вы знаете, что он должен передавать, как он должен выглядеть, и у вас уже есть руководство по корпоративному стилю, но вам нужно посмотреть, как другие компании достигли своих целей в отношении веб-сайтов. Или, возможно, вам просто нужно что-то, чтобы заставить ваш мозг течь соками. Мы искали повсюду, чтобы найти лучших примеров корпоративных веб-сайтов с хорошим дизайном, особенно для компаний, не занимающихся дизайном.