В данной статье я и мой знакомый будем переделывать сайт после профессиональной Web-студии

Оригинальный Web-сайт компании “Паркет Тут”

<Компания “Паркет Тут” занимается продажей, укладкой и обслуживанием напольных покрытий. Сайт для них разработала Web-студия Soft Media Group. Выполнен он на основе CMS Joomla.

В целом оригинальный Web-дизайн имеет такой внешний вид:

Среди особенностей исполнители указали:

• срок разработки 15 дней;
• премиальный дизайн;
• современный слайдер.

Если слайдер и выглядит современно (впрочем реализован скорее всего модулем для CMS Joomla), то дизайн вообще никак не “премиальный” и выглядит старомодно, блекло и непривлекательно. Никогда не думал, что фрилансер со статусом “Про” такое может сотворить.

Структура шаблона сайта непродумана:

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

Давайте попробуем исправить это всё ;)

Улучшаем Web-дизайн сайта

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

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

Также необходимо улучшить удобство использовния сайта посетителями (юзабилити). Для этого сделаем следующее:

• четко выделим форму поиска, кнопку авторизации и корзину покупателя;
• сделаем меню более аккуратными и компактными, что облегчит их дальнейшее расширение;
• добавим “хлебные крошки”, которые помогут посетителю ответить на вопросы “Где я сейчас? Откуда я пришел?”;
• полностью переделаем страницы каталога, сделав их более информативными для пользователя;
• добавим нижнее меню, дублирующее верхнее. Посетителям не надо будет прокручивать страницу в самый верх, чтобы воспользоваться основным меню;
• добавим на сайт больше описаний и иллюстраций, чтобы покупатель не чувствовал себя Незнайкой.
• добавим социальные кнопки. Социальные сети в качестве рекламного пространства сейчас однозначно рулят!

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

Редизайн

Главная страница до:

После:

Каталог производителей:

Мой вариант:

Каталог товаров до:

При отображении продукции одной колонкой тратится зря слишком много. Я решил проработать несколько вариантов:

– отображение максимального количества позиций:

– отображение меньшего числа позиций, но с детальным описанием:

В первом случае количество отображаемых позиций возросло в 4 раза по сравнению с исходным вариантом, а во втором – в 2 раза.

Страница описания товара до:

После:

В ближайшее время Олег будет переводить дизайн в шаблон для Joomla.

С уважением, Pasha4ur