590 подписчиков

План лекций и практических работ для студентов и преподавателей колледжа по направлению "Веб-разработка". Том IV

2 июля 20212 июл 2021

346

10 мин

Оглавление

МДК. 08.01 Технология проектирования и разработки интерфейсов пользователя
Раздел 1. Технология проектирования и разработки интерфейсов пользователя
МДК. 08.02 Графический дизайн и мультимедиа

Специальность: 09.02.07 «Информационные системы и программирование»

Квалификация: разработчик веб и мультимедийных приложений

Профессиональный модуль: ПМ.08 Разработка дизайна веб-приложений

Дисциплины:

МДК. 08.01 Технология проектирования и разработки интерфейсов пользователя
МДК 08.02 Графический дизайн и мультимедиа

Практики:

Учебная практика по профессиональному модулю
Производственная практика по профессиональному модулю

О чем статья: предложения тем лекций и практических работ для преподавателей данного проф модуля при формировании РП и КТП

МДК. 08.01 Технология проектирования и разработки интерфейсов пользователя

Раздел 1. Технология проектирования и разработки интерфейсов пользователя

Тема 08.01.01. Расширенные возможности HTML и CSS

Media – запросы в CSS
CSS.Свойство animation
CSS3
Мнемоники в HTML и HTML сущности
Геометрические фигуры на CSS
CSS.3D-объекты
CSS3-фильтры
Перенос слов в CSS
CSS. Линейный градиент

Пр.№1 «CSS3»

Пр.№2 «Разработка элементов с помощью HTML5 и CSS3»

Яндекс.Разработчикам
Оптимизация изображений
Методология БЭМ

Пр.№3 «Верстка сайта по методологии БЭМ»

Flexbox. Позиционирование
Виджеты ВКонтакте

Пр.№4 «Адаптивная верстка сайта»

Пр.№5 «Адаптивная верстка и валидность»

Пр.№6 «Использование языка сценариев JavaScript при создании web-сайта»

Пр.№7 «Внедрение внешних ресурсов»

Пр.№8 «Верстка макета сайта по стандартам ВорлдСкиллс»

Тема 08.01.02. Web - дизайн

Ошибки в веб-дизайне: верстка текста, отсутствие единства стиля проекта, непродуманная композиции, подбор контента
UI / UX дизайн. UI-kit. Тренды в веб-дизайне.
Технический дизайн: ретушь, цветокоррекция, коллажирование.
Дизайн главной страницы. Иерархия в текстовых блоках. Эффектная типографика.

Пр.№1 «Редизайн двух произвольных главных экранов сайта»

Пр.№2 «Подбор и обработка фотографий для проекта в одной стилистике. Создание мудборда»

Дизайн внутренних страниц и всплывающих окон.

Пр.№3 «Разработка макета лендинга»

Пр.№4 «Разработка макета двух внутренних страниц для многостраничника. Оформление всплывающего окна»

Особенности дизайна интернет-магазина.

Пр.№5 «Отрисовка главной страницы интернет-магазина»

Пр.№6 «Отрисовка внутренней страницы для многостраничника. Разработка эффектов наведения для элементов интерфейса»

Дизайн мобильной версии сайта. Адаптивный дизайн.

Пр.№7 «Отрисовка дизайн-макетов для планшета и смартфона»

Пр.№8 «Отрисовка адаптивного дизайна»

МДК. 08.02 Графический дизайн и мультимедиа

Раздел 2. Разработка графических изображений и мультимедиа

Тема 08.02.01 Компьютерная графика

Введение в компьютерную графику. Виды компьютерной графики
Физические основы компьютерной графики
Соответствие цветов и управление цветом
Форматы хранения графических изображений

Тема 08.02.02 Векторная графика

Особенности векторной графики
Редактор векторной графики. Редактор разработки мультимедийного контента

Пр №1 «Создание сложного векторного объекта»

Пр №2 Практическая работа «Создание паттернов»

Пр №3«Создание персонажа»

Основы работы с графическим планшетом

Пр №4«Отрисовка шрифта несколькими способами. Создание афиши»

Пр №5«Отрисовка иллюстрации с помощью графического планшета»

Пр №6 «Разработка логотипов в разных стилевых решениях»

Пр №7 «Отрисовка набора иконок для тематического сайта»

Пр №8 «Разработка фирменного стиля»

Пр №9 «Презентация фирменного стиля»

Ключевые элементы айдентики.
Основы отрисовки меню, афиш, баннеров, листовок.

Пр №10 «Создание простых сценариев. Работа с событиями»

Пр №11 «Портфолио работ»

Пр №12 «Полиграфия и допечатная подготовка»

Пр №13 «Отрисовка интерфейса для 2D - игры»

Пр №14 «Разработка UI-kit»

Пр №15 «Разработка дизайна игровой площадки»

Тема 08.02.03 Растровая графика

Особенности растровой графики. Редактор растровой графики

Пр №16 «Освоение инструментов выделения и трансформации областей. Рисование и раскраска» «Работа со стилями слоев и фильтрами»

Пр №17 «Работа со стилями слоев и фильтрами»

Режимы наложения. Слои и маски. Корректирующие слои.
Camera Raw. Базовый алгоритм обработки фотографии.
Photoshop. Базовый алгоритм обработки.

Пр №18 Практическая работа «Создание текстовых объектов. Тестовые эффекты. Текстовый дизайн» Photoshop. Ретушь кожи.

Пр №19 «Освоение инструментов выделения и трансформации областей. Рисование и раскраска» «Работа со стилями слоев и фильтрами»

Photoshop. Ретушь кожи.
Работа с Mock-up.

Пр №20 «Оформление проекта с помощью Mock-up.»

Пр №21 «Разработка статьи с использованием типографики»

Пр №22 «Оформление проекта с помощью Mock-up.»

Пр №23 «Разработка статьи с использованием типографики»

Photoshop. Цветокоррекция

Пр №24 «Разработка дизайн-макета landing page в Adobe Photoshop.» «Создание мудбордов для сайта»

Пр №25 «Разработка дизайна рекламного баннера»

Профессиональная ретушь кожи. Обработка портретных (Beauty) снимков.
Детальная обработка волос. Объем в портретной фотографии.
Коллажирование, Художественные эффекты
Знакомство с программой Lightroom.
Модуль Develop. Обработка фотографий.

Пр №26 «Hi-End обработка фотографии»

Пр №27 «Корректировка цифровых фотографий» Lightroom.

Цветокоррекция и ретушь
Алгоритм работы в Lightroom.

Пр №28 «Создание фотокниги в Lightroom»

Пр №29 «Создание оригинал-макетов, элементов дизайна сайта»

Создание макета сайта, буклета

Тема 08.02.04 Трехмерная графика

Понятие трехмерной графики.
Основы построения сцен в Blender
3D моделирование в 3D MAX.

Пр №30 «Экстерьер в 3D Max»

Unreal Engine. Источники света, шейдеры, контент.

Пр №31 «Ландшафтный дизайн»

Пр №32 «Проектирование маломерной квартиры-студии»

Adobe Dimension. Создание эффективной рекламы

Пр №33 «Создание эффективной рекламы»

Оценка освоения теоретического курса профессионального модуля

Типовые задания для оценки освоения МДК

Типовые задания для оценки освоения МДК 08.01:

Список вопросов:

Тренды в веб-дизайне на последнюю неделю
Что входит в понятие «Технический дизайн»?
Правила эффектной типографики
Мнемоники в HTML и HTML сущности
Методология БЭМ
Особенности дизайна интернет-магазина
Что лучше - шаблон или индивидуальный дизайн?
Сколько стоит услуга веб-дизайна?
Сколько времени делается сайт?
Как оценить качество веб-дизайна?
Что такое лучший веб-дизайн?
Какие школы веб-дизайна существуют?
Как защитить авторские права на веб-дизайн?
Что такое послеобраз?
Какой веб-дизайн можно считать современным?

Проверяемые результаты обучения:

Умение разрабатывать дизайн - концепции
Текст задания:Разработайте дизайн – концепцию для мясного комбината
Критерии оценки:
На «5» - дизайн-концепция выполняет все условия бизнеса компании;
На «4» - неудачная цветовая схема, но основные моменты отражены;
На «3» - не соответствует базовым требованиям.

Типовые задания для оценки освоения МДК 08.02

Список вопросов:

Базовый алгоритм обработки фотографии
Назовите первоначальные значения англоязычного понятия «дизайн»?
Что такое дизайн?
В чем заключается природа дизайна?
Какие факторы способствовали возникновению дизайна?
Какие науки определяют область необходимых знаний дизайнера-графика? Приведите примеры.
Приведите примеры первых графических объектов, имеющих утилитарное назначение.
Каким образом потребности человека и общества влияют на дизайнерскую деятельность?
Почему процесс самоопределения графического дизайна носит длительный характер?
Что способствовало развитию потребности в создании графических дизайн- объектов?
О чем свидетельствует появление плаката как средства визуальной информации?
Назовите социокультурные факторы развития графического дизайна.
Каким образом объекты дизайн-графики манипулируют массовым сознанием?
Почему именно реклама представляет собой наиболее развивающееся направление графического дизайна?
Охарактеризуйте коммуникативную функцию дизайна рекламы.
В чем состоит задача графического или визуального дизайна?
Что представляет собой процесс визуализации культуры?
Приведите примеры использования объектов графического дизайна в различных областях массовой информации.
В чем заключается креативность мышления дизайнера-графика?
Как вы понимаете определение дизайнера-графика как «визуального интерпретатора»?
Какую роль в рекламном дизайне играет эстетическая форма?
Назовите социокультурные функции графического дизайна?
Охарактеризуйте класс трехмерных объектов графического дизайна на основании типологии по типу изобразительной поверхности.

Задания:

1. Подготовить 2 мастер-баннера для рекламной компании «Вклад Приветственный». Размеры 240х400, 729х90 px.

Требования:

На баннерах сверху везде написать название продукта: Вклад “Приветственный”. Крупно выделить ставку 6,51% годовых.

Ключевое предложение: сумма депозита от 100 000 до 2 млн. руб. на срок от 6 до 12 месяцев.

2. Подобрать кей вижуал для рекламной кампании Райффайзенбанка.

Необходимо подобрать изображение для рекламной кампании нового продукта банка: накопительный счет “Активный”.

Что подбирать:

- без фона / на монотонном фоне (либо на светлом, либо на синем / голубоватом).

- использовать на посадочной странице и баннерах (есть вероятность использования на сайте, но ориентироваться в первую очередь на пригодность вижуала для баннеров разных размеров).

- Счет называется "Активный" - поэтому стараемся подобрать вижуал, коррелирующий с названием.

- ЦА: снова взрослая, ядро 45+, но тк это не вклад, а счет, здесь больше и аудитории моложе, 35+. Т.е. не так строго с возрастными предпочтениями, как по депозиту. Можно более дерзкое, но понятные для 16-летних образы не подойдут.

- Что ищем: может быть человек, спортсмен (но не футболист), может быть, все, что угодно, что будет смотреться.

- По цветам: желательно подкрасить один из элементов в фирменный желтый и в целом, что-нибудь достаточно яркое можем пробовать.

3. Подготовить ресайзы баннеров. Необходимо подготовить ресайзы мастер-баннера созданного в Задаче №2 следующих размеров:

600х600 / 1080х607 / 1200х628 /1080х1080

- Максимальный размер баннера: 120 КБ

- По 20% с каждой стороны предусмотреть возможность обрезки.

- Не более 20% текста, обязательно проверить в тесте. Все баннеры должны проходить проверку со статусом ОК.

4. Подготовить посадочную страницу для кампании “накопительный счет “Приветственный”. По ссылке доступен прототип страницы. В промо-блоке необходимо использовать предоставленное изображение, предварительно “покрасив” один из элементов изображения в фирменный желтый цвет банка.

5. Нарисовать иконки для сайта по продаже декоративной косметики:

корзина — ссылка на корзинудля маркировки нового продукта
new — для маркировки нового продукта
спец.цена — для маркировки продукта, отпускаемого по акции
warning — для маркировки сообщения, содержащего приоритет высокой важности

6. Найти в интернете фотографию не лучшего качества, где необходимо избавиться от пикселизации, шума, цветовых аномалий, неровностей, размытых границ для придания ей товарного вида. Поработать над ней и показать результат.

Проверяемые результаты обучения

Понимание принципов построения современных интерфейсов, а также способность перенести стиль из «брендинга» в цифровую среду.
Критерии оценки:
На «5» - . Соблюдение аккуратности, наполнение контентных блоков различным (а не одинаковым) контентом. Макет сделан так, как будто через 5 минут уйдет на презентацию большому клиенту.
На «4» - использование разных стилей шрифтов и отсутствие акцента на целевое действие на странице сайта.
На «3» - Использование стоковых изображений. Копирование чужого дизайна.