Верстка сайта Videyra

Список страниц

  1. Главная
  2. Каталог
  3. Страница товара
  4. Корзина
  5. Избранное
  6. Доставка, возврат

Нюансы верстки

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

Товар

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

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

Поэтому для этого элемента я сделал один класс, который расширил модификациями: для корзины, для каталога, для избранного.

Верстка сайта Videyra 1

Демо работы интерфейса

Меню в каталоге

Переключение вида товаров

Фильтры и сортировка

Боковое меню

Демо прокрутки, прокрутка двух областей

Клиент хотел, чтобы при загрузке мы показывали, что область с фотографиями можно прокручивать. Я предложил идею после загрузки показывать пользователю, что область прокручивается. Для этого в блоке с изображениями прокрутили немного вниз и вернули в начало.

Выбор цвета и размера

Окно заказа

Процесс

Тильда

Сначала обсуждалась возможность создания сайта на Тильде.

Я оплатил платный тариф на своём аккаунте и приступил к работе. На следующий день была готова бета-версия сайта для компьютеров.

Но потом мы столкнулись с ограничениями, которые не позволяли:

  • Сделать меню как в дизайне
  • Сделать анимацию и смену слайдов, как в дизайне.
  • Анимация кнопок была очень затратной по времени — приходилось составлять кнопку из 7 элементов анимацию кнопок. Для сравнения, кнопка в собственной разработке состояла всего лишь из 3 элементов и легко преобразовывалась в кнопки с другой темой.
Верстка сайта Videyra 2
Анимированная кнопка из 7 элементов.

Александр хотел найти разработчика для проработки этих моментом и встраивания их в Тильду.

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

Разработка вне Тильды

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

Правки контента

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

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

Верстка сайта Videyra 3

Отчёт о работе

Я знал, что клиент живёт проектом, он был на связи 24/7 и волновался по поводу того, успеем ли мы в срок.

Поэтому каждый день я делал отчет о выполненной работе и планах на завтра. Скидывал ссылку для просмотра результата сегодняшней работы.

Особенности

Модульность

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

За счет чего это достигается?

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

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

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

Возьмем список товаров:

Верстка сайта Videyra 7
Товары на странице «Каталог»

И имеем тот же блок на посадочной странице

Верстка сайта Videyra 8
Товары на посадочной странице

То есть мне нужно было один раз создать блок и потом просто скопировать его.
Это ведь просто осознать, не так ли?

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

Слайдер

Слайдер — карусель изображений

Была интересная задачка. Есть 4 вкладки. В каждой вкладке есть карусель с товарами.

Было 2 проблемы:

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

Как я поступил.

Я создал несвязанные ни с одним слайдером стрелки и в коде прописал, чтобы для видимого слайдера стрелка влево переключала на один слайд назад, стрелка право — на один вперед.

Код, если интересно:

// Клик по кнопке "Назад"
$(".js-great-slider-prev").click(function() {
  // Переключаем слайдер
  $(".js-products-slider.active").slick("slickPrev")
});
// Клик по кнопке "Вперед"
$(".js-great-slider-next").click(function() {
  // Переключаем слайдер
  $(".js-products-slider.active").slick("slickNext")
});

Переполнение меню

Эта особенность связана с переполнением меню.

Смотрите. Где поместится список ссылок у блока «Контакты» при наведении?

Верстка сайта Videyra 9
Переполнение меню

Правильно. Уедет вправо и создаст полосу прокрутки сайта.

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

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

Код:

/* .nav__sublist — класс списка, который появляется при наведении */

// Jquery
$('.nav__sublist').each(function(i, item) { 
  var offset = $(item).offset().left + 
 $(item).outerWidth();

  if ($(window).width() < offset) {
    $(item).addClass('position-right');
  }
});

В итоге на любом разрешении экрана при видимости меню подменю будут автоматически перемещены для предотвращения выпадания за границы сайта.

Сделал окно браузера уже
Сделал окно браузера уже

Калькуляция товаров в корзине

По техническому заданию нужно было реализовать калькуляцию товаров.

В таблице, при изменении количества или удаления товаров считается: общая сумма, сумма товара.

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

Демо:

Калькуляция товаров в корзине

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

Задача

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

Результат

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

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

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

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

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

Старый дизайн

Верстка сайта Videyra 10
Верстка сайта Videyra 11
Верстка сайта Videyra 12
Верстка сайта Videyra 13
Верстка сайта Videyra 14
Верстка сайта Videyra 15

Новый дизайн

Верстка сайта Videyra 16

Каталог игр

Верстка сайта Videyra 17

Контакты

Верстка сайта Videyra 18

Личный кабинет

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

Верстка сайта Videyra 19

Во второй вкладке расположились реферальная и партнерские программы. В реферальной программе время от рефералов и реферальная ссылка, можно скопировать её кликнув на иконку справа от ссылки.

Верстка сайта Videyra 20

Серверы

На странице «Серверы» пользователи могут просматривать нагрузку и статус серверов, а также сортировать их по параметрам.

Верстка сайта Videyra 21

Модальные окна

Верстка сайта Videyra 22
Верстка сайта Videyra 23

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

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

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

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

Разработка сайта для компании «Национальная технолøгическая инициатива»

Обращение

Ко мне обратился директор компании Вебпрактик — Александр Букуров.

Задача

За 6 дней разработать лендинг по макету от дизайнера компании.

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

Результат

Сайт со всеми доработками утвержден и сдан клиенту 30 марта, за день до дедлайна.

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

Демо сайта

Отзыв

«Очень благодарен тебе за работу по созданию лендинга для проекта НТИ. Спасибо за вовлечённость, желание сделать качественно.

Это на самом деле не так часто на рынке фриланса, когда стараются сделать не только то, что тебе сказали по ТЗ, но и предлагают сделать что-то лучше, более качественно, более интересно.

Это очень важная твоя характеристика, развивай, масштабируй, это очень востребовано на рынке.

Конечно самое главное это сроки. Был сжатый срок под сложный проект с дедлайном под масштабные мероприятия. Нельзя было подвести заказчика. Большой объем работы в очень сжатые сроки. Ты не только уложился в срок, но и сделал на один день раньше. При этом потратил на это кроме будних дней и все свои выходные. Так что спасибо большое, это очень ценно.

Рекомендуют сотрудничество с тобой. Делаешь быстро, качественно, надежно.»

Александр Букуров

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

  1. Сборка сайта на тильде
  2. Вёрстка страницы вручную
  3. Создание анимации при прокрутке
  4. Установка админ-панели

Разработка проекта «Психосоматика»

Разработал проект с психосоматическими причинами болезней для более удобного поиска

Задизайнил, сверстал и запрограммировал 6 страниц.

Договорился с гипно-терапевтом Максимом Марковым об использовании контента на этом сайте.

Посестить сайт: psihosomatic.ru

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

Задача

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

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

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

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

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

Результат

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

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

Отзыв

Верстка сайта Videyra 29
Скриншот отзыва из социальной сети ВКонтакте

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

Верстка сайта Premium Relax

Задача

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

Оптимизация

При работе над проектом использовал новые методики оптимизации скорости, это позволило добиться высшей оценки от Google Page Speed как для мобильных, так и для компьютерной версии.

Скорость загрузки первой страницы: 1.5 секунды

Верстка сайта Videyra 30
Версия для компьютеров
Верстка сайта Videyra 31
Версия для мобильных

Сетка на странице «Девушки»

Верстка сайта Videyra 32
Сетка на странице «Девушки»

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

Верстка сайта Videyra 33
Поведение по умолчанию

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

Да, этот вариант сработает, но структура списка сломается, программисты потратили бы гораздо больше времени на форматировании этого списка с данными из админ панели.

А я уважаю своих коллег и не делаю работу для них еще сложнее.

В итоге я нашел решение в виде библиотеки Masonry, теперь плитка выглядит как на макете и структура кода удобна для интеграции:

Верстка сайта Videyra 34
Код списка девушек

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

Cтраницы

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

Задача

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

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

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

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

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

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

Разработка сайта для Liga Stroy

Задача

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

Страницы

  1. Главная
  2. Каталог
  3. Продукция
  4. О компании
  5. Страница товара

Верстка

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

Интеграция в CMS

Для того, чтобы изменить на сайте текст или цвет фона блока -- не обязательно привлекать каждый раз программиста.

Можно интегрировать все в систему администрирования, заранее предусмотрев функционал для изменения сайта без программиста.

Интеграция была выполнена с CMS WordPress.

Создание функционала для интернет-магазина

Для создания интернет-магазина был выбран плагин Woocommerce. Сайт был в роли витрины: вы могли просмотреть товар, покупать товар нельзя.

Отзыв

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

Решил поискать кто сможет взяться за эту работу. Обзвонил порядком 10 компаний и людей, ко всему прочему, нашему сайту требовался хороший дизайнер.

Бюджет был ограничен и так как средний ценник в компаниях выходил в 100 т. р поиски пришлось продолжить. Мы ведём в страничку в инстаграм soudal_russia поиски продолжились там, пару дней спустя я нахожу страничку Диниила и решаюсь на запрос, получаю данные, расценки, сроки и портфолио.

Все рассмотреть и оценив, принимаем решение начать работу. Диниил посоветовал дизайнера и как только дизайн сайта был готов, выполнил свою часть работы за 2 недели + дороботки по нашим пожеланиям заняли примерно неделю. Как итог наш сайт готов пена-герметики.рф. Хорошая работа, приемлемые цены, мы советуем.

Александр. Ссылка на отзыв

Верстка сайта Servicepools

Задача

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

Список готовых страниц

  1. Главная
  2. О нас
  3. Контакты
  4. Страница товара
  5. Портфолио
  6. Бассейны
  7. Сауны
  8. Услуга
  9. Услуги

Анимация сайта

Была задача: сделать на сайте как можно больше анимации. Я постарался сделать сайт более «живым» с помощью анимации, добавил ее при прокрутке, наведении на элементы, открытие мобильного меню.

Анимация статистики
Анимация меню

Модульность сайта

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

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

Модульный — это элемент, который имеет одно описание стилей и может быть встроен в любую часть страницы без последствий.

Пример, карточки с описанием услуг:

Верстка сайта Videyra 35
На странице бань
Верстка сайта Videyra 36
На странице бассейнов
Верстка сайта Videyra 37
На главной странице

Я не создавал 3 разных секции и для каждой писал свои стили. Я оформил их как одну группу и создавал стиль.

Если в коде что-то поменяется, поменяется сразу во всех блоках. Это кажется очевидным, правда? Но не все так делают.

Калькулятор себестоимости

Ссылка на калькулятор — https://dev-postnov.ru/works/count-cost/

Исходный код — https://bitbucket.org/dev-postnov/calc-cost/src/master/

Калькулятор
Калькулятор

Моя девушка — мастер маникюра, педикюра и депиляции. Она постоянно покупает какие-то новые инструменты, расходники для своих клиентов, с каждым днем их становится все больше 🙂

Иногда появляется необходимость считать себестоимость оказания одной услуги в каждом из трех направлений.

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

Однажды программист во мне взял вверх и я решил немного автоматизировать это процесс.

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

Я тут понимаете ли стараюсь, а она до сих пор с листом и ручкой 🙂

Демо работы

Как пользоваться?

  1. Нажмите на «+» для добавления нового материала
  2. Введите название материала
  3. Введите стоимость пачки/бутылки
  4. Введите количество/объем в пачке/бутылке
  5. Введите количество материала, которое тратится на на одного клиента

Если вы не введете стоимость, объем и количество на одного клиента, сумма не рассчитается.

Для удаления материала нажмите «
Для того чтобы стереть данные из материала нажмите на «↻»

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

Надеюсь вам пригодится данный сайт.

Разработка проекта для «Додо Пицца»

Разработал проект для публикации додо-рифм.

Продумал структуру, задизайнил все экраны. Сделал вёрстку и сделал из неё SPA-приложение, которое работает безе перезагрузки.

Отзыв Федора Овчинникова

Федор рассказал о сайте на своей странице в Вконтакте.

Верстка сайта Videyra 46
Запись на стене Федора

Результат

1900+ пользователей и 324+ рифм за 9 дней.

Добавить рифму

https://dodo-crambo.ru/

Верстка интернет-магазина по продаже шин

Задача

От постоянного клиента поступила задача — в кратчайшие сроки сверстать адаптивный сайт по готовому дизайн-макету.

Страницы

  1. Главная
  2. Каталог
  3. Страница товара
  4. Услуга
  5. Посадочная
  6. Оформление заказа
  7. Корзина

Результат

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

Используемый технологии: Gulp, HTML, CSS, SCSS, Pug, Javascript, jQuery.

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

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