UXPUB 🇺🇦 Спільнота дизайнерів

Cover image for Стилі дизайну інтерфейсів
Xperience
Xperience

Опубліковано

Стилі дизайну інтерфейсів

Коли Apple представила App Store у 2008 році, це створило революцію в індустрії додатків. З цього дня кожен, хто має комп’ютер, зміг створювати та публікувати свої програми по всьому світу. Щоб відповідати поточним додаткам за замовчуванням в iOS, багато дизайнерів імітували скевоморфний ​​стиль Apple, і це стало стандартом на багато років.

Скевоморфізм

Apple хотіла створити схожість між реальними речами та додатками для iPhone. Це стало однією з причин, чому вони вирішили використовувати скевоморфізм, і багато дизайнерів наслідували приклад. Приклад: значок телефону в Apple імітує телефонну трубку.
Скевоморфізм

Плоский дизайн

Плоский дизайн (Flat Design) дозволяє створювати більш прості дизайни в порівнянні зі скевоморфізмом. Це мінімалістичний підхід до дизайну і вперше був застосований Microsoft у своїй системі Windows. Щоб зазначити програми плоский дизайн створює зображення, подібні до піктограм, а не намагається перенести реальні речі в макет
Плоский дизайн

Неоморфізм

Неоморфізм (від нео-скевоморфізм) виник у результаті поєднання скевоморфізму та плоского дизайну. Neumorphism використовує світло та тіні, щоб створити дійсно чисті інтерфейси. Перейдіть до Neumorphism.io, щоб створити кілька дійсно крутих кнопок!
Неоморфізм

Додаткова інформація

Є цікаве відео, старе, але гарне, про скевоморфізм проти плоского дизайну. Він показує багато цікавих фактів про еволюцію дизайну інтерфейсу користувача.


Створіть неоморфну ​​кнопку

Для цієї вправи ми працюватимемо в Figma, але не соромтеся використовувати свій улюблений інструмент дизайну. Знайдіть логотип Swift. Поруч намалюємо коло розміром 245 * 245, натиснувши O.
Створіть нейроморфну ​​кнопку

Далі додамо до кола лінійний градієнт. У верхньому кінці ми будемо використовувати #F2F6FF, а в нижньому - #FFFFFF. Переконайтеся, що градієнт має діагональ зверху зліва до нижнього правого.
лінійний градієнт

Розмістіть логотип Swift в середині овалу. Тепер надайте дві тіні логотипу Swift, щоб ми могли створити вигляд глибини. Для першої тіні поставте 20 для X і Y, 40 для Розмиття, а для кольору використовуйте #000000 з непрозорістю 40%.
Розмістіть логотип

Для другої тіні додайте такі значення: 250 для розмиття, 0 для X і Y і для кольору #4037D8 з 61% непрозорості.
Для другої тіні

Тепер попрацюємо над нашим овалом. Ми додамо до нього чотири ефекти, щоб створити свого роду 3D-візуал. Спочатку додайте тінь з такими значеннями: для X і Y -31, 62 для Розмиття і для кольору #FFFFFF з 50% непрозорості.
попрацюємо над нашим овалом

Далі додайте Внутрішню тінь з -12 для X і Y, 12 для Розмиття, встановіть колір на #BECCE5 зі 100% непрозорістю.
додайте Внутрішню тінь

Потім додайте нову внутрішню тінь з 6 для X і Y, 12 для Розмиття і #FFFFFF зі 100% непрозорістю.
додайте нову внутрішню

Нарешті, додайте нову тінь для кола, для X і Y давайте поставимо 62, для розмиття 124 і встановимо колір на #D9E1F2 зі 100% непрозорістю. Після того, як ви додасте всі ці параметри, ви помітите, як красиво ми перетворюємо просте коло в нейроморфну ​​кнопку.
перетворюємо просте коло в неоморфну ​​кнопку

Висновок

Як дизайнери, ми відповідальні за розуміння еволюції ринку та за те, куди саме ми повинні спрямувати наші зусилля. "Чого вчитися далі?" — це питання, яке ми повинні постійно собі задавати.

Переклад designcode.io

Топ коментарі (0)

Web Design Junior

Логічне продовження курсу Web Design Beginning. За три місяці перейдемо від створення базових лендингів до роботи над складними сайтами та e-commerce проєктами. Навчимося презентувати роботу клієнту й аргументувати власні дизайн-рішення
Дізнатись більше