Оцените пожалуйста вёрстку(2)?

Question

[dmknyazev]

Всем привет.
Несколько месяцев назад просил оценить вёрстку, какие ошибки и т.д.
1 макет тогда был не адаптирован, теперь оба сделал адаптивно.
Как вам? И что я сделал опять не так?

Первый
Второй

Во втором некоторые изображения размазанные - такие они в шаблоне были

Answer 1

[Ivan Bogachev]

Замечание номер раз: код минифицирован, не смотрел.
Замечание номер два: макеты не видел, возможно местами накосячил дизайнер.

Беглый просмотр дал следующее:

№1:
- Шрифтыыыы... Arial - это боль. Вы, вероятно, забыли подключить нужный шрифт
- Иконки социальных сетей слишком маленькие, сложно попасть, можно поболее сделать
- Две иконки одинаковые, нехорошо, путает
- В поле для поиска серым по серому написано - не видно
- Гамбургер есть, но что он делает - не понятно
- В карусели, при нажатии на точки появляется ненужный outline
- В поле для поиска иконка съехала
- Размер шрифта в одинаковых элементах скачет
- Вертикальные отступы скачут
- При адаптиве картинки плющатся
- Какие-то ошибки в консоли

№2
- Такое впечатление, что навигация и текст под ней выровнены не по левому краю
- Так и хочется, чтобы кнопка с рыжей границей при наведении стала вся рыжей, как это обычно и делают
- Выпадающая выбиралка языка и валюты пропадает, ее нельзя использовать мышкой
- Два поля для поиска на одном экране? Хотя это косяк дизайнера, ладно
- Какие-то иконки с сердечками, вопросиками и.т.д. Нужно по крайней мере добавить всплывающие подсказки, что это вообще такое
- Плюс и минус подсвечиваются как одна кнопка
- Интерактив никакой не работает, нужно доделывать
- Имеется непостоянство в подсвечивании элементов при наведении
- Скидки в 70%, круто! Эээ.. А где тут кнопка "показать товары со скидкой"?
- Внезапный шрифт с засечками
- Внезапные серые бордеры, когда только что в такой же секции их не было
- Вертикальные отступы опять везде пляшут
- Белый по желтому не читается
- Опять внезапное выравнивание влево, когда только что в такой же секции было по центру
- Подпишитесь на рассылку! Ввожу почту и понимаю, что кнопки "подписаться" там нет. Fail.
- На телефоне в подвале все выравнивание скачет влево-вправо

Совет номер раз: почитайте про дизайн для недизайнеров и книги от Nick Kolenda, чтобы лучше понимать, где что-то явно не так и имеет смысл поправить.

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

Совет номер три: изучайте JS и доделывайте интерактивные элементы, чтобы ими можно было пользоваться. Не стоит это дело откладывать в черный ящик, работодателям чисто верстка без скриптов нужна очень редко.

Comments

[dmknyazev]

Спасибо за советы и критику. Буду учиться дальше.

Answer 2

[kyzinatra]

Что можно сказать. Сами дизайны конечно не новы, но так понимаю не твои , так что проехали, но в будущем постарайся выбрать по лучше.
В 1 макете меню нужно сделать скрываемым, а иконки делать в формате svg.
Во 2 некоторые цены перечеркнуты, а новой цены нет, калькулятор лучше сделать рабочим, это не так сложно.

Answer 3

[Alex Pospeliri]

Правило дизайн не обсуждаю, но тут конечно дизайн просто финиш, очень жаль при оценке верстки тяжело отключить визуальную составляющую, и не понятно где косяки дизайна а где верстки.
Исхожу из того что это пиксель перфект :)
Если хочешь чтобы оценили верстку нужны исходники.

1.Кнопка 'Show me More'
class='btn get-tools__btn'
меняем на
class='btn btn--get-tools', все кнопки в отдельный файл.
2.Моя рекомендация, если есть container, и есть секции на 100% ширины экрана то лучше сделать для них класс container-fluid (отдаем должное Boostrap).
3.Тексты, заголовки и.т.д. Можно делать вложенные по БЕМ, или если страниц много и тексты в разных местах повторяются то
h2 class="collection__title"
меняй на
h2 class="text text--50 text--red text--lh-1"
4.Navbar не хватает ховеров, на флаги и на социальные ссылки.
5.Про отсут слева и выпадающие меню тебе уже сказали.
6. Слайдер не работает :(
7. При клике на элемент слайдера, появляется рамка, а почему у рамки сверху не закруглены края ?
8. quantity__events ховер срабатывает сразу не две кнопки, плюс и минус как то странно, и кнопки не работают.
9. CSS медиа лучше сразу писать к нужному элементу.
10.Скриптов мало, скрипты не сжаты.

Верстка по БЕМ в целом все хорошо, на медиа не разваливает.
Классы названы хорошо читаемо, есть контейнеры, ховеры, даже анимацию добавил ;), иконки через классы на бэкграунды, html/css сжат.

P.S. Ivan Bogachev хорошо расписал, что визуально сразу режет глаз.

Answer 4

[Анатолий Куликов]

Присоединяюсь к Ivan Bogachev, особо добавить даже нечего особенно, так по мелочи резанули такие вещи:

В первом:
- Очень маленькие иконки соцсетей, в них мышкой сложно попасть (те, которые наверху)
- У постов/записей картинки не имеют ссылок. Опыт показывает, что достаточная часть пользователей будет нажимать на картинки, а не на текст.
- У footer'a padding-bottom аж 140px, это многовато.
- Мобильное меню - есть, но не работает. Это нужно исправлять.
- В мобильной версии записи из aside-posts не во всю ширину, что неприятно контрастирует с соседними элементами.

Во втором:
- Это видимо дизайн такой.... Две плашки выглядят, как будто неверно отрисовался компонент заголовка или его два раза вывело.
- Первый блок по левому краю не соотносится с остальными.
- Социальные кнопки такие же неудобно маленькие. Вообще желательно таким кнопкам добавлять с помощью padding область, которая так же будет активна и соотнесена с этой кнопкой и позволит снизить число "промахов" у пользователя.
- Качество изображений. Да, это демо-версия, тренировочная работа. Но визуал делает своё дело.

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