Инструменты для веб-дизайнера: сложности адаптации
В арсенале веб-дизайнера обычно есть целый набор инструментов — графические редакторы, программы для создания UI и прототипирования, конструкторы сайтов и т.п. Для каждого этапа работы — свой сервис, решающий определенный спектр задач. Насколько легко переходить с одной программы на другую или переключаться между несколькими инструментами в процессе работы? Давайте поищем общее в работе с сервисами для веб-дизайна и рассмотрим различия, мешающие быстро адаптироваться к новым программам.
Незнакомый интерфейс. А где же панель слоев?
Технический прогресс идет быстро, появляются новые программы, и дизайнеры часто делают выбор в пользу более функциональных новинок. Однако переход на другой сервис может быть не таким уж простым из-за непривычного интерфейса и отличающихся принципов работы.
В целом программы для дизайнера и создания сайтов имеет некоторый общий набор элементов интерфейса. Например:
- панель инструментов
- панель дизайна или стилей
- панель слоев
- холст или рабочая область
Обычно дизайнер привыкает к расположению панелей и кнопок в редакторе, которым пользуется часто, а в новой программе с трудом находит нужные инструменты. Такое может случиться при переходе с Photoshop в Figma, т.к. в этих сервисах немного разные возможности и подход к работе, а соответственно — по-разному построен интерфейс. Например, дизайнеру может быть сложно приспособиться к непривычному расположению панели слоев в Figma, а также отсутствию привычных кнопок редактирования изображения.
А вот переход из редактора Sketch в Figma пройдет гораздо проще, ведь несмотря на некоторые различия в терминологии и процессах, их интерфейсы и функционал довольно похожи между собой. В обоих сервисах панель слоев расположена слева, инструменты вверху, а холст в центре.
Конечно же, освоить новый инструмент дизайна — задача, вполне посильная для профессионала. Однако в зависимости от степени различия сервисов она может занять разное время. Конечно, на первом этапе адаптации рука будет сама тянуться в привычную сторону экрана.
От макета к готовому сайту
Если веб-дизайнер хочет не просто создать графический макет, а сделать работающий сайт самостоятельно, без участия программистов, то ему потребуются дополнительные инструменты. Обычно это конструкторы сайтов и платформы для визуальной веб-разработки.
Казалось бы, всё должно быть просто, ведь знаний программирования такие сервисы не требуют, и сборка сайта происходит в визуальном интуитивно понятном редакторе. Тем не менее освоение конструкторов сайтов также может вызвать трудности по причине отличия интерфейсов, инструментов и процессов работы.
Часто дизайнеру, без труда создающему интерфейсы в привычном редакторе, необходимо время, чтобы освоиться с концепцией сборки сайтов в конструкторах и разобраться, какие инструменты нужно использовать для перевода макета в полнофункциональный сайт.
Быстрее и проще будет адаптироваться к работе в конструкторе сайтов, который максимально похож по интерфейсу и инструментам на уже знакомый редактор дизайна. Например, конструктор Tilda вероятно будет понятнее для пользователей Photoshop, в то время как пользователям Figma будет немного сложнее “переучивать” себя под этот инструмент.
В свою очередь платформа Taptop имеет очень похожий на Figma интерфейс, что сильно ускоряет адаптацию к работе для тех веб-дизайнеров, которые только начинают создавать сайты с помощью этого сервиса. Многие инструменты и возможности в Taptop будут интуитивно понятны пользователям Figma, например, иерархия слоев, вкладка ресурсов, кнопка создания компонентов и т.п.
Самые горячие клавиши
Все вышеописанное относится также и к горячим клавишам, которые используются в разных инструментах. Шорткаты помогают дизайнерами ускорять работу, поэтому очень важно запомнить хотя бы некоторые самые используемые из них. При этом не всегда бывает просто переключиться с привычных сочетаний клавиш на другие.
Шорткаты, доступные в программе, определяются ее инструментами работы и возможностями. Сервисы могут иметь разный набор горячих клавиш или различные их сочетания на одно и то же действие. В этом случае приходится заново “набивать руку” и запоминать полезные приемы работы.
Существуют сочетания клавиш, общие для многих сервисов. Например, общеизвестные горячие клавиши, которые применяются во многих программах, не обязательно относящихся к дизайну:
- Сtrl / ⌘ + C — копировать
- Сtrl / ⌘ + V — вставить
- Сtrl / ⌘ + X — вырезать
- Ctrl / ⌘ + Z — отменить действие
- Ctrl / ⌘ + S — сохранить
Есть также специфические для дизайнерских программ сочетания клавиш, которые часто совпадают в разных программах. Например:
- Сtrl / ⌘ + “+” — увеличить масштаб
- Сtrl / ⌘ + “-” — уменьшить масштаб
- Клавиша мыши + зажатый Shift / ⇧— перемещать элемент строго вниз-вверх или влево-вправо
- Инструмент для рисования линии + зажатый Shift / ⇧— рисование прямой линии
- Ctrl / ⌘ + A — выбрать всё
- Alt / ⌥ + перетаскивание мышью — дублировать элемент
- Ctrl / ⌘ + G — группировать элементы
Горячие клавиши для редактирования текста также часто аналогичны в разных программах. А вот сочетания клавиш для выбора элементов и перемещения между ними не всегда совпадают.
Чаще всего одинаковые горячие клавиши можно встретить в сервисах со схожими интерфейсами и инструментами. Например, в Firma и Sketch работа со слоями организована одинаково, поэтому и шорткаты у них во многом совпадают. Конструктор сайтов Taptop также имеет аналогичный способ работы со слоями, так что в нем можно найти знакомые пользователям Figma горячие клавиши, например:
- Enter — выделить дочерний элемент
- \ — выделить родительский элемент
- Сtrl / ⌘ + клик — точное выделение внутреннего элемента
Синхронизируй и оптимизируй
Безусловно, инструменты для веб-дизайна нужно выбирать, исходя из необходимого функционала. В одних случаях важнее возможности обработки картинок, а в других — работа с векторными изображениями. Кому-то достаточно одного сервиса, а кому-то потребуется несколько.
Облегчить себе задачу можно, выбирая для работы родственные по концепции инструменты. Большим плюсом будет также, если возможен импорт из одной программы в другую.
Еще одним полезным лайфхаком может быть настройка собственных горячих клавиш. Это можно сделать, например, в Photoshop и в Sketch, а вот в Figma такой возможности не предусмотрено.
Заключение
Веб-дизайнер — профессия, которая предполагает постоянное изучение нового и адаптацию своих навыков к современным технологиям. Поэтому, чтобы быть настоящим профессионалом, нужно уметь работать в разных программах. Остается только надеяться, что создатели сервисов для дизайнеров будут стараться синхронизировать пользовательский опыт с помощью интуитивно понятных интерфейсов и привычных горячих клавиш.
P.S. Напишите в комментариях, какими инструментами для веб-дизайна вы больше всего пользуетесь. А также поделитесь вашими лайфхаками для быстрой адаптации к новым программам и продуктивной работы.
Платформа Taptop: taptop.pro
Новости Taptop: