ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 22.11.2023
Просмотров: 34
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
15 кнопку происходит анимация) при нажатии на которую открывается модальное окно с формой подачи заявки (Рисунок 2, Рисунок 3).
Рисунок 2. Баннер
16
Рисунок 3. Модальное окно подачи заявки.
17
2.2.2. О конкурсе. Новости
Блок «О конкурсе и новости» разделен на 2 части. В левой части блока находятся: подробное описание конкурса, цель конкурса. В правой части блока находятся новости (Рисунок 4).
Рисунок 4. О конкурсе и новости.
2.2.3. Направления конкурса
Блок «Направления конкурса» содержит 5 направлений конкурса.
Каждое из направлений представлено в виде подблока и содержит: название направления и краткое описание (Рисунок 5).
18
Рисунок 5. Направления конкурса.
2.2.4. Кого мы ищем
Блок «Кого мы ищем» содержит 4 подблока. В каждом из подблоков находятся: изображение, заголовок и краткое описание (Рисунок 6).
Рисунок 6. Кого мы ищем
19
2.2.5. Зачем участвовать
Блок «Зачем участвовать» представлен в виде карусели, в которой на данный момент содержится 3 элемента. В каждом элементе карусели присутствуют: изображение, заголовок и краткое описание (Рисунок 7).
Рисунок 7. Зачем участвовать
2.2.6. Этапы
Блок «Этапы» представлен на рисунке 8.
Рисунок 8. Этапы
20
2.2.7. Критерии оценки проектов
Данный блок содержит: изображение критерия, а также описание критерия (Рисунок 9).
Рисунок 9. Критерии оценки проектов.
2.2.8. Об организаторе
Блок «Об организаторе» представлен в виде баннера, на котором расположились: заголовок, описание организатора, тематическое изображение и логотип компании (Рисунок 10).
Рисунок 10. Об организаторе.
21
2.2.9. Эксперты и менторы
Блок «Эксперты и менторы» представлен в виде карусели, в которую при желании заказчика можно добавить новый элемент. Если количество элементов не вмещается на странице карусель пролистывается на следующий элемент. В каждом элементе карусели присутствуют: изображение ментора или эксперта, ФИО ментора или эксперта и краткая информация (Рисунок 11).
Рисунок 11. Эксперты и менторы.
2.3. Блок «Footer»
В блоке «Подвал сайта» находятся – логотип, контактная информация, а также ссылки на социальные сети в виде иконок (Рисунок 12).
22
Рисунок 12. Блок «Footer»
2.4. Страница «Главная» при просмотре на различных устройствах
Одним из требований заказчика было то, чтобы сайт корректно отображался на различных устройствах, а именно: компьютер, планшет и смартфон. Для этого были разработаны адаптивные версии сайта.
Версия для ПК представлена на рисунке 13.
Версия для планшета представлена на рисунке 14 и имеет следующие отличия от версии для ПК: был уменьшен шрифт, вместо полноценного меню появилась кнопка при нажатии на которую в модальном окне открывается меню, некоторые блоки поменяли расположение элементов внутри.
Версия для смартфона представлена на рисунке 15. Она практически ничем не отличается от версии для планшета, за исключением: шрифт стал еще меньше, а также некоторые блоки поменяли расположение элементов внутри.
23
Рисунок 13. Версия сайта для ПК
24
Рисунок 14. Версия сайта для планшета
25
Рисунок 15. Версия сайта для смартфона
26
ЗАКЛЮЧЕНИЕ
Результатом контрольной работы стал готовый web-интерфейс. В ходе проведения работы были решены поставленные в контрольной работе задачи.
Оценивая проделанную работу, можно сделать следующие выводы:
•
В макет предоставлена пользователям наиболее нужная ему информация, а именно возможность ознакомиться с проведением конкурса;
•
Дизайн сайта соответствует предполагаемым предпочтениям целевой группы, времени и целям нахождения потенциальных конкурсантов на сайте;
•
Реализована навигация с помощью меню по разделам сайта;
Для реализации сайта было использован - Adobe Photoshop.
В дальнейшем разработанный web-дизайн нужно будет передать web программистам и далее использовать в реальной жизни.
27
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ
1.
Кирсанов Д. Веб-дизайн /Д. Курсанв, - М.: интернет-издание, 2018. - 247 с.
2.
Папанек В. Дизайн для реального мира / В. Папанек, - М.: Москва, 2017.
– 361 с.
3.
Томал Р. Основы web-дизайна / Р. Томал, - М.: Дизайн, 2015. – 195 с.
4.
Тучкевич Е. И. Мастер-класс Евгении Тучкевич по Adobe Photoshop
CC 2019 / Е. И. Тучкевич, - СПБ.: БХВ, 2020. – 387 с.
5.
Фолкнер Э. Adobe Photoshop CC / Э. Фолкнер, - М.: интернетиздание,
2015. — 392 с.
Электронные источники
6.
Концептуальная модель - Методология и методы социологического исследования
[Электронный ресурс] / https://studref.com/417921/sotsiologiya/ kontseptualnaya_model
, открытый.
7.
Веб дизайн
— что это простыми словами
[Электронный ресурс] / https://georgytim.ru/veb-dizajn-chto-eto/
, открытый.
8.
Освоить веб-дизайн с нуля: что читать и где учиться?
[Электронный ресурс]
/ https://skillbox.ru/media/design/veb_dizayn_s_n ulya/
, открытый.
9.
Обучение веб дизайну: 70+ лучших ресурсов о веб-дизайне
[Электронный ресурс]
/ https://tilda.education/articles-best-resources-for- webdesigners
, открытый.
10.
Веб-дизайнер: кто это, чем занимается и как им стать | РБК Тренды
[Электронный ресурс] / https://trends.rbc.ru/trends/education/60f17c219a79471 6ed5e633b
, открытый.