Процесс создания сайта для мебельного центра «Байконур»

bay

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

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

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

Первоначальным вариант был примерно таким. Очень топорным наброском с большой схемой для каждого этажа. Этажи переключались стрелками влево-вправо.

вариант 1

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

Представляю заказчику полностью переделанный вариант с учётом всех правок.

вариант 2

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

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

 Диалоги

После добавления меню всё выглядит примерно так:

Меню

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

Перерисовал вновь схемы, чтобы всё было прилизано. Мне подсказывают, что градиенты новый тренд сезона. Надо пробовать. Действительно, сайт выглядит гораздо современнее:

Новый тренд

Но страницы компаний были просто никакие.

ChJgdOdU8hw

Почитал ещё тренды в веб-дизайне. Пробую размытые фотографии в фоне и прозрачные кнопки в меню.

Размытые фотографии

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

Страницы компаний отстают

Выглядит странно. Ставлю белую подложку.

tNm1iCFWQcc

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

Клиент хочет прозрачную подложку на страницах,

Клиенту не нравится размытый фон. Возвращаюсь к первоначальным вариантам.

e0GnR_vYdzA

Фон слишком резкий получился. Делаю его менее заметным.

Фон слишком резкий получился

Схемы всё ещё не похожи на схемы. Тень лучше убрать. Полностью переделываю схемы, добавляю стены.

xO9Sf_oNvnM

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

Убираю стены

Добавляем подложку. Выделяем кнопки листания.

Добавляем подложку

Для удобства пользователей добавляю переключатель между этажами.

Переключатель

Клиент настаивает на фирменном градиенте в шапке. Раз надо — сделаю.

Клиент настаивает на фирменном градиенте в шапке

Дорабатываю страницы компаний и раздел с товарами.

Было:

QRVknU0-hJo

Стало:

Стало

Проверяю альтернативные варианты для сайта:

Проверяю альтернативные варианты

Но всё-таки остаёмся на прошлом варианте. Сайт готов.

Дополнительно по желанию клиента добавил новогодних украшений. Снег хотел убрать, но по требования всё-таки пришлось оставить.

Мебельный центр «Байконур» Все стили и направления мягкой и корпусной мебели

Пощупать сайт и проверить анимацию можете по ссылке bayconurmebel.ru