Подписка на блог

Customize in /user/extras/follow-sheet.tmpl.php.

Sample text.

Twitter, Facebook, VK, Telegram, LinkedIn, Odnoklassniki, Pinterest, YouTube, TikTok, РСС JSON Feed

Sample text.

Школа Бюро. Вёрстка многоэтажной веб‑страницы

Следующая задача — сделать промостраницу. Сначала задизайнить, а потом заверстать в ХТМЛ. Есть две темы, я выбрал страницу о кондиционере.

Задание

Выберите одну из двух предложенных ниже тем. Ваша задача — сверстать модульную многоэтажную промостраницу. Работая над макетом, вы можете взять за основу тот стиль и дизайн, что делали для информационного текста для сайта под руководством Максима Ильяхова, а можете придумать что‑то новое.

Вариант 1. Кондиционер

«Айс бэйби» — интернет‑магазин кондиционеров и обогревателей. Хит этого сезона — переносной кондиционер Electrolux Mango: его можно поставить в любую комнату и охлаждать её, не вынося никаких блоков на улицу и не сверля стены. Это хит среди московских квартиросъёмщиков.

Расскажите об этом кондиционере на специальной промостранице. Обязательные элементы: заголовок, цена, изображение или несколько изображений, описание, ключевые технические характеристики, ссылки на инструкции. Не забудьте о шапке и подвале. По своему вкусу можете добавить отзывы, слоганы, выносы, видео и так далее.

Дизайн

На старте я столкнулся с проблемой — не нашлось нормальных фоток кондиционера в нужных мне ракурсах. Все картинки, которые я нашёл были либо плохого качества, либо уже много раз использовались другими студентами школ.

Мне хотелось не подстраивать страницу под имеющиеся материалы, а подстроить материалы под кайфную вёрстку. Поэтому я пошёл в блендер и собрал простую 3д-модель. С ней легко получить кондиционер в любом положении и с любым освещением.

Можете скачать файл и использовать у себя в работе:
Модель для Блендера ↓

Я собрал трёхточечную схему освещения с насыщенными цветами, зарендерил картинку и поставил её гигантской в промо-блок. Сразу видно, кто главный герой страницы.

Совет

Нашёл простой принцип, который помогает повысить выразительность макетов. Нужно взять самую красивую часть макета, обычно это какая-нибудь картинка и увеличить её до максимально большого масштаба. А потом взять и увеличить ещё раз.

Такой подход, наверняка, работает не всегда, но для дженерик-страниц и при отсутствии времени для вывода нужных визуальных ходов подходит идеально.

Дальше на нескольких этажах просто рассказал об основных преимуществах и фичах устройства.

Для дополнительных особенностей кондиционера изобрел яркий стиль иконок и собрал всё в сетку:

Добавил немного хулиганства и попытался написать бодрый текст.

В итоге получилась такая работа →

Совет

Полезно до того, как начать рисовать макет выделить основные фичи устройства и придумать рассказ. После останется только найти наиболее прикольную раскладку для демонстрации идей.

Если вам понравился тип сетки, который я использовал в работе, то можете посмотреть разные примеры и просто вдохновиться:
https://bentogrids.com/

***

В общем, итоговая работа мне нравится, кажется, что местами получилось довольно свежо. Обзор Миши Нозика:



М. Н. Я бы сказал, что тёмные плашки очень уж сливаются с фоном. В остальном круто.

ХТМЛ

Дальше нужно было заверстать несколько ключевых блоков в рабочую веб-страницу. Если вы не имеете навыка ХТМЛ-вёрстки, это задание будет сложным.

По этому заданию мне сложно что-то сказать. Я просто выбрал несколько шаблонных этажей, заверстал и залил на Гитхабпейджс. Вот что получилось в итоге:
https://ice-baby-bureau.github.io/

Кроме самой вёрстки, я прикрепил фавикон и нарисовал простую обложку с помощью оупенграфа.

На второй неделе добавил мобильную версию. Времени, чтобы рисовать макеты под телефоны у меня не было, поэтому она получилась простой, но рабочей.

Совет

В школе совсем слабо учат вебу, поэтому я бы рекомендовал в перерыве между первой и второй ступенью подтянуть. Например, пройти бесплатную часть ХТМЛ-академии:
https://htmlacademy.ru/

Навык разработки — очень полезный скилл для любого диджитал дизайнера.

***

По этому заданию получил максимальную оценку:



И. П. Ну жир теперь ваще, с адаптивом и честным загом :‑)

Дальше