Разработка 29 страниц для Свердловского технопарка

Задача

Задача пришла от руководителя отдела разработки веб-студии «Рекламный знак».

Задача: в короткий срок разработать 29 страниц страниц сайта.

Для сравнения, нормальный срок на такой объем — месяц, а мне нужно было уложиться в 14 календарных дней.

Ко мне обратились как с специалисту, который успеет в срок, а работа не потеряет в качестве.

Оценка проекта

Я знал, что смогу выполнить эту работу в срок и эту уверенность я взял не с потолка.

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

Вот некоторые из них:

Разработка 29 страниц для Свердловского технопарка 1
Фильтры
Разработка 29 страниц для Свердловского технопарка 2
Шапка страниц
Разработка 29 страниц для Свердловского технопарка 3
Плитка новостей
Разработка 29 страниц для Свердловского технопарка 4
Упоминания работников

Объем был не как 29 сайтов, он был в разы меньше, поэтому я взялся и уложился в срок.

Страницы

Дизайн и верстка формы для опроса Shapdesk

Компания проводит опрос после покупки стола. В текущем варианте опрос есть только в гугл-формах. Изменить дизайн кардинально, в соответствии с фирменным стилем не получится.

Сделал дизайн и верстку формы.

Первый вариант дизайна

Дизайн и верстка формы для опроса Shapdesk 5
Слева форма, справа состояние в случае ошибки

Правки клиента по первой версии

  1. Неявно выделены обязательные поля
  2. Поля выглядят несобранно

Исправляю во второй версии

Вторая версия дизайна

Дизайн и верстка формы для опроса Shapdesk 6
Вторая версия дизайна

Во второй версии были исправлены проблемы первой:

  1. За счет фона поля стали собраннее
  2. Обязательное поле выделено явно подписью

Также сделал блокировку кнопки, если поля не заполнены

Дизайн и верстка формы для опроса Shapdesk 7
Состояние кнопки

Верстка

Ссылка на страницу: https://dev-postnov.ru/works/review-form/

Вместо объяснения и рассказа, покажу вам демо верстки. Дизайн местами не соответствует изначальному, так как верстку еще не шлифовали.

На видео показан

Демо верстки

Верстка сайта для секс-шопа «Eros»

Задача

Разработать сайт по готовому дизайн-макету.

Страницы

  1. Главная
  2. Каталог
  3. Категория
  4. Страница товара

Проверка при заказе товара

Не буду вставлять участки кода, вам это будет вряд ли интересно.

Ближе к делу

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

Проверка при заказе товара 1

Изначально, у меня была проверка на выбранный цвет и размер. Без этого нельзя было купить товар. При нажатии на купить без выбранного размера или цвета, показывалось сообщение «Выберите цвет или размер».

Товары разные, в некоторых были только цвета, в других были только размеры. Формулировка «Выберите цвет или размер» не очень-то подходила.

На тот момент я сделал так, потому что были задачи важнее, я запомнил недочет и собирался вернуться и все поправить.

Уведомление об отсутствии товара на складе.

От заказчика поступила задача, при увеличении количества товара, если такого количества нет, показывать пользователю уведомление об этом.

Проверка при заказе товара 2
Поле для ввода количества

Мои коллеги вывели для меня на странице оставшееся количество товара, которое я смог использовать и показывать уведомление.

Проверка при заказе товара 3
Показ уведомления при отсутствии товара на складе

Проверка на цвет и размер

Первая задача решена. Но осталось недоработка с подсказками для цвета и размера.

Дело в том, что помимо подсказки отдельно про цвет и размер, нужно было запретить пользователю выбирать количество, если не выбран цвет или размер. Иначе как я буду проверять остаток на складе?

Проверка при заказе товара 4
Сделал блок с количество полупрозначным и неактивным

Итак, я отключил возможность увеличивать или уменьшать количество товара. Вместо этого я подсказываю пользователю, что ему нужно делать, чтобы выбрать количество и купить товар.

Цвет не выбран, нажали на количество или кнопку «Купить» — уведомление «Выберите цвет».

Проверка при заказе товара 5

Цвет выбран, нажали на количество или кнопку «Купить» — уведомление «Выберите размер».

Проверка при заказе товара 6

Иногда запросы в базу данные на размер бывают долгими, и цвета не появляются по 5 секунд. Что пользователь подумает об этом? — «Сайт не работает». Не порядок.

Я сделал еще одну проверку и если размеры еще не загрузились, показываю уведомление о том, что размеры загружаются, подождите немного.

Супер! Теперь пользователь будет знать что сайт работает, а сайт ищет в базе данных размеры по этому цвету.

Проверка при заказе товара 7

Если же все поля были выбраны верно, то есть и цвет и размер — товар успешно попадает в корзину.

Проверка при заказе товара 8

Вёрстка для компании «Твой мир»

Задача

Разработать страницу каталога и детальную товара для онлайн-магазина. Кроме вёрстки необходимо запрограммировать калькуляцию в детальной и интерактивность в списке товаров.

Демонстрация работы

Демонстрация работы страницы
Демонстрация работы страницы

Адреса страниц для просмотра

  1. Каталог
  2. Страница товара, 1 способ расчета
  3. Страница товара, 2 способ расчета
  4. Страница товара, 3 способ расчета
  5. Страница товара, 4 способ расчета
  6. Страница товара, 5 способ расчета

Результат

За 6 дней была сверстана страница каталога с мобильной версией и интерактивностью: смена вида, фильтр по цене, цвету, дополнитлеьные вкладки.

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

Отзыв

Вёрстка для компании "Твой мир" 8
Скриншот отзыва из социальной сети ВКонтакте

Ссылка на страницу клиента: https://vk.com/shambal

Верстка трех страниц для компании InRed

Cтраницы

  1. Главная
  2. Блог
  3. Страница записи

Задача

Разработать 3 страницы для проекта InRed по готовому дизайн-макету. Страницы должны также корректно отображаться на ноутбуках, планшетах и мобильных.

Это был первый проект в сотрудничестве с студией «Рекламный знак».

Разработка была закончена за 7 дней.
Мы определили техническое задание, я задал уточняющие вопросы по всем непонятным для меня вопросам и мы начали разработку.

Интересно реализована прокрутка таблицы. Мы помещаем только несколько столбцов в видимую область, остальное скрываем и делаем блок прокручиваемым по горизонтали.

Кнопка с стрелкой выступает в роли намека, что можно прокручивать и в роли кнопки, после нажатии на нее блок прокручивает право.

Демонстрация прокрутки таблица