МИНОБРНАУКИ РОССИИ
федеральное государственное бюджетное образовательное учреждение высшего образования
«Алтайский государственный университет»

Основы типографики и верстки

рабочая программа дисциплины
Закреплена за кафедройКафедра культурологии и дизайна
Направление подготовки09.03.03. Прикладная информатика
ПрофильПрикладная информатика в дизайне
Форма обученияЗаочная
Общая трудоемкость6 ЗЕТ
Учебный планz09_03_03_Прикладная информатика_ПИвД-2023
Часов по учебному плану 216
в том числе:
аудиторные занятия 10
самостоятельная работа 197
контроль 9
Виды контроля по курсам
экзамены: 4

Распределение часов по курсам

Курс 4 Итого
Вид занятий УПРПДУПРПД
Лекции 4 4 4 4
Практические 6 6 6 6
Сам. работа 197 197 197 197
Часы на контроль 9 9 9 9
Итого 216 216 216 216

Программу составил(и):

Рецензент(ы):
доктор искусствоведения, Дир.инст., Л.И. Нехвядович

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

разработана в соответствии с ФГОС:
Федеральный государственный образовательный стандарт высшего образования - бакалавриат по направлению подготовки 09.03.03 Прикладная информатика (приказ Минобрнауки России от 19.09.2017 г. № 922)

составлена на основании учебного плана:
09.03.03 Прикладная информатика
утвержденного учёным советом вуза от 26.06.2023 протокол № 4.

Рабочая программа одобрена на заседании кафедры
Кафедра культурологии и дизайна

Протокол от 23.05.2023 г. № 7
Срок действия программы: 20232024 уч. г.

Заведующий кафедрой
к. иск., доцент Ю.В. Кирюшина


Визирование РПД для исполнения в очередном учебном году

Рабочая программа пересмотрена, обсуждена и одобрена для
исполнения в 2023-2024 учебном году на заседании кафедры

Кафедра культурологии и дизайна

Протокол от 23.05.2023 г. № 7
Заведующий кафедрой к. иск., доцент Ю.В. Кирюшина


1. Цели освоения дисциплины

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

2. Место дисциплины в структуре ООП

Цикл (раздел) ООП: Б1.В.01

3. Компетенции обучающегося, формируемые в результате освоения дисциплины

ПК-3Способен разрабатывать визуальный стиль пользовательского интерфейса на основе навыков работы с цветом, формой, шрифтом, композицией, а также с учетом развития визуальной культуры и дизайна
ПК-3.1 Знает базовые принципы графического дизайна, основное прикладное программное обеспечение для создания визуальных компонентов пользовательского интерфейса
ПК-3.2 Умеет использовать прикладные программы и веб-приложения для разработки визуального стиля пользовательского интерфейса
ПК-3.3 Владеет навыком разработки эскиза графического стиля пользовательского интерфейса
В результате освоения дисциплины обучающийся должен
3.1.Знать:
3.1.1.ПК-3.1: Знает базовые принципы графического дизайна, основное прикладное программное обеспечение для создания визуальных компонентов пользовательского интерфейса
3.2.Уметь:
3.2.1.ПК-3.2: Умеет использовать прикладные программы и веб-приложения для разработки визуального стиля пользовательского интерфейса
3.3.Иметь навыки и (или) опыт деятельности (владеть):
3.3.1.ПК-3.3: Владеет навыком разработки эскиза графического стиля пользовательского интерфейса

4. Структура и содержание дисциплины

Код занятия Наименование разделов и тем Вид занятия Курс Часов Компетенции Литература
Раздел 1. Основы типографики
1.1. Типографика как вид графического дизайна. Задачи и функции типографики. Лекции 4 4 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
1.2. Понятийно-терминологический аппарат дисциплины Сам. работа 4 20 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
1.3. Системы мер, применяемые в типографике. Технические ограничения в типографике Сам. работа 4 20 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
1.4. Общие законы композиции в типографике Сам. работа 4 20 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
1.5. Пробелы. Кавычки. Правила использование тире различных типов. Дроби. Табуляторы. Знаки, отсутствующие на клавиатуре. Специальные символы. Сам. работа 4 20 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
1.6. Кегль. Интерлиньяж. Кернинг и трекинг. Оформление абзацев. Отступы и выключка. Отбивки. Сам. работа 4 16 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
Раздел 2. Шрифт как элемент дизайна
2.1. Буква как графический объект с самостоятельной эстетической ценностью Практические 4 2 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
2.2. 4 Сам. работа 4 10 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
2.3. Принципы удобочитаемости, различимости и заметности шрифта Сам. работа 4 18 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.3
Раздел 3. Верстка в цифровом дизайне
3.1. Понятие верстки и модульного проектирования Практические 4 4 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.1, Л1.3
3.2. Подготовка текстовой и графической информации к верстке Сам. работа 4 20 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.1, Л2.2, Л1.3
3.3. Применение HTML для верстки Сам. работа 4 18 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.1, Л1.3
3.4. Применение CSS для верстки Сам. работа 4 18 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.1, Л1.3
3.5. Анализ модульной сетки сайта Сам. работа 4 17 ПК-3.1, ПК-3.2, ПК-3.3 Л3.1, Л2.1, Л1.2, Л1.1, Л1.3

5. Фонд оценочных средств

5.1. Контрольные вопросы и задания для проведения текущего контроля и промежуточной аттестации по итогам освоения дисциплины
Оценочные материалы для текущего контроля по разделам и темам дисциплины в полном объеме размещены в онлайн-курсе на образовательном портале «Цифровой университет АлтГУ» - https://portal.edu.asu.ru/course/view.php?id=9350.

ОЦЕНКА СФОРМИРОВАННОСТИ КОМПЕТЕНЦИИ ПК-3: Способен создавать интерфейсные тексты и верстать текст интерфейса.

ПРИМЕРЫ ЗАДАНИЙ ЗАКРЫТОГО ТИПА

1.Какой элемент верстки используется для определения структуры документа и содержит заголовки, абзацы и списки?

A) Таблица
B) Текстовое поле
C) Диаграмма
D) Теги разметки (например, HTML-теги)
Ответ: D

2.Какой шрифт легче читать в тексте, написанном на экране?

A) Курсив
B) Полужирный
C) Обычный (не курсив, не полужирный)
D) Моноширинный
Ответ: C

3.Какой из следующих форматов изображения подходит для сохранения изображений с прозрачным фоном?

A) JPEG
B) BMP
C) PNG
D) GIF
Ответ: C

4.Что означает акроним "RGB" в контексте цветовой модели?

A) Really Good Blue
B) Red, Green, Blue
C) Random Gradient Blend
D) Rarely Gray Background
Ответ: B

5.Какие из следующих элементов типографии помогают улучшить читаемость текста?

A) Жирный шрифт и маленький размер шрифта
B) Отсутствие интерлиньи и монотонный цвет фона
C) Подходящий межстрочный интервал и контрастный цвет текста
D) Вертикальное выравнивание и маленькая ширина колонки
Ответ: C

6.Какие из следующих цветовых пространств наиболее часто используются для веб-дизайна?

A) CMYK
B) LAB
C) Pantone
D) sRGB
Ответ: D

7.Какой формат изображения обычно используется для фотографий с миллионами оттенков цвета?

A) GIF
B) PNG
C) JPEG
D) BMP
Ответ: C

8.Что такое "кернинг" в типографии?

A) Размер шрифта
B) Размер шрифта и межбуквенное расстояние
C) Межбуквенное расстояние
D) Межстрочное расстояние
Ответ: C

9.Какой тип файла используется для хранения векторных изображений?

A) JPEG
B) TIFF
C) SVG
D) PNG
Ответ: C

10.Какие элементы макета обычно включают в себя поля, например, в брошюре или книге?

A) Маркеры
B) Отступы
C) Рисунки
D) Сноски
Ответ: B

11.Что такое "резкость" изображения?

A) Уровень яркости
B) Количество цветов
C) Контрастность
D) Четкость деталей
Ответ: D

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

A) PNG
B) JPEG
C) TIFF
D) GIF
Ответ: D

13.Какие элементы часто используются для создания сетки на веб-странице?

A) Таблицы
B) Колонки
C) Формы
D) Диаграммы
Ответ: A

14.Какой цветовой режим лучше всего подходит для печати документов с использованием профессиональных печатных машин?

A) RGB
B) sRGB
C) CMYK
D) LAB
Ответ: C

15.Что означает термин "типографика"?

A) Изучение искусства верстки текста и изображений на странице
B) Графическое оформление шрифтов
C) Способность редактировать изображения
D) Искусство создания анимации
Ответ: A

КРИТЕРИИ ОЦЕНИВАНИЯ:
Каждое задание оценивается 1 баллом. Оценивание КИМ теоретического характера в целом:«отлично» – верно выполнено 85-100% заданий; «хорошо» – верно выполнено 70-84% заданий; «удовлетворительно» – верно выполнено 51-69% заданий; «неудовлетворительно» – верно выполнено 50% или менее 50% заданий.


ПРИМЕРЫ ЗАДАНИЙ ОТКРЫТОГО ТИПА

1.В чем заключается основное назначение типографики?
Ответ: Основное назначение типографики - это создание и оформление текстов с целью обеспечения их читаемости и эстетичности.
2.Какое значение имеет шрифт в типографике?
Ответ: Шрифт влияет на стиль и восприятие текста, определяя форму и размер символов.
3.Что такое кегль в типографике?
Ответ: Кегль - это размер шрифта, измеряемый в точках, где 1 кегль равен 1/72 дюйма.
4.Какие основные элементы верстки текста вы знаете?
Ответ: Основные элементы верстки текста включают в себя колонки, отступы, выравнивание, межстрочный интервал и отступы от краев.
5.Что такое выравнивание текста, и какие основные виды вы знаете?
Ответ: Выравнивание текста определяет расположение текста относительно краев области. Основные виды выравнивания включают в себя левое, правое, центрированное и по ширине.
6.Что такое межстрочный интервал, и как он влияет на текст?
Ответ: Межстрочный интервал определяет расстояние между строками текста и влияет на читаемость и эстетику текста.
7.Какие факторы следует учитывать при выборе цвета текста на фоне?
Ответ: При выборе цвета текста на фоне следует учитывать контраст, читаемость и восприятие текста пользователями.
8.Что такое "кернинг" в типографике?
Ответ: Кернинг - это настройка промежутков между отдельными буквами, чтобы достичь лучшей читаемости и баланса текста.
9.Какие основные типы графических форматов используются при верстке текста?
Ответ: Основные типы графических форматов, используемых при верстке текста, включают JPEG, PNG, GIF и SVG.
10.Какой символ часто используется для обозначения неразрывного пробела в типографике?
Ответ: В типографике для обозначения неразрывного пробела часто используется символ " ".
11.Что такое типографская сетка и какие её преимущества?
Ответ: Типографская сетка - это структура размещения текста и элементов на странице. Её преимущества включают в себя улучшение оформления, выравнивание и удобство чтения.
12.Что такое заголовок и какие его основные уровни?
Ответ: Заголовок - это текст, который обычно выделен более крупным размером и жирным начертанием. Основные уровни заголовков обычно нумеруются от H1 до H6.
13.Какие основные элементы интерфейсного текста следует учитывать при его верстке?
Ответ: Основные элементы интерфейсного текста включают в себя кнопки, ссылки, заголовки, параграфы, списки и метки.
14.Что такое "выделение текста" в типографике и какие виды выделения вы знаете?
Ответ: Выделение текста - это применение разных стилей к тексту, такие как жирный, курсив, подчеркивание и зачеркивание.
15.Какие инструменты и программы часто используются для верстки текста и создания интерфейсных элементов?
Ответ: Инструменты и программы, часто используемые для верстки текста и создания интерфейсных элементов, включают в себя Adobe InDesign, Adobe Illustrator, Adobe Photoshop, Figma, и Sketch.
16.Какие принципы выравнивания текста следует соблюдать при верстке интерфейсных элементов?
Ответ: Принципы выравнивания текста включают в себя выравнивание по сетке, одинаковый интервал между элементами и соблюдение единой структуры.
17.Что такое "текстовые стили" (text styles) в дизайне интерфейса?
Ответ: Текстовые стили - это набор параметров, таких как размер шрифта, цвет и выравнивание, которые можно применить к тексту для единообразного оформления.
18.Что такое "отзывчивый шрифт" (responsive font) и в чем его преимущества?
Ответ: Отзывчивый шрифт - это шрифт, который автоматически адаптируется к разным размерам экранов, обеспечивая хорошую читаемость на мобильных устройствах и десктопах.
19.Что такое кегль шрифта?
Ответ: Кегль шрифта - это размер шрифта, измеряемый в точках.
20.Какие типы списков можно использовать при верстке текста?
Ответ: Маркированные (с точками) и нумерованные (с цифрами) списки.


КРИТЕРИИ ОЦЕНИВАНИЯ ОТКРЫТЫХ ВОПРОСОВ.
«Отлично» (зачтено): Ответ полный, развернутый. Вопрос точно и исчерпывающе передан, терминология сохранена, студент превосходно владеет основной и дополнительной литературой, ошибок нет.
«Хорошо» (зачтено): Ответ полный, хотя краток, терминологически правильный, нет существенных недочетов. Студент хорошо владеет пройденным программным материалом; владеет основной литературой, суждения правильны.
«Удовлетворительно» (зачтено): Ответ неполный. В терминологии имеются недостатки. Студент владеет программным материалом, но имеются недочеты. Суждения фрагментарны.
«Неудовлетворительно» (не зачтено): не использована специальная терминология. Ответ, в сущности, неверен. Переданы лишь отдельные фрагменты соответствующего материала вопроса. Ответ не соответствует вопросу или вовсе не дан.
5.2. Темы письменных работ для проведения текущего контроля (эссе, рефераты, курсовые работы и др.)
не предусмотрены
5.3. Фонд оценочных средств для проведения промежуточной аттестации
см. приложение

6. Учебно-методическое и информационное обеспечение дисциплины

6.1. Рекомендуемая литература
6.1.1. Основная литература
Авторы Заглавие Издательство, год Эл. адрес
Л1.1 Боресков А.В., Шикин Е.В. КОМПЬЮТЕРНАЯ ГРАФИКА. Учебник и практикум для прикладного бакалавриата: Гриф УМО ВО М.:Издательство Юрайт, 2018 biblio-online.ru
Л1.2 Буковецкая О.А. Дизайн текста: шрифт, эффекты, цвет.: учеб. пособие М.: ДМК Пресс // ЭБС "Университетская библиотека online", 2006 e.lanbook.com
Л1.3 Клещев О. И. Типографика: Учебники и учебные пособия для ВУЗов Архитектон, 2016 biblioclub.ru
6.1.2. Дополнительная литература
Авторы Заглавие Издательство, год Эл. адрес
Л2.1 Диков А.В. Веб-технологии HTML и CSS: Учебное пособие М.: Директ-Медиа // ЭБС "ONLINE", 2012 biblioclub.ru
Л2.2 Молочков В. П. Макетирование и верстка в Adobe InDesign: Учебная литература для ВУЗов Национальный Открытый Университет «ИНТУИТ», 2016 biblioclub.ru
6.1.3. Дополнительные источники
Авторы Заглавие Издательство, год Эл. адрес
Л3.1 Усанова А. Л. История и теория дизайна: программа и метод. рекомендации для студентов дневной формы обучения Барнаул : Изд-во АлтГУ// ЭБС АлтГУ, 2009 elibrary.asu.ru
6.2. Перечень ресурсов информационно-телекоммуникационной сети "Интернет"
Название Эл. адрес
Э1 Webref: руководства по веб-технологиям webref.ru
Э2 Caniuse: руководство по HTML и CSS caniuse.com
Э3 GridCalculator gridcalculator.dk
Э4 Grid Designer grid.mindplay.dk
Э5 Типомания: онлайн-словарь терминов typo.mania.ru
Э6 Ссылка на курс portal.edu.asu.ru
6.3. Перечень программного обеспечения
Microsoft Office 2010 (Office 2010 Professional, № 4065231 от 08.12.2010), (бессрочно);
Microsoft Windows 7 (Windows 7 Professional, № 61834699 от 22.04.2013), (бессрочно);
Chrome (http://www.chromium.org/chromium-os/licenses ), (бессрочно);
7-Zip (http://www.7-zip.org/license.txt ), (бессрочно);
AcrobatReader (http://wwwimages.adobe.com/content/dam/Adobe/en/legal/servicetou/Acrobat_com_Additional_TOU-en_US-20140618_1200.pdf), (бессрочно);
ASTRA LINUX SPECIAL EDITION (https://astralinux.ru/products/astra-linux-special-edition/), (бессрочно);
LibreOffice (https://ru.libreoffice.org/), (бессрочно);
Веб-браузер Chromium (https://www.chromium.org/Home/), (бессрочно);
Антивирус Касперский (https://www.kaspersky.ru/), (до 23 июня 2024);
Архиватор Ark (https://apps.kde.org/ark/), (бессрочно);
Okular (https://okular.kde.org/ru/download/), (бессрочно);
Редактор изображений Gimp (https://www.gimp.org/), (бессрочно)
6.4. Перечень информационных справочных систем
Информационная справочная система:
СПС КонсультантПлюс (инсталлированный ресурс АлтГУ или http://www.consultant.ru/).
Профессиональные базы данных:
1. Электронная база данных «Scopus» (http://www.scopus.com);
2. Электронная библиотечная система Алтайского государственного университета (http://elibrary.asu.ru/);
3. Научная электронная библиотека elibrary (http://elibrary.ru).

7. Материально-техническое обеспечение дисциплины

Аудитория Назначение Оборудование
204Л лаборатория информационных технологий - компьютерный класс - учебная аудитория для проведения занятий семинарского типа (лабораторных и(или) практических); проведения групповых и индивидуальных консультаций, текущего контроля и промежуточной аттестации Учебная мебель на 14 посадочных мест; компьютеры: марка DEPO модель Neos 260 - 14 единиц; Интерактивная доска Smart board 680 IV со встроенным проектором v25
Помещение для самостоятельной работы помещение для самостоятельной работы обучающихся Компьютеры, ноутбуки с подключением к информационно-телекоммуникационной сети «Интернет», доступом в электронную информационно-образовательную среду АлтГУ
106Л помещение для хранения и профилактического обслуживания учебного оборудования Стеллажи – 3 шт. осциллограф, паяльная станция, источник тока, переносные ноутбуки
206Л лаборатория информационных технологий - компьютерный класс - учебная аудитория для проведения занятий семинарского типа (лабораторных и(или) практических); проведения групповых и индивидуальных консультаций, текущего контроля и промежуточной аттестации Учебная мебель на 14 посадочных мест; компьютеры: марка DEPO модель Neos 260, мониторы: марка Philips модель 227E3LHSU - 14 единиц

8. Методические указания для обучающихся по освоению дисциплины

Освоение учебной дисциплины предполагает посещение практических занятий, а также самостоятельную работу студента. На практических занятиях обсуждаются теоретические вопросы учебной дисциплины, а также решаются практические задания. Основная цель практических занятий - формирование практических умений и опыта, связанного с аспектами проектирования современного пользовательского интерфейса, а также развития познавательных способностей, творческой инициативы, самостоятельности и организованности. При выполнении самостоятельной работы следует внимательно читать, каким образом сформулировано задание, а также ознакомиться с критериями оценивания этого задания. Если при выполнении задания возникли вопросы или затруднения, следует обратиться к дополнительной литературе, задать вопрос преподавателю в часы консультации или с помощью системы обмена сообщениям электронного образовательного портала университета. Для эффективного освоения дисциплины рекомендуется выполнять задания систематично, последовательно, с опорой на материалы практических занятий, рекомендованную учебную литературу, собственные наблюдения и результаты собственного информационного поиска. Результаты выполнения самостоятельной работы обсуждаются на практических занятиях. Рекомендуется участвовать в таких обсуждениях для повышения качества учебных работ, для формирования навыков критической оценки и рефлексивных навыков.