Вдохновившись Тёмой Лебедевым, расскажу о процессе создания сайта от требований заказчика до финального варианта.
К сожалению, первоначальное ТЗ у меня не сохранились. Но суть была в следующем: на главной странице кликабельная схема этажей с логотипами. У каждой мебельной компании должна быть индивидуальная страница с возможностями редактировать и добавлять товары. Но сайт не должен быть интернет-магазином.
Самое сложное в создании этого сайта — сделать интерактивную схему этажей. Эта работа для меня стала настоящим вызовом.
Первоначальным вариант был примерно таким. Очень топорным наброском с большой схемой для каждого этажа. Этажи переключались стрелками влево-вправо.
Клиента такая концепция не устраивает. Нужны схемы меньшего размера, но с увеличением логотипов при наведении. Логотипы компаний требовалось приравнять к одному размеру. Логотип в шапке нужно сделать больше. Саму схему сделать более похожей на схему, а именно, добавить подпись «вход» и лестницу. Фоны у некоторых компаний тоже не нравится, так как они слишком выделяют конкретные компании, без них будет лучше.
Представляю заказчику полностью переделанный вариант с учётом всех правок.
Уже лучше. Но клиенту не нравится фон, нужно вернуться к однотонному. Подпись «мебельный центр» слишком большая.
Получаю правки по новому дизайну сайта от клиента. Необходимо добавить меню и убрать лишнее пространство. Анимацию увеличения логотипов компаний решено сделать менее плавную, но зато более быструю.
После добавления меню всё выглядит примерно так:
Фон слишком тёмный. Сайт выглядит слишком старым, нужно освежить. Схемы вылезают и выглядят очень плохо.
Перерисовал вновь схемы, чтобы всё было прилизано. Мне подсказывают, что градиенты новый тренд сезона. Надо пробовать. Действительно, сайт выглядит гораздо современнее:
Но страницы компаний были просто никакие.
Почитал ещё тренды в веб-дизайне. Пробую размытые фотографии в фоне и прозрачные кнопки в меню.
Главная выглядит уже намного лучше первоначальных вариантов, но вот страницы компаний отстают.
Выглядит странно. Ставлю белую подложку.
Клиент хочет прозрачную подложку на страницах, но из-за логотипов компаний так делать было нельзя. Иначе получилось бы такое:
Клиенту не нравится размытый фон. Возвращаюсь к первоначальным вариантам.
Фон слишком резкий получился. Делаю его менее заметным.
Схемы всё ещё не похожи на схемы. Тень лучше убрать. Полностью переделываю схемы, добавляю стены.
Клиенту не нравится обводка и идея добавить стены. Убираю стены. Два этажа слишком много для одного экрана, ради оптимизации под маленькие экраны компьютеров возвращаюсь к варианту со слайдером для этажей.
Добавляем подложку. Выделяем кнопки листания.
Для удобства пользователей добавляю переключатель между этажами.
Клиент настаивает на фирменном градиенте в шапке. Раз надо — сделаю.
Дорабатываю страницы компаний и раздел с товарами.
Было:
Стало:
Проверяю альтернативные варианты для сайта:
Но всё-таки остаёмся на прошлом варианте. Сайт готов.
Дополнительно по желанию клиента добавил новогодних украшений. Снег хотел убрать, но по требования всё-таки пришлось оставить.
Пощупать сайт и проверить анимацию можете по ссылке bayconurmebel.ru