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

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

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

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

Источник: http://mmz-vpered.ru/

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

Особенности

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

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

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

Штучка

Источник: https://b1ser.ru/

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

Особенности

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

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

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

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

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

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

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

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

Пелси

Источник: http://www.pelsi.ru/

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

Особенности

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

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

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

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

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

Источник: http://ваша-мастерская .рф/

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

Особенности

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

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

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

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

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

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

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

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

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

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

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

Источник: http://mika-design.ru/

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

Особенности

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

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

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

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

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

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

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

ДДТ

Источник: http://www.ddt.ru/

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

Особенности

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

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

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

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

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

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

Texterra

Источник: /

Агентство интернет-маркетинга.

Особенности

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

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

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

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

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

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

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

Источник: http://baza-astrakhan.ru/

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

Особенности

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

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

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

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

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

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

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

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

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

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

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

Источник: https://www.iqpech.ru/

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

Особенности

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

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

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

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

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

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

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

Источник: http://hotel-moscowholiday.ru/

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

Особенности

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

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

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

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

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

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

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

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

Источник: https://www.dellin.ru/

Транспортная компания.

Особенности

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

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

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

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

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

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

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

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

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

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

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

Источник: http://www.russkonditer.ru/

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

Особенности

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

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

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

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

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

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

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

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

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

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

Holiday Kids

Источник: https://holiday-kids.ru/

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

Особенности

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

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

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

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

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

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

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

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

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

9. Или же:

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

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

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

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

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

Москафе

Источник: http://mos.cafe/

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

Особенности

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

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

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

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

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

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

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

Викиум

Источник: https://wikium.ru/

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

Особенности

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

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

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

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

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

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

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

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

Из рук в руки

Источник: https://irr.ru/

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

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

Особенности

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

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

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

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

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

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

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

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

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

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

Источник: http://www.vishnevskogo.ru/

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

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

Особенности

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

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

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

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

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

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

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

Персона

Источник: http://persona-mayakovskaya.ru/

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

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

Особенности

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

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

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

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

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

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

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

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

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

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

Источник: https://www.tretyakovgallery.ru/

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

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

Особенности

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

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

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

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

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

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

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

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

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

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

Источник: https://www.alpinabook.ru/

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

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

Особенности

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

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

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

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

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

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

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

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

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

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

9. «Скидки дня»:

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

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

12. На десерт:

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

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

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

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

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

Перед вами интернет-магазин обуви:

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

1. Шапка сайта:

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

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

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

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

Что тут:

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

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

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