Набор инструментов дизайнера: рабочие процессы, программное обеспечение и веб-сайты
Опубликовано: 2020-12-17Так же, как разработчики программного обеспечения, авторы контента, маркетологи и т. Д., Дизайнеры должны иметь хороший набор инструментов, который помогал бы им в повседневной работе. Здесь мы попытались описать такие инструменты, рабочие процессы и способы их комбинирования, чтобы ускорить вашу работу и снизить вероятность ошибок и ошибок.
Собрать информацию
Когда приходит новый проект, первые несколько часов в основном посвящены сбору информации о нем - с какими проблемами сталкивается клиент, каковы его цели, что им нравится и т. Д. На этом решающем этапе дизайнер должен постараться получить как можно больше. как можно больше полезных данных, которые позже будут использованы для принятия обоснованных решений.
Evernote
Evernote - замечательная программа, а не просто приложение для заметок. Он может хранить файлы, объединять их в коллекции, теги, группы и т. Д. Благодаря мощному поиску вы можете ссылаться на предыдущие проекты и так далее. Конечно, самая сильная сторона этого - то, как вы ее используете. У них есть приблизительные руководящие принципы для некоторых организационных подходов.
Электронная почта, Slack, Zoom…
Далее идет еще один очевидный, но есть причина, по которой мы добавили его: откладывание звонка, сообщения или видеовстречи может стать серьезной задержкой для проекта. Часто возможность поделиться экраном и просмотреть макеты, каркасы, концепции и проекты спасает жизнь. Никогда этого не забывай
Найдите вдохновение
Как только информации будет достаточно, следующим шагом будет поиск вдохновения - как должно выглядеть приложение / веб-сайт, какой стиль, какова цель и т. Д. Есть ли какие-нибудь крутые идеи для использования новых технологий или различных типов носителей? ? Все дизайнеры ищут вдохновение направо и налево - веб-сайты, книги, журналы, что угодно.
Dribbble, Behance и подобные сайты
Именно по этой причине (и для хвастовства дизайнеров) существуют такие сайты, как Dribbble. Там мы, дизайнеры, можем искать идеи и подходы, которые решают проблемы, с которыми мы сейчас сталкиваемся. Иногда цель состоит в том, чтобы создать «общую страницу продаж для услуги А». На этой странице продаж будет буквально пара абзацев с стоковой фотографией. Совершенно скучная цель, но вполне реалистичная. Что ж, сочетание цветов, типографики, интервалов и т. Д. Может быть немного более уникальным. Может быть, попробовать и другие раскладки! Идея для этого может возникнуть на случайной целевой странице, опубликованной 3-4 года назад. Страница 99Design Discovery - тоже хорошее место для поиска!
Awwwards
Мы помещаем такие сайты, как Awwwards, в отдельную категорию, поскольку они действительно демонстрируют то, что было создано и работает. Более того, он больше ориентирован на художественный стиль, а не на «любую дизайнерскую работу». В большинстве случаев сайты настолько тяжелые, что их можно использовать только на высокопроизводительных машинах, но вы все равно можете черпать из них вдохновение.
Цветовая палитра / брендинг
Для новой сборки, в которой нет предопределенных цветов, одним из шагов для начала работы будет выбор чего-то, что подходит новому сайту. Есть два способа подойти к этому: выбрать существующую цветовую схему или установить основной / дополнительный цвет и работать со всей схемой на их основе.
ColorHunt
Такие сайты, как Color Hunt, предоставляют коллекцию цветовых палитр, созданную сообществом. Вы можете выбрать и использовать их напрямую или выбрать основные цвета для начала. Не такие красивые, но похожие на Color Lovers.
БрендЦвета
BrandColors преследует несколько другую цель - предоставляет список основных брендов и их цветовые схемы. Там вы можете найти несколько отличных оттенков и комбинаций, которые могут вдохновить вас. На цвета не распространяются авторские права, но мы советуем немного поиграть с ними, а не копировать все цвета из таких мест, как, например, Amazon.

Премиум и бесплатные активы
Не всегда хватает времени для работы над каждым компонентом сайта. Иногда лучше взять набор значков, иллюстрацию или стоковую фотографию, сделанную другим дизайнером / фотографом, и использовать их напрямую.
- Font-Awesome - Огромная коллекция иконок в виде глифов шрифтов.
- Envato Elements - Огромный выбор ресурсов премиум-качества по хорошей цене.
- Unsplash - Огромная коллекция качественных бесплатных фото
- Генераторы SVG, такие как squircley, getwaves, blobmaker
- Adobe Fonts (платно) и Google Fonts (бесплатно)
Лучший совет здесь - найти несколько сайтов, подобных этим выше, и держать их под рукой, чтобы максимально сократить время и усилия, которые вы должны приложить для поиска и подбора лучшей графики для работы.
Основные инструменты дизайна
Когда начальная работа закончена, дело доходит до создания дизайна. Поскольку все прогрессивные программы для дизайнеров имеют все необходимые инструменты для создания дизайна веб-приложений или приложений, мы пропустим инструменты для создания каркасов.
Фигма
Наш основной выбор для дизайнерских работ в DevriX - это Figma. Он предоставляет отличные возможности для совместной работы, а также приложения на основе браузера, к которым может получить доступ любой член команды, будь то Linux, Mac или Windows. Раньше мы использовали Adobe XD, но участники на базе Linux не могли его использовать, а Sketch заблокирован только на Mac.
Иллюстратор / Affinity Designer
Для более нестандартной работы, безусловно, лучший выбор - Illustrator или Affinity Designer. В последние год или два пользовательские иллюстрации стали одной из самых популярных частей веб-сайтов. Большая красочная графика правит верхом, и больше опыта работы с правильными инструментами определенно полезно. Здесь мы также можем добавить программное обеспечение 3D, такое как Blender, для рендеринга 3D-моделей, которые можно использовать в качестве ресурсов на веб-страницах.
Photoshop / Affinity Photo
Photoshop был ведущим программным обеспечением для веб-дизайна. Сегодня это может показаться странным, особенно с учетом того, что у нас есть все эти замечательные инструменты, предназначенные в первую очередь для Интернета. Но Photoshop по-прежнему остается отличным инструментом, и мы часто используем его, когда есть фотографии, требующие редактирования или вырезания фигур / форм.
Презентация
Но дело не только в дизайнерской работе - статический PNG. Некоторые дизайнеры, которые уделяют больше внимания анимированной графике и взаимодействиям. Хорошая демонстрация того, как элементы должны вести себя при наведении, смахивании или щелчке, очень поможет в работе интерфейсных разработчиков. И Figma, и Adobe XD могут помочь в этом, но оба они также ограничены.
Adobe After Effects
After Effects считается одним из первых вариантов для анимированной графики. Он предоставляет все необходимые инструменты для представления всех действий и анимаций. Здесь неплохо напомнить дизайнерам, что анимация должна соответствовать ограничениям Интернета. Добавление размытия в движении - это не то, что вы можете сделать. Поэтому, когда вы перейдете к более продвинутой анимации, обязательно обсудите это со своей командой разработчиков или узнайте больше об анимации в Интернете и о том, что возможно. То же самое и с UX и A11y.
Место хранения
Figma и Adobe XD в значительной степени ориентированы на облака, поэтому вам не стоит беспокоиться о потере работы, но не все так - файлы Photoshop, Illustrator, загруженные вами шрифты, фотографии и т. Д. Все находятся на вашем компьютере.
Лучше всего сделать их резервную копию и сделать так, чтобы они были доступны постоянно, особенно если вы работаете на нескольких машинах. А когда дело доходит до их обмена, это очень просто.
Dropbox
Лучшим выбором для этого будет Dropbox. Благодаря простому в использовании настольному приложению он будет следить за вашими файлами и синхронизировать их с облаком, как только вы вносите какие-либо изменения. Оттуда вы можете поделиться ими с клиентом или вашей командой одним щелчком мыши.