Итоговая+презентация+Беликова+В.В.+ТФИГ+0828-01

1.

Беликова Виктория
Владимировна
Программа: Веб-дизайнер
Группа: ТФИГ-0828 / 2025 год
Итоговая работа

2.

Главная страница
Тема сайта: Ремонт мобильных телефонов, планшетов, ноутбуков
Тип сайта: Сайт-визитка в сфере услуг
Цель сайта: Предоставление актуальной информации об услугах,
продажа услуг, привлечение новых клиентов
2

3.

Главная страница сайта
3

4.

4

5.

При определении дизайна сайта я руководствовалась мягкими цветами приятными глазу и минимализмом в стиле. Чтобы оставалось
больше «воздуха» и пользователь не уставал от просмотра сайта.
5

6.

При работе в Figma мною были использованы разные элементы дизайна. Для порядка и удобства я объединила одинаковые элементы и
переименовала слои в соответствии с работой.
6

7.

Форма подачи заявки
7

8.

Форма подачи заявки выполнена в форме опроса о неисправностях девайса. Это сделано для того, чтобы уточнить основные
детали поломок до звонка и минимизировать напряжение клиента от личного общения. Обратите внимание, что в форме есть
вариант ответа «другое». Это поле необходимо для уточнения поломки, если такой неисправности в списке нет.
8

9.

Личный кабинет с информацией
9

10.

Личный кабинет я представила двумя макетами. Первый включает в себя личные данные пользователя. ФИО, телефон, почта, фото. Я
считаю, что фотография необходима для идентификации клиента при личной встрече. Второй макет представляет собой историю покупок.
Здесь отображены предыдущие и настоящие услуги оказанные клиенту. Также, для удобства отображен статус услуги. То есть клиенту не
обязательно лично связываться и уточнять готовность ремонта, а можно отследить эту информацию в кабинете.
В будущем, макет корзины также будет включать в себя перечень услуг и предполагаемую сумму необходимую для ремонта неисправности
гаджета.
10

11.

Галерея услуг
Галерея услуг представлена типами
девайсов, которые можно
отремонтировать в данном сервисе и
блоком преимуществ.
В каждой позиции обозначен тип
девайса, минимальная стоимость
ремонта и кнопка оставить заявку для
того, чтобы пользователь не
возвращался к форме подачи заявки.
11

12.

12

13.

Адаптация сайта
13

14.

Адаптация сайта
Мною были разработаны следующие адаптации сайта:
большая версия сайта в формате полноразмерного под 1920px, далее
была проведена адаптация под ноутбук 1440px, далее планшетная
адаптация под 1024px, и в конце я реализовала адаптацию под
телефон размером 440px
14

15.

Адаптация - 1920-1440
15

16.

Благодаря изначальному использованию «сеток», созданных мною в ходе обучения на
курсе, при разработке большой версии сайта, адаптация под размер 1440 рх происходит
достаточно удобно и быстро.
16

17.

17

18.

Адаптация - планшет 1024px
При разработке адаптации для планшета размером
1024 рх я «перекроила» некоторые блоки для более
удобного восприятия.
Так, в разделе типов девайсов, возможных для
ремонта в сервисе, я разместила блоки
вертикально, по одному в столбце.
В форме заявки, я также разместила возможные
варианты неисправностей вертикально, по одному
в столбце.
Формы личного кабинета я подредактировала в
размерах шрифтов, кнопок и фото. Порядок
остался прежним.
18

19.

19

20.

Адаптация - телефон 440 рх
20

21.

При разработке адаптации для
телефона я выбрала размер 440
рх. Считаю, что адаптация для
телефона самая сложная, так
как размер уменьшается в 4,5
раза.
Здесь мне пришлось «играть» с
размерами шрифтов, блоков и
порядком их расположения.
В разработке адаптации
личного кабинета, также
пришлось изменить порядок
блоков для удобства
пользователей.
21

22.

22

23.

Дополнительно
В процессе работы до
итоговой я проводила
много различных операций
и разработок.
Банеры различных
разрешений. Для клиента
сайта ремонта девайсов, я
также в будущем
планирую разработку
рекламных банеров.
23

24.

Компоненты
В процессе обучения на
курсе, мною было отработано
использование компонентов в
своих работах.
Использование компонентов
целесообразно, когда в работе
есть повторяющиеся
элементы (кнопки, пункты
меню, галерея).
На сайте, который я
разработала, как итоговая
работа, применение
компонентов возможно к
кнопкам «Оставить заявку» и
«Позвонить по телефону».
24

25.

Библиотеки
Также, для корректной передачи
работы заказчику, можно создать
библиотеки цвета и шрифтов.
На курсе я неоднократно
разрабатывала такие библиотеки.
Они необходимы для удобства и
быстрой корректировки дизайна
сайтов.
25

26.

UI kit
Для удобства и скорости создания дизайна сайтов, я
разрабатывала UI Kit в моих работах до итоговой.
UI Kit (User Interface Kit) — это коллекция готовых
элементов пользовательского интерфейса, таких как кнопки,
иконки, формы, карточки и другие компоненты. Они
используются для создания дизайна веб-сайтов и мобильных
приложений. Такие наборы помогают быстро создавать
прототипы и разрабатывать интерфейсы, не тратя время на
создание стандартных элементов с нуля.
В будущем, я планирую отредактировать и пополнить свою
коллекцию UI Kit.
26

27.

Контакты для связи
Беликова Виктория
Владимировна
Моя прошлая деятельность: Ведущий
специалист управления капитального
строительства ПАО «Россети»
Тел.: +7 904 690 61 21
WhatsApp: +7 904 690 61 21
VK.: https://vk.com/vichkin_v
E-mail: viktoria1992m@yandex.ru
27

28.

Спасибо за внимание!
Если есть вопросы, задавайте