Use doc

Начать нужно с раздела Product (Продукт). В нём описаны основные, верхнеуровневые требования бизнеса, которые нельзя игнорировать при разработке дизайна. Далее следует перейти к подразделам Базовые/дополнительные требования, Примеры, Функции/Роли раздела Design Idea (Дизайн идея) - содержащие верхнеуровневые требования дизайна. Product (Продукт) и Design Idea (Дизайн идея) это основные разделы - еда для дизайнера (дизайнер = UX + UI), после обсуждения которых, рождается прототип Wireframe (Прототип), часто отрисованный от руки. В дальнейшем он уточняется (в том чиле подключается иллюстратор), определяется структура приложения и в концовке появляется графические представление (собственно дизайн, готовый к реализации).

Дополнительно:
Разделы Site structure (Структура сайта), Non-functional будущие разделы для Front разработчика. На этапе проектирования дизайна они представляют черновики, уточнее которых будет произведено после разработки основного дизайна. Тем не менее в них может находится интересная, предварительно известная информация для дизайнера. Пример: кол-во и наименования элементов в списках, примеры компонентов на которые Front-разработчик будет ориентироваться, предварительная логика работы компонента и.т.д. Но все это лишь черновик, который можно как угодно менять, до того как дизайн не будет готов.

Product (Продукт)

Лёгкий, быстрый статичный сайт/SPA-приложение (с динамикой и бизнес логикой на клиенте/js) - акцент не на лицо/визитку компании и вообще компанию, а на предлагаемые услуги. Позволяет клиенту ознакомиться с услугами компании и сделать заказ услуги при помощи звонка или мастера. Ключевое - продажа не товаров, а услуг.
В дальнейшем есть планы роста в «магазин/супермаркет строительных услуг». Фактически будет добавлена возможность оплаты, а вместе с ней полноценный BackEnd и естественно переработан весь FrontEnd, но с дизайном нужно попасть сразу и сильно его не менять.

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

— Вольный пересказ Филипа Котлера с habr_a.
Показать

Пример с forumhouse.ru, когда клиенту предлагают, сэкономить и найти материал, бригаду для строительства дома самому, все контролировать, следить, покупать и.т.д. затрагивает все боли Clients pains ("Боли клиента").

Example
Боль

Goals (Цели)

Сайт/Приложение должен:

  • Объяснить клиенту, что готовую услугу/работу заказать выгодней чем делать самим или искать самим работников (основной акцент экономия времени, получение качественной работы);

  • Мотивировать клиента оформить заказ, совершить звонок/получить консультацию (это не должно быть чересчур навязчиво, очень аккуратно и только по желанию клиента - он должен сам захотеть сделать заказ);

  • Продать качественно выполненную в срок работу;

Target audience (Целевая аудитория)

Есть два основных типа клиентов:

  1. Дачники.
    От 35+ до 50 (интернет). Люди приезжающие на отдых на «дачу», уже сформировавшиеся, имеющие работу и в большинстве случаев семью. Люди которые уже вовсю ощущают ценность времени. Более старшим поколением «Дача» воспринимается как второй дом, многие живут с начала весны до «снегопадов». Что касается дохода - существует нижний порог — это где-то 25 000/30 000 руб. свободных д/с в месяц. Всё, что ниже не наш клиент (к примеру 95% местного населения). Интересы совершенно обычные, отдохнуть от городской суеты , заняться выращиванием чего-либо, заманить к себе детей/внуков/друзей, «привыкнуть к земле». При этом нужно где-то жить, на чем-то сидеть и.т.д. На этой ниве расцветают различные строительные услуги - это и есть наша работа. Т.к. особо много свободного времени ни у кого нет, да и лето в средней полосе довольно короткое, то строительные услуги пользуются довольно стабильным спросом + есть запрос на качество. Конкуренция довольно сильная.

  2. Вымирающий малый бизнес (ИП).
    Строительство различных быстровозводимых строений (магазинчики, склады). Все реже и реже т.к. сетевые и интернет магазины с доставкой фактически всех "сожрали".

Clients pains ("Боли клиента")

  1. Сроки (время) строительства и связанный с этим сопутствующий стресс;

    Деньги дороги, жизнь человеческая ещё дороже, а время дороже всего.

    Ремонт невозможно закончить его можно только прекратить.

    Снять планируемую, очевидную нагрузку с "мозга", затраты на обдумывание решения, выбор материалов, контроль качества. Ненавязчиво объяснить, что в случае заказа готовой услуги, клиент решает сразу кучу возможных проблем. Для этого везде должен быть подтекст, что строительство собственными силами, найм строительной бригады и.т.д. - огромный геморрой связанный с рисками (Надавать на связанные боли: Отсутствие стоимости, посредники, качество). Мозг должен это понять и начать сопротивляться строительству собственными силами.

  2. Отсутствие понимания, конечной стоимости (Отсутствие мастера заказа/калькулятора);

    Показать "ценник" с возможностью уточнения (калькулятор, приложить свой файл).
    Клиенту, часто непонятно отчего возникла конечная стоимость и он думает, что его обманули, поэтому очень важно рассказать, описать почему данная работа не может стоить дешевле, иначе это будет "халтура" (надавить на боль качество).
    Пример. При заказе окон, у клиента есть размеры ему нужно узнать цену сразу или по звонку. Чисто звонок тут работает плохо, не видя стоимости (хотябы примерной - от) клиент просто уходит. Он не хочет тратить своё время на звонок не поняв устраивает ли его стоимость. Если же он увидел и/или рассчитал стоимость сам (калькулятор) или приложил файл и уже получает звонок с предварительно рассчитанной стоимостью нескольких вариантов (можно сказать персональным предложением, т.к. нам понятен объём и.т.д.) - это хорошо мы сэкономили его время. Маркетинговые вещи из разряда сказали 5 тыр, а в реальности 15 или "тупо позвоните" работают сугубо отрицательно на репутацию);

    Боль (Отсутствие стоимости);
    clients pains fake site

  3. Посредники "через три колена";

    Ненавязчиво убедить, успокоить клиента, что он работает напрямую с исполнителями (это не только текст, а должно быть сразу понятно с главной);

    Боль (Посредники. Прим. решения от Сбербанка")
    Example

  4. Качество и Недоделки;
    Очень много шабашников с отсутствием какой либо гарантии.

    Боль (Качество + Недоделки)
    Example

  5. Описанные выше боли трансформируются в основную, скрытую, объединяющую боль - дефицит качественной работы "под ключ" (Условно клиенту нужна баня, а не сруб и адрес, где можно заказать фундамент, окна, отделку, печку, работников, которые это все сделают и.т.д.).

Design Idea (Дизайн идея)

Base (Базовые требования)

  • Всё обсуждается не является истиной последней инстанции

  • Предварительно посмотреть: https://www.youtube.com/watch?v=rpqphb6HQqQ

  • Постоянно думать над решением клиентских болей

Общая стилистика пазлы (с плавными закруглёнными линиями). Весь дизайн должен быть "пронизан" темой с пазлами (пазл = работа и как апогей дом состоящий из пазлов);

puzzle
Дизайн должен:

  1. Реализовать для пользователя один приоритетный путь оформления заказа (самих путей может быть несколько). Не должно быть движения назад, когда пользователю нужно вспомнить что-то с предыдущего экрана, все необходимое должно быть на текущем, даже если для этого необходимо продублировать информацию. Сам процесс заказа должен быть максимально коротким (2-3 экрана);

  2. Устранить боли клиента;

  3. Быть простым, как 1-2-3, "легким", но при этом достаточно строгим и при этом в меру "весёлым". В области где мы работаем достаточно серости и уныния. Сайт не должен усиливать эту обстановку, а наоборот быть ключиком к чему-то светлому. Текст максимально простой/понятный любому, немного "деревенский", что-то из разряда "Что, Где, Когда";

  4. Предоставлять возможность приоритизации услуг - это требование в основном к главной (см. Examples (Примеры) пример с banki.ru);

  5. Mobile first + SPA - пользователь должен думать, что это приложение, а не сайт. Не делать слишком длинную ленту из главной (самих услуг/работ ~ 20 - 30). Продумать "unhappy path", когда что-то пошло не так=Модалки обработки ошибок (Пример сервер не вернул список услуг/работ, не удалось создать заказ). Эти варианты нужно отобразить в дизайне (желательно продумать единый happy path для unhappy path ситуаций);

    Example
    Нужно перевернуть мозги и думать в основном о мобильной версии причём как о приложении/SPA (см. airbnb.com) и совсем немного о версии для персональных компьютеров. Не нужно представлять сразу как это будет выглядеть на PC, что скрыть в мобильной версии, а наоборот, что потом добавить в версию для PC.

Additional (Дополнительные)

Color (Цвета)

На усмотрение дизайнера. Цвета не должны быть яркими, вызывающими, «ночными». Сайт должен стремиться к умеренной строгости, аккуратности — совместить «чертёж по ГОСТу» c уютом и спокойствием дачного домика (не совсем "мультяшный", но и не супер строгим). Преобладание бело-гаммы. Цвета не должны быть основным и выделяться, а только подчёркивать общий стиль/элементы сайта.

Logo (Логотип)

Шрифт, цвета можно менять (есть в формате Adobe). Текстовка: Эвренсел "Доступное строительство".

Example logo
Логотип

Pers (Персонаж)

Если дизайнер видит, что необходим персонаж для отображения, объяснения той или иной ситуации, то об этом нужно сказать (персонаж/иллюстрация будет создан/а). Примеры предоставлены информационно.
Example logo
Строитель (цвета можно изменять)
Example logo
Без посредников (получилось не очень, но что есть)

Examples (Примеры)

Стоит отметить, что обязательно стоит зайти на сайты с мобильного устройства (или прикинуться им). Не всегда достаточно изменить размер окна браузера. Это нежелательное поведение - данный сайт должен быть адаптивным и изменяться только на основе изменения размера окна (не должен учитывается user agent и.т.д.).
Показать
URL Описание Оценка*

https://www.taylormorrison.com

На мой взгляд отлично продуманный, серьёзный, мультирегиональный, адаптивный сайт с нейтральной цветовой схемой. Все по делу — минимум лишнего, при этом контекст бьёт в точку по целевой аудитории (ЦА схожа с нашей, чуть моложе лет на 5-10), то к чему нужно стремиться. Клиент зашёл на сайт и на первой экранной форме, сразу "SELECT A STATE, SELECT BEDROOMS, SELECT PRICE". Есть, конечно, продвижение "VIRTUAL TOURS" объектов уж очень им хочется показать, что у них есть такая "фишка" - ну так скажем вполне умеренно (возможно сейчас это очень актуально, а возможно хорошо экономит время сотрудников показывающих жильё, задача отсеивать "пустые" просмотры).

Example

Мультирегиональность реализована с использованием "каталогов", а не "поддоменов" (см. их sitemap.xml). Для разрабатываемого сайта тоже потребуется поддержка - только не мультирегиональности, а разбивка по городам одного региона без разбивки на районы, кварталы. Пример:

  • www.taylormorrison.com/co/denver/brighton

  • www.taylormorrison.com/co/denver/broomfield

  • www.taylormorrison.com/co/denver/castle-pines

В нашем случае будет только:

  • evrensel.ru/putiatino/usluga

  • evrensel.ru/riazhsk/usluga.

Или поддомены (так проще настраивать yandex, но не google который их не любит). Пример:

  • putiatino.evrensel.ru/usluga

  • riazhsk.evrensel.ru/usluga

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

    Example logo

Отлично

www.airbnb.com

Пример SPA приложения для понимания навигации

airbnb

Отлично

https://www.tinkoff.ru/payments/

Пример SPA. Вариант приоритизации.

kidkoff

Отлично

http://www.quantumart.ru

Понравился минималистический дизайн - весь sitemap из 4 ссылок - sitemap.xml,

Example
Example

региональность сделана при помощи карт, без "каталогов", "поддоменов" т.к. у них всего 2 региона и усложнение лишнее. Но тут именно лендинг/визитка, а у нас немного другое позиционирование - это в первую очередь услуги, а о компании это где-то там внизу, в подвале.

Example

На этом все хорошее закончилось и пошли минусы - отсутствует адаптивность, отсутствует https, как результат tele2 тутже впихнул (inject java-script virus) свою рекламу http://p.tlrtb.com/ad/base.js.

Example

Сойдет

m.rewedo.ru

Главная довольно интересно и почти аккуратно сделана (в мобильной версии, как по мне слишком много текста, слишком длинная портянка), но это и не SPA.

Example

"Почти" - дубляж телефонов, перекрытый фон "лица" полями ввода и другие мелочи …​ но в целом все не плохо.

Example

Цветовая схема вполне приемлемая. Минус, что отдельная мобильная версия (отдельный поддомен m), redject на который происходит по user agent (поддомен это фактически отдельный сайт). Хостятся они кстати на Amazon при запросе sitemap.xml получаем "кривой" redirect на https://rewedo-v3-2.s3-us-west-2.amazonaws.com/sitemap.xml

Норм

https://profi.ru

Отлично, что сразу после выбора услуги пользователь перенаправляется на страницу (мастер/Wizard) заказа.

wizard

Отлично

https://www.banki.ru

Сайт/портал огромный (Финансовый супермаркет), при этом на главной странице все по делу. Мобильная главная, первый экран прям отлично. Отлично выделены основные направления/услуги. Не нужно никуда листать - всё на первом экране. Самые маржинальные/популярные услуги выделены.

Example

Норм

https://www.ikea.com/us/en

Хорошо продуманный адаптивный сайт с нейтральной цветовой схемой.

Отлично

https://данилин-мастер.рф

Тема из «детского мультика», отсутствует адаптив. В «шапку» сайта запихнули слишком много (региональность + краткий список работ). С другой стороны с наполнением контекста все хорошо + подумали над региональностью.

Example

Сойдет

https://all-zabor.ru

Классический сайт посредник с региональным разбиением (сайт в Default City и куча страниц на все регионы для индексации). Понравилась картинка "домика" на главной, бьёт по ЦА (В версии для PC выглядит норм). Присутствует цена "от", фото "товара/работы". Плохо, что отсутствует адаптивность.

Example

Сойдет

*(Отлично, Норм, Сойдет, Дёрьмо)

Function/Role (Функции/Роли)

Кратко: с любого места на сайте у клиента есть возможность оформить заказ.

use_case)
"Палка, Палка, Огуречик, Вот и вышел человечек (для общего понимания)."

Easy Easy Easy - никакого разбиения на роли, авторизаций, регистраций, админок, форм оплаты, сложных процессов, на первом этапе все максимально просто и топорно на "ручном приводе". Всё крутится вокруг единственной бизнес сущности "Заказ"; Оформление заказа в "два/три экрана". Выбрал услугу/работу, попали на экран оформления заказа, там изучили, ввели всю необходимую информацию и сделали заказ.

Роль клиент
По большому счету клиенту доступны всего 3 функции:

  1. Поиск услуги/работы;

  2. Ознакомиться с описанием и фотками работ/услуг тем или иным способом;

    1. Реально выполненных работ;

    2. Подробным описанием каждой работы;

  3. И как результат первых двух пунктов оформление заказа тем или иным способом (единственная функция с точки зрения бизнеса);

    1. По звонку на указанный на сайте номер телефона;

    2. Заказ обратного звонка через форму на сайте;

    3. Отправкой Email-письма;

    4. Взаимодействие через мессенджеры;

    5. Оформление через форму заказа/мастер;

Роль сотрудник
Функции:

  1. обработка/приём заказов (предоставлено чисто информационно, сотрудник никак не взаимодействует с сайтом при обработке заказа). Cотрудник получает предварительную заявку/заказ от клиента, которую клиент может оставить разными способами, через разные каналы обслуживания (звонок, на сайте через форму, Email, через мессенджер). Далее сотрудник уточняет параметры заказа, опционально предлагает услугу оценки, если цена клиента устраивает, то отправляет реквизиты для оплаты или просто договариваются с оплатой по факту выполненной работы или ещё как договорятся (все максимально гибко, может даже "бартер" быть). Весь учет заказов в Excel с хранением в облаке за исключением бухгалтерии (1С). И большего пока не нужно;

  2. Настройка приоритизация услуг = "раз в квартал" путём изменения кода сайта;

Wireframe (Прототип)

Ниже описаны/нарисованы просто варианты, черновики реализации требовании описанных выше.

Puzzle (Вариант в виде пазлов)

Целевой вариант
Показать текущий Checklist/замечания прототипа
Требование Описание/предложения Оценка

Общая стилистика пазлы

В мобильной версии Ок, в PC подумать над оформлением (см. зарисовку).

Быть простым, как 1-2-3

Вполне.

Выглядеть как приложение (SPA)

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

"Легким", но при этом достаточно строгим и при этом в меру "весёлым"

Домик в мобильной версии весёлый (возможно нужно будет изменить цвета под общий стиль дизайна), в версии для PC можно поработать, добавить работников на основе персонажа.

Снимать планируемую, очевидную нагрузку с "мозга"

Плохо. Вариант с анимацией сложный и только для PC. Нужно поискать что-то более простое.

Боль: Отсутствие стоимости (ценника)

Плохо, что не на первом экране для mobile. В версии для PC можно добавить в "карточку" появляющуюся по hotspot, то в версии mobile всё сложней. Перегружать информацией пазл желания нет. Есть идея, добавить "знак качества" выше домика вот такой элемент (4 пазлами вокруг)

Пример пазлов плиток (стилизированных по дом)

Круг возможно стоит преобразовать в 5-угольник (ассоциация знак качества СССР)

Пример пазлов плиток (стилизированных по дом)

Гарантия, Без посредников, Соблюдаем сроки, Фиксированная стоимость. В центре лого компании с текстом "Доступное строительство". При клике пользователь перемещается на отдельную страницу преимуществ, где в красках описано решение болей клиента.

Боль: Сроки (время)

Плохо в mobile версии, что отсутствует не на первом экране. См. замечание про ценник.

Боль: Посредники

Плохо не выделено на первом экране, возможно создать доп. раздел. на главной.

Боль: Качество

Плохо не выделено на первом экране. Если в версии PC можно добавить в слайдер "с домом/машиной", то в mobile все сложней. Раздел "наши преимущества" делать не очень хотелось, возможно можно придумать что-то еще.

Функция интерфейса: Приоритизация услуг/работ

Удовлетворительно. Группы услуг выделены. В версии для PC группы экранами, в mobile пазлами разделителями. Как таковая приоритизация присутствует только в мобильной версии (путем частичного перемещения "повторяемых" пазлов). Возможно можно придумать что-то еще.

Cтруктура страниц/окон
mind
Draft (с обводкой страницы (page), стрелками связи).
User Story (Общая)

Пользователь заходит на сайт с целью заказать работу или посмотреть список доступных работ. Падает на главную (home). Вверху страницы он видит информационную "полосу/header" (top bar), которая в зависимости от устройства содержит встроенный поиск (Search/Filter Mobile) или мастер оформления заказа (Order wizard PC), а также номер телефона (Call), лого и элемент заказа обратного звонка (CallBack Request).

При помощи top bar пользователь оформляет заказ одним из трёх способов способов:

  1. Звонком по указанному номеру;

  2. Нажатием на "Обратный звонок" и заполнением формы (CallBack Request);

  3. При помощи мастера (в версии PC он сразу на главной (Order wizard PC), а версии mobile необходимо набрать имя работы в поиске и уже далее произойдет перенаправление в мастер (Order wizard mobile));

Ниже top bar располагается знак качества (Quality Icon) и витрина работ/услуг (List Of Works). Вид отличается в зависимости от устройства: знак качества (Quality Icon) и следом Домик из пазлов-кнопок (List Of Works mobile) или Слайдер/карусель с картинкой в изометрии с указанными hotspot (List Of Works PC), боковым меню (Sidebar PC), знаком качества (Quality Icon) в левом верхнем углу на картинке;

При помощи List Of Works+Quality Icon пользователь оформляет заказ одним из способов:

  1. Нажатием на знак качества, что перенаправляет его на страницу с описанием преимуществ/гарантий (Guarantees), что должно устранить его "боли" и убедить его совершить заказ. Для заказа со страницы преимуществ пользователю доступен top bar, а также есть возможность вернуться на главную с оформлением заказа любым способом;

  2. Нажатием по соответствующей работе/услуге (стилизованнному пазлу или hotspot) в витрине работ/услуг, что перенаправляет его в мастер оформления заказа для соответствующего устройства (Order wizard PC или Order wizard mobile);

Оба мастера запускают один бизнес процесс, но UI у них совершенно разный, при этом совпадают шаги: 1:выбрать работу (select/search job), 2:выбрать время/город (select date-time/city), 3:ввести контактные данные (input Contact).

Ниже "Витрины работ/услуг" располагается горизонтальный слайдер/карусель с примерами реальных работ (Our works) и функцией - "перейти к заказу".

В самом низу подвал состоящий из двух частей, информационной и пунктами присутствия (для пользователей которые привыкли листать сразу в самый низ);

Подробнее см. ниже описание для каждого устройства.

Mobile Wireframe

  1. Вверху "top bar" с интегрированным поиском:

    Пример пазлов плиток (стилизированных по дом)
    "Зарисовка (домик + верхний бар с поиском). Между домиком и top bar отсутствует знак качества."

    1. При клике на "ЗАКАЗАТЬ ЗВОНОК" открывается форма обратного звонка, фактически упрощённая,быстрая версия создания заказа, где не требуется обязательно выбирать необходимую услугу/работу (достаточно имени и телефона). На самой форме нужно придумать, как отметить обязательность/не обязательность полей, а также отображения введённого значения (пункта);

      Пример пазлов плиток (стилизированных по дом)
      "Зарисовка (модалка, обратный звонок), дизайнер может изменить структуру на свое усмотрение"

    2. при переходе в поле поиска:

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

      2. Или при щелчке сразу открывается "модалка" с поиском/фильтром и выбором услуг (более приоритетный вариант). Далее он "жмакает" по иконке и перенаправляется на первый шаг мастера оформления заказа (в нижнем bar_е "к списку услуг", фактически дублирует <);

        Пример пазлов плиток (стилизированных по дом)
        Пример поиска + выбор в виде отдельного окна (получается "обманка" пользователь нажимает на форму поиска ожидая начать ввод, а получает новую форму с вводом)

  2. Витрина работ/услуг стилизированный "живой" дом состоящий из иконок-пазлов. "Жмакнули" по пазлу - перешли в мастер оформления заказа (3 экрана), где можно оформить собственно заказ, а также посмотреть/подгрузить расширенное описание услуги/работы ("подробнее" на зарисовке, возможно это стоит сделать иначе);

    Пример пазлов плиток (стилизированных по дом)
    "Зарисовка (домик/меню из пазлов)"
    мобильный wizard
    "Зарисовка (мобильный wizard)"

  3. Ниже "Витрины работ/услуг" располагается горизонтальный слайдер/карусель с примерами реальных работ и функцией - "перейти к оформлению заказа", его задача дать клиенту заказать "хочу такое же, как на картинке");

    Пример пазлов плиток (стилизированных по дом)
    "Зарисовка (слайдер/карусель и футер)"

  4. Ниже Витрины работ/услуг и Слайдера/карусели с реальных работ, располагается футер/подвал (для тех кто привык листать в самый низ);

PC Wireframe

  1. В самом вверху информационный Top Bar совмещённый с мастером оформления заказа (wizard). Слева лого, справа кликабельный номер телефона и "заказать звонок" (при клике появляется модалка, по сути тотже заказ который можно оформить при помощи мастера, но меньше полей). В центре/сверху группы они переключают "изометрическую картинку" в слайдере/карусели в центре:

    • Дом;

    • Коммерческие объекты;

    • Доставка;

      Верхнее меню (без мастера/wizard)
      "Зарисовка (Верхнее меню без мастера/wizard)"

  2. Снизу в Bar "врезается мастер" подбора услуги/работы (для примера посмотреть мастер airbnb.com). Мастер состоит из пронумерованных пазлов - шаги оформления заказа - всего 3 шага + 4 элемент "Заказать"или "Отправить заказ").

    Ограничение: Мастер позволяет оформить только один тип работы/услуги за раз; Чтобы создать заказ нужно выбрать/отметить значение в каждом пазле (их всего 3). Значения в пазлах несвязанные, вводить/корректировать можно в любом порядке.
    Верхнее меню мастер/wizard)
    "Зарисовка (Верхнее меню мастер/wizard)"

    1. 1: Что нужно?. "Жмакнули" по пазлу, появилась форма содержащая:

      1. поиск/фильтр с возможностью ввода или выбора значения (значений не много ~30) и "крестиком сброса фильтра" или/и сброс путём нажатия "Backspace" (обязательное для ввода поле);

      2. поле ввода "Опишите работу" + "прикрепить файл" (необязательны для заполнения);

    2. 2: Когда и где?. "Жмакнули" по пазлу, появилась форма, разделенная на две? части (Когда/Где) содержащая из:

      1. Когда = Календарь (для выбора конкретной даты/диапазона) + элементы обозначающие месяца (для выбора месяца), можно как-то разделить сверху переключателем, что-то типа "Знаю даты", "Пока неизвестно". Или что-то получше придумать. (обязательное поле);

      2. Где = Выбор города/села (лучше без карты), хотя можно с ней (необязательное поле);

    3. 3: Ваш контакт. "Жмакнули" по пазлу, появилась форма, ввода клиентских данных. Клиент может оставить не только телефон, но и почту, одноклассники, и.т.д., но что-то одно он должен оставить (обязательное поле);

      1. Телефон (удобно через whatsapp?);

      2. Email;

    4. Отправить заказ (активна, только после того, как первые 3 пункта выбрали). После успешной процедуры должна появится подтверждающие "модалка Ок", символизирующая об успешном выполнении операции.

  3. Слева боковое меню/Sidebar (домик из пазлов-кнопок) - см. выше домик для мобильной версии (боковое меню удобно на PC). Если пользователь "Жмакнул" по пазлу то в слайдере/карусели (п.4) выполняется переключается на соответствующий экран/картинку и открывается/отмечается соответствующий hotspot с мини карточкой услуги/работы (с данной карточки есть возможность перейти на страницу с расширенным описанием работы/услуги) или перейти к мастеру заказа (открыть форму первого шага).

  4. В левой/части выше "дома|машины|ком. объекта" значок "качества". В виде круга 5 пазлов;

    1. Центр лого;

    2. Гарантия;

    3. Соблюдаем сроки;

    4. Без посредников;

    5. Фиксированная стоимость;

      pc main house qa

  5. Справа от бокового меню/Sidebar - слайдер/карусель с переключаемыми 3 картинками в изометрии. Переключение выполняется при помощи top bar (3 верхних пункта Дом|Ком. обекты|Доставка), а также бокового меню/Sidebar):

    Isometric

    Isometric = Мы наклоняем камеру по двум осям (поворачиваем камеру на 45 градусов вбок, потом на 30 градусов вниз). При этом создаётся ромбическая сетка, в которой ширина ячеек в два раза больше высоты. Такой стиль стал популярным благодаря стратегическим играм и экшн-RPG. Если посмотреть в этом виде на куб, то мы видим три его стороны (верхнюю и две боковые).

    — Клинт Белленджер

    1. Дом с учатком (экран по-умолчанию); анимированная иллюстрация двух домов с участком и постройками (соседей).

      Легенда анимации

      По замыслу один дом строят сами хозяева с соответствующем качеством и сроками, другой строит наша компания. Время строительства отображается в виде смены времён года (лето -→ осень -→ зима -→ весна). Первоначальная картинка (с которой начинается отсчёт) соответствует текущему времени года. https://codepen.io/agathaco/pen/rpZoYd https://codepen.io/gxash/pen/YqmxWg https://www.behance.net/gallery/89948631/Isometric-house-changes-by-season https://pokoi.github.io/Vivaldi-four-seasons-web/fall.html https://codepen.io/dodozhang21/pen/yeJZLm https://codepen.io/fleemaja/pen/bBoBxK.
      Соседи очень медленно строят дом, за это время у другие просто живут, справляют праздники, принимают гостей. После постройки вс ене заканчивается и вечно что-то случается и они бегут за помощью к соседям, весной протекает крыша, зимой в доме холодно, перемерзает вода, летом жарко и "воняет септик", осенью что-то ломается, пропадает свет (проблемы с электрикой).

      Что должно быть на участке:

      1. Собственно дом (для понимания дом из керамзито-блока обычно обкладка кирпичом или штукатурка), простой домик не замок, одно-двух этажный простая двухскатная крыша (см. примеры):

        1. Разрез дома (чтобы было видно внутренние устройство), как минимум отдельно выделено:

          1. туалет/ванная;

          2. отопление (тёплый пол или батареи - нужно как-то обозначить, что идет тепло);

          3. крыша (разрез чтобы было видно отдельно стропильную систему и покрытие крыши);

        2. На самом доме

          1. окна

          2. дверь

          3. фундамент

          4. отмостка

      2. Участок с подъездом, на самом участке есть:

        1. дорожка к дому (брусчатка);

        2. забор (глухой - металлочерепица);

        3. газон;

        4. колодец/септик - соединён с ванной туалетом в доме (подъезжает машина откачивать нечистоты)

        5. со стороны дороги подходит вода, и канава до дома с рабочими (заведение в дом водоснабжения);

        6. беседка;

        7. Навес под машину;

        8. сарай/баня;

        9. скамейка/лавочки;

      3. К воротам участка подъезжает "газель" на разгрузку строй материалов;

      На первом этапе достаточно одного дома (без анимации). На самом доме, постройках точками (hotspots) отмечены отдельные части (услуги/работы), при наведении или щелчке? появляется краткая информация о услуге/работе (мини-карточка) с возможностью перехода на форму оформления заказа.

      Пример пазлов плиток (стилизированных по дом)
      "Зарисовка (домик с участком изометрия) - главная"

      hotspots отдельные точки на картинке при щелчке или наведении на которые появляется информационное сообщение. Примеры hotspots, hotspots.

      Дом имеет два переключаемых вида (Переключается ползунком справа) или один, но разделённый на два вида (тогда ползунок не нужен, но хотелось бы переключаемый вид):

      1. дом снаружи/не видно внутренних работ (По-умолчанию);

        house variant
        Пример домика с участком (есть в векторе)

      2. дом в разрезе (отмечены внутренние работы);

        house section
        Пример домика в разрезе с условными (hotspots), готовой картинки пока нет.

    2. Коммерческие объекты.Все аналогично дому, только за место дома будет условный "магнит";

    3. Доставка (машинка); Все аналогично дому (возможно лишнее и стоит оставить только коммерческие объекты и дом с участком).

      delivery

Icons (Вариант в виде иконок)

Показать

Вроде все просто и понятно, но не то (вариант отброшен, оставлен для понимания).

Недостатки:

  • Не выделены решаемые боли "Клиентов";

  • Отсутствует приоритизация маржинальных услуг;

  • Недостаточно раскрыта тема с пазлов;
mobile wireframe
"Зарисовка"
Example mobile wireframe
Черновой вариант
Example mobile wireframe
Черновой вариант

Mobile/Variant "alt"

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

Site structure (Структура сайта)

Внутренняя структура сайта

  1. На текущем этапе, простая - "двухуровневая" (с точки зрения доменного имени evrensel.ru/service1)/"плоская"(с точки зрения расположения файлов - файлы страниц в корневой директории). Главная слинкована со страницами 2-го уровня с возможностью перехода между собой (evrensel.ru/service1, evrensel.ru/sevice2 и т.д.). Логику переходов см. ниже. допускается смешивать. Первоначально планируется классический (первый) вариант, в дальнейшем вариант с возможностью перехода между страницами 2 уровня, но без "проходных" страниц с которых нельзя сразу перейти на главную (второй вариант);

    two level
    Классический, с главной на страницу и обратно, без возможности "прыгать" со станицы на страницу в обход главной.
    Показать (нежелательный)
    two level dead end
    Здесь показан вариант, когда страница на том же уровне, но переход на неё с главной невозможен (такое поведение нежелательно), также есть возможность "ходить" со страницы на страницу в обход главной.
    Показать (целевой)
    star
    Целевой

  2. тематическая не реализуется на уровне сайта/ссылок, но группы/категории могут быть выделены на уровне дизайна (прим. в "подвале"). В нашем случае в это всё строительные услуги, но из них можно выделять условные "группы", где-то на уровне "подвала" сайта, типа "Строим - X,Y,Z", "Делаем - X,Y,Z", "Доставляем", но на основной странице структура плоская (услуг не так много на самом деле);

    Показать
    group

  3. географическая (не реализуется на первом этапе, после реализации структура скорей всего останется простой/плоской - "putiatino.evrensel.ru/usluga") ;

Черновик структуры страниц/сайта

mind
Draft (зеленым отмечена основная функция, с обводкой это страницы (page), стрелками связи).

Reused parts (Переиспользуемые части)

Части которые используются одновременно на нескольких страницах.

Top Bar ("Шапка")

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!
Меню (Меню-гамбургер) не реализуется. На макете нужно дополнительно отрисовать установку и сброс фильтра (фактически это затрагивает навигацию). Возможно поиск сделать отдельной строкой (сдвоенной с верхнем баром, чтобы всегда был виден без всякой доп. логики скрытия/показа - см. ниже пример IKEA).

Функции

  • Возможность "позвонить";

  • Фильтр/Поиск услуг с переходом к форме заказа (only mobile);

  • Создать заказ через мастер/Wizard (only pc);

  • Переход на главную;

  • Заказ обратного звонка;

mobile (Для мобильных устройств)

Примеры

top bar
search
Вариант с отдельным элементом поиска.

Состав

  • логотип (слева) + "Эвренсел" + (если влезет) фраза "Доступное строительство" ;

  • значок звонка + номер телефона цифрами (справа);

  • ниже номера телефона "ЗАКАЗАТЬ ЗВОНОК";

  • элемент навигации "назад" (сброс поиска);

  • значок поиска (слева);

Логика

При клике:

  1. по значку звонка или цифрам номера открывается телефонная книга на мобильном устройстве с введённым номером телефона;

    Показать
    input mobile number

  2. по логотипу, выполняется переход на главную;

  3. по "ЗАКАЗАТЬ ЗВОНОК", появляется "модалка" с полями:

    1. "Ваше имя" (Обязательное);

    2. "Номер телефона" (Обязательное);

    3. "Опишите необходимую работу" (Необязательное);

    4. "Прикрепить файл" (Необязательное);

      Показать
      return call

  4. по значку поиска - происходит скрытие логотипа и значков звонка и поиска, за место них появляется элемент поиска. Который состоит из:

    1. Элемента назад;

    2. Значка поиска;

    3. Элемента сбросить/очистить (крестик);

    4. Исчезающая подсказка при начале набора текста; При начале ввода (примерно 4 символов) появляется список найденных услуг (Будет функционал "Подсказок", для понимания https://dadata.ru/suggestions/#name) по клику происходит переход на страницу оформления заказа;

      Показать
      search panel

      +

      search list
      search
      Вариант с отдельным элементом поиска.

Если открыта карточка услуги (или открыт поиск/фильтр), то есть возможность вернуться обратно, сбросить фильтр/значение поиска.

Показать
search panel
pc (Персональный компьютер)
top bar
pc

Tab Bar/Toolbars (Bottom navigation menu)

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

Функции

  • Навигация (Вернуться к списку услуг/работ или на предыдущий экран);

  • Действия (Создать заказ);

Примеры

search list
Один из экранов пошагового мастера (Tab/Tool Bar внизу исполдьзуется для навигации)

Состав

Содержание меню в зависимости от шага/экрана бизнес процесса (см. Order Form (Форма заказа)).

Логика

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

Footer (Подвал)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Функции

Предоставить краткую информацию о компании, времени работы, способах оплаты, контакты для связи, списке выполняемых услуг/работ (с возможностью перехода на форму заказа) и о районах присутствия. Вообщем для тех кто любит текст и привык листать сразу в самый "низ".

Примеры

Должен состоять из двух частей:

  • Стандартной полосы футера (1);

  • Блока со "Списком основных районов присутствия компании" (2);

futer
Общий пример "полоса" + "районы присутствия"
footer
Пример "полосы" футера
footer
Не забыть про тему с пазлами даже в футере (вар pc)
footer
Не забыть про тему с пазлами даже в футере (вар mobile)

Состав

  1. Полоса "подвала"

    1. Контакты;

      1. телефон/цифрами + кнопка "Перезвоните мне" (кнопка необязательна, только ели получится её органично вписать);

      2. email;

    2. Режим работы (будни, выходные);

    3. Значки соцсетей:

      1. Одноклассники;

      2. youtube;

      3. whatsapp;

    4. Лого+evrensel.ru + Доступное строительство;

    5. Пользовательское соглашение;

    6. Гарантии;

    7. Оплата, Наличная, безналичная (Юр. лица);

    8. Список услуг с разбивкой на группы (группы условные, просто чтобы было от чего отталкиваться):

      1. Строим под ключ

        1. Дома

        2. Бани

        3. Гаражи

        4. Беседки

        5. Коммерческие объекты

        6. Пристройки

      2. Делаем

        1. Кровельные работы

        2. Натяжные потолки

        3. Внешнюю и внутренюю отделку

        4. Отопление

        5. Водоснабжение

        6. Дорожки

        7. Заборы

        8. Фундаменты

        9. Полы

        10. Дорожки

      3. Доставляем с любых магазинов (не содержит подпунктов)

  2. Карта основных районов присутствия компании

    1. Текст: Выполняем строительные работы

      Путятино Ряжск Мосолово Лесной Задубровье Кирицы Красный холм Песочня Сапожок Морозовы борки Тырново Аделино Инякино Борок Борки Ерахтур Юшта Санское Красный угол Задубровье Кирицы Чучково

Логика

На первом этапе просто текст/графика, без ссылок и обработки событий. В дальнейшем добавить переход на страницы с описанием услуг/работ;

Home Page (Главная)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Общий компонет см. Top Bar ("Шапка")

Quality Mark (Знак качества)

Выше "домика из пазлов" (mobile) или на слайдере/карусели (PC) вот такой элемент (4 пазлами вокруг)

Пример пазлов плиток (стилизированных по дом)

Круг возможно стоит преобразовать в 5-угольник (ассоциация знак качества СССР)

Пример пазлов плиток (стилизированных по дом)
Состав

  • Гарантия;

  • Без посредников;

  • Соблюдаем сроки;

  • Фиксированная стоимость;

  • В центре лого компании с текстом "Доступное строительство".

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

Menu "List Of Works"

Набор значков основного экрана для mobile или (точки/hotspots) к "изометрическому дому" для версии PC

Функции

Возможность быстро найти и перейти на "форму заказа услуги/работы" [Order Form (Форма заказа/Карточка услуги)] (отдельное модальное окно). Рассмотреть вариант добавления "визуализации" с группировкой, тоесть пользователь кликает по иконке и автоматически происходить пересортировка (подтягиваются и связываются иконки сопутствующих услуг), при этом основная иконка "переворачивается" (эффект), становится большой/в центре (растягивается в полную ширину экрана/но не высоту) на которой выводится доп. инфа, а при клике (получается втором) уже происходит переход на страницу с описание/калькулятор;

mobile (Для мобильных устройств)

Примеры

Пример пазлов плиток (стилизированных по дом)
Draft версия домика из пазлов-кнопок (В процессе доработки, не все услуги, плохой шрифт).
Пример пазлов плиток (стилизированных по дом)
Draft примерно так, должна выглядеть полная версия домика (В процессе доработки).
Список услуг

Соответствует кол-ву стилизованных пазлов-кнопок в домике.

Всего 27 пунктов.

0 Group: Дом

  1. Кровля;

  2. Стропильная система;

  3. Внешняя отделка;

  4. Внутренняя отделка;

  5. Электрик(а);

  6. Потолок;

  7. Откосы;

  8. Окна;

  9. Двери;

  10. Отопление;

  11. Пол;

  12. Лестница;

  13. Водоснабжение;

  14. Фундамент;

  15. Отмостка;

  16. Терраса;

  17. Забор;

1 Group: Отдельные строения/работы на участке;

  1. Дорожки (брусчатка);

  2. Гараж;

  3. Баня;

  4. Беседка;

  5. Навес;

  6. Скамейки, лавочки;

  7. Пристройка;

2 Group: Коммерческие объекты

  1. металлоконструкции (фермы);

3 Group: Доставка

  1. закупка материала;

  2. доставка;

.4 Group: Все остальное . демонтаж построек;

Логика

Пользователь "жмакает" по кнопке-пазлу, открывается окно оформления заказа услуги/работы.

Order Form (Форма заказа)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Функции

  • Предоставить информацию о услуге/работе;

  • Оформить заказ;

Примеры

order

Состав

Фактически это реализация бизнес процесса заказа в виде мастера состоящего из n-экранов. На первом этапе все максимально упрощено (в дальнейшем будет разное кол-во экранов для каждой услуги и калькулятор).

Экраны мастера заказа;

  1. Карточка услуги/работы. Сверху отображается выбранная услуга/работа и;

    1. Небольшое изображение/фото;

    2. Краткое описание;

    3. Подробнее;

    4. "Бирка с ценой от";

    5. "Срок от";

    6. Поле ввода "Опишите необходимую работу" (Необязательное);

    7. "Прикрепить файл" (Необязательное);

  2. Когда и где? (Когда нужно приступить к работе);

    1. Когда

    2. Где

  3. Контакты для связи;

    1. "Ваше имя" (Обязательное);

    2. "Номер телефона" (Обязательно), checkbox? удобно через whatsapp?;

    3. "Email" (Необязательное);

Tab Bar/Toolbars (навигация + действия);

  1. элемент назад;

  2. Заказать без посредников >>;

Логика

-

Our works (Наши работы)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Функции

Предоставить возможность ознакомиться с фотографиями реальных работ c возможностью перехода к оформлению заказа.

Примеры

slider
Пример горизонтального слайдера (ikea)
slider
Пример горизонтального слайдера (ikea)
slider
Пример горизонтального слайдера (myspace)

Состав

  • Сам слайдер (карусель) с горизонтальной прокруткой фоток;

  • Краткое описание работы;

  • Дата;

  • Ценник (реальный), Срок (реальный);

  • Элемент перехода/действия для заказа;

Логика

Горизонтальный, адаптивный слайдер (карусель). При клике фото открывается/вписывается в полный размер экрана с возможностью листания (как вертикально, так и горизонтально). Что-то типа https://jsfiddle.net/pvbk0spb/et09fzkp/, только дополнительно с полноэкранными режимом. Также необходимо добавить возможность перейти на оформление заказа. Условно говоря клиент листает фотки и ему допустим понравилась "банька" и он захотел аналогичную и тут же у него присутствует "заказать" (кнопка).

Guarantees (Гарантии)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Фактически на данной странице нужно описать решение всех болей клиента.

Leave request (Оставить заявку)

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

Функции

Оставить заявку с возможностью добавить файл.

Примеры

lleave_request
Пример формы оставить заявку

Состав

  1. "Ваше имя" (Обязательное);

  2. "Номер телефона" (Обязательное);

  3. "Опишите заказываемую работу" (Необязательное);

  4. "Приложите файл" (Необязательное);

  5. Кнопка "отправить";

Логика

Клиент вводит обязательные поля и нажимает "Отправить" (условное название кнопки). Ему показывается инфо. об успешном завершении операции. Нажатие на кнопку инициирует запрос на Back.

Tab bar (Bottom navigation menu)

Общий компонент см. Tab Bar/Toolbars (Bottom navigation menu).

Footer (Подвал)

Общий компонент см. Footer (Подвал).

Job page (Страница работы/услуги)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Шаблонная страница с описанием услуги/работы с возможностью перехода на форму заказа. Тут можно применять все правила "Landing Page", т.к. это фактически и есть "Landing Page" конкретной услуги/работы;

TermsOfService/Rules (Пользовательское соглашение)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Не реализуем на первом этапе. Портянка текста.

Contact Us (Связаться с нами/Контакты)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Обычная страница с контактами + карта расположения.

About (О нас)

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

Самые лучшие и прекрасные. Текст можно взять с любого строительного сайта (для дизайна).

404

Текущее описание использовать для разработки дизайна, перед передачей в разработку будут уточнения!

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

Non-functional

Требования к вёрстке

  • По макету из figma;

  • Mobile first/mobile friendly - 75% запросов на сайт с мобильных устройств - это значит, что сначала нужно сверстать мобильную версию;

  • Адаптивная вёрстка - Grid CSS/media query - без фанатизма (по согласованию Flexbox/media query);

  • Будет плюсом использование семантических элементов nav, footer, article …​ e.t.c;

  • HTML5/CSS/JS (SPA - vuejs/react или вообще без них, по возможности минимизировать количество использованных компонентов);

  • Строгий Pixel perfect на соответствие макету не требуется (Возможны творческие отклонения от шаблона);

  • Lighthouse 90+ как следствие, картинки должны быть оптимизированы (их должно быть минимум, за исключением галереи), иконки в формате svg/векторе;

  • Браузеры довольно современные, c поддержкой Grid CSS см. Browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/grid, никаких Internet Explorer. Версии можно повысить до текущих.

  • Не плохо если при разработке использовать Airbnb JavaScript Style Guide - https://github.com/airbnb/javascript

Устройства

В 2019 г. в России было продано 30 млн смартфонов на сумму около 495 млрд руб. Это на 1,5% в штуках и 7% в деньгах больше, чем годом ранее, и вдвое больше в деньгах, чем в докризисном 2014 году. За прошлый год средняя цена аппарата увеличилась на 1000 руб. и составила 16 500 руб. Такую предварительную оценку всего российского рынка приводит группа «М.видео-Эльдорадо», управляющая сетью магазинов бытовой техники и электроники.
Схожие данные о рынке смартфонов сообщает представитель ритейлера «Связной»: по статистике этой розничной сети, в 2019 г. рост российского рынка смартфонов в сравнении с 2018 г. мог составить около 1% в натуральном выражении и 7% – в денежном. Средняя цена аппарата к концу 2019 г. могла вырасти на 6% и составить 16 800 руб., в 2018 г. этот показатель был 15 800 руб.
По данным группы «М.видео-Эльдорадо», по количеству проданных устройств с долей рынка 30% в прошлом году лидировал корейский Samsung, еще около 30% пришлось на смартфоны китайских брендов Huawei и Honor, принадлежащих компании Huawei. Все китайские бренды смартфонов в совокупности заняли 50% рынка по количеству проданных устройств (около 15 млн шт.). В денежном выражении 1-е место удерживает компания Apple – благодаря успешному старту продаж нового iPhone 11. Таким образом, на пять брендов – лидеров рынка (Samsung, Honor, Xiaomi, Apple и Huawei) пришлось 82% проданных смартфонов и 92% оборота рынка.
https://www.vedomosti.ru/technology/articles/2020/01/12/820396-prodano-30-smartfonov

  1. Мобильные устройства 3-летний давности включительно - упор на samsung и чистых китайцев (Honor/huawei/Xiaomi) и не забыть про iPhone.
    Пример:

    1. Samsung Galaxy A51/Samsung Galaxy A10/Samsung Galaxy S10e 6/128GB

    2. Xiaomi Redmi 5a (1280×720);

    3. Xiaomi Redmi 5/6/7A (1440×720:18:9)

    4. Xiaomi Redmi 7/ (1520×720:19:9)

    5. iPhone 8+ (1080×1920:16:9)

    6. iPhone X (1125×2436:19.5:9)

    7. iPhone 11 (828 × 179219.5:9) https://danilin.biz/ios-device-display-resolution-reference.htm

  2. PC/Ноутбуки 5 летний давности включительно, эконом/средне ценового сегмента:

    1. Отлично выглядеть (приоритет) 16x9: fullhd 1920x1080, 1600 x 900, 1366 x 768;

    2. Нормально выглядеть 16x10: 1440 x 900;

    3. Сносно выглядеть 5:4: 1280 x 1024;