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

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

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

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

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

Товар

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

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

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

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

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

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

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

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

Боковое меню

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

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

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

Окно заказа

Процесс

Тильда

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

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

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

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

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

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

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

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

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

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

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

Процесс 3

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

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

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

Особенности

Модульность

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

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

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

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

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

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

Особенности 7
Товары на странице «Каталог»

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

Особенности 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")
});

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

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

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

Особенности 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-услуг искала разработчика, который сможет сделать свежий дизайн для текущего сайта и сверстать его.

Результат

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

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

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

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

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

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

Дизайн и вёрстка многостраничного сайта 10
Дизайн и вёрстка многостраничного сайта 11
Дизайн и вёрстка многостраничного сайта 12
Дизайн и вёрстка многостраничного сайта 13
Дизайн и вёрстка многостраничного сайта 14
Дизайн и вёрстка многостраничного сайта 15

Новый дизайн

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

Каталог игр

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

Контакты

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

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

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

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

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

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

Серверы

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

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

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

Дизайн и вёрстка многостраничного сайта 22
Дизайн и вёрстка многостраничного сайта 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 видов расчёта стоимости в зависимости от параметров

Отзыв

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

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

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

Задача

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

Оптимизация

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

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

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

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

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

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

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

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

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

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

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

Верстка сайта Premium Relax 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 или более повторения какого-то элемента, я делаю этот элемент модульным.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Демо работы

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

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

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

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

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

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

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

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

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

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

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

Разработка проекта для «Додо Пицца» 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

Вёрстка сайта для музыкального портала

Вёрстка сайта для музыкального портала 47
Версия для пк

Страницы

  1. Главная
  2. Исполнители
  3. Уведомления
  4. Клипы
  5. Часто задаваемые вопросы
  6. Кабинет
  7. Аудио-трек
  8. Аудио
  9. Список аудио
  10. Блог
  11. Объявления
  12. Объявление

Задача

Имея главную страницу сайта, стараясь не дублировать код создать еще 12 страниц сайта по макетам от дизайнера (ссылки внизу страницы).

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

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

Было чем-то новым разрабатывать код для песен в плейлисте:

Вёрстка сайта для музыкального портала 48
Списки песен в плейлисте.

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

Модульность

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

Например воспроизведение аудио:

Страница трека
Страница трека
Вёрстка сайта для музыкального портала 49
Страница публикации аудио
Вёрстка сайта для музыкального портала 50
Список аудио

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

Как на мобильном?

Отлично 🙂 Сайт адаптирован под ноутбуки, планшеты, мобильные. Отлично смотрится и удобен в использовании.

Вёрстка сайта для музыкального портала 51

Верстка приложения для заказа обедов

Задача

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

Страницы

Исчезающие/появляющиеся панели

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

Калькуляция

На странице корзины реализовал подсчет суммы при увеличении/уменьшении количества товара и при удалении товара.

Демо подсчета

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

Задача

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

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

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

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

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

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

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

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

Разработка 29 страниц для Свердловского технопарка 52
Фильтры
Разработка 29 страниц для Свердловского технопарка 53
Шапка страниц
Разработка 29 страниц для Свердловского технопарка 54
Плитка новостей
Разработка 29 страниц для Свердловского технопарка 55
Упоминания работников

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

Итоговые страницы