dmknyazev

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

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

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

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

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

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 хорошо расписал, что визуально сразу режет глаз.

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

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

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

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

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

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

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

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