design
1.0.0
3.1 Никогда не используйте более трех шрифтов на странице одновременно.
Почему? Ряд шрифтов, используемых на одной странице, демонстрирует плохо определенную марку и может выглядеть ленивым и загроможденным. В большинстве случаев можно использовать три разных шрифта (логотип, заголовки, содержание тела).
3.3 Поддерживайте последовательную иерархию типа. Вы должны использовать только несколько размеров шрифтов и один или два веса шрифтов для разработки иерархии типа. Подумайте о метках заголовка HTML H1, H2, H3 и т. Д. У вас должны быть различные визуальные стили, по крайней мере, для четырех из них, используя вариации яркости, размера и веса, чтобы обозначить важность текста. Для потрясающего примера иерархии типа, ознакомьтесь с руководящими принципами Apple по интерфейсу.
[3.4] Держите текст вашего тела нормальным весом и хорошо расположенным. Текст всегда должен быть разборчивым, поэтому резервировать свет или смелые шрифты для больших заголовков или случаев, когда вес шрифта будет мало влиять на разборчивость текста. Кроме того, всегда держите интервал на расстоянии линий текста тела на уровне 1,15 до 1,5 (в зависимости от размера), чтобы максимизировать разборчивость. Например, эта статья имеет примерно 1,5 -градусный интервал. Оправдание абзацев вашего тела тоже не повредит.
3.1 Фаны тела всегда должны быть оттенком серого
Почему? Цветные фоны, даже очень темные серые, могут легко создать нагрузку на глаза. Для важного контента, такого как текстовый корпус веб -страницы или приложения, это важно, пользователи могут с легкостью читать и произнести страницу.
3.3 В большинстве случаев используйте белый текст на любом изображении, цветном или градиентном фоне. При необходимости примените очень легкую тень (<= 10% непрозрачность) к тексту.
Почему? Белый на темноте часто более привлекателен и легче создавать варианты. Выбор темного цвета для использования на цветном фоне часто может быть сложным. Тем не менее, убедитесь, что любая цветная комбинация, которую вы выберете, также доступна.
3.4 Никогда не используйте абсолютные черные.
Почему? Чистый, непрозрачный черный (#000) часто слишком резко для большинства веб -страниц. Даже цвет шрифта GitHub - #24292E, а не #000. Если вы сомневаетесь, вы можете использовать численные шестигранные коды серого серого ( #111, #222 ... #AAA, #BBB и так далее).
3.5 Убедитесь, что цветные компоненты не граничат друг с другом.
Почему? Если цвета не являются очень сильными дополнениями друг друга, часто контраст двух соседних цветов может создать ощущение поляризации и деления, которое разбивает поток вашей страницы. В случае, когда навигационная панель может прикоснуться к цветному герою, вместо этого выберите прозрачный фон Navbar.
Обеспечить согласованность во всех компонентах. После того, как вы определили источник света для вашей страницы, убедитесь, что все тени следуют за его направлением. Если свет «попадает» на вашу страницу на 135 градусов, то каждая тень и градиент должны упасть на 135 градусов. Используйте тени в качестве инструмента для представления иерархии или состояния. Тени следует использовать для выделения компонентов страницы, предоставления структуры страницы или изображения состояния. Например, вы можете изобразить кнопку нажимают, снижая его возвышение, а не изменение его цвета. Слишком много теней может представлять слишком много размерности, поэтому будьте осторожны (например, не создайте сайт с 18 уникальными возвышенными). Смещение вашей тени должно равняться примерно половине его радиуса размытия. Например, тень с смещением x / y 10px должна иметь радиус размытия примерно 20 пикселей. Этот подход делает самую аутентичную тень. Всегда держите непрозрачность теней до 25%. Ошибайтесь на стороне тонкости, чтобы не отвлечься от вашего дизайна. Если вы используете темный фон, в некоторых случаях вам может потребоваться увеличить непрозрачность вашей тени, чтобы обеспечить ее видимость. Тени не всегда должны быть черными. При использовании тени на цветных поверхностях часто выгодно использовать очень темный или притушенный вариант цвета фона для улучшения смеси тени.
