UI-дизайн: Что здесь не так?

Если вы задавались этим вопросом, гуляя по улицам города или пользуясь очередным новомодным приложением, мы вас поздравляем! Вы вступили на путь дизайна! Но есть и плохая новость. Чтобы не превратиться в вечно критикующего брюзгу, и начать по-настоящему влиять на процесс, необходимо предлагать решения по улучшению. Так и поступим сейчас, выполнив задание, которое позволит существенно улучшить внешний вид первого экрана лендинга (сайта-одностраничника).

Представьте себя очень креативным арт-директором с малиновыми волосами ). К вам в кабинет заходит дизайнер-стажер с очередной работой. Давайте поможем ему улучшить её!

Работа выглядела вот так:

Лимит времени: 0 Навигация (только номера заданий) 0 из 4 заданий окончено Вопросы: 1 2 3 4 Информация Посмотрите на предоставленный выше дизайн и предположите, что здесь не так? (выбрать правильные ответы): Вы уже проходили тест ранее. Вы не можете запустить его снова. Тест загружается... Вы должны войти или зарегистрироваться для того, чтобы начать тест. Вы должны закончить следующие тесты, чтобы начать этот: Результаты Правильных ответов: 0 из 4 Время вышло Вы набрали 0 из 0 баллов (0) Рубрики Нет рубрики 0% 1 2 3 4 С ответом С отметкой о просмотре Задание 1 из 4 1. Нарушены основные принципы дизайна (контраст, повтор, приближение, повторение) цвета? Да Нет Правильно да ) Неправильно а если присмотреться? Задание 2 из 4 2. Неудачно использованы цвета (цветовые контрасты плохо воспринимаются из-за чего текст не читабелен)? Да Нет Правильно Все верно ) Неправильно А если подумать? Задание 3 из 4 3. Проблема с типографикой (шрифтовые композиции не гармоничны, недостаточный контраст между главным и второстепенным)? Да Нет Правильно Да, отлично! Неправильно Давайте еще раз посмотрим! Задание 4 из 4 4. Не выдержан тренд (сайт не выглядит модно)? Да Нет Правильно Конечно, и помоднее видали ) Неправильно Мода из комода? ) Давайте еще раз!

Давайте проведем нашего дизайнера-стажера по пути улучшения его работы за несколько шагов.

Как работают основные принципы дизайна мы увидим, поэтапно добавляя один из них (контраст, повтор, приближение и выравнивание) в отрисованный первый экран, показанный дизайнером.

 

 

 

 


Как работает цвет в дизайне рассмотрим на примере все того же первого экрана посадочной страницы. 

 

В первую очередь цвет создает настроение, добавляя эмоции, а во вторых с помощью цвета мы кодируем дополнительные смыслы (красный в интерфейсах “запрещает”, зеленый “разрешает” ).

Как изучать тренды в дизайне интерфейсов? Больше смотреть хороших и плохих работ, например на Behance или Pinterest.

Ну а теперь, постигнув все визуальные тонкости UI-дизайна можно переходить к созданию своего собственного экрана. Сделать это можно с помощью Фигмы.