Вивчіть базовий дизайн інтерфейсу за 5 хвилин

Якщо ви добре знаєте HTML і CSS і хочете створити в браузері чудові інтерфейси користувача, не дивіться далі! У цій статті ви вдосконалите свої навички дизайну інтерфейсу, дізнавшись про наступні сім основ:

  • пробіл
  • вирівнювання
  • контраст
  • масштаб
  • друкарня
  • колір
  • візуальна ієрархія

Ця стаття спирається на безкоштовний курс Scrimba, створений блискучим Гері Саймоном, також відомим як DesignCourse. Курс пропонує набір інтерактивних навчальних посібників, які ви можете пройти у своєму власному темпі та навіть переробити, щоб реально впровадити своє навчання.

Початок курсу: Вивчіть основи дизайну інтерфейсу користувача?

Ми вважаємо, що всі розробники інтерфейсу повинні мати базові навички дизайну інтерфейсу. То в цьому? Звичайно, @designcoursecom вчить вас цьому. Все без використання будь-яких інструментів проектування, лише HTML і CSS.

RT оцінили? // t.co/mT9fDjShUd # 100daysofcode

- Скрімба (@scrimba) 28 січня 2020 р

Тож якщо ця стаття залишає у вас бажання більше, обов’язково ознайомтесь із курсом. Тепер давайте стрибнемо в це!

Пробіл

Перший фундаментальний дизайн, який ми розглянемо, - це Білий космос , також відомий як негативний космос. Як випливає з назви, це простір між елементами на сторінці.

U

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

Ми можемо регулювати пробіли різними способами, включаючи відступ, поля та висоту лінії. Перегляньте зображення до та після, щоб побачити, яку різницю може мати ефективний простір.

До та після коригування пробілів

Вирівнювання

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

U

Як видно з наступних зображень, перша сторінка з елементами в безлічі різних стовпців (слабке вирівнювання) набагато менш приваблива і читабельна, ніж друга, яка має сильне вирівнювання

Сторінка зі слабким вирівнюваннямСторінка з сильним вирівнюванням

Контраст

Важливо також враховувати контраст при створенні сторінки чи програми. Контраст - це різниця між кольорами, які відображаються поруч один з одним на сторінці.

U

Як видно з цього прикладу, сторінки з поганою контрастністю важко читати, а елементи не виділяються.

Сторінка з поганою контрастністю

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

Приклад хорошого контрасту

Щоб допомогти вам отримати правильну контрастність, WCAG (Правила доступності веб-вмісту) пропонує мінімальний коефіцієнт контрастності (AA) принаймні 4,5: 1 або 3: 1 для великого тексту або покращений коефіцієнт контрастності (AAA) 7 : 1 або 4,5: 1 для великого тексту. Існує цілий ряд плагінів або веб-сайтів, щоб перевірити це.

Шкала

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

U

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

Сторінка з поганим масштабомПриклад хорошого масштабу

U

Друкарня

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

U

Як правило, використовуйте не більше 2 сімейств шрифтів на одній сторінці та забезпечуйте взаємодію різних аспектів для встановлення порядку важливості. Це відомо як візуальна ієрархія , про яку ми докладніше розповімо нижче.

U

Якщо ви будете слідувати цим порадам, ваша сторінка буде виглядати так само добре:

Приклад гарної типографіки

І не заплутане і нечитабельне, ось так:

Сторінка з поганою типографікою

Колір

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

Будьте обережні з кольором. Значення в різних культурах різняться, тому завжди робіть дослідження та враховуйте цільову аудиторію при виборі кольорів.

U

Важливо також пам’ятати, що забагато кольорів може створити поганий інтерфейс, і кольори, які ви вибрали, повинні доповнювати один одного. Як правило, ви не можете помилитися, використовуючи світлі або темні варіанти одного і того ж відтінку поруч. Просто подивіться, наскільки легше на око друге зображення нижче порівняно з першим!

Сторінка з поганим вибором кольорівГарне використання кольору

U

Візуальна ієрархія

Останнім пунктом нашого списку Основ дизайну є Візуальна ієрархія . Деякі елементи інтерфейсу користувача важливіші за інші. Візуальна ієрархія дозволяє нам встановити це значення.

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

Сторінка з поганою візуальною ієрархієюВикористання типографіки та кольору для встановлення візуальної ієрархії

Загорнути

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

Курс Основи дизайну інтерфейсу

Якщо ви хочете детальніше вивчити ці теми, перегляньте безкоштовний курс "Основи дизайну інтерфейсу" в Scrimba. У ньому ви дізнаєтесь про основи набагато детальніше.

Удачі та щасливого кодування :)