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

Поскольку от видеоформата я отказался, теперь разборы работ подписчиков будут в текстовом виде. Это будет быстрее, интереснее и качественней. Поехали!

Для начала взглянем на весь макет целиком. Разглядеть его детально не получится в силу особенностей прикрепляемых картинок в телеграфе, поэтому вот ссылка на работу в отличном качестве (без смс и регистрации, ага), а потом я начну разбирать работу поэкранно, сверху-вниз. Также в конце будут общие замечания и советы, которые относятся ко всей работе в целом.

Главный экран

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

Также надпись "MAGIC FOR THE CLIENTS" необходимо сделать другим шрифтом, либо любым иным способом убрать ее схожесть с находящимся выше "OUTSOURCING AGENCY", ведь эта надпись является частью логотипа. В крайнем случае следует опустить надпись о магии раза в 2 ниже, чтобы более явно отделить ее от лого.

Здесь кажется все, спускаемся дальше.

Второй экран

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

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

Таким образом мы экономим колоссальное количество пространства, позволяя пользователю меньше скроллить, а также мы увеличиваем количество информации, которое ему доступно сразу. Может и кнопка "VIEW ALL CASES" уже не нужна? В случае чего можно делать такую конструкцию многоуровневой (со вторым рядом и т.д.)

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

Экран преимуществ

Здесь надо поработать с типографикой:

1. Шрифт залоговка и основного текста должны быть разными, а также должны по разному акцентироваться (подробнее в конце разбора);
2. Нужно сделать трекинг заголовков и основного текста для разрядки;
3. Отступ от заголовка экрана "ADVANTAGES" нужно увеличить или вообще убрать этот заголовок.

На выходе получается примерно такое:

Рассмотреть детальнее в хорошем качестве до и после.

Я сменил гарнитуру основного текста на Montserrat (отличная пара для Rubik), сделал его на 85% непрозрачным, а также применил трекинг ко всем текстам на странице (120 для заголовков и 50 для основного текста).

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

Экран с отзывами и футер

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

Еще старайтесь прорабатывать свои работы на 100%, чтобы в них не было рыбных текстов (lorem ipsum), незаполненных заготовок для аватарок, неправдоподобных мобильных номеров и т.д., если вы конечно хотите положить работу в портфолио.

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

1. Нет единого стиля на сайте. Каждый экран кардинально отличается по стилистике и из-за этого нет ощущения однородности сайта. Старайтесь выдерживать большинство экранов сайта в пределах одного стиля или идеи;
2. Используется всего одна шрифтовая гарнитура (что это такое написано здесь). Старайтесь использовать два семейства шрифтов на сайте. Можно найти и подобрать пару для шрифта на Google Fonts;
3. Разные отступы между экранами. Это сбивает вертикальный ритм и не создает ощущения, что информация на сайте систематизирована;
4. Элементы вылазят за пределы модульной сетки. В случае если сайт сверстают по это макету - все, что находится за сеткой не будет отображаться на подавляющем большинстве устройств. (Скриншот ошибки прилагается).

Заключение

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

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