Веб-дизайн 2016: Chrome атакует!

Веб-дизайн 2016: Chrome атакует!

От автора: 2016 год закончился, всегда интересно вернуться назад и посмотреть, как сильно улучшился рабочий процесс за предыдущие 12 месяцев. Удивительно, как много всего поменялось за год: ваши инструменты, техники.

Лично мне в 2016 году дизайна и UX запомнилось то, что приложения Chrome стали полноценным вариантом веб-дизайна. Я писал в 2016 году о трех из них.

Веб-дизайн 2016: Chrome атакует!

В апреле мы обсуждали BoxySVG Ярека Фокса, крутой и небольшой SVG редактор. Приложение работает в Chrome, но лучше скачать его в виде приложения для ChromeOS.

В сентябре я рассказал вам о Pingendo, инструменте прототипирования, с помощью которого можно создавать прототипы под управлением Bootstrap, а также о еще одном приложении Chrome. С сентября я создал с помощью этого приложения два прототипа.

Практический курс по созданию дизайна сайтов в Photoshop

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

Узнать подробнее

Знакомство с Figma

Однако, возможно, самое большое влияние на мой рабочий процесс в 2016 году оказала ноябрьская статья Адама Рашида Стоит ли Sketch дизайнерам рассматривать Figma?, которую я редактировал. Figma – еще одно приложение для ChromeOS.

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

Веб-дизайн 2016: Chrome атакует!

Спустя шесть месяцев я каждый день пользуюсь Figma. Я не собирался, просто так получилось. У меня есть Sketch, Adobe XD, Photoshop и даже Fireworks, но на данный момент больше времени я провожу в бесплатном веб-приложении.

Так почему Figma?

Это не UI. Sketch стал воплощением того, как должно выглядеть современное приложение для создания дизайнов UI, Figma не ушел далеко в сторону. Слои слева – свойства справа. Если вы работали в Sketch, разберетесь и с Figma (или XD, раз на то пошло).

Кроме того, Sketch файлы обычно без проблем импортируются в Figma. Конечно, этого не достаточно, чтобы перейти на Figma.

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

Есть более удивительная причина (по крайней мере, для меня).

Многопользовательское редактирование в Figma – революция в дизайне

Многопользовательское редактирование – особая фишка Figma, которая значительно отличает приложение от Sketch, Photoshop и даже Adobe XD.

Веб-дизайн 2016: Chrome атакует!

Figma позволяет открывать доступ к дизайну через URL и имя пользователя прямо из приложения. Никаких загрузок и синхронизаций с промежуточными облачными сервисами. Дизайны в Figma живут в онлайне, почти как Google Docs.

Когда два и более пользователей просматривают один дизайна в Figma, вы видите курсоры пользователей, как в Google Docs.

Когда я первый раз увидел это, подумал «эмм… мило». Но со временем я понял, насколько полезна эта функция. Вот почему.

1) Документы Figma – это живые стилевые гиды

Когда вы делитесь документом Figma с другими разработчиками (только просмотр), они могут нажимать на ЛЮБОЙ элемент на странице и просматривать его свойства в правой панели. Свойства, которые можно просматривать:

Практический курс по созданию дизайна сайтов в Photoshop

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

Узнать подробнее

шрифты, размер, насыщенность

ширина и высота

высота строки и внешние отступы

цвет

тени и эффекты

Веб-дизайн 2016: Chrome атакует!

Документы Figma не могут полностью заменить хорошие стилевые гиды, но с их помощью разработчики могут с легкостью отвечать почти на все вопросы по дизайну.

Как-то раз я смотрел, как наши разработчики из Манилы кликали по моему дизайну в Figma, пока я объяснял им все по Skype. В Figma также есть хорошая встроенная система комментариев.

2) Разработчикам не нужно обращаться к вам для мелких правок в графике

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

Веб-дизайн 2016: Chrome атакует!

Более того, полный контроль версий позволяет откатиться к оригиналу в любое время.

3) Не нужно делать отчеты об изменениях для менеджеров проекта

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

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

Заключение

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

Всем ли приложениям данный подход принесет пользу? Скорее всего, нет. Никогда не видел чего-то подобного в Google Docs. Похоже, веб-дизайн и дизайн приложений особенно хорошо подходят для этого.

Тем не менее, глядя на мощ и разнообразие Chrome приложений в 2016 году, я с нетерпением жду, что люди придумают в 2017.

Автор: Alex Walker

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Рисуй крутые сайты, получай заказы и путешествуй!

Пройди практический видео курс по веб-дизайну

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree