Разбор работы подписчика №3

Как всегда, взглянем на макет целиком и перейдём к поэкранному разбору, а в конце подведём итоги.

Благо в этот раз работа не большая, но всё равно оставляю ссылку на хорошее качество, дабы вы могли рассмотреть её более детально.

Первый экран

Хотелось бы начать с определения назначения этого лендинга. Очевидно, что это презентация и продажа автомобиля, а следовательно задача дизайнера состоит в том, чтобы привлечь внимание пользователя, заинтересовать его и преподнести машину в как можно лучшем свете.

1. Итак, главный экран. Оранжевый фон смотрится немного невзрачно, нужно придумать что-нибудь поинтереснее, какой-то паттерн, картинку или на крайняк - модный градиент. Или же подобрать немного другой оттенок для фона.

2. Нужно дать больше воздуха макету и выровнять текст по одной направляющей, примерно так:

3. Большинство текста на этом экране требует разрядки (увеличения трекинга).

4. Надпись "Новый Citroen C4" я бы как-то посильнее выделил, уж больно она теряется среди всего остального, и наоборот, надпись "Встречайте" чрезмерно жирная. Нужно подбирать начертания так, чтобы они контрастировали друг с другом, но в меру.

5. Блок "О новинке". В большинстве своём пользователи не хотят читать много текста, они очень ленивые и в лучшем случае мельком проглядывают основные тезисы на страницах, прокручивая их всё ниже и ниже.

Поэтому разумнее реализовать этот блок, например, стандартными преимуществами (иконка + текст) или же слайдером, на котором не только будет рассказываться о преимуществах новой модели Citroen, но еще и наглядно демонстрироваться. Если сделать для слайдера крафтовые иллюстрации, то будет вообще здорово. Еще пара вариантов - выпадающие списки или таблица.

Разумеется всё вышеописанное в этом пункте необходимо стилизовать на общий манер сайта.

6. Это конечно вкусовщина, но кнопки призыва к действию такого типа уже морально устарели и на порядок приелись пользователям. Ну мне так точно. Уж больно она шаблонная и стандартная.

В отрыве от остального макета, в целом, главный экран (с воздухом и чуть более светлым фоном) смотрится очень даже неплохо. Просто и со вкусом. Если выдержать в такой стилистике весь макет, получится аккуратный "стандартный" лендинг.

Второй экран

1. Слишком тёмная секция. Этот раздел не вписывается в стилистику остальных частей лендинга и чересчур контрастирует с ними за счёт своей темноты. Выглядит чем-то крайне инородным на макете.

2. Левая плашка контрастирует с фоном, правая - полностью с ним сливается. Спорное решение.

3. Опять-таки, нужно больше воздуха и более выраженная визуальная иерархия. Cравните 2 плашки, какая из них более опрятная и читаемая?

Почему именно такие отступы? Я детально расскажу о визуальной иерархии в своей скорой статье, но вкратце: к названию комплектации (G) относятся комплектующие, которые расположены ниже. А уже к этим двум вещам относится кнопка "Попробовать!". Поэтому между "G" и комплектующими отступ меньше, чем между комплектующими и кнопкой.

Если не понятно, то не стоит переживать, в статье я всё наглядно покажу на примерах.

Кстати, автор молодец, что выделяет кликабельные элементы (гиперссылки) на своём макете, это очень важно и многие начинающие дизайнеры об этом забывают. Пользователь должен понимать, на что можно нажать, а на что нет.

Представьте себе сайт, на котором ссылки имеют такой же вид и цвет, как и основной текст, брр, ужас, я бы на такой забрести не хотел.

Третий экран и футер

1. Опять те же самые проблемы с отступами и визуальной иерархией. Элементы на макете выглядит сжатыми.

2. Текст под разделом контактов необходимо заровнять с заголовком. Форму обратной связи тоже.

3. Возможно стоило бы вынести телефон компании на отдельную строку и сильнее акцентировать на нём внимание.

Идея с логотипом Citroen на иконке геолокации прикольная, мелочь, а приятно.

Общие замечания

1. Отступы и визуальная иерархия. Нужно разобраться в этой фундаментальной теме. Еще ни один разбор не обходился без косяков на этот счёт;
2. Шрифты и их начертания. Не стоит перебарщивать с количеством начертаний шрифта в своей работе. Вы должны определить заранее сколько начертаний и под какие цели вам может понадобиться. Еще стоит попробовать использовать не один шрифт, а несколько. Так вы сможете более явно отделять одни текстовые элементы от других;
3. Нужно поработать над соблюдением целостности и единой стилистики макета;
4. Необходимо следить за выравниванием элементов и пользоваться модульными сетками, это чертовски облегчает работу.
5. Следует находить наиболее оптимальные решения для обеспечения удобства пользователя.

Автору желаю поработать в вышеописанных направлениях и тогда всё будет круто. Как обычно, практика и насмотренность - наше всё.

Предыдущие разборы работ подписчиков: первый, второй.

@Design Flow, дальше - больше.