Прежде чем начну, хотелось бы поблагодарить за поддержку в предыдущем посте 😘❤️. Ваши слова меня ещё сильнее замотивировали. Сейчас пишу этот пост на эмоциональном подъеме. Так что запаситесь чайком и печеньками, он будет долгий 😂.

А теперь к сути. Мой первый проект – дизайн-макет лендинга, выполненного во время прохождения курса. К счастью, у меня была возможность выбрать тему, в реальных условиях этого уже не получится сделать 😅. Т.к. я люблю компьютерные игры, обожаю гейм индустрию, решила создать лендинг для киберклуба.

Итак, с темой я определилась, теперь передо мной стояла задача: через визуальное оформление передать общий вайб клуба 🎮. У меня само словосочетание «компьютерные игры» ассоциируется с чем-то современным, технологичным – в общем, с атмосферой киберпанка. Поэтому я полезла на просторы Интернета, чтобы подобрать референсы, найти те или иные элементы, которые я могу использовать в оформлении сайта. Составила мудборд.

В колористике решила использовать неоновый зеленый для акцентных элементов, светлый оттенок для обычного текста, темно-серый (ближе к черному) для фона, шрифты – Xolonium и Visby (моя любимая пара 😂). С логотипом особо не заморачивалась: сгенерировала в нейросети. Хотела использовать необычную форму хэдэра и футэра, кнопок и плашек (вдохновлялась формой материнской платы компьютера).

Далее я провела анализ ЦА и конкурентов, составила 3 портрета пользователя.

Следующий шаг – составление структуры страницы и текста на основе предыдущего анализа.

1️⃣ Хэдр: разделы «О нас», «Железо», «Прайс», «Галерея», «Спец предложение», «Мы на карте», «Контакты» и номер телефона. 2️⃣ Первый экран: название игрового клуба, небольшое описание, кнопка CTA, фотография (персонажа сгенерировала в нейросети). 3️⃣ О нас: перечислены преимущества игрового клуба (при наведении мышки блок из ч/б переходит в ориг. цвет). 4️⃣ Железо: список игровых залов с соответствующим оборудованием. 5️⃣ Прайс: здесь представлены цены за бронирование пк или приставки в представленных игровых залах, меню (еда и напитки). 6️⃣ Галерея: по задумке я хотела в этом разделе предоставить пользователю фотографию посетителя и отзыв от него. Добавила кнопки «влево-вправо» для перелистывания контента в рубрике. 7️⃣ Спец предложение: информация о дне открытых дверей со списком запланированных мероприятий и кнопкой CTA. 8️⃣ Мы на карте: расположение игрового клуба на карте с ближайшими станциями метро. 9️⃣ Футер: список контактов.

Затем составила прототип для компа и телефона, перевела готовый прототип в дизайн-макет.

Что скажете?

P. S. прикрепляю оформление кейса с behance.