Как оформить сайт красиво

15 лучших примеров дизайна главной страницы сайта

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

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

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

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

Семь правил оформления главных страниц

1. Хорошая homepage четко отвечает на вопросы: «Что это за компания?», «Чем она занимается?» и/или «Что вы (посетитель) можете здесь делать?»

Если вы представляете хорошо известный бренд или компанию (например, Сбербанк, McDonald’s или Самсунг), возможно, вам удастся избежать необходимости описывать, кто вы и чем занимаетесь. Но реальность такова, что большинству компаний все еще нужно это делать, чтобы каждый посетитель главной страницы знал, что он попал туда, куда и намеревался.

О том, почему это остается важным, лучше всех объясняет Стивен Кругг (Steven Krugg), автор бестселлера «Не заставляй меня думать» (Don’t make me think): «Если посетители не могут за пару секунд определить, чем именно вы занимаетесь, надолго они не задержатся».

2. Контент должен резонировать с потребностями целевой аудитории

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

3. Главная страница содержит убедительный оффер

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

4. Сайт оптимизирован под разные устройства и экраны

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

5. Дизайн включает в себя призывы к действию (CTA)

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

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

6. Тренды всегда меняются

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

7. Дизайн должен быть профессиональным

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

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

Читайте также: Лендинг vs главная страница: ключевые отличия

1. FreshBooks: классика жанра

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

Главная страница сайта компании FreshBooks, занимающейся облачным бухгалтерским программным обеспечением, была выбрана в качестве классического примера дизайна потому что:

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

2. Airbnb: ориентация на действие

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

• страница с порога встречает посетителей формой поиска доступного для бронирования жилья. Очень правильное решение, ведь большинству посетителей в первую очередь необходима именно она.
• форма поиска снабжена функцией автозаполнения: введенные пользователем в прошлый раз параметры поиска вводятся автоматически (при условии, что человек залогинился).
• главный призыв к действию («Начать поиск») контрастирует с фоном и поэтому хорошо заметен; дополнительный призыв для владельцев недвижимости виден не так хорошо, но ему тоже нашлось место на первом экране сайта.
• с главной страницы пользователи могут перейти к обзору экскурсий и мероприятий (нажав на вкладку «Впечатления»), доступных в том регионе, в который они намереваются поехать. Здесь же можно посмотреть, какие из этих предложений пользуются популярностью у других пользователей. Запись на тот или иной «ивент» происходит там же, где и бронирование жилья. Таким образом Airbnb усиливает предвкушение пользователей от будущей поездки.

Читайте также: Секреты юзабилити: намерение пользователя и поисковые фильтры

3. Pixelgrade: игра на контрасте

«Простые WordPress темы для быстрого старта. Мы разрабатываем простые темы для WordPress, доступные всем, кто хочет создать современный сайт. Смотреть темы»

Главную страницу этой студии дизайна, которая создает темы для WordPress, отличают следующие черты:

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

4. Mint: минимализм еще в тренде

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

Чем интересен этот пример от бесплатного персонального сервиса по управлению финансами:

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

Читайте также: 10 трендов веб-дизайна на 2020 год

5. Dropbox Business: ничего лишнего

Дизайн сайта файлового хостинга Dropbox:

• продолжает удивлять своей простотой и минимализмом. На первом экране присутствует только то, что действительно важно: большое вполне уместное изображение с поясняющим текстом и CTA-кнопка «Попробуйте бесплатно (30 дней)».
• главная страница да и весь веб-сайт Dropbox — это показательный пример незамысловатого, но вместе с тем эффективного дизайна. Здесь не так много текста и визуальных элементов, при этом сайт совсем не кажется пустым или пресным.
• подзаголовок такой же простой, но весьма убедительный: «Безопасное хранилище для файлов. Это умное рабочее пространство, в котором собраны рабочие группы, инструменты и данные». Понять, что предлагает Dropbox, можно за считанные секунды.

6. 4 Rivers Smokehouse: вкусная фотография

«Грудинка. 18 лет опыта. Вкус, который нужно смаковать»

Чем интересен этот дизайн:

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

Читайте также: 36 потрясающих примеров использования эффекта параллакс-скроллинга на лендингах

7. Melyssa Griffin: личный бренд

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

Преимущества дизайна этого сайта, принадлежащего Мелиссе Гриффин, которая помогает предпринимателям монетизировать свой оффер и развивать свое сообщество:

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

8. Evernote: гармоничные цвета

Чем привлекает этот дизайн от Evernote, популярного веб-сервиса для создания и хранения заметок:

• за годы своего существования Evernote превратился из простого приложения для заметок в полноразмерный бизнес-продукт. Этот факт довольно сложно отразить на главной странице, но Evernote удается сделать это, обозначив все основные офферы в нескольких ключевых преимуществах продукта.
• фирменное сочетание ярко-зеленого и белого цветов позволяет выделить основные этапы конверсионного пути.
• от простого заголовка и подзаголовка взгляд пользователя естественно перемещается на CTA-кнопку «Зарегистрируйтесь бесплатно».
• Evernote позволяет оформить регистрацию в один клик с помощью аккаунта Google: это очень удобно и экономит время.

Читайте также: F-паттерн: неверно понятый, но все еще актуальный (даже на мобильных)

9. Basecamp: мультяшный стиль

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

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

Читайте также: Когда главную страницу сайта лучше заменить лендингом?

10. charity: water: убедительный призыв

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

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

11. TechValidate: баланс во всем

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

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

Читайте также: Все, что вам нужно знать о визуальном восприятии и дизайне сайтов

12. Medium: белый дизайн

«Истории, которые всегда при тебе. Приложение для читающих на ходу»

Чем примечателен этот пример дизайна от платформы для социальной журналистики:

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

13. Digiday: внимание на главном

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

Читайте также: Нейромаркетинг: как привлечь внимание на лендинге?

14. KIND Snacks: яркая гамма

• смелые цвета усиливают контраст, позволяя словам и изображениям хорошо смотреться на странице и быть заметными.
• слоган KIND Snacks прост и гениален: «Ингредиенты, которые ты сможешь увидеть и произнести». Таким образом компания прямо говорит, что эти снеки из натуральных продуктов, знакомых каждому. Никаких консервантов и труднопроизносимых компонентов.

15. Ahrefs: четкий заголовок

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

Почему эта страница достойна внимания:

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

Читайте также: Анатомия шрифта: визуальный гайд по типографике

Вместо заключения

В этой статье мы рассмотрели 15 отличных примеров оформления главных страниц сайтов различной тематики. Все homepage, показанные выше, очень удобны: на них легко ориентироваться, они не содержат «кричащих» объектов, например, флэш-баннеров, анимаций или других чрезмерно сложных и ненужных элементов. Многие также оптимизированы для мобильных устройств, что очень важно в современном веб-маркетинге.

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

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

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

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

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

50 примеров лучших главных страниц сайтов

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

Мы уже писали о рейтинге лучших студий 2018 года по версии ресурса. Очередь пришла к дизайну Главных страниц — примеров особо интересных решений от разработчиков со всего мира. Ниже мы составили рейтинг лучших Домашних страниц, которым компетентное жюри Awwwards присвоило награду “Сайт дня”. На примере этих сайтов можно оценить, сложен ли в реализации проект, способный получить признание лидеров отрасли.

1. Главная страница Welly

Американский стартап заказал разработку сайта студии illcreative из Нью-Йорка. Суть стартапа — продажа ярких наборов первой медицинской помощи. Цвет и комплектацию пользователь может выбрать на свой вкус. Столь тревожная сфера деятельности и продающий сайт — разработчики смогли решить вопрос совмещения этих областей в красивый проект.

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

2. Главная страница Ricky Michiels, 2019

Наиболее поражающие воображение тенденции предоставляют сайты из сферы шоу-бизнеса. Особое место занимают сайты деятелей и агентств из мира высокой моды. Одним из таких стало портфолио для кастинг-студии Ricky Michiels. Идеи для этого проекта фрилансер-разработчик Jason Bradley почерпнул у глянцевых журналов моды, поместив на главную страницу красочные фешн-фото.

В 2013 году тенденцию дизайна сайтов Веб 2.0 сменила портальная (журнальная) верстка. Круглые линии, реалистичные градиенты и объемные иконки уступили место острым углам, плоскому дизайну, минимализму и чистоте изображения. Истина “все гениальное — просто”, определяющая смысл журнальной верстки, не теряет актуальности и в 2019 году.

3. Главная страница Jomor Design

“Лучшее портфолио — собственный сайт” — так решили специалисты канадской студии Jomor Design из Монреаля, и разработали простую веб-страницу, на первый взгляд. Обычные и всем понятные шрифты, обычные фото. Но все дело — в анимации и Parallax-эффекте. Сайт реагирует на каждое действие пользователя, то отзываясь на движение мышки, то реагируя на скролл, то привлекая внимания к ключевым моментам. Гармоничное воплощение возможностей простых эффектов — этим специалисты студии и привлекли внимание жюри Awwwards.

4. Главная страница Precision Run

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

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

5. Главная страница Max Colt

Перейти на главную страницу https://maxcolt.com/

Украинская студия Adwanced.team поделилась с публикой Awwwards результатом работы над портфолио для отмеченного престижными наградами разработчика визуальных эффектов Max Colt, работавшего с Lil Wayne, Coldplay, Nicky Minaj, Kanye West, Imagine Dragons.

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

6. Главная страница True Ventures

Студия Ueno уже была в ТОП-25 студий по версии Awwwards-2018, уже имеет 29 наград ресурса, 13 из них — в номинации “Сайт дня”.

Студия представила новую работу, которую оценили жюри — ресурс для платформы для венчурных предпринимателей True Ventures.

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

7. Главная страница Animal

Перейти на главную страницу https://animal.cc/

Еще один корпоративный сайт для дизайн-студии Animal (Стокгольм). Не мудрствуя лукаво, специалисты студии использовали прозрачный белый фон и простые шрифты. Но волшебство начинается во время взаимодействия: распадающиеся слоганы на первом экране при наведении мышкой, листающееся портфолио во время кликов, меняющиеся надписи раздела features. Простой с виду сайт превращается в увлекательную “залипалку”, в которой пользователь вовлекается в игру с интерактивными элементами страницы. Надолго.

8. Главная страница Ferro

Перейти на главную страницу https://ferro.pt/en/

Еще одна студия, участвовавшая в рейтинге лучших разработчиков 2018 года по версси Awwards — Bürocratik из португальского города Coimbra разработала корпоративный сайт для компании Ferro — международного производителя продукции из углеродистой стали.

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

9. Главная страница Planetary

Перейти на главную страницу https://planetary.co/

“Нужен яркий сайт, мы же дизайном занимаемся” — решили специалисты студии Planetary из США, сделав первый экран своего корпоративного ресурс похожим на клубничную жевательную резинку. Позитивный розовый вписывается как в рамки жизнерадостного настроения и успешно сочетается с бодрой анимацией взаимодействий со страницей и flat-стилем иконок и кнопок страницы. За счет этого внимание к каждому горячему объекту автоматически возрастает. А темный задний фон не выглядит скучным, давая дорогу нужным, целевым действиям.

10. Главная страница LARGO Inc. Rebranding

Перейти на главную страницу https://largo.studio/

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

11. Главная страница EvaGher Makeup

Перейти на главную страницу https://evagher.com/en

Хотите увидеть испанский подход к веб-дизайну? Со всей страстью и увлеченностью специалисты Burundanga Studio подошли к разработке веб-портфолио для визажиста EvaGher. Использование насыщенности и контрастов в фешн-фотографиях, меганадписей в духе глянцевых журналов, как будто сделанных страстной кистью испанского художника — эти приемы смогли стать достойным аргументом для жюри Awwwards и принести проекту титул “Сайт дня”.

12. Главная страница SIROPPE

Перейти на главную страницу https://siroppe.com/

Обычная практика, когда в дизайне сайта используется три цвета. Но разработчики испанской студии Siroppe в своем корпоративном сайте сумели ограничиться двумя. Остальное сделала типографика, забавная анимация и краткая, но нескучная текстовая часть. Например, на странице портфолио вместо заезженного названия в тайтл разработчики поставили крылатую фразу Гэндальфа “Бегите, глупцы!”, что уже вызывает улыбку, еще до загрузки страницы. Минимум фото для проектов и портфолио, и максимум молодежной анимации — и рецепт вкусного веб-сиропа по-испански готов!

13. Главная страница Union

Перейти на главную страницу https://www.union.co/

Диджитал-агентство из американского города Шарлот создало для себя корпоративный сайт с чистым белым фоном, на котором эффектно смотрится игра типографики. Рекламные анимированные слоганы в удобном размере и с оптимальных кеглем расположены по очень простой сетке. Такая предсказуемость откровенно радует глаз и стимулирует к изучению сайта. Особо игрой шрифтов отличилось главное меню, в котором увеличенным шрифтом выделены основные пункты — портфолио, услуги и “Об агентстве”. Сама иконка меню ненавязчиво расположена в левом нижнем углу. Такое решение вносит нотку необычности в привычную сетку, что делает меню самым запоминающимся местом на сайте.

14. Главная страница Vincent Saïsset — Portfolio

Французский разработчик интерактивных элементов Vincent Saïsset (Париж) совместно с дизайнером Ludmilla Maury разработал сайт, который должен был стать его портфолио. В проекте разработчики использовали силу современной типографики, умноженной на креативные интерактивные взаимодействия мыши, кликов и переходов.

15. Главная страница Kühl&Han

Перейти на главную страницу https://kuhlandhan.com/

Датская дизайн-студия анимации Kühl&Han заказала разработку корпоративного сайта агентству Norgram, и это проект тоже попал в номинацию “Сайт дня”. В дизайне разработчики использовали всю красоту макросъемки и 3D-визуализации, поставив анимированные 3D-ролики на первый экран. Что характерно — страница состоит из одного экрана, при этом, содержит всю информацию, которая может понадобиться — контакты, ссылка на портфолио и описание студии. Все это обыграно современной типографикой, расположено в “горячих” местах, не перетягивая на себя все внимание посетителя, но и не теряясь на динамичном фоне.

16. Главная страница Few and Far

Перейти на главную страницу https://www.few-far.co/

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

17. Главная страница Finding Ctrl

Креативный проект от манчестерской студии ToyFight (Великобритания) предлагает поразмышлять над историей интернета, которому в октябре 2019 года исполнится 50 лет. Студия уже в шестой раз попадает в рейтинг Awwwards в номинацию “Сайт дня”.

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

18. Главная страница Angle2 Agency

Перейти на главную страницу https://angle2.agency/

Украинская студия дизайна и разработки Angle2 из Киева реализовала свой корпоративный сайт, удачно обыграв собственное название. “Посмотрите на свой продукт под разными углами” — призывает слоган на главной странице. Если повести в сторону курсором мышки, то слоган последует следом, изменяя угол отображения текста. Давая, тем самым, пользователю реально прочувствовать смысл фразы. Этого игровой элемент — еще один способ вовлечь пользователя во взаимодействие, не требующий сложных технических решений. Только немного фантазии и кода.

19. Главная страница Anoukia—in Pink

Американская студия Saint Roman совместно с 3D-дизайнером Anoukia Perrey разработали ее портфолио, в котором поместили летний сет ее работ, объединив в коллекцию “Anoukia in Pink”.

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

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

20. Главная страница Fabio Fantolino

Дизайн-агенство Adoratorio из Бресции (Италия) — еще один номинант в рейтинге на звание “Студия года-2018” по версии Awwwards на этот раз представила сайт дня — портфолио туринского архитектора Фабио Фантолино. Проект представляет собой постепенно набирающую популярность одноэкранную версию главной страницу, с которой можно быстро перейти в другие важные разделы — услуги, об авторе, контакты и т.д. Функцию создания wow-эффекта берет на себя анимация и фото проектов архитектора, дополненные типографикой в духе глянцевых журналов.

21. Главная страница Design in Motion Festival

Использовать рекламные афиши и проспекты в качестве источника вдохновения для веб-дизайна — ход беспрецедентно смелый. Но в разработке оформления сайтов тех же мероприятий смелый шаг приобретает оттенки оптимистичного вопроса “Почему бы и нет?”

Именно интернет-афишей и представляется веб-ресурс DEMO Festival (Нидерланды), разработанный агентством Dept (Амстердам). Яркость и насыщенность цветов, вычурность и гипермасштабность типографики прицельно показывают тематику ресурса — реклама массового мероприятия. Иногда и такой ход позволяет позиционировать мероприятие с первого взгляда. Если это произойдет — дальше только дело за техникой и информативным контентом.

22. Главная страница MST—We create digital stories

Перейти на главную страницу https://mst.agency/

Яркий сайт, напоминающий россыпь сладких леденцов — именно такие ассоциации возникают при взаимодествии с корпортаивным ресурсом и портфолио московского агентства MST. Специалисты студии решили объединить две тенденции — объемность Веб 2.0, наложенную на цветовую схему и требования Material Design. Все, что есть на сайте, сделано в строгом минимализме и единстве стилей. На сайте нет фото — есть иллюстрации, любовно нарисованные под каждый проект. Жюри Awwwards оценили серьезность подхода к самопрезентации и присудили проекту заслуженный титул “Сайт дня”.

23. Главная страница Oui Will Agency

Еще одно знакомое по рейтингу-2018 дизайн-студий — агентство Oui Will из сан-Диего (США). На этот раз студия представила обновленный собственный сайт, сделав ставку на Parallax-эффект, эффектные презентационные ролики и тонкую, гладкую типографику. Все разделено по экранам, для каждого слогана, ролика или новости — свой экран, никакого соседства. Сайт щедро сдобрен уместной анимацией и, где это возможно, интерактивным взаимодействием с пользователями, при этом, оставляя дух минимализма и сдержанности. Умение сочетать противоположности в очередной раз принесло студии место в рейтингах Awwwards.

24. Главная страница Alacran Group

Даже если пользователь зайдет на этот ресурс случайно, то уйдет он оттуда нескоро. Студия дизайна и разработки Jam3 из Торонто (Канада) совместно с творческой группой Alacran создала проект, предлагающий пользователю сорать свою мелодию из электронных семплов. Просто кликая по разным точкам, можно создать микс из звуков, а потом поделиться им с друзьями или оставить на сайте, чтобы другие пользователи смогли послушать то, что получилось.

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

25. Главная страница Studio P2MV

Перейти на главную страницу https://p2mv.studio/

В мире дизайна все, что сделано во Франции, приобрело славу творчески неординарного бренда. Корпоративный ресурс и портфолио дизайн-студии Poignée из французского города Нант не обманывает это ожидание. Сайт предлагает посетителю оценить необычность каждого элемента оформления:

• логотип из креативно выполненной типографики;
• многозначность презентационного экрана, в котором работы представлены не привычным прямоугольником видео, а как анимированная художественная инсталляция, гармонично сочетающаяся со слоганом;
• журнальная верстка, крупные благородные шрифты с засечками и все это — на чистой черном фоне;
• скроллинг с приятным “доезжающим” parallax-эффектом.

26. Главная страница Getz

Студия Bornfight из Загреба (Хорватия) разработала онлайн-портфолио для фотографа Mario Dragicevic. В таких проектах главное, чтобы ресурс не затмевал талант самого художника, но выгодно подчеркивал его. И в этом разработчики преуспели, создав сайт с чистым черным дизайном, журнальной типографикой и ненавязчивой анимацией работ фотографа.

27. Главная страница NourishEats by Joanna L.

Перейти на главную страницу https://nourisheats.co/

Дизайн от канадского дизайнера Kin Hui-Lo (Торонто) для кулинарного проекта Nourisheats поражает умением разработчика сочетать фото, типографику, иконографику и parallax-эффект. Специалист использовал всего понемногу в нужный пропорциях, чтобы не сделать блог слишком тяжелым и насыщенным. Использование натуральных неброских цветов позволяет избежать информационной перегрузки. А ненавязчивая анимация курсора и элементов меню позволяет сделать сайт интерактивным и вовлекает во взаимодействие.

28. Главная страница Versett

Перейти на главную страницу https://versett.com/

Агентство Versett из Калгари (Канада) представили публике Awwwards свой корпоративный сайт, и получили награду “Сайт дня” от жюри ресурса.

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

29. Главная страница Temporary Measures

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

30. Главная страница Lundqvist&Dallyn

Белый фон, parallax-эффект, играющий черно-белыми информационными блоками, расположенными в шахматном порядке на странице — пожалуй, проще дизайн придумать сложно, однако, именно простота замысла и цепляет в оформлении сайта дизайн-студии Lundqvist&Dallyn, разработанном дизайнерами оксфордской студии Sam&Sara (Великобритания).

31. Главная страница Mogney

Перейти на главную страницу https://mogney.com/

В СССР существовал мультик “Пластилиновая ворона”, в котором животные превращались друг в друга под веселую песенку. Разработчики из отмеченной номинацией “Студия года-2018” воронежской студии Red Collar (Россия) определенно вдохновлялись этим мультиком. Проект Mogney — сайт новой платежной системы по QR-коду поражает впечатление сначала ярким цветовым сочетанием, а потом — анимациями, сменяющими друг друга при скроллинге. На выходе получилась динамичная картинка, которая поднимает настроение и желание воспользоваться сервисом.

32. Главная страница White Square

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

33. Главная страница This Is Sleep

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

34. Главная страница Jorik

Простой parallax позволяет сделать сайт играбельным, если прикрепить точку просмотра главного экрана к курсору мышки. Решение авторства студии Ask Phiil из Амстердама (Нидерланды) добавило сайт нового бренда Lil’ Kleine: Jorik в рейтинг Awwwards и заслужило симпатии жюри. Чтобы не осталось сомнений, достаточно посмотреть на чистый и гладкий дизайн страницы, интерактивное взаимодействие на клики пользователя и “доезжающий” скролл, оставляющий приятное впечатление и заставляющие повторить опыт взаимодействия с ресурсом если не сразу, то хотя бы через время.

35. Главная страница Baunfire

Свежий взгляд на дизайн от резидентов Силиконовой долины Baunfire (Сан-Хосе, США). В нем нет масштабных фотографий или претенциозных рекламных роликов. Здесь царит дизайн с использованием простых символов, напоминающих ASCII Art — рисование символами — доведенный до уровня профессионализма. Добавить красивое цветовое сочетание, интерактивное взаимодействие с пользователем и мягкие анимационные эффекты функциональных объектов и элементов дизайна — и получим сайт-номинант на события дня.

36. Главная страница Graphit Type

Если есть желание выделиться из потока презентационных сайтов, то можно попробовать красиво нарушить абсолютно все рамки моды на веб-дизайн. Именно так и сделали LitDesignStudio для презентации своего шрифта Graphit, использовав его формы в дизайне сайта. Так они убили двух зайцев одним махом — и продукт показали во всех возможных вариациях, и запоминающийся дизайн, достойный титула “Сайт дня” создали.

37. Главная страница LOOP

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

38. Главная страница Olivier Ouendeno — Portfolio

Перейти на главную страницу https://www.olouen.com/

Красивые фото анимацией и интерактивом не испортишь. Арт-директор Olivier Ouendeno (Париж, Франция) для своего портфолио подобрал фото, которые зашил под чистую подложку. Чтобы их увидеть, достаточно поводить курсором, а для полного просмотра — зайти в портфолио через креативное меню. Отдельного внимания заслуживает винтажно оформленная типографика.

39. Главная страница Auberive

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

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

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

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

40. Главная страница 2018: Year in Review

Дизайн-агентство Green Chameleon из Великобритании решило использовать parallax-эффект, чтобы создать просто на главной странице обзорного ресурса за 2018 год эффект VR. Смысл был именно в том, чтобы погрузить посетителя в события прошедшего года. Разработчики использовали современные технологии, чтобы дать прочувствовать именно идею погружения, позволяющей стать участником действия и творцом истории.

41. Главная страница Won Hundred

Перейти на главную страницу https://wonhundred.com/

Есть тут кто-то, соскучившийся по табличной верстке нулевых? Разработчики SPRING/SUMMER удивили жюри Awwwards, предложив на суд беспрецедентный проект сайта для капсульной коллекции одежды Won Hundred. В этой странице есть все из дизайна девяностых-нулевых: белый фон, однопиксельные границы табличек, в которые вписано главное меню, форма рассылки и карточки товаров. Дополнительный флер гениальности вносят стандартные цвета и типографика, и даже бегущая строка заголовков. Вишенкой на торте выступают рекламные баннеры в лучших традициях WordArt. Нельзя упрекнуть датских разработчиков в хорошем чувстве юмора.

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

42. Главная страница Bruegel – Once in a Lifetime

Разработчики студии Wild Вены (Австрия) для сайта выставки Питера Брейгеля в Венском Музее Искусств не стали изобретать велосипед, а воспользовались работами самого мастера. Их они доработали с помощью анимации, оживив многочисленных персонажей картин художника. Этого оказалось достаточно для wow-эффекта на первом экране.

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

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

43. Главная страница RALLY

От фантазийных нарушений правил — к традиционному их соблюдению. Разработчики студии Rally из США доказали на примере своего нового корпоративного, что гайдлайны Google относительно дизайна — очень даже полезная вещь. Простое соблюдение правил типографики, правил “чистого” дизайна и белой подложки, добавить немного анимированных геометрических форм и интерактива в виде изменения размера надписей и смены цветов подложки — и можно получить гладкий дизайн, достойный звания “Сайт дня”.

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

44. Главная страница Dapper Fundation

Перейти на главную страницу https://www.dapper.fr/

Рецепт удачного дизайна от креативной студии VIENS-LÀ (Франция) на примере сайта для культурного Фонда Даппера:

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

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

45. Главная страница Pelizzari Studio

Еще один “Сайт дня” от итальянской студии Adoratorio — портфолио студии дизайна интерьеров для отелей, вилл и ресторанов Pelizzari Studio. Дизайнеры агентства используют традиционные для своих ресурсов приемы: качественные профессиональные фото, античные шрифты, анимирование элементов в духе Material Design.

46. Главная страница Lasse Pedersen

Датчане уверенно нацелились перенять пальму первенства по части креатива у французов. Дизайнеры KASPER LAIGAARD STUDIO представили публике и жюри Awwwards свой проект — портфолио парикмахера и стилиста Lasse Pedersen.

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

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

47. Главная страница Google Store

Сложно ожидать от сайта Google Store дизайн, не соответствующий строгим гайдлайнам самой поисковой сети. Неизвестно, как студия BASIC (США) подходила к его разработке — сначала поработав над соответствием требованиям Material Design, а потом добавляя креатив, или наоборот? Итогом оказался магазин, наполненный качественными фото, вызывающими восторг — будь то изображение товара или рекламного атмосферное фото.

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

48. Главная страница Goldkant Interior

Перейти на главную страницу https://goldkant.de/

Привычный parallax-эффект может творить чудеса в руках прагматичных немейких дизайнеров. Разработчики из студии HUMANS&MACHINES (Берлин, Германия) предложили для своего проекта — сайта студии интерьеров Goldkant предельно простую структуру и сдержанный дизайн с минимумом цветовых акцентов.

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

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

49. Главная страница Heller Designstudio

Перейти на главную страницу https://heller.tv/

Еще один проект итальянцы Adoratorio разработали для немецкой студии дизайна Heller. Сайт рискует стать “залипалкой” с первого экрана. Посетитель может надолго задержаться, играя с картинками презентации, которые будут гуськом следовать за курсором мышки. А чтобы время проходило с пользой, поверх презентации бегущей строкой будет идти описание студии.

Интересен эффект наложения надписи на изображения: когда текст “наезжает” на картинку, то цвета надписи инвертируются в соответствии с картинкой. Так достигается удобство чтения.

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

50. Главная страница My 360° Mirror

Как удачно продать дизайнерское зеркало? Дизайнер Stella Petkova (Болгария) нашла способ, предложив свое видение, каким должен быть дизайн для торгового марки My 360° Mirror, чтобы идея бренда пришлась посетителю по вкусу.

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

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

Выводы

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

• намечается тенденция перехода от лонгридов к одноэкранным сайтам с переходами через клик или скролл, которые были популярны в нулевых. Отличает лишь современную версию Веб 2.0 сокращение контентной части до предельного минимума, и действительно до одного экрана, без скролла вниз — эта функция уже занята под переходы;
• parallax-эффект все так же не сдает позиций, являясь классикой для создания wow-эффекта. Разница — в реализации. Не всегда это — простой скролл полотен текста, разделенного окошками с визуальными элементами (видео, фото). Теперь эффект становится основой для 3D-презентации или полигональной развертки, выступая способом управлять картинкой и углом ее обзора;
• музыка и видео все еще добавляются на сайты — где это важно. Иногда наличие такого оформления может замедлять скорость загрузки ресурса. На этот случай дизайнеры придумывают креативную заглушку с элементами интерактива, чтобы пользователь не скучал;
• интерактив может стать и способом развлечь посетителя на сайте. Забавные игровые элементы могут присутствовать практически на любом ресурсе — даже на сайте респектабельного дизайнерского бюро, лишь бы приподнятое и веселое настроение, которое они вызывают, было уместным и не входило с в противоречие с тематикой ресурса;
• дизайн, достойный наград, может быть выполнен и без особо сложных эффектов. При должном усилии, сайт, разработанный фрилансером, может привлечь внимание жюри. “Вывезти” веб-ресурс может просто следование гайдлайнам Google, без покушения на игру с нормами, какую могут себе позволить маститые дизайн-агентства;
• покушение на нормы — при должном уровне мастерства (или смелости) можно нарушить абсолютно все нормы, и попасть в рейтинг. Если знать, какие нарушения придутся публике по душе. в этом поможет глубокое исследование вкусов целевой аудитории и рынка в целом.

Article by:
CEO Andrew Chornyy

CEO Plerdy — эксперт в области SEO и CRO с более чем 11-летним опытом.

Как оформить главную страницу сайта

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

Роль главной страницы сайта в работе с аудиторией

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

Какими бывают главные страницы

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

Сайт услуг

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

• экспертность;
• дружелюбие;
• доступность.

А вот что должно быть на главной странице сайта услуг, чтобы он транслировал эти качества:

• Наглядный каталог услуг. Он должен быть в зоне видимости, с удобной навигацией и понятными названиями категорий. Чаще всего такое меню располагают слева или по центру главной страницы.
• Преимущества. Не нужно стесняться говорить о том, чем вы хороши. Пока вы скромничаете, другие зарабатывают. Сделайте на главной странице блок с 3-5 вашими основными достоинствами, которые зацепят будущих клиентов: делайте это грамотно, этично и честно, предварительно проведя работу по изучению целевой аудитории.
• Портфолио. Покажите людям результаты работ, которые вы уже проделали, ведь вам есть чем гордиться. Сделайте это красиво, стильно и презентабельно. Для портфолио можно выделить отдельную страницу, ссылка на которую будет на главной, и вынести выборку лучших или последних работ на главную страницу, чтобы посетитель сразу их увидел.
• Прайс. Если вы обозначите цены на услуги сразу, это повысит доверие к вам как к профессионалу. Вы не “темните”, не пытаетесь запутать человека, а сразу и честно сообщаете, сколько стоит ваша работа. Цены лучше делать отдельным разделом с обязательным размещением ссылки на главной. Если услуг немного, цены можно указать прямо на плашках с услугами, вместе с картинкой-превью.
• Контакты. Человек, который окинул первым взглядом вашу главную страницу и заинтересовался услугами, должен иметь возможность сразу связаться с вами. Укажите телефон, адрес, электронную почту — лучше прямо в шапке сайта.

Интернет-магазин

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

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

• Каталог товаров с поиском по категориям и фильтрам. В случае с товарами очень важно, чтобы человек мог легко и быстро найти то, что ему нужно. Даже если посетитель пока точно не знает, что ищет, такой поиск может ему помочь определиться. Меню каталога категорий товаров обычно размещают в левой части главной страницы сайта.
• Выборка популярных или сезонных товаров. Это сделает более доступными те товары, на которых можно лучше заработать, то, что люди ищут. Такой блок можно делать слева под каталогом или отдельным слайдером по центру.
• Акции и спецпредложения. Отдельная страница для акций, безусловно, должна быть, но на главной обязательно должны отображаться актуальные акции, которые могут заинтересовать посетителей уже сейчас и будут способствовать увеличению продаж. Акционный блок имеет смысл делать в центральной части страницы, в виде слайдера или плитки из 2-4 плашек.
• Обратная связь. Нужно дать клиенту возможность связаться с вами уже здесь, когда он на главной странице. Онлайн-чат — это один из самых полезных и продающих инструментов для интернет-магазинов.
• Отзывы. Да, прямо здесь, на главной, вы можете разместить слайдер с отзывами довольных покупателей, чтобы те, кто пришёл на ваш сайт только что, сразу уловили вашу востребованность.
• Контакты. Адрес главного офиса или шоурума, телефон и электронная почта — это всё должно быть прямо в шапке сайта.

Лендинг

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

• Презентация торгового предложения. Важно показать товар или услугу максимально подробно, выгодно и ярко. Описание должно с первых секунд отвечать на “боли” посетителя и демонстрировать готовность эти боли закрыть. Рекомендуем сопроводить эту часть ярким ёмким заголовком, например, провокационным вопросом.
• Иллюстрация вашего оффера. Конечно, должно быть хорошее фото и видео, где можно рассмотреть детали со всех сторон.
• Навигационная кнопка “Узнать больше”. В остальных частях лендинга раскрываются все остальные подробности торгового предложения — цены, условия, варианты и пр. Кнопка “Узнать больше” ведёт к этим подробностям и ответам на вопросы.
• Кнопка для обратной связи. Это должен быть очевидный и доступный шаг, который может сделать клиент навстречу к вам. “Заказать обратный звонок”, “Сделать расчёт”, “Забронировать”, “Задать вопрос” — предоставьте людям варианты быстрой связи с вами.
• Кнопкацелевого действия. “Заказать”, “Купить”, “Оставить заявку”. Призыв к целевому действию должен быть уже на главном экране лендинга. По опыту, такой лид-магнит работает очень эффективно.

Информационный сайт

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

Что здесь нужно размещать:

• Логотип и название организации. Здесь объяснения излишни — на главной странице сайта должно быть очевидно, что это за организация и чем она занимается.
• Описание. Дайте посетителю с первых секунд понять, что полезного он может узнать на этом сайте. Информацию можно распределить по направлениям и категориям, сделать меню или кликабельные плашки.
• Адрес и контакты. Важно демонстрировать доступность и открытость. Разместите контактные данные в шапке сайта, и не забудьте сделать отдельный раздел “Контакты” с картой проезда, дополнительными телефонами и другими способами связи (телефоны разных отделов или руководителей направлений), а ссылку на этот раздел разместите в шапке.
• Обратная связь. Люди приходят на сайт за информацией, и нужно дать им возможность эту информацию дополнить, если у них возникли вопросы. На главной будет логично сделать форму обратной связи или ссылку на неё.
• Репортажный блок. Здесь размещаются фотоотчёты с мероприятий, выполненные работы.
• Анонс мероприятий. Аудитория, заинтересованная в деятельности вашей организации, должна иметь представление о том, чем вы занимаетесь и что планируете сделать. Так вы добьётесь общественного признания, доверия и популярности.

Что общего

На любом сайте главная страница должна содержать основные элементы, которые придают смысл и привлекают целевое внимание посетителей:

• Презентация и описание;
• Контакты;
• Обратная связь.

Другие элементы, в зависимости от вида сайта, могут варьироваться, но чаще всего на главных страницах коммерческих сайтов есть ещё и эти элементы:

• каталог товаров или услуг;
• форма заявки или заказа.

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

Что будет лишним

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

Старайтесь избегать на главной странице таких элементов:

⛔ Полный каталог товаров и услуг.

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

⛔ Большие текстовые описания.

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

⛔ Слишком много преимуществ или хороших отзывов.

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

Иллюстрации, визуальные элементы, фото и видео — всё это должно быть хорошего качества и “дружить” между собой.

Как размещать элементы на главной странице

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

1. Продумайтеюзабилити. Главная страница должна быть эргономичной, удобной и интуитивно понятной. Её вёрстка и внешний вид — это то, что должно быть продумано ещё на этапе прототипирования. Для этого нужно будет изучить сайты конкурентов, сформировать образ целевой аудитории и определить фирменный стиль вашей компании. Это поможет вам сделать главную страницу понятной, удобной, доступной и приятной визуально.
2. Акцентируйте внимание на том, что важно. Если у вас коммерческий сайт, не стесняйтесь подчёркивать достоинства ваших УТП. Главная страница — это то, что должно зацепить и удержать внимание посетителя, чтобы он стал клиентом.
3. Сделайте навигацию удобной и понятной. Логика навигации на главной странице должна быть выстроена так, чтобы привести посетителя к целевому действию, которое вам нужно. Как именно будет построена главная, зависит от вида сайта, но эргономика — это очень важно. Дайте посетителю возможность найти все нужные разделы и кнопки сразу, интуитивно.
4. Меньше слов — больше дела. Не перегружайте главную страницу текстами! Человек только зашёл к вам, и ему меньше всего хочется вовлекаться в текстовые массы, которыми пестрит главная страница. Он пришёл сюда не почитать, а удовлетворить свои потребности, поэтому лаконичность, смыслы и краткость — ваши друзья.
5. Адаптируйте страницу для мобильных устройств. Главная страница вашего сайта должна корректно открываться и читаться не только с компьютера, но и со смартфонов и планшетов. Продумайте, как основные элементы и меню будут располагаться в мобильной версии, что можно сократить, что переместить или скрыть. Помните об эргономике — мобильная версия должна быть такой же удобной, красивой и понятной, как и основная.
6. Думайте о посетителе! Ваша главная страница должна быть не только демонстрацией вашей компании, но и первым дружеским жестом в сторону будущего клиента. Дружелюбие и готовность помочь, положительный эмоциональный настрой, понимание и отзывчивость — вот что должен почувствовать посетитель вашего сайта, чтобы стать вашим лояльным клиентом. Старайтесь транслировать это в заголовках, описаниях, иллюстрациях — грамотно, этично и доброжелательно.

Лицом к лицу: 20 примеров оформления главной страницы сайта

Алексей Александров Редакция «Текстерры»

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

В статье собраны примеры 20 главных страниц с разной тематикой. Решайте сами – хороши они или не очень.

Московский машиностроительный завод «ВПЕРЕД»

Завод-производитель рулевых винтов и лопастей к ним для вертолетов семейства «Ми».

Особенности

1. При нажатии кнопки «Меню» в правом верхнем углу показывается подробное меню и дублируется футер:

1. Сайт имеет две версии – русскую и английскую. Переключение происходит автоматически после нажатия на соответствующий флажок.
2. Сразу указывается направление деятельности и дается оформленная в виде кнопки ссылка на каталог продукции, страницу с описанием сервиса, а также на текст о компании.
3. Для каждой модели вертолета указываются варианты изготовления рулевого винта и лопастей со ссылкой на соответствующие страницы каталога:

1. В кратком виде приводятся тексты о производстве и сервисном обслуживании (последний раздел является сквозным для всего сайта). Оба текста можно прочитать, нажав кнопку «Подробнее».
2. Внизу приведен краткий список партнеров, который также можно посмотреть в расширенном виде.
3. В футере продублированы все пункты меню, приведен график работы и контактные данные.

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

Штучка

Интернет-магазин товаров для рукоделия.

Особенности

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

1. Отдельный блок отведен под акцию с бесплатной доставкой:

1. Каталог также представлен более подробно – в виде плиточек с категориями товаров.
2. Текстовый блок отведен под короткое описание магазина, схему работы конкурентные преимущества.
3. Затем новостной блок, который не часто обновляется (можно подписаться на рассылку RSS). Последняя запись сделана в День Победы:

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

1. Далее интерактивная карта и подробный список контактных данных:

1. Есть подписка на рассылку, за которую дают 3% скидок:

1. Далее следует блок-портфолио с работами участниц. При открытии любое изображение можно прокомментировать:

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

Главная страница хорошо проработана и дает такой объем информации, что как минимум хочется «походить» по остальным страницам сайта. Хоть ты – брутальный мужик, а не рукодельница :).

Пелси

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

Особенности

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

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

1. Наконец, блок с категориями товаров из каталога. Оформление классное:

1. Страница заканчивается красивой пейзажной зарисовкой:

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

Столярная мастерская

Индивидуальное изготовление мебели и предметов интерьера.

Особенности

1. Сайт – одностраничник. Весь первый экран – текст на красивом фоне (представление и короткое описание общими фразами) + призыв к действию в кнопке:

1. Сразу же после него блок с новыми работами. При наведении на любую работу появляется ссылка «Подробнее». При нажатии испытываешь огорчение:

1. После следует единая форма подписки на консультацию – неважно, есть ли у вас дизайн-проект или нет.
2. Следующий блок – информация о мастерской:

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

• в блоке «Мы предлагаем» описаны названия услуг и их короткое описание:

• в блоке «Что мы используем в работе» описаны материалы и возможность делать из них нетривиальные изделия. Для наглядности текст иллюстрирован:

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

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

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

1. Завершается главная страница стандартной формой обратной связи «Остались вопросы?» и интерактивной картой с адресом офиса продаж.

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

Мы делаем сайты, которые оптимизированы под поисковики и приносят продажи. Обращайтесь! Подробнее

Студия Михайловых

Дизайн интерьеров под ключ.

Особенности

1. Первый экран сделан по схеме «Сфера деятельности + короткое описание + кнопка с призывом к действию»:

1. Далее блок, который более подробно описывает преимущества от работы с фирмой. Странно, что очевидная кнопка «Заказать» – всего лишь элемент рисунка – так и хочется на нее нажать:

1. Следующий блок, обращающий на себя внимание – схема работы – тут все проиллюстрировано и подробно описано:

1. Логически верно идущий блок «Есть вопросы?» с рекомендацией перехода в FAQ:

1. Портфолио работ с кратким описанием каждой при наведении курсора (при щелчке откроется окно с подробным описанием работы) и возможность посмотреть все проекты:

1. Далее текстово-графический блок о деятельности фирмы – коммерческие интерьеры домов в Сочи.
2. Завершает страницу калькулятор расчета стоимости:

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

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

ДДТ

Рок-группа под бессменным руководством Юрия Юлиановича Шевчука.

Особенности

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

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

1. Затем поклонники и посетители могут посмотреть и купить концертные CD группы:

1. Непременный блок для такого типа сайтов – состав группы:

+ команда поддержки и контактные данные:

1. Завершается страница ссылками на соцсети и магазин атрибутики:

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

Texterra

Особенности

1. Первое, на что обращаешь внимание – это акцентуация на омниканальности и ссылка на подробное описание услуги комплексного интернет-маркетинга. Не думаю, что все знаю про понятие «омниканальность» (объяснение более простыми словами, чем в «Википедии» решит вопрос):

1. Далее перечень услуг. Меня удивило, что тут услуги не раскладываются на подуслуги, как на одноименной странице, которые я разобрал в предыдущей статье. Краткие описания – информативные, раскрывают суть.
2. Блок «Почемучка»: оформленный буллитами текст, подкрепленный видеороликом + ответ на вопрос, зачем нужен комплексный интернет-маркетинг:

1. Затем мы видим самое мощное оружие «Текстерры» – последние записи из блога и кнопку-ссылку на все материалы. Кстати, воспользуйтесь генератором тем для блога:

1. Завершает страницу блок с клиентами «Текстерры» (я бы так и обозначил его – «Наши партнеры»). Логотипы постоянно меняются:

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

1. В футере – контактные данные, реквизиты, а также ссылки на представительства «Текстерры» в социальных сетях и продублированное меню.

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

Астраханская

Рыболовная и база отдыха.

Особенности

1. Первое, что бросается в глаза – растения и домики:

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

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

1. Далее блок с текстом о базе:

1. Далее информация, которую можно охарактеризовать как услуги:

• «Номера» с ценами и кнопками-ссылками на бронирование. При нажатии здесь же появляется форма:

• «Размещение», где рассказывается, что входит в стоимость;
• «Инфраструктура» – развлечения для взрослых и детей, активных и ленивых:

• «Рыбалка» с прайс-листом и заметкой, что ловить вы будет в компании егеря-чемпиона России по охоте и рыбной ловле;
• «Корпоративный отдых» с той же самой формой бронирования, что и у «Номеров»;
• «Оздоровление и отдых» – описано, что туда входит. С такими вот иллюстрациями:

1. Завершает страницу подробное описание, как добраться авто-, авиа- и железнодорожным транспортом:

+ интерактивная карта с телефонами бронирования и электронной почтой:

Среди подобных сайтов выделяется качественным и информативным оформлением. Поеду рыбачить на Волгу – обязательно открою сайты «Астраханской» и базы «Углянское». И буду выбирать между ними.

Правильные печи

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

Особенности

1. Весь сайт, а не только главная, создает приятную атмосферу теплой русской печи, за что огромный плюс в карму создателей. И как подкрепление моих слов:

1. Блок «О нас» – здесь очень удачно графикой сделаны некоторые слова:

1. Блок «Услуги» с хорошими картинками, кратким описанием и, что здорово, ссылками «читать…» на подробное описание услуг:

1. Фотогалерея – еще один образец нетривиального оформления. Смотрите, что тут можно сделать:

1. Финальный блок «Связаться с нами» – достойное и уютное окончание главной страницы:

1. В футере – ссылки на страницы «Правильных печей» во «ВКонтакте» и «Одноклассниках».

Вместо своих комментариев лучше приведу точную цитату из раздела «О нас»:

“В нашей компании печники — это не просто специалисты по кладке и ремонту печей. Это в первую очередь люди, вкладывающие себя, свою душу и сердце в каждую сложенную ими печь”.

Москоу Холидей Хотел

Отель в самом центре Москвы.

Особенности

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

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

1. В блоке услуги и удобства можно увидеть, чего ожидать от номеров:

1. Далее фото-портфолио:

1. Ниже немаловажный раздел с отзывами:

1. Завершается страница интерактивной картой с контактными данными гостиницы:

1. Отдельно стоит сказать про закрепленную информацию о бронировании номеров:

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

Деловые линии

Особенности

1. Шапка сайта очень информативная:

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

1. Далее не менее насыщенный информацией блок:

• по нажатию на пиктограмму грузовичка появляется описание конкретной акции:

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

1. Следующий блок состоит из перечня услуг транспортной компании, выстроенной по схеме «название услуги / информация об акциях по ней / порядок оказания / документы для скачивания в формате pdf для этой услуги»:

1. Компания предусмотрела следующее окно, если вы не нашли в этом перечне то, что нужно:

1. Следующий блок посвящен особенностям и конкурентным преимуществам компании. Обращают на себя внимание, конечно же, цифры:

1. Страница завершается текстом о компании:

1. Футер сайта очень большой – содержит все многочисленные ссылки на разделы, кнопки представительств в соцсетях и кнопки расшаривания страницы (!), ссылку на мобильную версию, а также информацию о соответствии деятельности системе качества ISO 9001:

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

Русский кондитер

Один из крупнейших производителей мармелада на территории России.

Особенности

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

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

1. Далее блок с пагинацией всех продуктовых линеек фабрики. При наведении на любую из них появляется ссылка «Смотреть линейку»:

1. Блок-«вкусняшка» сильно отвлекает от анализа страницы. Но это цифры, которые всегда важны для партнеров и покупателей:

1. Следующий блок с фильтрацией – вы можете посмотреть и заказать товары по категориям «Хиты продаж», «Новинки производства» и «Акция»:

1. Отдельного внимания заслуживает блок «Акция» — это настоящее уникальное торговое предложение фабрики! Судите сами:

1. Если захотелось узнать подробнее и заказать брендированный мармелад, после нажатия на кнопку появится такая форма обратной связи:

1. Следующий блок – сугубо рекламный, содержащий конкурентные преимущества фабрики:

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

1. Футер сайта дублирует шапку и содержит все пункты меню и адрес компании.

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

Holiday Kids

Организация и проведение детских праздников с аниматорами в Москве.

Особенности

1. Первый экран – слова на фоне видео и то, что ждешь от этого всего:

1. Далее блоки, раскрывающие суть детских праздников – какие компания проводит (о каждом можно прочесть подробнее, щелкнув по картинке) и как мы можем заказать их себе. Пункт № 4, правда, по смыслу сюда не вписывается, потому что это рассказ об особенностях работы студии:

1. Далее, внимание, география организации праздников (по щелчку на населенный пункт открывает страница, показывающая аниматоров конкретно в нем) + закономерный призыв заказать аниматора прямо сейчас:

1. Наконец, блок, до которого, многие быстро долистывают, когда переходят на сайт – ролевые модели аниматоров. Вот лишь фрагмент:

1. Следующий блок – реально на добивание и закрытие сделки:

1. Далее следуют тарифы (!) на детские праздники. Неравенство есть и здесь:

1. Как говорят старые рекламисты, «но и это еще не все»:

…и чуть ниже дублируется блок «Заказать аниматора прямо сейчас», несмотря на обилие кнопок «Заказать».

1. Кому и этого мало, пожалуйста:

1. Далее социальные доказательства:

• видеоролики;
• фотоотчеты;
• конечно же, отзывы:

1. Наконец, контакты и форма обратной связи:

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

1. Завершается страница дублированием блока с географией доставок детских праздников.
2. В футере повторяется про гарантию возврата денег, дублируется меню, приводятся контакты и размещаются кнопки-ссылки на группы компании в соцсетях.

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

Москафе

Недорогой ресторан в центре Москвы.

Особенности

1. Обратите внимание на доменный адрес – это единственный сайт в подборке, где используется тематический домен .cafe.
2. Первый экран привлекает внимание фирменным стилем написания, возможностью переключения языков. Но главное – написанный крупным телефон и кнопка с призывом забронировать столик:

1. А дальше – блок, который показывает положительные стороны кафе:

1. Этот блок усиливается текстом и фотографиями ниже:

1. Следующие два блока – «Популярные блюда» и «Интерьер МОСКАФЕ» содержат фотографии с пагинацией. Любое изображение можно увеличить, но картинки не подписаны:

1. Важнейший блок «Акции» — я бы поместил его сразу под первым экраном:

1. Затем блок с контактными данными, интерактивная карта и форма для бронирования столика «онлайн»:

1. Завершается страница формой подписки на новости и акции «МОСКАФЕ».

Если одним словом описать впечатление от главной страницы кафе, это будет «уютно». Когда поеду в столицу, хотел бы посетить кафе или же просто сделать заказ и вынести еду со скидкой в 20 %.

Викиум

Интерактивная система развития мозга.

Особенности

1. Первый экран говорит, что сейчас будет тренировка мозга (ее можно уже начать, переключившись на английскую версию сайта). Кнопка «Начать развиваться» переводит на страницу с опросом для построения учебной программы. Ссылка «У меня уже есть аккаунт» открывается окно авторизации:

1. Следующий блок «продает» нам идею заниматься ежедневно:

1. Думаете, что вам рано / поздно заниматься? Блок отрабатывает эти возражения:

1. Немного научной информации для закрепления результата никому не повредит:

1. Тренироваться по «Викиуму» легко. Вот простая схема:

1. Абсолютно логичный блок с социальными доказательствами (ссылки на профили отозвавшихся людей повысили бы доверие):

1. Далее блок, который на профессиональном жаргоне называется «ачивки»:

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

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

Обновление статьи от 02.08.2018

Из рук в руки

Всероссийский портал объявлений.

Главная страница портала объявлений «Из рук в руки»

Особенности

1. Шапка сайта однозначно говорит о том, что мы находимся на портале объявлений:

• нажатие на надписи «Избранное» открывает окно сбоку, где написано, что мы можем добавить в избранное любое понравившееся объявление, нажав на кнопку со звездочкой;
• надпись «Вход» – авторизация на сайте или регистрация (жаль, что всего два способа – стандартная регистрация по логину и паролю и вход через mail.ru);
• кнопка «Добавить объявление» переводит на страницу создания нового объявления;

1. Поисковая строка состоит из трех секций:
   • поиск товара или услуги с поисковыми подсказками;
   • выбор категории;
   • выбор региона.

1. Следующий экран показывает фактически структуру каталога сайта – список объявлений. Весь список оказывается при нажатии на кнопку «Больше категорий»:

1. Следующий блок – «Рекомендуемые объявления»:

1. Ниже следует блок «Из рук в руки для бизнеса»:

Заявку оставить нельзя… проверял в трех браузерах.

1. Футер сайта информативный:

• можно скачать мобильное приложение «Из рук в руки» на смартфон под iOS или Android;
• панель меню, которая встречается только внизу сайта (удивительно, что у портала объявлений есть раздел со статьями);
• ниже дублируются категории из каталога объявлений;
• в самом низу кнопки социальных сетей, ссылки на белорусскую и казахскую версии сайта, в правом нижнем углу – ограничение по возрасту «16+»;
• вы можете оставить отзыв о сайте, нажав на соответствующую кнопку.

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

Национальный медицинский исследовательский центр хирургии им. А.В. Вишневского

Многопрофильная хирургическая помощь высочайшей степени сложности.

Главная страница НМИЦХ им. А.В. Вишневского

Особенности

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

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

1. После этого идет обращение директора центра, которое, по сути, является рассказом о возможностях центра:

Блок идет в сочетании с новостями:

1. А вот так выглядит весь блок, который появляется при переключении стрелочкой вместо обращения директора и новостного блока:

1. Далее идет блок, который можно смело назвать «продающим»:

1. В футере сайта дублируется шапка. Здесь есть интересная возможность: при нажатии на кнопку вы переходите к заполнению анкеты для оценки работы НМИЦ хирургии имени А.В. Вишневского в цифрах.

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

Персона

Салон красоты в Москве.

Главная страница системы салона красоты «Персона»

Особенности

1. Первый же экран сайта обещает преференции для новых клиентов:

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

1. Далее идет информационный блок с разными предложениями:

1. Следующий блок закономерно посвящен ценам и услугам парикмахерского сервиса:

1. При нажатии на кнопку появляется всплывающее окно. Остается только ввести свой телефон и получить скидку:

1. Следующий блок – всегда желанные «Акции»:

1. Ниже салон красоты рассказывает о своих преимуществах:

1. Далее следует фотогалерея работ:

1. Заканчивается страница стандартно: интерактивной «Яндекс.Картой» и информацией о контактных данных.
2. В футере дублируются кнопки соцсетей. И самое главное – здесь есть ссылка на политику конфиденциальности.

Красивая главная страница – вроде бы, это естественно для салона красоты, но далеко не все подобные компании так оформляют свои ресурсы. А свой канал в YouTube и забота о персональных данных клиентов дают дополнительный плюс в карму «Персоны».

Государственная Третьяковская галерея

Главный музей национального искусства России.

Главная страница Государственной Третьяковской галереи

Особенности

1. Один из экранов сайта напоминает о недавно состоявшемся ЧМ по футболу – с мая по сентябрь идет тематическая выставка:

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

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

1. Важнейший блок на главной странице галереи – конечно же, «Выставки»:

1. Ниже – интереснейший блок «Коллекция». Смотрите, что будет при наведении на слово курсора мыши:

1. Далее следуют «События и анонсы»:

1. Дальше – еще интереснее. Блок «Программы» – о том, чем могут заниматься посетители Третьяковской галереи, помимо простого созерцания картин:

1. Завершает страницу новостной блок Третьяковки:

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

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

Альпина Паблишер

Интернет-магазин книг от одноименного издательства.

Главная страница издательства «Альпина Паблишер»

Особенности

1. Первый экран привлекает внимание к одному своему разделу:

В каталоге книги разделены на 11 категорий и приводится информация о доставке, оплате, скидках и т. д.

1. Следующий блок – радость для глаз – обложки книг-новинок:

1. Следом идут персональные рекомендации книг:

1. Обязательная информация о бестселлерах на подобных сайтах:

1. Далее – «Альпина.Медиа». Самые свежие записи из блога книжного издательства:

1. После этого дет блок с новыми решениями «Альпины» – книжками pocket-формата:

1. Ниже еще одна находка издательства – блок «Книга недели»

1. Не забыли и про подборки книг:

Дальше идут два раздела, которые можно объединить словом «Счастье».

1. «Книга в подарок»:

1. Отзывы на книги – важная часть главной страницы издательства:

1. На десерт:

1. На главной странице есть панель расшаривания в социальных сетях:

1. Далее – обязательная информация доставке и оплате + описание преимуществ работы с «Альпиной»:

1. В футере дублируется основная информация сайта, приводятся ссылки на страницу магазина в «Яндекс.Маркете» и адреса групп издательства в соцсетях:

1. Также здесь есть интересная кнопка «Письмо издательству». При нажатии на нее появляется такое окошко:

Идеально собранная главная страница. Каждая ее часть не шепчет, а нежно кричит «Купи книгу – эту, эту и вот эту. У меня для тебя и скидки есть, и доставка удобная, и оплата. Купи!». Браво, «Альпина»!

Встречают по главной странице, по ней могут и проводить

Тот случай, когда выводы несложно сделать самим.

1. Меню сайта:

1. Текст на главной странице:

1. Положительный момент с конкурентными преимуществами:

Финальный блок главной страницы:

• реквизиты интернет магазина + категории товаров + информация по учетной записи + «информация». А в боковом меню тоже «Информация», но другая:

• «Мои купоны» выходят за рамку – тут уже к верстке вопрос;
• к мобильной версии сайта не переходите – я предупреждал;
• самое интересное здесь – информер открытой статистики «Яндекс.Метрики», который красноречиво говорит о сайте:

Вы заметили, что в футере стоит 2013 год? Сам сайт по данным WHOIS создан в конце 2012 года, но как сказала моя жена: «как будто в старые советские времена сделали сайт, а потом его забросили».

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

Хотите сайт с продающими текстами? Закажите его разработку в нашей компании! Подробнее
Продвинем ваш бизнес

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров