Оформление визуального исследования
Предупреждение
Это учебная работа, в ней есть несовпадения с регламентом и методическими рекомендациями кафедры Истории и теории искусства и дизайна. Для работы над визуальными исследованиями, пожалуйста, обращайтесь к утвержденными кафедрой документам.
Основные функции HseDesign
Какие вкладки есть на сайте?
Для новых пользователей HseDesign может показаться во многом не понятным, поэтому его изучение мы начнём с самых основ!
Вход
В первую очередь, зайдя на сайт можно войти в аккаунт. Если вы являетесь студентом вышки, это надо сделать через ваш аккаунт в личном кабинете ВШЭ. Если же вы учитесь именно в школе дизайна, вход можно будет осуществить через TimeTracker.
Демонстрация входа на сайт
Смена языка
HseDesign поддерживает два языка. Вы можете выбрать тот, на котором комфортнее будет работать именно вам!
Демонстрация смены языка
Разделы сайта
В HseDesign есть несколько разделов, отвечающих за различные функции сайта. Так, среди них есть ProDesign, Books.HseDesign, Research.HseDesign, Creative.HseDesign, Startup.HseDesign, Competition.HseDesign и, естественно, Portfolio.HseDesign, на котором мы находимся прямо сейчас. Ознакомиться подробнее со всеми разделами и тем, какой контент они в себя включают вы можете самостоятельно, мы же будем объяснять вас функционал Portfolio.HseDesign, на котором сейчас и находимся.
Демонстрация смены разделов сайта
Витрина проектов
Первое что вы видите при входе на сайт — витрина проектов, на которую попадают самые сильные из них. На неё вы можете ознакомиться с хорошими дизайн проектами и тем, чем занимаются студенты школы дизайна в разных сферах.
Витрина проектов на сайте
Теги
Также на сайте существует система тегов, и, соответственно, поиск по ним. Так вы сможете найти проекты по конкретным направлениям и темам, если вам оно понадобиться!
Демонстрация поиска по тегам
Профиль пользователя
У вас есть свой профиль, в который вы можете перейти! Там вы увидите все свои проекты: как опубликованные, так и черновики.
Демонстрация перехода в профиль
Как добавить проект?
Естественно, оформление визуального исследования нужно начать с создания его страницы.
Демонстрация добавления проекта
Создав проект, вы должны установить его теги (напоминаем, что к вашей работе должно быть указано минимум два тега: чёрный тег #визуальное исследование и белый тег #история искусства или #история дизайна).
Демонстрация добавления тегов
И естественно не забудьте ввести название вашего исследования!
Демонстрация названия
Основы работы с проектом на HseDesign
Добавление изображений и работа с ними
Обложка
Это самое первое изображение, которое мы видим, ещё даже не открыв любой проект. Какие есть варианты создания обложки для визуальных исследований мы расскажем чуть позже, а пока — о том как добавить её на сайт.
Демонстрация загрузки обложки
Изображение
И, как вы уже могли догадаться (по крайней мере мы очень на это надеемся), основной составляющей визуального исследования является его визуальная часть — а значит изображения. Как с ними работать также расскажем позже, а сейчас — о том как их загружать.
Демонстрация загрузки изображения
Слайдер
Также на HseDesign не так давно добавили новую функцию, которую вы очень часто встречаете в том числе и в нашем курсе — слайдеры! Как их применять и для чего они могут понадобиться вы ещё узнаете, а пока: как их делать.
Демонстрация загрузки изображений в слайдер
Добавление текста и работа с ними
Текстовый блок
Текст также является неотъемлемой частью любого, даже визуального исследования! Как его вставить? Смотрите ниже!
Демонстрация загрузки текстового блока
Заголовок
Именно с помощью больших и ярких заголовков можно выделить рубрики вашего исследования и ключевые мысли. Ниже о том, как их создавать и настраивать.
Демонстрация загрузки и настройки заголовка
Подрисуночные подписи
Также HseDesign имеет отдельную функцию, позволяющую подписывать изображения, оставлять под ними комментарии или указание авторства.
Добавление различных видов подрисуночных подписей
Подрисуночные подписи на слайдеры
Эта функция распространяется и на слайдеры, однако на них действует немного иначе.
Добавление подписей на конкретное изображение в слайдере
Работа с другими видами контента
GIF анимации
Изображения (и анимации) формата GIF загружаются на сайт также, как и обычные изображения, однако на сайте будут анимированы.
Также не забывайте про ограницение веса изображения — 20 мегабайт!
Загрузка GIF изображения
Видео и музыка
Видео и музыка загружаются с помощью ссылок на сторонние сайты. Использовать для первых можно YouTube или Vimeo, для вторых Bandcamp.
Загрузка видео (Загрузка аудио проходит такжк)
Продвинутый функционал работы в HseDesign
Html кодировка при оформлении
При работе с текстом в HseDesign вам также поможет html кодировка, позволяющая разнообразить и структурировать ваш текст. Главное, перед её использованием убедитесь, что это нужно вам функционально и упростит процесс чтения для зрителя, а не наоборот!
Написание кода
Все команды в html коде пишутся в формате <«команда»>. Влияние команды распространиться на весь текст после неё, пока вы не пропишете в нужном месте.
Стили текста
Начнём с основного: стили (начертания) текста и способы его выделения. Таковыми являются bold (жирный), italic (наклонённый), strike (зачёркнутый), underline (подчёркнутый). Все их команды в коде являются первой буквой указанного выше слова на латинице.
Применение стилей текста
Заголовки текста
Также вы можете использовать различные стили заголовков текста (headings) помимо базового. На данный момент таковых на HseDesign три, указываются они соответственно командами «h1», «h2», «h3». Каждый из заголовков меньше предыдущего.
Применение заголовков
Гипперссылки
Иногда в ваших исследованиях вам может потребоваться вставить ссылку на сторонний источник. Естественно, её можно вставить просто текстом, однако намного привлекательнее она будет выглядеть гипперссылкой! Оформить её также можно html кодом, с помощью команды «a» и указания в ней же ссылки «href =…» можно создать гипперссылку на сторонний источник.
Применение гипперссылок
Оформление списков
Также при работе с визуальными исследованиями вам может понадобиться создание списков. Это можно сделать двумя способами. Первый, самый простой: список с буллет-поинтами можно составить, просто поставив дефис с пробелом в начало строки — сайт самостоятельно преобразует их в элементы списка. То же самое можно сделать с цифрами.
Однако, если вы не ищете лёгких путей — всегда можно написать список и кодом. В этом вам помогут команды «ol» (для нумерованного списка) и «ul» (для маркированного). Внутри них каждый пункт списка стоит выделять командой «li» и начинать с новой строки.
Оформление списков двумя способами
Специальные символы
Вам также обязательно понадобятся различные символы, которых нет на наших клавиатурах — длинные и короткие тире, кавычки-ёлочки, неразрывные пробелы и тп. Естественно, их можно получить, проведя ваш текст через Типограф, о котором рассказывалось во второй теме, однако если мы не идём лёгким путём — получить их можно и через код (кстати, преобразовать их в код также можно в Типографе. Так, в коде кавычки ёлочки будут «»» и «»», тире «—» (длинное) и «–» (короткое/цифровое). Неразрывный пробел же будет « „.
Оформоление специальных символов
Дополнительные материалы
Html кодировка имеет и множество других функций, которым можно было бы посвятить отдельный курс. Если вам интересно разобраться в них, прилагаем ссылку на сайт, в котором выделены основные команды.
Сайт по html языку (Это кликабельная гипперссылка)
Функции, необходимые исключительно в визуальных исследованиях
В HseDesign встроены две функции, становящиеся доступными только при выставлении образовательного тега «Визуальные исследования». Ими являются оформление библиографии и источников изображений.
Добавоение библиографии и источников изображений
Визуальная составляющая повествования
Обложка
Общие критерии для обложек и рекомендации кафедры
Читаемость (Обложка должна быть понятной, привлекать внимание а не пугать читателя. Постарайтесь избегать слишком мелких деталей, пугающей неразберихи и подобного)
Отсутствие текста (На обложке не должно быть текста, особенно маленького. В исключительных случаях текст приемлем (скорее всего, в них он будет скорее выполнять функцию графики, чем своё прямое назначение))
Фон (Фон обложки должен отличаться от белого фона сайта, чтоб не позволять им сливаться)
Примеры различных обложек
Различные существующие подходы к созданию обложек
Произведение (Ваша обложка может быть изображением одного из произведений, о который идёт речь в исследовании)
Примеры обложек с определёнными объектами
Деталь (Также она может содержать исключительно определённую часть, деталь исследуемого материала)
Пример обложки с деталями
Коллаж (И, наконец, вы можете создать обложку самостоятельно. Это можно сделать, используя различные элементы исследуемого материала, собирая из них собственные композиции, или стараясь повторить графику)
Примеры обложек коллажей
Работа с изображениями в исследовании
Критерии качества изображений
Общих критериев к подбору изображения не так уж и много, так как их подбор в первую очередь зависит исключительно от вашей концепции. Даже эти критерии могут быть нарушены, если это подразумевается идейной частью вашего исследования.
Не использовать некачественные изображения (Лоурез-изображения сразу портят всю визуальную часть вашего исследования)
Подбирать изображения, на которых видно объект (Естественно, зритель не поймёт суть вашего исследования, если не увидит его объект. Именно для этого кафедра очень настоятельно рекомендует подбирать изображения, на которых чётко видно исследуемый объект и центр внимания не смещается на что‑либо другое)
Работа с качеством изображений
Естественно, в первую очередь на качество влияет само по себе подобранное вами изображение. Однако, если его качество проседает лишь немного, есть способы спасения ситуации:
Нейросети (В интернете существует достаточно много нейросетей, которые улучшают качество изображения. Вы всегда можете использовать их! Главное подберите подобную сеть без вотермарки и не размывающую ваше изображение)
Изображение, улучшенное с помощью DeepPaintBot в телеграм
Adobe Photoshop (В известной всем нам программе для редактирования растровых изображений также есть несколько способов, помогающих визуально улучшить качество изображения. Например, можно наложить на него эффект «шума», чтобы сделать Лоурез менее заметным)
Стилизация (Также важно напомнить, что вы можете пойти и от обратного. Вам можно не вытягивать качество изображений, если ваше исследование будет посвящено исследованию изображений некачественных. Главное не выбирайте тему, основываясь исключительно на такой логике!)
Пример исследования, в котором плохая картинка — часть концепции (Контратака плохой картинки, Аркадий Щерба)
Динамика и темпоритмика исследования
Что это и зачем оно нужно?
Мы используем динамику повествования в нашем исследовании, чтобы удержать внимание зрителя и акцентировать его на нужные вещи в нужных местах.
То, какой темп задаёт расположение изображений и текста, как много объёма материала даётся на одном экране и остальные подобные вещи — именно то, от чего зависит восприятие вашего исследования.
Как же этим управлять? Сейчас расскажем.
Влияние масштаба
Масштаб изображений — один из ключевых рычагов влияния на восприятие. Их можно как ставить очень много, но маленьких на один экран, так и наоборот, заполнит весь экран одним большим изображением.
Наша рекомендация — чередовать эти приёмы. Если изображений всегда будет слишком много, у зрителя будут «разбегаться глаза», а внимание вскоре станет сложно сконцентрировать на чём‑то одном. Если же, наоборот, всегда использовать огромные картинки, ваш зритель быстро перестанет фокусироваться на них.
Если говорить коротко — за масштабом изображений стоит следить, но прибегать к разным его вариациям.
Пример управления масштабом в исследовании (Экспонировние цифрового искусства и нет-арта, Генкина Лидия)
Влияние формата
Также на концентрацию зрителя может повлиять и формат изображения. Иногда возможность остановиться и посмотреть анимацию или фидео позволяет вашему читателю расслабиться и отдохнуть от активного чтения исследования. Однако если их будет слишком много в одном месте — такие «остановки» на каждом шагу лишь отобьют желание читать дальше.
Пример использования видео в исследовании (Экспонировние цифрового искусства и нет-арта, Генкина Лидия)
Влияние цвета
Цвет — также важная составляющая ваших исследований. От яркости, насыщенности, цветового многообразия и подобных вещей также зависит, как зритель воспримет информацию и насколько легко ему будет с ним знакомиться. Однако тут надо оставить важную ремарку: мы не рекомендуем вам изменять цвет существующих произведений. Если это фотография объекта, мокап или что‑то подобное: пожалуйста, однако проводить картины через обработку цвета было бы странно.
Средства влияния
Совмещение и редактура изображений
В первую очередь, для расположения изображений можно использовать коллажи разных видов. Самый распространённый из них — сборка нескольких изображений на одно с помощью межколонников.
Пример использования межколонников в исследовании (Экспонировние цифрового искусства и нет-арта, Генкина Лидия)
Такой формат сложно назвать коллажом, так как по факту изображения просто стоят рядом друг с другом, но это всё ещё хороший приём для управления вниманием зрителя: с помощью него можно менять масштаб изображения, располагать рядом материал для сравнения и т. п. Главное правило использования такого формата — межколонники на протяжение всей вашей работы должны оставаться одинаковыми.
Возможные шаблоны межколонников от кафедры (Это кликабельная гипперссылка)
Демонстрация использования шаблона
Также, вы можете приближать изображения, чтобы показать некоторые их детали! Это разбавит внимание зрителя и поможет ему обратить внимание на то, что важно для вас в вашем исследовании.
И, наконец, вы можете создавать обычные коллажи. Использовать их можно в абсолютно разных целях, но будте осторожнее — не видоизменяйте изначальный объект искусства и постарайтесь не сместить внимание с него.
Анимации
Вы можете использовать различные анимации и видео-ряд, не только если изначально исследуете их. Вы также можете собирать в видео (или анимацию) различные изображения исследуемых объектов, чтобы расслабить внимание зрителя и показать исследуемые объекты. Сделать это вы можете в программах Adobe Premiere Pro или Adobe Photoshop.
Пример GIF-изображения, показывающего различные объекты (Плохая картинка в фэшн-индустрии, Настя Мартынова)
Цветокоррекция
Также вам может понадобиться изменить цвет и яркость вашего изображения, чтобы сделать объект исследования ярче и позволить ему вписаться по цветовой гамме в ваше исследование. Главное помните, что не стоит искажать оригинальные произведения! Такой приём лучше использовать на различных фотографиях или плохих сканах, но не стоит перебарщивать с ним.
Для применения цветокоррекции вы можете воспользоваться многими функциями Adobe Photoshop: например редакцией по яркости и контрасту, уровням, насыщенности и т.п
Работа с цветом фото в Adobe Photoshop 2023
Работа с текстом в исследовании
Общие правила вёрстки
Орфография
Для того, чтобы текст вашего исследования казался приятным и его хотелось прочитать, естественно, в первую очередь надо соблюдать простые правила русского языка, его орфографии и пунктуации. Проверить себя вы всегда можете на сайте Орфограф.
Орфограф (Это кликабельная гипперссылка)
Демонстрация использования орфографа
Работа с вспомогательными элементами
Также важно не забывать про правила работы с вспомогательными элементами: не путать дефис, цифровое и длинное типа, правильно ставить кавычки и не забывать про неразрывные пробелы. В упрощении процесса работы со всем этим вам поможет Типограф, который может проставить все элементы текста за вас!
Типограф (Это кликабельная гипперссылка)
Демонстрация использования типографа
Использование текста в исследовании
Работа с текстом
Теперь, когда у вас есть грамотный текст, самое время вставить его в ваше исследование! Тут вас тоже может встретить несколько правил:
В лонгриде недопустимо использование слайдов с текстом, стоящим поверх изображения. Весь текст должен быть вставлен с помощью функций сайта HseDesign.
Пример использования различных функций сайта HseDesign для написания текст (Сервисы панорамного просмотра улиц в искусстве фотографии, Генкина Лидия)
Не ставьте подряд два текстовых блока, если используете белый фон в исследовании. В таком случае возникает неоправданно большой разрыв между блоками. Используйте изобразительный слайд или слайд с более ярким текстом между двумя текстовыми блоками, чтобы избежать такого!
Использование заголовка для разрядки внимания и акцентирования внимаения (Искусство как ключ к пониманию на примере манги «Голубой период», Ле Ева)
Оформление источников исследования
Библиография и источники изображений
Не забывайте, что источники в конце исследования должны быть оформлены именно с помощью функционала HseDesign! Не используйте для списка источников обычные текстовые блоки или ссылки на сторонние сайты.
Пример использования встроенной в сайт функции написания библиографии (Дама в беде — Эволюция архетипа в различных медиа в 20–21 веках, Генкина Лидия)
Подрисуночные подписи
Также подписывайте изображения в подрисуночных подписях! В них не нужно полностью оформлять ссылку по госту с URL и датой обращения, однако не забудьте указать название объекта, его автора и год создания.
Пример использования подрисуночных подписей в исследовании (Искусство как ключ к пониманию на примере манги «Голубой период», Ле Ева)
