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

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

Представьте себя очень креативным арт-директором с малиновыми волосами ). К вам в кабинет заходит дизайнер-стажер с очередной работой. Давайте поможем ему улучшить её!
Работа выглядела вот так:
Лимит времени: 0
Навигация (только номера заданий)0 из 4 заданий окончено Вопросы:
Информация
Посмотрите на предоставленный выше дизайн и предположите, что здесь не так? (выбрать правильные ответы): Вы уже проходили тест ранее. Вы не можете запустить его снова. Тест загружается... Вы должны войти или зарегистрироваться для того, чтобы начать тест. Вы должны закончить следующие тесты, чтобы начать этот: РезультатыПравильных ответов: 0 из 4 Время вышло Вы набрали 0 из 0 баллов (0) Рубрики
|
Давайте проведем нашего дизайнера-стажера по пути улучшения его работы за несколько шагов.
Как работают основные принципы дизайна мы увидим, поэтапно добавляя один из них (контраст, повтор, приближение и выравнивание) в отрисованный первый экран, показанный дизайнером.
Навигация (только номера заданий)
0 из 1 заданий окончено
Вопросы:
- 1
Информация
Какой принцип здесь сработал (выбрать один правильный ответ)?
Вы уже проходили тест ранее. Вы не можете запустить его снова.
Тест загружается...
Вы должны войти или зарегистрироваться для того, чтобы начать тест.
Вы должны закончить следующие тесты, чтобы начать этот:
Результаты
Правильных ответов: 0 из 1
Время вышло
Вы набрали 0 из 0 баллов (0)
Рубрики
- Нет рубрики 0%
- 1
- С ответом
- С отметкой о просмотре
-
Задание 1 из 1
1.
Какой принцип здесь сработал (выбрать один правильный ответ)?
Названия принципов имеют ассоциативные звучания, поэтому не трудно понять какой, за что отвечает.Правильно
Он самый!
Контраст объясняет, что элементы имеющие разное значение должны быть оформлены по разному. Можно менять цвет, форму, фактуру, размер. Контраст должен быть значительным, иначе это выглядит визуальной ошибкой.Надо также отметить, что акценты дизайнер расставляет самостоятельно, решая из контекста, что главное, а что второстепенно.
Неправильно
А если подумать?
Навигация (только номера заданий)
0 из 1 заданий окончено
Вопросы:
- 1
Информация
Какой принцип здесь сработал (выбрать один правильный ответ)?
Вы уже проходили тест ранее. Вы не можете запустить его снова.
Тест загружается...
Вы должны войти или зарегистрироваться для того, чтобы начать тест.
Вы должны закончить следующие тесты, чтобы начать этот:
Результаты
Правильных ответов: 0 из 1
Время вышло
Вы набрали 0 из 0 баллов (0)
Рубрики
- Нет рубрики 0%
- 1
- С ответом
- С отметкой о просмотре
-
Задание 1 из 1
1.
Какой принцип здесь сработал (выбрать один правильный ответ)?
Правильно
Он самый!
Повтор говорит о том, что все элементы имеющие одинаковое значение, должны быть оформлены одинаково.Неправильно
А если подумать?
Навигация (только номера заданий)
0 из 1 заданий окончено
Вопросы:
- 1
Информация
Какой принцип здесь сработал (выбрать один правильный ответ)?
Вы уже проходили тест ранее. Вы не можете запустить его снова.
Тест загружается...
Вы должны войти или зарегистрироваться для того, чтобы начать тест.
Вы должны закончить следующие тесты, чтобы начать этот:
Результаты
Правильных ответов: 0 из 1
Время вышло
Вы набрали 0 из 0 баллов (0)
Рубрики
- Нет рубрики 0%
- 1
- С ответом
- С отметкой о просмотре
-
Задание 1 из 1
1.
Какой принцип здесь сработал (выбрать один правильный ответ)?
Правильно
Да!
Приближение (от слова «приближать») учит одинаковые по смыслу элементы объединять (приближать) в один блок (контактный блок, контентный блок, хедер, футер).Неправильно
А если подумать?
Навигация (только номера заданий)
0 из 1 заданий окончено
Вопросы:
- 1
Информация
Какой принцип здесь сработал (выбрать один правильный ответ)?
Вы уже проходили тест ранее. Вы не можете запустить его снова.
Тест загружается...
Вы должны войти или зарегистрироваться для того, чтобы начать тест.
Вы должны закончить следующие тесты, чтобы начать этот:
Результаты
Правильных ответов: 0 из 1
Время вышло
Вы набрали 0 из 0 баллов (0)
Рубрики
- Нет рубрики 0%
- 1
- С ответом
- С отметкой о просмотре
-
Задание 1 из 1
1.
Какой принцип здесь сработал (выбрать один правильный ответ)?
Правильно
Да!
Выравнивание говорит о том, что расположение объектов в макете не случайно, а аргументировано (почему этот объект находится здесь?). Для выравнивания удобно использовать 12-ти колончатую систему выравнивания.Неправильно
А если подумать?
Как работает цвет в дизайне рассмотрим на примере все того же первого экрана посадочной страницы.
Навигация (только номера заданий)
0 из 1 заданий окончено
Вопросы:
- 1
Информация
Какой интерфейс читается быстрее?
Вы уже проходили тест ранее. Вы не можете запустить его снова.
Тест загружается...
Вы должны войти или зарегистрироваться для того, чтобы начать тест.
Вы должны закончить следующие тесты, чтобы начать этот:
Результаты
Правильных ответов: 0 из 1
Время вышло
Вы набрали 0 из 0 баллов (0)
Рубрики
- Нет рубрики 0%
- 1
- С ответом
- С отметкой о просмотре
-
Задание 1 из 1
1.
Какой интерфейс читается быстрее?
Правильно
Да, все верно!
Лучше делать интерфейсы светлыми, так как они отображаются на светящемся экране, а белый цвет имеет максимальный контраст, поэтому восприниматься будет лучше.Неправильно
А если подумать?
В первую очередь цвет создает настроение, добавляя эмоции, а во вторых с помощью цвета мы кодируем дополнительные смыслы (красный в интерфейсах “запрещает”, зеленый “разрешает” ).
Как изучать тренды в дизайне интерфейсов? Больше смотреть хороших и плохих работ, например на Behance или Pinterest.
Ну а теперь, постигнув все визуальные тонкости UI-дизайна можно переходить к созданию своего собственного экрана. Сделать это можно с помощью Фигмы.