内容布局指南

当我们想在网络上安装内容时,我们发现的主要问题之一是,从来没有很好地考虑过我收到的建议可以成功地整合到网络中。 通常的问题是,如果没有适当的结构,设计和布局通常看起来就不会太好,结果令人不满意。

这就是为什么我将给出一些非常基本的解释,说明如何在最大程度简化工作并达到最佳效果的条件下考虑内容布局。

本指南的目的是,任何不具备编程或Web开发知识的人都可以为我提供高质量的布局,并且我不必花太多时间尝试通过多次对话来提取想法,直到得出结论。

步骤1:模板

为了有一个可以“绘制”我们的提案的模板,我们要做的是拿一张 A4 纸,我们将把它纵向折叠三分之一。

步骤2:内容块

假设我们有几种类型的内容:视频,图像,文本。 每个内容都是一个矩形或正方形块。 我们必须根据需要选择模板顶部到底部的块。 我们将说明三种类型的内容。

视频块

我们假定该视频通常是YouTube视频,我们在模板中将其表示如下:

imagen画质2

图像块

正如我们所同意的,这取决于图像是横向还是纵向。

文字区块

与图像块相同,这取决于我们希望文本如何放置一个或另一个。 我们用平行线表示它。

文本块可以是包含段落甚至段落的文本块 文本元素列表

我将举两个例子:风景图片旁边的一个文本块,和肖像图片旁边的另一个文本块:

imagen画质3

标题栏

标题放在单独的块中是通常占据整行的拉长块。

按钮块

如果我们想让人们点击按钮,然后将他们带到网络的另一部分,或者仅显示带有某些信息(或表格)的窗口

其他街区

这个想法是相似的。 如果我们了解这些块是如何工作的,我认为我们可以清楚地放置另一种类似于正方形或矩形的块。 例如,如果我们想在内容中加入一个表格。 尽管这通常是最不常见的,但是最好在使用不是上述类型的新块之前询问。 我将尝试更新此列表,因为可能会出现每个人都感兴趣的新的创意。

最后,这是一个模板示例,其中包含上述所有类型的块:

imagen画质4

扩大障碍

如果需要更多空间,我们只需要在底部的块设计中添加更多页面即可。 不必将所有内容都填满,但重要的是不要在每个块的中间之间留出上下空隙。 这样,我们可以扩展页面:

imagen画质5

步骤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文档中,我们将块的类型(标题,按钮或文本)放在其后,并在布局中将其对应的数字放在后面。

ejemplos:

  • 标题1:…。
  • 标题2:…
  • 文字1:…
  • 文字2:…
  • 按钮1:…
  • 按钮2:…

接下来,我将示例文档放到完全随机的文本中,以便可以在4图像示例之后看到它的结构:

一旦输入了与每个部分相对应的数字,这就是布局的外观:

imagen画质6

4步骤:全部发送

一旦我们完成了所有工作,您只需将其发送给负责布局的人

只需采取

  1. 草图在纸上的布局
  2. 内容
    • 视频链接到YouTube或WeTransfer
    • 图片的IMGUR链接
    • 指向Google文档或Word文件中文档的链接

公证重要决赛

理想的做法是最终包含出色的图像,该图像将与页面的Title 1标头一起出现。 这就是标题1应该始终出现在开头的原因。

标题图片的大小必须为960 x 540像素。 该图像可以像其余图像一样通过IMGUR发送

最终结果

最后,使用所有这些信息,将建立页面。 在此示例之后并以该示例结束,带有我们之前提出的所有参数的最终结果的页面是:

最后一页
本网站使用自己和第三方的 cookie 来确保其正常运行和分析目的。它包含带有第三方隐私政策的第三方网站的链接,您在访问这些网站时可能接受也可能不接受。单击“接受”按钮,即表示您同意使用这些技术并出于这些目的处理您的数据。   
隐私