10 иллюстраций в Руководстве по цифровому дизайну и стилю от популярных компаний, таких как Apple, Google и Starbucks

Если вы когда-нибудь задавались вопросом, как дизайнеры Apple определяли каждый второстепенный аспект в iOS, когда они в конечном итоге создавали ее, то, возможно, вы попали в нужное место.

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

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

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

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

В отличие от руководств по моде для производителей, которые включают в себя логотип компании, утверждение миссии, образы покупателей и тон голоса, руководства по веб-дизайну и стилю сосредоточены на цифровой презентации, такой как UX / UI.

Но мне, как UX-дизайнеру, в целом было любопытно, что можно найти в руководствах по цифровой моде таких влиятельных поставщиков, как Apple, Google и Starbucks?

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

Примеры блестящих цифровых руководств по стилю

1. Apple iOS

Руководство Apple по дизайну и стилю особенно интересно, потому что в нем рассказывается, как разработать полнофункциональный метод. Monterey, одна из самых современных версий Apple OS X, имеет более упрощенный потребительский интерфейс, чем его предшественник Yosemite. Apple демонстрирует это тонкое, но ощутимое различие с помощью действительно хороших графических сравнений, а затем продолжает обсуждение обоснования, лежащего в основе каждого отдельного аспекта макета работающей системы. Это дает вам окно в умы дизайнеров.

2. Google: макет материалов

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

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

3. Старбакс

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

4. Атласиан

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

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

5. Мозилла

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

Домашняя страница Mozilla также делает фантастическую карьеру, рассказывая, как ее UX / UI должен быть доступен для мужчин и женщин с нарушениями зрения или инвалидностью — одна вещь всеобъемлющая и важная, поскольку ноу-хау станет гораздо более революционным.

6. Буфер

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

7. Визг

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

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

8. GOV.Британские острова

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

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

9. ДевиантАрт

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

10. Дискус

Цвет, значки, типографика и логотип… Disqus сохраняет эту информацию короче и приятнее. Но все это можно предложить в довольно приятной, организованной форме. Это руководство может быть использовано в качестве отличного примера для «отправной точки» при создании руководства по стилю, которое у вас есть, поскольку оно затрагивает все основы.

Опыт повлиял на создание собственного руководства?

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

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