Керівництво для макета вмісту

Коли ми хочемо встановити вміст в Інтернеті, однією з найважливіших проблем ми є те, що пропозиції, які я отримую, ніколи не дуже добре продумані, щоб бути успішно включеними в Інтернет. Загалом проблема полягає в тому, що без адекватної структури дизайн та компонування зазвичай не виглядають занадто добре, даючи незадовільний результат.

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

Завдання цього посібника полягає в тому, щоб кожен, хто не знав програмування або веб-розробки, міг дати мені якісний макет і що мені не доведеться витрачати занадто багато часу, намагаючись витягнути ідею за допомогою декількох розмов до досягнення висновку.

Крок 1: Шаблон

Для того, щоб мати шаблон, на якому ми зможемо «намалювати» нашу пропозицію, ми візьмемо аркуш паперу формату А4 і складемо його на ТРЕТИНУ вздовж.

Крок 2: Блоки вмісту

Уявімо, що у нас є кілька типів контенту: відео, зображення, текст. Кожен вміст - це прямокутний або квадратний блок. Ми повинні розміщувати блоки зверху вниз шаблону на наш вибір. Ми проілюструємо три типи змісту.

Відеоблок

Ми будемо вважати, що це відео, як правило, є відео YouTube, ми представляємо його в шаблоні наступним чином:

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

Це залежить від того, чи зображення є пейзажним чи портретним, як ми погодимось.

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

Те саме, що і блок зображення, залежно від того, як ми хочемо, щоб текст ми поставили блок чи інший. Представляємо це паралельними прямими.

Текстові блоки можуть бути текстовими блоками з включеними абзацами і навіть текстові списки елементів

Я збираюся навести два приклади: блок тексту поруч із зображенням пейзажу та ще один поруч із зображенням портрета:

Заголовок блоку

Заголовки входять в окремі блоки - це подовжені блоки, які зазвичай займають весь рядок.

Кнопковий блок

Якщо ми хочемо поставити кнопку, щоб люди могли натиснути і перенести їх в іншу частину Інтернету або просто з'явиться вікно з деякою інформацією (або формою)

Інші блоки

Ідея схожа. Якби ми зрозуміли, як працюють блоки, я думаю, ми могли б чітко поставити інший тип блоку, який, як і попередні, підходить квадратним або прямокутним. Наприклад, якщо ми хотіли розмістити форму, включену до вмісту. Хоча це, як правило, найменш поширене, краще запитати перед тим, як використовувати нові блоки, що не належать до згаданих вище типів. Я спробую оновити цей список, коли з’являться нові ідеї блоків, які можуть зацікавити всіх.

Нарешті, ось приклад шаблону з усіма типами блоків, згаданих вище:

Розширення блоків

Якщо нам потрібно більше місця, нам просто доведеться додати більше сторінок до блокової конструкції внизу. Все заповнювати не потрібно, але важливо не залишати порожні проміжки зверху вниз між серединою кожного блоку. Таким чином ми можемо розширити сторінку:

Крок 3: Створення вмісту

Тепер, коли у нас є компонування вмісту по блоках і типах блоків, необхідно створити контент, який буде йти в цих блоках. Крок 3 взаємозамінний з кроком 2. Іншими словами, ми можемо створити вміст раніше, а потім розташувати, знаючи, який вміст ми хочемо включити. Це невиразно робити так чи інакше, але ми маємо знати, що вміст повинен точно вписуватися в наш макет

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

• Заголовок 2
• Текстові блоки 4
• Відеоблок 1
• Блоки зображень 2
• Кнопковий блок 1
• Усього:: Блоки 10

Тому нам доведеться відрегулювати наш вміст так, щоб він ідеально вписувався в ці блоки, не залишаючи його, і щоб розмір шрифту був однаковий у всіх. Для цього можливо варто того спершу створіть вміст, а потім заблокуйте його. Це вже багато що залежить від людини.

Крок 4: Встановлення вмісту блоками

Припустимо, що у нас вже є проект, намальований на папері, та всі створені блоки вмісту. Тепер останній крок - поєднати його. Для цього ми будемо використовувати кілька інструментів, щоб поєднати все і відправте його веб-дизайнеру.

Відеоблоки

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

1. У форматі відео MP4 через такий інструмент, як WeTransfer.
2. ПЕРЕДБАЧЕНА ОПЦІЯ: Завантажте їх на канал "Марш" на YouTube і перейдіть на YouTube посилання на відео.

Якщо у макеті є лише одне відео, проблеми не виникне. Але якщо є кілька відео, нам доведеться якось пов’язати їх з макетом, який ми зробили на папері.

Наприклад. Уявіть, що є три відео. У макеті ми намалюємо номер 1 у першому відео, номер 2 у другому відео та 3 номер у третьому відео. І тоді при надсиланні всієї документації ми помістимо щось подібне:

• Відео 1: Відео, яке стосується фраз про ненасильство з назвою: «Найважливіші фрази про ненасильство»
• Відео 2: Відео про кольори прапора з назвою: «Прапор ненасильства»
• Відео 3: Відео про групу, яка збирається марширувати в Аргентині з назвою: «Основна команда Аргентини»

Це дозволить легко зрозуміти, яке відео відповідає кожному розділу.

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

У цьому випадку всі зображення повинні бути завантажені на платформу IMGUR: https://imgur.com/upload

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

• Південна Африка-1.jpg
• Південна Африка-2.jpg
• Південна Африка-3.jpg
• Південна Африка-4.jpg

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

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

Формат дуже простий: у документ Word ми поміщаємо тип Блоку (Заголовок, Кнопка чи Текст), а за ним номер, якому він відповідатиме у макеті.

Приклади:

• Заголовок 1:….
• Заголовок 2:…
• Текст 1:…
• Текст 2:…
• Кнопка 1:…
• Кнопка 2:…

Потім я ставлю приклад документа з абсолютно випадковими текстами, щоб було видно, як це буде структуровано, слідуючи прикладу зображення 4:

Ось так має виглядати макет, коли ми помістимо цифри, що відповідають кожному розділу:

Крок 4: Надіслати всіх

Після того, як ми все зробимо, вам доведеться просто надіслати це людині, яка буде відповідати за макет

Це просто взяло б

1. Ескізи на папері з макетом
2. Зміст
   • Відео посилання на YouTube або WeTransfer
   • IMGUR посилання на зображення
   • Посилання на документ у Документах Google або у файлі Word

Нотаріально важливий фінал

Ідеальним було б, нарешті, включити видатне зображення, яке буде супроводжувати заголовок сторінки заголовка 1. Ось чому Назва 1 завжди повинна з’являтися на початку.

Зображення заголовка повинно мати розмір 960 x 540 пікселів. Це зображення може бути надіслано IMGUR, як і решта зображень

Кінцевий результат

І нарешті з усією цією інформацією сторінка буде створена. Слідом за цим прикладом, сторінка з кінцевим результатом за всіма параметрами, які ми підняли раніше, буде таким:

Заключна сторінка