Итак, друзья, сегодня я приступил к макету TripFinder.

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

Ну да ладно. За сегодня я сделал разметку (она здесь) и нарезал картинки. В итоге получится примерно вот это (почему примерно - потому что вёрстка будет резиновой, и размеры, естественно, будут совпадать только на одной ширине экрана).

Итак, в данном макете я, во-первых, удержу нынешнюю планку своих навыков, достигнутую на ux energy, а во-вторых, дополнительно сделаю:

• Именование классов по BEM (потренирую методологию);
• Полностью резиновая верстка (в предыдущем макете я сделал сперва pixel perfect, а потом уже появился "гибрид"). Цель-максимум - сделать абсолютно все (в разумных пределах!) блоки резиновыми, предусмотрев их поведение при масштабировании.
• (посильно) Сделать скрипты, предусмотренные макетом для интерактивности (да-да, с js пока всё не очень хорошо, естественно, его надо тоже тренировать :) )

Ну, и несколько слов по самому макету.

• Существующая разметка сделана только кое-где с классами. Это нормально, поскольку теперь продумываю, как именовать блоки по BEM - нет смысла сперва именовать своими классами, а потом переписывать. Сам этап именования должен стоять, таким образом, между созданием разметки и началом стилизации (или между нарезкой и стилизацией, если кто режет макет после разметки).
• Этап "проектирования масштабирования" при резиновой верстке (как он "профессионально" называется, кстати? Напишите в комментах, пожалуйста! :) ) надо будет выполнить после BEM. Сейчас, судя по размерам картинок в макете и разметке, частично уже можно спрогнозировать, как блоки будут себя вести, но я думаю (основываясь на том, что такая тактика не сработала в UX ENERGY), что лучше подойти к данной задаче с системным подходом и уделить время и силы.
• Нарезая картинки, обнаружил, что многие из них разного размера. Это заставило меня вспомнить одно из требований к переполнению контентом. Несмотря на то, что я собираюсь верстать с вариантом картинок, уже мной пофикшенным (хотя я как верстальщик вроде не обязан исправлять ошибки дизайнера, не правда ли? :) ), можно заодно и потренировать устойчивость к переполнению.
• Помните, я в UX ENERGY реализовывал градиенты и картинки в одном фоне? Так вот тут во многих картинках есть похожая задача: картинка полупрозрачна на черном фоне, а кое-где (в разделе Trips) она и при ховере меняет свою прозрачность.
• Нашёл в макете прикол: в разделе Find a tour by tour type есть непрозрачные картинки в обычной цветовой гамме - и есть такие же, но на чёрном фоне с 60% прозрачностью (№1 и №3)! Мне кажется, это было сделано как костыль для дизайнера (потому что белый текст на светлых картинках очень плохо смотрится, вот и пришлось затемнять).
• Ещё одна недавно решавшаяся задача - наложение фона и картинки (блок Deals and Discounts), но так как это фон и картинка, это тоже любопытно сделать.
• Позиционирование хедера и формы в промо-блоке. Видите, хедер полупрозрачен и налазит на фон промо? Форма тоже размещена интересно. Напрашивающееся решение для их позиционирование - абсолют, но я попытаюсь этого избежать и сделать нормально.
• "развертка" содержимого в trips при наведении, показ кнопки know more - мне кажется, можно изящно тут transition применить.

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