Я радий повідомити, що ми щойно розпочали цей безкоштовний курс 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: Карточний виклик

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Удачі :)