Основы веб-дизайна. Все просто.
Придумать, как оформить веб-сайт с точки зрения дизайна, может быть немного сложно, особенно если у вас нет глаз или опыта в дизайне. Для тех, кто так считает, я свел некоторые основы дизайна в одно правило и проиллюстрировал их ниже.
Правило трех:
Если у вас нет времени изучать теорию цвета или посещать занятия по дизайну, одно простое правило, которое должно обеспечить вашу безопасность в большинстве случаев, - это правило трех. Ограничьте свой выбор, включая шрифты, размеры и цвета, до 3 вариантов. Что-либо большее, чем это, может быть занято, загромождено и сбивает с толку конечного пользователя.
Возьмем, к примеру, это. Я взял базовый сайт с панелью навигации, областью основного контента и боковой панелью и отредактировал его во вторых двух примерах. Хороший способ начать любой веб-проект - ограничиться тремя вариантами цвета, тремя вариантами шрифта и действительно тремя размерами. Это может включать размеры шрифта, а также области содержимого, если у вас их несколько. Когда вы начинаете размещать свой сайт на каждой странице, вы можете определить, какое содержание является наиболее важным, что второстепенным, а что наименее важным. И, естественно, ваш самый контрастный цвет, самый большой размер будет самым важным и так далее.
Шрифты:
Одно правило, о котором следует подумать со шрифтами, заключается в том, что любой основной текст почти всегда должен быть основным шрифтом. Для своих заголовков здесь я использовал более красивый шрифт, но независимо от вашего выбора третьего шрифта, он должен быть основным, читаемым шрифтом основного текста. Обычно двумя другими вариантами могут быть необычные шрифты, блочные шрифты или что-то еще, и обычно они могут использоваться для заголовков, меток и, возможно, вашей навигации, в зависимости от того, насколько велика ваша область навигации. Опять же, если ваша область навигации довольно мала, как здесь, вам лучше выбрать что-нибудь простое. Отличное место для просмотра некоторых веб-шрифтов - это библиотека шрифтов Google. Https://fonts.google.com/
Вот справочная информация о том, как шрифты заголовка и основного текста могут работать вместе:
Цвета:
Из трех цветов первым будет цвет фона. Два других будут цветами вашего содержимого. Естественно, если ваш фоновый цвет белый, такие цвета, как желтый или светло-серый, не будут хорошо отображаться, поэтому выбор контрастного цвета здесь очень важен. Кроме того, если вы ограничитесь тремя цветами, вам не нужно особо беспокоиться о том, какие цвета сочетаются друг с другом. Хотя, как правило, вы не ошибетесь, если будете придерживаться цветов из одной группы, например теплых (красный, оранжевый, коричневый, желтый) и холодных цветов (синий, зеленый, фиолетовый).
Вот несколько примеров того, как это может работать:
Размеры:
Размер, который вы выбираете для разных текстов на экране, - отличный способ привлечь внимание пользователя к тому, на чем ему нужно сосредоточиться. Даже если это что-то столь же простое, как экран входа в систему, на котором, вероятно, не будет основного текста, вы можете спросить себя, что здесь самое главное, сгруппировать весь свой контент на странице по размеру.
Это просто краткий обзор веб-дизайна. Придерживаясь простых основ, вы все равно можете создавать хорошо продуманный контент, который выглядит профессионально, не зацикливаясь на цвете и выборе шрифта. Ограничение всего этими тремя вариантами и выбор некоторых из этих цветов и шрифтов перед тем, как вы начнете, помогут быстрее все встать на свои места.
Если у вас есть какие-либо вопросы, отзывы, или я что-то пропустил, не стесняйтесь обращаться к нам. Спасибо!
