Экзаменационный проект

Зеков Артем 951 УИР

Информационный сайт острайкбольных реконструкциях Navy Seals

Зеков Артем 951

Тема:

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

Цель сайта:

Информационный сайт о Navy Seals,компании,занимающейся страйкбольными реконструкицями спецразделений и отрядов

Функции:

Рекламная задача:

Рекламная

Информационная

Популяризация страйкбола

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

Информационные функции:

• Рассказать историю данного спецподразделения
• Разместить информацию о снаряжении
• Рассказать полезные для реконструктора "лайфхаки" 
• Разместить ссылки на места где можно приобрести части снаряжения

• Уведомить общество о культурной составляющей нашей деятельности

• Разместить контактные данные для связи с NavySeals

Персонаж:

Артем Зеков

• 18 лет
• Студент BA school of business and finanse
• Учится платно
• Middle Frontend Developer в компании Humans
• Отлично владеет английском
• Увлекается страйкболом и реконструкцией реальных спецподразделений

Анализ сайта: https://atrg.blog/

Цветовое решение - болотно-зеленый фон

Компоновка - приятная, user-friendly интерфейс

Оформление элементов - Текст выполнен в одном стиле, есть картинки

АП - Плавный, удобный, информативный

Навигация - обзоры, дискуссии, статьи, интервью

Анализ сайта: https://strikeplanet.ru/stati/o-straykbole/

Цветовое решение - белый /зеленый/оранжевый цвет

Компоновка - Блоки с навигацией, пользоваться удобно.

Оформление элементов - Текст выполнен в одном стиле, есть картинки, они уместны.

АП - Устаревший, скучный, древний, не удобный, грустный.

Навигация – О магазине, кэшбэк, рассрочка, доставка, контакты, статьи.

Рекомендации к сайту исходя из анализа ЦА и схожего сайта

Многие сайты подобной тематики имеют вариант форум. Однако данный формат веб-сайтов морально устарел

ЦА - люди увлекающиеся страйкболом, которые хотят перейти на серьезный уровень занятием данным хобби

Основная часть ЦА - люди 20-35 лет, а значит дизайн должен быть современным и минималистичным

Сайты схожих тематик не обладают информацией об актуальных реконструкциях, на них невозможно узнать о современном снаряжении и вооружении. Мы в свою очередь должны обладать самой актуальной ифнормацией

Экзаменационный проект

1. Разработка макета

Разработка макета началась с разработки прототипа

Цветовое решение

Основной фон:

Цветовое решение

Второстепенный фон:

Цвет элементов:

Подбор шрифтов ( Heboo )

Экзаменационный проект

2. Adobe Photoshop и Figma

Десктопная версия:

Мобильная версия:

В процессе разработки макета была создана понятная послойная структура

Adobe Photoshop:

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

• Текстовый инструмент «Horizontal Type Tool».
• Проведена работа с разрешением изображений при помощи «Image Size».
• Система слоев
• Палитра

Figma:

Figma предлагает более удобный инструментарий для создания интерфейсов. Однако редактор Figma, в отличии от редактора
Photoshop, предлагает очень небольшой
инструментарий ( для выделения, маскирования, типографии и т.д )

Figma:

Начал я работу с создания десктопной и мобильной разметки, с прописанными размерами. Далее подобрав цветовую палитру и проработав типографию я принялся создавать "библиотеку компонентов".
Это удобно, так как один раз создав к примеру кнопку, можно ее переиспользовать в других местах макета ( можно сказать это аналог Smart Objects в фотошопе ) .

Выбрав тактику создания макета ( сверху-вниз ) я принялся делать header, main и footer. Основными инструментами были: прямоугольник, текст, изображение

В самом начале я построил стуктуру в Layers, где в процессе разработки распределялся текст,
изображения и все остальные элементы по группам, это также очень
важно для «читаемости» макета.

Figma:

Основной проблемой компонентов являлось то, что они не
могли тянутся с содержимым. В начале 2019 эта проблема была решена
появлением Autolayout в Figma. Autolayout позволяет выделить несколько
слоев, и затем поддерживать размеры отступов внутри них при
растягивании.

Полезные функции Figma:

Есть специальная вклада CSS где для большинства заданных стилей можно скопировать готовый CSS код

Экзаменационный проект

Верстка

Первоначально я продумал "глобальную" структуру верстки

<header />

<section />

<section />

<section />

<footer />

Затем подготовил всю необходимую статику

Более того, все изображения оптимизированы с потерями ( так как в них не нужна высокая точность )

Далее подключил шрифты, и приступил к написанию "базовых" компонентов

Button

Text

Title

Когда все подготовительные работы были закончены, начал верстать страницу сверху-вниз, секцию за секцией

Intro section

History section

Community section

Equipment section

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

Проект выложен на github

https://github.com/mrstalon/examination-task