Designgest
10K subscribers
124 photos
19 videos
386 links
Канал о том, что кажется интересным @sergeyandronov
No ads.
Download Telegram
Раньше я работал в рекламных, креативных агентствах, где очень ценится скорость твоей работы. Когда за 15 минут до отправки тендерной презентации креативному директору в голову приходит новая идея, для которой нужно успеть нарисовать концепт-дизайн, нет времени искать вдохновение. Нужно научить себя сразу включаться в работу без длительной подготовки.

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

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

В основном боязнь белого листа возникает из-за 2 причин:
1) страх неопределенности
2) страх несоответствия своим собственным ожиданиям.

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

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

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

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

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

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

Многие думают: «зачем тратить несколько часов на то, что точно улетит в корзину». Но на самом деле уже после 10-15 минут такой работы вы скорее всего начнете рисовать реальный рабочий макет. Этот метод нужен именно для старта, для того, чтобы снизить психологическую значимость работы, избавиться от неопределенности и начать уже что-то делать.

Попробуйте!
В эти выходные 30 сентября - 1 октября в Нижнем Новгороде пройдут Дизайн-выходные. Я очень люблю и уважаю это мероприятие.

Вот мой личный список выступлений, на которые я точно хочу попасть:
1) Сергей Гуров: «Продукт в дизайне» – потому что красиво;
2) Андрей Зубрилов и Артём Петросян: «Дизайн всего» – потому что важно;
3) Иван Васильев: «О дизайне цифровых продуктов» – потому что обязательно нужно знать;
4) Сергей Андронов: «Совмещение эффектности и эффективности: серия 2» – потому что интересно;
5) Алексей Ивановский: «Метод» – потому что хочется, чтобы кто-то взболтали сознание так, как это умеет делать Леша. Если кто-то не знает, то Леша ранее был арт-директором W-O-S. И я очень рекомендую посмотреть его сумасшедшую лекцию 4 летней давности – https://youtu.be/ERLj446Ldm8. Ну и стоит также сказать, что как-то Леша выступал на Дизайн-выходных пару лет назад, и зал после его выступления минут 5 не затихал от оваций. Я не утрирую;
6) Родион Арсеньев: «Тема уточняется» – потому что соскучился!

Если у вас есть желание и возможность, приезжайте, будет интересно – http://designweekend.ru/#rec30968660
Вот только я завел разговор про Лешу Ивановского, как у него спустя несколько лет «медийного молчания» вышел новый монолог на площадке Bang Bang Education – https://www.facebook.com/bangbangeducation/videos/1703598266340503/

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

Часто при выборе одного конкретного направления дизайнер спустя какое-то время заходит в тупик. Как правило, это происходит в тот момент, когда дизайнер сталкивается с задачей (в рамках интерфейса), для решения которой недавно созданной визуальной системе еще не хватает «мясца» (стилей, компонентов и прочего). И получается, что дизайнер пытается решить эту «проблемную» задачу силами еще не сложившейся системы, перебирая варианты из ограниченного спектра.

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

Я бы в таком случае предложил следующую механику. На старте стоит взять сразу 2 приоритетных направления визуального развития, которые вам кажутся подходящими. Начиная с первого в обычном режиме, вы, как и описано выше, вероятно упретесь в какой-то участок интерфейса, для которого будет сложно сходу придумать элегантное решение. В таком случае я предлагаю переключиться на второе направление и поработать какое-то время в нем. И здесь нет никакой магии, в рамках этой визуальной системы, вы скорее всего тоже через какое-то время попадете в тупик. Но при этом с большой долей вероятности вы осознаете, что многие решения из визуальной системы №2 вы можете адаптировать для использования в системе №1.

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

Я не хотел бы говорить, что это какая-то золотая таблетка. Но этот прием помогал мне ни один раз, особенно во времена работы в креативных агентствах, где счет идет на минуты =))

Так что попробуйте! 😉
Если вы еще по какой-то причине не видели, то посмотрите по пути на работу – http://andrebergs.com/protanopia/

Обычный комикс, но совсем с другой стороны. Вернее даже с разных сторон. Отличный пример совмещения привычного формата с актуальными технологиями.
Интересный подход к браузеру. И классно, что это не концепт на Dribbble, а продукт, хорошо засветившийся на Product Hunt, и который можно потестировать. Браузер, заточенный для работы, который позволит чуть меньше отвлекаться на фейсбук, youtube и прочие развлекательные сервисы, тратящие рабочее время – https://www.youtube.com/watch?v=QMXx5bDbxK8
Ребята из Google A.I. Experiments продолжают забавляться с машинным обучением, создавая свои фреймворки и распространяя AI среди обычных людей, далеких от программирования.

https://www.youtube.com/watch?v=3BhkeY974Rg – простой эксперимент, который позволяет обучить скрипт, используя вашу камеру на компьютере или мобильном телефоне. Вы можете «запрограммировать» сервис на соврешение простых действий как вывод гифок и озвучку. Понятно, что вряд ли его получится сходу использовать для решения каких-то сложных практических задач, но вы можете взять открытый код и доработать его под свои нужды. Ну и плюс, можете с детьми поизучать и поиграться, им должно понравиться! 😉

https://teachablemachine.withgoogle.com/
🎉🎉🎉
Решил отметить свой сегодняшний день рождения ответом на самый часто задаваемый вопрос: «Что должен уметь делать хороший арт-директор» =))
И мне кажется, что для ответа на этот вопрос нужно просто рассмотреть направления работы человека, возглавляющего дизайн-команду.

На мой взгляд работа такого руководителя состоит из 4 направлений:

1. Организация внешней коммуникации между дизайнерами и представителями команд других отделов и направлений.

Здесь задача арт-директора (дизайн-директора, design lead'a, head of design department, CDO и любого руководителя группы дизайнеров) заключается в том, чтобы закрепить правила, которые будут регламентировать порядок работы между дизайнером и менеджером, дизайнером и разработчиком, дизайнером и клиентом.

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

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

2. Организация внутренней коммуникации.

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

3. Создание системы развития дизайнеров.

Важно заниматься развитием команды через проведение внутренних лекций, создание простых заданий для дизайнеров, передачей опыта, полученного на глобальных конференциях и воркшопах, приглашение гостей из смежных областей. В Looi мы периодически устраиваем внутренние забеги, в течение которых каждый день выкладываем во внутренние каналы картинки в формате dribbble-шотов с отражением проделанной за день работы. Допускается использование «украшательства», так даже у ребят, которые работают над чисто техническими сложными проектами появляется возможность подтянуть эстетику. Плюс все в студии знают, кто чем занимался в течение дня. А это весьма важно, когда команды работают над разными проектами для разных клиентов, зачастую сидя в разных офисах (кто-то в студии, кто-то на аутстаффе у клиента).

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

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

И мне кажется, что эти 4 направления можно представить в виде спиц колеса. Если все спицы одинаковой длины, то колесо крутится быстро, плавно и легко. Если 2 спицы длинны, третья короткая, а четвертая вообще отломалась, то колесо явно не позволит вам ехать быстро. Ну и можно легко представить, что если 4 спицы одинаковой длины, но очень короткие, то колесо будет вас перемещать гораздо медленнее, чем колесо с 4 одинаково длинными спицами.

Так что не забывайте про эти 4 направления, занимайтесь постоянным их развитием и следите за тем, чтобы они были равной длины.

P.S. Ну а всякие «деньрожденьческие» поздравления и пожелания по каналу принимаются в https://www.facebook.com/andronovsergey или @sergeyandronov 😄 🎉🎉🎉
Только мы пообсуждали редизайн Dropbox, обсудили новую коммуникацию Яндекс.Такси, а тут оказывается у Ebay уже почти 2 месяца как используется новый стиль, на который никто не обратил внимания – http://form-and.com/work/ebay!

Видимо, зря они не сделали нормальный ebay.design для промо =))
Так что делитесь с коллегами, а то никто ни слухом ни духом!
Сегодня мы рассмотрим свежую лекцию Питера Смарта Head of Product Design компании Fantasy.

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

Мы имеем тактильный контакт с нашим телефоном больше, чем с любимым человеком за всю жизнь! Для 80% людей смартфон это первая вещь, к которой вы обращаетесь утром и последняя вещь, с которой вы взаимодействуете перед сном.

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

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

И Питер говорит о том, что в ближайшие 10 лет изменения будут гораздо более сильными, чем за прошедшие 200 лет.

Здесь он раскрывает тему эры «Дополненности» («The Age of Augmentation»). Но речь пойдет не про AR в обыденном ее понимании.

Предлагается разделить рассмотрение этой темы на 3 части:
1) разум
2) чувства
3) язык

Но в рамках текущего выступления Питер останавливается только на первом пункте.

РАЗУМ

Питер предлагает решить задачку – переместиться из Лос-Анджелеса в Нью-Йорк ровно за 30 дней, потратив менее $500. Как вы собиратесь решить эту задачу? Скорее всего вы сразу захотите воспользоваться чем-то типа Google Maps или Aviasales, или Booking, Airbnb и так далее. Сейчас наша зависимость от сервисов и инструментов все больше.

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

То есть между проблемой и решением сервис вам сильно поможет, но вам самим нужно будет задавать параметры решения проблемы.

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

И перед дизайнером стоит важная задача решить проблему с доверием. Доверием человека по отношению к сервису, который в скором времени сможет решать за пользователя довольно сложные и важные задачи. Например сейчас, при запросе какому-нибудь помощнику типа Siri «закази мне все необходимое, чтобы построить лодку» вы скорее всего 10 раз перепроверите составленный список.

Как же можно построить доверие. Здесь Питер приводит 3 пункта:
1) коммуникация
Сейчас существует огромная разница между тем, как мы коммуницируем с нашими голосовыми помощниками и тем, как мы общаемся друг с другом. Для голосовых систем мы часто будто специально заготавливаем фразу-программу, которая еще и невсегда дает нужный результат.

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

3) совместное творчество
Здесь Питер приводит в пример задачу, которая была поставлена компьютеру – разработать дрона. И в результате получен результат, построенный на принципах генеративного дизайна, с учетом аэродинамических свойств, расхода материалов и так далее. То есть инструмент интегрируется в процесс творчества.
Меня сейчас очень интересует тема системности в дизайне. Но нет, речь пойдет не о дизайн-системах, которые сейчас делают и обсуждают практически все (что хорошо), а о понятии системности в более широком смысле.

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

Итак, система – множество элементов, находящихся в отношениях и связях друг с другом, которое образует определённую целостность, единство.

Давайте теперь попробуем разобрать определение на части и соотнести с составляющими дизайна:
1) множество элементов = изображения, текстовые блоки, кнопки, инпуты и т.д.
2) отношения и связи = взаиморасположение, отступы, динамичность поведения элементов относительно друг друга и т.д.
3) целостность, единство = работающий продукт или его часть (мобильное приложение, сайт, форма на сайте, плакат и т.д.).

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

И сегодня предлагаю начать с самой базы – понять, из чего состоит любая система, а получается, что и любой дизайн.

ЭЛЕМЕНТ
Элемент – предел членения системы с точки зрения решения конкретной задачи. То есть это самая мелкая часть, которую имеет смысл рассматривать на данном уровне.

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

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

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

СВЯЗЬ И ОТНОШЕНИЕ
Связь – ограничение степени свободы элементов, при котором сама система приобретает новые свойства.

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

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

СТРУКТУРА
Структура – наиболее существенные компоненты и связи системы. Многие системы являются динамическими (об этом мы поговорим позже), то есть часть из компонентов может изменяться, добавляться или удаляться. Но структура системы в виде ее постоянных компонентов обеспечивает жизнеспособность системы.

ЦЕЛЬ
Цель – идеальный конечный результат. Любая, даже такая мелкая система, как кнопка, имеет вполне ясную цель, ради которой система существует.

Сегодня было много философских категорий, и может быть сходу непросто въехать в это, но мы будем с этим разбираться постепенно.
И да, 8 декабря (пятница) в 16:00 я буду рассказывать подробнее про системный подход на онлайн-лекции в Skillbox, которая будет доступна вот здесь – https://skillbox.ru/revolution/, так что там многие вещи, надеюсь, станут гораздо более прозрачными.

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

ИНТЕГРАТИВНОСТЬ
Интегративность – «сила» или «ценность» связей элементов внутри системы выше, чем сила или ценность связей элементов системы с элементами внешней среды.

Например, начинающий дизайнер, приступая к новому проекту, собрал себе борд на Pinterest, включив в него самые трендовые работы с Dribbble, Behance, FWA, Awwwards. Все они очень сочные и яркие. Дизайнер не может выбрать какой-то один референс, ему хочется замешать все и сразу, чтобы уж точно медальку получить. И он начинает собирать страницу из блоков, в каждом из которых использует стилистику из разных классных работ. В результате связь этих блоков между собой в рамках страницы гораздо слабее, чем связь каждого из них со своим внешним референсом. Ну и на выходе в таких ситуациях кажется, что дизайн «разваливается» и «сшыт, как ласкутное одеяло».

Ну а еще более явно эта характеристика проявляется во всем известной теории близости, о которой можно почитать вот здесь – https://www.artlebedev.ru/kovodstvo/sections/136/.

СИНЕРГИЧНОСТЬ
Синергичность – возможности системы превосходят сумму возможностей составляющих её частей.

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

ИЕРАРХИЧНОСТЬ
Иерархичность – каждый элемент системы может рассматриваться как система; сама система также может рассматриваться как элемент некоторой надсистемы.

В общем любой «дизайн», который вы делаете, как правило сам по себе состоит из разных подсистем. Но при этом и сам является частью какой-то большей системы.

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

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

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

Ну и на всякий случай напоминаю, что сегодня в 16:00 буду рассказывать про свой взгляд на системный подход вот здесь – https://skillbox.ru/revolution/ . Приходите, мне будет приятна ваша поддержка и вопросы.
Кстати, вот как-то так будет выглядеть сегодняшняя лекция.
В прошлую пятницу поговорили с ребятами из Skillbox на тему системности в дизайне, про которую я сейчас пишу в канале.

Тема непростая, поэтому, возможно вам немного упростят восприятие мои пояснения в формате видео-лекции - https://youtu.be/DzNz58sIQBI.

Посмотрите!
Ну и конечно мне очень приятны будут ваши лайк 😝