Россия
7 (499) 348-10-20
Украина
38 (067) 258-45-54

Другая контактная информация

Работаем с пн-пт с 9:00 до 19:00
Где мы находимся

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

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

Изначально, когда человек хочет создать свой сайт / интернет магазин / лендинг и пр., он пересматривает +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 Рекламное агентство Яндекс Эксперты разработки и продвижения сайтов на WebAsyst

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

Пишите: vip@studiosdl.com
Звоните: 38 (057) 755-42-41 (Украина)
7 (499) 348-10-20 (Россия)