Дизайн и вёрстка многостраничного сайта

Задача

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

Результат

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

Улучшили удобство и дизайн личного кабинета, модальных окон, таблицы серверов.

Отзыв клиента

Очень понравилось сотрудничать с Даниилом Пстновым. Работа была сделана качественно, с индивидуальным подходом и самое главное — в срок. Чёткого технического задания не было, но Даниил понял задачу и предложил свои вариант, который нас устроил. Будем сотрудничать и дальше.

Заказчик — Павел Соболев.

Дизайн

Список выполненной работы

  1. Брифинг
  2. Анализ конкурентов
  3. Прототипирование
  4. Дизайн
  5. Вёрстка
  6. Программирование дополнительных функций
  7. Монтаж видео
  8. Отрисовка баннера

Посмотреть сайт

https://dev-postnov.ru/works/vpngame/

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

Задача

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

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

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

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

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

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

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

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

Разработка 29 страниц для Свердловского технопарка 10
Фильтры
Разработка 29 страниц для Свердловского технопарка 11
Шапка страниц
Разработка 29 страниц для Свердловского технопарка 12
Плитка новостей
Разработка 29 страниц для Свердловского технопарка 13
Упоминания работников

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

Страницы

Верстка сайта для секс-шопа «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 видов расчёта стоимости в зависимости от параметров

Отзыв

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

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

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

Cтраницы

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

Задача

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

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

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

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

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

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