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

Design Flow

К сожалению автор не смог прислать исходник в PSD, поэтому большинство вещей в этот раз наглядно не получится исправить, но это не помешает мне разобрать все ошибки в этой работе.

Рассмотреть макет в хорошем качестве вы можете здесь, и вот он целиком:

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

Первый экран

1. Главный экран даёт нам информацию о роде деятельности компании и даже разъясняет, что такое "кешбэк" маленьким текстом внизу. Это хорошо, но есть 2 нюанса: эта строка не выровнена относительно текста выше и вместо сухой трактовки понятия "кешбэк" (да, правильно писать именно через "е") лучше интегрировать объяснение в сам заголовок.

Например написать так: "Совершаете покупки в интернете? Возвращайте часть от их стоимости с кешбэк-сервисом №1". Таким образом убиваем двух зайцев: и надпись снизу убрали, и в целом текста на экране стало меньше, осталось лишь самое главное.

2. Нарушена визуальная иерархия на экране. Звёзды рейтинга расположены ко второму заголовку ближе, чем сам второй заголовок к первому. Ох я и закрутил, сейчас постараюсь показать визуально (эх, мне бы исходник в PSD):

С точки зрения семантики и визуальной иерархии, должно быть наоборот, поскольку заголовки относятся друг к другу сильнее, чем к рейтингу, соответственно и отступы должны выбираться исходя их этих соображений. Это довольно трудно объяснить на словах, поэтому как-нибудь напишу об этом отдельно и раскрою тему целиком, давайте к третьему замечанию.

3. Кнопка "Начать экономить". Довольно нерационально делать ее такой большой и выносить за пределы главного экрана, конечно она должна привлекать внимание, но не стоит переусердствовать.

Будет правильнее сделать её поменьше и расположить под заголовком в пределах зоны с фоновой картинкой.

4. Поле поиска слишком близко расположено к логотипу, из-за чего воспринимается как единое целое с ним. Я бы выровнял его между кнопкой "Войти" и логотипом. А еще иконка лупы прилипла к краю поля поиска, но это очевидно, что её нужно подвинуть вправо.

5. При ховере на "Зарегистрироваться" синий прямоугольник слишком сплюснут, необходимо сделать его высоту больше.

Также кнопки входа и регистрации слишком далеко расположены друг от друга, нужно их немного сблизить (кстати, с прошедшим 14 февраля, подписчики 😄).

Второй экран

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

Вообще проблемы с выравниваем прослеживается по всему макету, например здесь в разделе "Как это работает" пункт №2 явно расположен ближе к пункту №1, но скорее всего это просто недочёт автора, так что внимательно проверяйте ваши работы перед отправкой куда-либо.

2. Логотипы платёжных систем нужно усреднить по размеру, т.е. сделать их примерно одинаковыми. Здесь же мы видим, что 1 строка с логотипами явно меньше остальных.

Кроме того, кнопку "Тестовая покупка" необходимо опустить пониже, по причинам всё той же визуальной иерархии. Уж больно она близко расположена к блоку логотипов, даже ближе чем сами логотипы друг к другу, а это в корне не верно. Также высоту этой самой кнопки тоже нужно увеличить, она немного сплюснута и соответственно по ней сложнее попасть курсором мышки.

Третий экран

1. Вертикальный отступ везде разный, раздел "Магазины партнеры" и видео внизу вообще прилипли к серому блоку, в макет нужно добавить воздуха - сделать отступы больше и всё одинаково заровнять.

2. Этот градиент от фиолетового к зеленому выглядит грязновато и не подходит по цвету в целом на всём макете. Он вызывает к себе слишком много ненужного внимания за счёт контраста с белой частью макета. Вместо градиента лучше подошел бы едва сероватый фон.

3. Синие кнопки с кешбэком нужно опустить ниже (да-да, всё та же визуальная иерархия). Кстати с высотой у этих кнопок всё в норме, но написанная капслоком надпись "Кешбэк" напрягает.

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

Отзывы

1. Края белых карточек необходимо закруглить, потому что смотрится не очень аккуратно, а также сделать тень посветлее и слегка увеличить ее смещение.

2. "Читать оригинал" необходимо сделать синей кнопкой чтобы выдержать всё в одной стилистике на сайте.

3. Нужно сделать ограничитель для текста. Что я имею ввиду? На картинке мы видим, что расстояние между основным текстом и кнопкой "Читать оригинал" плавает, в зависимости от количества символов, что не очень хорошо само по себе.

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

4. Выравнивание. Снова.

Пятый экран

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

Также кнопки загрузки из Google Play и App Store я бы чуть-чуть поднял вверх, совсем немного.

Последний экран

1. Здесь кнопки, наоборот, расположены очень низко, на столько, что по семантике они принадлежат футеру, а не разделу с часто задаваемыми вопросами.

2. Белое окно диалога выглядит топорно, лучше сделать вопрос-ответ выпадающим списком.

3. С футером всё в порядке, за исключением отступов.

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

Нужно поработать над отступами и визуальной иерархией, побольше узнать о воздушности и негативном пространстве в дизайне. Детально разобраться с модульной сеткой;
Не сжимать кнопки и следить за соблюдением общей стилистики на сайте;
Использовать несколько шрифтов на сайте. Хоть акценты в тексте и расставлены грамотно за счёт размера и начертаний, я бы рекомендовал использовать несколько шрифтов, особенно если сайт большой и текста на нём много;
Не использовать что-то просто ради вида. Если градиент красиво выглядит, это не значит, что он так будет выглядеть при любом раскладе. Всё должно быть уместно.

Как всегда, желаю автору успехов и много практики.

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