от одного не-дизайнера к другому

1656554301 ot odnogo ne dizajnera k drugomu

автор Али Шпиттель

NTeIJrwILijj734ogAOWPJFWFeMqf0g-z-wU
Фото: Kobu Agency на Unsplash

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

Цвет

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

Последовательность

Вот моя цветовая схема для Дзен программирования:

b8l2lxE2xFdpdc7RPaLjfStSd8TEPsElZf48

Я использую те же шестнадцатеричные коды для зеленого, розового и серого для фона, заголовков, текста и кнопок.

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

body {   --pink: #CF92B7;   --green: #59876B;   --grey: #4A4A4A; } 
h1 {   color: var(--pink); }

Если вы используете SCSS или другой препроцессор CSS, это еще проще!

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

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

SJFZZv8mvlvHuBLKyHDrrN8BhpX3NJEllHAC

Столкновение цветов

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

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

Контраст

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

E0zc87iuUHaF-DnjTZmCWnXA9C95a3AMEmoT

Значение цвета

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

Советы по выбору цветов

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

Я иногда использую генератор Coolors, когда строю новый сайт. Я также подписался на этот аккаунт в Instagram, и когда увижу цветовые палитры, которые мне нравятся. Наконец, если я просто хочу увидеть кучу цветов и выбрать между ними, я использую страницу цветов на Materialize – мне нравятся их цвета!

Текст

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

Вот пример действительно сложного для чтения текста:

gz-FtBuGU50NKtqfFHT3VJje8czLSrxdZ3ST

Давайте работать над тем, чтобы сделать его более читабельным!

Интервал

Добавьте пробелы в текстовое содержимое. Существует несколько типов пробелов, которые могут сделать ваше содержимое более читаемым. Первый – это добавление отступов по бокам страницы.

По бокам вашего содержимого:

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

<style> .container {   width: 80%; margin: 0 auto; } <;/style> 
<div class="container">   <p>   Lorem ipsum dolor amet master cleanse cloud bread brunch pug PBR&B  actually. Thundercats marfa art party man bun gluten-free  sriracha. DIY tofu cred blue bottle etsy. Retro listicle normcore  glossier next level etsy lumbersexual polaroid pour-over 90's  slow-carb health goth banjo. Unicorn chicharrones 8-bit poke   glossier.   </p> </div>

Высота строки:

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

Кроме того, для целей доступности лучше добавить больше высоты строки — рекомендация W3C составляет от 1,5 до 2,0. Помните, что в средней школе приходилось удваивать пробел? Мы делаем то же здесь, только на этот раз онлайн!

p {   font-size: 18px;   line-height: 2.0; }

Это преобразует текст влево в текст справа в изображении ниже.

PCFI7cZKfJyewSUCFQ3H-Ee-uZirNyg3tpU1

Заполнение абзаца:

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

p {   padding-bottom: 27px; }
QCot3EmTYiqhR9j5Y4xLe54J9EG4n1T2nPyY

Интервал между словами:

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

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

SaB6uZ9Wj1a2xBIgLItirhluTN8e90EO9-Rg

А вот без:

wo5jJb6Yan7R0WSRBDYmUDcRlVlPSd2kFJ3O
h1 {   word-spacing: 9px; }

Первое читать гораздо легче!

Выравнивание

Проще читать содержимое, если оно выровнено налево и не выравнивается для английского и других языков сверху слева направо. Ваше содержимое будет таким по умолчанию! Просто убедитесь, что у вас нет text-align: center; на нем! Не стесняйтесь центрировать заголовки или контейнер, в котором находится ваш текст, но имеют длинные блоки содержимого, выровненные по левому краю.

Читаемые шрифты

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

258KOJDtqv4mOTY2MZWImL0hytLWMRwQTlvs

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

Некоторые из моих любимых шрифтов:

Засечки и декоративные

Без зарубок

Цвет

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

То же касается фона — чисто черный часто не лучший выбор — темно-синий или серый сделает ваше содержимое легче для чтения.

Размеры

Существуют различные мнения относительно того, насколько велико ваше содержимое и какую единицу измерения использовать (например, em против px). Консенсус склоняется к 16–18 пикселам и имеет такой масштаб для людей, увеличивающих или уменьшающих масштаб вашего сайта.

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

cwYX7xWUHvuzp3pwoHru6Ocb0vA1tF3ozaQH

Как только мы изменим эти вещи…

Наш контент становится гораздо легче читать!

-dRyZ4r15URJo4ov2Dwc-lMvMGQTzVfKW0-M

Фоны

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

На рисунке ниже текст читать трудно.

22EzCEej-9B869OCC6er9fcJE3tZmVCZdT8D

Разделите страницу

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

JVVDYYIpytq45Om2cGrDNxfmQDxihTO2QuN4
<style>   .container {     display: grid;     grid-template-columns: 1fr 1fr;   } &lt;/style>
<div class="container">   <div class="text">My Text</div>  <img src=" </div>

Используйте менее занятое изображение

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

Добавить текстовую тень

Вы также можете добавить текстовую тень под текст, чтобы сделать его более читабельным.

.text {   text-shadow: #4A4A4A 1px 1px 8px; }

Благодаря внесенным выше изменениям и увеличенному размеру шрифта шрифт на фоновом изображении становится намного легче для чтения!

BaFBx3kizuvmCKpCQlY5ciiKrhVIurt0Q0HC

Цвет фона

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

Призывы к действию

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

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

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

Больше чтения

  • Smashing Magazine – здесь много статей о дизайне
  • Проектирование с помощью Sketch – статья, которую я написал о том, как использовать программное обеспечение для дизайна Sketch, которое я использую для дизайна всего. Многие шаги касаются и другого программного обеспечения для дизайна.
  • Привет, веб-дизайн – это отличная книга, обсуждающая веб-дизайн, предназначенный для начинающих.
  • Маленькие детали дизайна пользовательского интерфейса — великолепная колода слайдов, которая проходит через редизайн LinkedIn — эта немного более продвинутая.

UI Frameworks

Возможно, вы не хотите начинать с нуля при разработке сайта, поэтому использование UI Framework может быть полезным. Некоторые из них включают в себя:

  • Bootstrap, который я бы обязательно настроил, поскольку он активно используется
  • Materialize, который соответствует философии Material Design от Google, и
  • Втулка, мой любимый эстетически – она тоже подчеркивает доступность.

Контрольный список дизайна

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

## Color - [ ] Uses consistent colors throughout - [ ] Uses non-clashing colors - [ ] The color choice makes sense for the business purpose of the site 
## Text - [ ] The text has padding on both sides. - [ ] The line-height is 1.5-2.0 - [ ] There's padding between paragraphs - [ ] If your headings are in all caps, there's increased word spacing - [ ] Blocks of text are un-justified - [ ] Blocks of text are left-aligned - [ ] Sans-serif fonts are used for body text - [ ] A maximum of two fonts are used - one decorative or serif and one sans-serif - [ ] body text isn't pure black on white - [ ] body text is 16-18px and is scalable 
## Backgrounds - [ ] Use a pattern or simple image - [ ] A text shadow is used to make headings readable - [ ] The background isn't too bright 
## Calls to Action - [ ] Important information is highlighted in order to attract user interaction

Поддерживать связь

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

Первоначально опубликовано на zen-of-programming.com.

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

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