Коли ми думаємо про дизайн інтерфейсу, ми думаємо про химерні кольори, стилі та макети, і, здається, що це дуже складно зробити. Але давайте подивимося на дизайни, які були створені великими компаніями + зміни, внесені в них поступово, протягом їх розвитку – до 2019 року. Це покаже нам що … що прості дизайни чудово працюють!
На прикладах ряду найпопулярніших додатків ( до 2019 року) ми можемо навчитися створювати поліпшені інтерфейси.
Подивимося на деякі зміни, внесені в ці додатки:
Якщо поглянути на картинку вище, то ми побачимо, як градієнти і 3D-ефекти поступово спрощувались зі зменшенням кількості кольорів і простих іконок.
Аналогічно з додатком Facebook. Видалили “красивенькі” градієнти і почали використовувати прості іконки.
Давайте подивимося на деякі веб-дизайни:
Отже, які висновки випливають із цих дизайнів?
- Простота і всього кілька кольорів
- Відстань між компонентами
- Використання закруглених кутів
- Прості іконки
- Вирівнювання
Давайте повторимо цю еволюція самостійно, на прикладі форми вводу.
Стандартна форма входу в систему:
Тепер давайте помістимо їх у стек і додамо відступ між ними:
Тепер змінимо колір фону, щоб форма трохи виділялася:
Але отриманий результат не виглядає прекрасно. Давайте підкоригуємо його і додамо закруглені кути, рамку і тінь:
Додамо внутрішні поля до полів вводу і трохи змінимо кордон, і додамо закруглені кути.
Тепер форма виглядає красиво і приємно, але кнопка виглядає так собі. Отже, давайте додамо кнопці помітну заливку та пересунемо її праворуч.
Ми можемо бачити, як ці прості зміни зробили дизайн красивим.
***
Спостерігайте за еволюціями та підходами великих компаній із продуманим дизайном. Намагайтеся повторити ці зміни, але з нуля, а не просто бездумно копіюючи чужий дизайн.
Практика, практика і ще раз практика, та вміння спостерігати найкраще навчать вас дизайну 😉
ДУЖЕ РАДИМО ПОЧИТАТИ:
Вправа для генерації дизайнерських ідей: Crazy 8
Як стати дизайнером – безпрограшний рецепт із 25 кроків (Частина 4)
Що я дізнався, створивши дизайн понад 10 000 екранів UI (Частина 2)