Детальний вміст дизайн-проєкту «УКРМІНХІМ»

Вітаємо

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

Дизайн-проєкт можна продивитись по цьому посиланню у дизайн онлайн-програмі Figma:

👉 Переглянути у Figma

Зверніть будь ласка увагу, що це — макет сайту. Анімації та інтерактивність будуть додані саме на сайті, це не складно. Наразі треба узгодити дизайн, тобто макет сайту

Вигляд анімацій можна переглянути на проєкті M+D Dental:
https://md-dental.in.ua

Рекомендую заходити з компʼютера, щоб були видні підказки:

Розібʼємо опис на 2 половини: публічні сторінки і кабінет.

1. Публічні сторінки

Кожна сторінка буде мати чимало анімацій –– поява тексту, декоративних фігур, інтерактивні елементи - на прикладі як ви можете побачити на інших моїх проєктах, гарним прикладом є сайт для M+D Dental.

Загальний вигляд легко оцінити і самому, тут розповім про детальні інтерактивні моменти (які описані у підсказках)

Головна сторінка

Зустрічає Вас задній фон, який буде мати висоту рівно 100% висоти екрану, і заголовок, опис, кнопка - які будуть плавно зʼявлятися на сторінці, як і весь текст на сторінках. Мобільна адаптація звичайно пристуня.

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

Наступний крок - відео. Можна додати щось по типу відео з компанії, ферми, або склада, якщо є. Або просто прибрати цей блок.

Далі - офіси. Кожна картка буде періодично підсвічуватись (як у дизайн макеті - у м. Суми), щоб можна було помітити деталі. Якщо навести курсором - підсвічення і поява тексту зафіксуються.

Наступний крок - партнери. Їх можна додати, видалити, змінити через адмін-панель — що і більшість з контенту на сайті, бо я його зроблю динамічним — щоб коли будуть зміні, можна було легко внести правки, без потрібності знання коду.

На кінець цієї сторінки — блок Чому саме ми та CTA (call to action - заклик до дії).

Сторінка продукції

Тепер продукція. Тут досить цікаве знайшов рішення. По перше, цільова аудиторія — фермери.

На початку Вас зустрічає гарне зображення та заголовой сторінки. Це все буде анімовано безпосередньо в сайті, щоб все зʼявлялось плавно та гарно.

Далі — блок вибору агрокультури. Наприклад, якщо фермер обере "Картопля", йому покаже добрива лише для картоплі. Через це — фільтрація робиться дуже простою і фермеру не потрібно досліджувати характеристику кожного добрива. А час перебування клієнта на сайті дуже ціниться, треба все зробити так, щоб можна було максимально просто і швидко знайти те, що треба.

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

Сторінка складів

Тепер — склади. Тут також реалізував досить інтерактивну функцію.

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

На самій карті, що на сайті, можна побачити маркера. Але це не просто картинка карти з маркерами. Маркера — інтерактивні. Якщо натиснути на маркер наприклад у Сумах, то сторінка прокрутиться до детальної інформації про склад, що нижче:

В нашому випадку — до складу у м. Суми, і підсвітить його.

Також можна додати, що картки зі складами реалізовані досить цікаво. Не просто сітка — а 2 незалежних блоки, в яких картки різної висоти, але кінцевий результат всього блоку практично однаковий.

Маркера, склади, інфа про них також редагується через адмін-пнель, що робить сайт достить гнучким.

Сторінка контактів

Переходимо до контактів. Тут все зрозуміло та інтуїтивно.

Зустрічують, як можете бачити, блоки з офісами. Все гарно і лаконічно

Нижче — форма для зворотноього звʼязку, як один із методім контакту:

Повідомлення будуть надходити на email менеджера, зберігатися у адмін-панелі, та можу запроновувати варіант — надходження у Телеграм-боті до менеджерів, щоб була можливість швидко відгукнутися.

Сторінка Про нас

На кінець цієї частини — сторінка Про нас. Тут взяв контент з Вашого теперішнього вебсайту. В цілому як на мене вийшло ок. Можете самі й оцінити.

Не забув про блок "Увага Шахраї", який взяв з вашого теперішнього сайту.

На цьому половина "Публічні сторінки" закінчилась. Звичайно буде й мобільна адаптація.

Це було лише 50% сайту, інша частина — у кабінеті.

2. Кабінет

Переходимо до кабінету. Розповім зараз про більш закриті елементи вебсайту.

Вхід до кабінету

Потрапити на сторінку входу можна буде через Навігацію (меню зверху) за такою кнопкою:

Сторінка входу передбачає вхід до кабінету як клієнтам, так і співробітникам — просто у кожного клієнта та співробітника буде свій власний логін та пароль.

Кнопка "Для адміністраторів" перенапрвляє на сторінку з адмін-панелі, там буде своя форма входу де потрібно вести логін та пароль адміністратора сайту.

Логіни та паролі для клієнтів й співробітників пропоную створювати власноруч через адмін-панель. Там це робиться дуже легко. Але можу і додати форму реєстрації.

Адмін-панель

Також передбачана адмін-панель (панель адміністрування сайтом) — за допомогою якої буде можливість:

• Редагувати динамічний контент на сайті (як продукцію, склади, маркера складів, партнерів тощо).
• Переглядати отримані повідомлення — вони будуть збережені у базі даних.
• Створювати нових користувачів (клієнт, співробітник) та їх редагувати.

До прикладу, візьму адмін-панель з сайту M+D Dental:

Можете продивитися як воно виглядає. Також немало тут в адмін-панелі є функцій, зокрема робота з користувачами, але щоб не затягнути цю сторінку скріншотами, прикріпив саме основне — для ознайомлення.

Інтеграція з 1С та кабінети

Інтеграція з 1С буде проводитися у кінці, але згадувати про неї потрібно буде весь час розробки. Якщо у Вас є співробітник 1С, який зможе налагодити інтеграція з 1С через API (HTTP-сервіс), то проблем немає.

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

Звʼязок

Для контакту зі мною можете використовувати такі методи:

• Телеграм: @wwenttyy (посилання тут)
• Електрона пошта: theandrei.it@gmail.com
• Номер телефону: 0993072020

Радий до зворотнього звʼязку. Тихого неба!