ux ui

1.

2.

3.

4.

5.

• Инструменты UI дизайна очень легко
выучить, но сложно научиться применять их
на практике

6. Для успешного изучения нужно понимать что именно нужно делать

7.

• ОСНОВЫ
• ПРОЦЕДУРЫ
• РЕУРСЫ

8.

9.

10.

11.

• Как на счет того чтобы разобрать процесс
создания сайта для сбора референсов
дизайн элементов

12. Такие как эти

13.

14.

15.

16. Пользовательская история

17.

18.

19. Этот этап проекта самый важный и требует серьёзного мышления и анализа пользовательского поведения

Мы
можем
начать
«набрасывать»
визуальную схему наших экранов и в
процессе у нас появятся предметная
возможность поразмышлять над функциями
в проекте и его аналитикой
Этот этап проекта самый важный и
требует серьёзного мышления и
анализа
пользовательского
поведения

20.

21.

22.

23. Нам нужна навигация в шапке и подвале

24.

25.

26.

27. Также мы хоти показать различные дизайны на свободной части экрана

28. Сетка, ссылка, название, превью

29.

Только что мы реализовали наш исследуемый
и сформулированный пользовательский опыт
в макетах
Это и называется UX-Дизайном

30.

31.

32.

• Здесь мы работаем над визуальным
оформлением

33.

Каждый дизайн проект основан на
гайдлайне.
Гайдлайн– это руководство по использовании
элементов, которая определяет повторное
использование компонентов и стили
• Цвета
• Шрифты
• Иконки
• Кнопки
• Карточки
• Формы и т.д.

34.

35. Цвета

Они должны подходить к теме проекта и
желательно иметь какую-то брендовую
идентичность(например использовать цвета
из логотпа)

36.

• Например в этом проекте я знаю что хочу
использовать темную тему с нейтральными
цветами такими как: Чёрный, белый,
серый, и одним акцидентным
цветом(ярким)

37. Realtime Colors

38. Как правило вы хотите чтобы ваши цвета были многофункциональными и находились на абсолютно любую задачу

39. Шрифты напрямую влияют на считываемость в проекте

Плюсом могут создать
определённое настроение

40. Забавный

41. Элегантный

42. Серьёзный

43. Детский

44. И… Ёмаё… Как это вообще сюда попало?

45. Realtime Colors

Также Realtime Colors может помочь понять
какие шрифты из google fonts нам могут
подойти

46. Тypescale

47.

48. Иконки

49. Flat, скевоморфизм, 3D, двух тональные, контурные и т.д.

50. Кнопки, иконки, карточки с предложением

51. Behance

52. Dribbble

53. 6 принципов дизайна

54.

55.

56.

57.

58.

59.

60.

• Заполнить проект смыслами используя
копирайтинг и маркетинг(желательно
использовать контент который будет
использоваться в проекте или максимально
на него похожий)
• Помогает с тестирование и создает
реалистичные ожидания от разработки +
ваше портфолио будет выглядеть более
достойно