Веб відіграє важливу роль у нашому житті. Він скрізь, і кожен ним користується. Сьогодні ми маємо найшвидші з’єднання, миттєве завантаження сторінок і найсучасніші браузери. Ми бачимо чудові дизайни сторінок, безперервні інновації, еволюцію трендів і постійне вдосконалення. Ми з’єднані. Ми живемо в цю епоху технологій.
Фото створено DEEPAI.
Сучасний веб керується величезною кількістю взаємодій та інтенсивного мережевого трафіку. Це включає такі активності, як чати, прямі трансляції, відеоконтент високої якості, веб-клієнти та багато іншого.
Усі ці елементи можуть представляти лише один сегмент вебсайту чи веб-додатку, але вони всі виграють від наявності відповідного дизайну.
Що таке відповідний дизайн?
Ефективний дизайн у розробці програмного забезпечення залежить від кількох ключових аспектів. У цьому пості я виділю деякі важливі елементи, яким я надаю перевагу в окремих сегментах.
- Знати бізнес
- Обрати відповідну кольорову палітру
- Стремітися до використання збирачів модулів, препроцесорів
- Обережно ставитись до змішування бібліотек дизайну
- Навчитися слідувати, але бути унікальним
Знати бізнес
Незалежно від того, чи є це клієнт, зацікавлені сторони, ви чи команда, знання та розуміння бізнесу є вирішальним. Сконцентруйтесь на визначенні мети програмного забезпечення, чому воно розробляється, хто є його аудиторією і яку цінність воно несе.
Перший приклад. Якщо це інтернет-магазин, то також буде кошик для покупок, створіть відмінне представлення для товарів, чудові компоненти для завантажень і спінери.
Другий приклад. Якщо це дашборд для фінансів, то ймовірно будуть різні графіки та форми. Спробуйте уніфікувати їх дизайн, показуючи відповідні обробники сповіщень та повідомлення.
Дисклеймер: деякий час тому я був частиною великої команди з кількома проєктами. Домена була велика дані та аналітика. Ми працювали з величезними наборами даних та аналітикою майже для всього. Як команда ми створили DMS (Design System Manager), відповідальну за уніфікацію всіх додатків у компанії. Ми також запропонували різні адаптери для використання, такі як адаптери для SPA, веб-додатків, вебсайтів і віджетів.
Обрати відповідну кольорову палітру
Це те, що завжди потрібно враховувати. На мою думку, перевірте додаткові кольори для логотипу та дизайну.
Ось деякі з найбільш популярних додаткових кольорів згідно з collors.co
Щодо кольору, я зазвичай люблю бути продуктивним і швидко доставляти продукт. Зазвичай я вибираю Figma, щоб пограти з кольорами і створювати макети дизайну.
Дисклеймер: Я використовую цю можливість, щоб поділитися з вами однією групою безкоштовних шаблонів репозиторіїв, які ви можете використовувати для своїх проєктів. Не соромтеся змінювати, розширювати їх в будь-якому напрямку.
Стремітися до використання збирачів модулів, препроцесорів
Є безліч переваг використання їх, і на вебі є багато підручників на цю тему. Але, щоб узагальнити, вони пропонують:
- Чудову роздільність модулів для обслуговування та повторного використання.
- Покращення завантаження сторінки завдяки мінімізованим вихідним файлам.
- Сумісність між браузерами.
- Вбудовані техніки оптимізації, такі як: Tree Shaking, HMR тощо.
Примітка: Використовувати їх на малих проєктах може здаватися додаванням додаткового навантаження. Але для професійних та виробничих проєктів вони чудові.
Будьте обережні з змішуванням бібліотек дизайну
Я бачив проєкти, що мали повне змішування бібліотек дизайну. Уявіть Bootstrap, Tailwind і Bulma в одному проєкті з компонентами, які використовують усі їх. У період трансформації це може бути доречно, якщо це необхідно, але уникайте цього.
Зосередьтесь на виборі того, що вам підходить найкраще, слідуйте цьому, стилізуйте це і уникайте надмірних залежностей у проєкті.
Щодо рефакторингу та вибору напрямків для оновлень, я можу навести як важливі Atomic Design, BEM, Functional CSS, Modular Design та Розробка компонентів в ізоляції.
Навчіться слідувати, але будьте унікальними
Я зазвичай досліджую підходи до дизайну популярних сайтів. Я бачу ідеї і спостерігаю, як вони намагаються представити дані, які компоненти вони вибирають для дизайну. Це також те, що я рекомендую клієнтам. Легко скопіювати когось і зрозуміти, який напрямок вибрати для дизайну.
Деякі з популярних сайтів:
- https://www.apple.com
- https://www.ebay.com
- https://robinhood.com
- https://www.tesla.com/
- https://www.microstrategy.com
- https://www.amazon.com/
Як веб-дизайнери та розробники, ми повинні намагатися додавати особистий штрих, щось, що дасть унікальність і цінність для клієнтів.
Ви дізналися щось нове?
Сподіваюся, цей пост був корисним і спонукає вас більш критично задуматися над тим, як організувати та проектувати вашу кодову базу. Зважений дизайн не тільки покращує читабельність коду, але й підвищує його підтримуваність та полегшує співпрацю в команді.
Мені було б цікаво дізнатися ваші думки з цього приводу. Чи є у вас особистий досвід або поради щодо організації кодової бази? Будь ласка, поділіться.
Успіхів.
Перекладено з: Importance of appropriate web design in software development