Перевод статьи I want a portfolio but I’m too lazy от иллюстратора и продакт-дизайнера под псевдонимом Al Power.  

Прекратите прокрастинацию

«Зачем переживать насчет портфолио? Это бессмысленно, пока мне не нужна новая работа». Ну, в регулярном обновлении портфолио много преимуществ. Не буду вдаваться в подробности — и так очевидно, что обновляя портфолио, вы собираете все свои проекты воедино. Это кажется не таким уж большим делом, но собирая проекты вместе, вы держите свою работу под контролем.

Прокрастинация всегда сопровождается одним и тем же:

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

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

Обратите внимание на руки

Возьмите себя в руки

Я не могу решить проблему за вас, но могу пару минут поразглагольствовать о том, что нужно сделать, чтобы справиться с этой ситуацией:

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

Если вы не универсальный солдат — хорошо дизайните, но не умеете программировать, — не волнуйтесь. Есть множество других способов сделать сайт, поэтому оправдание «Я понятия не имею, как кодить» не пройдет. Создайте портфолио с помощью конструкторов сайтов: Readymag, Tilda, Wordpress, Wix, Adobe Portfolio.

Фрагмент портфолио графического дизайнера, которое разработано на конструкторе Tilda

Понять, каким именно дизайнером хотите быть. В основном это относится к начинающим дизайнерам. Поймите, какие скиллы хотите продемонстрировать, прежде чем приступите к разработке портфолио. Слишком часто я вижу в портфолио молодых нетерпеливых дизайнеров одно и то же: «Вот проект, который я сделал в универе много лет назад, — дизайн обуви». Если хотите быть UX-дизайнером, не хвастайтесь тем, как делали обувь в универе. Показывайте только актуальные, понятно представленные UX-проекты.

То же касается иллюстраций: если хотите быть иллюстратором, не выкладывайте рисунки, которые сделали в 12 лет в летнем лагере. Покажите проработанные цифровые иллюстрации, которые выполнили в современных и профессиональных программах.

Портфолио на Readymag. Автор на первом же экране обозначила свою специализацию — иллюстратор и визуальный дизайнер

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

Дизайнер Илья Бирман разместил самые масштабные проекты на главной странице портфолио

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

Чекните мое новое портфолио: https://www.alpowerillustrates.com

Что я думал об этом раньше

Какое совпадение — я сам недавно обновил портфолио. На его примере покажу, что имел в виду выше:

Разобраться с инструментами. Я дизайнер и не умею кодить, да и должен ли? Не думаю, и поэтому свой сайт сделал с помощью программы Adobe Portfolio, которая стоила около 9.99 $ в месяц. Выбрал ее, потому что она синхронизируется с учетной записью на Behance. Все, что вы постите на этой платформе, автоматически переносится в портфолио. CMS программы довольно простая и интуитивно понятная, и мне кажется, конечный результат получился хорошим.

Портфолио фотографа, которое управляется с помощью Adobe Portfolio и сопряжено с Behance

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

Фрагмент портфолио дизайнера Павла Кедича. В тексте о себе Павел указал, что специализируется на графическом дизайне и веб-проектах, и подтвердил это примерами работ

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

В статье «Показать портфолио и не облажаться» главный дизайнер Behance призывает не жалеть времени и отобрать пять лучших проектов. Комментарии других дизайнеров подтверждают эту мысль

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

Чтобы ваши проекты были в топе, их необходимо поддерживать. Прекратите сидеть и восхищаться проектом после того, как закончили работать, — сначала оформите кейс, а потом любуйтесь. Кроме того, если вы сделаете кейс, то сможете заработать дополнительные очки от клиента, сказав ему: «Вот немного гайдов для вашего проекта. Бесплатно!»

Статья vc.ru о том, как правильно писать кейсы для дизайнерского портфолио

Узнайте больше про оформление портфолио

42 шаблона для портфолио дизайнера на Wordpress

5 ошибок в онлайн-портфолио, которые стоят вам денег

8 портфолио графических дизайнеров, у которых есть чему поучиться

Еще одна статья от AI Power

Айдентика: создание сочетающихся фирменных фишек бренда

Каналы-гиганты в Telegram для гиков с тысячами подписчиков знают все. Это «Код Дурова», «Библиотека программиста» и «Tproger для программистов». Предлагаем познакомиться с молодыми и нераскрученными каналами с авторскими подборками, мнениями и опытом. Их создатели — энтузиасты и фанаты мира технологий — делятся полезностями.

Расширить кругозор

@spase_geek — канал «Астронавт» публикует невероятной красоты фотографии и необычные факты о космосе. Подписчиков — 100+.

@avDaily — канал «Про аудио, видео» размещает в основном авторские материалы об аудио- и видеооборудовании, обзоры и советы. Аудитория — 200+.

@soengineering — канал «Социальный инжиниринг» подбирает материалы про информационные войны, слежку, манипуляции обществом и подобные. Подписчиков — 200+.

@mipt_news — канал MIPT in media публикует новости науки и материалы ученых Физтеха — Московского физико-технического института. Аудитория — 300+.

@quantumquintum — авторский канал Quantum Quintum технического евангелиста Microsoft Константина Кичинского. Оригинальные материалы про машинное обучение и искусственный интеллект. Например, результаты проекта Morale Machine от MIT Media Lab: проводился эксперимент, кого должна сбить самоуправляемая вагонетка, — пожилого или юного пешехода. Подписчики — 400+.

@astrocosmos — «Астрономия & космос» — еще один канал для тех, кто вглядывается в ночное небо. На нем размещаются посты, фотографии и исторические видео о покорении космоса человеком. Аудитория — 600+.

@morespace — канал More Space ведет астроном-любитель. Он рассказывает о космосе, звездах, черных дырах и астрономии вообще. Подписчиков — 1000+.

@sciachivs — канал Get Brains создан для тех, кому интересно, как устроен и работает мозг. Аудитория — 1000+.

@chemistryru — канал «Химия» с множеством познавательной информации. Подписчиков — 1400+.

@jerudit — канал «Узнавай первым» публикует ответы на самые неожиданные вопросы: «Почему небо голубое?» или «Почему старые и новые книги пахнут по-разному?». Аудитория — 1300+.

@devops_news  — канал DevOps News публикует англоязычные статьи, видео и анонсы про DevOps, CI/CD, Docker и инфраструктуру. Подписчиков — 1500+.

@zelenyikotspace — канал «Открытый космос» рассказывает о том, как человек осваивает Вселенную. Аудитория — 1600+.

@naked_science — канал Naked Science публикует статьи с одноименного сайта. Подписчиков — 1600+.

@tehnota — канал «Технота» готовит авторские обзоры смартфонов и других гаджетов. Аудитория — 2800+.

@computerra_ru — канал легендарного журнала «Компьютерра». Подписчиков — 2100+.

@ChemistryEasy — канал «Химия — Просто» приглашает желающих заниматься похимизмом и получать знания в веселых картинках. Аудитория — 2400+.

@globchan — канал «Glob (science news, новости науки)» публикует статьи и видео преимущественно по биотехнологиям. Многие посты копируются со страницы «Углубленный биолог» во «ВКонтакте». Подписчики — 2300+.

@sciencegram — канал «Наукограм» ведет научный журналист Алиса Иваницкая. Она публикует интересные и необычные материалы из мира науки: например, почему человек — это перевернутый лобстер. Аудитория — 2700+.

@thinkordie — канал «Думай или умри» ждет тех, кто любит рассуждать и удивляться. Посты, статьи и видео из разных областей науки, культуры и жизни общества. Подписчиков — 3000+.

@itextrapolation — автор канала «Экстраполяция IT» размышляет о программировании и работе айтишников, периодически делится полезностями. Аудитория — 3400+.

Прокачать скиллы

@anscombes_quartet — канал со сложным названием Anscombe's Quartet, которое переводится как «Квартет Энскомба», публикует полезные материалы по Data Science, искусственному интеллекту и машинному обучению. Подписчиков — 100+.

@computersciense — канал Computer Science размещает обучающие материалы о компьютерах, их строении и работе. Аудитория — 100+.

@frontend_info — канал Frontend Info публикует материалы и видео с конференций, в основном — англоязычных. Подписчиков — 100+.

@wfspremium — канал «Премиум-клуб WebForMySelf» выкладывает уроки по PHP, Angular, Drupal, Wordpress. Правда, нерегулярно, но это может измениться. Аудитория — 100+.

@fizika_zaqi — канал «Физика» для тех, кто хочет глубже погрузиться в предмет. Задачи, лабораторные и ответы на них. Подписчиков — 200+.

@cyberpolyglot — канал Java построен в виде FAQ. Каждый пост — ответ на вопрос о языке. Аудитория — 300+.

@komYounity — канал komYounity посвящен Linux. Подписчиков — 300+.

@Frontend_and_backend — канал «Frontend- & Backend-разработка» размещает статьи и туториалы по веб-разработке: JS, React, Angular и другим технологиям. Аудитория — 400+.

@frontendnoteschannel — канал Frontender`s Notes — сборник полезностей для фронтенд-разработчиков. Подписчиков — 400+.

@kuntashov_devnotes — автор канала «Александр Кунташов — про разработку на 1С и не только» делится опытом. Пишет про 1С, Битрикс24, 1 Script и другое. Аудитория — 500+.

@HelpDeskStation — канал «Компьютерный канал ИТ-новостей» хоть и называется новостным, больше публикует обучающих материалов для продвинутых юзеров ПК. Подписчиков — 800+.

@pusheen_machine — канал Pusheen Machine — кладезь материалов по машинному обучению и искусственному интеллекту. Приглашают авторов. Аудитория — 900+.

@neurohive — канал «Neurohive — нейронные сети» размещает обзорные статьи и туториалы с методами машинного обучения. Подписчиков — 1000+.

@yellow1c — канал «Люди в желтых халатах» посвящен программе 1С. Все про интеграцию, бюджетирование, CPM/ВРМ и прочее. Аудитория — 1000+.

@gophernews — канал Golang для фанатов языка Go. Обучающие и новостные материалы на русском и английском. Подписчиков — 1600+.

@MathematicsTips — канал «Математические хитрости» поможет по-другому взглянуть на математику — царицу наук. На канале выкладывают полезности, лайфхаки и простые объяснения сложных решений. Аудитория — 1600+.

@javaswag — автор канала Javaswag готовит подборки материалов по Java и JVM, в основном на английском. Рассылки выходят блоками несколько раз в месяц. Подписчиков — 1800+.

@droidgr — канал Android Good Reads размещает материалы и анонсы мероприятий по android-разработке. Аудитория — 1800+.

@tpverstak — канал «Типичный верстальщик» публикует обучающие статьи, книги и другие полезности по верстке. Подписчиков — 2200+.

@cccoding — канал Coding размещает собственные статьи по программированию и бесплатные курсы. Аудитория — 2600+.

@it_guide — канал «ITGuide — твой гид по ПК» публикует материалы о работе на компьютере, настройках, ошибках. Подписчиков — 2600+.

@web_stack — канал Web Stack-FrontEnd/BackEnd/Design публикует полезные статьи, туториалы и гайды для дизайнеров и fullstack-разработчиков. Материалы на русском и английском языках. Аудитория — 3000+.

@iosgr — канал iOS Good Reads размещает материалы и анонсы мероприятий по iOS-разработке на Swift. Подписчиков — 3600+.

Узнать новости

@it_novosti — канал «IT-новости (IT News)» размещает избранные сообщения об информационных технологиях. Новости выходят в виде кратких тезисов, без перехода на другие сайты. Аудитория — 80+.

@technobrain — канал «Техномозг» не постит чужие новости, а пишет собственные. Подписчиков — 500+.

@guide42 — канал «42» размещает новости из мира технологий и научного прогресса. Аудитория — 600+.

@info_tech — канал «Информационные технологии» собирает интересные новости Рунета про IT. Подписчиков — 600+.

@meduzagorgona — канал «Медуза Горгона» позиционирует себя так: «Все самое интересное из современного мира, о чем не стыдно не знать, но стыдно не рассказывать». Избранные новости в сфере технологий и digital. Аудитория — 600+.

@geek_newss — канал Geek рассказывает новости про гаджеты и другие новинки просто и коротко. Подписчиков — 700+.

@gadgetcult — канал GadgetCult публикует англоязычные видеоновости с переводом. Все крутые гаджеты-новинки в одном месте. Аудитория — 800+.

@news_infosecurity — канал «ИБшнику» размещает новости, анонсы и события из сферы информационной безопасности. Подписчиков — 800+.

@prorobots — канал Robotrends.ru постит новости о роботах и всем, что с ними связано. Аудитория — 800+.

@Hi_Tech_News — автор канала Hi-Tech News пишет новости о гаджетах. Никаких переходов — вся информация в Telegram. Подписчиков — 1000+.

@digitshadow — канал «Цифровая тень» рассматривает, как в интернете ущемляются права человека: рассказывает о вмешательстве в личную жизнь, слежке и манипуляциях. Подборка новостей и статей соответствующая. Аудитория — 1300+.

@Futuris — канал Futuris публикует интересные новости из мира искусственного интеллекта — в основном на английском языке. Подписчиков — 2000+.

@kodnews — на канале itNews собирают новости из мира IT и digital. Аудитория — 1300+.

@atomgramm — канал AtomGramm рассказывает о высоких технологиях в энергетике, медицине и современной физике. Подписчиков — 1500+.

@fintech_review — канал Fintech review размещает дайджесты финансовых и fintech-новостей России. Аудитория — 2000+.

@netpost  — канал «Сетевой вестник» публикует новости и собственные статьи о событиях в мире интернета. Подписчиков — 2500+.

@fit_predict — канал Fit Predict посвящен искусственному интеллекту. Он собирает новости, события и аналитику в сфере AI. Аудитория — 2600+.

Посмеяться

@truesoft — канал «Truesoft (на галере)» постит мемасики и шутки. Подписчиков — 80+.

@it_tusovka — канал «IT Тусовка» вперемешку с мемами размещает дельные статьи, видео и туториалы для начинающих программистов. Аудитория — 100+.

@gtxtymt_xyz — канал «Печенье» ведет PHP-ист и любитель Laravel. Постит новости о PHP и мемы — их больше. Подписчики — 200+.

@yaprogrammer — еще один канал с юмором для айтишников «Я — Программист». Аудитория — 1500+.

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

Лекции TED 34 года воодушевляют людей на свершения и открытия. Уже по названию конференции понятно, что в ней много полезных материалов для дизайнера: Technology, Entertainment, Design.

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

How to build your creative confidence

Дэвид Келли — продюсер, сценарист и лауреат 11 премий «Эмми» — утверждает, что все люди творчески одарены в равной степени. Только одни раскрывают этот потенциал, а вторые боятся критики.

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

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

My life in typefaces

Лекция от Меттью Картера, создателя культовых шрифтов Verdana, Georgia и Tahoma. Основываясь на своем жизненном опыте, типограф рассказывает о подводных камнях в работе дизайнера и об изменениях, которые претерпела сфера дизайна на протяжении его карьеры.

А еще Картер рассуждает о том, как важен баланс между креативностью и техническими возможностями в дизайне.

Simplicity sales

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

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

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

3 ways good design makes you happy

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

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

Так что нефункциональный дизайн тоже имеет право на жизнь.

What we can learn from shortcuts

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

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

The complex relationship between data and design in UX

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

Рошель Кинг на примерах показывает, как даже небольшие изменения в дизайне влияют на поведение пользователей и их реакцию.

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

404, the story of page not found

Ошибка 404 раздражает большинство пользователей — но только в том случае, когда ее страница сделана неправильно или отсутствует. В своей лекции Ренни Глисон, главный стратег агентства Wieden+Kennedy, доказывает, что даже ошибки можно использовать себе на пользу.

Страница 404 открывает огромное пространство для креатива: можно развеселить пользователя и продолжить нормальную коммуникацию с ним. И Глисон показывает идеи компаний, которые успешно с этим справились.

How to manage for collective creativity

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

Линда Хилл, профессор бизнес-школы Гарварда, проанализировала, как творческие команды работают в крупных успешных компаниях, и сформулировала ряд советов для руководителя и участников коллектива. А также рассказала, как дискуссии и даже споры могут быть полезны для команды и продукта.

30-year history of the future

Николас Негропонте — меценат, инвестор и создатель Media Labs в MIT — был лектором на самой первой конференции TED. Спустя 30 лет он делится впечатлениями о том, как будущее становится настоящим.

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

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

Design for all 5 senses

Джинсоп Ли, победитель TED Talent Search, утверждает, что хороший дизайн затрагивает все пять чувств. Если он неплохо выглядит, то должен и хорошо звучать и пахнуть. Есть ли смысл в этой идее?

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

***

TED — кладезь полезной информации и вдохновения не только для дизайнеров, но и для представителей других профессий. Советуем смотреть лекции регулярно.

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

Бонусы для читателей

Подарок для внимательных читателей — два месяца премиум-подписки на онлайн-курсы EnglishDom! Бонус действует до 01.02.19.

Работаете онлайн и хотите обучаться английскому так же? Записывайтесь на индивидуальные занятия с преподавателем «Английский для профессии».

После курса сможете свободно обсуждать брифы иностранных заказчиков и зарабатывать больше.

Никита Садовский, Lead Product Designer в Voximplant, поделился телеграм-каналами, блогами и другими ресурсами по теме. Будет полезно тем, кто занимается графическим и продуктовым дизайном, UX и проектированием интерфейсов.

Костя Горский, Design Manager в Intercom, экс-дизайн-директор «Яндекса»

Телеграм-канал — @desprod

Костя пишет про дизайн, продуктивность и жизнь. На канале много примеров из его опыта и куча интересных интервью, в том числе с дизайн-директором Mail.Ru Юрием Ветровым — о ребрендинге логотипа компании. С картинками, конечно.

Юрий Ветров, Design Director в Mail.Ru

Телеграм-канал — @pdigest

Здесь вы найдете статьи по дизайну интерфейсов, инструменты, паттерны и кейсы. Автор дает мощные дайджесты по продуктовому дизайну. Можно покопаться в описании канала, там еще много полезных ссылок.

Саша Окунев, старший дизайнер в «Газпромбанк»

Телеграм-канал — @slashdesigner

У Саши отличный ресурс для начинающих и для профи. Еще у него есть классный канал о проектировании пользовательского опыта и интерактивном дизайне — @uxguide. В созданных Сашей чатах всегда можно поговорить на околодизайнерские темы, получить ответ на вопрос. Ссылки на них — в описании канала.

Илья Сидоренко, соло-дизайнер, разрабатывает диджитал-продукты

Телеграм-канал — @thedesigntimes

Профиль в Instagram — @iskros

Колонка на Medium — medium.com/@iskros

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

Антон Жиянов, продуктовод в HFLabs

Телеграм-канал — @dangry

Профиль на Facebook — facebook.com/nalgeon

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

Cергей Андронов, дизайн-директор в Binarydistrict.com

Телеграм-канал — @designgest

О системности, методологиях, принципах, новых ресурсах. Здесь и мысли о роли современного дизайна от ключевых персон Силиконовой долины, и анонсы крутых профессиональных мероприятий, и полезные видео — например, как создать приложение за четыре минуты.

Олег Чулаков, руководитель собственной студии, у которой лучший usability/UX в России по версии «Золотого сайта»

Телеграм-каналы:

@chulakov_design — про аналитику, проектирование и дизайн систем; @chulakov_notes — про жизнь и бизнес.

Мэтт Д. Смит, директор по дизайну в студии MDS

Профиль в Instagram — @mds

Twitter-блог — @mds

YouTube-канал — MDS

Полезная информация по продуктовому дизайну. На YouTube-канале масса интересных видео: «Обучение дизайну иконок за один час», «Создание 16-пиксельных иконок в Sketch», разбор инструментов.

Пабло Стэнли, ведущий дизайнер в InVision Studio Platform

YouTube-канал — Sketch Together

Блог на Medium — @pablostanley

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

Ян Лозер, ведущий дизайнер в Tapdaq

Личный сайт — janlosert.com

Ян специализируется на создании сложных веб-приложений и разработке цифровых продуктов. Его сайт привлечет тех, кто интересуется UI/UX, создает посадочные страницы.

Данил Ковчий, дизайнер интерфейсов

Блог на Medium — @kovchiy

Twitter-блог — @kovchiy

После прочтения статей Дани всегда есть над чем подумать. Его блог в Twitter — просто бомбический: чего стоит одна фраза «Все красивое — правильно».

Ольга Жолудова, редактор UX Crash Course: Fundamentals

Блог на Медиум — @nancypong

Всегда отличные переводы свежих статей. Будет интересно тем, кто занимается UI/UX: советы по проектированию интерфейсов сайтов, мобильных приложений и веб-сервисов. Материалов очень много, и они действительно стоящие. Помогут узнать, какое важнейшее правило UX все нарушают или что строить сначала — User Journey Map или User Flow?

Зорик Истомин, художник, криейтор, основатель thehaze.ru

Профили в Instagram:

@zorikistomin — личный;

@thehaze — проект;

@scazy — персонаж.

Просто космическая личность и диджитал-арт, вызывающий восторг.

На кого еще стоит подписаться, по вашему мнению? Кроме Артемия Лебедева, конечно. :)

Это перевод статьи The Hidden Power of Reward Systems In Design. Автор оригинала — Николас Крамер, дизайнер из нью-йоркской компании Barrel. Он помогает бизнесу объяснять потребителям, зачем нужен и чем хорош продукт.

Поощрения отлично работают

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

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

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

Способы привлечь пользователя

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

На практике дизайнеры используют:

1. Информационные поощрения.
2. Социальные стимулы.
3. Геймификацию.
4. Монетизацию.

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

Информационное поощрение

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

Medium, Twitter и Buzzfeed поощряют нас информацией

Механика игрового автомата

В 2008 году разработчик программного обеспечения Лорен Брихтер (Loren Brichter) создал Tweetie — программу-клиент для «Твиттера». Вскоре Twitter купил права на это приложение и оно стало официальным клиентом соцсети на iPhone. Так сервис укрепил свои позиции в магазине приложений и попутно ввел в обиход новую функцию жестового управления — «потяните, чтобы обновить» (pull-to-refresh).

Вот как интерфейс Tweetie выглядел десять лет назад (изображение — InformationWeek)

И хотя интерфейс Twitter-клиента c тех пор претерпел много изменений, pull-to-refresh по-прежнему в основе взаимодействия приложения с пользователем. Эту жестовую команду внедрили и другие сервисы: Instagram, LinkedIn, Medium, — и сегодня она в числе самых распространенных.

Twitter, Instagram, LinkedIn и Medium — лишь некоторые из приложений, использующих pull-to-refresh

Бывший сотрудник Google и специалист по этике дизайна Тристан Харрис проводит параллель между функцией pull-to-refresh и игровыми автоматами. В своей вирусной статье он утверждает: «Технический дизайнер должен увязать действия пользователя с вознаграждением. Вы тянете за рычаг и тут же получаете либо ценный приз, либо ничего».

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

Создавайте дизайн осознанно

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

Сообщение “You’re All Caught Up” («Ты в курсе всех новостей») в Instagram — умный способ освободить пользователей от лишнего контента

В Instagram функция You’re All Caught Up помогает юзерам ограничить поток материалов для переваривания.

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

Социальные стимулы

Социальное поощрение в приложениях обнаружить проще всего, потому что кнопки «Нравится», «Комментировать» и «Поделиться» есть практически везде. Сердечко в Instagram, аплодисменты в Medium или просмотры в Dribbble — типичные элементы системы социального поощрения.

В Facebook под каждым постом удобно расположены кнопки «Нравится», «Комментировать», «Поделиться»

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

Почему не все «Нравится»?

В 2007 году программист Facebook Джастин Розенштайн (Justin Rosenstein) возглавлял команду, которая внедряла кнопку Like. Он рассказал газете Guardian, что нововведение «оказалось очень успешным: активность пользователей подскочила, когда они к своему удовольствию поняли, как легко теперь выражать и получать социальное одобрение».

На современных площадках интернет-общения кнопка «Нравится» — самый узнаваемый атрибут

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

Обоюдоострый меч

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

Геймификация

Геймификация — это использование системы баллов и достижений, а также других игровых элементов в неигровых приложениях. В последние годы эту практику активно внедряют образовательные сервисы. Все крупные игроки рынка: компании Treehouse, DuoLingo и Codeacademy — в той или иной степени геймифицируют свои обучающие приложения.

Так выглядят достижения, которые пользователь может открывать по мере выполнения заданий курса Treehouse

Геосервис Swarm от Foursquare и соцсеть для спортсменов Strava прочно внедрили элементы геймификации в основной функционал продукта. Swarm предлагает бейджи для регистрации на часто посещаемых локациях, а Strava присваивает юзерам «достижения» за улучшение личных спортивных результатов.

Измерение пройденного пути

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

Strava вознаграждает бегунов и велосипедистов за достижение более высоких показателей из списка предложенных

Не всегда это работает

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

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

Монетизация

Монетизация предполагает, что пользователь получает деньги или материальные призы за выполнение определенных действий в приложении. Игра HQ Trivia — в числе свежих популярных приложений с монетизируемым вознаграждением. Игроки состязаются в онлайн-викторине за денежные и другие материальные призы. Некоторые трансляции собирали более полутора миллионов игроков одновременно! А Time Magazine назвал HQ Trivia лучшим приложением 2017 года.

В HQ Trivia даже список лучших игроков ранжирован по суммам их выигрышей

Соцсети используют финансовое вознаграждение, чтобы мотивировать авторов создавать премиум-контент. YouTube платит пользователям за разрешение вставлять рекламу в их видео, а у Medium есть партнерская программа заработка на статьях.

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

Стремитесь к прозрачности

И HQ Trivia, и YouTube не раз подвергались критике за неудобную или несправедливую, по мнению пользователей, систему выплат. Нашлись люди, которые обвинили HQ в махинациях за правило, по которому вывести деньги можно, только если вы в 90-дневный срок выиграли не менее 20 $ (в январе 2018 года ограничение на сумму выводимого выигрыша сняли). А когда в 2017 году YouTube изменил свою рекламную политику в пользу рекламодателей, создатели контента прозвали ее Adpocalypse [от англ. Ad — «реклама» и Apocalypse — «конец света»], потому что часть видео лишилась монетизации без внятной причины.

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

Заключение

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

История иконок

Интерактив создала польская компания Futuramo, которая разрабатывает приложения для ускорения бизнес-процессов. На материале пользовательских интерфейсов ОС спецы из Futuramo рассказывают, как менялся вид иконок на протяжении тридцати лет. “A picture says more than a thousand words” — такими словами встречает пользователя первый экран. Эта мысль, как пишут разработчики в интерактиве, пришла в головы создателям компьютеров спустя три десятилетия.

Информация представлена как иллюстрированный таймлайн, который рассказывает о развитии иконок с 1981 по 2013 год.

Интерактив начинается с «бабушек и дедушек» современных иконок — черно-белых плоских рисунков в операционной системе Lisa OS 1.0

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

В интерактиве удобная навигация — пользователь легко переместится от фотореалистичных иконок 90-х к современному минимализму и флэт-дизайну

The Future According to Elon Musk — спецпроект Bloomberg

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

Журналисты попытались собрать и структурировать все обещания Илона Маска. В 2017 году журнал Entrepreneur опубликовал красочную инфографику с основными планами предпринимателя. Bloomberg пошел дальше и специально для скептиков сделал масштабный спецпроект — The future according to Elon Musk. В нем собрали информацию обо всех прошлых и будущих проектах Маска — и его мечтах, как указано на главной странице.

Пока мы знакомимся с навигацией сайта, голова Илона Маска предсказывает очередной технологический прорыв

Инфографику авторы Bloomberg разделили по проектам Маска — Tesla, SpaceX, Boring company, Neuralink. В проектах обещаниям Илона присваивают статус завершенных и просроченных. Несбывшимся разработчики дают еще один шанс, но отслеживают, насколько компания опоздала с реализацией.

Каждое обещание оформлено детально, с датами начала проекта, потенциального завершения и цитатами самого Илона

Проект до сих пор живет и обновляется — разработчики собирают последние заявления Маска и ведут календарь проектов.

Интерактив «Эволюция человека»

Масштабная дипломная работа выпускников «Бюро Горбунова». Суть проекта ребята объясняют в паре предложений: «Позвоночные животные существуют пятьсот миллионов лет, млекопитающие — двести, обезьяны — шестьдесят. Человеческая ветвь выделилась 7–10 млн лет назад, в ней два десятка видов. Это рассказ о них». Сайт объединяет таймлайн, небольшие пояснения, эволюционные ответвления, карты древней Земли и 3D-реконструкции пралюдей.

Нажимая кнопки вперед-назад, пользователь перемещается по истории появления человека

Информацию по каждому витку таймлайна разработчики подкрепили ссылками на авторитетные источники и исследования с указаниями авторов. Интерактив заинтересует и экспертов, и новичков — визуализация привлекает внимание, а текстовые пояснения помогают разобраться в теме. Артем Горбунов, создатель «Бюро», уверен, что научный продукт должен заинтересовывать, и интерактив с этой задачей справляется.

What is data science? — статья Thinkful

Исследование разработчиков из Thinkful отвечает на вопрос на первом экране сайта: “WTF is data science?” Актуальность статьи авторы раскрывают в лиде: наука о данных все больше используется на предприятиях и в повседневной жизни, но что именно она изучает и где полезна?

Идеальный сценарий: статья о важности данных начинается с визуализированных данных

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

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

Разработчики сделали все, чтобы статья про науку о данных была понятна читателям с разной подготовкой в теме. В Thinkful повествование строят на принципах дидактики, объясняют понятия с разных сторон и на разных уровнях сложности, работают с фактами, а не абстракциями, захватывают внимание читателя реальными данными. Во вступлении к рассказу о Big data авторы утверждают, что появление цифровой информации — чуть ли не единственное нововведение в истории человечества, которое делает другую информацию недействительной. Пока читатель не успел возмутиться, авторы напирают на его чувственный опыт: попросите современных ученых поработать с тем, что не оцифровано. Вместо цифровой базы данных положите перед ними толстенные научные книги, и ученые убегут и никогда не вернутся.

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

Как объяснить принцип машинного обучения на котиках по версии Thinkful

Судя по заключительной части статьи с заголовком Your turn, ее цель — заинтересовать посетителей сайта темой данных. Заинтересовать настолько, чтобы мир получил новый поток дата-сайентистов, в том числе с курсов Thinkful. Так или иначе, задачу вдохновить статья выполняет.

This Oxford

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

От химии до медицины: сайт ведет пользователя по истории открытий, от закона Бойля до пенициллина

Чтобы убедить читателя в том, что на Роберте Бойле и Дороти Ходжкин великие открытия не закончились, Оксфордский университет инноваций предлагает почитать о планах на будущее. Миссия Nekton по изучению Мирового океана, технология анализа ДНК в реальном времени, изучение искусственного интеллекта, даже выведение комаров, которые сами ограничивают число особей в популяции, — исследования, которые доказывают, что Оксфорд все еще на передовой открытий.

Relativity of time

Еще один интерактив от Futuramo, на этот раз посвященный относительности времени. На главной странице проекта — вопрос, который сразу же поясняет полезное действие интерактива: «Вы когда-нибудь задумывались, что люди могут сделать за минуту? А за час? Менялись ли эти занятия с течением времени?»

Далее открывается страница анимированного таймлайна. Хронология, которая помогает пользователю размышлять над относительностью времени, поделена на отрезки в минуту, час, 24 часа, неделю, месяц, год. Ниже — линейка эпох от 10 000 лет до н.э. до 2017 года.

Что успевал сделать человек 12 000 лет назад

Переключаясь между «поинтами» на двух временных линиях, вы узнаете, что успевали сделать люди много веков назад. Интересно сравнить эти занятия с современными: на рубеже первого века римляне преодолевали тридцать миль на колеснице за час, а в начале нулевых за это же время человек пролетал шестьсот миль на самолете. Больше десяти тысяч лет назад за сутки люди успевали разделать мамонта — в современном мире за это время печатают 6000 книг. Как верно отмечают разработчики сайта, сегодня нам  нужно больше времени, чтобы выбрать книгу, чем чтобы ее напечатать.

Millennials are screwed — статья The Huffington Post

Статья-спецпроект, написанная миллениалом для миллениалов. Автор Майкл Гоббс исследует проблемы поколения американцев от 20 до 35 лет: бедность, безработицу, труднодоступность жилья. О жизненных сложностях миллениалов написано много, и в основном журналисты делают упор на стереотипные недостатки этого поколения — лень, неприспособленность к жизни, финансовую безграмотность, инфантильность. Гоббс исследует проблему глубже — анализирует экономику, ситуацию на рабочих местах и в стране в целом — и докапывается до предпосылок и истинных причин неудач миллениалов.

Автор подкрепляет текст слайдером с броской статистикой: каждый пятый миллениал в Америке живет в бедности

Чтобы из исследования не получилась «очередная статья», текст разбивается инфографикой, иллюстрациями, игровыми интерактивами. Все фактические данные — цифры, таблицы, статистика — дизайнерски проработаны. Чтобы вовлечь читателя в повествование, авторы создали Бэки — 8-битную девушку-миллениала из Бруклина.

Жизнь миллениала в одном интерактиве

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

Авторы статьи решили, что важную фразу мало оформить классической выноской

В конце исследования — выводы, как и полагается серьезной статье. Автор-миллениал объединяет себя и читателей местоимениями “our” и “us”, вызывая эмпатию. В заключение Гоббс  предлагает решение — отбросить привычку чувствовать себя беспомощными и взять ответственность за собственное будущее, чтобы фраза “Millennials are screwed” осталась только в заголовке статьи.

Таймлайн: вся история и культура за 12 веков

Таймлайн — часть первого суперкурса онлайн-университета Arzamas «История русской культуры». Этим курсом открывается проект, цель которого — распространять знание в принципиально новой форме, давать полноценное образование, а не просвещать. Таймлайн собирает информацию по истории Руси и Запада и помогает студентам получить системные знания, изучая объемные модули суперкурса.

Наблюдательные пользователи узнают еще больше: пролистывая таймлайн, они сразу увидят разницу между интенсивностью событий на Руси и на Западе в определенные моменты истории

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

Заинтересовались образовательными интерактивами? Вот еще несколько:

• Snowfall — большое расследование New York Times о снежной лавине в Австралии;

• A perfect terrorist — интерактивное видео Frontline с рассказом Тома Дженнингса об американском террористе Дэвиде Коулмэне;

• Перевал Дятлова — первый русскоязычный мультимедиа-фичер с исследованием происшествия.

Нужно ли дизайнеру уметь рисовать — вопрос, который вызывает такие же «баттлы», как обсуждение преимуществ iOS и Android. При этом он беспокоит практически каждого, кто хочет стать дизайнером — ведь нет мотивации учиться профессии, если без навыков рисунка не стать крутым спецом. Но и отказываться от мечты из-за предрассудка не хочется. Попробуем разобраться с этим вопросом раз и навсегда.

Зависит от того, о каком дизайнере речь

Нет «дизайнера в вакууме»: есть UX-дизайнер, ландшафтный дизайнер, дизайнер персонажей, модельер. Это самостоятельные профессии, для которых важны совершенно разные навыки. Для некоторых направлений дизайна уметь рисовать от руки — важно, для других — нет.

Юрий Панасюк, ведущий проектировщик интерфейсов в Kupibilet.ru, поддерживает этот тезис: «Дизайн — это всегда решение задач, которые могут быть разными: разработка интерфейса, визуализация данных и процессов, привлечение внимания, создание и поддержание имиджа. Дизайнер, который совместно с веб-аналитиками работает над увеличением конверсии сайта или мобильных приложений, совсем не обязан уметь рисовать. Перед дизайнером персонажей или иллюстратором стоят другие задачи, и тут эти навыки обязательны». Юрий считает, что вне зависимости от специализации важны только образное мышление и развитая эмпатия.

Кому точно важно уметь рисовать, так это дизайнерам одежды. Профессор моды в Университете Монтеррея Игорь Стар, у которого 15 лет опыта в дизайне одежды, объясняет: «Мода построена на нюансах: пропорции форм и детали кроя, отделка, декор, — все эти компоненты особенно важны на объемной фигуре человека, в движении и с разных ракурсов: фас, профиль, спина. Поэтому лучший способ для дизайнера и стилиста — делать регулярные наброски фигуры человека в разных позах и нарядах. Так приходит автоматизм: учишься определять форму одежды, распознавать марки и выявлять подделки. Человек, который этого не умеет и выдает себя за дизайнера или стилиста, легко может “лажать”, принимая фейк за оригинал, игнорируя диспропорции шрифтов в логотипе марки, некачественные строчки, принты и фурнитуру».

Эскизы Saint Laurent 1970-х годов, которые помогают «чувствовать» одежду

Обязательно ли графическому дизайнеру уметь рисовать

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

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

Дизайн — это не рисование

Вот неполный список того, что действительно важно знать, по мнению Калины Ивановой, продуктового дизайнера из Болгарии:

• теория цвета;
• визуальная иерархия;
• визуальный ритм;
• перспектива;
• история искусства.

Почему многие говорят, что надо уметь рисовать

Даже Сергей Попков, дизайнер из AIC — лидера среди веб-студий премиум-сегмента в «Рейтинге Рунета» — с задором говорит: «Я не умею рисовать». Если и без этого можно достичь успеха, то почему многие продолжают настаивать, что навык рисунка очень важен?

Причины такие:

1. Возможность выполнять заказы «под ключ». Бывает, что клиенту надо изобразить что-то эдакое, чего нельзя сделать только средствами графического редактора. Умея рисовать, вы сможете сделать это самостоятельно.
2. Ведущий иллюстратор в BANG! BANG! Илья Митрошин считает, что умение рисовать помогает быстро набросать разные идеи, чтобы потом отсеять ерунду от стоящего. Он сравнивает это с техникой фрирайтинга, когда автор пишет все, что приходит на ум, а потом выбирает действительно крутые мысли.
3. Чем лучше рисуешь, тем доходчивее и быстрее можешь показать идею на бумаге клиенту, коллеге или арт-директору.

Как быстро научиться рисовать

Это просто. Попробуйте рисовать каждый день по 20 минут в течение месяца — все, что попадается на глаза. К практике добавьте теорию — читайте книги и статьи о рисовании, смотрите видео на YouTube и крутые иллюстрации. Если научиться надо срочно, запишитесь на курсы или возьмите уроки у специалиста.

Главное — без крайностей. Просмотрев 10 видеокурсов по рисунку, вы не станете художником. Рисуя, но не понимая теории, вы рискуете допустить дилетантские ошибки, которых можно избежать, если понимать принципы рисунка. Занимаясь с преподавателем, нельзя «забивать» на самостоятельную практику.

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

Рисунки до и после занятий по рисованию с сайта Art-matita

Главное — понимать, что умение рисовать — не дар свыше. Это просто навык, который можно развить — как ездить на велосипеде или складывать в уме четырехзначные числа.

А вы умеете рисовать? Хотите научиться? Или вы дизайнер, который уверен, что рисование — совершенно бесполезный навык?
 

Итан Маркотт «Отзывчивый веб-дизайн»

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

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

Аарон Уолтер «Эмоциональный веб-дизайн»

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

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

Майк Монтейро «Дизайн — это работа»

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

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

Скотт Макклауд «Понимание комикса»

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

Майкл Микалко «Рисовый штурм»

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

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

Уитни Кесенбери, Кевин Брокс «Сторителлинг в проектировании интерфейсов»

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

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

Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»

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

Джеф Раскин — создатель проекта Apple Macintosh — знает, о чем говорит, когда рассказывает об эффективном подходе к дизайну.

Алан Купер «Об интерфейсе»

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

Алан Купер «Психбольница в руках пациентов»

Нас окружает безумный мир современных интерфейсов, и отец Visual Basic, дизайнер и программист Алан Купер расскажет, почему все так плохо. Останется чуть-чуть подумать, чтобы понять, как сделать хорошо.

Голден Кришна «Хороший интерфейс — невидимый интерфейс»

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

Виктор Брет — Magic Ink

Бывший сотрудник Apple в эссе рассказывает, что дизайн интерфейсов имеет три главных функции: обучение, общение, самовыражение. А интерактивность — зло.

Пол Рэнд «Дизайн: форма и хаос»

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

Эрик Шпикерманн «О шрифте»

Типографика может иметь решающее значение — и об этом расскажет президент Международного общества дизайнеров типографики Эрик Шпикерман. Он покажет, как гарнитуры помогают или мешают взаимодействию с читателем, и совершит краткий экскурс в историю шрифтов.

Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне»

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

 Иоханнес Иттен «Искусство цвета»

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

Тим Браун «Дизайн-мышление в бизнесе»

СЕО компании IDEO рассказывает, как при создании дизайна ориентироваться на клиента и почему это необходимо. Дизайн-мышление поможет получить максимальный эффект от результата.

Стив Круг «Как сделать сайт удобным»

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

Тим Кедлек «Адаптивный дизайн. Делаем сайты для любых устройств»

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

Есть чем дополнить нашу подборку? Ждем в комментариях ваше мнение про книги из категории must read для веб-дизайнера.

Это перевод статьи «Master Hot Design Trends (with Photoshop Tutorials)». Автор оригинала — Миклош Филипс (Miklos Philips) — UX-дизайнер с опытом более 16 лет.

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

Трендовый эффект «глитч» на рекламе в метро Нью-Йорка

Как и в мире моды, в дизайне тренды — это переосмысленный опыт прошлых десятилетий: русский конструктивизм, Баухаус, шелкография, стиль 1970-х. Почти целый век художники используют простую геометрию, и она работает так же хорошо, как и 100 лет назад.

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

Стоит ли следовать трендам

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

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

Прием двойной экспозиции украсил вступительную заставку сериала «True Detective» от HBO.

Ниже мы рассмотрим несколько модных дизайнерских приемов и поделимся уроками по созданию эффектов в Photoshop.

Горячий тренд №1: двойная экспозиция

Этот прием позволяет создавать эффектные визуальные сочетания. Название пришло из пленочной фотографии, где можно сделать два или три снимка без прокрутки пленки — и кадры накладываются друг на друга. Эффект часто используют на киноафишах и в рекламных роликах на ТВ. Выше вы видели кадр из заставки сериала “True Detective”: сочетание двойной экспозиции с анимацией усиливает впечатление.

Главное условие успеха здесь — удачный подбор изображений. Когда вы берете за основу картинку с высокой контрастностью, следующий слой лучше разместить поверх самых темных ее участков. Часто портрет смешивают с более детализированной картинкой, вроде городского пейзажа.

А вот несколько хороших уроков, как сделать подобное в Photoshop:

Двойная экспозиция. Урок #1

Двойная экспозиция. Урок #2

Двойная экспозиция. Урок #3

Эффекты «глитч», «ошибка печати» и «визуальные помехи»

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

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

То, что  дизайнеры называют глитчем, еще может встречаться как VHS, RGB-сдвиг, искажение при сканировании, визуальные помехи и «ошибка печати». Дизайнеры-новаторы иногда совмещают несколько таких эффектов, чтобы получить оригинальный результат.

На постере к сериалу «Мистер Робот» несколько разновидностей глитч-эффекта подчеркивают контркультурный антураж.

Цветовой сдвиг + «ошибка печати» + цифровые помехи.

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

Добиться подобных результатов можно разными способами — осмотритесь на YouTube и выберите, что вам понравится. Есть даже готовые Photoshop Actions, которые можно купить, чтоб накладывать глитч в один клик.  

Парочка крутых Photoshop-уроков по этому тренду:

Глитч. Урок #1

Глитч. Урок  #2

Вы даже можете создавать glitch-эффект средствами CSS. Вот примеры слайдшоу и лендинга.

Двухтоновые эффекты

Прием «дуплекс» (duotone) давно в моде и не устаревает. Сотни лет назад с помощью сангины — красного мелового карандаша — однотонные рисунки создавал Леонардо да Винчи. Манера разбивать изображение на простые тона укоренилась, и современная двухтональная техника развивает идеи мастеров прошлого.

Рисунки сангиной, созданные да Винчи и мадемуазель де Мондран (de Mondran), а также современное фото в двухтоновой технике.

Дуплекс сегодня используют всюду: от постеров к голливудским блокбастерам до рекламы Apple и Spotify. Смысл — выделиться, выглядеть иначе. И здесь на помощь приходят Photoshop Actions и мобильные приложения.

Несколько хороших уроков Photoshop, из которых вы узнаете, как получить этот модный эффект:

Дуплекс. Урок Photoshop #1

Дуплекс. Урок Photoshop #2

Дуплекс. Урок Photoshop #3

Разделение RGB-каналов, цветовые каналы, двухцветная двойная экспозиция

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

Вот несколько крутых уроков по работе с цветовыми эффектами в Photoshop и Affinity Photo. Не обращайте внимания, как эти приемы там называют — каждый волен именовать их по-своему.

Двухцветная двойная экспозиция в Photoshop

Двухцветная двойная экспозиция в Affinity Photo

Яркие, кричащие цвета и флуоресцентный дуплекс

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

Флуоресцентный дуплекс в дизайне сайта компании New Deal Design.

Тот же веб-дизайнерский тренд использовали при создании календаря для AfriSam 2018 Corporate Stationery.

По моде — в ярких насыщенных цветах — оформлен и сайт дизайнерского агентства ELJE Group.

Сайт Hackernoon использует сочные флуоресцентные тона, чтобы стать заметнее.

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

Маски, вырезки, абстракционизм, кубизм

Бесконечно возвращающийся тренд, который прочно закрепился в графическом дизайне. Это может быть сочетание жирного шрифта, плоских цветных поверхностей, монтажа и маскирования. Этой технике почти 100 лет, как и выполненным ее средствами советским пропагандистским плакатам 1920-х годов. (На самом деле нам показывают афиши к раннесоветскому кино  — прим. пер.)

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

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

Иногда современные эффекты визуального наслоения напоминают коллажи Матисса.

Интересный эффект фотомаски можно получить за счет игры со шрифтами и простыми геометрическими фигурами.

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

Тем не менее есть пара классных уроков Photoshop, которые на примере показывают, как создать подобные эффекты:

Как создать портрет из текста в Photoshop

Как создать букву-портрет в Photoshop

А вот еще один интересный урок — как с помощью слой-масок в Photoshop получить такой результат:

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

Анализируйте, будьте смелыми и прокладывайте свою колею

Сегодня творческая смелость — не выбор, а обязательное качество дизайнера. Ожидания публики растут, а ее внимание становится все труднее удерживать. Не стесняйтесь следовать трендам дизайна — берите и перерабатывайте их во что-то свое! Переверните привычное положение дел, исследуйте свои фантазии и совершите дерзкий творческий скачок!