Жавохир:

Привет Алексей.

Меня зовут Жавохир. Я — самоучка дизайнер с опытом полтора годика). Давно слежу за твоим блогом и мне нравиться формат «Разбор работ» в которых ты детально и четко описываешь косяки и даешь советы.

Сделал редизайн главной страницы «Тройка». Если будет время и желание, можешь-ли разбор сделать? Очень нужен фидбек от тебя!

С уважением, Жавохир


Привет

Получилось более менее в банковской стилистике, которая хорошо подходит. Но копируя Тинькова, ты не дотянул до него 🙂


Глобальненькое

Плохо, когда ширина контента в блоках разная:

Лучше, если линия контента будет совпадать по всей странице. Как правило, поуже делают текстовые блоки из-за того, что длинные строки читать неудобно. Поэтому в блогах, новостных сайтах или просто текстовых страницах «о компании» / «о нас» и др. часто можно увидеть твой вариант.

Плохо выравнивать на глаз. Вот твои заголовки и у всех сверху разные отступы от предыдущих блоков:

Глянь гифку: насколько аккуратнее выглядит страница, если дизайнер следит за отступами:


Хедер

  • Мужик слишком далеко от текста. Как будто они сами по себе и друг с другом никак не связаны. Более того, его надо бы развернуть к заголовку, а сейчас он отвернулся.
  • Как следствие по центру образовалась дырища.
  • Фон неудачный. По центру заблюренный желтый щит кажется швом, соединяющим неудачную попытку составить фото из двух частей. Огромная дырка из предыдущего пункта только усиливает этот эффект.

Про карту

  • Пиктограмма электропоезда получилась инвертированной. Другими словами, из другого набора. Иконки можно сделать сильно больше. Чтобы мгновенно считывалась разница, и взгляд цеплялся не за круги, а за пиктограммы.
  • Слушай, ну карта «тройка» совсем не такая как у тебя:
  • А твой вариант выглядит слишком не реалистичным что ли.


Преимущества

  • Лучше и аккуратнее будут смотреться карточки одинакового размера.
  • Полоски по центру кроме лишнего гемора верстальщику ничего не дадут. Никакой смысловой нагрузки в них нет. Это просто дизайн ради дизайна. Можно смело убрать.
  • Три иконки получились слишком похожими друг на друга.
  • Интерлиньяж я не менял, но он у тебя слишком неуверенный — строки лезут друг на друга. Вообще, советую не использовать его меньше, чем «auto», пока сам не разберешься со всей этой историей.

Форма

  • В течениЕ
  • Мужик сливается с фоном. Но еще грустнее от того, что и форма сливается с ним. Ее вообще не видно. В блоке явные проблемы с контрастом.
  • Чекбокс может быть только квадратной формы. Круглый — это радиокнопка, а не чекбокс!
  • Ссылка «Узнать подробнее» неактивна? Что нужно сделать, чтобы она стала доступна? Серый цвет ссылки рядом с голубой, означает, что ее нельзя нажать по какой-то причине.
  • Три раза «Ваш/Ваши» — все три можно выпилить. И так понятно о чем речь. Даже монголов меньше на одном квадратном километре 🙂
  • У кнопки некрасивые пропорции.

Тарифы

  • Как-то много текстовых стилей у тебя получилось.
Кто сколько тут стилей насчитал?
Я насчитал… (нажми)

Восемь:

  • Заголовок
  • Подзаголовок
  • Серый текст в шапке таблицы
  • Черный текст в шапке таблицы
  • Синий текст в шапке таблицы, да еще и заглавными буквами
  • Стиль цен отличается по цвету от черного текста в шапке таблицы
  • Размер синих ссылок в таблице больше, чем у ссылок в шапке таблицы
  • Смотреть таблицы полностью — есть подчеркивание, но размер меньше ссылок внутри таблицы
  • Если речь про выбор и про тарифы, то лучше использовать таблицу прайсов (price table):


Вторая форма

  • Почему-то формы выглядят по-разному на одной странице. Должен же быть эффект повтора, а не эффект двух разных дизайнеров, работающих над одной страницей.
  • Ну и тут все тоже самое: Ваш, круглый чекбокс, некрасивые пропорции кнопки.
  • А еще верстальщику надо показывать активный инпут (когда вводим текст: например меняем контур на синий цвет, а фон делаем белый).

Пополнение

Снятие
Пополнение
  • Монетки надо развернуть. Если движение вправо и вниз — это уменьшение, а значит снятие, а не пополнение.
  • Иконки снова слишком похожи друг на друга и не раскрывают тему до конца.
  • Как и в случае с разными формами, у тебя получилось сделать разные стили иконок (в данном случае разные стили текстов у них):


Футер

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

    Тоже восемь:

    • Текстовое лого
    • Синие пункты меню
    • Подзаголовки у ссылок
    • Ссылки
    • Телефон
    • Текст под телефоном
    • Копирайт сайта
    • Копирайт дизайнера

    Для одного небольшого блока — жирненько 🙂 И это у тебя еще ховеры не показаны. Как минимум, копирайт дизайнера, копирайт сайта и текст под телефоном запросто можно сделать одним стилем.

  • Еще загляни в заметку про толщину соц. иконок

Совет

  • Учись повторять стили.
  • Но держи себя в руках и не делай винегрет из большого количества стилей в одном блоке.
  • И не привыкай выравнивать на глаз.

Возможно, тебе будет интересно посмотреть другие фидбеки.
Хочешь получить совет? Пиши 🙂

Оставить комментарий

Такая эл. почта уже зарегистрирована. Воспользуйтесь формой входа или введите другую.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.