Частые ошибки в дизайне веб-страницы

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

Это был первый сайт McDonalds в 1996 году. Дизайнерам сказали, что их зарплата будет увеличена в зависимости от количества красного и желтого, которые они будут использовать. Это, конечно, основные цвета торговой марки, но их нужно разбавить другими цветами. Ну что же — пришло время анализировать и учиться!

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

Ошибки в дизайне лэндинга

1. Нет разделения блоков по смыслу

Любую информацию проще воспринимать, если ее содержимое разделить по смыслу. Как параграфы в предложении. Один блок – одна мысль. Используйте для выделения цвет фона или отступы. 

2. Разный размер отступов между блоками

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

3. Слишком маленькие отступы

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

4. Цвет и размер текста на фотографии

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

Для размещения текста на контрастной фотографии используйте фильтры. Или пишите текст на темном участке.

Маленькая хитрость: белый текст в черной обводке хорошо видно на любом фоне

Как сочетать текст и изображение

5. Много стилей

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

6. Выделение цветом

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

7. Оформление колонок

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

8. Выравнивание текста

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

9. Иерархия заголовков

Помните, что информация должна подаваться порционно. Заголовок первого уровня на странице может быть только один.
За ним следует заголовок второго уровня. Никак иначе.

И такое правило применяется для всей страницы. Заголовок – описание – текст. Все это визуально отделяет смысловые блоки с информацией и читателю легче ориентироваться в ней.

10. Цвета

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

Два доминирующих цвета и их оттенки – идеальное решение.

Хотим отметить, что данные нами советы подобны пиратскому кодексу – содержат лишь ряд указаний, а не строгих правил. Конечный дизайн вашего сайта — это ваше решение. История знает много случаев, когда пренебрежение правилами приводило к превосходным результатам.

Жуковский Александр