Короткий посібник з дизайну інтерфейсу для початківців (на доступних прикладах)

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

На прикладах ряду найпопулярніших додатків ми можемо навчитися створювати поліпшені інтерфейси.

Подивимося на деякі зміни, внесені в ці додатки:

Зміни в дизайні додатку Things

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

Еволюція дизайну Facebook

Аналогічно з додатком Facebook. Видалили “красивенькі” градієнти і почали використовувати прості .

Еволюція дизайну Evernote

Давайте подивимося на деякі веб-дизайни:

Отже, які висновки випливають із цих дизайнів?

  • Простота і всього кілька кольорів
  • Відстань між компонентами
  • Використання закруглених кутів
  • Прості іконки
  • Вирівнювання

Давайте повторимо цю еволюція самостійно, на прикладі форми вводу.

Стандартна форма входу в систему:

Тепер давайте помістимо їх у стек і додамо відступ між ними:

Тепер змінимо колір фону, щоб форма трохи виділялася:

Але отриманий результат не виглядає прекрасно. Давайте підкоригуємо його і додамо закруглені кути, рамку і тінь:

Додамо внутрішні поля до полів вводу і трохи змінимо кордон, і додамо закруглені кути.

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

Ми можемо бачити, як ці прості зміни зробили дизайн красивим.

***

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

Практика, практика і ще раз практика, та вміння спостерігати найкраще навчать вас дизайну 😉

За матеріалами: blog.prototypr.io

Вас також ЗАЦІКАВИТЬ:

Залишити відповідь