Нужно ли дизайнеру уметь рисовать — вопрос, который вызывает такие же «баттлы», как обсуждение преимуществ iOS и Android. При этом он беспокоит практически каждого, кто хочет стать дизайнером — ведь нет мотивации учиться профессии, если без навыков рисунка не стать крутым спецом. Но и отказываться от мечты из-за предрассудка не хочется. Попробуем разобраться с этим вопросом раз и навсегда.
Зависит от того, о каком дизайнере речь
Нет «дизайнера в вакууме»: есть UX-дизайнер, ландшафтный дизайнер, дизайнер персонажей, модельер. Это самостоятельные профессии, для которых важны совершенно разные навыки. Для некоторых направлений дизайна уметь рисовать от руки — важно, для других — нет.
Юрий Панасюк, ведущий проектировщик интерфейсов в Kupibilet.ru, поддерживает этот тезис: «Дизайн — это всегда решение задач, которые могут быть разными: разработка интерфейса, визуализация данных и процессов, привлечение внимания, создание и поддержание имиджа. Дизайнер, который совместно с веб-аналитиками работает над увеличением конверсии сайта или мобильных приложений, совсем не обязан уметь рисовать. Перед дизайнером персонажей или иллюстратором стоят другие задачи, и тут эти навыки обязательны». Юрий считает, что вне зависимости от специализации важны только образное мышление и развитая эмпатия.
Кому точно важно уметь рисовать, так это дизайнерам одежды. Профессор моды в Университете Монтеррея Игорь Стар, у которого 15 лет опыта в дизайне одежды, объясняет: «Мода построена на нюансах: пропорции форм и детали кроя, отделка, декор, — все эти компоненты особенно важны на объемной фигуре человека, в движении и с разных ракурсов: фас, профиль, спина. Поэтому лучший способ для дизайнера и стилиста — делать регулярные наброски фигуры человека в разных позах и нарядах. Так приходит автоматизм: учишься определять форму одежды, распознавать марки и выявлять подделки. Человек, который этого не умеет и выдает себя за дизайнера или стилиста, легко может “лажать”, принимая фейк за оригинал, игнорируя диспропорции шрифтов в логотипе марки, некачественные строчки, принты и фурнитуру».
Эскизы Saint Laurent 1970-х годов, которые помогают «чувствовать» одежду
Обязательно ли графическому дизайнеру уметь рисовать
Зависит от того, что вкладывать в словосочетание «уметь рисовать». Писать реалистичные пейзажи и портреты с натуры — совсем не обязательно. Набросать на бумаге идею так, чтобы донести ее другому — да, необходимо. Развить этот навык может каждый — для этого не нужно быть одаренным художником.
Поэтому мастерски рисовать от руки не требуется. Зачем, если графические редакторы позволяют делать это быстрее и лучше, а чтобы наскоро набросать идею, достаточно минимальных навыков?
Даже Сергей Попков, дизайнер из AIC — лидера среди веб-студий премиум-сегмента в «Рейтинге Рунета» — с задором говорит: «Я не умею рисовать». Если и без этого можно достичь успеха, то почему многие продолжают настаивать, что навык рисунка очень важен?
Причины такие:
Возможность выполнять заказы «под ключ». Бывает, что клиенту надо изобразить что-то эдакое, чего нельзя сделать только средствами графического редактора. Умея рисовать, вы сможете сделать это самостоятельно.
Ведущий иллюстратор в BANG! BANG! Илья Митрошин считает, что умение рисовать помогает быстро набросать разные идеи, чтобы потом отсеять ерунду от стоящего. Он сравнивает это с техникой фрирайтинга, когда автор пишет все, что приходит на ум, а потом выбирает действительно крутые мысли.
Чем лучше рисуешь, тем доходчивее и быстрее можешь показать идею на бумаге клиенту, коллеге или арт-директору.
Как быстро научиться рисовать
Это просто. Попробуйте рисовать каждый день по 20 минут в течение месяца — все, что попадается на глаза. К практике добавьте теорию — читайте книги и статьи о рисовании, смотрите видео на YouTube и крутые иллюстрации. Если научиться надо срочно, запишитесь на курсы или возьмите уроки у специалиста.
Главное — без крайностей. Просмотрев 10 видеокурсов по рисунку, вы не станете художником. Рисуя, но не понимая теории, вы рискуете допустить дилетантские ошибки, которых можно избежать, если понимать принципы рисунка. Занимаясь с преподавателем, нельзя «забивать» на самостоятельную практику.
Поначалу при взгляде на свои «детские» рисунки у вас может появиться желание бросить занятия. Не поддавайтесь слабости, здесь главное — регулярность. Сами увидите прогресс, когда сравните нарисованное в первые дни с тем, что получается к концу месяца. Кроме того, вы станете намного лучше чувствовать пространство, запоминать детали и прокачаете воображение.
Рисунки до и после занятий по рисованию с сайта Art-matita
Главное — понимать, что умение рисовать — не дар свыше. Это просто навык, который можно развить — как ездить на велосипеде или складывать в уме четырехзначные числа.
А вы умеете рисовать? Хотите научиться? Или вы дизайнер, который уверен, что рисование — совершенно бесполезный навык?
Мы различаем цвета из-за врожденной способности сетчатки глаза дифференцировать частоты световых волн. Определенные цвета и оттенки вызывают у людей разные ощущения. В этой статье я хочу кратко рассказать о цвете: его восприятии, способах подбирать сочетания и инструментах для работы с ним, которые помогут улучшить ваши проекты.
Цвета задают определенное настроение и помогают добиваться разных целей:
Красный обычно ассоциируется с любовью, энергией, активностью и силой. В рекламе автомобилей всегда используют его оттенки, как и в роликах о том, что связано с отношениями.
Желтый выбирают, чтобы передать радость, внимание, ассоциировать продукт с интеллектом. Это невероятно привлекательный цвет, но не лучший для фона приложения или основного интерфейса — он может утомлять. Тем не менее желтый — хороший вариант для иконок и иллюстраций.
Зеленый ассоциируют со свежестью, безопасностью и развитием. Поэтому вы часто видите, как компании, которые связаны с природой и здоровым питанием, используют зеленый в фирменном стиле.
Синий — стабильность, доверие, спокойствие. Неудивительно, что фейсбук и твиттер синего цвета.
Чтобы увидеть эту теорию в действии, попробуйте проанализировать рекламные объявления. Вы убедитесь, что реклама — продуманный инструмент убеждения и манипулирования. Попробуйте понять, как с помощью дизайна ее делают привлекательной и какие эмоции пытаются вызвать.
Выбор цветовой палитры в проекте — это не только о продвижении и привлечении внимания. Это о том, как продукт будет продаваться, к каким инстинктам и желаниям людей будет обращаться. Поэтому при разработке приложения или сайта сперва подумайте, какие эмоции хотите вызывать и какие идеи доносите пользователю. В соответствии с этим выберите цветовую палитру.
Надеюсь, теперь вы не будете использовать один цвет во всем приложении. Вам понадобятся гармоничные палитры. Чтобы их подобрать, художники и дизайнеры используют цветовой круг:
Вот несколько способов использовать цветовую теорию для проектов:
Аналоговые цвета (Analogous). Это соседние цвета на круге. Сочетайте их, чтобы создать простой и гармоничный дизайн:
Комплементарные цвета (Complementary). Для этой комбинации выберите два цвета, которые расположены напротив друг друга, как красный и зеленый:
Комплементарные цвета в дизайне чересчур привлекают внимание и не слишком подходят для основного интерфейса и бэкграунда в приложении. Но зато вы можете использовать их для иконок и иллюстраций.
Расщепленные цвета (Split) — выберите один цвет, а затем еще два, которые расположены напротив основного:
Такое сочетание не только привлекает внимание, но и приятно смотрится.
Триады (Triadic). Выберите цвет и нарисуйте в круге равносторонний треугольник. Получится палитра, которая придаст дизайну сбалансированности:
Триаду часто использовали в конце прошлого века, поэтому такое сочетание выглядит устаревшим. У многих сетей быстрого питания из 90-х логотип оформлен в триадной цветовой гамме.
Монохроматические, или однотонные цвета (Monochromatic). Монохромный дизайн красиво смотрится на экранах смартфонов. Чтобы создавать монохроматические тона, просто выберите один цвет и сочетайте его с оттенками белого или черного. Экспериментируйте с пропорциями, чтобы получить нужный контраст. Такие цветовые палитры отлично работают в современном диджитал-дизайне.
Мы рассмотрели немного теории о том, как сочетать цвета, чтобы они радовали глаз и работали на определенные ощущения.
Перейдем к практике. В интернете есть множество инструментов для поиска цветовых сочетаний или создания своих. Вот те, что я рекомендую использовать:
Color Hunt. Сервис, куда профессиональные дизайнеры выкладывают любимые цветовые палитры. Они разделены на категории «Новые», «Тренды», «Популярные», «Рандомные» — среди множества вариантов вы подберете что-то для своего проекта.
Flat UI Colors. На сайте — 20 цветовых палитр, созданных для эффективной работы на iOS. Разработчики Android используют палитры с сайта Material Palette.
ColorZilla. Крутое расширение для браузера Chrome, которое определяет код любого цвета на сайте в формате HEX.
Пользуясь этими инструментами, понимая цветовую теорию, смешивая и сравнивая цвета, вы получите цветовую палитру, которая подходит вашему проекту — приложению или сайту. Это поможет сделать продукт более привлекательным и передать определенную идею или настроение пользователю.
Понравилась статья? Посмотрите другие инструменты для работы с цветом:
Pictaculous — сайт, который анализирует и определяет цвета PNG, JPG и GIF
Все говорят о высоких зарплатах веб-дизайнеров — и мы тоже, потому что это чистая правда. По данным Superjob, средний доход специалиста этого профиля составляет 80 тысяч рублей в месяц. Но никто не предупреждает, что на покупке сервисов для работы можно разориться. Полный пакет Adobe Illustrator с Adobe Stock, например, обойдется в пять тысяч рублей в месяц.
Поговорим о бесплатных или бюджетных заменах дорогостоящим инструментам.
Сервис для создания прототипов подходит для новичков, далеких от программирования. Но и более опытным пользователям он понравится. Создавайте слои, добавляйте анимацию и элементы интерактива, просматривайте прототип для мобильных устройств с экрана смартфона. Есть версии для iOS и Android.
Полнофункциональный векторный редактор можно настроить под себя. Он содержит множество полезных инструментов и подходит для работы с интерфейсами, иконками и другими элементами. Результаты можно сохранять в облако сервиса.
Помогает создавать макеты мобильных приложений и веб-страниц. Pencil Project — бесплатный сервис с открытым исходным кодом. В него встроены коллекции популярных элементов: можно остановиться на классических решениях или понять, чего не хватает в мире дизайна, и создать нечто новое.
Платформа позволяет работать индивидуально или быстро делиться прототипами и обсуждать их в реальном времени. Создавайте макеты в сервисе или экспортируйте их из Sketch и Photoshop. На прототип в виде веб-страницы или мобильного приложения можно в любой момент посмотреть глазами пользователя.
Отличная замена Adobe Illustrator, которая не стоит ни копейки и поддерживает файлы своего дорогостоящего собрата. В редакторе можно сделать буквально все: от простенького веб-дизайна до шедевров графики.
Вряд ли вы рассматриваете в качестве инструмента для веб-дизайна Microsoft PowerPoint, но все меняет плагин PowerMockup. Дополнительная панель превращает программу для создания презентаций в платформу для прототипирования. Тестовый период плагина бесплатный.
Сервис создан для прототипирования мобильных приложений в онлайн-режиме и содержит набор элементов, подходящих для iOS, Android и Windows 8. Бесплатно можно разработать десять страниц для одного проекта. Хотите больше — придется доплатить.
Сервис не подойдет для старательного перфекциониста, потому что в нем можно лишь быстро создать набросок макета. Просто перетаскивайте элементы на нужные места. Черновиками легко делиться для коллективного обсуждения.
Создавайте интерактивные прототипы мобильных приложений и проверяйте, как они откликаются на действия пользователя. Тестировать результаты работы можно на компьютере или реальном мобильном устройстве.
Сервис для быстрой работы над прототипами. Можно открыть совместный доступ для нескольких человек, чтобы редактировать и комментировать проект «в прямом эфире».
Простой интерфейс, масса вариантов кнопок, контейнеров, полей, шаблоны для приложений под iPhone и iPad — все это собрано в сервисе для прототипирования на HTML5.
Загляните на этот сайт, если ищете интересный шрифт. За право пользоваться находками придется заплатить, но вы сами решаете, сколько — они доступны за донаты. Так что начинающие дизайнеры со скромными бюджетами могут получить шрифты почти бесплатно.
Сервис для тех, кто любит обратную связь и спешит протестировать макет на потенциальных пользователях. Загрузите на платформу проект, получите ссылку и расшарьте ее в соцсетях. Каждый, кому есть что сказать, сможет прокомментировать макет, просто кликнув по нему.
Сервис для любителей учиться на чужих ошибках и достижениях. Определите с его помощью, какие шрифты использовались на сайтах, которые вы считаете крутыми или, наоборот, ужасными.
Сервис поможет найти свежие идеи дизайнерам, зашедшим в тупик. Здесь множество решений для мобильных устройств: можно листать все подряд или выбрать категорию.
Освоившие английский смогут узнать о распространенных заблуждениях, связанных с проектированием пользовательских интерфейсов. Создатели не голословны: они старательно объясняют каждый миф и показывают на примерах, «что такое хорошо и что такое плохо».
Для тех, кому не хватает теории, создатели сайта собрали множество идей и советов. Их уже проверили на пользователях, так что можно брать на вооружение.
Мы попросили трех дизайнеров рассказать, что в их понимании представляет собой идеальное портфолио и какие работы в нем должны быть. Они поделились секретами и наработками, которые помогут новичкам.
Суровая правда в том, что обычно работодатель отсматривает десятки кандидатов, мельком пролистывая страницы портфолио, и обращает внимание только на три–четыре проекта:
на те, которые соответствуют предстоящим обязанностям, чтобы оценить уровень дизайнера;
на крупные и сложные, чтобы понять, как дизайнер думает;
на слабые, чтобы увидеть самооценку исполнителя. Если в портфолио лежат такие проекты, значит кандидат неадекватно оценивает качество своей работы.
В конце доходит очередь до сопроводительного письма и резюме.
Портфолио — это проект, задача которого — показать, что именно ваш опыт, умения и навыки подходят работодателю лучше других. Для этого есть три инструмента: контент — работы; оформление — само портфолио; пояснение — сопроводительное письмо.
Контент. Если работодатель говорит, что ему достаточно будет трех–четырех ваших работ, рекомендую на всякий случай предоставить ему пять–семь. Начинайте с самых крутых и сложных. Затем, если есть, показывайте проекты, созданные для известных брендов. Если не хватает интересных задач — выдумывайте и решайте. Показывайте только те умения и навыки, которые хотите использовать и развивать. И никогда не оставляйте в портфолио старые и слабые проекты.
Оформление. Портфолио должно быть наглядным. Избыточное оформление отвлекает внимание от самих работ. Это касается и мокапов. Они помогают экономить время, но использовать лучше только те, в которых можно рассмотреть проекты. Добавляйте описания задач. И указывайте, что именно сделали вы, если работа была командной.
Не важно, как именно вы оформляете портфолио — в виде собственного сайта, многостраничного файла в экранном размере, аккаунта Behance или чего-то еще. Главное, что в нем должно быть, — понятная структура и порядок. Не забывайте про типографику и грамотность.
Пояснение. Чтобы у потенциального работодателя после просмотра портфолио не остались сомнения, напишите сопроводительное письмо. В нем честно расскажите, почему интересуетесь вакансией и чем можете быть полезны проекту, команде. Если от кандидата требуют навыки, которым вы только учитесь, не бойтесь сказать об этом. Покажите желание развиваться. Арт-директор сумеет оценить ваши способности и понять, насколько вы подходите.
И самое главное: помните, что выигрывает портфолио, которое уже существует, а не которое вы только обдумываете. Как у любого проекта, у портфолио должен быть дедлайн. Назначьте его и сдайте вовремя.
Включайте в портфолио проекты-«завтра»
Серафима Болоткина, старший web-дизайнер международной IT- компании Movavi:
Портфолио — рабочий инструмент и главный ресурс, с помощью которого вы рассказываете о себе. Помимо того, что оно должно быть хорошо сверстано, грамотно написано, переведено на английский, оно должно иметь выгодную для вас структуру и наполнение. Поэтому необходимо провести анализ и выбрать 8–12 наиболее подходящих работ. Это оптимальное количество проектов, по которым можно понять, что вы умеете и каким образом выполняете задачи. Уделяйте внимание их подбору. Не нужно размещать работы, которые вас уже не характеризуют. Проекты должны быть актуальными, иначе заказчик не сможет понять ваш уровень.
Одна из задач портфолио — привлечь к себе как можно больше зрителей, чтобы люди захотели поделиться им и ставили в пример работы из него. Поэтому нужно старательно работать с каждым изображением, которое люди могут поместить себе на страницу или в сообщество.
Портфолио должно содержать четыре вида продуктов, чтобы отражать ваши навыки и умения:
Проекты-доверители — проекты, сделанные для известных компаний в соответствии с понятной задачей. Человек, оценивающий ваши компетенции, может сказать следующее: «Я хорошо знаю эту компанию и ее задачи. Как здорово, что дизайнер нашел такое решение». По подобным проектам заказчики понимают уровень масштабирования дизайн-способностей исполнителя. Проекты-доверители должны быть в самом начале портфолио. Это ваше заявление о способности делать работы высокого уровня.
Крутые проекты — то, что вы делаете высокопрофессионально. Это работы, которые у вас получаются разнообразно, интересно и, по собственному ощущению, — идеально.
Проекты технического мастерства — проекты, которые технически вы выполнили сами, без участия команды. Такие работы показывают реальный скилл и доказывают мастерство. Например, отрисованный самостоятельно шрифт, смонтированный ролик, анимация.
Проект-«завтра» — проект, который раздвигает ваш диапазон знания, мышления и опыта в дизайне. Это может быть публичный, хайповый или смешной проект, который будет интересен многим и которым захочется поделиться. Например, однажды дизайнер сделал айдентику планеты Земля: флаг, герб и прочее. Такие работы делают обычно для себя в свободное время. Они отлично показывают масштаб и возможности дизайнера.
Экономьте время заказчика — создавайте портфолио в формате showreel
У меня есть секрет — хотя, возможно, его знают многие дизайнеры, — как сделать портфолио, если у вас еще нет заказчиков и особого опыта. Самое худшее, что можно предположить, — показывать заказчикам студенческие работы или картины с художки. Это не годится совсем. Как и не годится пересылать отдельные картинки работ на почту клиенту в jpeg. Это дурной тон.
Мой секрет — создавать воображаемые проекты. Например, брать государственную компанию, социальный проект или мировой бренд и делать под них концепцию. Это может быть новый стиль воображаемого события, фирменный персонаж, редизайн или дизайн сайта, приложение с новой идеей, просто эффектный рекламный образ или серия. Главное, не забывайте указывать в комментариях, что это концепция, а не воплощенный проект.
Выкладывать портфолио лучше на своем сайте. Но если его нет, то на известные площадки типа re:vision. Тогда заказчикам будет удобно перейти по одной ссылке, чтобы посмотреть работы. На сайте-портфолио не должно быть однотипных работ. Лучше пусть будет 10–15 проектов, в которых фигурируют разные стили и подходы. К каждой работе делайте интересное и умное превью, которое побудит открыть ее.
Если говорить о презентации работ, а не просто о рекламном формате, то каждому клиенту лучше показывать сначала то, что близко его тематике. Это продемонстрирует вашу компетенцию именно в области бизнеса клиента.
Сейчас век быстрого поиска, поэтому я советую создавать видеоролики showreel — общее видео о всех работах. Как вариант, сделать длинную и короткую версию для инстаграма. Еще секрет из личного опыта: используйте видеопортфолио, мини-ролики, микроанимацию. Это тренд, который делает любой кейс живым и информативным. Советую изучать анимацию сразу, она не раз еще пригодится.
В одном кейсе обязательно нужно выделять графически и текстом разные профессиональные решения по проекту: инновационность и удобство элементов интерфейса, оригинальные графические решения с описанием, как это повлияло на результат рекламной компании или использование web-продукта.
Портфолио дизайнера — не набор ссылок на красивые работы. Это подборка интересных кейсов, которые решали конкретные задачи заказчиков. Каждый проект требует сопроводительного материала, который объяснит, почему используются именно эти шрифт, текст и дизайн, как интерфейс приводит к целевому действию или почему такое цветовое решение снизило показатель отказов. Уделяйте портфолио не меньше времени, чем основной работе. Тогда оно принесет новые масштабные проекты и нестандартные задачи.
В 2017 году разработчики говорили о нейросети, которая верстает код по картинке — и все думали, что верстальщики больше не нужны. Чуть раньше вышла программа TheGrid, которая генерирует модули сайта — и пошел слух, что дизайнеры останутся без работы.
Работа нейросетевых программ за несколько лет их существования не достигла совершенства, и часть задач все еще им не под силу. Пока рано говорить о том, что машины вытеснят IT-специалистов, но уже сейчас искусственный интеллект можно использовать, чтобы ускорять выполнение задач и делегировать их. Рассказываем об инструментах-помощниках на основе нейросетей, которые пригодятся дизайнеру и разработчику.
Шрифты
Fontmap — интерактивная карта шрифтов, созданная ИИ. Разработчик сайта Кевин Хо вдохновился исследователем из Стенфорда, который с помощью нейросети организовал тысячи фотографий на одной карте. В блоге Кевин пишет, что эксперимент с фотографиями показал, насколько полезными стали нейросети в работе с визуальной информацией. Программист задумался, как применить машинное обучение к дизайнерской рутине, и нашел решение — выбор шрифтовых сочетаний.
По мнению Кевина, для новых проектов дизайнеры берут шрифты, которые уже использовали, и выбирают из них по простым категориям — гротеск или антиква. Но в них большой спектр различий — в макете один шрифт без засечек может не сочетаться с другим.
Тогда Кевин совместно с Google Creative Lab разработал Fontmap. Алгоритм машинного обучения сортирует шрифты по визуальным характеристикам и подбирает сочетающиеся. Сейчас в базе Fontmap 750 шрифтов.
Шрифты, которые нейронные сети Fontmap выбрали для использования с Roboto
René — программа, которая поиграет со шрифтами за вас. Ее создал разработчик Джон Голд из Airbnb и TheGrid. Работа René построена на машинном обучении — с каждым новым подбором программа учится понимать принципы сочетания шрифтов. René помогает дизайнерам и разработчикам экономить время и составлять подборки шрифтов для разных проектов.
Джон Голд настраивает базовые характеристики для подбора шрифтов
Разработчик поддерживает идею, что нейросети — это инструменты-помощники, и высказывается против автоматизированного подхода. По мнению разработчика, René будет полезна только для дизайнера-профессионала, который будет «рулить» программой.
Логотипы
Logojoy — сайт, генерирующий логотипы. Разработчики системы считают, что сегодня создать качественный логотип можно быстро и без дизайн-студий. Полезное действие Logojoy — дать владельцам бизнеса больше свободы в брендинге.
Создатели сервиса внедрили машинное обучение и нейронные сети в графический дизайн и упростили создание логотипа. Сайт генерирует логотип и фирменный стиль на основе понравившихся пользователю иконок, стилистических и цветовых решений. Указываете сферу деятельности и название компании, выбираете пять логотипов, столько же цветовых схем и иконок — и через минуту система генерирует варианты логотипов. Их много — мы так и не смогли пролистать ленту до конца.
Варианты логотипов, которые предложила нам система. Не ДжонФедор, но начинающей компании пригодится
Посмотреть логотипы можно бесплатно, но за скачивание в хорошем качестве придется заплатить 20 $. Полный пакет с логотипом в растре и векторе, водяной знак, авторские права и фирменный стиль стоят 65 $. Те, кто не уверен в предложенных вариантах, могут сделать скриншот понравившихся и показать дизайнеру, который на их основе сделает логотип.
Для российских пользователей 65 $ за логотип — не совсем бюджетный вариант. Отечественный аналог Logojoy — «Турболого» — делает то же самое, но дешевле. Логотип в низком разрешении стоит 690 рублей, одиннадцать файлов с логотипом, включая версию для печати, — 990 рублей, а за бизнес-пакет с дополнительным набором для соцсетей, фирменной документацией, водяным знаком и фавиконкой придется заплатить 2290 рублей. «Турболого» работает на той же системе машинного обучения и нейронных сетей, что и Logojoy.
Лучшие логотипы за апрель 2018 по версии разработчиков «Турболого»
Популярные логотипы, истории знаменитых брендингов, лайфхаки для дизайнеров, разработчиков и владельцев бизнеса компания «Турболого» публикует в блоге.
Иллюстрации
Autodraw — инструмент для рисования от Google. В 2017 году компания выпустила нейросетевую программу, которая превращает набросок от руки в полноценную иллюстрацию. Разработка построена на алгоритме, который анализирует рисунок, распознает тип изображения и подбирает похожие клип-арт иллюстрации. Пока нейросеть работает не идеально — Autodraw выдает несколько похожих картинок, из которых пользователь выбирает наиболее подходящую. Иногда программа ошибается, но чем больше вы пользуетесь инструментом, тем быстрее нейросеть учится.
Autodraw пригодится для рисования иконок, логотипов, баннеров, афиш и быстрого прототипирования.
ProjectQuick3D — инструмент для создания 3D-моделей от Adobe. Программа работает по схожему с Autodraw алгоритму: пользователь рисует быстрый скетч, а программа с помощью машинного обучения находит в библиотеке Adobe Stock нужную 3D-модель. Нейросеть обучается — чем больше пользователей рисуют, тем точнее работает алгоритм. Разработчики представили проект на конференции Adobe MAX как инструмент для начинающих дизайнеров, которые прежде не работали с 3D.
Разработчики Adobe демонстрируют работу программы на конференции Adobe MAX
Фото
Let’s Enhance — сервис, улучшающий фотографии с низким разрешением. Его основатель Александр Савсуненко давно занимается машинным обучением, и после неудачного проекта по производству ДНК-тестов Titanovo решился на новый стартап. Идею для сервиса Александру подсказал отец — он продает камины, сауны и аксессуары для них, и товар возит из разных стран, в том числе из Китая. О качестве фотографий китайских товаров известно по AliExpress: большинство снимков — низкого разрешения, размещать на сайте их стыдно.
Тогда Александр Савсуненко совместно с разработчиком Владиславом Пранскевичусом создали Let’s Enhance. Сервис убирает jpeg-артефакты с фотографий, увеличивает разрешение в 4 раза, восстанавливает детали и увеличивает четкость снимков.
Перед обработкой система предлагает выбрать способ — улучшить разрешение фотографии или рисунка, логотипа или комикса, добавить текстуру, поправить цвет
Работает система на основе трех нейронных сетей, которые учатся улучшать фотографии. Технология Super-resolution обучается на базе из сотен тысяч фотографий низкого и высокого качества. Нейросеть обрабатывает два снимка, восстанавливает детали и сохраняет четкие линии, опираясь на знание типовых объектов и текстур. Вторая нейросеть — Boring — увеличивает четкость изображения. Третья — Magic — дорисовывает детали, которых нет на фотографии, чтобы сделать снимок более реалистичным.
Так работает нейросеть Boring, которая лучше всего восстанавливает текст, логотипы и комиксы. «Boring is not so boring» — говорит Александр Савсуненко
Сначала сервис был бесплатным, и пользователям разрешали обрабатывать любое количество фотографий. Сейчас сайт работает по подписке — без нее можно обработать только пять изображений. Для покупки доступны пакеты на 20, 50, 120 фотографий или подписка на месяц или год. Обработка двадцати изображений стоит 5 $, месячная подписка с возможностью обработать до тысячи фото — 7 $, годовая — 52 $.
Еще одна нейросеть для улучшения фотографий — программа от NVIDIA. Исследователи компании анонсировали технологию как алгоритм, который «может исправить зернистые фотографии одним взглядом».
Обучается NVIDIA схоже с Let’s Enhance — сравнивает фотографии с шумом и без. Нейросеть умеет удалять артефакты, шум, зерно. Создатели NVIDIA считают, что технологию уже можно использовать для улучшения изображений МРТ, а в будущем — применять для визуализации в медицине.
Исследователи NVIDIA в ролике об ИИ демонстрируют работу технологии
Дизайн
uKit AI — программа для редизайна сайтов. Чтобы выяснить, насколько он актуален для старых веб-ресурсов малого бизнеса, разработчики сервиса серьезно вложились в исследование. Оно показало, что частые проблемы сайтов и их владельцев — неадаптивность, устаревший дизайн и низкая конверсия. Предприниматели не могли предсказать, что мобильный трафик превысит десктопный, и многие веб-ресурсы работают на устаревшем Flash. При этом владельцы понимают, что технологии и тренды меняются, и видят, что сайты устарели, но откладывают обновление из-за нехватки денег и времени.
Решением для быстрого редизайна стал uKit AI — это сервис на основе SaaS+AI, сочетающий конструктор сайтов и машинное обучение. Система перекомпоновывает контент с учетом современных требований к дизайну и формирует новые версии страниц. uKit AI работает так: технология распознает контент и структуру старого сайта, алгоритм перестраивает и переоформляет контент, а нейросеть оценивает результат и выкатывает новую адаптивную версию. Лучший вариант система выбирает с помощью нейросети WebScore AI, которая не только оценивает сайт визуально, но и проверяет код на соответствие современным требованиям. Пока uKit AI дорабатывается, но уже можно записаться на бета-тестирование.
На главной странице uKit AI — «шторка», которая демонстрирует редизайн сайта с помощью этой разработки
Сайт станет подспорьем для дизайнеров — за десять минут нейросеть сгенерирует кликабельный вариант редизайна, который можно скинуть заказчику в качестве примера.
Перевод
Thing Translator — инструмент, который помогает учить иностранный язык с помощью фото. Технологию разработали совместно с Google Creative Lab в рамках проекта AI Experiments. Это простые эксперименты с машинным обучением, которые помогают разработчикам всего мира узнать о возможностях ИИ.
Thing Translator помогает учить новые слова на иностранном языке без учебников, словарей и карточек. Нейронная сеть построена на Cloud Vision API и переводчике Translate API. Технологии распознают форму предмета, выбирают несколько совпадений и переводят слова. Наведите камеру на предмет, сфотографируйте его — и программа выдаст его название на любом языке и даже воспроизведет слово голосом.
За 4 секунды Thing Translator узнает предмет, подбирает совпадения, выдает название на английском и переводит на другой иностранный язык. Для русскоговорящих пользователей — двойной профит
Сервис иногда не понимает, какой предмет перед камерой, долго думает, прежде чем выдать совпадения, ошибается в выборе. Но чем чаще люди пользуются сайтом, тем больше Thing Translator совершенствуется, как и любой инструмент машинного обучения.
Стив Джобс говорил, что компьютеры — велосипеды для ума. Нейросетевые инструменты и машинное обучение соответствуют этой метафоре уже сейчас, пусть и работают пока не идеально.
Посмотрите еще несколько программ и сервисов на основе ИИ, которые пригодятся в работе:
Дизайнер-разработчик Итан Маркотт рассказывает, как создать удобный веб-ресурс современного формата. Он призывает учитывать все виды устройств и показывает, как адаптировать сайт под каждый из них, дает готовые решения и коды.
Книга призвана решить большинство проблем, с которыми сталкиваются пользователи, и упростить владельцу сайта взаимодействие с ними.
Аарон Уолтер «Эмоциональный веб-дизайн»
Автор книги — дизайнер в области пользовательского опыта, сотрудник сервиса рассылок MailChimp. Он объясняет, почему шаблонное мышление вредно, а однообразный дизайн, который предлагают пользователю, не продает. Уолтер рассказывает, как важно, чтобы сайт вызывал у посетителя положительные эмоции, и показывает, как этого достичь.
Если хотите, чтобы ваши работы вызывали удивление и восторг, обязательно прочтите это издание.
Майк Монтейро «Дизайн — это работа»
Опытные веб-дизайнеры, глядя на заголовок, кивают головой. Новичкам с помощью этой книги предстоит уяснить, что дизайн, как практически любая творческая профессия, это не коктейль из творчества и вдохновения. В первую очередь это тяжелый труд, дисциплина и ответственность.
Веб-дизайнер Майк Монтейро убедительно доказывает, что успешному специалисту нужно постоянно учиться, совершенствоваться, наблюдать, замечать, а также уметь грамотно презентовать идеи заказчикам — телепатических способностей у них обычно не наблюдается.
Скотт Макклауд «Понимание комикса»
О природе комикса повествуют в виде комикса, и это уже интересно. Но главное, что в книге доходчиво рассказывают про визуальные коммуникации. Применить эти знания можно в любой работе, касающейся изображений, в том числе в веб-разработке и дизайне интерфейсов.
Майкл Микалко «Рисовый штурм»
Автор книги, специалист по креативности с мировым именем, предлагает десятки способов, как развить творческие способности и научиться мыслить нестандартно.
Микалко не дает инструкцию, как стать успешнее в отраслях, где нужно воображение. Он просто приводит инструменты, с помощью которых можно понять этот механизм. Это головоломки, игры, научно обоснованные методы.
Уитни Кесенбери, Кевин Брокс «Сторителлинг в проектировании интерфейсов»
Нельзя недооценивать силу текста при создании сайтов — и эта книга рассказывает, почему. А еще она учит, как с помощью историй понять целевую аудиторию и предложить сайт, который не оставит пользователей равнодушными.
Подзаголовок книги — «Как создавать истории, улучшающие дизайн». Она пригодится всем, кто занимается интерфейсами и пользовательским взаимодействием.
Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»
Книга не новая, но все еще интересная. Новичкам прочесть ее будет особенно полезно, так как она раскрывает механизмы процессов, многие из которых уже применяются дизайнерами «на автомате».
Джеф Раскин — создатель проекта Apple Macintosh — знает, о чем говорит, когда рассказывает об эффективном подходе к дизайну.
Алан Купер «Об интерфейсе»
Первое издание книги вышло в 1995 году, но ее содержание периодически обновляется. В ней учтен опыт ведущих мировых экспертов, и значительная часть содержания — про принципы и шаблоны проектирования взаимодействия с пользователями. Учтены все виды платформ, на которых отображаются сайты.
Алан Купер «Психбольница в руках пациентов»
Нас окружает безумный мир современных интерфейсов, и отец Visual Basic, дизайнер и программист Алан Купер расскажет, почему все так плохо. Останется чуть-чуть подумать, чтобы понять, как сделать хорошо.
Благодаря манере повествования автора книга читается легко, как зафиксированное на бумаге стендап-выступление. Голден Кришна с юмором, но достаточно остро критикует все, что отображается на наших экранах, и заставляет мыслить глобальнее.
Виктор Брет — Magic Ink
Бывший сотрудник Apple в эссе рассказывает, что дизайн интерфейсов имеет три главных функции: обучение, общение, самовыражение. А интерактивность — зло.
Пол Рэнд «Дизайн: форма и хаос»
Книга о дизайне в широком смысле. Автор рассказывает о современных тенденциях и пагубности скоротечных трендов, призывает учиться у классиков и вообще — постоянно учиться.
Эрик Шпикерманн «О шрифте»
Типографика может иметь решающее значение — и об этом расскажет президент Международного общества дизайнеров типографики Эрик Шпикерман. Он покажет, как гарнитуры помогают или мешают взаимодействию с читателем, и совершит краткий экскурс в историю шрифтов.
Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне»
Практикующий графический дизайнер показывает, что модульные сетки могут быть эффективными при создании практически чего угодно. Они логически упорядочивают материал и облегчают взаимодействие с ним для читателя, зрителя, пользователя.
Иоханнес Иттен «Искусство цвета»
Швейцарский художник, преподаватель Высшей школы строительства и художественного конструирования Bauhaus делится закономерностями, выведенными им за годы исследований цвета в природе и искусстве. Эксперт советует, как использовать, сочетать, конструировать цвета. Книга необходима каждому, кто работает с визуальными компонентами.
Тим Браун «Дизайн-мышление в бизнесе»
СЕО компании IDEO рассказывает, как при создании дизайна ориентироваться на клиента и почему это необходимо. Дизайн-мышление поможет получить максимальный эффект от результата.
Стив Круг «Как сделать сайт удобным»
Автор учит оценивать и тестировать удобство и функциональность сайта. Поняв, как это работает, вы научитесь сразу создавать веб-продукты без проблем с юзабилити.
Тим Кедлек «Адаптивный дизайн. Делаем сайты для любых устройств»
Еще недавно сайт должен был корректно отображаться только на экранах компьютеров, а сегодня устройств с выходом в интернет значительно прибавилось. Автор учит, как создавать сайты, адаптированные для всех платформ.
Есть чем дополнить нашу подборку? Ждем в комментариях ваше мнение про книги из категории must read для веб-дизайнера.
На Dribbble за вдохновением ежегодно приходят 25 миллионов уникальных посетителей, на платформу Behance от Adobe — еще больше.
Иногда дизайнерам сложно найти полезные материалы в ленте популярных сообществ — только в Dribbble пользователи уже загрузили больше триллиона пикселей. Кроме сайтов-гигантов есть сервисы поменьше, но с не менее полезным контентом. Мы составили подборку из десяти небольших сайтов, которые помогут не теряться в информационном потоке, развивать вкус и понимать тенденции дизайна и разработки.
Разработчик сайта вдохновился когда-то популярным сервисом FFFFOUND и решил создать что-то похожее. Когда он опросил студентов института искусств в Сиэтле, оказалось, что половина тех, кто учится графическому дизайну, не слышали о FFFFOUND, а Behance посещали всего пару раз. Когда источником вдохновения большинство студентов назвали Google Images, разработчик решил создать ресурс вроде FFFFOUND, но с большим функционалом.
Так появился Designspiration — сайт с коллекциями дизайнов и иллюстраций в стиле Pinterest. Из небольшого сервиса, куда дизайнеры приходили по приглашениям, Designspiration вырос в проект с огромной базой идей. Основные функции сервиса — возможность делиться работами, создавать тематические доски, как на Pinterest, искать изображения по цветам. Последняя функция — самая интересная: пользователь указывает пять цветов из ста двадцати, и сайт выдает картинки в выбранной гамме.
Поиск дизайнов по цветовой гамме работает точно: все цвета, которые выбрал пользователь, встречаются в картинках.
Цвета картинок подписаны в формате HEX. Пригодится, если захотите сохранить понравившийся цвет и использовать его в проектах
Плагин Muzli для браузера Chrome собирает свежие посты из дизайнерских сообществ на домашней вкладке. Расширение анализирует 120 источников — Pocket, Vox, Artstation, Product Hunt и еще сотню других — и выбирает то, что интересно конкретному пользователю. В настройках можно выбрать темы, которые плагин выводит на домашней странице: дизайн и вдохновение, технологии и разработка, бизнес, культура, — и тематические сайты. Новости можно добавлять в закладки или скрывать из ленты. Расширение анализирует пользовательский опыт, запоминает самые посещаемые сайты и со временем учится показывать только интересное.
Установите Muzli вместо домашней страницы, чтобы следить за важными для вас новостями
Uplabs — сообщество, которое помогает дизайнерам и разработчикам делиться UI-макетами для приложений и сайтов. Создатели Uplabs наблюдали за популярными платформами и заметили, что сервисы вроде Dribbble изолируют участников сообщества друг от друга и не помогают работать эффективно. Макеты проектов, которые выкладывают пользователи Dribbble, часто так и остаются концептами из-за до невозможности сложной реализации. Тогда решили создать инструмент, который поможет разработчикам и дизайнерам сосредоточиться на работоспособности проекта, а не на визуальной привлекательности.
Так появился Uplabs. Пользователи сайта делятся интерактивными прототипами интерфейсов для iOS, Android и веба. Контент в Uplabs разнообразный: иллюстрации, анимация, прототипы приложений с открытым кодом, библиотеки и готовые продукты. Некоторые работы доступны бесплатно, за другие нужно заплатить — так Uplabs помогает пользователям не только эффективно взаимодействовать и вдохновлять друг друга, но и зарабатывать.
В коллекциях Uplabs собраны работы из всех областей дизайна. Можно создавать собственные подборки
Создатель профиля описывает свой тамблер как «Daily inspiration to go». Как и в других хороших сервисах для дизайнеров, в тамблере работы разделены на категории: графический дизайн, брендинг, иллюстрации, типографика, 3D, анимация. Найдется все — от классической швейцарской типографики до флэт-дизайна.
Вдохновляют не только работы, но и оформление профиля — близкие друг к другу публикации выдержаны в одной цветовой гамме
Еще один тамблер владельцев graphicboutique.tumblr.com, который посвящен современному веб-дизайну. Работы разделены на три категории: веб, приложения, UI-элементы. Много интересных решений для лендингов, фирменного стиля, навигации на сайтах и пользовательских сценариев.
В блоге встречается и поп-культура — кроме концептов приложений автор вдохновляется тизером к клипу Бузовой
За шесть лет коллекция скриншотов мобильных приложений в Pttrns выросла до восьми тысяч. Сервис доступен в пробном периоде и премиум-аккаунте. В бесплатной пробной версии функционал ограничен: можно просматривать ленту из двадцати макетов, сохранять скриншоты, фильтровать работы по категориям. Основные функции платные — чтобы загружать свои макеты и просматривать сайт без рекламы, придется купить премиум-подписку за 5 долларов в месяц.
Разработчики удобно структурировали контент — скриншоты разбиты на категории, что облегчает поиск. Он, кстати, также доступен только в премиум-аккаунтах.
Категории на сайте максимально подробные — все скриншоты разбиты на ОС, темы, даты и тэги. Интересное не потеряется в ленте
«Making great email is hard» — пишут разработчики сайта на странице о компании. Действительно, электронные письма в рассылках редко выглядят хорошо: странные шрифты, стоковые фотографии, некрасивая типографика. Создатели Really good emails решили исправить ситуацию и разработали сервис красивых электронных писем. Пользователи загружают на сайт шаблоны имейлов с открытым кодом — любой сможет сохранить код, заменить содержимое и рассылать эстетичные письма. В эпоху популярности рассылок шаблоны имейлов с профессиональными фотографиями и чистой версткой — незаменимый инструмент.
Пример имейла, который присылает сайт Universe. Оказывается, уведомления о регистрации аккаунта могут быть нескучными
Panda 5 — сборник новостей для дизайнеров и разработчиков
«An easy way to keep up with industry news and inspiration» — пишет про сервис издание TechCrunch. Panda 5 — это платформа, которая собирает картинки и новости с интернет-ресурсов в одном месте. Сервис доступен в веб-версии, в мобильном приложении и расширении для Chrome.
Panda 5 работает по схожему с Muzli принципу — собирает контент из разных источников и выводит на домашней странице. Отличает сайт больший выбор информационных ресурсов, разнообразие фильтров и список информации — в отличие от Muzli, контент выводится списком, а не плиткой. Перед первым запуском расширения Panda 5 спросит, какие темы и рубрики вам интересны. Для пользователей, которые интересуются разработкой и технологиями, Panda 5 предложит новости даже из CSS-Tricks — об изменениях в спецификациях и обучающих статьях вы узнаете первыми.
Главная фишка Panda 5 — сервис собирает информацию из неограниченной подборки интернет-ресурсов
К десятилетнему юбилею Tumblr креативный директор и дизайнер Даниэль Эклер составил подборку из 165 выдающихся дизайнерских аккаунтов. Профили Эклер разделил по группам: графдизайн, типографика, искусство, архитектура, дизайн интерьера, книжный дизайн, инсталляции, мода, фотография. Есть раздел с интересными тамблерами, которые не подходят под категории: профиль про африканскую культуру, концепты в стиле киберпанк, фото и видео перформансов. Подборка крайне разнообразная — например, в категории «Графический дизайн» найдутся примеры от японского дизайна со странными иллюстрациями до работ в серо-белых тонах.
Профиль пользователя OLD HORSE из раздела «Искусство»
Французский онлайн-журнал, который специализируется на творческом контенте. Fubiz начинал как маленькое интернет-издание Ромена Колина — студента, который увлекался культурой и искусством. Колин создавал сайт как агрегатор контента об искусстве и поп-культуре, и сейчас Fubiz вырос до 20 миллионов уникальных посетителей в год и по версии Forbes считается лучшим креативным медиа в мире.
Сейчас Fubiz специализируется на рекламе — на сайте рекламируют знаменитые бренды и продвигают малоизвестных талантливых людей. Благодаря платформе многие дизайнеры, модельеры, иллюстраторы становятся популярными. Как говорит создатель сайта, они предоставляют рекламодателям список креативных людей, которые способны создавать оригинальный контент и распространять его в СМИ. Материал на Fubiz распределен по структурированным разделам о дизайне, архитектуре, фотографии и поп-культуре.
Новости из мира технологий, которые мы заслужили: в старую технику Apple посадили растения
Сохранили что-нибудь себе? Расскажите в комментариях, какой сервис оказался самым полезным и какие инструменты помогают вам развивать вкус и насмотренность.
Повседневная жизнь полна ярких визуальных образов. Из экспериментов в области графического дизайна рождаются горячие тренды и — внезапно — проникают всюду. Мы видим броские дизайнерские решения на автобусах, билбордах, в телерекламе, журналах и, конечно, в цифровом контенте. Приемов много: двойная экспозиция, глитч (glitch — цифровые помехи, сбой, ошибка), цветовые каналы, фотомаски, смазанность, ультраяркие цвета или «ошибки печати» (misprint).
Трендовый эффект «глитч» на рекламе в метро Нью-Йорка
Как и в мире моды, в дизайне тренды — это переосмысленный опыт прошлых десятилетий: русский конструктивизм, Баухаус, шелкография, стиль 1970-х. Почти целый век художники используют простую геометрию, и она работает так же хорошо, как и 100 лет назад.
Для создания трендовых эффектов сегодня как никогда много цифровых инструментов. Но давайте помнить, что при всей доступности этих средств действительно притягательные работы не появляются без творческой смелости и новаторского подхода.
Стоит ли следовать трендам
Некоторые дизайнеры и креативные директора избегают трендовых решений, потому что не хотят выглядеть подражателями. Но следование тенденциям может привнести в ваши работы современные штрихи. У решения быть не таким, как все, тоже есть преимущества. Поэтому лучшие дизайнеры заимствуют идеи из трендов прошлого и настоящего, комбинируют и подчас получают нечто принципиально новое и поразительное.
Небольшое предостережение: прежде чем использовать тренд, убедитесь, что он не противоречит вашему брендингу. Банки, страховые и инвестиционные компании людям хочется ассоциировать с надежностью и доверием. В этом контексте едва ли уместны эффекты, связанные с подрывом устоев и контркультурой — глитч, например.
Прием двойной экспозиции украсил вступительную заставку сериала «True Detective» от HBO.
Ниже мы рассмотрим несколько модных дизайнерских приемов и поделимся уроками по созданию эффектов в Photoshop.
Горячий тренд №1: двойная экспозиция
Этот прием позволяет создавать эффектные визуальные сочетания. Название пришло из пленочной фотографии, где можно сделать два или три снимка без прокрутки пленки — и кадры накладываются друг на друга. Эффект часто используют на киноафишах и в рекламных роликах на ТВ. Выше вы видели кадр из заставки сериала “True Detective”: сочетание двойной экспозиции с анимацией усиливает впечатление.
Главное условие успеха здесь — удачный подбор изображений. Когда вы берете за основу картинку с высокой контрастностью, следующий слой лучше разместить поверх самых темных ее участков. Часто портрет смешивают с более детализированной картинкой, вроде городского пейзажа.
А вот несколько хороших уроков, как сделать подобное в Photoshop:
Эффекты «глитч», «ошибка печати» и «визуальные помехи»
Это приемы одного ряда. С ними изображение притягивает взгляд, потому что выбивается из потока «идеальных картинок». В основе — цифровые искажения, или глитч. Когда все вокруг отфотошоплено до безупречности (кто-то назовет это фальшивым или «эстетически загрязненным»), хочется взглянуть на что-то более реалистичное, естественное и неприлизанное.
Эффекты, основанные на ошибках или сбоях, обычно нравятся молодому поколению. Стремление разоблачить притворство — контркультурная составляющая, которая выделяет произведение из общего ряда. Но и эти эффекты уместны не в любой ситуации.
То, что дизайнеры называют глитчем, еще может встречаться как VHS, RGB-сдвиг, искажение при сканировании, визуальные помехи и «ошибка печати». Дизайнеры-новаторы иногда совмещают несколько таких эффектов, чтобы получить оригинальный результат.
На постере к сериалу «Мистер Робот» несколько разновидностей глитч-эффекта подчеркивают контркультурный антураж.
Чересполосное сканирование со смещением изображения создает необычный, притягательный для глаза эффект.
Добиться подобных результатов можно разными способами — осмотритесь на YouTube и выберите, что вам понравится. Есть даже готовые Photoshop Actions, которые можно купить, чтоб накладывать глитч в один клик.
Вы даже можете создавать glitch-эффект средствами CSS. Вот примеры слайдшоу и лендинга.
Двухтоновые эффекты
Прием «дуплекс» (duotone) давно в моде и не устаревает. Сотни лет назад с помощью сангины — красного мелового карандаша — однотонные рисунки создавал Леонардо да Винчи. Манера разбивать изображение на простые тона укоренилась, и современная двухтональная техника развивает идеи мастеров прошлого.
Рисунки сангиной, созданные да Винчи и мадемуазель де Мондран (de Mondran), а также современное фото в двухтоновой технике.
Дуплекс сегодня используют всюду: от постеров к голливудским блокбастерам до рекламы Apple и Spotify. Смысл — выделиться, выглядеть иначе. И здесь на помощь приходят Photoshop Actions и мобильные приложения.
Несколько хороших уроков Photoshop, из которых вы узнаете, как получить этот модный эффект:
Еще один примечательный эффект, который работает на фотографиях, тексте и контурах. Иногда, чтобы получилось интересно, берут три разных изображения в трех различных цветовых каналах и все это совмещают. Другая разновидность — смесь глитча и разделения RGB-каналов. Некоторые дизайнеры идут дальше — добавляют еще и двойную экспозицию.
Вот несколько крутых уроков по работе с цветовыми эффектами в Photoshop и Affinity Photo. Не обращайте внимания, как эти приемы там называют — каждый волен именовать их по-своему.
Двухцветная двойная экспозиция в Photoshop
Двухцветная двойная экспозиция в Affinity Photo
Яркие, кричащие цвета и флуоресцентный дуплекс
И снова задача — обратить на себя внимание. Чтобы следовать тренду, щедро используем в дизайне сочные и сияющие оттенки.
Флуоресцентный дуплекс в дизайне сайта компании New Deal Design.
Тот же веб-дизайнерский тренд использовали при создании календаря для AfriSam 2018 Corporate Stationery.
По моде — в ярких насыщенных цветах — оформлен и сайт дизайнерского агентства ELJE Group.
Сайт Hackernoon использует сочные флуоресцентные тона, чтобы стать заметнее.
Главное в этом деле — уместная смелость, готовность рискнуть и попробовать кричащие цвета в дизайне сайта, на обложке альбома или на постере.
Маски, вырезки, абстракционизм, кубизм
Бесконечно возвращающийся тренд, который прочно закрепился в графическом дизайне. Это может быть сочетание жирного шрифта, плоских цветных поверхностей, монтажа и маскирования. Этой технике почти 100 лет, как и выполненным ее средствами советским пропагандистским плакатам 1920-х годов. (На самом деле нам показывают афиши к раннесоветскому кино — прим. пер.)
Чтобы создавать работы со сложной структурой и цветовым разнообразием, Анри Матисс в последнее десятилетие жизни использовал всего два материала: белую бумагу и гуашь. Так появились его знаменитые аппликации. Обычными ножницами художник превращал краску и бумагу в мир растений, животных, форм и фигур.
Цифровой кубизм, абстрактное искусство и коллажи сегодня — растиражированные техники, которые доказали свою способность привлекать внимание.
Иногда современные эффекты визуального наслоения напоминают коллажи Матисса.
Интересный эффект фотомаски можно получить за счет игры со шрифтами и простыми геометрическими фигурами.
Не существует четких и жестких правил, как получить такой эффект. Все зависит от ваших исходных материалов и изобретательности. Вдохновляйтесь искусством советского плаката, абстрактным кубизмом Пикассо и коллажами Матисса. Большинство приемов фотомаски и аппликации можно воссоздать с помощью маски слоя в Photoshop. Дело не столько в технических навыках, сколько в вашем творческом воображении и умении сочетать визуальные образы.
Тем не менее есть пара классных уроков Photoshop, которые на примере показывают, как создать подобные эффекты:
Как создать портрет из текста в Photoshop
Как создать букву-портрет в Photoshop
А вот еще один интересный урок — как с помощью слой-масок в Photoshop получить такой результат:
Из урока вы узнаете, как несколько простых приемов позволяют делать замысловатые иллюстрации с несколькими слоями, маскированием, инструментом «Перо», базовым освещением и одной простой текстурой.
Анализируйте, будьте смелыми и прокладывайте свою колею
Сегодня творческая смелость — не выбор, а обязательное качество дизайнера. Ожидания публики растут, а ее внимание становится все труднее удерживать. Не стесняйтесь следовать трендам дизайна — берите и перерабатывайте их во что-то свое! Переверните привычное положение дел, исследуйте свои фантазии и совершите дерзкий творческий скачок!
Почти все ответили: «креатив», «оригинальность», «что-то красивое», «минимализм». Но должен ли дизайн всегда быть необычным и красивым, а интерфейс — минималистичным? Давайте разрушим популярные мифы.
Миф № 1: Дизайн должен быть оригинальным
Никому не нужен креатив ради креатива, особенно это касается проектирования интерфейсов. Лучше адаптировать привычный для пользователя дизайн, чем изобретать колесо. Люди больше ценят удобство и простоту использования, чем новизну. «Привычное — ваш друг», — говорит Стив Круг в книге «Don’t make me think». И он прав, ведь если пользователю что-то непонятно, то он уйдет (разве что у продукта нет ни одного конкурента). Поэтому креативить нужно, если новое решение точно лучше существующего. Или если ваша задача — поразить пользователя собственной креативностью. Крутой дизайн зачастую сначала незаметен, ведь он в первую очередь передает идею.
Миф № 2: Дизайн должен быть красивым
Мне нравятся пастельные тона и строгие шрифты, а посетителям сайта анекдот.ру — кричащие цвета и Comic Sans. Стоит ли делать, как нравится мне (у меня же так развито чувство прекрасного)? Вряд ли. Главное, чтобы нравилось целевой аудитории. «Суть дизайна не в том, чтобы радовать глаз и красиво смотреться. Дизайн должен работать», — говорит Оливер Райхенштейн, дизайнер, CEO компании iA.
«Красивого» в вакууме не бывает. «В графическом дизайне нет чего-то правильного или неправильного. Существует только эффективная и неэффективная коммуникация. Каждый может критиковать рекламные баннеры, но заказчику важно только то, привлекают они клиентов или нет», — считает словацкий графический дизайнер Питер Билак.
Миф № 3: Плевать на эстетику, главное — функционал
Не надо игнорировать эстетику. Доказано, что эмоции влияют на пользовательский опыт. Если вам принесут два одинаково вкусных блюда, но первое будет вывалено на тарелку как попало, а второе — оформлено аккуратно и привлекательно, какое вы предпочтете? Я почти уверена, что второй вариант многие даже выложат в Instagram, особенно если в подаче будет изюминка. Дизайн должен производить приятное первое впечатление (на целевую аудиторию, конечно). Дизайнер Дэн Норман объясняет, что, как и почему в книге «Emotion & Design: Attractive things work better».
Миф № 4: Пользователи знают, чего хотят
Выявить реальную потребность пользователей — суперсложная задача. Недостаточно просто спросить, чего они хотят от дизайна. Здесь в тему цитата, которую приписывают изобретателю автомобильного конвейера Генри Форду: «Если бы я спросил, чего хотят люди, они бы ответили, что им нужны лошади побыстрее». Пользователи зачастую не знают, чего хотят. Они не могут предсказать свою реакцию на те или иные вещи. Но они точно знают, какие проблемы и «боли» у них есть сейчас. Спроси Форд о том, что раздражает людей в нынешнем способе передвижения, — конечно, они бы сказали, что низкая скорость, что лошади быстро устают, болеют и так далее. Из подобных данных уже можно понять, каким должен быть дизайн, не упираясь в предыдущий способ решения задачи.
«Критическая ошибка пользовательских интервью в том, что вы просите людей либо учитывать предыдущий опыт использования, либо спекулировать на будущем использовании продукта», — говорит Якоб Нильсен в статье «Interviewing Users». Нужно добраться до истинной проблемы — только так появляются прорывные, креативные решения. Это сложно, но чертовски интересно.
Миф № 5: Чем проще и удобнее, тем лучше
Мне нравится цитата Джоэла Спольски, которая объясняет, почему удобство — относительная штука: «Если бы юзабилити-дизайнеры проектировали ночной клуб, то там было бы чисто, спокойно, хорошо освещено, всем хватало бы сидячих мест и меню, напечатанных Sans-serif, было бы много барменов и туалетов, которые легко найти. Но никто бы там не тусовался. Все бы пили пиво в “Гадком Койоте”».
Миф № 6: Детали важны только перфекционистам
«Детали — не просто детали. Они и есть дизайн», — сказал американский дизайнер Чарльз Эймс, который придумал кресло с оттоманкой, на котором так удобно релаксировать. Правка на 5 минут может стоить миллионы долларов. Например, для сайта BestBuy.com небольшое изменение, позволяющее пропускать регистрацию во время оформления заказа, привело к росту доходов на 300 миллионов долларов в год. Корпорация Apple, которая стоит более триллиона долларов, маниакально помешана на «мелочах». Как пользователь айфона (в прошлом ярый его противник), могу уверенно сказать, что не зря.
Миф № 7: Минимализм = простота
Упрощение часто путают с минимализмом — сокращением элементов. Но сокращать нужно не всегда. Иконки без текста сложно понять, как и трудно выбрать блюдо с помощью меню без фотографий еды. Эйнштейн отлично сказал на этот счет: «Все должно быть простым, насколько это возможно, но не проще». Джулия Жуо, директор по дизайну продуктов в Facebook, в статье «The 5 Most Common Design Mistakes» акцентирует, что не нужно жертвовать понятностью ради минимализма. Простота исходит из понимания целостного опыта пользователя, а минимализм — это стиль. Он не самоценен.
Елена Булыгина предлагает Вам запомнить сайт «Ленусик»
