Обсудить проект
Max
Директор
Константин
PR менеджер
Работаем
пн-пт
с 9:00 до 19:00
Украина
0 800 211 593
Звонки бесплатные
Харьков
+380 67 258 45 54
+380 99 602 55 44
Россия
8 800 551 30 41
Звонки бесплатные
Москва
7 499 348 10 20

тут много полозного и интересного
Discuss a project

UkrPhoenix

14 Июня 2019

От идеи до реализации! Постановка задач и их решения.

С чего изначально начинается работа над проектом? Конечно же с идеи!

Изначально, когда человек хочет создать свой сайт / интернет магазин / лендинг и пр., он пересматривает +100 вариантов уже созданных, подходящие под задуманную тематику. Автоматически в голове начинают появляться идеи и вопросы: «А каким именно должен быть его сайт для той же самой целевой аудитории?», «Какой дизайн?» и т. д.

Рассказать, подсказать и разработать проект поможет команда профессионалов!

Входные данные:

  • Эскиз сайта (от клиента)
  • Функционал сайта
  • Требования к сайту
  • Контент
  • Временные рамки

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

Первым делом, на что обратил наше внимание клиент, при обсуждении макета это логотип, как говориться Ctrl+C / Ctrl+V.

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

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

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

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

Окончательный утвержденный вариант переходит в отдел разработки и составляется техническое задание (ТЗ).

Приложения - Сайт и Блог

Необходимо разработать приложение для формы

Для Блога нужно установить и настроить плагин Анонсов, разработать механизм вывода Категорий и постов

В структуре 3 блога - Товары, Логистика и Статьи и приложение Сайт

Все статьи реализуем через приложение сайт

Мы отказались от поддержки IE11, потому в разработке можно смело использовать CSS Grid, CSS Variables, ES6

Было бы круто реализовать проект вообще без jQuery

Тема - за основу берем Премиум, а потому используем его лейаут - колонка в 240px

  • Ближайшая ширина контента к макетной ширине - 1200px (5 колонок - отступы по 20px - брейкпоинт 1240px)

  • Следующая ступень - 960px (4 колонок - отступы по 10px - брейкпоинт 980px)

  • Следующая ступень - 720px (3 колонки - отступы по 10px - брейкпоинт 740px)

  • Ниже этого порога - полностью резиновый макет с отступами в 10px

  • Минимальный брейкпоинт - 320px - ширина контента 300px

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

Шапка сайта - контент

  • Логотип заносим через настройки темы - формат PNG
  • Основное меню - выводим через wa-блок
  • Контакты - стандартная механика темы Премиум - вносим через настройки темы
  • Переключатель языков - выводим через wa-блок

Шапка сайта - стилистика и поведение

Шапка фиксируется в верхней части экрана и не меняет свое положение при прокрутке страницы.

  • Логотип (выравнивание влево) - эффектов наведения нет, простой поинтер. На главной - изображение, на внутренних - изображение со ссылкой на главную
  • Меню (выравнивание влево) - Одноуровневое (6 пунктов), без подпунктов. При наведении - смена цвета, для активной ссылки - смена цвета и бордер. Товары и Логистика - ссылки на блоги, остальное - информационные страницы
  • Контакты (выравнивание вправо) - при наведении - смена цвета - при клике отображение попапа с остальными контактами, при клике вне попапа он закрывается, клик по номеру телефона открывает приложение для звонка, клик по почте - приложение для почты
  • Переключатель языков (выравнивание вправо) - при наведении - смена цвета - при клике отображение попапа с остальными языками-ссылками на другие сайта (поддомены)

Шапка сайта - Адаптация

  • Контент 960px - сужаем расстояния между элементами не меняя концепции
  • Контент 720px - скрываем номер телефона, оставляя иконку
  • Контент ниже 720px - меняем фон на белый, отменяется фиксация шапки, скрываем
  • Переключатель языков, Скрываем основное меню, отображаем мобильное меню (Логотип, Список языков, Меню и Звонок консультанту - механику см. ниже)

Слайдер на главной

  • Контент - выводим через wa-блок, Без ссылок, Текст статичен и не меняется от слайда к слайду
  • Эффект смены - фейд или слайд. Ширина слайдов равна ширине окна браузера, высота - исходя из пропорции 1280*540. Слайдер заходит под шапку
  • Автоматическая смена слайдов через 5 секунд
  • Контент ниже 720px - изменяется размер шрифтов текста, а также стилистика и позиция пагинатора. Важно обеспечить размер активации элемента пагинатора в 40*40 точек

Три основных раздела

  • Контент - выводим через wa-блок, ссылка со всего блока включая описания, эффекты наведения в макете
  • Экспорт - ссылка на страницу, Товары и Логистика - на блоги 720px и выше - равномерно сужаем, оставляя текущую концепцию ниже 720px - убираем описания, выводим в 3-2-1 колонку (как в мобильном макете), добавляем механику
  • Звонок консультанту - клик открывает попап списка телефонов, клик вне попапа - закрывает его, клик по телефону открывает приложение для звонка

Производители товаров

  • Контент - выводим через wa-блок, ссылка на с заголовка и с каждого логотипа производителя - на страницу всех брендов
  • Эффекты наведения в макете. 720px и выше - равномерно сужаем, оставляя текущую концепцию ниже 720px - выводим в 4-3-2 колонки (как в мобильном макете)

Офис Компании - О компании

Контент - выводим через wa-блок (карта, адрес), часы и заголовок в шаблоне. Карта динамическая (гугл мапс) - скролл с указателем мыши над картой должен прокручивать страницу, а не карту. Адрес накладывается сверху. Циферблаты - найти скрипт и установить на указанные в макете города. Стилистика может отличаться от макета - главное не тратить на это много времени. Текст о компании - выводим через wa-блок, заголовок в шаблоне, ссылка на страницу о нас со всего блока. Высота блока равна высоте блока с картой. Текста заведомо больше нежели отображаемый на экране, лишнее скрываем визуально с затенением.

  • 960px и выше - равномерно сужаем, оставляя текущую концепцию
  • ниже 960px - О компании сверху, карта снизу
  • ниже 720px - убираем циферблаты
  • ниже 480px - убираем карту

Футер - контент

  • Адрес выводим через wa-блок
  • Меню выводим через wa-блок
  • Логотип заносим через настройки темы
  • Копирайт (текущий год) и ссылки на разработчика (внутри скобы, слева) - через шаблон

Футер - стилистика и поведение

  • Ховер эффекты в макете
  • Клик по телефону в адресе открывает приложение для звонка, клик по почте - приложение для почты
  • Логотип - на главной странице - изображение, на внутренних - изображение со ссылкой на главную

Футер - адаптация

  • 720px и выше - равномерное сужение с сохранением концепции
  • ниже 720px - меню выводим вертикально справа, слева логотип и копирайт, по центру адрес и телефоны (3 колонки)
  • ниже 480px - убираем адрес и телефоны (2 колонки остается)

На основе составленного ТЗ выводится эстимация (трудозатраты) для выполнения поставленных задач / механизма работы сайта и т. д.

Эстимация = 36ч-39ч.

Еще много полезного


Google опубликовал FAQ по изменениям в обработке разметки для отзывов
Google опубликовал FAQ по изменениям в обработке разметки для отзывов
23 Сентября 2019
Обновление Shop-Script 8.4.8 + плагин доставки Boxberry
Обновление Shop-Script 8.4.8 + плагин доставки Boxberry
17 Сентября 2019
Google изменил подход к обработке nofollow
Google изменил подход к обработке nofollow
17 Сентября 2019
Наше кредо

Совершенствуем себя
Делаем лучше мир

Гордость