Руководство по макету контента

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

Вот почему я собираюсь дать несколько очень простых объяснений того, как следует рассматривать макет содержания в условиях, позволяющих максимально упростить работу и обеспечить оптимальный результат.

Цель этого руководства состоит в том, чтобы любой человек, не имеющий знаний о программировании или веб-разработке, мог дать мне качественный макет, и что мне не нужно тратить слишком много времени, пытаясь извлечь идею из нескольких разговоров, пока не придет к выводу.

Шаг 1: шаблон

Чтобы иметь шаблон, по которому мы можем «нарисовать» наше предложение, мы возьмем лист бумаги формата А4 и согнем его на ОДНУ ТРЕТЬЮ по длине.

Шаг 2: блоки содержимого

Давайте представим, что у нас есть несколько типов контента: видео, изображение, текст. Каждый контент представляет собой прямоугольный или квадратный блок. Мы должны подогнать блоки сверху вниз по шаблону по нашему выбору. Мы проиллюстрируем три типа контента.

Видеоблок

Мы будем предполагать, что видео, как правило, будет видео YouTube, мы представляем его в шаблоне следующим образом:

Блок изображения

Это будет зависеть от того, будет ли изображение пейзажным или портретным.

Текстовый блок

Так же, как блок изображения, в зависимости от того, как мы хотим, чтобы текст, мы будем помещать блок или другой. Мы представляем это параллельными линиями.

Текстовые блоки могут быть текстовыми блоками с включенными абзацами и даже списки текстовых элементов

Я собираюсь поместить два примера: блок текста рядом с изображением ландшафта, а другой рядом с портретным изображением:

Титульный блок

Заголовки идут отдельными блоками - это удлиненные блоки, которые обычно занимают всю строку.

Блок кнопок

Если мы хотим, чтобы люди нажимали кнопку и передавали их в другую часть Интернета, или просто появлялось окно с некоторой информацией (или формой)

Другие блоки

Идея похожа. Если бы мы поняли, как работают блоки, я думаю, что мы могли бы четко поставить блок другого типа, который, как и предыдущие, подходит для квадрата или прямоугольника. Например, если мы хотим поместить форму, включенную в контент. Хотя это, как правило, наименее распространено, лучше спросить перед использованием новых блоков, которые не относятся к вышеупомянутым типам. Я постараюсь обновить этот список по мере появления новых идей, которые могут заинтересовать всех.

Наконец, вот пример шаблона со всеми типами блоков, упомянутых выше:

Расширяя блоки

Если нам нужно больше места, нам просто нужно добавить больше страниц в дизайн блока внизу. Нет необходимости заполнять все вниз, но важно не оставлять пустых промежутков сверху вниз между серединой каждого блока. Таким образом, мы можем расширить страницу:

Шаг 3: Создание контента

Теперь, когда у нас есть разметка контента по блокам и типам блоков, необходимо создать контент, который будет идти в этих блоках. Шаг 3 взаимозаменяем с шагом 2. Другими словами, мы можем создать контент раньше, а затем создать макет, зная объем контента, который мы хотим включить. Делать это тем или иным способом неразборчиво, но мы должны понимать, что контент должен точно соответствовать нашему макету

Мы будем следовать предыдущему примеру. На изображении 4 мы видим следующие блоки:

• Титульные блоки 2
• Текстовые блоки 4
• 1 Видеоблок
• 2 Image Blocks
• Блок кнопок 1
• Всего: Блоки 10

Поэтому нам придется настроить наш контент так, чтобы он идеально вписывался в эти блоки, не выходя из них, и чтобы размер шрифта был одинаковым во всех них. Для этого возможно стоит того сначала создайте контент, а затем заблокируйте его, Это уже многое зависит от человека.

Шаг 4: Подгонка контента с блоками

Давайте предположим, что у нас уже есть нарисованный дизайн на бумаге и все блоки контента созданы. Теперь последний шаг - это объединить. Для этого мы будем использовать несколько инструментов, чтобы объединить все и отправить его веб-дизайнеру.

Видео блоки

Видео можно передавать двумя способами:

1. В формате MP4 видео через такой инструмент, как WeTransfer.
2. ПРЕДПОЧТИТЕЛЬНЫЙ ВАРИАНТ: загрузка их на канал YouTube March и передача на YouTube ссылки на видео.

Если в макете есть только одно видео, проблем не будет. Но если есть несколько видео, нам придется каким-то образом связать их с макетом, который мы сделали на бумаге.

Например. Представьте, что есть три видео. В макете мы нарисуем номер 1 в первом видео, номер 2 во втором видео и номер 3 в третьем видео. И тогда при отправке всей документации мы добавим что-то вроде этого:

• Видео 1: Видео, посвященное фразам ненасилия с заголовком: «Самые важные фразы ненасилия».
• Видео 2: Видео о цветах флага с названием: «Флаг ненасилия»
• Видео 3: Видео о группе, которая собирается выступить в Аргентине под названием: «Основная команда Аргентины».

Это позволит легко узнать, какое видео соответствует каждому разделу.

Блоки изображений

В этом случае все изображения должны быть загружены на платформу IMGUR: https://imgur.com/upload

А затем передать ссылки на эти изображения. В идеале размещать изображения так же, как и видео, помечая их цифрами 1, 2, 3 и так далее. Например, давайте представим, что у нас есть 4 изображения на лету в Южной Африке. Все четыре имеют одинаковое имя: «sudafrica.jpg». Ну и ставим последовательные имена в точку, где они будут в раскладке и рисуем на бумаге номер, которому они соответствуют. Пример:

• sudafrica-1.jpg
• sudafrica-2.jpg
• sudafrica-3.jpg
• sudafrica-4.jpg

Кнопка, заголовок и текстовые блоки

Наконец, эти блоки должны быть записаны в документе Word или предпочтительно в Документах Google.

Формат очень прост: в документе Word мы указываем тип блока (заголовок, кнопка или текст), а затем номер, которому он будет соответствовать в макете.

Примеры:

• Название 1:….
• Название 2:…
• Текст 1:…
• Текст 2:…
• Кнопка 1:…
• Кнопка 2:…

Затем я поместил пример документа с совершенно случайными текстами, чтобы было видно, как это будет структурировано, следуя примеру изображения 4:

Вот как должен выглядеть макет после того, как мы поместили числа, соответствующие каждому разделу:

Шаг 4: отправить все

После того, как мы все сделали, вам просто нужно будет отправить это человеку, который будет отвечать за макет

Было бы просто взять

1. Эскизы на бумаге с макетом
2. Содержание
   • Видео ссылки на YouTube или WeTransfer
   • IMGUR ссылки на изображения
   • Ссылка на документ в Google Docs или файл Word

Нотариус Важный Финал

Наконец, в идеале было бы добавить выдающееся изображение, которое будет сопровождать заголовок заголовка 1 страницы. Вот почему Название 1 всегда должно появляться в начале.

Изображение заголовка должно иметь размер 960 x 540 пикселей. Это изображение может быть отправлено, как и остальные изображения, IMGUR

Конечный результат

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

Последняя страница