Дизайнерские вкусняшки

Posted by Evgenia
Июль 21, 2015 Add a comment

Проектирование интерфейса программы… что это могло бы значить? Еще недавно я и сама не могла ответить на этот вопрос. Однако по мере знакомства с продуктом, могу сказать, что разработка собственного интерфейса требует планомерной и кропотливой работы как программистов, так и дизайнеров.
 
soft
 
В сегодняшней статье мне бы хотелось рассказать о тех инструментах, которые наши дизайнеры всегда держат под рукой для создания не только привлекательных глазу пользователя интерфейсов ONLYOFFICE, но а так же об инструментах, которые помогут создать что­-то новое, выходящее за рамки однообразной работы. Cледующая подборка инструментов ­ прямое тому доказательство.
 

Безусловным лидером среди графических редакторов является Adobe Photoshop. Этот мощнейший пакет программ приобрел популярность за счет своих широких возможностей по созданию и редактированию изображений, качества и состояния изображения, высокой скорости работы и эффективности. Одним словом, Photoshop CS6 превратился в программу номер 1.
 
№1 Adobe Photoshop CS6
 
Программное обеспечение Adobe Photoshop CS6 это некий стандарт, который представляет собой графический редактор для обработки растровых изображений, фото, коллажей, изображений для веб-страниц, иллюстраций. Программа позволяет выделять и маскировать сложные элементы (ретушировать / корректировать изображение), убавлять и добавлять резкость. Adobe Photoshop CS6 обладает большой палитрой возможностей для создания интерфейса. Достаточно нескольких кликов для того чтобы собрать простой прототип страницы.

Adobe Photoshop — действительно мощнейший редактор с массой возможностей. Основная часть работы над подготовкой макетов интерфейсов ONLYOFFICE, а также проработка контролов и их состояний, разметка и нарезка страниц, — всё это и многое другое становится возможным благодаря богатому арсеналу инструментов проектирования в Photoshop. В своей работе используем пока версию Photoshop CS6, но стоит отметить, что новая версия Photoshop CC предоставляет еще больше возможностей для совместной работы, быстрого обновления всех макетов проекта при изменении общих ресурсов, расширенную работу для подготовки макетов под разные устройства и многое другое.

Аня, руководитель отдела дизайна и проектирования ONLYOFFICE

 
01_Adobe_Photoshop
 
№2 Adobe Illustrator CS6
 
Adobe Illustrator CS6 полезен для работы с векторной графикой. Разрешает создавать и редактировать векторные объемы любой сложности, трансформировать их (вращать, масштабировать), сохраняя четкую графику документа. Adobe Illustrator незаменим при создании графических заголовков, логотипов, рисунков, технических иллюстраций, схем, диаграмм.

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

 
02_Adobe_Illustrator
 
№3 Adobe AfterEffects CS6
 
Эффекты способны добавить сайту немного шарма и привлечь внимание. Так, Adobe AfterEffects CS6 является одним из способов работы с видеоматериалом, анимацией, рекламными роликами, созданием различного рода эффектов. Построение текста в формате 3D не требует использования дополнительных анимационных инструментов, что упрощает рабочий процесс и делает его более быстрым.

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

03_Adobe_AfterEffects
 
№4 InVision
 
InVision — ­платформа, предназначенная для командной работы, которая дает возможность в короткие сроки создать не просто макет продукта, сайта или приложения, а его интерактивный прототип. Данный онлайн­ инструмент делает возможным отследить готовность продукта как разработчикам, так и заказчикам, благодаря его работе в режиме реального времени. InVision разрешает организовывать онлайн-дискуссии, комментировать существующие проекты или прототипы.

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

 
04_InVision
 
№5 Бумага и карандаш
 
Начинать проектирование сайта нужно с создания чернового эскиза. Поэтому без чистого листа бумаги и карандаша не обойтись, они и являются двумя основными, классическими инструментами дизайнера. Найти композицию, расположить блоки, элементы и требуемые иллюстрации. Выразив свои мысли наглядно на листе бумаги, можно смело садиться за компьютер.

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