Мастер-класс по созданию коллажа: создание макета сайта
Публикую последнюю, заключительную часть мастер-класса по созданию коллажа от Юры Петрова, художественного руководителя группы Postpeople. В этот раз нам предстоит познакомиться с практическим воплощением решения поставленной задачи. Для этого будут использоваться стандартные элементы и психологические формы. Не менее интересна будет и дискуссия креативной группы по анализу ситуации и выбору психологической формы. Обо всём, об этом читайте далее в статье.
Я же хочу отметить, что лично для меня было интересно рассматривать задачу, используя простенький конструктор, вырезанных из журналов и цветной бумаги, элементов. Примечательны здесь и готовые психологические формы. Нужно признать, человек достаточно легко поддаётся воздействию и данный мастер-класс может быть полезен как для креаторов, так и для обычных пользователей. Рекомендую уделить заключительной части не меньше внимание чем к двум предыдущим.
Содержание:
- Объект, форма и содержание
- Креативный процесс
- Создание макета сайта
Создание макета сайта музыкальной площадки или клуба
Ну, что, ребят, наконец, приступаем к основной задаче нашего сегодняшнего вечера. Нам с вами предстоит разработать макет сайта музыкальной площадки или клуба. Прежде чем начать, напоминаю вам, что мы используем только психологические средства построения композиции. У нас специально здесь журналы на разных языках: есть немецкие, есть английские, - для того чтобы немножко абстрагироваться от содержания и оставить только форму.
Чтобы собрать графический макет, нам потребуются следующие элементы: текст, графика, изображения, тизеры и названия. Давайте вырезать. Я буду вырезать графические элементы и воспользуюсь для этого простой цветной бумагой.
Далее мы убираем со стола всё лишнее и оставляем только те элементы, которые нам потребуются. Давайте выберем фон. Здесь есть разные цвета. Какой вам больше нравится?
У нас теперь очень много элементов. Давайте сразу же их разберём: названия, много изображений, текст, графические элементы, очень простые, и есть тизеры. Тизер – это вот такие вот крупные предложения и фразы. Этот набор элементов используется фактически в любой графике. Где-то может быть больше текста, где-то может быть больше изображений, но условно этих элементов вполне достаточно для любого графического продукта.
Психологические формы
Прежде чем приступить непосредственно к созданию макета нашего сайта, я хотел бы проиллюстрировать разные психологические формы. Все эти психологические формы весьма условны.
Перед нами первая форма. Условно можно назвать её пирамида. Как вы видите, здесь всё достаточно чётко структурировано и понятно. Зритель понимает, как ему считывать информацию. Здесь (вверху) главная информация и дальше мы видим ветвление смыслов, от общего к частному, т.е. название и большой тизер – это общее, дальше мы понимаем, что это общее делится на три элемента.
психологическая форма пирамида
В чём плюсы такого расположения? Это хорошее логическое обоснование. Таким образом, можно подавать информацию, достаточно большую и структурированную.
И так, приступаем ко второй форме. У нас получилась вот такая форма и её можно охарактеризовать как последовательность развития стадии изменения.
психологическая форма последовательности развития стадии изменения
Чем она отличается от первой формы? Здесь считывание информации происходит по горизонтали, слева направо. Эта форма тоже достаточно структурная, зритель сразу же понимает где первое, где второе, где третье. В этом, наверное, самый большой плюс. Информация также структурирована и порциона. Таким образом мы можем удержать внимание читателя и разбить весь текст, который нам предстоит передать, на порции в виде введения, основная часть и заключения. Эта форма может нести, как побуждающий характер, так и убеждающий.
Эти две формы можно отнести к рациональным формам или логическим. Следующие две формы скорее иррациональные.
Эту форму условно назовём воронка. Потому, что здесь считывание происходит из центра. Центр насыщен визуальными образами. Зритель заинтересовался, он начинает изучать то, что находится на периферии, т.е. читать текст. Причём он может делать это в хаотичном порядке. Сначала прочитать то, что справа, потом то, что слева и постоянно его внимание возвращается в центр и сканирует изображение.
психологическая форма воронка
Если бы был жив дядюшка Фрейд, он бы отнёс это к женской организации пространства.
Следующая форма скорее будет напоминать мужскую организацию. Здесь мы видим ярко выраженную ось, вертикаль, которая ассоциируется у людей с крепостью, стержнем, надежностью.
психологическая форма ось, вертикаль
Её смысл в том, что смысл опирается на некий фундамент и зритель сразу чувствует некую мощь и надёжность.
И, наконец, последняя форма это проекция. Ей часто пользовались конструктивисты, потому что, по сути, это вот такой вот конструктор, головоломка и зрителю хочется разгадать её. Он изучает подробно все направления, что с чем соотносится для того, чтобы поставить всё на места.
психологическая форма проекция
Анализ задачи и выбор формы
Всё что нам осталось, это просто проанализировать нашу задачу и выбрать ту форму, которая наилучшим образом подходит для того, чтобы сделать макет сайта посвященного музыкальной площадке или клубу.
Давайте представим нашего зрителя. Кому адресован этот сайт, кого мы хотим видеть? Давайте уточним, что это клуб молодёжный и это музыка скорее всего рок, пост-рок, индия; ну, что-то такое, что близко нам.
Кристина: ну, тут два варианта, как мне кажется: либо это человек, который случайно ищет себе развлечения, какой либо посылки. Допустим, попадает на наш сайт и видит информацию, которая его заинтересовывает. По моему мнению, это должен быть сайт воронка, который резко привлекает внимание – центр, человека в воронку его и затягивает туда. Если же человек целенаправленно ищет это мероприятие, где-то о нём услышал, то опять же, попадая на него, видит какие-то яркие элементы, которые сконцентрированы в центре, и они опять же его привлекают.
Саша: подождите, у нас музыкальная площадка. Соответственно будет подразумеваться выступление разных коллективов.
Маша: Ну, т.е. рамки возрастные мы не ограничиваем.
Юра: Ну, хорошо, может какие-то характеристики этого человека?
Дима: Наверно, ему нравится искусство.
Маша: Интересуется музыкой.
Кристина: Поэтому я предлагаю ограничиться, 28-30 лет, которые ещё, так скажем, в движении, их интересует вот эта вся суета, увлечения и музыка.
Дима: нам надо показать ему интерьер, нам надо показать ему афишу…
Кристина: ну, информацию о том же меню и сколько человек может попасть на определённое мероприятие. Совместимость клуба.
Дима: соответственно, не знаю, заказчики, которые хотят арендовать всю эту площадку, то все ровно наша схема, что мы просто презентуем её, афишу, показываем интерьер, она работает и для них.
Саша: мне кажется концертная площадка всё-таки на первом месте, в центре, она должна быть афишей непосредственно тех участников, того основного контента, что есть в этой площадке.
Юра: дело в том, что афиша может состоять из незнакомых имён, и человек сразу видит кучу незнакомых имён, и ему становится не интересно.
Дима: мы говорим о форме того, что у нас должно происходить. В центре у нас должна быть хорошая иллюстрация. Это может быть иллюстрация чего-то проходившего в нашем заведении, красивая фотография; либо это, если, у нас крутые хедлайнеры будут, хорошие музыканты, то они в центре. В любом случае, это может быть один смысловой блок, что-то типа воронки.
Юра: ну, давайте попробуем начать. Где мы поместим? Ну, название по любому в шапке, наверное... У всех разные браузеры, может высветиться только первая часть, если браузеры свёрнуты.
Саша: У нас основное название клуба сверху, да. А всё, что там... концертная площадка... мы можем сделать…
Юра: может, как-то так. И может название дополнить какими-то элементами?
Дима: центр как бы будет вот здесь, а текст на главной странице нам само собой не нужен…
Юра: сделаем его внизу? Давай попробуем. Ещё какие ни будь пункты меню, или что-то будет?
Кристина: я, думаю, что вот это (центр воронки) афиша мероприятий, которые были и планируются. Здесь (ниже) идёт информация об интерьере с изображениями.
Юра: забыли графический элемент. Он конечно не особо нужен. Может его в название поместить? Может, как-то вот так? Нет?
Дима: ещё какая-то область меню должна быть.
Юра: место вот этого мы вставим пункты… т.е. мы делим на более маленькие участки...
Дима: и мы можем даже разбросать (заголовки) более… к центру.
Юра: а можно сделать и так (переносит меню к воронке)… но тем не менее это будет в области, которая открывается сразу.
…
Итог
Дима: мы решили отделаться макетом в виде воронки, а т.к. это всё таки сайт, первая страница пользователя может выглядеть совершенно по разному, в зависимости от того в чем он будет на это смотреть. Общее тяготение сохранится в верхнем углу, а внизу мы разместим информацию о том, что у нас происходило. Добавим каких-то графических элементов, небольшие куски статей о наших событиях. Вот этот блок может быть фото-отчетом, этот блок может быть афишей. Главная цель наша была привлечь внимание, заинтересовать. Мне кажется такая схема отвечает нашей цели.
Мастер-класс по созданию коллажа: создание макета сайта
Юра: спасибо, ну, давайте друг-другу поаплодируем, мы сделали это.
Вот так вот мы проникли в креативные процессы изнутри. Посмотрели как креативная группа работает над макетам графического дизайна. С вами была творческая группа Postpeople. До новых встреч на TVJam.
В целом, конечный результат работы креативной группы мне не показался очень удачным. Возможно, что реализация сделала бы эту задумку более презентабельной. Тем не мене, видно, что дело занимались далеко не любители. Конечный вариант несёт отпечаток многолетних наработок, которые в полной степени оправдывают себя и дают результат. На этом у меня всё. Спасибо за внимание. Удачи!
Вы можете бесплатно просмотреть и/или скачать все статьи курса в PDF и/или PDF > ZIP форматах