Поясняем за стиль сайта
Style guides - это документы, содержащие инструкции или рекомендации, которым необходимо следовать при работе над проектом. Как следует из названия, при работе над проектами веб-сайтов используются руководства по стилю веб-дизайна.
В этой статье мы предоставим вам примеры высококачественных руководств по стилю веб-дизайна. Цель этого - помочь вам реализовать один из лучших советов по веб-дизайну из недавней статьи, в которой рекомендуется использовать эти руководства по стилю в ваших проектах.
Большинству проектов полезно иметь руководство по стилю, будь то создание нового веб-сайта, формулировка маркетинговой стратегии, создание бренда или даже публикация сообщения в блоге. Использование руководства по стилю может помочь задокументировать важные решения перед началом работы и гарантировать, что вы, ваша команда и ваш клиент с самого начала находитесь на одной странице.
10 лучших руководств по стилю веб-дизайна в 2021 году
Чтобы получить максимальную отдачу от этой коллекции, вы можете до буквы следовать одному из этих руководств по стилю веб-дизайна, смешивать и сочетать свои любимые элементы или использовать их для вдохновения для своего собственного набора руководств.
Давайте начнем с руководства по стилю, с которым большинство из вас будет знакомо, независимо от того, знаете ли вы его по имени или нет, Материальный дизайн от Google. Это руководство по стилю, по-видимому, основано на бумаге и чернилах, хотя его подход к дизайну далек от прошлого.
Надеюсь, вы столкнетесь с тем, что Material Design используется в дикой природе. Будь то использование собственных продуктов и услуг Google, таких как мобильная операционная система Android и инструмент Google Now, или многих других продуктов, на которые повлияла эта популярная тенденция веб-дизайна , в любом случае, материальный дизайн не должен быть новым для вас.
Material Design охватывает ту часть, где заканчивается тенденция плоского пользовательского интерфейса, и помогает дизайнерам добавить больше глубины и индивидуальности в свою работу, все еще используя современную привлекательность минималистских пользовательских интерфейсов. Типичные характеристики этого популярного руководства по стилю веб-дизайна включают сеточные макеты, анимацию и тени.
Плюс в том, что если вы захотите использовать руководство по материальному дизайну от Google, оно находится в свободном доступе в Интернете и помогает объяснить цель этого руководства по стилю веб-дизайна. И это отличный пример подробного руководства по стилю для всех, кому поручено создать такой же документ.
2. BBC Global Experience Language
Это руководство по стилю, созданное для веб-дизайнеров, создающих сайты для BBC, начинается с изложения философии, лежащей в основе правил. С этого момента документ углубляется в детали. Вы найдете информацию, касающуюся ширины столбцов, правил макета сетки, рекомендаций по размещению логотипов и всего остального, о чем вы можете подумать, когда дело доходит до создания онлайн-контента.
3. Руководство по стилю Mozilla
Если вы хотите узнать больше о духе дизайна команды, ответственной за второй по популярности веб-браузер в мире, то стоит ознакомиться с онлайн-руководством по стилю Mozilla.
В этом руководстве по стилю вы найдете несколько отличных примеров того, как создавать инструкции, которые охватывают использование логотипов, цветовых схем, тона голоса и словесных знаков. Если вы хотите создать руководство для своих клиентов или команды, то набор инструкций Mozilla покажет вам, как это делается.
4. Рекомендации в отношении активов бренда Twitter
Дизайнеры логотипов и те из вас, кто использует логотипы и графику в своих проектах, оценят чистые и ясные инструкции от этого гиганта социальных сетей.
В руководстве по стилю активов бренда Twitter вы найдете несколько хороших примеров того, как писать инструкции, которые помогут обеспечить правильное использование ваших логотипов и других активов. Это онлайн-руководство по стилю включает подробные сведения о цветовых палитрах, ориентации логотипа, расстоянии между элементами и глоссарий терминов.
Если вы хотите, чтобы ваши клиенты, занимающиеся веб-дизайном, не убивали ваш тяжелый труд или логотипы и брендинг вашего проекта не искажались, руководство по стилю активов бренда Twitter - хорошая модель для подражания.
5. Принципы корпоративного бренда Adobe
Документ Adobe Corporate Brand Guidelines - впечатляющий пример того, как обеспечить постоянное применение философии вашего бренда и компании на широком спектре платформ и сред. Здесь описано все, от веб-сайтов и электронной почты до печатных плакатов и товаров, не говоря уже о том, какой набор приложений Adobe CC следует использовать веб-дизайнерам .
Несмотря на огромные масштабы, руководство по бренду Adobe сочетает в себе подробные инструкции с примерами использования, чтобы продемонстрировать, как создать большое руководство по стилю, которое относительно легко понять, несмотря на его объем.
Если вы работаете над проектом, охватывающим несколько платформ, это руководство по стилю от Adobe может показать вам, как создать набор инструкций, применимых ко всем аспектам вашей работы.
6. Брендбук и брендгид Foursquare
Приложение и веб-сайт для поиска местоположения Foursquare следуют строгому набору правил, чтобы их контент был легко узнаваемым, независимо от того, публикуется ли этот контент на их собственных платформах или распространяется в социальных сетях и в других местах.
Если вы хотите добавить этот уровень идентичности бренда к своей работе, просмотр брендбука и документации по бренду на Foursquare - это достойное вложение вашего времени.
В этих двух кратких руководствах по стилю вы найдете множество советов, которые можно и чего нельзя делать, от использования и позиционирования логотипа до правил иконографии, дизайна значков, рекомендаций по копирайтингу и тона голосовых рекомендаций.
Если вы работаете с иконками или разрабатываете для Интернета, мобильных устройств и социальных сетей, то руководства по стилю от Foursquare предлагают множество советов о том, как доставлять единообразное сообщение как на ваших собственных объектах, так и за их пределами.
Если вы нашли более крупные руководства по стилю от Adobe и Google немного ошеломляющими, тогда раздел веб-дизайна в брендбуке MIT должен предложить желанный контраст.
Просто содержащая базовую информацию о расположении и формулировке логотипа, это хороший пример того, как вы можете добиться единообразия в своих проектах веб-дизайна, не переусердствуя.
8. Руководство по стилю Ubuntu
Цель руководства по стилю Ubuntu - точно представить этот бренд в Интернете. Чтобы помочь в достижении этой цели, это руководство по стилю веб-дизайна включает инструкции по добавлению файла CSS Ubuntu на любую веб-страницу, над которой может работать разработчик или дизайнер.
Предоставление файла CSS - интересная идея. Это быстрый способ гарантировать, что все элементы на веб-странице будут выглядеть одинаково сейчас и в будущем. Затем в документе объясняются различные стили, которые требуются для определенных элементов, таких как ссылки и заголовки, прежде чем перейти к сеткам макета, типографике, формам, таблицам, мультимедиа и многому другому.
Стоит изучить руководство по стилю веб-дизайна Ubuntu. Это связано с тем, что он не только включает руководящие принципы и инструкции, но также предоставляется необходимая разметка HTML и CSS, необходимая для достижения результата.
9. Руководство по UX MailChimp
MailChimp - один из самых популярных сервисов электронного маркетинга , поэтому приятно видеть, что они сделали свое руководство по стилю общедоступным.
Помимо предоставления последователям примеров того, как должны быть стилизованы элементы, предлагается также базовый код, чтобы сделать реализацию этих рекомендаций как можно более простой. Этот онлайн-документ также красиво отформатирован, что делает его одним из наиболее простых руководств по стилю веб-дизайна.
Поскольку здесь описано все, от макетов сетки и типографики до значков и диалоговых окон, независимо от того, для какой платформы вы разрабатываете, вы сможете получить некоторые указатели из руководства по стилю MailChimp.
Как веб-дизайнеры, так и маркетологи электронной почты найдут руководство по стилю MailChimp хорошим источником вдохновения, когда дело доходит до обеспечения единообразия в своих проектах. Вы можете узнать об истории этого руководства в интервью с Федерико Холгадо , ведущим дизайнером UX в MailChimp.
10. Руководство по веб-стилю от easyGroup
Цвет может вдохнуть жизнь в бренд, сделав его восхитительным, доступным, люксовым, серьезным или легкомысленным, а также добавить ему множество других эмоциональных черт, которые мы ассоциируем с определенными цветами или цветовыми комбинациями.
EasyGroup дает читателям большое количество вариантов применения его узнаваемого фирменного оранжевого цвета.
55 likes
