Ваш текст написан и опубликован на сайте, но продаж товаров нет? Как исправить ситуацию и улучшить описание, сделав его продающим...
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Частые ошибки дизайна веб-страницы Простые советы по верстке и оформлению, которые помогут создать красивую страницу сайта Tilda Education Никита Обухов Основатель Tilda Publishing Тысячи людей во всем мире создают сайты на Тильде. Эта статья основана на большом исследовании, которое мы сделали, анализируя дизайн сайтов, созданных пользователями нашей платформы. Мы выделили частые ошибки и сформулировали простые правила, которые применимы к дизайну любых страниц, независимо от инструмента, с помощью которого они созданы. Ошибки в дизайне лендинга 1. Нет разделения на смысловые блоки Информацию проще воспринимать, если она разделена на блоки по смыслу. Чтобы визуально отделить блоки друг от друга, используйте большие отступы (от 120 до 180 px) и отделяйте блоки с помощью разного цвета фона. Между смысловыми блоками маленькие отступы и нет разделения с помощью цвета — информацию тяжело воспринимать, непонятно, какой текст к чему относится Отступы достаточно большие и блоки разделены цветом — видно, что это блоки разной информации 2. Разные отступы между элементами Между смысловыми блоками должны быть одинаковые расстояния. Иначе страница будет выглядеть неаккуратно, и может создаться ощущение, что блоки неравнозначны по смыслу. Разные отступы —неаккуратно, и есть ощущение, что информация о компании относится к обложке, хотя все блоки равнозначны по смыслу Одинаковые отступы помогают воспринимать смысловые блоки как равнозначную информацию 3. Маленькие отступы, не позволяющие разделить смысловые блоки сайта Чтобы разные смысловые части не выглядели как единое целое, важно их разделять и использовать достаточно большое расстояние между ними (не менее 120 px). Маленькие отступы — блоки сайта прилипают друг к другу. Это перегружает страницу и создает путаницу, как будто это одно целое, а не разные по смыслу части Отступы достаточно большие, сразу понятно, что блоки разные по смыслу 4. Текст плохо читается на фотографии Текст не должен сливаться с фоновым изображением. Чтобы он хорошо читался, можно наложить на фотографию фильтр контрастного тексту цвета. Чаще всего используют черный, но можно использовать яркие цвета и комбинировать их. Еще один вариант — использовать изначально контрастную тексту фотографию или располагать текст так, чтобы он был на затемненном участке изображения. Текст трудно прочитать, фотография слишком светлая На фотографию наложен фильтр, и текст теперь легко читается Как правильно сочетать текст и изображения 5. Много стилей Большое количество разных стилей типографики и оформления на одной странице выглядит непрофессионально и затрудняет восприятие информации. Чтобы этого не происходило, ограничьтесь одним шрифтом, одним цветом и двумя видами насыщенности шрифта (например, normal и bold). Из-за большого количества стилей типографики непонятно, какая информация важная, а какая второстепенная Использован один шрифт, цвет и два вида насыщенности. Типографика выглядит аккуратно и понятно 6. Узкий цветной блок Выделение цветом отдельных узких элементов страницы дробит смысловые блоки и выглядит неаккуратно. Например, заголовки уже выделяются среди текста размером, насыщенностью шрифта, а также отступами. Если нужно выделить какую-то информацию на странице - применяйте цветной фон для всего смыслового блока: и для заголовка, и для текста, относящегося к нему. Заголовки, выделенные цветным фоном дробят смысловые блоки и выглядят отдельными самодостаточными элементами Заголовок и текст, относящийся к нему, имеют общий фон. За счет этого видно, что это один смысловой блок 7. Много текста в узких колонках Когда в узких колонках много текста, его трудно читать — глазам все время приходится перескакивать с одной строки на другую. К тому же это выглядит некрасиво. Лучше уменьшить количество колонок и сократить текст, иначе его просто никто не будет читать. Длинный текст в колонках (еще и с выключкой по центру) неудобно читать Текста в колонках немного, легко прочитать 8. Много текста с выравниванием по центру Центральная выключка (равнение по центру) текста уместна при небольшом количестве слов, иначе его будет сложно воспринимать. При этом текст стоит сделать покрупнее, от 24 пикселей. Если вам необходимо большое количество текста, используйте блок с раскрывающимся текстом (в Тильде TX12, TX16N или кнопка BF703). Текста с центральной выключкой очень много, читается с трудом Короткий текст под заголовком (все с центральной выключкой) создают хорошую композицию 9. Текст накладывается на важную часть изображения Не стоит располагать текст на значимых частях фотографии и мелких деталях. Так и изображение не будет видно, и текст будет читаться тяжело. Попробуйте поварьировать выключку текста (равнение по центру или левому краю) и его вертикальное расположение. Заголовок мешает рассмотреть лицо человека, и текст на фоне мелких деталей сложно читать Изображение и текст вместе создают хорошую композицию, видно детали фотографии, текст легко прочитать 10. Несоблюдение визуальной иерархии Чтобы на странице была видна смысловая иерархия информации, заголовок на обложке должен быть крупнее остальных заголовков на странице либо такого же размера (например, если в заголовке на обложке много слов). Заголовок на обложке неоправданно меньше, чем последующий заголовок, это создает путаницу. Кажется, что второй заголовок важнее Заголовок на обложке крупнее, чем в следующем блоке, все выглядит последовательно и гармонично То же самое относится к визуальной иерархии внутри смыслового блока. Заголовок должен быть самым крупным, а подзаголовок меньше и с меньшей насыщенностью шрифта. Названия преимуществ — заметно меньше, чем заголовок и такой же насыщенности. Описание преимуществ набрано самым мелким текстом. Таким образом, даже при беглом просмотре страницы посетитель увидит, какая информация самая важная и какая вторичная. Заголовок меньше, чем названия преимуществ и кажется второстепенным, хотя по смыслу он важнее Заголовок самый крупный, названия преимуществ меньше, но тоже выделяются среди текста Подробнее о визуальной иерархии сайта 11. Один смысловой блок визуально распадается на два Полноэкранное изображение или галерея, расположенные после текста, смотрятся как самостоятельный блок. Если добавить галерее поля, то за счет общего фона текст и изображение будут выглядеть единым смысловым блоком. Галерея во всю ширину экрана кажется не связанной с заголовком выше и выглядит как самостоятельный блок Галерея расположена на общем фоне с заголовком — все вместе смотрится единым блоком 12. Слишком крупный длинный заголовок Очень крупный шрифт хорошо подойдет для короткой фразы. Если заголовок длинный, лучше использовать меньший размер шрифта, так его будет легче читать и всем элементами на обложке не будет тесно. Слишком крупный заголовок — заслоняет почти всю обложку, элементам тесно, текст тяжело прочитать Хорошая композиция, все элементы обложки сбалансированны, текст легко читается 13. Неуместное использование обводки в кнопках Обводка нужна, чтобы сделать прозрачную кнопку. Добавлять обводку к цветной кнопке не нужно — это лишний и бессмысленный элемент интерфейса, который перегружает страницу и усложняет восприятие контента. 14. Слишком много цветов Большое количество цветовых акцентов создает путаницу на странице: непонятно, что важнее. Достаточно использовать 1−2 цвета, чтобы выделить важные элементы. Много ярких цветов, непонятно, на что в первую очередь обратить внимание Один цветовой акцент создает разнообразие, но не отвлекает от содержания страницы 15. Перегруженное меню Человек заходит на сайт, чтобы найти решение своей проблемы. Помогите ему в этом. Используйте меню, чтобы посетителю сайта было проще сориентироваться и быстрее найти то, что ему нужно. Не перегружайте меню избыточной информацией. Оптимальное количество пунктов меню — 5-7. В меню слишком много информации, поэтому в нем сложно сориентироваться Информации в меню немного, легко сориентироваться Рекомендации по дизайну меню Ошибки в дизайне статьи 1. Длинный сплошной текст Длинный и не разделенный на абзацы текст снижает удобство чтения. Чтобы в тексте было проще ориентироваться, стоит разделить его на абзацы и разбавить, например, ключевой фразой или изображением. Сплошную пелену текста сложно воспринимать глазу В тексте расставлены акценты, благодаря которым его легче читать 2. Заголовок стоит на равном расстоянии от предыдущего и следующего абзаца Заголовок не должен «летать» между текстами предыдущей и следующей главы, потому что по смыслу он относится к последующему абзацу. Расстояние над заголовком должно быть раза в 2−3 больше, чем расстояние под ним. А расстояние под заголовком должно быть примерно равным расстоянию между абзацами или немного больше. Так заголовок будет визуально относиться к последующему тексту. Заголовок находится на равном расстоянии от абзацев снизу и сверху и непонятно, к чему относится За счет небольшого отступа под заголовком видно, что он относится к последующему тексту 3. Смысловая иерархия не соблюдается Контраст в типографике помогает визуально разделить уровни текста и четко распределить иерархию. Самыми крупными должны быть заголовки, подзаголовки могут быть заметно меньше, но отчетливо выделяться в тексте. Заголовок и подзаголовок практически одинакового размера, выглядят как равнозначные уровни текста Видно, что заголовок важнее по смыслу, чем подзаголовок 4. Разные отступы сверху и снизу одного смыслового блока Равнозначные по смыслу блоки должны выглядеть соответственно и располагаться на равном расстоянии друг от друга. Слишком маленький отступ между обложкой и фотографией автора, кажется, что к обложке автор имеет большее отношение, чем к тексту Отступы одинаковые, блоки выглядят как равнозначные элементы 5. Подпись расположена слишком близко к иллюстрации Хотя иллюстрация и подпись образуют единую структуру, это два отдельных элемента, и текст не должен вторгаться на территорию изображения. Подпись приклеилась к изображению и мешает восприятию (и картинки, и текста) Между картинкой и подписью есть воздух, при этом понятно, что подпись относится к фотографии 6. Между подзаголовком и текстом мало места Подзаголовок и последующий текст связаны, но если абзацный отступ внутри текста оказывается больше, чем расстояние между всем текстом и подзаголовком, конструкция становится дисгармоничной. Отступ между заголовком и текстом меньше, чем отступ между абзацами Отступ после заголовка чуть больше, чем отступ между абзацами 7. Основной текст расположен близко к акценту Акцент внутри основного текста (например, ключевая фраза или цитата) — самостоятельный объект. И чтобы он действительно выделялся и бросался в глаза, его нужно отделять от основного текста отступами от 75 до 120 px. Отступ между основным текстом и акцентом слишком маленький Акцент выделяется в тексте благодаря большим отступам 8. Слабый контраст элементов Если вы решили сделать акцент на какой-то фразе — будьте смелее, сделайте ключевую фразу крупнее основного текста на 10-15 px, пусть важная мысль действительно выделяется из окружающего текста. Ключевая фраза как будто притворяется частью текста и не хочет выделяться. Выглядит неаккуратно Ключевая фраза выделена за счет крупного шрифта и отступов 9. Цветной фон для узкого блока Чтобы выделить какой-то небольшой блок (например, информацию об авторе), достаточно сделать хороший отступ, это создаст пространство вокруг. Выделять эту информацию на цветном фоне не стоит, это будет выглядеть неуместно. Подзаголовок также не следует выделять цветом, вполне достаточно того, что он крупнее основного текста и отделен отступами. 10. Между двумя полноэкранными изображениями есть пустое пространство Расположение нескольких полноэкранных изображений подряд не следует оставлять между ними отступ — граница между фотографиями и так будет видна, незачем добавлять лишний элемент, не несущий никакой смысловой нагрузки. Пустое пространство между полноэкранными изображениями выглядит бессмысленно и некрасиво Фотографии выглядят гармонично 11. Много выделений в тексте Акценты (в данном случае жирное начертание) хорошо работают, когда их мало. Большое количество выделений в тексте затрудняют чтение. Много выделено жирным, текст рябит в глазах Небольшое выделение акцентирует внимание на элементе, но не мешает читать весь текст 12. Много стилей типографики В тексте оформление не должно преобладать над удобочитаемостью. Чем меньше стилей типографики, тем лучше видны акценты в тексте. Достаточно выделять заголовки и подзаголовки, а также делать контрастными ключевые фразы. В тексте слишком много акцентов и выделений, рябит в глазах и неудобно читать Стилей типографики немного, четко видны акценты и иерархия в тексте 13. Выравнивание по центру в длинном тексте Выключку (выравнивание) по центру обычно используют в заголовках и выносах — акцентах в тексте, чтобы выделить элемент из массы. Когда весь текст выровнен по центру, это значительно снижает удобство чтения. Текст с центральной выключкой выглядит неопрятно, его неудобно читать Равнение по левому краю лучше всего воспринимается глазом 14. Заголовок прилип к фотографии Заголовок — самостоятельный элемент. Он не должен быть расположен слишком близко к следующей за ним иллюстрации. Чтобы заголовок хорошо сочетался с изображением, сделайте отступ не менее 60 px и добавьте подзаголовок, он раскроет содержание и правильно расставит акценты. Заголовок расположен слишком близко к фотографии, нет воздуха Заголовок отделен от изображения подзаголовком и относится ко всему разделу, а не только к картинке 15. Неуместное использование курсива Курсив используется для того, чтобы выделить слово или короткую фразу в тексте. Он не так сильно бросается в глаза, как жирное начертание, но позволяет сделать акцент в определенном месте. Набирать весь текст или заголовки курсивом не следует. В текстах, набранных шрифтами без засечек, курсив лучше не использовать совсем. Фраза уже выделяется в тексте за счет размера и отступа, курсив уже излишен Курсив на своем месте — небольшой акцент в основном тексте 16. Смещение блоков относительно центра и друг друга Этот досадный промах вы легко обнаружите сами, если после всех манипуляций с текстом (изменение размера шрифта, выравнивания, отступов) просто сделаете паузу и посмотрите на то, что получается. Заголовок и описание смещены влево, а текст вправо Все элементы текста складываются в гармоничную композицию Авторы: Ира Смирнова, Маша Белая, Юлия Засс Дизайн и верстка: Юлия Засс Если материал вам понравился, расскажите о нем друзьям. Спасибо! Читайте также: Как оптимизировать создание многостраничного сайта на Тильде Как веб-дизайнеру развивать насмотренность Создание дизайна сайта на основе модулей: пошаговая инструкция Как правильно использовать карточки в дизайне сайта Как делать красивые статьи на Тильде 24 лекции TED для дизайнеров — подборка Как не облажаться с дизайном Визуальная иерархия сайта: оформление и организация контента Персональный сайт личного бренда: как использовать Тильду для развития личного бренда Флэт (flat) дизайн: лучшие практики плоского дизайна Навигация по сайту — примеры как сделать навигацию удобной Белое пространство: способы вёрстки контента на сайте Обучение веб дизайну: 70+ лучших ресурсов о веб-дизайне 37 лонгридов с отличным дизайном 31 документальный фильм для дизайнеров Показать больше Интернет-маркетинг с нуля Курс, который научит вас продвигать свой сайт Перейти на страницу курса Создание Landing Page Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы Перейти на страницу курса Дизайн в цифровой среде Теоретический курс Никиты Обухова по веб-дизайну Перейти на страницу курса Популярное Дизайн Создание сайта Маркетинг Бизнес Истории компаний и предпринимателей Видеоуроки по веб-дизайну и маркетингу Журнал Tilda.cc Тарифы Список возможностей Шаблоны Примеры сайтов Отзывы о Тильде Обзор конструктора сайтов Блог Вебинары Вакансии. Мы нанимаем Частые вопросы Справочный центр Платформа Курсы Создание сайта без программирования Создание Landing page Интернет-маркетинг с нуля Дизайн в цифровой среде Анимация в вебе Как разобраться в задаче Бесплатные иконки Tilda Icons Генератор UTM-меток Конструктор политики конфиденциальности Библиотека цветов Найти дизайнера Шрифт Tilda Sans Проверка битых ссылок Политика конфиденциальности Пользовательское соглашение In English Ещё Создание интернет-магазина Создание лонгрида Создание блога компании Создание онлайн-курсов SEO на Тильде Конструктор писем Конструктор форм Zero Block. Редактор для веб-дизайнеров Tilda CRM Личный кабинет Создание квиза Адаптивная загрузка изображений Цифровая доступность Решения Образовательный журнал платформы для создания сайтов Tilda Publishing. Практические руководства по дизайну и маркетингу для цифровых проектов. © Обухов Н.В., 2015-2024 Все права защищены. Перепечатка и цитирование материалов запрещены. По всем вопросам пишите на [email protected]
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Часто под расхламлением подразумевается избавление от ненужных вещей. Но есть ещё и неосязаемое пространство, которое часто грузит нас не
Статья о том, откуда возникают проблемы при общении заказчиков и копирайтеров.
Старинный рецепт долголетия монахов
https://lit-ra.su/wp-content/uploads/2020/09/iosif-brodskiy.jpg
Какие приемы психологии продаж применяются в копирайтинге? Как они влияют на эффективность продающих текстов? Какие методики лучше...
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
В небольшой квартире в центре Москвы дизайнерам удалось сохранить исторические окна и часть паркета и создать современное, полное воздуха и света пространство. Как соединить старое и новое нетривиальным способом, рассказывают Ольга Седова и Прохор Машуков из студии Only design
«На білоруських держканалах зараз – те саме, що і в Радянському Союзі» – Ірина Халіп
Как писать тексты в 2020 году, чтобы достичь поставленной цели и получить нужный результат? Какие существуют тренды в копирайтинге и как...
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
“Descubra os Segredos do Mundo das Pedras Preciosas em 30 dias, mesmo iniciando do “zero” Torne-se um mestre nessa arte conosco!” Você consegue separar PEDRAS NATURAIS DAS IMITAÇÕES ?… Você consegue saber se, uma Pedra é FALSA OU VERDADEIRA ?… Você sabe separar PEDRAS NATURAIS de Imitações em VIDRO ?… Você se sente inseguro, quando […]
Автобиографическая повесть К. С. Петрова-Водкина «Пространство Эвклида», написанная в 1930 году, свидетельствует не только о живописном, но и о писательском таланте художника. Самобытный, яркий язык, в котором сохранена живая интонация устного рассказа, помогает читателю ощутить своеобразие
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
Кристаллическое сознание первично и осваивает пространство на разных уровнях (макро и микро) одинаковыми методами. Сопроводительный текст из недавних комментариев: Я вспомнила своё самое первое воплощение, вернее даже правильнее , наверное, будет сказать - рождение. До этого было множество…
