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

Пройдите свой путь к великолепному дизайну: основные принципы дизайна для разработчиков WordPress

1
Want create site? Find Free WordPress Themes and plugins.

Основные принципы и элементы дизайна

Прежде чем ехать на велосипеде, нужно сначала научиться ходить, верно? Тогда давайте изучим некоторые основные принципы дизайна, которые вы можете включить в свой веб-дизайн WordPress!

Иерархия

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

СОВЕТ ДЛЯ РАЗРАБОТЧИКОВ:

Создание визуальной иерархии должно быть легким для вас, потому что, как разработчик, вы заядлый организатор – по крайней мере, когда речь идет о коде. Подходите к этой задаче так, как будто вы создаете структуру HTML (лучший пример – иерархия заголовков, где h1 является наиболее важным h2 следующим, вы знаете детали).
Составьте список всех элементов на вашей веб-странице. Пометьте каждого «уровнем» важности где-нибудь на листе бумаги (это только для ваших глаз). Например, ваш заголовок / фраза, как правило, самая важная вещь, которую посетитель должен увидеть на целевой странице. Сделайте это lvl 1. Вторым по важности должно быть кнопка CTA – это ваш элемент lvl2 и так далее. Сделайте элементы более высокого уровня визуально выделяющимися и сделайте остальную часть контента (уровень 4 или ниже) визуально менее привлекательной.

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

Пути достижения визуальной иерархии

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

Создание визуальной иерархии с использованием разных стилей на одном и том же элементе

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

Состав

Композиция веб-страницы – это размещение и организация элементов дизайна в соответствии с основными принципами искусства и веб-дизайна.

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

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

Применяя правило третей для создания более динамичной композиции

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

Остаток средств

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

Негативное пространство

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

Добавляя отрицательное пространство вокруг элемента, вы можете подчеркнуть этот элемент. Посмотрите на страницу поиска Google. У этого есть центрированный логотип и тонны отрицательного пространства вокруг этого. Вы просто не можете пропустить смысл этого сайта.

Использование негативного пространства выделяет ваш контент

Теперь сравните это с этим.

Пример плохого дизайна со слишком маленьким отрицательным пространством

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

Фокус

Координационный центр или фокус веб – страницы это место на странице , которая привлекает к себе наибольшее внимание. Это должна быть самая важная часть вашей страницы или поста WordPress. У вашей страницы всегда должен быть один четкий фокус (я имею в виду, просто посмотрите на главную страницу Google). Максимум два или три фокусных пункта, на более крупных полотнах, в зависимости от вашего дизайна и функциональности сайта (количество потенциальных элементов CTA). Выделите слишком много элементов, и вы получите полный беспорядок.

СОВЕТ PRO: для изображений и нецентрированных веб-страниц используйте правило третей, чтобы установить фокус в нужном месте. Инструмент обрезки Photoshop рисует линии для вас.

Инструмент Crop в Photoshop автоматически рисует линии для вас

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

Цвет

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

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

Вот несколько советов:

  • Выберите основной цвет для вашего дизайна.
  • Выберите две вариации вашего основного цвета (обычно более светлый и более темный оттенок вашего основного цвета), чтобы помочь вам получить глубину и получить профессиональный вид.
  • Выберите вторичный цвет. Убедитесь, что он дополняет (или контрастирует) ваш основной цвет.
  • Выберите два варианта вашего вторичного цвета.
  • Добавьте нейтральные оттенки (белые, серые, черные).
  • Никогда не используйте полную непрозрачность черного или белого цвета. Это слишком сложно для глаз.
  • Использование 3 цветов акцента допустимо в некоторых случаях. Использование 4 или более – это почти всегда плохая идея.
  • Большинство тем WordPress имеют встроенную опцию выбора основного и дополнительного цветов. Это означает, что после выбора основного цвета цвет некоторых элементов и, как правило, частей макета будет меняться автоматически. Для более детального оформления добавьте варианты вашего основного и дополнительного цвета и используйте их для изготовления деталей на заказ.

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

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

С легкостью выбирайте цветовые гармонии с помощью Color Calculator

Другими полезными инструментами для выбора цветовой палитры являются Google Material Palette и приложение для цветных инструментов . Используйте палитру материалов, чтобы выбрать основной цвет и варианты его оттенков, и используйте Color Calculator для создания гармоний. Если вы хотите узнать больше об использовании цветов в дизайне пользовательского интерфейса, лучше всего посетить Material Design .

Поток

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

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

Обычно (в западных культурах) наши глаза начинают просматривать сайт в верхнем левом углу. Вот почему наиболее распространенными типами потоков в веб-дизайне являются F-поток и Z-поток.

Z против F поток на темы из хранилища WordPress

СОВЕТ ДЛЯ УСТРОЙСТВ: не слишком переживайте по поводу потока – просто имейте в виду, где находится фокус и как глаз зрителя добирается до него. Найти хорошую тему WordPress с заранее разработанными макетами, которые помогут вам с общей композицией.

Типография

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

Не вдаваясь в подробности, вот что вам нужно знать:

  1. Где найти шрифты
  2. Как выбрать шрифт
  3. Как спарить шрифты
  4. Как загрузить собственный шрифт на ваш сайт WordPress

Где вы можете найти хорошие шрифты?

Может быть, кто-то просто ждет за кустом? Ну, чтобы поймать их всех, это помогает знать, где искать. Первое место, куда все идут, – это Каталог Google Fonts.

Как выбрать идеальный шрифт для вашего сайта?

Это искусство само по себе, но вот несколько советов:

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

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

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

Как выбрать пару шрифтов для моего дизайна WordPress?

Я дам вам 2 совета о том, как выбрать пару шрифтов, которые хорошо сочетаются друг с другом:

  1. Используйте то же семейство шрифтов. В отличие от человеческих семей, семейства шрифтов прекрасно уживаются друг с другом.
  2. Выберите два контрастных, но визуально дополнительных шрифта, один с засечками и один без засечек. Установите иерархию шрифтов и используйте один шрифт для заголовков (это будет без засечек в 99 процентах случаев), а другой – для содержимого.

Как установить шрифты в WordPress

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

Сначала загрузите файл example-font.ttf в свой ( child! ) с помощью диспетчера файлов.

Затем свяжите файл шрифта в style.css вашей дочерней темы, используя правило CSS  @ font-face .

Вы сделали!

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

Как всегда, существует множество инструментов и плагинов WordPress,которые помогут вам в этом.

БОНУСНЫЙ СОВЕТ: Вам может быть интересно, в чем разница между гарнитурой и шрифтом. Теоретически, гарнитура – это, по сути, семейство шрифтов. Шрифт – это определенный размер, вес и стиль шрифта. Тем не менее, никто не использует слово гарнитура больше, кроме шикарных дизайнеров. Сделайте это частью вашего словарного запаса, если вы хотите проникнуть в их внутренние круги.

центровка

Выравнивание – это принцип дизайна, с которым вы, вероятно, знакомы. Вы знаете … вы использовали выравнивание в Word, вы знаете свойство CSS text-align , вы использовали его для датирования в колледже …

Что ж, как и у вашей старшей школьной подруги, в принципе выравнивания есть нечто большее, чем кажется на первый взгляд. Для начала, это не только текстовое свойство. О нет, нет! Margin и padding также являются примерами выравнивания, с которыми вы знакомы.

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

Существует два основных типа принципов выравнивания: выравнивание по краям и выравнивание по центру.

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

Выравнивание краев и центров в дизайне

СОВЕТЫ ДЛЯ DEVS: Самый простой способ выровнять элементы на вашем сайте WordPress – использовать компоновщики страниц. Если вы больше разбираетесь в CSS, не забудьте отрегулировать настройки полей и отступов вашего макета. Выровняйте элементы влево или вправо, используя  свойство float CSS .

Заключительное примечание для разработчиков

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

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

Did you find apk for android? You can find new Free Android Games and apps.
Вы можете написать отзыв

Оставить отзыв

VebPro - Интернет-магазин цифровых товаров
Вход / Регистрация временно отключены
Сравнить товары
  • Всего (0)
Сравнить
0