Пример простой вёрстки сайта по макету Figma

Сегодня покажу вам один из первых моих pet-проектов – вёрстку лендинга несуществующей школы английского языка Britlex. Это достаточно простая вёрстка: монохромный дизайн в стиле минимализм, обычные меню и полное отсутствие анимаций. Сайт свёрстан по макету Figma, который я перенёс в Pixso – набирающий популярность аналог Фигмы.

Предварительная доработка дизайн-макета в Figma

Начну с макета – его пришлось доработать, так как он во многом был некачественно выполнен. Его явно делал начинающий дизайнер, который просто учился. Любой, знающий азы веб-дизайна специалист сразу бы заметил, что иерархии и группировки в слоях макета нет совсем – все слои хаотично разбросаны по панели слоёв. А это значит, что времени на разработку лендинга уйдёт много. Поэтому я уже сам сгруппировал слои по папкам (в Pixso вы видите исправленный вариант) – но лишь для основного фрейма, «Landing» (ширина 1600 пикселей), так как нужна же была точка отсчёта.

К тому же, многие дочерние фреймы сделаны крайне неаккуратно – их размеры намного больше содержимого, они наслаиваются друг на друга и т.п. А пункты главного меню дизайнер выполнил одной строкой текста – из-за чего невозможно увидеть какие между ними отступы. В придачу разные gap, различные отступы между секциями, разные размеры шрифта заголовков одного уровня, а также абзацев и т.д. Посмотрев на этот разнобой, я понял, что делать pixel-perfect вёрстку нет смысла – а, стало быть, нужно полагаться только на здравый смысл.

В первую очередь я свёл к единообразию размеры шрифтов. Изначально, во всех секциях лендинга размер шрифта абзацев равен 20 пикселям – и лишь в секции «Skills» он почему-то был в 16 пикселей. Поэтому я здесь прописал также 20px.

Ещё мне не понравилось, что для заголовков H1 и H2 выставлен абсолютно чёрный цвет #000. Дело в том, что на белом фоне чёрный текст немного рябит в глазах, от чего на буквах сложнее сфокусироваться. Поэтому я сменил его на #333.

Изображения в секциях Skills и Pricing я тоже подверг изменению, перед тем как верстать макет из Figma. Я выровнял их по высоте, но при этом сохранив пропорции.

Разбор HTML/CSS-кода моего проекта

Теперь рассмотрим особенности кода моей работы. В общих чертах в нём нет каких-либо необычных «фишек» и новинок веб-разработки. Я активно применял относительные единицы измерения % (проценты) и vw (viewport width). Для цветов использовал CSS переменные.

Классы старался писать по методологии БЭМ. А разделы веб-страницы выполнены на flex или grid – например, на скриншоте ниже показан блок «Skills», свёрстанный по grid-сетке.

Структура сайта также была мной соблюдена: в html-коде смысловые блоки обёрнуты в семантические теги header, section и footer.

В макете есть ещё один недостаток: не показаны состояния интерактивных элементов (hover, focus, active). Поэтому эти состояния я проработал самостоятельно.

Лендинг адаптивный – абсолютно все экраны из макета были свёрстаны. Ниже представлены скриншоты из DevTools для самых популярных разрешений: телефоны с маленькими экранами, landscape-телефоны и «таблетки».

В завершении своей работы я подключил фреймворк Materialize. С помощью его на мобильных экранах выводится бургер-меню.

Посмотреть код этого моего проекта вы можете на моей странице GitHub.