Задача пришла от руководителя отдела разработки веб-студии«Рекламный знак».
Задача: в короткий срок разработать 29 страниц страниц сайта.
Для сравнения, нормальный срок на такой объем — месяц, а мне нужно было уложиться в 14 календарных дней.
Ко мне обратились как с специалисту, который успеет в срок, а работа не потеряет в качестве.
Оценка проекта
Я знал, что смогу выполнить эту работу в срок и эту уверенность я взял не с потолка.
На этапе оценки я просмотрел все 29 макетов, изучил закономерности и понял, что большая часть блоков имеет общие стили и по сути одинаковые. Нужно лишь создать готовые блоки и собирать сразу целые страницы, как из кирпичиков лего.
Вот некоторые из них:
ФильтрыШапка страницПлитка новостейУпоминания работников
Объем был не как 29 сайтов, он был в разы меньше, поэтому я взялся и уложился в срок.
Компания проводит опрос после покупки стола. В текущем варианте опрос есть только в гугл-формах. Изменить дизайн кардинально, в соответствии с фирменным стилем не получится.
Сделал дизайн и верстку формы.
Первый вариант дизайна
Слева форма, справа состояние в случае ошибки
Правки клиента по первой версии
Неявно выделены обязательные поля
Поля выглядят несобранно
Исправляю во второй версии
Вторая версия дизайна
Вторая версия дизайна
Во второй версии были исправлены проблемы первой:
За счет фона поля стали собраннее
Обязательное поле выделено явно подписью
Также сделал блокировку кнопки, если поля не заполнены
Не буду вставлять участки кода, вам это будет вряд ли интересно.
Ближе к делу
В детальной карточке товара, в некоторых товарах присутствует возможность выбрать цвет и размер товара. Размеры появляются только тогда, когда выбран цвет, они подбираются из базы данных в зависимости от цвета.
Изначально, у меня была проверка на выбранный цвет и размер. Без этого нельзя было купить товар. При нажатии на купить без выбранного размера или цвета, показывалось сообщение«Выберите цвет или размер».
Товары разные, в некоторых были только цвета, в других были только размеры. Формулировка«Выберите цвет или размер» не очень-то подходила.
На тот момент я сделал так, потому что были задачи важнее, я запомнил недочет и собирался вернуться и все поправить.
Уведомление об отсутствии товара на складе.
От заказчика поступила задача, при увеличении количества товара, если такого количества нет, показывать пользователю уведомление об этом.
Поле для ввода количества
Мои коллеги вывели для меня на странице оставшееся количество товара, которое я смог использовать и показывать уведомление.
Показ уведомления при отсутствии товара на складе
Проверка на цвет и размер
Первая задача решена. Но осталось недоработка с подсказками для цвета и размера.
Дело в том, что помимо подсказки отдельно про цвет и размер, нужно было запретить пользователю выбирать количество, если не выбран цвет или размер. Иначе как я буду проверять остаток на складе?
Сделал блок с количество полупрозначным и неактивным
Итак, я отключил возможность увеличивать или уменьшать количество товара. Вместо этого я подсказываю пользователю, что ему нужно делать, чтобы выбрать количество и купить товар.
Цвет не выбран, нажали на количество или кнопку«Купить» — уведомление«Выберите цвет».
Цвет выбран, нажали на количество или кнопку«Купить» — уведомление«Выберите размер».
Иногда запросы в базу данные на размер бывают долгими, и цвета не появляются по 5 секунд. Что пользователь подумает об этом? — «Сайт не работает». Не порядок.
Я сделал еще одну проверку и если размеры еще не загрузились, показываю уведомление о том, что размеры загружаются, подождите немного.
Супер! Теперь пользователь будет знать что сайт работает, а сайт ищет в базе данных размеры по этому цвету.
Если же все поля были выбраны верно, то есть и цвет и размер — товар успешно попадает в корзину.
Разработать страницу каталога и детальную товара для онлайн-магазина. Кроме вёрстки необходимо запрограммировать калькуляцию в детальной и интерактивность в списке товаров.
Демонстрация работы
Демонстрация работы страницыДемонстрация работы страницы
За 6 дней была сверстана страница каталога с мобильной версией и интерактивностью: смена вида, фильтр по цене, цвету, дополнитлеьные вкладки.
Также была сверстана детальная страница, для которой кроме вёрстки был запрограммирован калькулятор для 5 видов расчёта стоимости в зависимости от параметров
Разработать 3 страницы для проекта InRed по готовому дизайн-макету. Страницы должны также корректно отображаться на ноутбуках, планшетах и мобильных.
Это был первый проект в сотрудничестве с студией«Рекламный знак».
Разработка была закончена за 7 дней. Мы определили техническое задание, я задал уточняющие вопросы по всем непонятным для меня вопросам и мы начали разработку.
Интересно реализована прокрутка таблицы. Мы помещаем только несколько столбцов в видимую область, остальное скрываем и делаем блок прокручиваемым по горизонтали.
Кнопка с стрелкой выступает в роли намека, что можно прокручивать и в роли кнопки, после нажатии на нее блок прокручивает право.
