Kalkulator dla serwisu internetowego Druk-Na-Wymóg

Szanowni Państwo, projektanci🙂

Bardzo dziękuję, że odpowiedzieliście na ten projekt.
Przejrzałem wszystkie wasze prace i zrozumiałem, że moje odpowiedzi będą dość jednorodne i że w warunkach konkursu było za mało konkretów. Zatem, należy dostarczyć pewne wyjaśnienia i doprecyzowania.

Układ
Pomysł rozdzielenia interfejsu kalkulatora na trzy ekrany (etapy) jest dość trafny dla urządzeń mobilnych i być może tabletów, ale dla komputerów stacjonarnych chcielibyśmy zachować możliwość wyświetlania kalkulatora na jednym ekranie. Na przykład, wybierać opcję wyświetlania kalkulatora w backendzie.
Może to pytanie bardziej dotyczy programistów, a nie projektantów.

Kolejność bloków
Najpierw klient wybiera format pliku, z którego będzie drukowana książka.
Format pliku określa, jakiego rozmiaru będzie książka i ile stron będzie miała.
Następnie klient wybiera oprawę (twardą/miękką).
I kolor bloku stron (kolorowy, czarno-biały).

Zatem optymalna kolejność bloków w parametrach książki jest następująca:


Minimalistyczny design
To znaczy rezygnujemy z infografiki, która nie ma funkcjonalności.

Paleta kolorów
Zatrzymaliśmy się na:
jasnozielony - kolor podstawowy;
dodatkowe - według własnego uznania;

Styl
Mniej tekstów, zbyt długich rozwijanych list itp.

Więcej ikon, rozwiązań graficznych, animacji itp.

Przykład:

To menu przy użyciu wyda listę z 12! punktów, ponieważ drukarnia może robić książki do 1200 stron z krokiem 100 stron. Takie rozwiązanie nie będzie wygodne na urządzeniach mobilnych i w ogóle nie wygląda atrakcyjnie.

Wśród waszych rozwiązań są takie:

To lepsze, ale ma pewne wady:
- zajmuje miejsce na ekranie, co jest krytyczne dla urządzeń mobilnych

- jeśli zwiększy się dopuszczalna liczba stron - interfejs będzie musiał być przerobiony

Jest takie rozwiązanie (zrealizowane na stronie fozzyshop.ua):

ekranowego przestrzeni potrzebuje mniej

dowolna liczba, wprowadzona w backendzie, automatycznie rozkłada się na suwaku

Takie oryginalne i ciekawe rozwiązania chciałbym zobaczyć.
Może są jakieś pomysły dotyczące animacji ikon - rotacji, transformacji, podświetlenia, cieni itp.

Шановні пані та панове, дизайнери🙂

Дуже вдячний що ви відгукнулися на цей проект.
Переглянув усі ваши роботи і зрозумів, що мої відповіді будуть досить однотипними і що в умовах конкурсу було замало конкретики. Отже, потрібно надати деякі уточнення і роз'яснення.

Компоновка
Идея рознести інтерфейс калькулятора на три екрани (етапи) досить слушна для моб. пристроїв та можливо планшетів, але для десктопів ми б хотіли забереги можливість відображати калькулятор одним екраном. Наприклад, обирати варіант відображення калькулятора у бекенді.
Можливо це питання більше до розробників, а не до дизайнерів.

Порядок блоків
Сперш клієнт обирає формат файла з якого буде друкувати книгу.
Формат файла визначає якого розміру буде книга і скільки сторінок матиме.
Потім клієнт обирає палітурку (тверду/м'яку).
І колір блоку сторінок (кольоровий, чорно-білий).

отже оптимальний порядок блоків у параметрах книги такий:


Дизайн мінімалістичний
Тобто відмовляємось від інфографіки, що без функціоналу.

Кольорова гама
Зупинились на:
світло-зелений - основний колір;
додаткові - на ваш розсуд;

Стилістика
Менше текстів, занадто довгих випадаючих списків, тощо.

Більше піктограм, графічних рішень, анімації, тощо.

Приклад:

Ось це меню при використанні видасть список із 12! пунктів, бо друкарня может робити книги до 1200 сторінок із шагом 100 сторінок. Таке рішення не буде зручним на моб. пристрої та і взагалі не виглядає привабливо.

Серед ваших рішень є такі:

це краще, але має певні недоліки:
- забирає простір екрану, що є критичним для моб. пристроїв

- якщо збільшиться допустима кількість сторінок - інтерфейс прийдеться переверстувати

Є ось таке рішення (реалізовано на сайті fozzyshop.ua):

екранного простіру потребує менше

люба кількість, введена в бекенді, автоматично розподіляється по бігунку

Отакі оригінальні і цікаві рішення хотілося б побачити.
Можливо є якісь ідеі що до анімації піктограм - ротації, трансформації, підсвітки, тіні, тощо.

Nie było również wyjaśnienia dotyczącego dodatkowych usług:
Wyszukiwanie pliku
Koszt pliku

Już teraz liczba dodatkowych usług wzrosła, dlatego tę opcję również należy uczynić skalowalną.
to znaczy mamy ikonę "Dodatkowe usługi", kliknięcie w nią otwiera pop-up z listą dodatkowych usług.
Listę lepiej zrobić w formie ikon z podpowiedzią niż w formie opisu tekstowego.

Також не було пояснення щодо додаткових послуг:
Пошук файлу
Вартість файлу

Вже зараз кількість додаткових послуг збільшилась, тому цю опцію також потрібно зробити маштабуємою.
тобто маємо піктограму "Додаткові послуги", клік по ній відкриває поп-ап із переліком додаткових послуг.
Перелік краще зробити у вигляді піктограм с спливаючим поясненням ніж у вигляді текстового опису.

Szanowni, przepraszam, że nie powiadomiłem wcześniej, ale zwracam uwagę, że, chociaż w przykładzie w Figma język interfejsu jest rosyjski,
język interfejsu konkursowego - ukraiński

Шановні, вибачте що не попередив раніше, але звертаю увагу, що, хоча на прикладі у Figma мова інтерфейсу російська,
мова конкурсного інтерфейсу - українська

System oceny:
5 gwiazdek - zwycięzca
4 gwiazdki - kandydaci na zwycięzcę
własny design (ikony, czcionki, animacje), uwzględnione wszystkie życzenia opisowe do konkursu
3 gwiazdki - niezłe (2-3 wady) rekompozycje podstawowego (naszego) designu lub własnego
2 gwiazdki - próby rekompozycji podstawowego designu lub nawet własnego z więcej niż 3 wadami

Система оцінювання:
5 зірок - переможець
4 зірки - кандидати на переможця
власний дизайн (піктограми, шрифти, анімації), враховані всі побажання опису до конкурсу
3 зірки - непогані (2-3 недоліки) рекомпозиції базового (нашого) дизайну або власного
2 зірки - спроби рекомпозиції базового дизайну або навіть власного із більш ніж 3-ма недоліками

Szanowni, w trakcie pracy nad kalkulatorem znaleźliśmy ciekawy, naszym zdaniem, pomysł na kompozycję interfejsu, dlatego dalej będą rozważane tylko prace na podstawie tego makietu

Шановні, у процесі роботи над калькулятором знайшли цікаву, на наш погляд, ідею компоновки інтерфейсу, тому далі розглядатимуться тільки роботи на базі цього макета

Kolor dla głównego tonu motywu, proszę użyć tego
#AEC670

Колір для основного тону теми, використовуйте, будь ласка, цей
#AEC670