1

Я Алекс, Director User Experience в дизайнерском агентстве Clay. Мы создаем восхитительные потребительские продукты, а также разрабатываем интерфейсы, веб-сайты и приложения для ведущих компаний.

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

2
Clay разработал интерфейс самого популярного теста скорости в Интернете

Взаимодействие с корпорациями требует повышенного уровня ответственности и общественного молчания.

3
Уважаемые клиенты Clay

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

4
Офис Clay расположен по адресу 300 Broadway #23, San Francisco, CA, 94133
5
Футболки Clay – пост на Dribbble

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

Какие инструменты использовать?

6
Инструменты, часто используемые в Clay

Мы используем связку Dropbox Files и Paper, а вы можете использовать Google Drive с Google Docs или Microsoft OneDrive с Office 365 Word. Цель состоит в том, чтобы найти облачное хранилище файлов с хорошими возможностями синхронизации и приложение для совместного редактирования текстов / заметок.

Большая часть наших работ создается с помощью старых, старомодных инструментов:

  • Графика (Sketch, Photoshop, Illustrator)
  • Видео (After Effects)
  • 3D (Cinema 4D)

Файловая структура

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

Как и многие агентства, мы создаем папку для каждого клиента и добавляем в нее папки для проектов. Но какой структуры следует придерживаться для проекта?

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

Номера – друзья дизайнера!

Вот структура папок любого дизайн-проекта, над которым мы работаем в Clay. Цифровой префикс папки размещает их в соответствии с основной фазой проекта.

7
Структура папок, характерная для любого проекта Clay

01-Incoming

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

8
Пример содержимого в папке «Incoming»

02-Research

На этапе исследования мы собираем информацию о текущей или планируемой системе и ссылки на конкурентов: примеры, скриншоты, скринкасты, записи интервью и любые другие рабочие файлы. Мы храним исследовательские документы, которые мы написали, в Dropbox Paper или Google Drive.

9
Пример исследовательской презентации

Если работа ведется ежедневно, результаты должны это отражать. Именно поэтому мы храним ежедневные результаты проектирования в папке с названием, например, «2018-11-25». Таким образом, ежедневный исследовательский материал можно легко собрать в презентацию для арт-директора.

10
Пример содержимого в папке Research

03-Wireframes

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

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

11
Пример вайрфрейма Speedtest от Clay

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

12
Карта приложения

04-Designs

Мы также называем это частью визуального дизайна. Все финальные дизайны помещаются в папку 04-Designs. Типичная структура подпапок такая же, как в папках Research, Wireframes и Outgoing.

13
Организация подпапки команды дизайнеров

05-Outgoing

В ходе проекта мы делимся результатами в папках, упорядоченных по дате. В конце проекта мы помещаем все в папку «Final Assets». Мы также делимся интерактивными прототипами. Например, в InVision собраны вайрфреймы и визуальные дизайны.

06-Dev

Здесь мы храним все необходимые разработчикам файлы, такие как вайрфреймы, проекты, активы и шрифты. Разработчики также получают финальные дизайны через Zeplin. Таким образом, мы можем контролировать, что именно идет в разработку.

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

Наименование файла

Имя экспортируемого файла

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

14
Пример соглашения об именовании файлов дизайна

Файл финального дизайна получает имя в соответствии с этим шаблоном:

FlowNumber-StepNumber-StateNumber-AdditionlStateNumber(Optional)-Name

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

Числа начинаются с 0. Ноль перед одиночной цифрой помогает правильно упорядочить файлы. Если у вас более 99, используйте 3 цифры. Примечание. За 15 лет работы над самыми сложными проектами мы никогда не достигали числа 99.

Каждый этап также получает номер. Например, на странице входа в систему у нас есть диалоговое окно с полями адреса электронной почты и пароля, и кнопкой входа в систему. Этот этап получит номер 01, в то время как диалоговое окно сброса пароля получит этап 02 , а весь сценарий входа в систему – номер 00.

15
00-01-02-Password.png

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

00-01-02-Password.png

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

00-01-06-EmailLocked.png

Выбирайте короткие и понятные имена состояний, такие как Feed, Post, Filter и Event. Замените пробелы на CamelCase, например, NewMessage, FollowGroup. Избегайте сложных и расплывчатых имен. Если вы хотите представить несколько визуальных опций на одном экране, вы можете добавить букву в конец цепочки номеров:

01-02-00a-Search.png

01-02-00b-Search.png

16
Экспортируемые файлы (.png) и имена артбордов в Sketch

Наименование папок

Мы храним большие группы файлов в папках с тем же правилом именования.

17
Конечные файлы хранятся в папках для каждого этапа

Наименование исходного файла

Исходные файлы получают имена по тому же правилу, но мы добавляем впереди имя проекта:

ProjectName-FlowNumber-StepNumber-StateNumber–Name

Мы часто можем поместить все состояния в один файл, поэтому исходный файл будет называться так:

ProjectX-Design-02-03-People-Filter.sketch

Вывод

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

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

Доступ к этим ответам очень удобен без необходимости обращаться к проджект-менеджеру или даже использовать инструмент управления проектами.

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

18
Разархивированный шаблон дизайн-проекта

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Исследование зарплаты дизайнеров 2017 в США

Эта статья содержит подробный анализ отчета о зарплате дизайнеров интерфейсов в Соединенных Штатах Америки.

Руководство по дизайн-системам от ведущих мировых брендов

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

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…