Веб-приложение для итальянского винного дома «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/