Обсудить проект
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
ПРИСОЕДИНЯЙТЕСЬ
тут много полезного и интересного
Обсудить проект

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ч.

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


ТОП 17 решений для интернет магазина одежды. Решения, которые проверены временем
ТОП 17 решений для интернет магазина одежды. Решения, которые проверены временем
29 Ноября 2019
15 причин ухода посетителей интернет-магазина
15 причин ухода посетителей интернет-магазина
25 Ноября 2019
4 место Россия рейтинг 'Рунет 2019' cms Shop-Script
4 место Россия рейтинг 'Рунет 2019' cms Shop-Script
21 Ноября 2019
Наше кредо

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

Гордость