Advertisement
  1. Web Design
  2. Style Guides

50 руководств стиля, статей, книг и ресурсов

by
Read Time:7 minsLanguages:
This post is part of a series called All About Style Guides.
Front-End Style Guides: Your Questions Answered
Maintain Consistency With a Website Style Guide

Russian (Pусский) translation by Anton L (you can also view the original English article)

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

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

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

Ресурсы посвящённые руководствам стилей

Взгляните на следующий список потрясающих статей и туториалов, посвящённых работе с руководствами стилей:

Статья на Wikipedia о руководстве стиля
Отличный пример классического определения руководства стиля.

Согласованность в коде веб-сайта благодаря руководству стиля
Aaron Lumsden с Tuts+ познакомит нас с созданием руководства стиля.

Создание потрясающего бренда, логотипа и руководства стиля в Illustrator
Отличный путеводитель как сделать бренд и руководство стиля от "Rockable Press".

Способы создания веб-сайтов изменяются
Взгляд на некоторые движущие силы, которые привели к необходимости применения руководства стилей на блоге  "Inside Envato", от Natasha Postolovski. 

Руководства стилей простые в поддержке
Размышления Ian Feather о поддержке руководства стиля в актуальном состоянии.

Фронтенд руководства стилей и библиотеки паттернов
Внушительная коллекция примеров руководств стилей и библиотек паттернов от Anna Debenham

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

Создания руководств стиля
От Susan Robertson с A List Apart.

Фронтенд руководства стилей
От Anna Debenham с 24 Ways.

Фронтенд руководства стилей: карманное руководство
Очередной полезный ресурс от Anna Debenham. Часть серии - простые шаги, коллекция карманных руководств.

Примеры руководств стилей

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

Мануал графических стандартов от New York City Transit Authority.
Вначале идёт первая редакция стандартов графических иконок от Massimo Vignelli. Если вы собираетесь ознакомиться лишь с одной ссылкой в данном списке, пожалуй это то что вам нужно и будет интересно.

Руководство стилей Tuts+
Голос и тон, брендинг, форматирование и много чего ещё.

Рекомендации и ассеты бренда Twitter
Руководство логотипа, цветовая палитра, типографика.

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

Руководства стиля веб-сайта BBC GEL
BBC всерьёз настроено описать всё, что касается внешнего вида их сайта, назвав своё руководство - "Global Experience Language" (GEL).

Руководства стиля Mozilla
Руководство Mozilla подробно описывает всё что касается их стиля. Они разделяют представление сайта и брендинг, каждого аспекта их компании, всё что они предлагают: Mozilla, Firefox Family, браузер Firefox, Firefox ОС, Marketplace, Webmaker и Thunderbird. Далее вы увидите описание стилей их веб-сайта, презентаций, видео, типографики и текстового содержимого. Наконец, они предоставляют полное руководство стиля Firefox ОС. Пожалуй лучший пример руководства стиля.

Руководство стиля Lonely Planet
Руководство от Lonely Planet полностью описывает их элементы дизайна, компоненты пользовательского интерфейс, JS и CSS компоненты, каждая категория разбита на подкатегории со списком отдельных компонентов.

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

Руководство стиля Salesforce
Пример с отличной визуализацией создания руководств, цвета, типографики и иконок, с компонентами и примерами.

facebookbrand.com
Брендинг и руководства стиля от крупнейшей социальной сети.

Руководство стиля Salesforce
Замечательные визуальные элементы от гиганта управления отношениями с клиентами.

findguidelin.es
Самый быстрый способ найти интересующий вас ресурс!

Все руководства стилей
Данный пункт и правда можно назвать "все руководства стилей", предоставленные нам на блоге Tumbler.


Apple

Гайд для разработчиков работающих над приложениями для Mac OSX и iOS.

OSX руководство пользовательского интерфейса

iOS руководство пользовательского интерфейса

Google

Руководства для разработчиков создающих приложения для Google Glass, также подробный обзор каждого аспекта визуального стиля Google.

Google Glass руководство стиля

Google руководство визуальных компонентов - часть 1

Google руководство визуальных компонентов - часть 2

Отдельные сайты

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

PaulRobertLloyd.com

Oli.jp

Руководства стиля при написании кода

Руководства стиля GitHub
GitHub руководства форматирования CSS, JavaScript и Ruby для GitHub проектов.

Google руководства стилей для проектов с открытым исходным кодом
Соглашения для проектов, которые хостятся на Google Code, покрывающие десять различных языков.

Инструменты для работы с руководствами стиля

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

Шаблоны руководств стилей
Шаблоны руководств стиля - в основном это начальные каркасы для создания своей основы руководства стиля - представьте себе процесс генерации "небольшой скелет".

Stylify.me
Очень весело: введите адрес сайта, который хотите проанализировать, затем взгляните на руководство стиля, которое будет сгенерировано. После того, как закончите, можно скачать соответствующий PDF файл.

Узнаёте эти цвета?

Генераторы CSS руководств стилей, в реальном времени

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

StyleDocco
StyleDocco - модуль Node.js, который парсит отформатированные Markdown комментарии в специальные руководства стилей.

Kalei
Kalei также парсит Markdown комментарии в CSS, но запускается, в отличии, в качестве JavaScript в браузере, на выходе вы получаете руководство стилей, похожее на Twitter Bootstrap.

KSS (Knyle таблицы стилей Knyle Style Sheets)
KSS требует Ruby и использует подобный синтаксис комментариев. Руководство стилей GitHub создано с использованием KSS.

Обучающие ресурсы Style Tile

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

StyleTil.es
Оригинальная концепция Style Tiles от Samantha Warren.

Styke Tiles: альтернатива полному, подробному дизайну
Chris Brown с Tuts+ просветит нас о преимуществах Style Tiles.

Инструменты Style Tile

Style Tiles для Sketch
Бесплатный шаблон Sketch для создания Style Tiles.

Паттерны

Atomic Design
Brad Frost описывает теорию, которая привела к созданию лаборатории паттернов.

patternlab.io
Упомянутая выше лаборатория паттернов.

Примеры библиотек паттернов

Библиотека паттернов MailChimp
Библиотека паттернов MailChimp, освещает систему сеток, типографику, формы, навигацию, таблицы, списки, иконки и прочее.

Библиотека паттернов A List Apart
Документация A List Apart касательно схемы цветов, типографики, форматирования изображений, заголовков, описаний статей и других аспектов их дизайна сайта.

Библиотека дизайн паттернов Yahoo!
Библиотека дизайн паттернов Yahoo! - ресурс содержащий 59 различных паттернов, которые представляют соответствующие свойства, доступные другим разработчикам.

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

Инструменты для паттернов

Pattern Primer
Pattern Primer - позволяет вам сохранить кусочки разметки в папку для паттернов ("pattern folder"), далее из них можно составить список с демонстрациями, копировать и вставлять определённые области, каждого сниппета. Пример pattern primer 

Pea.rs
Pears - бесплатен, WordPress тема с открытым исходным кодом, созданная, чтобы помочь вам настроить сайт с примерами разметки, после чего можно применить, на данном сайте, собственные паттерны.

Patternry
Patternary - платный сервис, позволяющий создать паттерны, поделиться ими, организовать их и работать над ними в команде.

Pattern Lab
Pattern Lab - детище Brad Frost, основанное на концепции "Atomic Design". Помогает вам создать библиотеку паттернов, согласно системе атомы > молекулы > организмы > шаблоны > страницы. Демонстрация Pattern Lab.

Заключение

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

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.