Примеры дизайна главной страницы сайта
Мы видим главную страницу сайта в результатах поиска и когда вбиваем его адрес в строку браузера. Если она своим заинтересует нас своим содержимым, навигацией, дизайном и версткой, возможно, мы задержимся и посмотрим другие страницы. Если же нет – пойдем гулять дальше по просторам интернета.
В статье собраны примеры 15 главных страниц с разной тематикой. Решайте сами – хороши они или не очень.
Московский машиностроительный завод «ВПЕРЕД»
Завод-производитель рулевых винтов и лопастей к ним для вертолетов семейства «Ми».
Главная страница Московского машиностроительного завода «ВПЕРЕД»
Особенности
- При нажатии кнопки «Меню» в правом верхнем углу показывается подробное меню и дублируется футер:
Полное меню сайта «ВПЕРЕД»
2. Сайт имеет две версии – русскую и английскую. Переключение происходит автоматически после нажатия на соответствующий флажок.
3. Сразу указывается направление деятельности и дается оформленная в виде кнопки ссылка на каталог продукции, страницу с описанием сервиса, а также на текст о компании.
4. Для каждой модели вертолета указываются варианты изготовления рулевого винта и лопастей со ссылкой на соответствующие страницы каталога:
Конфигурации рулевого винта и лопастей для «МИ-17» наглядно
5. В кратком виде приводятся тексты о производстве и сервисном обслуживании (последний раздел является сквозным для всего сайта). Оба текста можно прочитать, нажав кнопку «Подробнее».
6. Внизу приведен краткий список партнеров, который также можно посмотреть в расширенном виде.
7. В футере продублированы все пункты меню, приведен график работы и контактные данные.
Да, тексты на главной странице написаны «дежурным» языком, их так и тянет переписать. Но в целом впечатление от знакомства с главной страницей складывается положительное и хочется прочитать про все эти винты и лопасти.
Штучка
Интернет-магазин товаров для рукоделия.
Главная страница интернет-магазина «Штучка»
Особенности
- Первый экран главной странице представляет собой рабочий стол специалиста, занятого рукоделием – сразу же понимаешь, куда ты попал и куда можешь перейти – в каталог.
- Почти сразу же появляется всплывающее окно:
Приятно, конечно, но мы только смотрим. По крайне мере, пока
3. Отдельный блок отведен под акцию с бесплатной доставкой:
У нас чуть больше недели, чтобы воспользоваться акцией
4. Каталог также представлен более подробно – в виде плиточек с категориями товаров.
5. Текстовый блок отведен под короткое описание магазина, схему работы конкурентные преимущества.
6. Затем новостной блок, который не часто обновляется (можно подписаться на рассылку RSS). Последняя запись сделана в День Победы:
Новости и акции появляются не так часто, как хотелось бы\
7. Прямо на главной странице приводится блок с отзывами, которые можно вручную полистать:
Жаль, что нет ни фотографий, ни ссылок на профили отозвавшихся
8. Далее интерактивная карта и подробный список контактных данных:
Позвонить, написать, проконсультироваться – без проблем!
9. Есть подписка на рассылку, за которую дают 3% скидок:
3% – небольшая скидка, но она обеспечивает лучшую конверсию подписки
10. Далее следует блок-портфолио с работами участниц. При открытии любое изображение можно прокомментировать:
Комментарий к работе – хорошо. То, что работы не подписаны – плохо
11. В самом конце расположена панель ссылок на страницы интернет-магазина в соцсетях.
12. В футере представлены открытые счетчики статистики сайта.
Главная страница хорошо проработана и дает такой объем информации, что как минимум хочется «походить» по остальным страницам сайта. Хоть ты – брутальный мужик, а не рукодельница :).
Пелси
Предприятие-производитель детских деревянных игрушек и наборов для творчества детей.
Главная страница компании «Пелси»
Особенности
- В глаза бросается «детское» оформление страницы – сразу настраивает на позитивный лад.
- Надпись «Новинки» похожа на кнопку, которую хочется нажать, но это всего лишь заголовок для слайдера ниже:
Названия тут просто необходимы – сейчас это все «деревянные домики»
3. Названия конструкторов не подписаны – их можно узнать, если щелкнуть по конкретной «плитке» – тогда будет переход в карточку товара с описанием конструктора.
4. Новостной блок не обозначен как таковой, а просто показан плитками, с обрывочными анонсами:
Такие интересные новости надо показывать крупнее – это же интересно!
5. Наконец, блок с категориями товаров из каталога. Оформление классное:
Лучше помещать этот блок сразу под «Новинками»
6. Страница заканчивается красивой пейзажной зарисовкой:
Загляденье…
При всей красивой графической составляющей главной странице недостает текстового контента – как минимум короткого текста об интернет-магазине. К сожалению, счетчик Live Internet в футере с запредельной посещаемостью – всего лишь картинка. Щелкните на нем правой кнопкой мыши и проверьте сами.
Столярная мастерская
Источник: http://ваша-мастерская .рф/
Индивидуальное изготовление мебели и предметов интерьера.
Главная страница «Столярной мастерской»
Особенности
- Сайт – одностраничник. Весь первый экран – текст на красивом фоне (представление и короткое описание общими фразами) + призыв к действию в кнопке:
Записаться на консультацию всегда успеем, пока листаем дальше
2. Сразу же после него блок с новыми работами. При наведении на любую работу появляется ссылка «Подробнее». При нажатии испытываешь огорчение:
Нет вообще ничего, а не только подробностей
3. После следует единая форма подписки на консультацию – неважно, есть ли у вас дизайн-проект или нет.
4. Следующий блок – информация о мастерской:
Такое чувство, что текст написан, лишь бы был
5. После этого начинается та часть страницы, где рассказывается про услуги компании и особенности ее работы.
- в блоке «Мы предлагаем» описаны названия услуг и их короткое описание:
Жаль нельзя щелкнуть на услугу и узнать о ней подробнее
- в блоке «Что мы используем в работе» описаны материалы и возможность делать из них нетривиальные изделия. Для наглядности текст иллюстрирован:
Если вы не разбираетесь в древесине, иллюстрации вам мало о чем не скажут
- далее блок с конкурентными преимуществами, из которых лично меня зацепили возможность сделать то, чего нет ни в одном магазине и посмотреть на весь процесс производства;
- в блоке «Нам под силу» компания делится своими возможностями:
Сейчас все это воспринимается как базовый набор того, что получит клиент
- наконец, портфолио работ с не самыми качественными изображениями, опять же нет подписей к работам, когда их начинаешь смотреть:
Это пример из категории «Мебель и предметы интерьера» - непонятно, на чем здесь сделан акцент
6. Сразу вызывает интерес блок «История нашего клиента», но он подан не в форме от первого лица, а как очень короткий рассказ компании о своих заказчиках:
Меньше от себя, больше – от клиента!
7. Завершается главная страница стандартной формой обратной связи «Остались вопросы?» и интерактивной картой с адресом офиса продаж.
Тот случай, когда дизайн и верстка на порядок лучше текстового оформления. Даже с текущими ограничениями на размер текстовых полей и с учетом классной тематики сайта можно доработать тексты и сделать сайт таким же красивым, как производимые изделия.
Студия Михайловых
Дизайн интерьеров под ключ.
Главная страница Студии Михайловых
Особенности
- Первый экран сделан по схеме «Сфера деятельности + короткое описание + кнопка с призывом к действию»:
Заманчивое предложение с предложением рассчитать стоимость
2. Далее блок, который более подробно описывает преимущества от работы с фирмой. Странно, что очевидная кнопка «Заказать» – всего лишь элемент рисунка – так и хочется на нее нажать:
Как ни пытайтесь, кнопку вам не нажать!
3. Следующий блок, обращающий на себя внимание – схема работы – тут все проиллюстрировано и подробно описано:
Все последовательно – с описанием и ценами – как и должно быть в схеме сотрудничества
4. Логически верно идущий блок «Есть вопросы?» с рекомендацией перехода в FAQ:
Проверьте: в этом разделе много полезной информации для клиентов
5. Портфолио работ с кратким описанием каждой при наведении курсора (при щелчке откроется окно с подробным описанием работы) и возможность посмотреть все проекты:
Сразу понятно, что собой иллюстрирует изображение, если навести мышь
6. Далее текстово-графический блок о деятельности фирмы – коммерческие интерьеры домов в Сочи.
7. Завершает страницу калькулятор расчета стоимости:
Рассчитайте стоимость вашего проекта
- В футере сайта подробно расписаны все услуги, цены на проекты и теория (тематические статьи).
Приятный сайт, который особо остро интересует, когда готовишься к ремонту и присматриваешь идеи для интерьера. Информации достаточно для того, чтобы вызвать интерес у будущего заказчика дизайна интерьера.
ДДТ
Источник: http://www.ddt.ru/
Рок-группа под бессменным руководством Юрия Юлиановича Шевчука.
Главная страница рок-группы «ДДТ»
Особенности
- Когда открываешь сайт, теряешься – кажется, что просто открыл картинку в новом окне. Все, что надо – начать скроллить вниз:
Текущий состав группы «ДДТ»
2. Если листать дальше, будет список, где в топе показываются знаковые и пока не отыгранные концерты:
Рок за бобров!
3. Затем поклонники и посетители могут посмотреть и купить концертные CD группы:
Купить диск на концерте – бесценно
4. Непременный блок для такого типа сайтов – состав группы:
Жаль, что нельзя щелкнуть по человеку и подробно про него прочитать
+ команда поддержки и контактные данные:
Все очень серьезно
5. Завершается страница ссылками на соцсети и магазин атрибутики:
Подписывайся, покупай вещи с символикой «ДДТ»
Страница похожа на единую ленту гастролей, событий и новостей «ДДТ». Раньше это был черный фон и белые буквы – с главной я всегда уходил в легендарный «ЧаДДТ». Новый дизайн на порядок современнее и уж точно лучше, чем у большинства коллег по цеху.
Не забрасывайте свои сайты, следите за их «лицом» – главными страницами, периодически делайте контентно-графический макияж. И люди к вам потянутся!
Успехов в Диджитал Пространстве!
