загрузка

Дизайн и верстка сайта GERMANHAUS

Что делали
Разработали структуру, нарисовали дизайн-макет, сверстали и интегрировали сайт с Wordpress, Woocommerce и PayPal
Город заказчика
Ванкувер (Канада)

О задаче

1
Заказчик пришел с задачей переделать текущий сайт так, чтобы:
1) им было легко и просто управлять
2) продавал все бренды, дистрибьютерами которыми является заказчик
3) рассказывал о шоуруме и показать мебель каких брендов в нем находится
4) была возможность создать закрытый календарь занятости переговорных комнат с возможностью забронировать свободное время
5) привлекал дизайнеров интерьера к партнерству
6) посетители могли оплачивать заказы на сайте
7) мобильная версия сайта была детально проработана

Как решили задачу

2
Решили использовать Wordpress поскольку эта платформа:
1) отлично адаптирована под иностранного пользователя и имеет большую поддержку в зарубежном комьюнити.
2) отлично адаптирована под иностранного пользователя (не нужно переводить админку сайта с русского языка на английский)
3) обладает шаблонами, которые могут адаптироваться под задачу владельца сайта
4) удобно подтягивает связанные элементы сайта (например news или awards)
5) бесплатная
6) интуитивно понятная система

Для функции интернет-магазина решили использовать плагин Woocommerce поскольку он:
1) популярен во всем мире
2) бесплатный
3) простотой в управлении — никакие специальные навыки не требуются. Интуитивно понятный
4) есть сущности: простой и вариативный товар
5) позволяет регулировать способы оплаты, доставки и налогообложения в зависимости от региона, из которого сделан заказ.
6) дает возможность настраивать скидочные программы, акции и розыгрыши.

Дизайн

3

Главная страница

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

Главная страница, основной экран

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

Главная страница, блок Our studio


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

Страница Our featured projects

Чтобы показать, что в студии кипит жизнь, мы создали страницу, на которой опубликованы последние проекты (от самых новых к старым)

Страница Dunbar Area Vancouver

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

Также добавили возможность переключаться между проектами

Страница Our awards

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

Страница Showroom

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

Страница Showroom, шапка страницы

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

Страница About showroom, информация о шоуруме

В этом блоке мы показали основную информацию о шоуруме:
1) дни и время работы
2) интерьер
3) где находится

Страница About showroom, блок meeting room

В этом блоке отображаются свободные переговорные комнаты, если комнат нет то блок не появляется

Страница For designers

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

Страница For designers, блок с календарем

С помощью календаря (чуть ниже о нем расскажем) дизайнер может выбрать и забронировать (если свободно) переговорную комнату

Страница LEICHT

Эта страница конструктор, с помощью этого шаблона описаны все бренды на сайте

Страница LEICHT, блок с описанием производителя

С помощью этого блока мы даем рассказываем краткую информацию о производителе

Страница LEICHT, блок с продукцией

В этом блоке мы рассказываем какие продукты есть у этого производителя, здесь мы выводим по 6 продуктов, а остальные прячем до нажатия на кнопку More styles

Страница LEICHT, блоки showrooms

Если бренд представлен в одном из шоурумов, то мы подтягиваем информацию об этом шоуруме

Страница Hulsta

Страница бренда Hulsta отличается от других брендов тем, что в эту страницу интегрирован интернет-магазин с помощью плагина Woocommerce

Страница Hulsta, блок интернет-магазина

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

Страница Living room

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

Страница Sentino

Здесь мы показали шаблон страницы простого товара

Страница Sentino

А на этом дизайн-макете шаблон страницы вариативного товара (товар, у которого цена зависит от выбранных опций)

Страница Book a meeting room

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

С помощью красных маркеров на мини-календаре отображены полностью занятые дни

Эта страница в основном была разработана для сотрудников Заказчика и дизайнеров
Другие страницы
Страница Our services
Страница Germanhaus
Страница Our process
Страница Спасибо за заказ
Страница Оформления заказа
Страница Корзины
Страница Контакты
Шаблон текстовой страницы
Страница новостей
С любого устройства
Мы проработали все размеры устройств от мобильных до телевизора
Команда
Николай Корниенко
руководитель проекта
Николай Николенко
веб-дизайнер
Виктор Гросс
программист
Понравился кейс?
Давайте сделаем что-то крутое вместе, для этого
просто заполните форму
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Откладывая на потом вопрос с сайтом, вы стоите на месте. А это равноценно регрессу
Made on
Tilda