Коли ми думаємо про дизайн інтерфейсу, ми думаємо про химерні кольори, стилі та макети, і, здається, що це дуже складно зробити. Але давайте подивимося на дизайни, що здаються нам привабливими і створені великими компаніями, і зміни, внесені в них у міру їх розвитку. Ми дізнаємося, що прості дизайни чудово працюють.
На прикладах ряду найпопулярніших додатків ми можемо навчитися створювати поліпшені інтерфейси.
Подивимося на деякі зміни, внесені в ці додатки:
Якщо поглянути на картинку вище, то ми побачимо, як градієнти і 3D-ефекти поступово спрощувались зі зменшенням кількості кольорів і простих іконок.
Аналогічно з додатком Facebook. Видалили “красивенькі” градієнти і почали використовувати прості іконки.
Давайте подивимося на деякі веб-дизайни:
Отже, які висновки випливають із цих дизайнів?
- Простота і всього кілька кольорів
- Відстань між компонентами
- Використання закруглених кутів
- Прості іконки
- Вирівнювання
Давайте повторимо цю еволюція самостійно, на прикладі форми вводу.
Стандартна форма входу в систему:
Тепер давайте помістимо їх у стек і додамо відступ між ними:
Тепер змінимо колір фону, щоб форма трохи виділялася:
Але отриманий результат не виглядає прекрасно. Давайте підкоригуємо його і додамо закруглені кути, рамку і тінь:
Додамо внутрішні поля до полів вводу і трохи змінимо кордон, і додамо закруглені кути.
Тепер форма виглядає красиво і приємно, але кнопка виглядає так собі. Отже, давайте додамо кнопці помітну заливку та пересунемо її праворуч.
Ми можемо бачити, як ці прості зміни зробили дизайн красивим.
***
Спостерігайте за еволюціями та підходами великих компаній із продуманим дизайном. Намагайтеся повторити ці зміни, але з нуля, а не просто бездумно копіюючи чужий дизайн.
Практика, практика і ще раз практика, та вміння спостерігати найкраще навчать вас дизайну 😉
За матеріалами: blog.prototypr.io
Вас також ЗАЦІКАВИТЬ: