12 posts tagged

HSE

Командная работа

С сентября на занятиях в школе дизайна ВШЭ работаем в группах по два-три человека.

Нахожу это хорошей и правильной практикой. Наблюдаю несколько «побочных» эффектов.

Мы учимся принимать решения вместе. Не всегда всё идет гладко. Кто-то хочет сделать меню гамбургером, а другой — иначе. Нельзя же просто забить на возражения и сделать по-своему. Приходится аргументировано защищать свои решения или признавать ошибки.

Документировать свои действия. Когда работаешь один, каждый уголок проекта знаком. В группе проект меняется каждый день: сегодня добавилось пару новых экранов, а один старый перерисовали. Чтобы быть в курсе, поссе каждого подхода оставляем комментарий типа «отрисовал экран лекции, сделал так-то потому-то. Что думаете?».

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

Удаленность работы принимается по умолчанию — каждый работает откуда удобно. Все собираются на лекциях в школе — этого достаточно, чтобы обсудить процесс и возникшие вопросы.

Распределить роли, узнать сильные стороны друг друга. Еще полезно узнать мотивацию коллег: зачем они здесь? Чего хотят достичь? Сколько времени они готовы уделять проекту?

С другой стороны преподаватель теперь может гарантировано уделить время каждому проекту на каждом занятии. Ведь проектов не 20+, а всего шесть-семь.

2017   HSE

Попросил скидку в Фигме

С этого модуля во ВШЭ решили преподавать веб-дизайн на Фигме.

Фигма — это инструмент для проектирования интерфейсов. Это как Скетч, только в браузере. Соответственно, работает не только на маках. А еще она бесплатная и дает возможность совместно работать над проектом. Все файлы лежат где-то в интернете и участникам доступна последняя версия проекта в любой момент.

Базовый функционал Фигма дает бесплатно, но за деньги есть дополнительные плюшки.

Еще есть учебная лицензия. Чтобы подать заявку, надо заполнить форму. Я заполнил, но пришел автоматический отказ. Видимо, проверяют наличие почты в домене .edu

Я решил попрактиковаться в переговорах и попросить лицензию отдельно.

Первый запрос написал на удачу коротко прямо на паре.

Удивился, когда через неделю пришел развернутый ответ от живого человека. Hi Jason!

Немного попыхтел и накатал развернутый ответ.

Hi Jason!

Thanks for your reply. It seems, my previous message was too short :-)

Let me start from the beginning and to introduce our university in the right way. The full name of it is: “Federal State Autonomous Educational Institution for Higher Professional Education National Research University Higher School of Economics”. Everyone calls it just HSE for short or “ВШЭ” in Russian.

Here is the website in English: https://www.hse.ru/en/figures
And in Russian https://www.hse.ru/

The .edu domain, as you may know, is only for United States-affiliated institutions of higher education. So here in Russia universities can’t apply for it.

The HSE is a university with several faculties, among them are Mathematics, Political Science, Psychological, Sociology, Philosophy, Economics and our—Design.

The Design Faculty is called HSE Art and Design School. We call it Design School for short.

Here is our web-site in English http://en.design.hse.ru/
And in Russian http://design.hse.ru/

HSE Art and Design School provides four-year BA programs and two-year MA programs.

Here are some of the programs: Communication design, Animation and illustration, Design and coding, Design and photography, Game design and virtual reality.

We are studying web and mobile design now and using Figma as our main tool. The multi-player feature is just awesome. We enjoy it and find it very useful when we work in teams.

And after graduate, we assume, we will continue to use Figma as kind of industry standard tool for UX/UI design. Not as students, but as commercial users.

And we will be happy to start use it during our education in full strength via obtaining the student licence.

I don not know how the system of such licences works. I can forward your message to our Tutor or Director of the faculty, or ask them to write to you an official request, if needed.

So please advice us what can we do to continue the talk. Or if that impossible, that would be okay too, we would understand :-)

Anyway, looking forward for our reply (any).

Best regards,
Alex Mikhailov
from Moscow, Russia

В ответ получил лицензию. Бесплатно.

Студенческая лицензия снимает ограничение по количеству проектов и участников группы, а еще дает доступ к групповой библиотеке элементов.

 1   2017   HSE   переговоры

Декомпозиция Медузы

На занятии дали задание изучить структуру веб-сайта и записать свои наблюдения.

Сначала я не понял задание и написал с десяток банальных пунктов типа «сайты состоят из текстика и картиночек». Потом решил попробовать перерисовать Медузу. Пока перерисовывал, начал замечать мелкие детали. По ходу всё записывал.

В общем

Контент лежит на белых плашках. Между плашек проходит серый фон. Серый фон создает второй уровень — контент на плашках и плитках как будто чуть выше, т.е. ближе к зрителю.

Горизонтальные и вертикальные отступы между плашек везде 15 px.

Этажность, вёрстка

Контент разбит на этажи. Но не по темам, а по хронологии и иерархии.

Этажи отличаются ритмом верстки. Два соседних этажа не могут быть одной ритмичности.

Размер плиточек создает визуальную иерархию — это помогает зрителю быстрее понять порядок чтения. Самое большое — самое важное. Можно прочитать только его. Если есть время, можно почитать то, что поменьше.

Фоточки в плиточках большего размера и кадрируются под каждый типоразмер плиточек, поэтому одна фотография подходит под все плитки. Это позволяет любой новости свободно встраиваться в любой этаж. Плитка с этой фоткой и новостью встает в этаж на 1-2-3-4 колонки.

В текстовых полях тема не отделяется от лида переносом строки — достаточно изменения с полужирного гротеска на регуляр антикву. Подозреваю, некоторые подписи «вгоняют».

С четвертого экрана остаются только плиточные этажи. Там собрался условный архив, партнерские материалы, шапито, друзья.

Для каждой категории есть своя страница, доступ через табы.

Текстовые этажи

Есть три текстовых этажа без картинок — это простые новости. Они быстро обновляются и сползают вниз. Интересно, что тип новостей один, но эти три этажа равномерно размазаны по трем экранам.

Верстка зависит от контента. Есть «запасные» варианты компоновки контента. Верстка может меняться с каждой новой новостью.

Компоновка текстовых этажей одинакова: одна большая новость слева и четыре одинаковых справа.

У правых текстовых модулей может быть от двух до пяти строк. Чтобы «закрыть» эти неровные модули, используется «бирки» с временем — они всегда на одной высоте и помогают визуально сделать модуль прямоугольным.

Высота такого текстового этажа подстраивается под высоту правых текстовых модулей. Если там четыре коротких новости, этаж меньше.

 1   2017   HSE

Итог курса текстописания

Подготовил и защитил свой итоговый проект.

Как проходил курс

Встречались раз в неделю в слаке: проверяли работы за неделю и получали задание на следующую. Задания были в виде отдельных лонгридов — материал для изучения с кучей примеров и ссылок для дополнительного изучения.

На одном из первых уроков затронули тему когнитивных искажений, которая очень меня заинтересовала. Кстати, Тимур сделал интересный блог — примеры когнитивных искажений из художественных произведений.

Тимур предложил посетить «логово» московских рационалистов — антикафе «Кочерга» на Киевской. Это местное представительство клуба LessWrong. Я побывал там на курсе ненасильтсвенного общения (методика от Маршалла Росенберга, в оригинале — nonviolent communication ) и на очередной академической встрече рационалистов.

Примеры уроков

Сейчас трудно описать содержание всех уроков, поэтому напишу коротко: прошли курс молодого, начинающего копирайтера. Обсудили психологические и физические проблемы писательства, разобрали стили письма, узнали основную терминологию. В качестве практики каждый делал продающую страницу для выбранного им предмета (реального или выдуманного).

Так выглядит моя домашняя работа по четырем урокам. Всего было восемь.

Мой проект

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

Следующим заданием было придумать увлекательную историю про свой продукт. У меня получилось про городского героя в маске — борца за чистоту.

Ребята (и Тимур!) на занятии оценили и посоветовали копать в эту сторону. В итоге получилась история со простой скроллинг-анимацией на редимаге.

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

Выводы

Раньше много читал про это, но теперь на практике понял, что недельный проект начинается не за день до дедлайна, а сразу после согласования задания. В понедельник мы получали очередной урок и начинать изучать его надо было уже во вторник. Иначе ничего не успеешь.

Честно сказать, до конца технику не освоил, потому что всё равно все задания делал за день-два до дедлайна. Нужно больше практики)

Хороший подход к работе — работа итерациями. С первого подхода хороший продукт не сделать. Надо делать несколько подходов. При чем самый первый может быть насколько угодно малым и/или простым — главное начать.

Получил опыт подготовки текста под руководством редактора. Делаешь текст, а потом получаешь по нему замечания. Крайне интересный опыт.

Итог второго модуля

Завершился второй модуль курса «Дизайн цифрового продукта» — показывали сделанные проекты.

Поскольку результата у меня не очень много, речь больше пойдет о процессе.

Задача

Постановка задачи

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

Узнал как работать с ЦА и персонажами, что такое цифровой продукт как таковой. Где искать референсы, как делать макеты и делать из них сайт на редимаге.

Мой проект начинался с простого мини купера и потихоньку пришел к тюнинг студии с элементами психотерапии. Идея в том, что перед разработкой дизайна, с каждым клиентам мастер проводит сеанс психотерапии. И нервишки подлечит и дизайн получится персональнее некуда.

Аудитория

Целевая аудитория — обладатели миникуперов. Это довольно известная и понятная тусовка. Возраст от 18 до 60, состоятельные, активные, интеллигентные.

Чтобы познакомиться с целевой аудиторией, я нашел форум владельцев мини куперов. Это оказалось активное сообщество, постоянно устраивают совместные движухи. Собираются на воскресные завтраки, совместные автопробеги и даже зарубежные поездки.

мувик

Референс — галереи Референс — типографика Типо логотип Выбранный стиль

Референсы

Как референсы я отталкивался от сайтов татуировщиков или студий аэрографии. Как видно, таким ребятам нужно минимум текста и максимум примеров работ. Никто не выбирает татуировщика по длине его рассказа о себе.

Поскольку текста немного, хотел сделать его максимально воздушным, поэтому искал какие-то минималистические мотивы в типографике.

Из двух таких референсов слепил логотип.

Сначала я взял очень выразительную антикву и для заголовка, и основного текста. Думал, что для дизайн-бюро надо и шрифт такой подизайнерскее. Оказалось, всё не так: Олег забраковал. Для дизайн студии нужен как можно более нейтральный шрифт.

Выбрал Фира Санс. Гуманистический гротеск. Неконтрастный, статичный, с открытой апертурой. В начертании Light.

сетка

Сетка

Самый первый вариант главной страницы выглядел как три абзаца текста, равномерно размазанные по странице. Это никуда не шло, нужна был сетка.

Я пытался срифмовать ее с логотипом и взял 3-х колоночную сетку. Не уверен, что из этого получилось.

Первый подход

Как появилась сетка, текст начал складываться. И меня понесло. Набрал из учебника по лендингам всего помаленьку и начал адаптировать к стилу и сетке.

Получился полный франкенштейн из стилей и элементов тысяч на 8 пикселей — большой джипег . Видел где-то обрезанные болдовые цифры — берём. Обязательно у всего должны быть тенюшки. Ну и конечно градиентик — куда же без него? Были разделы о команде, отзывы клиентов, этаж с тарифами и даже частые вопросы.

Я был доволен собой: собрал нормальный такой лендос — пока не показал его Олегу. Когда он смотрел, у него заболели глаза. По крайней мере, мне так показалось.

Оказывается, в миинмалистическом дизайне (на который я заявлялся), нужно всё делать минимально. Без тенюшек и эффектов. Один, максимум два стиля. Иллюстрации в одном стиле. С неярким цветом или совсем без цвета. В общем, полный провал.

Второй подход

Получился сумбурным. Убрал почти все этажи от первого лендинга и пытался сосредоточится на оформлении галереи. Вышло так себе)

Сверстано на редимаге.

На просмотре показывал этот вариант.

Альтернатива

За пару часов до просмотра подумал, что последний вариант тоже слишком избыточный. Не нужно столько текста. Ну или не на главной.

И накидал на редимаге альтернативный прототип.

Минимум текста, максимум картинок. В идеале сайт сразу должен показывать работы. Нужна какая-то система для них. И чтобы их было легко добавлять и заменять без участия программистов.

Сделал свой первый макет (процесс)

Провел его через несколько итераций с замечаниями «технического» и «арт-директора» — кураторов курса.

Обо всем по порядку:

Студия Лебедева объявило весенние вакансии, в том числе и на дизайнера сайтов.

Студии нужен дизайнер сайтов. Претендентам предлагается нарисовать главную страницу сайта для магазина, продающего самогон.

Олег предложил нам поучаствовать.

Группа по настоянию Олега подошла к делу серьезно: начали с проработки персонажей. Метод персонажей помогает представить клиентов разрабатываемого продукта.

Продолжили продуктовой аналитикой: рисовали майнд-мап в сервисе Когл.

Ну и закончили подбором референсов и составлением мудбордов.

В ту неделю я был в отъезде, поэтому успел только к просмотру результатов. Ребята постарались и сделали хорошие работы. Некоторые даже успели в срок и отправили работы в Студию.

Пока я смотрел работы, в голове проносилось мысль, что всё скучно и однообразно. Думал «Одни бутылки с ценниками! Никакого разнообразия!».

Когда приступил к работе, первые черновики делал в сторону тематики бутлегеров ( wiki ). Хотел поразить уникальностью работы, чтобы она выделялась на фоне однообразных бутылок. У меня были не бутылки самогона, а целые ящики с классными баночками бутлегерского самогона. Но все идеи не проходили проверку дальше первых набросков.

Тогда до меня стало доходить, что я копаю не в ту сторону. Михаил объяснил, что в таких заданиях проверяется не креативность, а знание базовых вещей о дизайне стандартной страницы онлайн-магазина.

Тогда получилось накидать каркас, на основе которого в итоге и сделал финальный макет.

Процесс в фотораме

Каждый макет я показывал Олегу и Михаил как последний —уже не знал как сделать лучше. Но каждый раз наши «директора» делали полезные замечания и макет потихоньку улучшался.

И наконец

Очень интересный опыт.

П.С.: графику делал в фотошопе, макеты — в скетче.

Курс текстописания Тимура Аникина

По рекомендации Олега записался на курс текстописания к Тимуру Аникину.

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

Курс проходит дистанционно. На каждую неделю Тимур присылает урок — много теории и три-четыре упражнения. Работы складываем в dropbox paper, где их совместно проверяем и комментируем. Разбор работ происходит в Slack раз в неделю.

Давно хотел попробовать в текст. Не сочинял текстов с самой школы.

Закончили первый модуль

Прошли первые два месяца обучения и на первой неделе апреля у нас был просмотр. Так в Школе Дизайна ВШЭ называют экзамен.

Ученики готовят к показу проекты и один за другим его презентуют преподавателю и гостям. Гостей могут пригласить как преподаватель, так и ученики. Олег пригласил Виктора Меламеда из БВШД и еще на несколько презентаций заходили преподаватели других программ ВШЭ — Алексей Рюмин и Протей Темен.

Проектами на первый модуль у нас были визуализации поэзии. Из предложенного списка каждый выбрал себе по стихотворению.

Я выбрал «Штабик» Владимира Навроцкого. Мне показался он самым адекватным из всех приведенных.

результат

Короткие презентации по проекту ученики заливают в портфолио на сайте Школы. В своей презентации я собрал референсы: доску Олега в Pinterest, видео жанра Kinetic Typography (классные видео, кстати) и до кучи упомянул направление веб-брутализм.

Для общей картины приведу несколько работ других ребят.

Чернеет парус одинокий. Аня Константинова

Тринадцать способов нарисовать дрозда. Василий Бочаров

Тяжело но можно. Вита Хомченко

Гагарин соврал лишь раз в жизни. Константин Шибалков

Любовь и смерть. Маша Коваленко

Ползет. Оля Бровкина

Девочке медведя подарили. Роман Гордеев

Как хорошо когда есть стол. Наталия Тищенко

Дизайн цифрового продукта, неделя 4

Начали изучать типы шрифтов. Раньше знал про антиквы и гротески.

Александра Королькова в «Живой типографике» приводит полную классификацию: помимо «базовых» — Антиквы, Гротесков и Брусковых шрифтов — есть еще и акцидентные шрифты: всякие декоративные, рукописные и пр.

Каждый шрифт может выполнять свою роль. Считается, что шрифты «с засечками» лучше читаются при большом количестве текста.

Для самостоятельного изучения: статья о шрифтовых сочетаниях и заметка на Хабре о шрифтах в вебе.

Осваиваем Readymag — простой конструктор сайтов. Практиковали основы, верстая одно из правил типографики. Я делал про интерлиньяж.

Еще узнал об архетипах. Карл Юнг решил классифицировать основные типажи людей и придумал систему архетипов. Сейчас эту классификацию используют в рекламе.

 1   2017   HSE

Дизайн цифрового продукта, неделя 3

Пишу с опозданием на неделю. Решил все-таки написать, чтобы повествование не прерывалось)

На той неделе была только одна лекция. Два занятия выпали на праздники.

Олег рассказывал об управлении вниманием читателя, о движение глаз при изучении любого предмета. Посмотрели на исследование Ярбуса, где он изучал движение глаз. В зависимости от поставленног вопроса испытуемым, их вгзгляд изучал разные предметы на картине.

А еще оказывается, что всё есть фильм.

Для дополнительного ознакомления:
уноморалес
Виктор Меламед
Марсель Дюшан

2017   HSE

Дизайн Цифрового Продукта, вторая неделя

На этой неделе изучали текст.

У текста есть ритм, как у песни. Есть привычный ритм – он воспринимается проще, это экономит когнитивные функции читателя. Читателю приятно (не чувствует напряга) и он воспринимает эти приятные ощущения как заслугу текста. А если текст о каком-то продукте, то и на сам продукт.

Об структуре текста хорошо писал Ильяхов.

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

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

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

Казалось бы, при чем тут монтаж. Оказывается, в тексте тоже есть монтаж. Ритм текста подчиняется тем же принципам, что и кино. В обоих случаях идет рассказ, повествование. Изучали на примерах лонгридов. Олег говорит, что лучшие русские лонгриды на http://batenka.ru/.

Вспомнил, что видел похожую мысль в блоге Тимура Зарудного.

2017   HSE

Дизайн Цифрового Продукта от ВШЭ

Чтобы научиться пилить сайты и приложухи записался на курс «Дизайн цифрового продукта» от Школы дизайна НИУ ВШЭ.

Три занятия в неделю по три часа: две лекции и один практический семинар. Лекции читает Олег Пащенко, за практику отвечает Михаил.

На первой лекции знакомились: Олег предложил разделиться на группы по 2-3 человека и взять короткое интервью друг у друга. Задача: собрать основные данные, чтобы понимать у кого какой опыт и какие цели каждый ставит.

За этим ощущается практичный подход — группа более менее начала общаться и стало понятно кто есть кто. По сравнению с группой по графическому дизайну, куда я ходил осенью, большая разница. Там я был «дядей», а тут — среднячок. Кроме того, есть несколько людей, работающих дизайнерами по несколько лет.

На первом семинаре знакомились с Тильдой — конструктором сайтов. С его помощью можно собрать веб-сайт ничего не понимая в HTML или кодинге. Составляешь страницу из готовых элементов. Как практическое задание каждый сделал сайт на основе собранного на лекции интервью. Получилось, что у каждого появилась своя страничка, сделанная соседом :)

На второй лекции разбирали этапы разработки цифрового продукта. От исследования предметной области до дизайна и тестирования. Для практики надо сделать Customer Journey Map для нашей группы.

И снова ощущаю практичность — одно задание выполняет несколько задач. Учимся работать в группах, осваиваем новый инструмент и еще даем обратную связь по процессу преподавания. Крутяк.

Посмотрим на сколько меня там хватит с моим минимальным опытом) #запомнитеэтоттвит!