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

Я радий повідомити, що ми щойно розпочали цей безкоштовний курс Scrimba з основ дизайну інтерфейсу від Гері Саймона.

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

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

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

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

Останні 20 років Гері був дизайнером інтерфейсу та розробником інтерфейсів, а також керував масово популярним каналом YouTube DesignCourse.

Додатковий текст

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

  • Пробіл
  • Колір
  • Контраст
  • Шкала
  • Вирівнювання
  • Друкарня
  • Візуальна ієрархія

Курс містить поєднання лекцій та інтерактивних завдань кодування, тобто ви фактично створюєте інтерфейси користувача в браузері. Тож перед реєстрацією вам знадобиться базове розуміння HTML та CSS.

Однак, якщо ви тільки починаєте, не хвилюйтеся, існує чудовий курс збоїв у HTML та CSS на Scrimba, який ви можете зробити, щоб викласти деякі основи.

Що стосується початкового налаштування цього курсу - передумов немає! Курс на Scrimba, тому ви можете взаємодіяти з кодом у міру просування курсу.

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

Розділ 1: Простір

На першому уроці ви збираєтеся навчитися використовувати пробіли. Пробіл - це порожній простір між елементами у вашому інтерфейсі.

Додатковий текст

Гері покаже , як за допомогою всього 3 властивості CSS, padding, marginі line-height, ви можете значно поліпшити зовнішній вигляд вашого тексту.

Розділ 2: Вирівнювання

У цьому розділі Гері показує, як вирівнювання може покращити ситуацію з мінімальним кодом. Вирівнювання - це процес забезпечення правильного розташування кожного елемента щодо інших елементів. Знову ж , тільки з 3 властивостями: margin, transformі text-align.

Розділ 3: Карточний виклик

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

У цьому виклику він дасть вам кілька карток, які вам знадобляться для покращення пробілів та вирівнювання.

Завдання 1

Коли ви закінчите, сміливо стрибайте в акторський склад і подивіться, як Гері бере рішення.

Розділ 4: Контраст

У цій трансляції ви дізнаєтесь про контраст. Контраст визначається як перебування у `` разюче '' стані, відмінному від чогось іншого. Гері висвітлить "Вказівки щодо контрасту" та способи забезпечення того, щоб ваш дизайн був доступним для тих, хто має проблеми із зором.

Додатковий текст

Розділ 5: Масштаб

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

Приклад масштабу

Розділ 6: Виправте потворний інтерфейс

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

Виклик 2

Наразі ви вивчили 4 основи дизайну: пробіли, вирівнювання, контраст і масштаб.

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

Розділ 7: Друкарня

Додатковий текст

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

Розділ 8: Колір

Колір - це перший фундаментальний дизайн інтерфейсу, який формує досвід користувача! Гері висвітлює деякі ключові міркування при виборі кольорів для цільової аудиторії, деякі загальні переваги та недоліки та деякі основи поєднання кольорів.

Додатковий текст

Розділ 9: Виклик кольорів

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

Кольори виклик

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

Розділ 10: Візуальна ієрархія

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

Додатковий текст

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

Розділ 11: Виклик візуальної ієрархії

Давайте зараз потренуємось і застосуємо наші знання. Вам дадуть просту картку, і єдина проблема - це її візуальна ієрархія.

Виклик візуальної ієрархії

Спробуйте покращити його якомога більше і обов’язково перевірте, як Гері приймає рішення.

Розділ 12: Остаточний виклик

Ласкаво просимо до нашого останнього виклику глави, виклику дизайну. У вас є цей макет із проблемами у візуальній ієрархії, пробілах, кольорі та вирівнюванні. Ваше завдання полягає у вирішенні цих 4, щоб максимально вдосконалити цей дизайн.

Виклик останньої глави

Закінчивши, ви можете спостерігати, як Гері приймає рішення.

Закриваючі думки

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

  • Пробіл
  • Колір
  • Контраст
  • Шкала
  • Вирівнювання
  • Друкарня
  • Візуальна ієрархія

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

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

Удачі :)