Инструменты для веб-дизайнера: сложности адаптации

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

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

В целом программы для дизайнера и создания сайтов имеет некоторый общий набор элементов интерфейса. Например:

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

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

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

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

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

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

Быстрее и проще будет адаптироваться к работе в конструкторе сайтов, который максимально похож по интерфейсу и инструментам на уже знакомый редактор дизайна. Например, конструктор Tilda вероятно будет понятнее для пользователей Photoshop, в то время как пользователям Figma будет немного сложнее “переучивать” себя под этот инструмент.

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

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

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

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

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

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

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

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

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

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

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

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

Платформа Taptop: taptop.pro

Новости Taptop: