Дизайн сайта без дизайнера: базовые правила
Далеко не у каждого владельца первого сайта есть бюджет на профессионального дизайнера. И это нормально: для блога, визитки или информационного проекта на старте вполне достаточно аккуратного, чистого оформления, которое не мешает читать. Хороший дизайн в таких проектах — это не художественное произведение, а набор правильных решений о шрифтах, цветах, отступах и порядке элементов. Эти правила вполне можно освоить самостоятельно. Разберём основные принципы, которые помогут сделать сайт опрятным и удобным без участия дизайнера.
Главная задача дизайна — помочь читать
Прежде чем выбирать цвета и шрифты, стоит понять, зачем вообще нужен дизайн на информационном сайте. Его задача — сделать так, чтобы человек быстро понял, куда попал, нашёл нужную информацию и смог комфортно её прочитать. Всё, что этому мешает, — лишнее, каким бы красивым оно ни казалось.
Поэтому первый вопрос к любому элементу оформления: помогает ли он посетителю? Анимированный фон, мигающие баннеры, пять разных шрифтов на странице, яркие цвета в каждом блоке — всё это отвлекает от содержания. Хороший дизайн информационного сайта часто почти незаметен: человек просто читает и не устаёт.
Если посетитель запомнил ваш дизайн, а не вашу статью, — что-то пошло не так.
Типографика: шрифт решает больше, чем кажется
Текст — основное содержимое большинства сайтов, поэтому типографика важнее любых декоративных элементов. Несколько базовых правил:
- Не больше двух шрифтов. Один для заголовков, один для основного текста. Часто достаточно и одного шрифта разной насыщенности.
- Читаемый размер основного текста. На компьютере удобно читать текст размером около шестнадцати-восемнадцати пикселей, на телефоне — не меньше шестнадцати. Мелкий текст — одна из самых частых ошибок самодельных сайтов.
- Комфортный межстрочный интервал. Расстояние между строками должно быть примерно в полтора раза больше размера шрифта. Слишком плотные строки сливаются, слишком редкие разваливаются.
- Ограниченная ширина строки. Оптимально, когда в строке помещается от шестидесяти до восьмидесяти знаков. Если текст растянут на весь широкий монитор, глазу тяжело переходить на следующую строку.
- Выравнивание по левому краю. Выравнивание по ширине на сайтах создаёт неровные пробелы между словами, а по центру удобно читать только короткие фразы.
- Проверенные шрифты. Выбирайте шрифты с хорошей поддержкой кириллицы. Декоративные шрифты оставьте для логотипа, если очень хочется.
Визуальная иерархия
Когда человек открывает страницу, он не читает её сразу целиком, а сначала сканирует: смотрит на заголовки, выделения, списки, картинки. Визуальная иерархия — это способ показать, что на странице главное, что второстепенное, а что служебное.
Иерархия создаётся несколькими средствами: размером, насыщенностью, цветом и положением. Главный заголовок страницы должен быть самым крупным и заметным. Подзаголовки разделов — меньше, но всё ещё заметно крупнее основного текста. Служебная информация вроде даты, рубрики, количества комментариев — мельче и спокойнее по цвету.
Простой тест: прищурьтесь, глядя на страницу, чтобы текст стал размытым. Вы должны по-прежнему видеть, где заголовок, где основные блоки и куда смотреть в первую очередь. Если всё сливается в одно серое пятно или, наоборот, всё одинаково кричит, иерархия не работает.
Цвет: меньше значит лучше
С цветом новички обычно переусердствуют. Правило, которое спасает почти всегда: один основной цвет, один акцентный и нейтральные оттенки.
- Нейтральная база. Фон белый или очень светлый, основной текст — тёмно-серый или почти чёрный. Чистый чёрный на чистом белом бывает слишком контрастным, лёгкое смягчение делает чтение комфортнее.
- Основной цвет бренда. Используется в логотипе, шапке, ссылках. Это то, по чему сайт запоминается.
- Акцентный цвет. Для кнопок и важных призывов к действию. Его должно быть мало, иначе он перестаёт выделяться.
Обязательно проверяйте контраст текста и фона. Светло-серый текст на белом фоне выглядит изящно на макете, но его невозможно читать на солнце с экрана телефона и тяжело читать людям со слабым зрением. В интернете есть бесплатные сервисы проверки контраста — пользуйтесь ими.
Если не уверены в своём вкусе, возьмите готовую палитру из генераторов цветовых схем. Они подбирают оттенки, которые гармонично сочетаются между собой.
Отступы и воздух
Пустое пространство вокруг элементов — один из самых мощных инструментов дизайна, и при этом самый недооценённый. Когда блоки прижаты друг к другу, страница выглядит тесной и дешёвой. Когда вокруг заголовков, абзацев, картинок есть достаточно воздуха, та же страница сразу кажется аккуратной и профессиональной.
Несколько практических советов:
- Используйте шкалу отступов. Выберите несколько фиксированных значений, например кратных восьми пикселям, и применяйте только их. Это создаёт ощущение порядка.
- Связанное ближе, несвязанное дальше. Отступ между заголовком и его текстом должен быть меньше, чем между этим текстом и следующим заголовком. Тогда глаз сразу понимает, что к чему относится.
- Не экономьте на полях. Особенно на мобильных устройствах: текст, прилипший к краю экрана, читать неприятно.
Если страница выглядит «как-то не так», а вы не понимаете почему, попробуйте увеличить отступы. В большинстве случаев это помогает.
Сетка и выравнивание
Даже простой сайт выглядит аккуратнее, когда элементы выровнены по невидимым линиям. Края картинок совпадают с краями текста, карточки в ряду одинаковой ширины, кнопки стоят на одной линии. Глаз замечает малейшие несоответствия, даже если человек не может объяснить, что именно не так.
Готовые темы оформления обычно уже построены на сетке, и задача владельца — не ломать её. Не вставляйте картинки произвольной ширины, не выравнивайте отдельные блоки по центру, когда всё остальное выровнено по левому краю, не создавайте случайных отступов вручную.
Изображения и иллюстрации
Картинки оживляют страницу, но могут и испортить её. Правила простые:
- используйте изображения, которые действительно поясняют текст: скриншоты, схемы, собственные фотографии;
- выдерживайте единый стиль: если одни иллюстрации рисованные, а другие — стоковые фото в разной цветовой гамме, сайт выглядит лоскутным;
- соблюдайте авторские права — берите изображения из бесплатных фотобанков с понятной лицензией или делайте сами;
- сжимайте файлы перед загрузкой, иначе страницы будут грузиться медленно;
- заполняйте альтернативное описание картинок — это полезно и для людей с программами чтения экрана, и для поисковиков.
Выбор готовой темы оформления
Самый практичный путь для сайта на CMS — выбрать хорошую готовую тему и аккуратно настроить её под себя. При выборе обращайте внимание на следующее:
- тема выглядит чисто и сдержанно, без перегруженности эффектами;
- она корректно отображается на телефонах и планшетах;
- страница с демонстрацией быстро загружается;
- тема регулярно обновляется и имеет хорошие отзывы;
- в ней можно поменять цвета, шрифты и логотип без правки кода.
Не стремитесь найти тему, которая умеет всё. Многофункциональные темы с десятками вариантов оформления обычно тяжёлые и медленные. Если вы освоили основы, описанные в статье HTML и CSS для начинающих, то сможете точечно подправить оформление своими стилями.
Мобильные устройства в первую очередь
Большинство посетителей увидят ваш сайт на экране телефона. Поэтому проверяйте каждое изменение дизайна не только на компьютере, но и на смартфоне. Кнопки и ссылки должны быть достаточно крупными, чтобы в них попасть пальцем. Меню должно удобно открываться и закрываться. Таблицы и широкие блоки не должны вылезать за край экрана. Подробно эти вопросы разобраны в материале о мобильной версии сайта.
Типичные ошибки самодельного дизайна
Соберём частые промахи, которые сразу выдают любительский сайт:
- много разных шрифтов и размеров без системы;
- яркие цвета везде, а не только на акцентах;
- мелкий или низкоконтрастный текст;
- текст, растянутый на всю ширину широкого экрана;
- всплывающие окна, которые появляются сразу после открытия страницы;
- навязчивая реклама, перекрывающая содержимое;
- автоматически запускающееся видео или музыка;
- разнобой в стиле иллюстраций.
Избавьтесь хотя бы от этих ошибок, и сайт уже будет выглядеть заметно лучше большинства любительских проектов.
Итог
Дизайн информационного сайта без дизайнера вполне возможен, если помнить главное: оформление служит чтению. Ограничьтесь одним-двумя шрифтами, выберите читаемый размер и межстрочный интервал, используйте сдержанную палитру с одним акцентом, не жалейте отступов, выравнивайте элементы и подбирайте изображения в едином стиле. Возьмите за основу качественную готовую тему и не ломайте её сетку. Такой сайт будет выглядеть опрятно и вызывать доверие, а значит, у содержания появится шанс быть прочитанным.