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

Копия

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

Установка максимальной ширины текста.

Вы когда-нибудь задумывались, почему на сайтах с большим количеством контента копия размещается посередине страницы в узкой колонке? Конечно, у большинства людей, просматривающих сайт на настольных компьютерах, большие мониторы, так что же дает? Человеческий глаз «устает» при чтении текста длиной более ~70–90 символов в строке или шириной 700–800 пикселей. Ну, может, и не скучно, но с трудом читаешь строчку за строчкой, не теряя места.

Взгляните на эти два снимка экрана mdn, один имеет размер содержимого ~800 пикселей, а другой заполняет весь экран (на скриншоте ширина 1270 пикселей).

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

Цвета шрифта и фона

Вы когда-нибудь читали содержимое сайта и у вас начинало кружиться голова? У меня тоже. Причиной этого для меня были цвета фона и текста. Чисто черный фон (#000000) и чисто белый текст (#FFFFFF) — это коэффициент цветовой контрастности 21:1, цветовой контраст специальных возможностей. Но я могу прочитать только несколько строк, прежде чем у меня начинает кружиться голова, и у меня начинает болеть голова. Если сделать один или оба этих цвета более тусклыми или мягкими, это поможет вашим пользователям читать контент более доступным.

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

Цвета

Когда я начинаю создавать сторонний проект, я придумываю имя (с доменом), создаю логотип онлайн с помощью генератора логотипов и выбираю, какие цвета лучше всего подходят для проекта. Мне нравится использовать https://coolors.co/, но есть несколько других на выбор. Большинство, если не все, из этих сайтов выбора цветовой схемы будут иметь предопределенные цветовые схемы и возможность создавать свои собственные. Обычно я выбираю цвет выделения и позволяю инструменту найти еще четыре, которые хорошо сочетаются с ним. Выбор правильных цветов позволяет таким вещам, как кнопки, ссылки, текст и выделение, работать вместе и обеспечивать пользователю единообразие.

Чтобы помочь с согласованностью цветов, я начал использовать цветовые маркеры. Каждому цвету, который я выбрал выше, присваивается шкала, представленная числом, обычно от 50 до 1000. Каждая из этих шкал имеет определенное применение в системе дизайна, от фона приложения до цвета при наведении. Лучшее объяснение того, где использовать каждый цвет в шкале, я видел в Системе цветов Radix. Это объясняет, как работают цветовые системы и как они используются в Radix. Чакра, библиотека компонентов, которую я часто использую, имеет аналогичную систему, в которой вы можете предоставить цветовую шкалу и использовать этот цвет в компонентах Charka. Чтобы упростить создание весов, я нашел этот удобный инструмент. Я сделал эти весы из цветов темы Дракулы на моем сайте-портфолио.

const theme = {
  colors: {
    pink: {
        50: '#E8CFFF',
        100: '#EDBCFF',
        200: '#F7ABFF',
        300: '#FF9AFD',
        400: '#FF89E4',
        500: '#ff79c6',
        600: '#EC60D1',
        700: '#D94AD9',
        800: '#C637C6',
        900: '#B326B3',
      },
      purple: {
        50: '#DEDAFF',
        100: '#D3CBFF',
        200: '#CBBCFF',
        300: '#C5AEFD',
        400: '#C0A0FB',
        500: '#bd93f9',
        600: '#9670D5',
        700: '#7051AB',
        800: '#4C3781',
        900: '#2D2157',
      }
  }
}

export default extendTheme(theme);

Я создал чешуйки из цветов Дракулы #ff79c6 (розовый) и #bd93f9 (фиолетовый). Благодаря этому все цвета на сайте выглядят одинаково и работают вместе, поэтому пользователь уверен в том, что он может делать на сайте.

Расстояние

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

Чтобы избежать этого, используйте flexbox/grid для всего. С flexbox и сеткой у вас есть доступ к свойствам gap и grid-gap, которые являются лучшим инструментом CSS для интервалов. Это работает так, как я ожидал, помещая пробел между каждым дочерним элементом, поэтому нет необходимости делать какие-либо :last-child трюки.

Вот как несколько библиотек обрабатывают свои стеки

// Charka CSS for HStack
.css-1y5q8ss > :not(style) ~ :not(style) {
    margin-top: 0px;
    margin-inline: 24px 0px;
    margin-bottom: 0px;
}

// Bootstrap CSS for row
.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

// mui CSS for their stack
.css-ikzlcq > :not(style) + :not(style) {
    margin: 16px 0px 0px;
}

// Tailwind you add the gap that you want
.gap-8 {
    gap: 2rem;
}

На мой взгляд, единственная библиотека, которая делает это правильно, — это tailwind. Использование свойства зазора позволяет вам использовать поля так, как вы ожидаете от элементов в вашей сетке.

Когда вы используете поле в качестве промежутка между ними, а затем добавляете дополнительное поле, вам всегда нужно помнить о добавлении 1rem (или любого другого вашего промежутка) к вашему новому полю, тогда как при использовании gap вы можете добавить поле, как и вы.

Теперь, почему это имеет значение? Это дает вам лучшее разделение того, для чего вы используете свойства CSS.

  • Используйте gap при размещении элементов в макете.
  • Используйте margin при размещении элементов в макете.
  • Используйте padding, чтобы дать немного больше места вокруг элемента

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