Веб-приложение для итальянского винного дома «Poggio Amorelli» с помощью SaaS-приложения Webflow

Актуальность. В последние годы Интернет стал основным средством коммуникации. Люди используют Интернет как основной источник информации во всех сферах, в том числе и в бизнесе. Одним из способов рассказать о своей компании миру является создание веб-сайта компании. Веб-сайт является визитной карточкой любого бизнеса, он позволит компании улучшить взаимодействие с клиентами и повысить продажи товаров и услуг. Итальянский винный дом «Poggio Amorelli» занимается производством высококачественных вин и стремится к повышению узнаваемости бренда. Для достижения этой цели необходимо создать современное и удобное веб­приложение, которое будет отвечать потребностям клиентов и партнёров компании.

Целью данной дипломной работы является разработка веб-приложения для итальянского винного дома «Poggio Amorelli» с помощью SaaS- приложения Webflow.

Для достижения цели поставлены и решены следующие задачи

Провести UX-исследования для выявления требований пользователя к дизайну;Разработать функциональный макет страниц сайта с учётом заданных требований;

Изучить основы работы с платформой Webflow и её возможности для создания сайтов;

Определить структуру сайта;

Реализовать макет на платформе Webflow;

Протестировать сайт на работоспособность;

Оценить результаты проделанной работы и сделать выводы о возможностях использования платформы Webflow для создания сайтов.

ВВЕДЕНИЕ ................................................................................................ 3

ГЛАВА 1. АНАЛИЗ СОВРЕМЕННЫХ ТЕХНОЛОГИЙ И МЕТОДОВ.. 4

1.1 Технологии, применяемые для создания веб-сайтов ......................... 4

1.2 Этапы разработки веб-сайтов............................................................. 7

1.3 Инструменты для разработки веб-сайта............................................. 9

1.4 UX-Исследование................................................................................ 10

1.5 Интервью с пользователями.............................................................. 12

1.6 Конкурентный анализ ....................................................................... 13

ГЛАВА 2. ВИЗУАЛЬНЫЙ РЕДАКТОР WEBFLOW ............................. 15

2.1 Знакомство с платформой Webflow.................................................. 15

2.2 Функционал Webflow........................................................................ 15

2.3 Функциональный прототип сайта «Poggio Amorelli» ..................... 17

2.4 Создание проекта, основные настройки и элементы платформы.... 20

2.5 Разработка страниц ........................................................................... 23

2.6 Адаптивная верстка............................................................................ 44

ЗАКЛЮЧЕНИЕ......................................................................................... 45

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ 46

1. 10 Лучших Языков Программирования Для Фронтенда [Электронный

ресурс] (Дата

обращения: 01.01.2024) URL:

Һ^7/Ыод.Ьаск4арр.сот/ги/10-лучших-языков-программирования-для-

ф/#4 Reactnbsp

2. Введение

в веб-разработку [Электронный ресурс] (Дата обращения:

01.01.2024) URL:

https://ru.hexlet.io/courses/intro

to web development/lessons/backend/theor y unit

3. Верстка

и создание сайтов в Webflow [Электронный ресурс] (Дата обращения: 01.01.2024)

URL: https://stepik.org/course/199492/promo

1. Гелиевич

С.Ф. HTML и CSS с нуля [Электронный ресурс]: https://vertex-

academy.com/tutorials/ru/samouchitel-po-htmlcss-s-nulya/

4. Как

работает веб-сайт, основные технические моменты [Электронный ресурс] (Дата

обращения: 01.01.2024) URL: https://starting-

constructor.ru/kak-rabotaet-veb-sajt.html

5. Как

создать сайт с нуля [Электронный ресурс] (Дата обращения: 01.01.2024) URL:

https://www.kp.ru/putevoditel/obrazovanie/kak-sozdat-sajt/

6. Какие

технологии используются при разработке сайтов [Электронный ресурс] (Дата

обращения: 01.01.2024) URL: https://vc.ru/u/419764-

paradigma-google-ads/100736-kakie-tehnologii-ispolzuyutsya-pri-razrabotke-

saytov

2. Кузьмин

Е.Л. Принципы человеческой памяти и как их использовать в UX/UI [Электронный

ресурс]: https://www.baza.uprock.ru/

3. Кузьмин

Е.Л. Школа дизайна [Электронный ресурс]: https://lk.uprock.ru/public/products

5. Основы

UML / О.А. Невзорова, Ч.Б. Миннегалиева. - Казань: Казан. Ун­т, 2021. - 43 с.

(Дата обращения: 21.04.2023)

6. Сайт

— это просто. Как создать сайт самому с нуля [Электронный ресурс]

(Дата обращения: 01.01.2024) URL:

https://www.ispmanager.ru/news/sajt- ehto-prosto-kak-sozdat-sajt-samomu-besplatno-s-nulya

7. Современный

учебник JavaScript [Электронный ресурс] (Дата обращения: 01.01.2024) URL:

https://learn.javascript.ru/

8. Структура

сайта: виды, алгоритм создания [Электронный ресурс] (Дата обращения:

01.01.2024) URL: https://neiros.ru/blog/marketing/struktura-

sayta-vidy-algoritm-sozdaniya-i-11-servis-v-pomoshch/

4. Терентьев М.С. Auto Layout, фреймы и компоненты [Электронный

ресурс]:https7/mailfitcom/baza-znanj

9. Уроки

JavaScript для начинающих [Электронный ресурс] (Дата обращения: 01.01.2024)

URL: https://itproger.com/course/javascript

10. Что такое структура сайта, как

ее создать и проанализировать [Электронный ресурс] (Дата обращения: 01.01.2024)

URL: https://webcom.academy/articles/seo/chto-takoe-struktura-sayta-kak-ee-

sozdat-i-proanalizirovat/

11. UX/UI-дизайн: что это такое и

как ему обучиться [Электронный ресурс] (Дата обращения: 01.01.2024) URL:

https://design.hse.ru/articles/UX-UI- dizayn-chto-eto

12. Webflow: краткий обзор

конструктора [Электронный ресурс] (Дата обращения: 01.01.2024) URL:

https://convertmonster.ru/blog/landing-page-

blog/webflow-kratkij-obzor-konstruktora/