Презентация_ПР7_Разработка_сайта

1.

ПРАКТИЧЕСКАЯ РАБОТА 7
Разработка сайта
Виды сайтов, дизайн, Tilda и самопроверка проекта
Выполнил: Мерьков Дмитрий Сергеевич
Группа: 1руп9-5
Дисциплина: «Практическая подготовка по технологии выполнения работ Техник»

2.

Содержание
Цель работы и выбор проекта (слайды 3–6)
Сайт-визитка (7–10)
Лендинг (11–14)
Корпоративный сайт (15–16)
Интернет-магазин (17–18)
Веб-портал (19–20)
Цвет, шрифты, структура, Tilda (21–26)
Самопроверка, критерии оценки, выводы (27–30)
Мерьков Д. С. · группа 1руп9-5 · ПР 7
2

3.

Цель и задачи работы
Цель
Задачи
Разработать и опубликовать сайт по
выбранному варианту технического задания,
соблюдая заданный визуальный стиль,
структуру и HEX-палитру.
• определить вид сайта и свой вариант
• изучить ТЗ: легенду, стиль, обязательные
блоки
• собрать сайт на Tilda
• настроить форму заявки и адаптив
• пройти самопроверку и опубликовать
Мерьков Д. С. · группа 1руп9-5 · ПР 7
3

4.

Пять видов сайтов в задании
Вид сайта
Главная цель
Варианты
Сайт-визитка
Доверие и экспертность, цифровая визитка
1.1 – 1.3
Лендинг
Конверсия посетителя в действие
2.1 – 2.3
Корпоративный сайт
Доверие и презентация услуг компании
3.1 – 3.3
Интернет-магазин
Каталог товаров и приём заказов
4.1 – 4.3
Веб-портал
Справочник с большим объёмом контента
5.1 – 5.3
Мерьков Д. С. · группа 1руп9-5 · ПР 7
4

5.

Выбор проекта: три вопроса
1. Что тебе ближе?
2. Какой стиль откликается?
3. Что хочешь получить?
А — создавать личное, про себя
Б — продавать, убеждать,
запускать продукты
В — делать большое, системное,
для компании
А — минимализм, воздух,
светлые тона
Б — яркость, контраст, неон,
тёмная тема
В — уют, крафт, текстуры,
природные оттенки
А — красивый сайт-открытку
Б — работающий инструмент
В — серьёзный проект для
портфолио
Мерьков Д. С. · группа 1руп9-5 · ПР 7
5

6.

Расшифровка результатов
Сайт-визитка
Лендинг
Корпоративный сайт
А+А+А → 1.1 Фотограф
А+Б+А → 1.2 Геймдев/3D
А+А+Б → 1.3 Репетитор
Б+Б+Б → 2.1 Хакатон
Б+Б+А → 2.2 Гаджет
Б+А+Б → 2.3 Фестиваль
В+В+В → 3.1 Стартап
В+Б+В → 3.2 Медиа
В+В+А → 3.3 Квесты
Интернет-магазин
Веб-портал
Б+А+А → 4.1 Мерч
А+А+Б → 4.2 Цифровые товары
А+Б+А → 4.3 Кастомные вещи
В+А+В → 5.1 Городской гид
В+В+Б → 5.2 Агрегатор
В+Б+В → 5.3 Настольный клуб
Мерьков Д. С. · группа 1руп9-5 · ПР 7
6

7.

Сайт-визитка: концепция
Личная страница-портфолио, цифровая визитная карточка
Должна вызывать доверие и показывать экспертность
Минимум текста, акцент на работах и контактах
Обязательно: обложка, «Обо мне»/стек, портфолио, услуги или опыт, форма или
контакты
Три варианта: фотограф, инди-разработчик/3D, репетитор
Мерьков Д. С. · группа 1руп9-5 · ПР 7
7

8.

Вариант 1.1 — Фотограф / видеограф
Настроение: воздушно, минималистично, «журнальная» эстетика
#FAFAFA
#1A1A1A
#C9A96E
#8B7355
фон
текст
акцент
акцент 2
Шрифты: Playfair Display (заголовки) + Inter / Manrope. Фишка: много воздуха, крупные фото, минимум текста.
1.
2.
3.
4.
5.
Обложка с именем и специализацией
«Обо мне» — 3–4 предложения и фото
Галерея работ — минимум 6 фото, сетка 3×2
Прайс-лист: портрет, репортаж, мероприятие
Форма заявки: Имя, Email, Тип съёмки
Мерьков Д. С. · группа 1руп9-5 · ПР 7
8

9.

Вариант 1.2 — Инди-разработчик / 3D
Настроение: киберпанк, тёмный, технологичный
#0D0D0D
#E0E0E0
#00FF94
#FF006E
фон
текст
неон зелёный
неон розовый
Шрифты: JetBrains Mono / Space Mono + Inter. Фишка: тёмная тема, неоновые акценты, глитч в заголовках.
1.
2.
3.
4.
5.
Обложка с ником и статусом (Available for freelance)
Стек технологий: Unity, Blender, Unreal
Портфолио — 4–6 карточек с превью
Опыт — таймлайн из 2–3 проектов с датами
Контакты и соцсети: itch.io, ArtStation, Telegram
Мерьков Д. С. · группа 1руп9-5 · ПР 7
9

10.

Вариант 1.3 — Репетитор / ментор
Настроение: дружелюбно, экспертно, «как у хорошего наставника»
#F5F1E8
#2C2C2C
#4A6741
#D97757
фон
текст
зелёный
терракотовый
Шрифты: Merriweather (заголовки) + Nunito. Фишка: тёплые тона, ощущение уюта и доверия.
1.
2.
3.
4.
5.
6.
Обложка с именем и фразой-обещанием
«Для кого этот курс» — 3 типа учеников
Программа обучения — 3–4 модуля
Отзывы — минимум 3 с именами
Тарифы: индивидуально, мини-группа, самостоятельно
Форма записи на пробное занятие
Мерьков Д. С. · группа 1руп9-5 · ПР 7
10

11.

Лендинг: воронка к действию
1. Обложка
2. Выгоды
Событие или
продукт, оффер,
дата
Что получит
посетитель
3.
Доказательства
Программа, фичи,
партнёры
4. Условия
5. Действие
Тарифы, призы,
цены
Форма —
ключевой блок
Одностраничник с одной целью — регистрация, покупка или заявка. Каждый блок ведёт к
форме.
Мерьков Д. С. · группа 1руп9-5 · ПР 7
11

12.

Вариант 2.1 — Хакатон / турнир
Настроение: энергично, молодёжно, соревновательно
#121826
#FFFFFF
#FF5722
#00D4FF
фон
текст
оранжевый
голубой
Шрифты: Montserrat Black / Unbounded + sans-serif. Фишка: крупная типографика, градиенты, динамика.
1.
2.
3.
4.
5.
6.
Обложка с названием, датой и таймером обратного отсчёта
«Что тебя ждёт» — 3–4 буллета с иконками
Программа по дням и часам
Призовой фонд — крупные цифры, кубки
Партнёры и спонсоры — логотипы в ряд
Форма регистрации: Имя, Email, Команда/Ник
Мерьков Д. С. · группа 1руп9-5 · ПР 7
12

13.

Вариант 2.2 — Гаджет-тизер
Настроение: футуристично, премиально, «как у Apple»
#FFFFFF
#0A0A0A
#2563EB
#7C3AED
фон (светлая)
фон (тёмная)
синий
фиолетовый
Шрифты: Inter (или аналог SF Pro). Фишка: много воздуха, крупные рендеры продукта, минимум текста.
1.
2.
3.
4.
5.
6.
Обложка с рендером гаджета и слоганом
«Проблема → Решение» в две колонки
Ключевые фичи — 3–4 карточки с иконками
Характеристики — таблица или сетка
Early Bird тарифы — 3 варианта предзаказа
Форма предзаказа и счётчик собранных средств
Мерьков Д. С. · группа 1руп9-5 · ПР 7
13

14.

Вариант 2.3 — Фестиваль / стендап
Настроение: атмосферно, тепло, «лампово», афишный стиль
#2B1B17
#F4E4C1
#E8B04B
#C1272D
фон (тёмный)
фон (кремовый)
горчичный
винный красный
Шрифты: Playfair / Cormorant + чистый sans-serif. Фишка: крупные фото артистов и атмосферы.
1.
2.
3.
4.
5.
6.
Обложка с датой, местом и крупным заголовком
Лайнап — карточки артистов или спикеров
О событии — 2–3 абзаца и фото прошлых событий
Место проведения — карта и адрес
Тарифы: Стандарт, VIP, Студенческий
Форма покупки билетов
Мерьков Д. С. · группа 1руп9-5 · ПР 7
14

15.

Корпоративный сайт на Tilda
Многостраничный сайт или лонгрид с навигацией — формирует доверие и презентует
услуги
На бесплатной Tilda: лонгрид с фиксированным меню сверху
Якорная ссылка — закладка с уникальным именем в нужном месте страницы
Каждый пункт меню ведёт к своему блоку: услуги, команда, кейсы, контакты
Минимум 7 блоков, единый стиль кнопок и сетки
Мерьков Д. С. · группа 1руп9-5 · ПР 7
15

16.

Варианты 3.1–3.3
3.1 Студенческий стартап
3.2 Креативное агентство
3.3 Ивент-агентство
Свежо, современно
Фон #FFFFFF, текст #1F2937, акцент
#10B981 / #F59E0B
Manrope, Plus Jakarta Sans
Value proposition, проблема →
решение, 3 шага, скриншоты, команда,
цифры, CTA-форма
Дерзко, стильно
Фон #F5F5F0, текст #000000, акцент
#FF3D00 / #5E35B1
Unbounded, Syne
Манифест, услуги, кейсы, команда,
клиенты, блог, форма «Обсудить
проект»
Приключенчески, тепло
Фон #1F2421 / #FAF3E0, акцент
#D97706 / #059669
Bitter, Lora
Формат-карточки, галерея 10–12 фото,
события, отзывы, FAQ, бронирование
Мерьков Д. С. · группа 1руп9-5 · ПР 7
16

17.

Интернет-магазин: каталог + заявка
Каталог товаров с возможностью заказа
На бесплатной Tilda нет полноценной корзины
Решение: связка «Каталог + Форма заявки»
В форме: имя, контакт, что хочет купить — через комментарий
Обязательно: категории, каталог от 6 позиций, как заказать, доставка и оплата
Мерьков Д. С. · группа 1руп9-5 · ПР 7
17

18.

Варианты 4.1–4.3
4.1 Мерч клуба
4.2 Цифровые товары
4.3 Кастомные вещи
Брутально, streetwear
Фон #000000, текст #FFFFFF, акцент
#FF003C / #00F0FF
Bebas Neue, Oswald
Категории, каталог от 6 позиций, 3
шага заказа, доставка и оплата, форма
Чисто, эстетика продуктивности
Фон #FAF9F6, текст #2D2D2D, акцент
#8B7355 / #6B8E4E
Cormorant
Категории, каталог, описание топпродуктов, отзывы, форма заказа
Крафтово, «сделано руками»
Фон #F3EDE0, текст #3E2723, акцент
#D4A574 / #8D6E63
Caveat, Quicksand
О мастере, каталог, 3–4 шага кастома,
отзывы с фото, форма
Мерьков Д. С. · группа 1руп9-5 · ПР 7
18

19.

Веб-портал / агрегатор
Информационный ресурс с большим количеством контента
Должен быть удобным справочником
Упор на карточки, категории, фильтры и чёткую структуру
Обязательно: обложка с навигацией, категории, каталог карточек, карта или календарь,
форма, подвал
Минимум 7 блоков
Мерьков Д. С. · группа 1руп9-5 · ПР 7
19

20.

Варианты 5.1–5.3
5.1 Городской гид
5.2 Агрегатор возможностей
5.3 Настольный клуб
Дружелюбно, как локальный журнал
Фон #FFFFFF, акцент #E91E63 / #FF9800
Roboto, Open Sans
Категории, топ-5 мест, карта, отзывы,
форма «Предложить место», подвал
Серьёзно, как карьерный центр
Фон #F8FAFC, текст #0F172A, акцент
#2563EB / #0891B2
Inter, Source Sans
Поиск, 8 карточек с дедлайнами, 4
шага, истории успеха, календарь
Фэнтезийно, «как в таверне»
Фон #2C1810 / #F5E6D3, акцент
#D4AF37 / #8B0000
Cinzel + sans-serif
Расписание, каталог от 6 игр, мастера,
галерея, запись на игру
Мерьков Д. С. · группа 1руп9-5 · ПР 7
20

21.

Цвет: HEX-коды и палитра
#F8FAFC
#0F172A
#2563EB
#0891B2
фон
текст
акцент 1
акцент 2
Подбор палитры: coolors.co; HEX-коды из ТЗ можно дополнять в тон
Схема: фон — основа, текст — контрастный, 1–2 акцента для кнопок и ссылок
Пример выше — палитра варианта 5.2
Тёмный киберпанк в пастельных тонах — ошибка стиля
Мерьков Д. С. · группа 1руп9-5 · ПР 7
21

22.

Типографика
Не более 2 шрифтов
Иерархия размеров
Один для заголовков, один для основного текста
Заголовок, подзаголовок и текст должны
различаться по размеру
Пары из ТЗ
Читаемость
Playfair Display + Inter, Montserrat + Open Sans,
Cormorant + Manrope
Контраст с фоном, достаточный размер,
аккуратный межстрочный интервал
Мерьков Д. С. · группа 1руп9-5 · ПР 7
22

23.

Структура страницы
Шапка
Обложка
Контентные блоки
Логотип и навигация
Главная мысль и первая кнопка
Услуги, галерея, каталог, отзывы
CTA-блок
Форма
Подвал
Призыв к действию
Заявка, запись, заказ
Контакты и соцсети
Мерьков Д. С. · группа 1руп9-5 · ПР 7
23

24.

Порядок работы в Tilda
1. Проект
2. Стиль
3. Блоки
Создать сайт и страницу,
выбрать вариант ТЗ
Задать цвета и шрифты из ТЗ
Собрать обязательные блоки
4. Тексты и фото
5. Форма
6. Публикация
Заменить «рыбу», подобрать
качественные изображения
Настроить поля и email
Проверить ссылки и
опубликовать
Мерьков Д. С. · группа 1руп9-5 · ПР 7
24

25.

Форма заявки
Поля берутся из ТЗ: например Имя, Email, Тип съёмки или Команда/Ник
Указать адрес получателя заявок
Отправить тестовую заявку себе на email
Проверить, что заявка пришла преподавателю
Форма стоит в ключевом месте — это цель страницы
Мерьков Д. С. · группа 1руп9-5 · ПР 7
25

26.

Мобильная версия
Проверка
Текст
Кнопки
Переключить редактор в
режим телефона
Не вылезает за рамки, блоки
не «едут»
Достаточно крупные для тапа
Без проверки на мобильном итоговая оценка снижается до «удовлетворительно».
Мерьков Д. С. · группа 1руп9-5 · ПР 7
26

27.

Самопроверка
Структура и контент
Дизайн
• все блоки из ТЗ
• нет Lorem Ipsum
• картинки в едином стиле
• минимум 5–7 блоков
• HEX-коды из ТЗ
• не более 2 шрифтов
• заголовки и текст различимы
• единый стиль кнопок
Функционал
Мобильная версия
• шапка с навигацией
• подвал с контактами
• форма работает
• кнопки не «в никуда»
• проверена на телефоне
• текст в рамках
• кнопки крупные
Мерьков Д. С. · группа 1руп9-5 · ПР 7
27

28.

Критерии оценки
Оценка
Условия
Отлично (автомат)
Все блоки наполнены, стиль и шрифты по ТЗ, адаптив, форма работает, нет «рыбы»,
сайт опубликован
Хорошо
80–90% блоков, мелкие отклонения стиля, форма не протестирована, местами
«рыба»
Удовлетворительно
Менее 70% блоков, стиль не соответствует, мобильная версия не проверена, форма
не работает
Неудовлетворительно
Сайт не сдан или не опубликован, выполнено менее половины ТЗ
Мерьков Д. С. · группа 1руп9-5 · ПР 7
28

29.

Выводы
Выбор варианта по трём вопросам помогает получить проект по интересам
Каждый вид сайта решает свою задачу: доверие, конверсия, презентация, продажа,
справочник
Стиль задаётся HEX-кодами, шрифтами и «фишкой» варианта
Форма заявки и мобильная версия — обязательные условия высокой оценки
Самопроверка по списку помогает сдать работу без потери баллов
Мерьков Д. С. · группа 1руп9-5 · ПР 7
29

30.

Спасибо за внимание!
Мерьков Дмитрий Сергеевич · группа 1руп9-5
Практическая работа 7 · Разработка сайта