Ещё проект
Адаптивная вёрстка лендинга - летний лагерь Pride
Ещё проект
Заснята отработка всех элементов сайта каталога изображений «Take».
Дата загрузки: 2019-08-26 00:00:00 +0500
О клиенте:
Семён Николаев — частный заказчик.
Задача:
Сделать лендинг «под ключ» для каталога изображений. Лендинг будет использоваться в качестве промосайта для тестирования интереса к будущему сервису.
Если тестирование завершится успехом, то впоследствии этот промосайт будет переделан в главную страницу сервиса.
Что сделано:
Прототипирование (структура страницы): расположение элементов, тексты.
Наложение дизайна на прототип.
Вёрстка лендинга.
Интеграция в CMS WordPress.
Примечание:
Инструменты:
Процесс
Прототип сайта
Проведён анализ топа выдачи сервисов в этой тематике.
Прорисовал структуру будущего сайта (расположение всех элементов). Написал и расположил тексты. Пояснил как будут работать анимация интерактивных элементов.
На первом экране использовано тематическое изображение; заголовок, отражающий суть сайта. Главное преимущество каталога отмечено в подзаголовке.
На втором экране отмечено следующее преимущество: удобная классификация и сегментация изображений.
На третьем экране показаны три категории изображений использованные в каталоге с их описанием.
В заголовке четвертого экрана отмечены два основных преимущества каталога — удобная классификация и отсутствие лицензионных платежей.
На пятом развороте расположены категории изображений с каталога, для визуального отображения удобства классификации.
В шестом развороте отмечено, что сервис имеет собственный графический редактор, что повышает удобство пользования сервисом. Нет необходимости пользоваться сторонним софтом для создания уникальных изображений — простые операции с картинками производятся прямо на месте.
В седьмом экране отмечено, что администрация сайта работает для совершенствования сервиса и постоянно публикует сборники тематических изображений для своих пользователей.
В подвале отмечено несколько интересных фактов о сервисе.
Дизайн
Для дизайна использованы спокойные затенённые фоны и цвета, чтобы сосредоточить внимание на контенте. Основные цвета: спокойный зелёный и неяркий жёлтый.
Дизайн получился интересным, несмотря на отсутствие сложных элементов — в целом гармоничный сайт с возможностью масштабирования в будущем.
Вёрстка лендинга
Верстал лендинг с применением сетки bootstrap, из фреймворка подключалась только сетка, для избежания избыточности кода.
Вёрстка кросс-браузерная - правильно работает во всех браузерах. Полностью адаптивная и валидная, с применением семантических тегов.
Интерактив
В процессе работы реализованы простые интерактивные элементы: кнопки, ссылки, карточки с информацией, кнопка возврата к верху страницы.
Анимация
На сайте сделаны лёгкие, простые анимации, в основном срабатывающие при наведении и клике: изменение цветов кнопок и ссылок; изменение состояний элементов карточек с информацией.