Графический дизайн. Дизайн сайта

1.

DS
Графический дизайн
Дизайн сайта

2.

Введение
Концепция сайта: структура и
возможности
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

3.

Введение
Концепция сайта: структура и
возможности
Основы HTML, CSS, JavaScript
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

4.

Введение
Концепция сайта: структура и
возможности
Основы HTML, CSS, JavaScript
Создание макетов
и прототипирование
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

5.

Теория
Повторение
Вопрос 1
Что такое растровая графика?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

6.

Теория
Повторение
Вопрос 1
Что такое растровая графика?
Способ создания изображений в виде сетки
пикселей, где каждый пиксель имеет
определенный цвет или оттенок.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

7.

Теория
Повторение
Вопрос 2
Что такое векторная графика?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

8.

Теория
Повторение
Вопрос 2
Что такое векторная графика?
Способ создания изображений с помощью
математических формул
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

9.

Теория
Повторение
Вопрос 3
Что такое интерфейс?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

10.

Теория
Повторение
Вопрос 3
Что такое интерфейс?
Часть сайта или приложения, которая видна
пользователям
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

11.

Теория
Повторение
Вопрос 4
Что из представленных объектов является
результатом промышленного дизайна?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

12.

Теория
Повторение
Вопрос 4
Что из представленных объектов является
результатом промышленного дизайна?
Соковыжималка,
Филипп Старк
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

13.

Теория
Повторение
Вопрос 5
Что такое рендер?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

14.

Теория
Повторение
Вопрос 5
Что такое рендер?
Создание окончательного изображения или
видео из входных данных сцены, таких как
объекты, освещение и камера, с помощью
компьютерной программы или рендерера.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

15.

Теория
Сайт и его структура
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

16.

Теория
Сайт и его структура
Сайт — это набор логически связанных между собой веб-страниц,
расположенных в Сети под единым именем — доменом.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

17.

Теория
Сайт и его структура
Виды
сайтов
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

18.

Теория
Сайт и его структура
Виды
сайтов
Информационные сайты –
сайты, цель которых
предоставить информацию о
компании, услугах,
продукции, новостях и т.д.
Большинство корпоративных
и промо-сайтов относятся к
этой категории.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

19.

Теория
Сайт и его структура
Блоги – платформы, где
блогеры публикуют статьи,
заметки или обсуждают
различные темы. Блоги могут
быть личными,
корпоративными или
новостными.
Виды
сайтов
Информационные сайты –
сайты, цель которых
предоставить информацию о
компании, услугах,
продукции, новостях и т.д.
Большинство корпоративных
и промо-сайтов относятся к
этой категории.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

20.

Теория
Сайт и его структура
Интернет-магазины – сайты,
предоставляющие
возможность покупки
товаров или услуг онлайн.
Они включают каталоги
товаров, корзины покупок и
процессы оплаты.
Блоги – платформы, где
блогеры публикуют статьи,
заметки или обсуждают
различные темы. Блоги могут
быть личными,
корпоративными или
новостными.
Виды
сайтов
Информационные сайты –
сайты, цель которых
предоставить информацию о
компании, услугах,
продукции, новостях и т.д.
Большинство корпоративных
и промо-сайтов относятся к
этой категории.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

21.

Теория
Сайт и его структура
Интернет-магазины – сайты,
предоставляющие
возможность покупки
товаров или услуг онлайн.
Они включают каталоги
товаров, корзины покупок и
процессы оплаты.
Блоги – платформы, где
блогеры публикуют статьи,
заметки или обсуждают
различные темы. Блоги могут
быть личными,
корпоративными или
новостными.
Виды
сайтов
Социальные сети – это
платформы для общения,
обмена информацией и
контентом между
пользователями.
Информационные сайты –
сайты, цель которых
предоставить информацию о
компании, услугах,
продукции, новостях и т.д.
Большинство корпоративных
и промо-сайтов относятся к
этой категории.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

22.

Теория
Сайт и его структура
Интернет-магазины – сайты,
предоставляющие
возможность покупки
товаров или услуг онлайн.
Они включают каталоги
товаров, корзины покупок и
процессы оплаты.
Форумы и сообщества –
сайты, где люди могут
обсуждать темы, делиться
опытом и задавать вопросы
в рамках определенной
тематики.
Блоги – платформы, где
блогеры публикуют статьи,
заметки или обсуждают
различные темы. Блоги могут
быть личными,
корпоративными или
новостными.
Виды
сайтов
Социальные сети – это
платформы для общения,
обмена информацией и
контентом между
пользователями.
Информационные сайты –
сайты, цель которых
предоставить информацию о
компании, услугах,
продукции, новостях и т.д.
Большинство корпоративных
и промо-сайтов относятся к
этой категории.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

23.

Теория
Сайт и его структура
Интернет-магазины – сайты,
предоставляющие
возможность покупки
товаров или услуг онлайн.
Они включают каталоги
товаров, корзины покупок и
процессы оплаты.
Форумы и сообщества –
сайты, где люди могут
обсуждать темы, делиться
опытом и задавать вопросы
в рамках определенной
тематики.
Портфолио – веб-сайты, на
которых художники,
дизайнеры, фотографы и
другие специалисты
демонстрируют свои работы
и проекты. Такой сайт очень
поможет при поиске работы
или клиентов.
Блоги – платформы, где
блогеры публикуют статьи,
заметки или обсуждают
различные темы. Блоги могут
быть личными,
корпоративными или
новостными.
Виды
сайтов
Социальные сети – это
платформы для общения,
обмена информацией и
контентом между
пользователями.
Информационные сайты –
сайты, цель которых
предоставить информацию о
компании, услугах,
продукции, новостях и т.д.
Большинство корпоративных
и промо-сайтов относятся к
этой категории.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

24.

Теория
Сайт и его структура
Интернет-магазины – сайты,
предоставляющие
возможность покупки
товаров или услуг онлайн.
Они включают каталоги
товаров, корзины покупок и
процессы оплаты.
Блоги – платформы, где
блогеры публикуют статьи,
заметки или обсуждают
различные темы. Блоги могут
быть личными,
корпоративными или
новостными.
Форумы и сообщества –
сайты, где люди могут
обсуждать темы, делиться
опытом и задавать вопросы
в рамках определенной
тематики.
Образовательные
платформы – сайты,
предлагающие обучающие
курсы, уроки,
видеоматериалы и другие
ресурсы для образования.
Портфолио – веб-сайты, на
которых художники,
дизайнеры, фотографы и
другие специалисты
демонстрируют свои работы
и проекты. Такой сайт очень
поможет при поиске работы
или клиентов.
Виды
сайтов
Социальные сети – это
платформы для общения,
обмена информацией и
контентом между
пользователями.
Информационные сайты –
сайты, цель которых
предоставить информацию о
компании, услугах,
продукции, новостях и т.д.
Большинство корпоративных
и промо-сайтов относятся к
этой категории.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

25.

Теория
Интернет-магазины – сайты,
предоставляющие
возможность покупки
товаров или услуг онлайн.
Они включают каталоги
товаров, корзины покупок и
процессы оплаты.
Форумы и сообщества –
сайты, где люди могут
обсуждать темы, делиться
опытом и задавать вопросы
в рамках определенной
тематики.
Портфолио – веб-сайты, на
которых художники,
дизайнеры, фотографы и
другие специалисты
демонстрируют свои работы
и проекты. Такой сайт очень
поможет при поиске работы
или клиентов.
Сайт и его структура
Лендинги – одностраничные
сайты, ориентированные на
конкретное предложение
или продукт с целью
привлечения внимания и
стимулирования к действию.
Виды
сайтов
Социальные сети – это
платформы для общения,
обмена информацией и
контентом между
пользователями.
Блоги – платформы, где
блогеры публикуют статьи,
заметки или обсуждают
различные темы. Блоги могут
быть личными,
корпоративными или
новостными.
Образовательные
платформы – сайты,
предлагающие обучающие
курсы, уроки,
видеоматериалы и другие
ресурсы для образования.
Информационные сайты –
сайты, цель которых
предоставить информацию о
компании, услугах,
продукции, новостях и т.д.
Большинство корпоративных
и промо-сайтов относятся к
этой категории.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

26.

Теория
Сайт и его структура
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

27.

Теория
Сайт и его структура
Внешняя структура — это та часть сайта, которую посетители видят на
экране.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

28.

Теория
Сайт и его структура
Внешняя структура — это та часть сайта, которую посетители видят на
экране.
Название
компании,
логотип, часто
используемые
баннеры или
реклама
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

29.

Теория
Сайт и его структура
Внешняя структура — это та часть сайта, которую посетители видят на
экране.
Название
компании,
логотип, часто
используемые
баннеры или
реклама
Дополнительная
информацией,
анонсы
новостей, акции
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

30.

Теория
Сайт и его структура
Внешняя структура — это та часть сайта, которую посетители видят на
экране.
Название
компании,
логотип, часто
используемые
баннеры или
реклама
Ключевая
информация,
структурированная
заголовками
и контентом
Дополнительная
информацией,
анонсы
новостей, акции
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

31.

Теория
Сайт и его структура
Внешняя структура — это та часть сайта, которую посетители видят на
экране.
Название
компании,
логотип, часто
используемые
баннеры или
реклама
Дополнительная
информацией,
анонсы
новостей, акции
Ключевая
информация,
структурированная
заголовками
и контентом
Контактные
данные, ссылки
для навигации и
другая полезная
информация
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

32.

Теория
Сайт и его структура
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

33.

Теория
Сайт и его структура
Внутренняя структура — это логическая схема сайта, состоящая из
категорий и материалов, взаимосвязанных между собой.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

34.

Теория
Сайт и его структура
Внутренняя структура — это логическая схема сайта, состоящая из
категорий и материалов, взаимосвязанных между собой.
Линейная структура
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

35.

Теория
Сайт и его структура
Внутренняя структура — это логическая схема сайта, состоящая из
категорий и материалов, взаимосвязанных между собой.
Линейная структура
Линейная
с ответвлениями
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

36.

Теория
Сайт и его структура
Блочная структура
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

37.

Теория
Сайт и его структура
Блочная структура
Древовидная структура
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

38.

Теория
Разработка сайта – из чего она состоит?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

39.

Теория
Разработка сайта – из чего она состоит?
Компания
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

40.

Теория
Разработка сайта – из чего она состоит?
Заказчик
Компания
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

41.

Теория
Разработка сайта – из чего она состоит?
1
Подготовка
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

42.

Теория
Разработка сайта – из чего она состоит?
Бриф — это документ, в котором заказчик
раскрывает суть проекта и ставит задачи
исполнителю.
1
Подготовка
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

43.

Теория
Разработка сайта – из чего она состоит?
Бриф — это документ, в котором заказчик
раскрывает суть проекта и ставит задачи
исполнителю.
1
Подготовка
Бриф нужен, чтобы в дальнейшем не было
недопониманий
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

44.

Теория
1
Подготовка
Разработка сайта – из чего она состоит?
Коммерческое предложение (КП) — это
документ, с помощью которого компания
предлагает приобрести услугу или начать
взаимовыгодное сотрудничество.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

45.

Теория
Разработка сайта – из чего она состоит?
Техническое задание (ТЗ) — это документ,
который помогает контролировать выполнение
требований и результатов работы.
1
Подготовка
ТЗ защищает нас, как исполнителей
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

46.

Теория
Разработка сайта – из чего она состоит?
2
Дизайн
1
Подготовка
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

47.

Теория
Разработка сайта – из чего она состоит?
2
Дизайн
1
Дизайн-концепция — это обобщённый
образ будущего сайта, который передает
его визуальные и стилистические
особенности с учётом всех пожеланий и
требований заказчика.
Подготовка
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

48.

Теория
Разработка сайта – из чего она состоит?
2
Дизайн
1
Дизайн-концепция — это обобщённый
образ будущего сайта, который передает
его визуальные и стилистические
особенности с учётом всех пожеланий и
требований заказчика.
Подготовка
Прототипирование
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

49.

Теория
Разработка сайта – из чего она состоит?
2
Дизайн
1
Дизайн-концепция — это обобщённый
образ будущего сайта, который передает
его визуальные и стилистические
особенности с учётом всех пожеланий и
требований заказчика.
Подготовка
Прототипирование
Адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

50.

Теория
Разработка сайта – из чего она состоит?
2
Дизайн
1
Подготовка
3
Программирование
Вёрстка — процесс создания структуры кода по отрисованному макету.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

51.

Теория
1
Подготовка
Разработка сайта – из чего она состоит?
2
4
Дизайн
Тестирование
3
Программирование
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

52.

Теория
1
Подготовка
Разработка сайта – из чего она состоит?
2
4
Дизайн
Тестирование
3
Программирование
Тестирование необходимо,
чтобы избежать следующей
ситуации
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

53.

Теория
1
Подготовка
Разработка сайта – из чего она состоит?
2
4
Дизайн
Тестирование
3
Программирование
5
Запуск сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

54.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Запуск сайта
2
4
Тестирование
Программирование
3
Дизайн
адаптив
5
Подготовка
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

55.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Подготовка
2
4
Тестирование
Программирование
3
Дизайн
адаптив
5
Запуск сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

56.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Подготовка
2
4
Дизайн
Программирование
3
Тестирование
адаптив
5
Запуск сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

57.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Подготовка
2
4
Дизайн
Тестирование
3
Программирование
адаптив
5
Запуск сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

58.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Подготовка
2
4
Дизайн
Тестирование
3
Программирование
адаптив
5
Запуск сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

59.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Подготовка
2
4
Дизайн
Тестирование
3
Программирование
адаптив
5
Запуск сайта
верстка
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

60.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Подготовка
2
4
Дизайн
Тестирование
3
Программирование
адаптив
5
Запуск сайта
верстка
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

61.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Подготовка
2
4
Дизайн
Тестирование
3
Программирование
адаптив
5
Запуск сайта
верстка
домен
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

62.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
1
Подготовка
2
4
Дизайн
Тестирование
3
Программирование
адаптив
5
Запуск сайта
верстка
домен
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

63.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
Программирование
дизайнконцепция
адаптив
5
Запуск сайта
верстка
домен
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

64.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
Программирование
дизайнконцепция
адаптив
5
Запуск сайта
верстка
домен
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

65.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
Программирование
дизайнконцепция
адаптив
5
Запуск сайта
верстка
домен
прототипирование
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

66.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
Программирование
дизайнконцепция
адаптив
5
Запуск сайта
верстка
домен
прототипирование
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

67.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
дизайнконцепция
адаптив
5
Программирование
Запуск сайта
верстка
хостинг
домен
прототипирование
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

68.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
дизайнконцепция
адаптив
5
Программирование
Запуск сайта
верстка
хостинг
домен
прототипирование
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

69.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
дизайнконцепция
адаптив
5
Программирование
Запуск сайта
верстка
хостинг
домен
прототипирование
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

70.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
дизайнконцепция
адаптив
5
Программирование
Запуск сайта
верстка
хостинг
домен
прототипирование
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

71.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
коммерческое
предложение
дизайнконцепция
адаптив
5
Программирование
Запуск сайта
верстка
хостинг
домен
прототипирование
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

72.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
коммерческое
предложение
дизайнконцепция
адаптив
5
Программирование
Запуск сайта
верстка
хостинг
домен
прототипирование
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

73.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
коммерческое
предложение
5
Программирование
дизайнконцепция
верстка
Запуск сайта
баг
адаптив
хостинг
домен
прототипирование
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

74.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
коммерческое
предложение
5
Программирование
дизайнконцепция
верстка
Запуск сайта
баг
адаптив
хостинг
домен
прототипирование
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

75.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
коммерческое
предложение
техническое
задание
5
Программирование
дизайнконцепция
верстка
Запуск сайта
баг
адаптив
хостинг
домен
прототипирование
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

76.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
коммерческое
предложение
техническое
задание
5
Программирование
дизайнконцепция
верстка
Запуск сайта
баг
адаптив
хостинг
домен
прототипирование
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

77.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
коммерческое
предложение
техническое
задание
5
Программирование
дизайнконцепция
прототипирование
верстка
реализация
функционала
Запуск сайта
баг
адаптив
хостинг
домен
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

78.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
коммерческое
предложение
техническое
задание
5
Программирование
дизайнконцепция
прототипирование
верстка
реализация
функционала
Запуск сайта
баг
адаптив
хостинг
домен
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

79.

Разработка сайта – из чего она состоит?
Теория
Хронология проекта
верстка
домен
дизайн-концепция
коммерческое предложение
баг
прототипирование
техническое задание
хостинг
реализация функционала
бриф
2
4
Дизайн
Тестирование
1
3
Подготовка
бриф
коммерческое
предложение
техническое
задание
5
Программирование
дизайнконцепция
прототипирование
верстка
реализация
функционала
Запуск сайта
баг
адаптив
хостинг
домен
адаптив
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

80.

Теория
Разбор технического задания на дизайн-сайта
Назначение сайта
Сайт Lay's создан для того, чтобы привлекать внимание и информировать о всем
многообразии вкусов чипсов, предлагаемых брендом. Здесь можно найти не
только последние новости и актуальные новинки, но и подробное описание
разнообразия вкусов и продукции.
Помимо этого, сайт упрощает взаимодействие: контактные данные, ссылки на
социальные сети и формы обратной связи создают мост для общения между
брендом и посетителями. Навигационное меню облегчает перемещение по
разделам сайта, делая его использование удобным и интуитивно понятным. Весь
дизайн сайта отражает узнаваемый стиль и образ бренда, что делает его
привлекательным и запоминающимся.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

81.

Теория
Разбор технического задания на дизайн-сайта
Обязательные страницы сайта
На сайте обязательно должны присутствовать следующие страницы:
1. Главная страница:
• Шапка:
• Логотип "Lay's"
• Навигационное меню со ссылками на страницы "Главная", "Вкусы",
"Новинки", "Новости"
• Кнопка "Купить"
• Главный экран:
• Изображение продукта "Lay's"
• Текстовое описание компании/продукта
• 2 кнопки с call-to-action (например, "Попробовать сейчас", "Узнать больше")
• Блок с цитатой:
• Отображение выделенной цитаты или рекомендации
• Блок с магазином:
• Показ товаров (фото, название, описание) с возможностью перехода на
страницу покупки
• Подвал:
• Ссылки на официальные аккаунты в социальных сетях
• Кнопка "Купить"
• Навигационная панель по сайту
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

82.

Теория
Разбор технического задания на дизайн-сайта
Обязательные страницы сайта
2. Страница "Вкусы":
• Шапка:
• Ссылки на другие страницы
• Логотип "Lay's"
• Кнопка "Купить"
• Секция с разнообразием вкусов:
• Изображения различных видов чипсов "Lay's" с названиями и описаниями
• Подвал:
• Ссылки на социальные сети
• Навигация по сайту
3. Страница "Новинки":
• Шапка:
• Ссылки на другие страницы
• Логотип "Lay's"
• Кнопка "Купить"
• Блок с новыми продуктами:
• Изображения и информация о новых продуктах
• Подвал:
• Ссылки на социальные сети
• Навигация по сайту
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

83.

Теория
Разбор технического задания на дизайн-сайта
Обязательные страницы сайта
4. Страница "Новости":
• Шапка:
• Ссылки на другие страницы
• Логотип "Lay's"
• Кнопка "Купить"
• Блок с новостями:
• Список последних новостей или событий компании "Lay's"
• Подвал:
• Ссылки на социальные сети
• Навигация по сайту
Примечание: Весь контент должен быть предоставлен в виде макетов для
утверждения перед началом разработки, а также должен быть адаптивным для
корректного отображения на различных устройствах.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

84.

Теория
Разбор технического задания на дизайн-сайта
Функциональные требования
Форма обратной связи на каждой странице для связи с посетителями, включая
поля для вопросов, отзывов или предложений.
Разработка адаптивного дизайна для корректного отображения сайта на
различных устройствах (планшеты, мобильные телефоны, настольные
компьютеры).
Добавление кнопок для быстрой связи с официальными страницами бренда в
социальных сетях.
Каждый продукт должен иметь отдельную страницу с подробной
информацией, включая описание вкуса, питательные характеристики и
возможность добавления в корзину для покупки.
Обеспечение безопасности пользовательских данных и транзакций в случае
онлайн-покупок.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

85.

Теория
Разбор технического задания на дизайн-сайта
Структура сайта
Главная страница
Вкусы
Новинки
Новости
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

86.

Теория
Разбор технического задания на дизайн-сайта
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

87.

ИТОГ
Повторение
Вопрос 1
Сайт – это …
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

88.

ИТОГ
Повторение
Вопрос 1
Сайт – это …
Набор логически связанных между собой
веб-страниц, расположенных в Сети под
единым именем — доменом.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

89.

ИТОГ
Повторение
Вопрос 2
Что такое КП?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

90.

ИТОГ
Повторение
Вопрос 2
Что такое КП?
Документ, с помощью которого компания
предлагает приобрести услугу или начать
взаимовыгодное сотрудничество.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

91.

ИТОГ
Повторение
Вопрос 3
Что такое ТЗ?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

92.

ИТОГ
Повторение
Вопрос 3
Что такое ТЗ?
Документ, который помогает контролировать
выполнение требований и результатов
работы.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

93.

ИТОГ
Повторение
Вопрос 4
Зачем нужна дизайн-концепция?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

94.

ИТОГ
Повторение
Вопрос 4
Зачем нужна дизайн-концепция?
Дизайн-концепция нужна для визуализации
идеи сайта, определения стиля, создания
основы для разработки и облегчения
коммуникации между клиентом и
разработчиками.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании