Разбор работы подписчика №3
Design FlowКак всегда, взглянем на макет целиком и перейдём к поэкранному разбору, а в конце подведём итоги.
Благо в этот раз работа не большая, но всё равно оставляю ссылку на хорошее качество, дабы вы могли рассмотреть её более детально.
Первый экран
Хотелось бы начать с определения назначения этого лендинга. Очевидно, что это презентация и продажа автомобиля, а следовательно задача дизайнера состоит в том, чтобы привлечь внимание пользователя, заинтересовать его и преподнести машину в как можно лучшем свете.
1. Итак, главный экран. Оранжевый фон смотрится немного невзрачно, нужно придумать что-нибудь поинтереснее, какой-то паттерн, картинку или на крайняк - модный градиент. Или же подобрать немного другой оттенок для фона.
2. Нужно дать больше воздуха макету и выровнять текст по одной направляющей, примерно так:
3. Большинство текста на этом экране требует разрядки (увеличения трекинга).
4. Надпись "Новый Citroen C4" я бы как-то посильнее выделил, уж больно она теряется среди всего остального, и наоборот, надпись "Встречайте" чрезмерно жирная. Нужно подбирать начертания так, чтобы они контрастировали друг с другом, но в меру.
5. Блок "О новинке". В большинстве своём пользователи не хотят читать много текста, они очень ленивые и в лучшем случае мельком проглядывают основные тезисы на страницах, прокручивая их всё ниже и ниже.
Поэтому разумнее реализовать этот блок, например, стандартными преимуществами (иконка + текст) или же слайдером, на котором не только будет рассказываться о преимуществах новой модели Citroen, но еще и наглядно демонстрироваться. Если сделать для слайдера крафтовые иллюстрации, то будет вообще здорово. Еще пара вариантов - выпадающие списки или таблица.
Разумеется всё вышеописанное в этом пункте необходимо стилизовать на общий манер сайта.
6. Это конечно вкусовщина, но кнопки призыва к действию такого типа уже морально устарели и на порядок приелись пользователям. Ну мне так точно. Уж больно она шаблонная и стандартная.
В отрыве от остального макета, в целом, главный экран (с воздухом и чуть более светлым фоном) смотрится очень даже неплохо. Просто и со вкусом. Если выдержать в такой стилистике весь макет, получится аккуратный "стандартный" лендинг.
Второй экран
1. Слишком тёмная секция. Этот раздел не вписывается в стилистику остальных частей лендинга и чересчур контрастирует с ними за счёт своей темноты. Выглядит чем-то крайне инородным на макете.
2. Левая плашка контрастирует с фоном, правая - полностью с ним сливается. Спорное решение.
3. Опять-таки, нужно больше воздуха и более выраженная визуальная иерархия. Cравните 2 плашки, какая из них более опрятная и читаемая?
Почему именно такие отступы? Я детально расскажу о визуальной иерархии в своей скорой статье, но вкратце: к названию комплектации (G) относятся комплектующие, которые расположены ниже. А уже к этим двум вещам относится кнопка "Попробовать!". Поэтому между "G" и комплектующими отступ меньше, чем между комплектующими и кнопкой.
Если не понятно, то не стоит переживать, в статье я всё наглядно покажу на примерах.
Кстати, автор молодец, что выделяет кликабельные элементы (гиперссылки) на своём макете, это очень важно и многие начинающие дизайнеры об этом забывают. Пользователь должен понимать, на что можно нажать, а на что нет.
Представьте себе сайт, на котором ссылки имеют такой же вид и цвет, как и основной текст, брр, ужас, я бы на такой забрести не хотел.
Третий экран и футер
1. Опять те же самые проблемы с отступами и визуальной иерархией. Элементы на макете выглядит сжатыми.
2. Текст под разделом контактов необходимо заровнять с заголовком. Форму обратной связи тоже.
3. Возможно стоило бы вынести телефон компании на отдельную строку и сильнее акцентировать на нём внимание.
Идея с логотипом Citroen на иконке геолокации прикольная, мелочь, а приятно.
Общие замечания
- Отступы и визуальная иерархия. Нужно разобраться в этой фундаментальной теме. Еще ни один разбор не обходился без косяков на этот счёт;
- Шрифты и их начертания. Не стоит перебарщивать с количеством начертаний шрифта в своей работе. Вы должны определить заранее сколько начертаний и под какие цели вам может понадобиться. Еще стоит попробовать использовать не один шрифт, а несколько. Так вы сможете более явно отделять одни текстовые элементы от других;
- Нужно поработать над соблюдением целостности и единой стилистики макета;
- Необходимо следить за выравниванием элементов и пользоваться модульными сетками, это чертовски облегчает работу.
- Следует находить наиболее оптимальные решения для обеспечения удобства пользователя.
Автору желаю поработать в вышеописанных направлениях и тогда всё будет круто. Как обычно, практика и насмотренность - наше всё.
Предыдущие разборы работ подписчиков: первый, второй.
@Design Flow, дальше - больше.