Офтоп Alex Pavljenko
2 874

Организация работы: самые полезные приложения и сервисы для дизайнера UI/UX

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

В закладки

Инструменты для создания прототипа

Sketch

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

Кроме того, Sketch предоставляет дополнительные данные о макете, например, вы можете видеть размеры компонентов и расстояние между ними, только удерживая клавишу [alt]. Sketch использует аппаратное ускорение, поэтому работает быстро и не перегружает компьютер, тем самым экономя время (и нервы!) дизайнеров. Тем не менее, есть одна особенность: Sketch работает исключительно на Mac.

Adobe XD

Новые подходы в дизайне UI и UX побудили разработчиков программного обеспечения обновить свои продукты и даже создать новые, ориентированные на конкретные задачи, такие как структурирование макета. Adobe не была исключением, поэтому они запустили свой новейший продукт Adobe XD (eXperience Design) в 2016 году. Он пришел на смену Photoshop и Illustrator для дизайнеров UI и UX и сумел получить довольно высокие оценки.

Эта программа специально предназначена для дизайнеров UX, создающих каркасы, интерактивные прототипы и векторный дизайн. Это хороший шанс для поклонников Adobe вернуться к знакомому инструменту со значительными обновлениями, сосредоточенными на дизайне пользовательского интерфейса. Для тех кто еще новичок в веб-дизайне, интерфейс XD вряд ли покажется трудным. Эта программа сегодня доступна для операционных систем Mac и Windows 10.

Figma

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

Lunacy

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

Заметки

Заметки — это абсолютно бесплатное приложение, которое поставляется в качестве предустановленной программы на смартфонах Apple. С выходом каждой новой версии iOS, приложение становится все более функциональным. Сейчас в Заметках можно настраивать заголовки и маркированные списки, создавать списки задач с пунктами, форматировать текст с помощью выделения, приглашать людей для совместной работы, добавлять фотографии, делать зарисовки, защищать отдельные заметки паролем, структурировать все заметки по темам, просматривать все вложения разом, восстанавливать удаленные заметки в течение 30 дней, закреплять важные и часто используемые заметки в верху списка а также многое другое.

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

Интерфейс Lunacy

Интерактивное прототипирование

Marvel

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

InVision

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

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

Principle

Это довольно простое приложение, которое направлено на создание анимированного дизайна пользовательского интерфейса. Отличительная особенность Principle в том, что он может работать даже в автономном режиме, поэтому ваш прогресс работы не зависит от качества подключения к Интернету. Интерактивные прототипы могут быть легко преобразованы в GIF или видео и быть расшарены в портфолио на Dribbble или в другое место. Интерфейс этого инструмента очень похож на Sketch, поэтому он будет прост в освоении для многих дизайнеров. Кроме того, интересная особенность заключается в том, что вы можете просматривать проекты на устройствах iOS. Хотя в этом-то и вся загвоздка — Principle доступен только для macOS, поэтому поклонникам Windows нужно искать альтернативы.

UXPin

Разработчики команды UXPin известны как эксперты в области дизайна пользовательского опыта, которые постоянно делятся своими знаниями в различных книгах и статьях. Их продукт — UXPin — это Web-инструмент для прототипирования, который может быть использован для создания каркасов интерфейса в высоком качестве с последующим превращением их в интерактивные прототипы. Также дизайнеры могут портировать свои работы из Sketch или Photoshop для прототипирования в UXPin. Ну и вишенкой на торте является то, что эта программа автоматически формирует спецификации для разработчиков.

Процесс создания прототипа в InVision

Подбор цветовых палитр

ColorHexa

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

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

Paletton

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

Flat UI Color

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

Color Tool

Снова в подборке бесплатное веб-приложение, которое к тому же является частью ресурса Google Material Design, с которым многие из моих читателей наверняка знакомы. Приложение ориентировано на мобильный дизайн, предоставляя для специалистов материальные цветовые схемы. Пользователи могут попробовать схемы на мобильных шаблонах, которые также доступны в Color Tool. Кроме того, можно найти данные о доступности выбранных цветовых схем и адаптировать их при необходимости.

Pictaculous

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

Работа с типографикой

Google fonts

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

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

Typekit

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

Fontjoy

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

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

Typetester

Иногда мы не можем решить, какой шрифт из двух выбранных подходит лучше. Typetester — это быстрый сервис для тестирования и сравнения шрифтов. Он обеспечивает предварительный просмотр нескольких шрифтов на одной странице с их параметрами, включая интерлиньяж и трекинг. Шрифты могут быть выбраны из различных источников, таких как Google fonts, и протестированы путем регулировки их размера, выравнивания, а также с настроенным текстом и фоном.

Calligraphr

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

Официальный сайт студии Pentagram, которая известна своим невероятным подходом к типографике

Работа с иконками и знаками

Icons8

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

Здесь вы можете найти иконки для платформ iOS, Android и Windows, которые доступны в различных форматах. Выбранный пакет можно скопировать прямо в Sketch, Figma и другие специальные программы. Кроме того, все иконки могут быть перекрашены и изменены в вашем редакторе. Icons8 позволяет скачать некоторые PNG иконки бесплатно. Если вы хотите получить доступ ко всем иконкам в разных форматах, вы можете оплатить лицензию.

Free Icon Maker

Если вам не нравится ни один пакет иконок в сторонних сервисах, вы можете сделать их самостоятельно. Значки могут быть созданы в одном из визуальных редакторов, таких как Sketch, Illustrator и Figma, или вы можете применить некоторые бесплатные веб-инструменты. Free Icon Makerпозволяет создавать и редактировать иконки онлайн. Когда вы регистрируетесь там, вы можете использовать все функции, например, загрузку значков из файлов SVG, чтобы изменить их в этом сервисе.

IconJar

Дизайнеры часто скачивают сотни пакетов значков, а затем ругаются, что трудно найти что-то стоящее во всем этом хаосе. IconJar — это эффективный органайзер, предоставляющий папки для конкретных иконок. Например, если вам нужно найти значок “дом”, вы можете отыскать его по имени, и инструмент покажет вам значки из всех наборов. IconJar доступен только для MacOS, но скоро может появиться клиент и для Windows. Программа платная, но имеет бесплатную пробную версию.

The Noun Project

Это сайт с огромным количеством авторских иконок и знаков, которые распространяются условно бесплатно. На сайте The Noun Project реализован удобный поиск по тегированной базе иконок наподобие приложения IconJar. Достаточно ввести слово, которое отражает ваш знак и вы получите результат со всех подборок. Также вы можете искать нужные иконки в конкретной подборке. За $40 в год, $10 в месяц или $2 за один объект вы получите все возможности сервиса и royalty-free лицензию, по которой можете использовать скачанную иконку без указания авторства. Кроме того, совершенно бесплатно вы можете загружать понравившиеся иконки в векторном формате, чтобы использовать их с указанием авторства.

Организация рабочего процесса

Trello

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

Здесь легко устанавливать дедлайны, делегировать конкретные задачи конкретным людям, создавать контрольные списки и выделять наиболее важные и срочные задачи. Trello также имеет еще одно очень ценное качество: он обладает не только тщательно продуманным сайтом, но и крутыми приложениями для iOS и Android. Это дает дополнительные возможности для быстрой обратной связи, что экономит время, усилия и делает управление проектами очень удобным для клиентов. Trello — отличный сервис, где дизайнеры, менеджеры проектов и клиенты могли бы эффективно работать вместе.

Zeplin

Успешный дизайн-проект строится на эффективной коммуникации креативной команды с клиентами. Zeplin — это платформа, расширяющая сотрудничество между дизайнерами и разработчиками. Главная особенность Zeplin — работа с элементами интерфейса. Дизайнеры могут загружать каркасы из Sketch, добавляя их в папки проекта в Zeplin. Таким образом, разработчики получают все данные о конструкции, включая размеры, цвета и CSS для компонентов пользовательского интерфейса.

Presentator

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

Экспорт компонентов из Sketch в Zeplin

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

P.S. Вы можете подписаться на меня в Telegram (@designside), чтобы не пропустить новые статьи о дизайне, если редко заходите на TJournal. Также там я публикую свои мысли, которые сложно оформить в лонгрид.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы рассказать свою историю.

Написать
{ "author_name": "Alex Pavljenko", "author_type": "self", "tags": [], "comments": 28, "likes": 36, "favorites": 83, "is_advertisement": false, "subsite_label": "flood", "id": 76308, "is_wide": false, "is_ugc": true, "date": "Mon, 10 Sep 2018 17:30:57 +0300" }
Комментарии

Запасной рак

12

Хорошая подборка, спасибо. Как раз собираюсь попробовать себя в чем-то новом, думаю, дизайн интерфейсов это моё.

Уральский крюк

8

Тоскливо читать о программах без скриншотиков

Практический мангал

2

Зачем ты написал простыню про софт, который и так знает каждый смуззихлёб?

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

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfk" } } }, { "id": 6, "disable": true, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byswn", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "cndo", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223677-0", "render_to": "inpage_VI-223677-0-130073047", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=cndo&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudv", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "ccydt", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvc" } } } ]
Не пропустите самое важное,
что происходит в интернете
Подписаться на push-уведомления