Connect with us

Дизайн и прототипирование

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

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

AppTractor

Опубликовано

/

     
     

Дуг Стюарт из Kongregate написал о том, как придать индивидуальность игре при помощи шрифта и о том, как сделать это правильно.

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

Основы, которые вам надо знать

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

1

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

Также обратите внимание на засечки – это то, что люди имею ввиду, когда говорят о Sans Serif, slab serif и serif шрифтах. Примеры каждого вы можете увидеть ниже:

2

[notice]Шрифты slab serif – это класс шрифтов, у которых серифы имеют форму пластин (то есть широких линий или прямоугольников). Шрифты slab serif часто, но не всегда, легко читаются. Поскольку серифы простые и строгие, они создают ощущение того, что символы “вбиты” в страницу.[/notice]

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

3

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

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

На что смотреть, выбирая шрифт

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

О каком временном периоде будет игра?

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

4

Эти шрифты очень стилизованы, но вам заходить так далеко не обязательно. В простейшем случае, шрифты с засечками всегда чувствуются старше. Причина этого заключается в том, что они разрабатывались поколениями до нас. Sans-serif шрифты всегда ощущаются современными или футуристическими, так как, собственно говоря, они новое явление, возникшее в конце 19 века.

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

Если вам нужны примеры, то я привел их в конце, вот три источника, которые я бы рекомендовал:

Какой текст я буду использовать вместе с этим шрифтом?

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

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

На каких языках будет моя игра?

Может быть, вы планируете выпустить игру только на своем родном языке, или, возможно, вы собираетесь выпустить ее на десятках языков. Если вы планируете переводить игру, очень важно посмотреть на набор символов шрифта и дважды проверить поддержку языков. Действительно хорошо разработанные шрифты, такие как Open Sans, имеют прекрасную поддержку языков для большинства романских алфавитов. К сожалению, вы вряд ли найдете один шрифт, покрывающий всея языки – если вы захотите выйти за пределы латиницы и использовать кириллицу или языки Азии.

Мой главный совет

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

Лицензирование шрифтов

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

Коммерческие лицензии

Эти шрифты вы покупаете у создателей или распространителей, и они предлагают три варианта, которые могут вам понадобиться:

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

Бесплатные (в основном) лицензии

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

Лицензии на личное использование

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

Где искать хорошие шрифты

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

Бесплатные шрифты

Вот моя подборка:

Список ни в коем случае не является исчерпывающим. Вы можете поделиться своими сайтами в комментариях.

Коммерческие шрифты

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

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

Как это выглядит, когда хорошо сделано?

Теория — это хорошо, но в конце концов она должна привести к практике. Вот некоторые примеры игр, в которых шрифты помогли созданию стиля:

 

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Как создание эмодзи Apple изменило мою жизнь

Одна из создательниц оригинального набора эмодзи Apple Анджела Гузман рассказала, как эти символы изменили не только способы общения между людьми, но и её собственную жизнь, подарив ей несколько ценных уроков и близкого друга.

Анна Гуляева

Опубликовано

/

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

Я была стажеркой, а Реймонд — это мой друг и ментор. За три месяца мы создали некоторые из самых используемых эмодзи: лицо со слезами от смеха, кучку какашек, красное сердце и хлопушку, а также ещё 460 менее используемых. Затем мне удалось сделать кое-что ещё в качестве сотрудницы Apple.

Это было лето 2008, и прошел только год с момента получения мной степени магистра графического дизайна в Школе дизайна Род-Айленда. Этим же летом я попала на стажировку в Apple и очень ждала знакомства с командой – той же самой, что была ответственна за iPhone, за это волшебное устройство, которое появилось годом ранее. Можете только представить, сколько бабочек было у меня в животе, когда я прилетела в Купертино и прибыла на 1 Infinite Loop. Я не знала, над каким проектом буду работать, размер команды, где я буду сидеть и смогу ли я действительно ездить на велосипеде на работу (я ужасно езжу на велосипеде).

Вскоре после прибытия и встречи с командой мне дали мой проект. Я пыталась понять полученную задачу, когда кто-то спросил, знаю ли я, что такое «эмодзи». Как и большая часть англоговорящих людей в то время, я ответила: «Нет». Но это изменилось, как только для iPhone выпустили клавиатуру с эмодзи и сделали их популярными во всем мире. Чуть позже я узнала, что значило это японское слово и что мне предстоит нарисовать сотни эмодзи. Пока я смотрела вниз и обдумывала, что это не работа с макетом или шрифтом, а просто рисование иллюстраций, мне назначили ментора.

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

Реймонд создал лицо со слезами радости и кучку какашек, а я нарисовала красное сердце и хлопушку.

Реймонд научил меня всему, что нужно было знать о дизайне иконок. Я не знала, что он, мой скромный наставник, был одним из лучших дизайнеров иконок в мире. Другими словами, я сидела рядом с одним из лучших создателей иконок, использовала его знания для обучения до тех пор, пока я не могла начать работать сама, и обменивалась с ним историями о взрослении в Южной Флориде и поездках в Pollo Tropical в поисках отличных подорожников. Урок скромности пройден.

Моим первым эмодзи стало обручальное кольцо, и я выбрала его из-за сложных текстур металла и граненого камня, которые было сложно нарисовать новичку. Металлическое кольцо заняло у меня целый день. Довольно скоро я могла бы сделать два таких кольца за день, потом три и так далее. Несмотря на то, что я могла бы быстро рисовать эмодзи, не слишком волнуясь о качестве, я постоянно следила за деталями: структурой древесины, крапинками на яблоках и баклажанах, жилками листьев на гибискусе, стежками кожи на мяче — деталей было бесконечно много. Я пыталась уловить каждый пиксель, потому что каждая деталь имела значение. За три месяца через мой экран прошли сотни эмодзи. В то же время у нас был первый обзор от Стива Джобса, который заставил нас напряженно ждать результата, но нашу работу утвердили. И если Стив сказал, что всё хорошо, я считаю, что урок в мастерстве тоже пройден.

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

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

Забавные истории, понимание того, что наши школы находились менее чем в 30 милях друг от друга, общее прошлое и дни совместной работы привели к тому, что вместе мы постоянно смеялись до слез. Через десять лет после моей стажировки мы с Реймондом постоянно смеемся и он дает мне самые честные отзывы, и наоборот. Я верю, что эмодзи стали успешными благодаря нашей дружбе через дизайн.

Когда я заметила постоянно меняющийся камень в парке Бернал-Хайтс в Сан-Франциско, мы с Реймондом решили, что должны отдать дань волшебной кучке какашек. Фото 2016 года.

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

Стоит заметить, что хотя Реймонд и я, Анджела Гузман, являемся оригинальными создателями эмодзи, ответственными за 500 символов (на которые получили патент), конечно, в Apple есть и другие дизайнеры. Олли Вагнер создал около десятка эмодзи для оригинального набора после завершения моей стажировки и ещё больше — в следующем году. Сейчас количество эмодзи составляет примерно около 1000, и некоторые из них ещё и анимированы.

Десять лет назад мы с Реймондом работали над одним из моих самых любимых проектов, который привел меня к чувству своего икигай. Этот японский термин означает место, в котором страсть, миссия, призвание и профессия человека пересекаются; то, что можно назвать причиной просыпаться по утрам — это точно я в 2008. Я с радостью просыпалась, и если мне нужно было ехать на велосипеде, я несла его на три пролета вниз и ехала на работу с улыбкой на лице. Это магия!

Подарок от Реймонда на окончание моей стажировки — его реальная версия эмодзи. Апельсин, яблоко и баклажан были созданы мной.

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

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

Podlodka #42: Дизайн-системы

В последнее время в сообществе разработчиков все чаще упоминаются некие “дизайн-системы”.

Леонид Боголюбов

Опубликовано

/

Podlodka

С тем, что это такое и как это применимо к мобильному миру, нам помог разобраться Александр Зимин – iOS-разработчик из Badoo!

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

11 советов от мастеров мобильного UX

Компания Monsoonfish поговорила с опытными UX-дизайнерами и попросила их поделиться одним советом, который они считают основным при создании хороших приложений.

Анна Гуляева

Опубликовано

/

UX-дизайн напрямую связан с качеством вашего приложения. В удержании пользователей само приложение играет столь же важную роль, что и маркетинговые кампании — пользователям должен нравиться опыт взаимодействия с приложением, иначе они уйдут.

Мы связались с экспертами UX, чтобы задать им этот вопрос: что вы считаете главным в создании отличного мобильного приложения?

Билл Уилсон, основатель MindSea

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

Рой Вергара, главный UX-дизайнер в Zappos

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

Уэс Лебсек, продуктовый дизайнер в Facebook

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

Джошуа Молдин

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

Йони де Бель, руководитель отдела дизайна в Yelp

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

Эдди Контенто, вице-президент UX в ChopDawg

Живите по принципу «Меньше — лучше». Выстраивайте UX вокруг ваших основных целей. Не перестарайтесь, ваши пользователи не хотят думать.

Гленн Хичкок, ведущий продуктовый дизайнер в Fueled

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

Френк Рауш, UX-типограф в Raureif

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

Дженнифер Уэкслер, фриланс UX-дизайнер

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

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

Пол Хершли, главный UX-дизайнер в Electronic Arts

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

Тиентам Бах, iOS-дизайнер в Surenix

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

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

Роман Чуркин (Redmadrobot): говорить с разработчиком на одном языке

С 12 января по 4 февраля Британская Высшая Школа Дизайна проводит зимние интенсивы для творческих людей. Один из них – это четырехдневный курс программирование для дизайнеров под руководством Романа Чуркина, Lead iOS инженера из Redmadrobot. Мы поговорили с ним о курсе, в котором вы можете выиграть бесплатное участие, создав дизайн приложения для роботов!

Леонид Боголюбов

Опубликовано

/

Зачем дизайнерам код?

На этом интенсиве мы будем говорить не столько про код, сколько про умение пользоваться теми же инструментами в целом, что используют разработчики. И в понятие инструмент я, конечно, вкладываю не только Xcode (приложение, в котором разработчик набирает исполняемый код), но и набор компонентов для разработки пользовательского интерфейса, передачу материалов в разработку, вёрстку, платформу iOS в общем и её отличия от Android.

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

Думаю, каждый дизайнер сталкивался с моментом, когда классная идея разбивается о разработку на этапе согласования, потому что “не успеем” или “нереализуемо на iOS/Android”. Думаю, наш интенсив позволит дизайнеру выработать внутреннее понимание таких кейсов и позволит их избегать.

Какие навыки должны быть у тех, кто пойдет на курс?

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

Что смогут делать студенты после окончания курса?

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

За четыре дня мы разберем все необходимые инструменты и этапы создания такого прототипа.

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

Можно ли за 4 дня научиться разрабатывать приложения?

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

Цели интенсива более практичные и позволят наработать практику и увидеть векторы возможного развития.

Учат ли в Redmadrobot дизайнеров кодить и программистов рисовать?

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

Есть ли живые примеры как дизайнеры делают приложения?

Пожалуй, самый крутой пример – это ребята из Airbnb. В какой-то момент им стало недостаточно Framer и Flinto. Тогда они прошли похожий курс.

Зимние интенсивы БВШД

Комментарии
Продолжить чтение

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X

Спасибо!

Теперь редакторы в курсе.