Реклама →
Как мы рисовали интерфейс для «Артиста»
Некоторое время назад наш коллега по цеху, талантливый программист и просто хороший человек Дмитрий Рыжков завоевал со своей программой для рисования «My Little Artist» солидный приз в конкурсе на лучшее приложение для Intel Atom. Воодушевленный успехом, Дмитрий решил продолжить развитие проекта, сделав из него коммерческий проект, и попросил нашу студию помочь с таким сложным делом как интерфейс. Мы с удовольствием взялись за работу.
Первая версия программы выглядела так, как и положено некоммерческому приложению, выигравшему конкурс.
![](http://www.inetio.ru/images/artist/artist-01.png)
А ведь, как известно, для коммерческого продукта внешний вид – далеко не последнее дело. Итак, создаем интерфейс программы для рисования «выбрал, нажал, нарисовал for advanced dummy users».
За работу взялся наш дизайнер Никита Темрязанский. Что первым делом приходит в голову дизайнеру? Правильно, тот инструмент, которым он пользуется — Фотошоп / Иллюстратор.
![](http://www.inetio.ru/images/artist/artist-02.png)
Стало лучше, чем было. Но получился фактически Фотошоп, а нам не нужен клон. Тем более что программа рассчитана преимущественно на любителей, которым это сходство никак не поможет. Необходимо поработать с внешним видом.
![](http://www.inetio.ru/images/artist/artist-03.png)
Стало еще лучше. А вот эта левая вертикальная панель, она жестко закреплена? Может быть попробуем ее отвязать? Пусть она появляется нажатием правой кнопки мыши в том месте, где находится курсор, чтобы рисовальщик «не бегал» по экрану и «не отрывался» от процесса. А после выбора необходимого параметра пусть панель исчезает. Т.к. приложение предназначено в основном для пользователей нетбуков, у которых разрешение экрана небольшое, такое решение позволит использовать рабочую область по максимуму.
![](http://www.inetio.ru/images/artist/artist-04.png)
Теперь панель «отвязана» от левого края. Целесообразно ли расположение иконок в одну колонку при такой высоте? Пробуем две колонки. Заодно переместим верхнее меню вправо и для экономии рабочего пространства сделаем его скрывающимся/раскрывающимся.
![](http://www.inetio.ru/images/artist/artist-05.png)
Хорошо. А зачем нужно дублирование функций в двух меню? Оставляем в вертикальном меню только рабочие инструменты для рисования, остальное выносим наверх. И что-то иконки маловаты и все также корпоративно строги. Ведь такой программой, скорее всего, захотят пользоваться и дети. Укрупняем и делаем иконки добрее.
![](http://www.inetio.ru/images/artist/artist-06.png)
Отлично. Над меню появилась полезная фича – «последние пять выбранных цветов». В целом концепция готова. Начинаем шлифовку. В рабочем меню есть чужеродный элемент – кнопка «Создать новый документ». Убирая ее, получаем нечетность, которая портит двухколоночное меню. Переключимся на верхнее меню. Там нет ни одного пункта, который нельзя было бы понятно изобразить с помощью иконки. А если иконки будут компактными, то не будут мешать, и интерфейс будет смотреться более целостно. Переделываем, заодно перемещаем наверх иконку «глаз», отвечающую за зеркалирование. Меняем ее дизайн на более очевидный.
![](http://www.inetio.ru/images/artist/artist-07.png)
Кстати, двухколоночное меню перестало нравиться, там всего 6 пунктов. Попробуем вернуть одну колонку. «Горячие» цвета есть, почему бы не добавить «горячие» кисти.
![](http://www.inetio.ru/images/artist/artist-08.png)
Так лучше. Возвращаем также в рабочую область иконку «Зеркалирование» (Mirror modes). Снова меняем ей дизайн на еще более понятный. Undo есть, Redo – нет. Нужна ли нам History? Для такого класса программ это неактуально. History убираем, Redo добавляем.
![](http://www.inetio.ru/images/artist/artist-09.png)
Рабочий прототип готов и устраивает обе стороны. Теперь совместная работа на стыке дизайна и программных технологий. В финальном варианте пришлось переделать кисти. Адекватно изобразить семпл кисти на маленьких квадратных иконках оказалось сложно, поэтому заменили их на большие прямоугольные. Соответственно, пришлось убрать «горячие» кисти.
![](http://www.inetio.ru/images/artist/artist-10.png)
![](http://www.inetio.ru/images/artist/artist-11.png)
Нам было очень интересно работать над этим проектом. Хотя у нас большой опыт разработки дизайна сайтов и интернет-сервисов, да и пиктограммы приходилось неоднократно рисовать, для десктоп приложения интерфейс мы делали впервые. Дмитрий остался доволен результатом, мы – сотрудничеством, а пользователям предстоит попробовать и оценить совместный плод нашего сотрудничества.
![](http://www.inetio.ru/images/artist/artist-12.png)
Кстати, специально для хабровчан мы с Дмитрием подготовили сюрприз. Вы можете бесплатно скачать программу отсюда. Возможно она понравится вам, или ваши дети с удовольствием будут рисовать разные забавные картинки. В любом случае было бы интересно услышать ваши отзывы и пожелания, которые могут помочь в дальнейшем развитии проекта. Спасибо.
Первая версия программы выглядела так, как и положено некоммерческому приложению, выигравшему конкурс.
![](http://www.inetio.ru/images/artist/artist-01.png)
А ведь, как известно, для коммерческого продукта внешний вид – далеко не последнее дело. Итак, создаем интерфейс программы для рисования «выбрал, нажал, нарисовал for advanced dummy users».
За работу взялся наш дизайнер Никита Темрязанский. Что первым делом приходит в голову дизайнеру? Правильно, тот инструмент, которым он пользуется — Фотошоп / Иллюстратор.
![](http://www.inetio.ru/images/artist/artist-02.png)
Стало лучше, чем было. Но получился фактически Фотошоп, а нам не нужен клон. Тем более что программа рассчитана преимущественно на любителей, которым это сходство никак не поможет. Необходимо поработать с внешним видом.
![](http://www.inetio.ru/images/artist/artist-03.png)
Стало еще лучше. А вот эта левая вертикальная панель, она жестко закреплена? Может быть попробуем ее отвязать? Пусть она появляется нажатием правой кнопки мыши в том месте, где находится курсор, чтобы рисовальщик «не бегал» по экрану и «не отрывался» от процесса. А после выбора необходимого параметра пусть панель исчезает. Т.к. приложение предназначено в основном для пользователей нетбуков, у которых разрешение экрана небольшое, такое решение позволит использовать рабочую область по максимуму.
![](http://www.inetio.ru/images/artist/artist-04.png)
Теперь панель «отвязана» от левого края. Целесообразно ли расположение иконок в одну колонку при такой высоте? Пробуем две колонки. Заодно переместим верхнее меню вправо и для экономии рабочего пространства сделаем его скрывающимся/раскрывающимся.
![](http://www.inetio.ru/images/artist/artist-05.png)
Хорошо. А зачем нужно дублирование функций в двух меню? Оставляем в вертикальном меню только рабочие инструменты для рисования, остальное выносим наверх. И что-то иконки маловаты и все также корпоративно строги. Ведь такой программой, скорее всего, захотят пользоваться и дети. Укрупняем и делаем иконки добрее.
![](http://www.inetio.ru/images/artist/artist-06.png)
Отлично. Над меню появилась полезная фича – «последние пять выбранных цветов». В целом концепция готова. Начинаем шлифовку. В рабочем меню есть чужеродный элемент – кнопка «Создать новый документ». Убирая ее, получаем нечетность, которая портит двухколоночное меню. Переключимся на верхнее меню. Там нет ни одного пункта, который нельзя было бы понятно изобразить с помощью иконки. А если иконки будут компактными, то не будут мешать, и интерфейс будет смотреться более целостно. Переделываем, заодно перемещаем наверх иконку «глаз», отвечающую за зеркалирование. Меняем ее дизайн на более очевидный.
![](http://www.inetio.ru/images/artist/artist-07.png)
Кстати, двухколоночное меню перестало нравиться, там всего 6 пунктов. Попробуем вернуть одну колонку. «Горячие» цвета есть, почему бы не добавить «горячие» кисти.
![](http://www.inetio.ru/images/artist/artist-08.png)
Так лучше. Возвращаем также в рабочую область иконку «Зеркалирование» (Mirror modes). Снова меняем ей дизайн на еще более понятный. Undo есть, Redo – нет. Нужна ли нам History? Для такого класса программ это неактуально. History убираем, Redo добавляем.
![](http://www.inetio.ru/images/artist/artist-09.png)
Рабочий прототип готов и устраивает обе стороны. Теперь совместная работа на стыке дизайна и программных технологий. В финальном варианте пришлось переделать кисти. Адекватно изобразить семпл кисти на маленьких квадратных иконках оказалось сложно, поэтому заменили их на большие прямоугольные. Соответственно, пришлось убрать «горячие» кисти.
![](http://www.inetio.ru/images/artist/artist-10.png)
![](http://www.inetio.ru/images/artist/artist-11.png)
Нам было очень интересно работать над этим проектом. Хотя у нас большой опыт разработки дизайна сайтов и интернет-сервисов, да и пиктограммы приходилось неоднократно рисовать, для десктоп приложения интерфейс мы делали впервые. Дмитрий остался доволен результатом, мы – сотрудничеством, а пользователям предстоит попробовать и оценить совместный плод нашего сотрудничества.
![](http://www.inetio.ru/images/artist/artist-12.png)
Кстати, специально для хабровчан мы с Дмитрием подготовили сюрприз. Вы можете бесплатно скачать программу отсюда. Возможно она понравится вам, или ваши дети с удовольствием будут рисовать разные забавные картинки. В любом случае было бы интересно услышать ваши отзывы и пожелания, которые могут помочь в дальнейшем развитии проекта. Спасибо.
26.11.2010 13:14+0300