为内容丰富的Web设计进行规划+ 查看更多
今天,大多数网站的内容都非常少,而只关注内容的主要信息。这就是为什么许多网页设计师可能更习惯于设计少量或中等数量的内容。然而,有许多网站有大量的内容-新闻网站,某些博客,网上商店,社区,等等。当一个网站需要大量的内容,在一个页面上有大量的内容时,就需要特别的规划。
在这篇文章中,我们将讨论创建内容丰富的web设计的基本步骤和附加技巧。它需要大量的客户沟通和适当的协作,以及组织。有了这些部分的网页设计过程完整,一个内容丰富的网站可以快速和富有成效地创建,同时保持最佳的结果为最终的结果。
把所有的内容都放在前面
对于需要大量内容的网站,设计必须围绕这些内容进行专门设计。它需要成为设计阶段的一部分。在其他web设计中,当客户端将内容放在一起时,填充内容就足够了,这是因为设计中的许多内容区域在文本长度上是灵活的。然而,对于一个内容丰富的设计,页面上有如此多的内容片段,了解介绍、介绍或其他静态内容的长度是非常有帮助的。此外,如果有内容块的变量,那么了解这些块的平均大小将很有帮助。
此外,许多没有预先提供内容的客户将忘记他们最终将在首页上需要的某些内容,或者另一个内容较多、调整灵活性不大的页面。在以内容为主的设计中,根据层次结构和可用空间,对内容进行紧密的拟合、组织和适当的放置。页面内容较少的web设计将允许更多的空间来“挤进”额外的内容,这与内容较多的设计不同。
在上面的例子中,文章标题和导语是根据设计进行适当的规划的,并且需要预先规划的内容长度的特定限制。如果没有内容样本来规划,那么web设计中的组织就不可能有内容的变化和数量。如果一个新的内容或部分需要放在这个首页上,这将需要相当多的计划,而不是一个可以随便放入的内容。
使用一个网格
每隔一段时间打破一次网格,或者允许网格系统中的变化,这是很好的。这是什么可以使网页设计有趣和有趣。但是,对于内容丰富的web设计,没有太多的变化空间。对于内容较多的设计,使用网格,并坚持使用它,可能会有一些创造性的小例外。在设计过程中详细组织页边距和填充,并提前计划每个内容区域的大小。
以上是使用流行的960。gs网格系统,但是有更多的选择,或者您可以在现场创建自己的网格。对于内容较多的设计,通常还需要垂直规划网格,而大多数预先制作的网格系统只关注水平对齐。当文本长度发生变化时,这意味着垂直方向发生了变化。看看每个装在盒子里的部分,里面有一个网格:根据它的宽度和里面的内容,需要的垂直长度是多少?内容是否需要在某个时间点被切断,或者需要改变网格?
在我们相同的网页设计中,请注意以上内容的长度是如何根据可用的网格来规划的。即使内容长度不同,某些片段也需要共享相同的长度,只有通过链接才能继续。在这些情况下,一定要与客户沟通(如果是个人项目,也可以自己做计划)导语中有多少内容应该显示在有问题的页面上。太短和不够的内容可能会使宣传有效,而同时,太高,它可能会破坏设计。
边框、方框、边距等等
从纯美学的设计角度来看,内容丰富的设计也走了一条不同的道路。通过层次结构、节奏和顺序来组织一个网页,并定义功能设计,这是一个主要部分,因为这篇文章和许多类似的文章都强调了这一点。不过,颜色和形状也有很大关系。虽然许多美学设计的选择对于内容丰富的设计来说是最好的,但是也有许多选择对于设计的功能部分来说也是好的。在某种程度上,它们是相辅相成的。
与内容丰富的设计最匹配的设计样式是那些最小的,并提供大量空白的样式。虽然对于许多以大量文本为特色的网站来说,基于一个页面上有多少内容,可能看起来并不是那么微不足道,但从设计的角度来看,确实如此。文本行与行之间通常有更多的行间距,内容块之间有更大的页边距和/或填充,在没有内容的区域,区域保持干净和开放。有意识地规划空白,比其他类型的设计更多地规划空白。它对于一个注定要“忙碌”的网站设计的成功至关重要。
创建足够的开放空间和在正确的位置可以帮助分离和组织内容,以及进一步定义所有文本之间的层次结构。同时,通过填充设计元素——分隔和定义独特区域的简单设计元素,可以很好地利用空白空间。
许多常见的方法是使用边框和不同的背景颜色。装饰性的边框或水平线可以将装饰添加到一个最小的内容沉重的设计中,并且可以像照片一样作为图像来吸引注意力。看看上面Problogger的设计。为了高效地使用空白,有大量的填充和空白,但是不同的内容区域被不同的背景颜色进一步区分。即使在特色区域的下方,也会使用两种背景色来分隔左右两个区域,但它们的颜色也非常接近,以至于在视觉上把它们联系在一起(从而帮助最具特色的区域同时在两者之间脱颖而出)。
这么多的字体需要漂亮的排版
页面上有这么多类型,保持设计整洁的一种方法是不使用许多额外的视觉元素,而是让类型来进行设计。创意和漂亮的字体是许多内容丰富的网站的一大特色,包括《纽约客》:
serif和sans-serif字体、字体颜色、大小和样式混合使用。一个完全独特的字体是用于主要标题。虽然排版可以为设计带来兴趣,特别是主要是文本的设计,但它也可以在层次结构、重复和设计组织中发挥重要作用。读者接下来会看哪里?如果页面的所有类型都差不多,就很难知道了。然而,有了精心设计的标题,我们确实知道该往哪里看。在页面上有这么多的字体,很容易让人难以阅读,并将注意力集中在一个内容上。智能排版将包含垂直的节奏,正确规划的内容宽度,以及足够的空白,以便在一片文字的海洋中轻松地阅读一块内容。
查看下面的参考资料,了解更多关于组织和设计的信息,不仅仅是漂亮的排版,还有漂亮的排版:
格式变化-简介,图像,和列表
你可能会注意到,对于一个有很多内容的网站来说,它并不是一遍又一遍地重复相同的格式,横向和纵向贯穿整个页面。虽然重复对于设计的美学和组织很重要,但是过多的重复会让事情变得无聊。它还会使网页设计失去基本的流程和层次。
上面的例子结合了内容长度和格式的不同变化,同时在首页上仍然包含大量诱人的链接,从而使事情变得有趣。变化保持在一个网格,但同时“打破网格”垂直视觉兴趣。这也是创建精确层次结构的好方法。最重要的内容(例如,“我们的使命”)是在图片旁边,并且有更长的描述,因此占据了更多的空间,吸引了更多的注意力。需要较少关注的项目离主要兴趣点较远,文本较少——其中许多只是列表中的标题(例如,“新闻”)。
内容丰富的网站展示
Nuvographics
什么是马口铁
过节
主可能
9513年
房地产工作
直播
Aiga
设计的小屋
简化安全
《纽约客》
名博主
微软全国有线广播电视公司
Activecollab
结论
一个有很多文本的网站不一定要很繁忙或杂乱。内容丰富的设计需要特殊的技术和实践才能成功地完成,但是它是可以做到的,而且做得很好。随着互联网越来越成为信息、新闻和资源的首选场所,我们看到每个网站和每个页面都需要更多这样的内容。这可能是一个变化的、上升的趋势,但不一定是令人沮丧的。事实上,计划一个内容丰富的网站可能是一个有趣和有趣的挑战。
一定要提前计划,得到你需要的内容,并保持有条理的处理这么多文本在一个页面,在一个网站。虽然有许多视觉上的指导方针,如使用方框、边框、最小颜色、颜色分离等,但对于设计的组织部分,也有非常重要的指导方针,如层次结构、顺序、空白等。记住这一切,一个内容丰富的网站设计可以很容易地结合在一起,并产生一个很好的结果。