Калькулятор для сайту-сервіса Друк-На-Вимогу
5000 UAHОпишите проект, для которого нужно разработать дизайн интерфейса:
сайт печать-по-требованию от 1 єкз
Ближайшие конкуренты:
https://printto.ua
https://www.ice-print.com.ua/calc_books.php
Основные конкурентные преимущества:
печать книг с твердым переплетом
Целевая аудитория проекта – кто и для каких целей будет его использовать:
люди пользующиеся бумажными книгами
Основные функции интерфейса:
предварительный расчет стоимости печати книги
Краткий сценарий взаимодействия интерфейса с пользователем:
клиент вводит параметры книги (размер книги, цветность страниц, тип обложки (мягк. или тверд.), тираж) и получает стоимость 1 екз и общую сумму заказа
Язык интерфейса:
украинский
Есть ли у вас сайт и фирменный стиль?
нет фирменного стиля, названия и логотипа
Есть ли прототип интерфейса?
робочий прототип калькулятора
https://u000042.stepform.io/LR9L5Nx
макет калькулятора
Укажите любую дополнительную информацию, которую вы считаете важной.
Проблемні місця - занадто високий Bounce % на калькуляторі, бо клієнт бачить, що від нього вимагають багато нецікавих йому дій.
Дизайн вже є, але ми хочемо його дещо осучаснити, облегшити, щоб виглядав цікавіше, бо зараз клієнт на цьому сайті змушений заповнювати довгі таблиці.
Коли клієнт бачить довжелезний поп-ап він просто уходить з сайту. І ми втрачаємо в конверсії.
Можливо в когось є бачення як взаємодію із клієнтом зробити більш ігровою.
Тому, чиє бачення даного інтерфейсу виявиться для нас найцікавішим, готові запропонувати розробити логотип і сайт
Посилання на ТЗ сайту
https://docs.google.com/document/d/169myBWfyQIaNLtD68hNnEzyNgcH20KWfKUVrSDkSmdM/edit?usp=sharing
Приклад дизайну що сподобався
Elekomp Store
Уважаемые дамы и господа, дизайнеры🙂
Большое спасибо, что вы откликнулись на этот проект.
Я просмотрел все ваши работы и понял, что мои ответы будут довольно однотипными и что в условиях конкурса было недостаточно конкретики. Итак, нужно предоставить некоторые уточнения и разъяснения.
Компоновка
Идея разделить интерфейс калькулятора на три экрана (этапа) довольно уместна для мобильных устройств и, возможно, планшетов, но для десктопов мы бы хотели сохранить возможность отображать калькулятор на одном экране. Например, выбирать вариант отображения калькулятора в бэкенде.
Возможно, этот вопрос больше к разработчикам, а не к дизайнерам.
Порядок блоков
Сначала клиент выбирает формат файла, из которого будет печататься книга.
Формат файла определяет, какого размера будет книга и сколько страниц она будет иметь.
Затем клиент выбирает обложку (твердая/мягкая).
И цвет блока страниц (цветной, черно-белый).
Таким образом, оптимальный порядок блоков в параметрах книги следующий:
Дизайн минималистичный
То есть отказываемся от инфографики, которая без функционала.
Цветовая гамма
Остановились на:
светло-зеленый - основной цвет;
дополнительные - на ваше усмотрение;
Стилистика
Меньше текстов, слишком длинных выпадающих списков и т.д.
Больше пиктограмм, графических решений, анимации и т.д.
Пример:
Вот это меню при использовании выдаст список из 12! пунктов, потому что типография может делать книги до 1200 страниц с шагом 100 страниц. Такое решение не будет удобным на мобильных устройствах и вообще не выглядит привлекательно.
Среди ваших решений есть такие:
это лучше, но имеет определенные недостатки:
- занимает пространство экрана, что критично для мобильных устройств
- если увеличится допустимое количество страниц - интерфейс придется переделывать
Есть вот такое решение (реализовано на сайте fozzyshop.ua):
экранного пространства требует меньше
любое количество, введенное в бэкенде, автоматически распределяется по бегунку
Вот такие оригинальные и интересные решения хотелось бы увидеть.
Возможно, есть какие-то идеи по анимации пиктограмм - ротации, трансформации, подсветки, тени и т.д.
Шановні пані та панове, дизайнери🙂
Дуже вдячний що ви відгукнулися на цей проект.
Переглянув усі ваши роботи і зрозумів, що мої відповіді будуть досить однотипними і що в умовах конкурсу було замало конкретики. Отже, потрібно надати деякі уточнення і роз'яснення.
Компоновка
Идея рознести інтерфейс калькулятора на три екрани (етапи) досить слушна для моб. пристроїв та можливо планшетів, але для десктопів ми б хотіли забереги можливість відображати калькулятор одним екраном. Наприклад, обирати варіант відображення калькулятора у бекенді.
Можливо це питання більше до розробників, а не до дизайнерів.
Порядок блоків
Сперш клієнт обирає формат файла з якого буде друкувати книгу.
Формат файла визначає якого розміру буде книга і скільки сторінок матиме.
Потім клієнт обирає палітурку (тверду/м'яку).
І колір блоку сторінок (кольоровий, чорно-білий).
отже оптимальний порядок блоків у параметрах книги такий:
Дизайн мінімалістичний
Тобто відмовляємось від інфографіки, що без функціоналу.
Кольорова гама
Зупинились на:
світло-зелений - основний колір;
додаткові - на ваш розсуд;
Стилістика
Менше текстів, занадто довгих випадаючих списків, тощо.
Більше піктограм, графічних рішень, анімації, тощо.
Приклад:
Ось це меню при використанні видасть список із 12! пунктів, бо друкарня может робити книги до 1200 сторінок із шагом 100 сторінок. Таке рішення не буде зручним на моб. пристрої та і взагалі не виглядає привабливо.
Серед ваших рішень є такі:
це краще, але має певні недоліки:
- забирає простір екрану, що є критичним для моб. пристроїв
- якщо збільшиться допустима кількість сторінок - інтерфейс прийдеться переверстувати
Є ось таке рішення (реалізовано на сайті fozzyshop.ua):
екранного простіру потребує менше
люба кількість, введена в бекенді, автоматично розподіляється по бігунку
Отакі оригінальні і цікаві рішення хотілося б побачити.
Можливо є якісь ідеі що до анімації піктограм - ротації, трансформації, підсвітки, тіні, тощо.
Также не было объяснения по поводу дополнительных услуг:
Поиск файла
Стоимость файла
Уже сейчас количество дополнительных услуг увеличилось, поэтому эту опцию также нужно сделать масштабируемой.
то есть у нас есть пиктограмма "Дополнительные услуги", клик по ней открывает поп-ап с перечнем дополнительных услуг.
Перечень лучше сделать в виде пиктограмм с всплывающим объяснением, чем в виде текстового описания.
Також не було пояснення щодо додаткових послуг:
Пошук файлу
Вартість файлу
Вже зараз кількість додаткових послуг збільшилась, тому цю опцію також потрібно зробити маштабуємою.
тобто маємо піктограму "Додаткові послуги", клік по ній відкриває поп-ап із переліком додаткових послуг.
Перелік краще зробити у вигляді піктограм с спливаючим поясненням ніж у вигляді текстового опису.
Уважаемые, извините, что не предупредил раньше, но обращаю внимание, что, хотя на примере в Figma язык интерфейса русский,
язык конкурсного интерфейса - украинский
Шановні, вибачте що не попередив раніше, але звертаю увагу, що, хоча на прикладі у Figma мова інтерфейсу російська,
мова конкурсного інтерфейсу - українська
Система оценки:
5 звезд - победитель
4 звезды - кандидаты на победителя
собственный дизайн (иконки, шрифты, анимации), учтены все пожелания описания к конкурсу
3 звезды - неплохие (2-3 недостатка) рекомпозиции базового (нашего) дизайна или собственного
2 звезды - попытки рекомпозиции базового дизайна или даже собственного с более чем 3-мя недостатками
Система оцінювання:
5 зірок - переможець
4 зірки - кандидати на переможця
власний дизайн (піктограми, шрифти, анімації), враховані всі побажання опису до конкурсу
3 зірки - непогані (2-3 недоліки) рекомпозиції базового (нашого) дизайну або власного
2 зірки - спроби рекомпозиції базового дизайну або навіть власного із більш ніж 3-ма недоліками
Уважаемые, в процессе работы над калькулятором нашли интересную, на наш взгляд, идею компоновки интерфейса, поэтому дальше будут рассматриваться только работы на основе этого макета
Цвет для основного тона темы, используйте, пожалуйста, этот
#AEC670
Колір для основного тону теми, використовуйте, будь ласка, цей
#AEC670

