10 posts tagged

вспомнить в конце 2017

Курс Игоря Штанга «Типографика и верстка»

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

Я там оказался единственным студентом среди практикующих дизайнеров. Были ребята из Тинькова, ЦИАНа, Авито, Яндекса и МИФа. Это можно считать за показатель крутости курса.

Главное в верстке — структура. Надо понимать предмет: что самое важное, где это будет висеть, кто этим будет пользоваться и что там искать.

По умолчанию текст — серый прямоугольник. Игорь рассказал, как от этого уйти.

Игорь рассказал о классическом стиле, потом о швейцарском.

Для практики верстали рецепт и объявление в швейцарском стиле. На каждое задание отводилось 50 минут.

Формат — тоже объект верстки. Его надо знать и использовать, он участвует в композиции наравне с другими объектами.

Модульность как метод верстки: макет делится на равные модули без остатка и пересечений. Модули надо «закрывать».

Открыл для себя, что сетка ≠ модульность. Раньше не разделял эти понятия.

Сетка выстраивается от содержания. Если сначала придумать сетку и положить на нее объекты, то всё разваливается, когда убираешь сетку. Еще сетку можно нарушать (иногда даже нужно).

Разобрали виды выключки текста. Узнал, что выключка по формату — всегда компромисс. Точно следовать правилам не получится.

Размер и форма таблицы определяется данными в ней. Избегать шума. Упрощать.

Много одинаковых изображений на странице — скучно и неинтересно. Поможет контраст.

Для практики переверстал страницу Яндекс.Денег

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

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

Хорошо, что есть практика.

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

На защите я показывал как пришел к этому решению и получил развернутые замечания Игоря. (Всё надо переделать :)

 1   2017   вспомнить в конце 2017

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

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

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

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

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

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

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

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

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

Мой проект

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

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

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

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

Выводы

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

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

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

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

 1   2017   HSE   LessWrong   вспомнить в конце 2017   Сделал

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

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

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

Задача

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

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

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

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

Аудитория

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

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

мувик

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

Референсы

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

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

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

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

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

сетка

Сетка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2017   2017   HSE   вспомнить в конце 2017   процесс   Сделал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И наконец

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

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

 2   2017   2017   HSE   вспомнить в конце 2017   не записал — не было   процесс   Сделал

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

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

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

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

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

2017   2017   HSE   вспомнить в конце 2017   текст

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

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

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

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

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

результат

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

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

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

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

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

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

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

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

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

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

 2   2017   2017   HSE   вспомнить в конце 2017   Сделал

5 дней в Баварии

Что нового я узнал за этот короткий отпуск.

«Победа» — норм

Оперативно объявили посадку, всех проверили, рассадили, задраили люки, рассказали про технику безопасности и улетели. Сели еще и с опережением графика.

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

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

Билеты стоят от 4-5 тысяч. Смотреть проще сразу на весь месяц — цены на соседние дни могут сильно разниться.

Организация поездки для 6 человек — это весело

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

При этом отметил про себя, что, например, «Катя, залезь на ТрипЭдвайзор и распечатай топ-5 ресторанов в центре Нюрнберга» уже перебор — слишком детализировано и ограничивает подход.

Главное в отпуске — не забывать отдыхать

Когда отпуск небольшой — расписан каждый день. Получается, что тусуются все вместе прямо с утра и до самого вечера. От этого я устаю. Внутри просыпается старый вредный дед. Немного тишины не помешает.

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

Всегда спрашивать

По приезду узнали, что наша машина еще не готова — предыдущий клиент её сдал с горящим Check Engine. В итоге мы прождали ее два часа. Когда оформляли, я спросил про компенсацию. Клерк сказал, что скидку на аренду дать не может, поскольку всё уже предоплачено. Предложил решить за счет бензина — машину мы брали с полным баком, а вернем с половиной. На этом и сошлись. Сейчас посчитал — наша выгода примерно 10%.

 1   2017   вспомнить в конце 2017   как дела?   ЛХ   не записал — не было   путешествия

Красная Поляна. Январь 2017

Надо записать чтобы не забылось.

Съездили покататься в Красную Поляну на три дня. В целом понравилось.

Бюджет получился весьма приятный:
Билеты: 3 500 ₽ в обе стороны (плюс такси)
Жилье: 3 500 ₽
Скипасы: 6 500 ₽ за три с половиной дня.

Итого где-то 14 000 ₽

2017   2017   вспомнить в конце 2017   как дела?   не записал — не было   путешествия

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

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

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

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

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

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

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

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

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

2017   2017   HSE   вспомнить в конце 2017   как дела?   не записал — не было

Что я узнал из курса об истории искусств

Может показаться, что ответом будет что-то типа «теперь я отличаю Барокко от Ренесанса» или Рафаэля от ван Эйка. А на самом деле, пока шли лекции, обрывки информации об истории аккуратно нанизывались на единую ось. Наверняка в науке об обучении описан какой-то метод о запоминании с помощью ассоциаций.

Ассоциацией в данном случае выступила архитектура.

Сам курс проходил на сайте «Открытое образование» — https://openedu.ru/course/hse/ART/
Преподаватели — Александра Старусева-Першеева и Артем Дежурко — увлеченно рассказывали видео-лекции. Поразила их погруженность в историю. Артем мог непринужденно перечислить имена придворных у какого-то средней руки короля средневековья. А когда Александра рассказывала об примерах уничтожения вандалами предметов искусства, нельзя было не проникнуться этим искренними сожалением и негодованием.

Далее следует крайне вольный пересказ курса лекций.

Курс начался с Древнего Египта. Мы все привыкли, что Египет это пирамиды. Были очень познавательно увидеть с чего они начинались — с длинных и широких одноэтажных зданий. Потом кто-то додумался бахнуть сверху второй этаж, чуть меньше первого. И за N сотен лет они пришли к тому, что мы знаем.

В голове отложилось: 3-1 век д.н.э это пирамиды. Раньше пирамиды было просто «очень давно».

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

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

Византийская Империя — понятие, придуманное историкам. Сами византийцы считали себя римлянами. В 395 году н.э. Феодосий Великий своим завещанием разделил Римскую Империю на западную и восточную. Насколько я усвоил (за достоверность ручаться не приходится) в Византии продолжали строить по-римски, но принципиально ничего нового в архитектуре не изобрели.

В голове отложилось: Третий Рим. Христианская территория. С 395г до 15 века (с переменными успехами).

Темные Времена и Средневековье. Империи не падают за один день. Упадок Римской Империи плавно начался в 4 веке. Самая темнота наступила около 10 века. За весь этот период людям было не до искусств (Маслоу передает привет со своей пирамиды). В книгах любили орнаменты, на фресках люди были схематическими, архитектура была не огонь.

Что отложилось в голове: всё плохо, междуусобица, местячковые короли. Ничего нового и даже старое уже позабыто. Условно 6 – 12 век.

Возрождение. Часто слышал это слово, но никогда не понимал что именно возрождали. Оказалось — былое величие. Грубо говоря, только в 13 веке люди смогли примерно повторить в архитектуре то, что римляне делали 900 лет до этого. Получается, человечество стояло на месте в развитие и профукало 9 веков. Досадно.

Мне очень нравятся т.н. «старые города» — места со старой архитектурой. Теперь я знаю, что такое Романская архитектура и чем она отличается от Готической. Познавательно.

Что отложилось в голове.

  • Массивные храмы с толстыми стенами, небольшими и малочисленными окнами — это Романский стиль. Так делали в 11-12 веках.
  • Потом он перешел в Готический стиль — это когда сплошные ветражи, а от толстых стен остались только столбы, напоминающие ребра гигантского животного. Так делали с 12 до начала 16 века.
  • Позже наступило то самое Возрождение или Ренессанс. Википедия подсказывает, что этот стиль ограничивается 16 веком.

Барокко. Красота, пышность, излишества, вот это всё. 16-18 век. Не знаю почему, но в голове ничего не отложилось :)

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

  • Классицизм, в том числе палладианство, ампир, неогрек. Сер. XVIII—XIX в.
  • Эклектика. 1830-е — 1890-е гг.
  • Модерн. 1890-е — 1910-е гг.
  • Модернизм. Нач. 1900-х — 1980-е гг.
  • Конструктивизм. 1920-е — нач. 1930-х гг.
  • Постмодернизм. С сер. XX в.
  • Хай-тек. С кон. 1970-х гг.
  • Деконструктивизм. С кон. 1980-х гг.

Вот так примеры архитектуры разных эпох помогли выстроить в голове стройную картину.

 2   2017   2017   openedu   архитектура   вспомнить в конце 2017   как дела?   не записал — не было