Почему хороший дизайн всегда начинается с контента для сайта
Что такое контент, как принцип «сначала контент» поможет создать эффективный сайт и как подготовить контент для сайта
В статье мы рассказываем о том, с чего начать работу над сайтом, как построить его структуру и как превратить процесс «придумывания» в упорядоченный набор действий.
Ключевой этап, который происходит до начала работы над веб-дизайном — подготовка контента. Что такое контент для сайта?
Контент — это подборка тех материалов, из которых состоит сайт: изображения, видео, музыка и, конечно, тексты.
Важное условие для создания внятного сайта — сначала определиться с контентом: написать текст, подобрать картинки и фотографии и нарисовать прототип. Только после этого можно приступать к веб-дизайну.
Ошибка, которую совершают все новички
Современные технологии позволяют создавать сайты довольно легко, поэтому есть соблазн немедленно начать воплощать смутную, интуитивную картинку, которая есть в голове, без предварительного эскиза.
Так получаются бестолковые и нефункциональные сайты, которые потом надо переделывать. А «переделыванием» очень сложно вывести непродуманный изначально сайт на новый уровень качества. И не нужно. Что нужно на самом деле — так это построить сайт до того, как вы приметесь за его наполнение.
«Сначала посмотрю, как получается, а потом переделаю». Это не работает: заниматься визуальным оформлением — совсем не то же самое, что проектировать. Проект — основа для дизайна; без проекта дизайн работает как декорация, маскирующая отсутствие четкой структуры.
«Сначала посмотрю, как получается, а потом переделаю». Это не работает: заниматься визуальным оформлением — совсем не то же самое, что проектировать. Проект — основа для дизайна; без проекта дизайн работает как декорация, маскирующая отсутствие четкой структуры.
Преимущества принципа «сначала контент»
Создание понятной, интуитивной структуры
Если вы знаете, из чего должен состоять сайт, то можете отделить главное от второстепенного. Иерархия — ваше оружие. Каждый блок должен встать на свое место.
Например, вы уже подумали о том, что к сайту будет привязан блог. Гораздо проще найти место для этой информации еще на этапе общего формирования устройства, а не пытаться встроить ее в уже готовую систему, которая получилась в результате работы «наощупь» без предварительного плана.
В основе любой системы — система.
Например, вы уже подумали о том, что к сайту будет привязан блог. Гораздо проще найти место для этой информации еще на этапе общего формирования устройства, а не пытаться встроить ее в уже готовую систему, которая получилась в результате работы «наощупь» без предварительного плана.
В основе любой системы — система.
Возможность придумать специальные приемы, работающие на контент
Если с самого начала попробовать воспроизвести структуру, просто набросав схему на бумаге, — становится ясно, какие моменты являются ключевыми.
Сайт предусматривает множество ссылок на другие источники? Если сформулировать это сразу, можно придумать особенный графический ход для отображения ссылок — то есть сделать дизайн эффективным для подачи информации.
Сайт предусматривает множество ссылок на другие источники? Если сформулировать это сразу, можно придумать особенный графический ход для отображения ссылок — то есть сделать дизайн эффективным для подачи информации.
Сайт получается ясным и четким
Идея работает, если вы можете рассказать ее своей бабушке и она поймет, что к чему. Это правило отлично работает для создания сайтов. Чем проще — тем эффективней. Но как раз простоты иногда сложнее всего добиться. Простой и понятный интерфейс получается в том случае, если приступить к его созданию уже сформулировав для себя — что, куда и откуда. И главное — зачем.
Сокращается вероятность бесконечных поправок
Если вы делаете сайт для клиента, то важно прежде всего собрать всю информацию, которую он может предоставить — тексты, фотографии. Полнота информации не только поможет сформировать сам сайт, но и утвердить содержание с клиентом сразу, чтобы не вносить исправления в уже готовые страницы.
Как использовать принцип «сначала контент», создавая сайт на Тильде
Посмотрите на шаблоны на Тильде: это «не настоящие» сайты, а только прототипы. Тем не менее, в них нет бессмысленных текстов и случайных картинок: каждый шаблон визульно воспринимается как полноценный сайт.
Вывод: понятную и логичную структуру можно создать, даже если вы не обладаете полной информацией.
Придерживайтесь формулы: идея — формирование структуры — создание прототипа —набор контента — дизайн. Этот метод делает процесс создания сайта последовательным, а сам сайт понятным.
Разработка и подготовка контента для сайта
Пример
Вы делаете сайт цветочного салона. Отсутствие изначального прототипа может привести к тому, что у вас получится страница, заполненная сплошными букетами. На самом деле, информации, которую вы можете дать посетителю, — гораздо больше. И это сразу видно, если сделать план с самого начала.
Ошибка
Сразу начать компоновать блоки в Тильде, разбираясь с наполнением и структурой «по ходу дела».
Правильный подход
Перечислите письменно все элементы, из которых будет состоять сайт. Можно сделать это в текcтовом редакторе, а можно от руки на бумаге.
Напишите названия основных блоков. Понятно, что сами цветы — главная часть презентации вашего бизнеса, поэтому начать можно с именно этого раздела. У этого блока должны быть подразделы — по типам цветов, по простым или более сложным букетам.
Напишите названия основных блоков. Понятно, что сами цветы — главная часть презентации вашего бизнеса, поэтому начать можно с именно этого раздела. У этого блока должны быть подразделы — по типам цветов, по простым или более сложным букетам.
Вы сами — главный знаток своего дела, вы и определяете иерархию.
Другой раздел меню — люди, которые работают в вашей компании. Можно попросить каждого рассказать о себе и о своей работе — так раздел обретет наполнение и «живое» лицо. Не относитесь ни к одному разделу сайта как к второстепенному. Каждый раздел должен быть красивым, лаконичным и самодостаточным — тогда со временем вы сможете обновлять и расширять его. У каждого члена вашей команды есть любимый букет? Расскажите об этом.
Не переживайте, если структура получается объемной. Упразднить лишние элементы вы всегда успеете.
Подумайте о том, что еще может отличить ваш сайт от других ему подобных. Всегда интересен процесс создания. Можно сделать фотогалерею о том, как появляется букет — от эскиза флориста и закупки необходимых цветов у поставщиков — до реализации и счастливого финала: букет поймала подружка невесты. Вам кажется, что такой способ презентации наглядно показывает клиенту всю сложную историю создания букета? Отлично. Пока включите этот элемент в вашем списке блоков; правильное место для него вы найдете на следующем этапе работы.
Напишите названия блоков, которые вы придумали, на отдельных полосках бумаги, — это действенный способ определиться со структурой. Пробуя по-разному группировать отдельно вырезанные заголовки (модули вашего сайта, сущности), можно проследить и проанализировать взаимодействие разных элементов контента на сайте.
Куда лучше встанет информация о любимых букетах ваших коллег — на странице «команда» или в виде пометок в каталоге букетов? Именно такие вопросы вам надо решить еще на этапе «бумажного» проектирования.
Куда лучше встанет информация о любимых букетах ваших коллег — на странице «команда» или в виде пометок в каталоге букетов? Именно такие вопросы вам надо решить еще на этапе «бумажного» проектирования.
Очень важно начинать делать сайт, уже имея общую картину, схематично нарисованную на бумаге. Только так вы сможете оценить, насколько логично работает структура.
Если разложить перед собой все заголовки модулей сайта, то можно отчетливо увидеть ценность каждого блока.
Например: идея с фото-рассказом про историю создания букета явно не должна затеряться. Поместите бумажную полоску с названием этого блока рядом другими, чтобы посмотреть, не спорят ли по своему «весу» разные категории.
Например: идея с фото-рассказом про историю создания букета явно не должна затеряться. Поместите бумажную полоску с названием этого блока рядом другими, чтобы посмотреть, не спорят ли по своему «весу» разные категории.
Когда все сущности сайта у вас перед глазами, легко понять что главное, что второстепенное, какие разделы можно объединить и какая должна быть логика.
Что еще? Отзывы клиентов. Делать из этого раздела отдельный блок или пустить дополнительной строкой на одной из страниц? Помните о принципе «самодостаточности» каждого раздела; не объединяйте темы, которые могут работать по отдельности.
Проанализируйте все стороны вашего бизнеса. Вы показали команду и букеты, рассказали о доставке, дали отзывы клиентов, сделали отдельный блок с «Историей одного букета» — это уже 5 пунктов в меню. Можно ли что-то объединить или добавить другой блок? Меняйте местами бумажки с заголовками — нагляднее способа не придумаешь.
Найдите место для каждого элемента заранее, а не пытайтесь встроить потом.
Проанализируйте все стороны вашего бизнеса. Вы показали команду и букеты, рассказали о доставке, дали отзывы клиентов, сделали отдельный блок с «Историей одного букета» — это уже 5 пунктов в меню. Можно ли что-то объединить или добавить другой блок? Меняйте местами бумажки с заголовками — нагляднее способа не придумаешь.
Найдите место для каждого элемента заранее, а не пытайтесь встроить потом.
Идея. Рисуя схематично прототип, используйте библиотеку блоков Тильды, чтобы понять как может выглядеть тот или иной модуль: отзывы, описание, каталог товаров и т.д.
Блоки в библиотеке Тильды разбиты на категории, сориентироваться в них будет несложно.
Напишите текст. После того, как структура определена, можно приступать к написанию текстов. Лучше всего написать все в ворде единым текстом, разделенным на абзацы — так будет проще оценить общую наполненность сайта контентом.
Добавьте заголовки и подзаголовки — это задаст структуру и очень поможет, когда вы будете создавать сайт в конструкторе.
Добавьте заголовки и подзаголовки — это задаст структуру и очень поможет, когда вы будете создавать сайт в конструкторе.
Соберите все фотографии, которые нужны для иллюстрации блоков сайта. Очень важно иметь полную картину о каждом: так вы сможете оценить его «вес», значимость и адекватность своему расположению в общей структуре. Например, если отзывов у вашего бизнеса пока нет — отдельная закладка в меню на эту тему будет смотреться пустой. А можно найти другое решение: напишите отзывы сами или попросите друзей — они наверняка заочно уверены в успехе вашего бизнеса. Скорее всего, добавлять этот модуль все равно придется, а значит, лучше позаботиться об этом с самого начала.
Как правильно наполнять сайт контентом
Что делать, если текста пока нет
Бывает так, что информации недостаточно, но нужно предоставить прототип сайта. Но и в этом сначала приступать к дизайну — неправильный подход. Даже при самом минимальном наборе вводных необходимо разложить будущий сайт на блоки до начала работы над ним.
После чего важно не совершить другую ошибку: часто поначалу используют «рыбные» тексты или lorem ipsum, то есть текст-заполнитель. Кажется, что такое заполнение сайта контентом даст восприятие композиции страницы. Но если «настоящего» текста пока нет, случайный набор слов не решит ситуацию, а просто заполнит пространство.
Например: анонс события. Вот как выглядит маленький блок анонса с «рыбным» текстом:
После чего важно не совершить другую ошибку: часто поначалу используют «рыбные» тексты или lorem ipsum, то есть текст-заполнитель. Кажется, что такое заполнение сайта контентом даст восприятие композиции страницы. Но если «настоящего» текста пока нет, случайный набор слов не решит ситуацию, а просто заполнит пространство.
Например: анонс события. Вот как выглядит маленький блок анонса с «рыбным» текстом:
Ближайшие события
Название события
Название события
Краткое описание события, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Адрес
Время | Дата
Адрес
Время | Дата
Вроде все необходимые строчки на месте. Вместо текста у вас пока «рыба». А когда текст примет окончательный вид, может оказаться, что и сверстан он должен быть по-другому.
Ближайшие события
Лекция Нормана Фостера в рамках фестиваля «Зодчество» 2016
Лекция Нормана Фостера в рамках фестиваля «Зодчество» 2016
Норман Фостер — один из самых значительных современных архитекторов — выступит с лекцией в Московском Архитектурном институте. Прийти могут не только студенты, лекция открыта для всех желающих.
ул. Рождественка, 10
17.00 | понедельник, 17 октября
ул. Рождественка, 10
17.00 | понедельник, 17 октября
Как только вместо «рыбного» текста мы видим осмысленный — восприятие меняется. Текст может быть выдуманным, но главное — он создает впечатление реальной информации, который действительно могла бы здесь стоять.
К тому же так можно «оживить» текст, при этом сделав его более функциональным. Например, можно написать не только дату, но и день недели. Это приятная деталь, которую ничего не стоит добавить, но она сразу меняет ощущение пользователя — или клиента, которому вы представляете прототип.
Если позаботиться о таких деталях уже на этапе «выдуманных» текстов, то не придется потом переделывать сетку страницы из-за лишней строчки.
Другое преимущество такого подхода в том, что, работая с реальным текстом, мы можем задавать определенные правила подачи информации на сайте.
К тому же так можно «оживить» текст, при этом сделав его более функциональным. Например, можно написать не только дату, но и день недели. Это приятная деталь, которую ничего не стоит добавить, но она сразу меняет ощущение пользователя — или клиента, которому вы представляете прототип.
Если позаботиться о таких деталях уже на этапе «выдуманных» текстов, то не придется потом переделывать сетку страницы из-за лишней строчки.
Другое преимущество такого подхода в том, что, работая с реальным текстом, мы можем задавать определенные правила подачи информации на сайте.
Описание не нужно делать многословным; заголовок — тем более. Часть основного текста может стать отдельной позицией: такая подача воспринимается лучше, чем тяжеловесная фраза.
Понятно, что работая с «рыбой», вы не можете предусмотреть такие решения.
Правильный результат — простой, лаконичный текст. Информацию, которая может возникнуть в других аналогичных блоках, лучше ставить отдельно — как в нашем примере стоит фраза «вход: свободный».
Правильный результат — простой, лаконичный текст. Информацию, которая может возникнуть в других аналогичных блоках, лучше ставить отдельно — как в нашем примере стоит фраза «вход: свободный».
Ближайшие события
Лекция Нормана Фостера
Лекция Нормана Фостера
В рамках фестиваля «Зодчество» один из ведущих современных архитекторов выступит с лекцией в Московском Архитектурном институте.
ул. Рождественка, 10
17.00 | понедельник, 17 октября
Вход: свободный
ул. Рождественка, 10
17.00 | понедельник, 17 октября
Вход: свободный
Не нужно тратить время на выдумывание текста, который все равно будет заменен «настоящим». Его можно скопировать с любого сайта, аналогичного вашему. Ожидая финальный текст от коллеги или заказчика, вы рискуете потом переделывать готовый сайт, полностью заполненный lorem ipsum.
Так что сначала — контент.
Формирование контента до начала веб-работы — эффективный и действенный подход, который не только помогает избежать ненужных исправлений в будущем, но и дает возможность четко видеть структуру с самого начала.
Так что сначала — контент.
Формирование контента до начала веб-работы — эффективный и действенный подход, который не только помогает избежать ненужных исправлений в будущем, но и дает возможность четко видеть структуру с самого начала.
Правильный подход — мыслить не страницами, а структурами и блоками.
Модули, которые логично взаимодействуют и не перегружены — это и есть правильно сделанный сайт. Подход «сначала контент» означает, что нужно сформулировать эти структуры, а потом уже приступать к непосредственному созданию сайта.
Текст: Инна Бурштейн
Дизайн и верстка: Мария Белая
Дизайн и верстка: Мария Белая
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
