как UI-команда Rush Royale поменяла основной рабочий инструмент — Gamedev на DTF

Рассказываем про плюсы и минусы сервиса.

4618
просмотров

Всем привет, меня зовут Евгений Иванов, я дизайнер интерфейсов в студии IT Territory. В этом тексте я расскажу, как перенести рабочий процесс UI-дизайна в Figma на примере готового проекта, какие подводные камни при этом встретятся, в чем плюсы и минусы этого перехода.

Как мы использовали Photoshop и Figma раньше

В 2020 году, когда Rush Royale только разрабатывалась, Photoshop был основным инструментом UI в индустрии. Figma не обладала еще достаточным количеством функций для комфортной работы с таким уровнем артового наполнения. При этом для UX наша студия использовала Figma с самого начала разработки игры.

Когда я пришел на проект, мне передали все наработки по UI в отдельных PSD-файлах. Приступая к работе над фичей, нужно было:

• изучить UX-макеты в Figma, прочитать дизайн;
• среди имеющихся файлов найти экраны и элементы, которые подойдут для работы;
• сделать UI в Photoshop;
• выложить превью готового дизайна в Figma и согласовать его с командой;
• после финализации загрузить PSD и новые спрайты в облачное хранилище. Добавить ссылки на хранилище в Figma, чтобы программисты нашли все, что нужно.

Для одного специалиста на проекте это нормально. Я постепенно запомнил, где все находится, и мог четко и быстро следовать этому плану. Но что делать, если команда растет?

С появлением второго человека стало понятно, что нельзя ввести его в курс дела, просто сбросив гору файлов. Поэтому пришлось делать какие-то наброски UI kit’a, что в Photoshop, конечно, непросто. Файл с кнопками весит 2,5 Гб, а мы работали с огромным количеством контента. Выстроить из таких файлов удобную и понятную систему было сложно.

При этом наша команда продолжала расти — к концу года нас стало уже четыре специалиста на проекте. Количество фичей и их объем тоже увеличились. Общий вес PSD-исходников приблизился к 100 Гб. Ориентироваться в таком объеме было сложно, несмотря на тщательную сортировку по фичам. Ребятам приходилось постоянно спрашивать меня, где что находится, какой макет брать в работу. А мне, соответственно, следить за тем, какие экраны они меняют, чтобы быть в курсе, где актуальные версии.

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

Вторая причина — это проблемы команды программистов при сборке интерфейса в Unity. Photoshop не очень удобен для просмотра размеров и параметров объектов. Тем более, что на каждый экран вам нужно скачивать тяжелый PSD-файл.

Временным решением этой проблемы стал Zeplin — это web-инструмент с плагином для Photoshop, который позволяет просматривать ваши макеты с необходимыми для верстки данными: отступами, размерами, шрифтами и так далее. Для переноса макета в Zeplin каждый экран нужно разобрать на спрайты и потом уже экспортировать через плагин.

Из-за этого решения наша команда начала тратить на разработку UI-фичи на 40% больше времени. На крупных фичах этот перенос ощущался особенно неприятно — уходило много времени на рутинную работу. Программисты были рады интеграции Zeplin в наши процессы — они получили ту функциональность, которая была им нужна. Мы же понимали, что хотим отказаться от Zeplin из-за лишней траты времени и малой полезности этого инструмента для UI-дизайнеров.

Как мы перешли на Figma

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

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

Сначала мы решили сделать несколько тестовых экранов, чтобы проверить, возможно ли это вообще осуществить и принесет ли это нам желаемую пользу. Результат вполне устроил команду программистов. В Figma они видят работу так же, как в Zeplin — со всеми размерами, цветами, шрифтами. Там есть все, что им нужно. Спрайты удобно скачивать прямо из макетов. При этом UI-макеты теперь находятся рядом с UX — не нужно никуда выходить из Figma.

Для нас же стало очевидно, что полностью перерисовать проект в Figma, чтобы все было на векторных фигурах — невыполнимая задача. И нужно что-то делать.

И мы нашли выход — плагин 9-slice, который копирует нарезку спрайтов из Unity. Вот как это работает: закидываем спрайты в Figma прямо из проекта, с помощью 9-slice делаем их тянущимися во все стороны и собираем макеты. Так перенос одного экрана не занимает много времени. Плюс названия спрайтов совпадают с проектными. И чем больше спрайтов заведено в Figma, тем быстрее процесс переноса. Именно этот плагин помог нам решиться на полный перенос проекта в Figma.

Чтобы сделать это, мы собрали скриншоты всех экранов Rush Royal в один файл. И начали поэтапно переносить, начиная с наиболее востребованных макетов, заканчивая какими-то второстепенными экранами.

В итоге команда из четырех человек перенесла основную часть Rush Royale за два месяца, попутно выполняя рабочие задачи. Этого было достаточно для полноценной работы в Figma. Единственный недостаток такого способа — уже нарезанный спрайт нельзя отредактировать или заменить. Вам нужно исправить сам спрайт и нарезать его заново.

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

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

Еще один плюс работы в Figma — наличие библиотеки компонентов, auto layout, различные плагины, которые открыли нам массу возможностей.

• Правильно настроенный макет позволяет посмотреть ресайз под разные аспекты экранов. В Photoshop нам пришлось бы перекладывать все вручную.
• Компоненты упрощают внесение изменений сразу на всех экранах, не нужно открывать множество Photoshop-файлов, чтобы что-то поменять. Это существенно экономит время.
• Библиотека ассетов позволяет зафиксировать уже утвержденные элементы и протащить их по всему проекту. Если нужно что-то обновить, то можно поправить исходник и нажать кнопку «обновить» — все макеты начнут использовать ваши изменения. Вручную ничего менять не надо.
• Мы обсуждаем макеты прямо в Figma — там есть комментарии и внутренние звонки. Очень удобно разговаривать и сразу вносить корректировки во все макеты.

Еще одно преимущество — история версий. Наверное, такое бывало с каждым дизайнером — Photoshop упал и уничтожил вашу работу. Figma сохраняет каждое действие, поэтому молиться на Ctrl+S больше не нужно. Если вы в понедельник встали не стой ноги и испортили свой пятничный макет, всегда можно зайти в историю и вытащить любой вариант макета, который у вас был. В Photoshop приходится записывать дополнительные файлы, чтобы сохранить разные варианты.

Плагин 9-slice не позволяет редактировать нарезанные спрайты. Поэтому дальнейший процесс перехода на Figma выглядит так: спрайты лучше делать сразу в Figma, но собирать их по схеме 9-slice, не прибегая к помощи плагина. Тогда вы сможете тянуть объект во все стороны, сохраняя форму так же, как это делается с плагином. При этом объект все еще можно будет редактировать, а варианты позволят вам добавить новые цвета и параметры.

Такой подход мы применяем в наших новых проектах. Это позволяет нам большую часть редактировать прямо в Figma, минимизируя обращения к Photoshop и плагину 9-slice.

Минусы Figma

Конечно, мы рады, что перешли на Figma, но минусы у сервиса все же есть.

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

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

Часть полезных функций Figma входят в аккаунт с платной подпиской. А в текущей ситуации могут возникнуть трудности с оформлением и продлением подписки, так как Figma не работает с банками, находящимися под санкциями.

Также стоит отметить, что арт-отделу не понравился наш переход на Figma. С PSD-макетами художники могли рисовать прямо в UI. С Figma художникам нужно перекидывать макет обратно в PSD или рисовать поверх скриншота. В этом случае художники чаще обращаются к нам за помощью.

Но самый главный недостаток Figma — это ограничения растрового редактора. Это не Photoshop, тут нет привычных редакторов цвета, нормальных обводок, возможности развернуться с заливками. Да, тут многое можно повторить на векторах, но это будет сложнее и дольше, чем в Photoshop.

Перейдя в Figma, мы стали меньше ощущать рутинность задач. Мы тратим меньше времени на типовые экраны и внесение мелких изменений. И, конечно же, экономим время на Zeplin.

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

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

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

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

• 9 slice scaling
• Similayer
• Pixel perfect
• Scale/skale

Что такое UI-киты и как на них зарабатывать / Skillbox Media

Дизайн

#статьи

• 17 дек 2019

• 16

Роберт Майер рассказывает о UI-китах «на продажу», о том, какие в этом процессе есть тонкости и к чему надо быть готовым.

Vkontakte

Twitter

Telegram

Скопировать ссылку

 vlada_maestro / shutterstock

Роберт Майер

Дизайнер, фрилансер. Сотрудничал с агентствами AdLabs, King Kong (Au). Среди клиентов Adobe, Invision, Škoda, Electrolux, Webflow, «Музторг».

эксперт

об авторе

Дизайнер, фрилансер. Сотрудничал с агентствами AdLabs, King Kong (Au). Среди клиентов Adobe, Invision, Škoda, Electrolux, Webflow, «Музторг».

Ссылки

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

UI-киты могут быть разного размера — от небольшого набора до гигантской полноразмерной дизайн-системы, — а также часто имеют специализацию: для ecommerce-проектов, для dashboard-систем и так далее.

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

Самая распространённая ситуация в моей практике — покупают ради какого-то конкретного экрана или части интерфейса: вырезают фрагмент из исходника и используют в своей работе. Значительно реже работают с китом как с конструктором или используют его регулярно.

По моим наблюдениям, чаще всего это эмоциональная покупка. Из категории «увидел классную штуку, хочу с ней поработать в редакторе» — покрутить, поменять цвета, поиграть со шрифтами. Скорее всего, такая работа никуда не пойдёт и останется в ноутбуке у дизайнера.

Дизайн-системы покупают студии, чтобы наладить процессы разработки продуктов, повысить качество и сократить временные расходы. UI-киты пользуются спросом у фрилансеров junior- и mid-уровней. У них основная задача — сделать проект вовремя и красиво.

Роман Банкс

сооснователь Slice Design

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

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

Возьмём для примера один из самых продаваемых китов на площадке — Baikal UI Kit от потрясающих ребят из Great Simple. Его цена $58, он был куплен 368 раз, это значит, что выручка составляет $21 344!

Но не спешите радоваться. Во-первых, комиссия площадки за неэксклюзивное размещение составит $2 + 55% от стоимости продукта. Это означает, что из всей суммы продаж доход авторов — лишь $9 273. Кроме того, UI-кит был размещён на площадке в декабре 2015 года, что в пересчете даёт нам всего $201,5 в месяц!

Эти цифры покажутся совершенно несерьёзными, если вы сравните их с самым популярным шаблоном для WordPress. Всё ещё хотите делать киты? Кстати, в этом видео Алексей Рыбин из Great Simple подробно рассказывает о том, как они работали над этим и другими продуктами:

Дмитрий Бунин

CEO BuninUX

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

• иллюстрации;
• наборы иконок;
• шаблоны для Webflow/Tilda;
• плагины и скрипты для Figma/Sketch;
• мокапы;
• 3D-объекты;
• конструкторы флоучартов;
• шаблоны презентаций;
• паттерны.

Чем успешнее ваш продукт решает задачи дизайнера, тем популярнее он будет. Однажды мне надоело каждый раз кропать лица из фотографий в Unsplash для аватарок пользователей, и я подготовил нарезку в трёх форматах. Разместил её на Behance, в Dribbble и Twitter. На сегодня её скачали 5000 человек и прислали мне $65 чаевых. Да, это мелочь — но и сам продукт небольшой, я потратил на него не больше пары часов. Так что продуктом или инструментом в данном случае может быть всё что угодно.

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

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

Важная сторона любого коммерчески успешного продукта — пиар. Начиная с определённой планки качества людям уже не так понятно, чем ваш продукт лучше другого, похожего, поэтому важно быть на виду и демонстрировать собственный профессионализм. Писать статьи, рассказывать о себе и своих продуктах. В этом особенно преуспели UX Power Tools — их блог на Medium сейчас читают больше 24 тысяч человек. При этом их основной продукт — дизайн-система для Sketch App.

Запуск продуктов на Product Hunt до сих пор даёт мощный импульс вашим продажам. PH — прекрасная платформа для привлечения новых пользователей и получения ценных отзывов. Но к запуску на ней нужно хорошо подготовиться.

Стандартная практика — предлагать часть продукта или урезанную версию бесплатно, так называемое freebies. Это очень эффективное средство продвижения платных продуктов.

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

Если у вас нет внушительного количества подписчиков и лояльной аудитории дизайнеров, скорее всего, продавать продукты на собственном веб-сайте на первом этапе будет проблематично. Поэтому лучше стартовать с маркетплейсов, параллельно работая над собственным брендом и его продвижением. Наиболее активные площадки сейчас:

• UI8;
• Envato Elements;
• Designmodo;
• Creative Market;
• Craftwork Design;
• Themeforest.

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

Площадки типа UI8, Creative Market не раскрывают данные о твоих покупателях. Без этих данных невозможно построить грамотную коммуникацию и маркетинг.

Роман Банкс

сооснователь Slice Design

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

1. Если ваш UI-кит классный, скорее всего, его быстро скопируют и появится десяток подобных. Я видел случаи, когда копии оказывались гораздо популярнее, чем оригинал.
2. Эта работа может быть крайне однообразной и изматывающей.
3. На UX и логику в компонентах почти наверняка придется забить и делать дриббл-дизайн. Это может стать плохой привычкой для продуктового дизайнера.

Вполне реально зарабатывать $5–10 тысяч долларов в месяц на продаже одних только UI-китов и готовой графики. Такие примеры есть, и, я уверен, при правильном подходе можно найти свою нишу — рынок большой и динамичный. Другой вопрос, насколько вы готовы работать в условиях, когда все вокруг выпускают очень похожие продукты, а крупные компании в любой момент могут свести на нет все ваши усилия.

Хочу напоследок показать пару ссылок и интервью с крутыми профессионалами, которые во многом сформировали эту индустрию и не перестают радовать качеством своих продуктов.

• L Store;
• Files.Design;
• Slice Design;
• UX Power Tools;
• Nice Very Nice.

Vkontakte

Twitter

Telegram

Скопировать ссылку

Профессия Графический дизайнер

Вы узнаете, как создавать айдентику бренда в вебе и для печати. Научитесь работать в Illustrator, Photoshop, InDesign и Figma. Добавите в портфолио плакаты, логотипы, дизайн мерча и другие сильные проекты. Начнёте карьеру в студии или на фрилансе.

Узнать про курс

Учись бесплатно:
вебинары по&nbspпрограммированию, маркетингу и&nbspдизайну.

Участвовать

Обучение: Профессия Графический дизайнер
Узнать больше

Умерла Вивьен Вествуд
30 дек 2022

В Петербурге появились четыре новых арт-объекта
30 дек 2022

Adobe представила виртуальную гримёрку Дэвида Боуи
28 дек 2022

Понравилась статья?

Да

Справочник по дизайну

Figma (часть 1).

Как начать свой путь дизайнера… | Дэвид Укаува | Friends of Figma Lagos

Как начать свой путь дизайнера с Figma

Серия проектов по Figma

Цель этой статьи — познакомить вас с инструментами Figma. Давайте начнем с первого инструмента, который вам понадобится для создания адаптивного дизайна.

1. Инструмент «Рамка»: Инструмент «Рамка » создает артборд для ваших рисунков. Он расположен в верхнем левом углу экрана и при нажатии на него отображает пару размеров экрана на правой панели инструментов. Figma имеет несколько размеров экрана, что упрощает запуск ваших проектов. От смартфонов и ноутбуков до баннеров в социальных сетях, часов и размеров бумаги.

2. Slice Tool: Инструмент s lice позволяет разделить изображение на более мелкие части, которые соединяются вместе, как мозаика (но с прямыми краями). Нарезка изображения полезна, если у вас есть большое изображение, разбивая его на части. Части изображения начнут загружаться первыми, давая пользователю знать, что дальше будет больше. Это полезно для пользователей с медленным соединением.

Рамка со срезом

3. Инструменты формы : В раскрывающемся меню инструмента формы показаны 6 различных инструментов. Эти инструменты позволяют создавать любые мыслимые геометрические фигуры. Можно создавать квадраты, треугольники, ромбы, трапеции и шестиугольники. Их можно использовать в качестве кнопок и других компонентов пользовательского интерфейса. 9Варианты фигур 0005 в Figma

Советы и подсказки:

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

4. Перо и карандаш Инструменты: Перо — лучший инструмент для создания векторов. Он позволяет вам определять свои собственные опорные точки, а также настраивать кривую, связанную с этими опорными точками, манипулируя двумя контрольными точками, связанными с каждой опорной точкой. р 9Инструмент 0012 encil больше ориентирован на иллюстраторов, поскольку он используется для рисования линий произвольной формы путем перетаскивания курсора вдоль сцены. Его можно настроить для рисования прямых линий и плавных кривых.

Редактирование векторов с помощью Figma

5. Инструмент Text: Инструмент text — один из самых мощных инструментов в вашем наборе инструментов, потому что он открывает дверь во множество предварительно разработанных библиотек шрифтов. Figma совместима с любым шрифтом Google, так как они уже импортированы на вашу доску. При использовании настольного приложения можно использовать внешние шрифты, если они установлены на вашем компьютере. Но вам необходимо установить вспомогательный пакет шрифтов Figma, если вы используете веб-версию.
Чтобы разместить текст на холсте, вам нужно всего лишь выбрать текстовый инструмент на панели инструментов и щелкнуть на холсте в той области, где должен появиться текст. Когда вы это сделаете, справа появится текстовая панель инструментов, которую можно использовать для изменения шрифта, размера шрифта, высоты строки, межстрочного интервала, интервала между абзацами, выравнивания и других параметров текста.

Текстовая панель на Figma

6. Инструмент для комментариев: В Figma есть инструмент комментариев в приложении, который позволяет вам прикреплять комментарии к дизайну напрямую. Это позволяет клиентам общаться с дизайнерами в режиме реального времени, что приводит к более быстрой доставке продукта. Чтобы использовать это, щелкните инструмент комментариев или нажмите «c» и прикрепите значок комментария к слою, который вы хотите прокомментировать. Если на доске несколько дизайнеров и клиентов, вы можете сортировать сообщения с помощью @упоминания, чтобы легко привлечь внимание людей; вы просто вводите символ «@», за которым следует имя человека, и он получает уведомление по электронной почте, а также уведомление на Figma.

7. Инструмент перемещения и масштабирования: Инструмент перемещения позволяет перемещать выделение или весь слой, перетаскивая его мышью. Это первый инструмент на панели инструментов, который также можно выбрать, нажав «v». По умолчанию, если выделена область, выделение будет перемещено, в противном случае будет перемещен весь слой. Инструмент move можно использовать для других функций, таких как копирование слоев, а также выбор и выравнивание нескольких слоев. Чтобы выровнять несколько слоев, выберите их и используйте полосу выравнивания в правом верхнем углу, чтобы выровнять слои.

Панель выравнивания

Инструмент масштаб используется для увеличения размера слоя при сохранении тех же пропорций. Допустим, у вас есть круг 35×35 пикселей, инструмент масштабирования может увеличивать и уменьшать круг так, что он может быть только 25×25 пикселей, а не 25×26 пикселей.

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

БУМ!!!

Вы можете присоединиться к нам в Slack в https://figma-africa.slack. com , следите за нами в твиттере по телефону https://twitter.com/figma_africa

902000 Основы Figma & Sketch — Учебник — The Spot

ПРИМЕЧАНИЕ. В этом небольшом руководстве я буду использовать Figma для демонстрации. Однако имейте в виду, что почти все также относится к Sketch и Adobe Xd.

Что такое Figma и Sketch?

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

Figma

Figma — это онлайн-инструмент для совместной работы, который работает прямо в вашем браузере, поэтому вы можете использовать его независимо от того, используете ли вы Windows или Mac. Однако это также означает, что вы можете использовать его только при подключении к Интернету. Вы можете загрузить настольное приложение, если оно вам более удобно, но оно ничем не отличается от браузерной версии. Вы можете использовать его совершенно бесплатно, если вы не работаете в организации. Здесь вы можете использовать Figma.

Sketch

Sketch — это настольное приложение только для Mac. Вы можете получить бесплатную 30-дневную пробную версию. После этого, если вы хотите сохранить его, вам нужно будет заплатить 99$ за разовую покупку. Однако вы будете получать обновления только в течение одного года. Если вы хотите продолжать получать обновления после этого, вам нужно будет снова купить лицензию. Вы можете получить Sketch здесь.

Начало работы

После создания нового документа в Figma или Sketch вы увидите вот такой интерфейс (см. ниже). Там не так много, верно? Figma и Sketch предоставляют только самое необходимое для начала работы после создания нового файла. Вверху у вас есть инструменты (в порядке слева направо: «Переместить», «Рамка», «Прямоугольник», «Перо», «Текст» и «Комментарий», с дополнительными инструментами в каждом раскрывающемся списке). В Sketch все эти инструменты расположены в левом верхнем углу под «Вставить». Однако вы можете изменить расположение панели инструментов вверху по своему вкусу. С левой стороны будут ваши рамки/монтажная область и ваши слои, а с правой стороны будут некоторые настройки для изменения значений текста, цвета, форм и т. д. У вас также есть функции прототипирования на другой вкладке справа.

Инструменты

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

Инструменты перемещения и масштабирования

Инструмент перемещения

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

Инструмент «Масштаб»

Под инструментом «Перемещение» вы найдете инструмент «Масштаб». Это то, что вам следует использовать, когда вы хотите увеличить или уменьшить масштаб таких вещей, как значки, которые вы импортировали в свой документ. Это связано с тем, что инструмент «Масштаб» идеально сохраняет пропорции элемента, а инструмент «Перемещение» — нет (даже если вы удерживаете Shift). Горячая клавиша для инструмента «Масштаб» — «K»

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

Инструмент «Рамка»

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

Инструмент «Срез»

Инструмент «Срез» предназначен для экспорта определенной области экрана. Поместите его в область кадра, которую вы хотите сохранить как изображение, выберите фрагмент, затем прокрутите вниз до «Экспорт» в правой части интерфейса, нажмите +, затем экспортируйте его! У вас будет изображение всего, что находится под этим слоем.

Инструменты формы

Инструменты формы

Это довольно просто, и вы будете использовать их часто. С помощью инструмента «Прямоугольник» вы можете создавать прямоугольники и квадраты. Инструменты линии и стрелки создают линию с помощью обводки. С помощью инструмента «Эллипс» вы можете создавать круги и овалы. С помощью инструмента «Многоугольник» вы можете создать форму с 3 или более сторонами, а с помощью инструмента «Звезда» вы можете создать звезду с 3–60 точками. Вы также можете импортировать изображение в свой файл с помощью инструмента «Поместить изображение».

Инструмент «Перо»

Инструмент «Перо» особенно удобен для создания значков. Если вы знакомы с инструментом пера Illustrator, инструмент пера Figma и Sketch должен быть очень похож.

Карандаш

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

Инструмент «Текст»

Инструмент «Текст» вы будете использовать постоянно. Figma по умолчанию использует Roboto 12pt. Вы можете изменить это (и многое другое) на панели «Дизайн» в правой части экрана. Также приятно отметить, что в Figma есть вся встроенная библиотека Google Fonts, а в Sketch ее нет. Вам нужно будет загрузить шрифты, которые вы хотите использовать, если их еще нет на вашем Mac, если вы используете Sketch.

Инструмент комментариев

Это довольно просто. С помощью инструмента «Комментарий» вы можете оставить комментарий в любом месте экрана. Это особенно полезно, когда вы работаете с другими людьми или хотите оставить себе несколько заметок. В Sketch такой возможности нет.

Панель «Слои»

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

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

Панель дизайна

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

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

Типографика – наука о шрифтах и их восприятии.

Как оказалось, многие вообще никогда не слышали такого термина как «типографика», а те, кто слышал, имеют довольно смутное представление о его сущности.

19 ноября на базе тульского детского технопарка «Кванториум» состоялся мастер-класс по типографике. Типографика – это оформление текста при помощи печатных символов, другими словами – наука о шрифтах. Люди привыкли не замечать этот, казалось бы, малозначительный элемент повседневности; а ведь от того, как напечатан текст, зачастую зависит и то, как он будет воспринят, правильно ли будет понят его смысл. Ильичев Иван поговорил с детьми о том, как сделать так, чтобы текст смотрелся красиво, какие бывают шрифты, какие из них сейчас наиболее популярны, а какие лучше вообще не использовать.

Начался мастер-класс с того, что ребята узнали, чем же отличается типографика от каллиграфии. В каллиграфии мы пишем буквы. В каллиграфии четко видна ручная работа над надписью, и здесь характерны скорость и неповторимость живого штриха. Инструментов много, от классических перьев, кистей и специальных маркеров, до креативных и самостоятельно придуманных, например, попробуйте написать свое имя ногтем мизинца левой руки, макнув его в краску — уникальность гарантирована. Таким образом, каллиграфия имеет очень широкий диапазон, но требует таланта и любви к трудоемкому процессу учиться красиво писать. В типографике же мы используем шрифты. Это творческая работа с готовыми шрифтами. Возможностей такой работы очень и очень много, от расстояний между буквами и строчками в тексте, до композиционных экспериментов. Шрифтовой набор — уже готовый одностильный набор графики в распоряжении дизайнера, но управление таким набором требует немалого опыта, наличие вкуса и творческого мышления. Спектр работы с типографикой еще шире, от логотипов и постеров, до верстки изданий и навигации. С типографикой, (в отличие от каллиграфии), сталкивается ежедневно каждый дизайнер, и потому это оружие действительно основное – готовых шрифтов полно у каждого. Характерны более общие понятия: композиция, баланс, гармония, контраст, акценты… Попробуйте для начала разобраться в разновидностях и типах шрифтов, затем переходя к более тонким приемам работы, закрепляя знания на практике.

Ильичев Иван познакомил детей с необходимыми шрифтами, среди которых Garamond, Baskerville, Bodoni – с засечками и Helvetica – без засечек.

Garamond – классическая элегантность, зрелый без скучности. Baskerville – изящный, величественный, прекрасно простой. Bodoni – элегантный, личный, классический, но с нотками современности. Helvetica – нейтральный без скучности, простой, современный.

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

Также Ильичев Иван рассказал ребятам, что в процессе отбора шрифта необходимо помнить о трёх принципах: читабельность, разборчивость, цель. Соответственно, прежде чем выбирать шрифт, необходимо продумать, с какой целью он будет использован. Что касается сочетаний шрифтов, они не должны быть слишком сложными — необходимо ограничится тремя разными типами, не больше. Кроме того, подбирать надо контрастирующие шрифты. Это поможет направить взгляд пользователя: сначала к заголовку, затем к основному тексту. Также создавать визуальный контраст можно при помощи разных размеров, цветов и начертаний.

Многие люди считают термины «шрифт» и «гарнитура» синонимами. На самом деле это два разных понятия. Гарнитуры – это набор типографических знаков и символов. Это буквы, цифры и другие символы, при помощи которых мы составляем слова на бумаге.

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

Рукописные гарнитуры, исходя из названия, имитируют чей-то почерк или каллиграфический стиль. Различают два подтипа: формальные и неформальные. Формальные часто напоминают стиль рукописных букв 17-го и 18-го веков. У всех них есть нечто общее – элегантный, благородный типографический дизайн. Такие гарнитуры не подходят для набора основных текстов. Неформальные рукописные шрифты больше напоминают современные почерки, и появились в середине 20 века. Они не такие строгие по форме, с широкими штрихами и часто напоминают имитацию письма мягкой кистью. Пример подобных шрифтов – Mistral и Brush sсript. Ацидентные (декоративные) шрифты – пожалуй, самая большая по количеству шрифтов категория. Главная их отличительная черта – они не годятся для набора основного текста и предназначены для заголовков и других небольших отрывков текста с целью привлечения и акцентирования внимания. Акцидентные шрифты могут быть формальными или неформальными, и отражать любое настроение. К акцидентным можно отнести и готические гарнитуры, по рисунку имитирующие средневековые рукописные почерки ширококонечным пером.

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

Типографика – наука, искусство, философия или мастерство?

Типографику можно отнести к различным категориям. Типографика – часть нашей жизни, поэтому давайте попробуем провести анализ. Merriam-Webster определяет типографику как 1) высокая печать, и 2) стиль и оформление печатного текста посредством набора и верстки. Современные термины могут относить ее к разделу графического дизайна.

Как и большинство сфер дизайна, типографика включает в себя элементы науки, искусства, философии и мастерства. Если мы воспринимаем типографику, как средство передачи человеку чего-то понятного – то речь идет о науке. Например, в 1929 г. в журнале D. G. Paterson и M. A. Tinker под названием “Исследования типографических факторов, влияющих на скорость чтения: II. Размер шрифта”, они обнаружили, что 10ый размер способствует быстрому чтению.

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

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

Это граффити состоит исключительно из слов, которые оформлены таким образом, что делают его очень колоритным.

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

Нелюбимый всеми Comic Sans, например, может быть использован в детской среде, в то время как стандартный Times New Roman, и другие стили без засечек, как правило, связаны с более профессиональным использованием.

Источник изображения: Gizmodo.

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

Источник изображения: Anatomy of Typography.

Заинтересованы в философии типографики? Что-то подобное вообще существует? Просмотрите работу Steven Acres “Философия типографики“. Он утверждает, что “Титульный лист задает настроение для остальной части книги, при этом он должен отражать текст”. Нет сомнений, что определенные тексты могут означать разные вещи. Например, когда вы видите “ПРОЧТИТЕ ЭТО СЕЙЧАС”, это вызывает различные чувства по сравнению с “прочтите это сейчас”.

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

Некоторые шрифты выглядят формальными и женственными, а нарисованные от руки могут забавно выглядеть, как на страничке юмора в газете the Sunday.

Кроме того, как упоминалось ранее, существует разница между тем, как используют Comic Sans и Times New Roman. Округлые формы шрифта Comic Sans могут ассоциироваться с любительским дизайном, или стилем, который, возможно, игрив. В Times New Roman, с другой стороны, больше формальности.

Решите для себя:

Создание типографики – это искусство и мастерство. Кто-то когда-то нарисовал все эти шрифты, которые мы так любим.

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

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

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

Высоких конверсий!

23-03-2016

10 Отличные шрифты STEM и Science

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

Подпишитесь на наш канал Youtube

1. ТР2Н

TR2N напоминает культовую классику Диснея Tron . Этот шрифт состоит только из заглавных букв и цифр и предназначен не для длинных документов, а для заголовков и привлекающих внимание дизайнерских работ. Шрифт хорошо сделан и читабелен (каким бы он ни был), но он стилизован, так что вы должны помнить об этом. Однако, когда дело доходит до научных шрифтов (ну, научно-фантастических), вы не можете стать намного сильнее, чем TR2N. Лучше всего то, что шрифт бесплатен для коммерческого использования, поэтому вам не о чем беспокоиться в этом отношении. 92 таблички на всякий случай. (И многое другое.) Другими словами: это хорошие вещи, которые вы должны скачать.

3. ВЗЛОМАНО

HACKED — почти типичный постмодернистский научный шрифт. Представитель вездесущего глючного экрана, который указывает на взлом во многих формах носителей, шрифт хорошо разработан и независимо от того, какие слова или фразы вы соедините, всегда остается разборчивым. Коллекция включает в себя ряд символов (и цифр тоже). Хотя только два символа имеют фирменный дизайн хакерского сбоя. Хэштег и знак доллара — это два. Вы можете скачать ВЗЛОМАН бесплатно. Кроме того, вы можете свободно использовать его в коммерческих проектах.

4. Примус

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

5. Родденберри

Созданный по образцу оригинального заглавного шрифта Star Trek , Roddenberry заслуживает места на каждом компьютере, даже если он думает об использовании шрифта, связанного с STEM.

6. космический мусор:XL

Если вам нужен шрифт, который одновременно выглядит футуристично и слегка винтажно, spacejunk:XL хороший вариант. Простой шрифт spacejunk:XL не является моноширинным шрифтом, поэтому вы можете использовать его для создания динамических дисплеев, привлекающих внимание читателей, без необходимости углубляться в тонкую настройку Photoshop или Illustrator.

7. Молекулы BP

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

8. Звезда Смерти

Давным-давно, в далекой-далекой галактике…

Извините, не удержались. Однако, если вы хотите, чтобы научный шрифт вызывал у вашей аудитории ностальгию по Star Wars , Звезда Смерти — то, что вам нужно. Одной из самых интересных особенностей набора «Звезда Смерти » являются включенные лигатурные символы, которые придают винтажным постерам фильмов их культовый вид. Шрифт можно загрузить бесплатно; однако, пожертвовав 15 долларов (или купив коммерческую лицензию), вы получаете доступ не только к обычной версии (заблокированной), но и к форме плана. Это неплохая цена за два отдельных шрифта, которые действительно могут оживить любой дизайн, который вы хотите сделать сразу узнаваемым.

9. Компьютер 7

У компьютеров 1980-х годов был уникальный стиль шрифтов. Это не было продолжено в более поздних поколениях компьютеров (по крайней мере, по умолчанию), но вы можете вернуться к воспоминаниям об Apple IIe и Commodore 64, используя Computer 7 . Первоначально отображаемый в пикселях, вы получаете гораздо больше гибкости от Computer 7 . Этот шрифт отлично подходит для создания заголовков и больших текстовых дисплеев, которые должны напоминать о ретро-вычислениях, но из-за его происхождения в реальных вычислениях для повседневного использования вы можете очень легко составлять разборчивые длинные документы с его помощью. Тем не менее, мы предлагаем вам использовать более современные шрифты для чего-то большего, чем блоки текста. Компьютер 7 можно загрузить бесплатно для домашнего использования, но вам потребуется приобрести лицензию за 24,95 долл. США, если вы собираетесь использовать ее в коммерческих целях. Он также поставляется с прописными и строчными буквами, цифрами и символами.

10. Научный проект

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

Подведение итогов

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

В каких проектах вы используете научные и STEM-шрифты?

Изображение статьи pro500 / Shutterstock.com

Как выбрать правильный шрифт для вашей работы

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

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

Существует ряд исследований, посвященных типографике, чтобы найти хорошие основания для выбора определенного шрифта для определенной категории проектов.

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

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

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

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

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

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

Какое значение имеют шрифты?

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

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

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

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

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

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