Java, UX, HTML, CSS, WEB-design

Как создать руководство по стилю веб-дизайна

[ad_1]

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

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

Ваш набор инструментов веб-дизайнера

Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна
Начинается с всего $16,50/месяц!


Что такое руководство по стилю веб-дизайна?

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

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

Как создать руководство по стилю веб-дизайна

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

1. Ознакомьтесь с брендом

Независимо от того, создаете ли вы руководство по стилю для своего веб-сайта или для кого-то другого, действует один и тот же принцип: вам нужно время, чтобы оценить суть бренда. Это означает понимание вашей целевой аудитории, знание ценностей компании и четкое представление о том, как это должно быть представлено визуально. Если в прошлом компания проводила A/B-тестирование определенных дизайнов, сейчас самое время использовать эту информацию для создания более надежного и эффективного руководства по стилю.

2. Выберите цвета

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

3. Выберите и определите типографику

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

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

4. Создайте сетку контента

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

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

5. Установите параметры фотографии

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

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

6. Характеристики логотипа

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

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

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

10 потрясающих примеров руководства по стилю веб-дизайна

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

Материал.ио

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

Material.io — руководство по стилю веб-дизайна

MailChimp

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

MailChimp — руководство по стилю веб-дизайна

Одинокая планета

Lonely Planet предлагает еще одно отличное руководство по стилю веб-дизайна. Он заметно отличается цветовой палитрой, значками, компонентами пользовательского интерфейса, компонентами JS, виджетами и утилитами CSS.

Lonely Planet — руководство по стилю веб-дизайна

USWDS: Система веб-дизайна США

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

USWDS — руководство по стилю веб-дизайна

Руководство по стилю Yelp

Yelp Styleguide еще более точен. Он предоставляет четкую информацию о типографике, цветах, информации о макете, ссылках, кнопках, параметрах навигации и многом другом, что облегчает людям, работающим над Yelp, создание страниц и обновление контента.

Yelp — руководство по стилю веб-дизайна

Руководство по стилю A11Y

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

Руководство по стилю A11Y

Барнард Левит Оптометристы

У Barnard Levit Optometrists есть очень простое руководство по стилю веб-дизайна, которое выполняет свою работу. Он предоставляет полную информацию о типографике, включая заголовки, столбцы и маркеры, а также информацию о том, как форматировать таблицы, формы и кнопки. Кроме того, в нем рассказывается, как обрабатывать изображения, видео и ряд других аспектов веб-сайта.

Барнард Левит Оптометристы

Руководство по стилю Бена Бригнелла

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

Руководство по стилю Бена Бригнелла

Дизайн-система Билайн

Руководство по стилю на сайте Beeline Design System — еще один отличный пример для справки. Он включает в себя все, что описано во всех других руководствах по стилю, перечисленных здесь, но добавляет модальное окно, уведомления и вкладки для дополнительной меры.

Дизайн-система Билайн

Прекращение огня Орегон

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

Прекращение огня Орегон

Используйте эту информацию для создания руководства по стилю веб-дизайна

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

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Как создать руководство по стилю веб-дизайна

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Как создать руководство по стилю веб-дизайна

Название: Как создать руководство по стилю веб-дизайна . Краткое описание: [ad_1] ⭐ Если у вас есть веб-сайт, который необходим . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»