Как дизайнеру работать быстрее и эффективнее. Турбо-дизайн: Советы по эффективной работе

Зачем улучшать рабочий процесс?

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

Утро - пора великих дел

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

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

Если наиболее горящие и сложные задачи будут оставаться для «несвежего» рассудка - скорее всего, работа пойдет «вокруг да около». И за большое количество времени - решится минимальный объем задач. Либо же вообще вопрос будет перенесён во «всемогущее завтра».

Продуктивность - зебра

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

Планирование, как почва для экспериментов

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

Смена вида деятельности - идеальный отдых

Дела не будет если себя не переключать с одного проекта на другой. Веселый путь проб и ошибок показал, что концентрация над одной задачей и прикованность к ней иногда положительно влияет на её завершение. Однако чаще случается, что со временем человек «перегорает» и не может концентрироваться над ней по массе причин. На одну лишь её было потрачено много времени. Изначально, работа шла прекрасно первые n часов. Потом, из-за своей монотонности, она вызывает лишь недовольство, раздражение и нежелание над ней трудиться, вовсе.

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

Нужно ли любить первый макет/идею/концепцию?

Вредно. И бесполезно.

Чем больше будет сгенерировано идей - тем больше шанс выйти на качественный финальный результат.

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

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

Важны ли инструменты?

Да. Ведь мозг не в силах удержать всю информацию. Инструменты-спасатели: Google Calendar, Any.do, Pocket, Evernote, плюс некий планировщик для командной работы.

На что уходит много времени?

По статистике в рабочем процессе человек может тратить на электронную почту 1/4, 1/3 и вплоть до половины рабочего времени. И в данном случае, речь идёт лишь о рабочей переписке. А ведь есть еще ненужные рассылки, оповещения социальных сервисов и прочий спам. Очевидно, что потраченные 5 минут в день = 30 часов в год.

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

Резерв

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

Утеря драгоценных файлов над которыми долго работаешь, затрагивала не одну сотню добрых дизайнерских душ. Стоит подружиться крепко-накрепко с DropBox, Google Drive и похожими инструментами для спасения своего труда.

К чему всё это?

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

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

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

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

5 «правил» для дизайнеров

Избегайте кастомных стилей

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

Втягивайте разработчиков в работу как можно раньше

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

Прислушивайтесь к мнению* разработчиков

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

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

Изучите базовый HTML/CSS/JS

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

Соберите в кучу все мелкие правки

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

«Дружба с разработчиком действительно может доставить много удовольствия! Если вместо споров о том „как можно, и как нельзя“ сделать в конкретном месте, поинтересоваться: „мне нужно достичь здесь вот такого эффекта, что ты можешь предложить?“, можно услышать вполне разумные и подходящие варианты:) Главное - уметь задать вектор и пояснить его наиболее логично! Насчёт первого совета - не могу согласиться! По-настоящему уникальные и запоминающиеся продукты невозможны без кастомных решений, другой разговор, что эти решения должны подчиняться стройной системе. Если есть иерархия стилей и блоки схожего функционала оформлены идентично, то внедрить дизайн под силу любому хорошему разработчику».

Елена Кудаева, старший дизайнер digital-агенства Red Collar

5 «правил» для разработчиков

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

Вникните в сценарий использования

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

UX сначала, остальное – потом

В изменчивом климате дизайн постоянно проходит одни и те же циклы, основываясь на пользовательских тестах и отзывах. Синяя кнопка со скругленными углами в 5 пикселей и box shadow-тень, которую вы кропотливо добавляли только вчера, сегодня уже стали зеленой кнопкой с плоским дизайном и острыми углами. Атас. Но не расстраивайтесь, просто примите это как данное, как часть процесса разработки. Сначала создайте UX-путь, функциональность, и набросайте общую дизайн-схему. Можно немного взгрустнуть, но пока не вылизывайте все до пикселя. После всех тестов и окончательного утверждения дизайна можно начинать постепенно вводить визуальные элементы в код.

Возражайте (и двигайте свои идеи)

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

Почаще говорите с дизайнерами

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

Заполняйте пробелы**

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

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

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

Фронтенд-разработчик digital-агенства Red Collar, Владимир Лукашов

Ну вот и все! 5 советов, которые я собрал как для дизайнеров, так и для разработчиков, чтобы помочь улучшить рабочие процессы. Все эти советы крайне субъективны и основаны на моем былом опыте работы специалистом программного обеспечения и текущем опыте работы продуктовым дизайнером. Дайте знать, насколько вы согласны (или не согласны) с моим мнением в комментариях.

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

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

Я раньше как делал - создаю шаблон, в котором все подготовлено к печати: треппинги, оверпринты, вылеты под обрез и всякое такое.
Так это выглядит.

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

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

Экшены, кстати, тоже не спасли, они работают немного не так как в шопе и мне не хватило ума полностью ими всё автоматизировать.

Пошел читать как в иллюстраторе можно автоматизировать хоть что-нибудь, и нашел панель variables. Переменные значит.
Можно назначить внутри макета некоторые элементы переменными и динамически заменять линки или скрывать объекты, или менять текст в текстовых блоках.
Кажется - вот оно! Но не тут-то было. Оказывается чтобы эти переменные заработали надо скормить иллюстратору специально подготовленный XML-файл, с тегами, разметкой и корректным синтаксисом. Поскольку я ниразу не программист, для меня это все темный лес.
Тут нам на помощь приходит скрипт, написанный как раз для решения этой проблемы. VariableImporter называется. Я нашел его на гитхабе. Он позволяет импортировать данные для переменных из таблицы экселя. Сейчас расскажу как это работает.

UPD1: Чтобы скачать скрипт с гитхаба надо нажать кнопочку RAW затем кликнуть по странице правой кнопкой мыши - сохранить как... И сохранить с расширением.jsx

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

• Vendor - это артикул, он расположен на верхнем торце. Это простой текст, он выровнен по центру, чтобы при изменении длины надписи, она не уехала никуда.

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

• Boxers, Slips и Shorts - это вид трусов, который на лицевой части подписан. Он был текстом, но я решил закривить его и сделать одной сложной кривой, чтобы проще было включать и выключать. В шаблоне должны быть сразу все виды, потом в таблице мы будем указывать, на каком макете какой объект показывать.

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

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

В первой строке пишем имена переменных. Подлинковывающиеся файлы должны начинаться с собаки (@), а объекты которые надо скрывать или показывать - с решетки (#).

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

Берете этот текст:

chcp 1251
echo %date% %time% >filelist.txt
dir /b /d >>filelist.txt

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

В последний столбец копируем описания. Я к сожалению пока не придумал как это ускорить. Поэтому пока только руками.
Чтобы обозначить какой артикул соответствует какому типу трусов нужно в ячейке поставить любой знак, например Х. Это будет обозначать что объект отображается в макете. Если ячейка пустая, то объект не показывается.
Теперь сохраняем файл как текстовый документ с разделителями табуляцией (да, такой пункт есть в экселе) и идем в наш любимый иллюстратор.

Файл - скрипт - другие скрипты и выбираем VariableImporter. Откроется окно скрипта, нажимаем Choose Data File и выбираем текстовый файл, который мы сохранили из экселя.

Если все хорошо, то мы увидим список распознанных переменных.

Кстати, чтобы скрипт всегда был в списке, нужно положить его в папку по этому пути:
C:\Program Files\Adobe\Adobe Illustrator CS6 (64 Bit)\Presets\en_IL\Scripts\

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

В следующей вкладке указываем путь к папке с картинками.

И нажимаем Import Variables.
Если все хорошо, увидим такое окно.

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

5 «правил» для дизайнеров

Избегайте кастомных стилей

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

Втягивайте разработчиков в работу как можно раньше

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

Прислушивайтесь к мнению* разработчиков

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

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

Изучите базовый HTML/CSS/JS

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

Соберите в кучу все мелкие правки

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

«Дружба с разработчиком действительно может доставить много удовольствия! Если вместо споров о том „как можно, и как нельзя“ сделать в конкретном месте, поинтересоваться: „мне нужно достичь здесь вот такого эффекта, что ты можешь предложить?“, можно услышать вполне разумные и подходящие варианты 🙂 Главное - уметь задать вектор и пояснить его наиболее логично! Насчёт первого совета - не могу согласиться! По-настоящему уникальные и запоминающиеся продукты невозможны без кастомных решений, другой разговор, что эти решения должны подчиняться стройной системе. Если есть иерархия стилей и блоки схожего функционала оформлены идентично, то внедрить дизайн под силу любому хорошему разработчику».

Елена Кудаева, старший дизайнер digital-агенства Red Collar

5 «правил» для разработчиков

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

Вникните в сценарий использования

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

UX сначала, остальное – потом

В изменчивом климате дизайн постоянно проходит одни и те же циклы, основываясь на пользовательских тестах и отзывах. Синяя кнопка со скругленными углами в 5 пикселей и box shadow-тень, которую вы кропотливо добавляли только вчера, сегодня уже стали зеленой кнопкой с плоским дизайном и острыми углами. Атас. Но не расстраивайтесь, просто примите это как данное, как часть процесса разработки. Сначала создайте UX-путь, функциональность, и набросайте общую дизайн-схему. Можно немного взгрустнуть, но пока не вылизывайте все до пикселя. После всех тестов и окончательного утверждения дизайна можно начинать постепенно вводить визуальные элементы в код.

Возражайте (и двигайте свои идеи)

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

Почаще говорите с дизайнерами

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

Заполняйте пробелы**

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

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

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

Фронтенд-разработчик digital-агенства Red Collar, Владимир Лукашов

Ну вот и все! 5 советов, которые я собрал как для дизайнеров, так и для разработчиков, чтобы помочь улучшить рабочие процессы. Все эти советы крайне субъективны и основаны на моем былом опыте работы специалистом программного обеспечения и текущем опыте работы продуктовым дизайнером. Дайте знать, насколько вы согласны (или не согласны) с моим мнением в комментариях.

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

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

Итак, как же работать быстрее, не жертвуя при этом качеством?

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

1. СОЗДАТЬ ШОРТКОДЫ И СТИЛИ

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

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

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

2. ОРГАНИЗОВАННОСТЬ И ПОСЛЕДОВАТЕЛЬНОСТЬ

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

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

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

3. СОЗДАЙТЕ СПИСОК ШРИФТОВ

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

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

Бонусный совет: эта концепция отлично подходит для цветовых палитр.

4. КАК ИСПОЛЬЗОВАТЬ ПРАВИЛЬНЫЕ ИНСТРУМЕНТЫ

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

Это относится ко всем видам проектных работ, как для онлайн-проектов, так и для печатных материалов. Как правило, все, что является частью схемы брендинга или может потребоваться для множественного использования (логотипы, символы, иконография), должно быть спроектировано и разработано в векторном формате. Вы также можете масштабировать их или сохранять другие типы файлов, но вы не можете перейти от gif к масштабируемому изображению. Объекты же, которые вы будете использовать всего один раз, могут быть созданы с использованием небольших растровых форматов или инструментов CSS.

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

5. ИСПОЛЬЗУЙТЕ ГОТОВЫЕ КОМПОНЕНТЫ

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

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

6. ИЗБАВЬТЕСЬ ОТ БЕСПОРЯДКА

Чистое рабочее пространство делает дизайнера счастливым. Избавление от беспорядка происходит в два этапа, когда дело доходит до вашего цифрового пространства:

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

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

7. НАЧНИТЕ С ЧЕРНО-БЕЛОГО

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

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

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

ВЫВОД

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

И удачи. Чтобы стать более быстрым дизайнером вам потребует время и терпение. Дайте себе немного пространства для роста.