Веб-дизайн сейчас как никогда популярен. Давайте не будем лукавить, при такой популярности IT-направления, все-таки дизайн один из самых простых способов захода в эту область. В связи с этим на рынке можно встретить довольно обильное наличие специалистов и к сожалению далеко не все они являются экспертами.
Имея довольно обширный опыт работы, неоднократно сталкивались с тем, когда клиенты приходят за правками или редизайном уже готовых сайтов на Тильде, или же приходят для переноса сайта на Тильду и далеко не всегда на работы можно было глядеть без слез.
Но не стоит отчаиваться, на рынке так же представлены очень достойные специалисты и студии, которые все сделают на высшем уровне, главное просто их найти. На что обращать внимание при выборе, описывали в этой статье.
Также сделали для вас подборку советов на что обращать внимание при приема сайта у разработчиков.
Отступы
Одна из распространённых ошибок в дизайне — неправильное использование отступов между блоками. Когда нет чёткого разделения на смысловые блоки или отступы слишком маленькие, страница выглядит перегруженной и трудной для восприятия. Важно помнить правило: внешние отступы (между блоками) должны быть больше внутренних (внутри блока), чтобы создавалась ясная структура и логическая группировка элементов. Это помогает пользователям легче ориентироваться на сайте и быстрее находить нужную информацию.
Внешние отступы должны быть больше внутренних, называется правилом внутреннего и внешнего — одно из самых важных правил в дизайне.
🔴 Нет разделения между блоками, что затрудняет восприятие, не понятно, что к чему относится, и к какому разделу.
🟢 Добавлены отступы между блоками, теперь понятно, где начинается и заканчивается раздел
Разделение блоков цветом
Ещё один эффективный способ структурировать контент на сайте — использовать цветовые акценты для разделения блоков. Это помогает визуально выделять смысловые группы и направлять внимание пользователя на ключевые элементы. Сочетание цветовых решений с правильными отступами делает страницу более логичной и удобной для восприятия, что улучшает навигацию и общее впечатление от дизайна.
🔴 Нет разделения между блоками, что затрудняет восприятие, не понятно, что к чему относится, и к какому разделу.
🟢 Добавлены отступы и разделение цветом, теперь понятно, где начинается и заканчивается раздел
Скачущие отступы
Одна из распространённых ошибок в дизайне — неправильное использование отступов между блоками. Когда нет чёткого разделения на смысловые блоки или отступы слишком маленькие, страница выглядит перегруженной и трудной для восприятия. Важно помнить правило: внешние отступы (между блоками) должны быть больше внутренних (внутри блока), чтобы создавалась ясная структура и логическая группировка элементов. Это помогает пользователям легче ориентироваться на сайте и быстрее находить нужную информацию.
🔴 Скачут отступы между блоками, что затрудняет восприятие, не понятно, что к чему относится, и к какому разделу.
🟢 Одинаковые отступы между блоками, теперь понятно, где начинается и заканчивается раздел, и что к чему относится
Нечитабельный текст на фото
Частая ошибка дизайнеров — размещение текста поверх изображений, делая его плохо читаемым. Если фон слишком пёстрый или цвета текста и изображения сливаются, пользователю будет сложно разобрать содержимое. Чтобы этого избежать, рекомендуется использовать полупрозрачные подложки, затемнение изображения или выбирать контрастные цвета текста и фона. Это не только улучшает читаемость, но и делает дизайн более профессиональным.
🔴 Текст не читается, так как фото слишком светлое
🟢 Наложив фильтр на фото, уже совсем другая картина
Перебор с цветом и стилем
Перебор с цветами и стилями текста, например, использование разных типов шрифта — жирного, тонкого, среднего, и дополнительно курсива, создает визуальный хаос. Это затрудняет восприятие информации и нарушает общую гармонию дизайна. Рекомендуется ограничивать количество стилей текста, чтобы акцентировать внимание на ключевых элементах и обеспечить чистоту и удобочитаемость. Оптимальным вариантом будет использование не более двух-трех стилей в рамках одного проекта.
В случае шрифта опционально использовать 2 насыщенности, например light, medium. В случае с цветами: 2−3 цвета.
🔴 Перебор со стилями, отсюда не понятно какая информация важная, какая второстепенная
🟢 Использование 1−2 стилей дает ясное понимание и подчеркивает важную и второстепенную информацию, не перегружая
Много текста в колонках
Лучше сократить текст в узких колонках, чтобы избежать перегрузки читателя информацией и облегчить восприятие. Краткие и ёмкие фразы помогут донести основную мысль, не создавая визуального дискомфорта. Четкие формулировки и лаконичные предложения обеспечат удобство чтения и улучшат восприятие контента.
🔴 Длинный текст в колонках с выравниванием по центру — тяжело читать
🟢 Сокращение текста в колонках, решает проблему
Размер текста
Ошибки в размерах текста, нарушает визуальную иерархию страницы. Заголовки должны привлекать внимание и быть заметнее, чем текст описания. Если размеры не соответствуют их важности, по льзователь может запутаться и не сразу понять, что в контенте главное. Правильная иерархия размеров текста улучшает восприятие и помогает структуре сайта выглядеть логично и привлекательно.
🔴 Заголовок на обложке меньше, чем последующий заголовок, что создает впечатление, что второй заголовок важнее
🟢 Заголовок на обложке крупнее, чем последующие, что создает ощущение последовательности
Кнопки
Неуместное использование обводки в кнопках может негативно сказаться на восприятии интерфейса. Кнопки с обводкой, если они используются неуместно или слишком часто, могут выглядеть неаккуратно и сбивать с толку пользователей. Например, если кнопки одного действия оформлены с различными типами обводки или без неё, это создаёт ощущение несогласованности и уменьшает доверие к интерфейсу. Кроме того, тонкие обводки могут быть плохо видны на некоторых фонах, что затрудняет взаимодействие. Лучше придерживаться единого стиля для кнопок, чтобы они были интуитивно понятны и легко различимы.
Также важно учитывать размер кнопок: слишком маленькие кнопки могут быть неудобны для нажатия, особенно на мобильных устройствах, где пользователям нужно точно попадать в цель. Это может привести к разочарованию и плохому пользовательскому опыту. С другой стороны, слишком крупные кнопки могут занимать излишнее пространство на странице, создавая перегруженность интерфейса и отвлекая внимание от других важных элементов. Лучше придерживаться единого стиля для кнопок и оптимального их размера, чтобы они были интуитивно понятны и легко различимы, что обеспечит комфортное взаимодействие с интерфейсом.
🔴 Неуместная обводка кнопок и слишком большие кнопки
🟢 Есть главные кнопки и второстепенные, кнопка опционального размера
Перебор с яркостью
Ошибка плохой контрастности цветов может значительно ухудшить читаемость текста и восприятие всего дизайна сайта. Когда яркая подложка сочетает в себе цветной текст, пользователи могут испытывать трудности с восприятием информации. Например, текст зеленого цвета на ярко-желтом фоне будет трудно различим, что может привести к путанице и недопониманию. Кроме того, такой дизайн может создавать негативное впечатление о сайте, снижая его профессионализм и доверие к представленному контенту.
Правило хорошего контраста заключается в том, что текст всегда должен быть хорошо различим на фоне, на котором он размещен. Оптимально, чтобы контраст между текстом и фоном был не менее 4.5:1 для обычного текста и 3:1 для крупных заголовков. Выбор цветов также должен учитывать их восприятие, чтобы пользователи не только могли читать текст, но и чувствовали себя комфортно, просматривая сайт. Неправильное сочетание цветов может не только отвлекать внимание, но и вызывать визуальный дискомфорт, что в итоге негативно сказывается на пользовательском опыте.
🔴 Перебор с цветами, не понятно куда смотреть
🟢 Один цветовой акцент не отвлекает от содержания
Высота строки
Ошибка, связанная с высотой строки, возникает, когда расстояние между строками текста слишком маленькое, из-за чего текст кажется слипшимся и трудночитаемым. Когда высота строки не обеспечивает достаточного пространственного разделения между строками, это затрудняет восприятие информации и создает чувство визуального дискомфорта. Читателям сложно сосредоточиться на содержании, и они могут быстро терять интерес к тексту. Правильное использование высоты строки — это важный аспект дизайна, который помогает обеспечить удобочитаемость. Оптимально, чтобы высота строки составляла 1.5−1.75 от размера шрифта, что делает текст более «воздушным» и легким для восприятия.
🔴 Слипшийся текст, тяжело читается
🟢 Хорошая высота строки, хорошо читается
Читать больше полезной информации: https://sheina-studio.ru/blog