跳到主要内容

网页设计师可以从印刷设计中学到20件事

早在所有的歌声,所有的舞蹈,点击我现在的互联网世界到来之前,印刷设计师正在制作布局,其中包括排版,图像选择和简单的力量。

传统上,建议是作为在线创意过渡到生活的印刷设计师。但是,印刷设计师的工具和技巧可以很好地转移到在线世界。他们的排版实践特别有助于在一些CSS调整中将网页从沉闷到专业。

不应低估类型的力量,这是在线设计师可以接受的,以制作有影响力和创造性的布局。以下是来自印刷设计世界的20个技巧,您可以在在线工作中使用这些技巧制作(甚至更多)令人惊叹的布局。

01.第一次做对

当内容上线时,它永远不会一成不变。它可以瞬间改变和摆弄。错过那个错字?拼写总统的名字错了?没关系,这是一个简单的解决方案。

质量控制(QC)可以在这里滑动一点,因为我们知道我们可以动态地改变这些类型的错误。印刷设计师知道,第一印象是最好的印象,第一次正确的印象是至关重要的,因为他们的工作被锁定和密封并发送到打印机。

在线质量控制流程应该通过简单彻底的方式从印刷设计师的书中剔除。总统的名字为什么不能第一次在线?

02.升到机器上方

Always art direct your images yourself. Content management systems can crop them weirdly and lose their impact. A good example from www.josephluck.co.uk

始终艺术指导您自己的图像。内容管理系统可以奇怪地裁剪它们并失去其影响。来自www.josephluck.co.uk的一个很好的例子

看一下像“时代”或“经济学人”这样的杂志,你会看到与它们周围的副本无缝协作的图像。他们支持复制并增加对文章的影响。他们帮助讲述故事,因为他们是艺术导演。它们已被裁剪并定位,以显示图像中最具影响力或最有趣的部分。

在线内容交付工具(例如WordPress)通常通过拍摄完整的出血大图像并将其裁剪成较小的图像来用作网站周围的支持图像(可能是缩略图号召性用语)。有时这种情况不会正确,顶部或底部位被裁剪,图像被推到一边。

想想艺术指导您的主要图像并考虑它们如何与页面的其余部分一起工作,而不是让CMS裁剪并将它们放置给您。这可能听起来像设计师说废话,但它将帮助您为您的内容创建有影响力和诱人的号召性用语。

03.统一风格

进入那个着名的公共图书馆WH史密斯,你会看到几百个杂志都试图在看台上炫耀你。通过即时传达他们的桅杆头部,封面线排版和图像选择的音调和情绪,那些工作或吸引你的眼睛会对他们有一点不同。

浏览杂志,整个事情(应该)对它有一个统一性。它的语气应该是非常独特的,并反映了主题。网站应该与此截然不同,而不是一堆杂乱无章的模板和样式。整个网站的“风味”的连贯性将协调内容,让您的访客感觉他们非常依赖您的地盘。

04.减少和复制线

减少是任何网页设计师学习的有力教训,也是印刷设计师多年来一直在广告和杂志中使用的。如果你摆脱网站和印刷品设计之间的固有差异,并思考人类大脑是如何被吸引并被告知的,那么它主要归结为减少。

仅仅因为它在网站上并不意味着我们应该扔掉除厨房水槽之外的所有东西到网站内容页面。它有地方吗?这有关系吗?你真的需要一个15字的标题行吗?花几分钟时间提出一个更快捷,更清晰,更容易被大脑消化的四个字会不是更好?剪辑,编辑,剪辑。

05.字体层次结构

Example of type hierarchies from designer Luke Prowse for the rework of the Times 2 supplement...

来自设计师Luke Prowse的类型层次结构示例,用于修复Times 2补充...

看看像BBC新闻或CNN这样的网站或者这个网站上有很多网络和印刷品的感觉,尤其是排版的选择以及标题的工作方式。

经典的印刷品,它们将成为标题的样式指南(与我们使用CSS的网络方式类似)以及它们的工作方式。大多数网站都有层次结构,标题,副标题和文字大小不同。这些经典的层次结构有效。打印证明了这一点。

...and an example of how hierarchical typography works online

...以及分层排版如何在线工作的一个例子

06.中心文本

除非你正在看一些可怕的沉闷的企业宣传册,否则你不会在印刷设计中看到过多的中心文字。有几行很好 - 段落是肯定的禁忌。

中心文本是沉闷,行人和懒惰,以及任何打印通信的死亡之吻。在线,它在呼吁行动和广告文案中激增。不惜一切代价避免。

07.颜色

在打印中使用颜色样式以在视觉上支持内容。考虑用于如何使用颜色作为文本,边框,拉出引号等的背景。这是一种在印刷设计中作为样式指南的一致性。您使用此风格指南的次数越多,您的品牌形象和语气就会越强。这是建立整体风格的好方法。

08.浸入过去

ITV news used Picture Post magazine as one of the sources of inspiration for their new website

ITV新闻使用Picture Post杂志作为其新网站的灵感来源之一

“Picture Post”是一本1938年至1957年在英国出版的摄影记者杂志。简单地说它是通过“大图像”,大字体,字幕和文字的力量讲故事。图片加上标题加上文字几乎是这本杂志成为全球畅销书的原因。

虽然这次涉足过去似乎是一种放纵,但确实有一点意义。最近重新推出ITV新闻网站将Picture Post作为其灵感之一。精心挑选的图像,良好的标题和文本块的强大功能。

09.负空间

我们都喜欢一点空间。特别是内容。印刷设计师使用负空间 - 主题周围的空间或艺术创作的内容。应该减少视觉“混乱”,以使有趣和涉及在线内容。

有一种趋势是用一种视觉混乱来填充页面上每一个空间的最后一点空间,但是他消除了和谐的负面空间给观众,并使他们潜意识地对他们正在观看的页面产生烦恼。让内容空间呼吸。

10.拳击类型

网上倾向于使用大量关键线来边框或限制内容。最终看起来像是散落在包含标题的页面上的小盒子。

你不会在印刷设计上看到这么多,因为设计师明白标题周围的白色(或负面)空间是标题强度和力量的原因。拳击它使类型感觉次要和不太强大。

11.大写

Too much upper case type can be very, very annoying

太大的大写字母类型可能非常非常烦人

你很少会在印刷世界中看到一个大写字母的大块,尽管你会经常在网上看到它。大写字母更难以阅读,因为我们的大脑通过整个单词的形状而不是字母来识别单词是什么。

所有大写都会让读者感到困惑。它肯定在印刷表达方面占有一席之地,但在诸如内容标题或号召性用语之类的内容中却没有。

12.拉出报价色情片

拉出引号是来自以大类型呈现的引号中的snappy位,通常在它们周围加上引号,有时是扬声器名称。打印设计师使用类型层次结构和样式来充分利用排版设计的优点。他们制作出极好的视觉效果和诱惑,让观众阅读页面上的其他内容。

拉出报价制作出极佳的视觉效果

当没有可用于特征的支持图像时,它们也可以用作视觉填充物。在网上谨慎使用它们,因为你不想用太多的视觉过载来轰炸访客。使用一些,但使用你已经给出的最好的副本中使用的那些。

13.段落样式

Paragraph styles make or break a page. This example is from Joseph Rowntree Foundation's three-year study in to the state of British Democracy and voter disenchantment

段落样式可以创建或中断页面。这个例子来自Joseph Rowntree Foundation对英国民主国家和选民祛魅的三年研究

我们一直在关注类型,但它是成功设计,可读性和成功网页的关键因素之一。打印设计师可以打字输入,我们可以了解他们如何做到这一点。

在打印布局程序(如Adobe的InDesign CS6)你可以应用段落样式。这有很多选项可供设置,如字体,样式,大小,缩进和颜色。几乎你可以在这里做的一切都可以通过设置块级段落的样式来实现CSS

类型是页面如何组合的主要考虑因素。我们现在有打印标准控件,这不仅仅是复制和粘贴word文档到网页并应用一些样式更改的问题。布置你的类型。

Another example from Joseph Rowntree Foundation's study

约瑟夫朗特里基金会研究的另一个例子

14.行间距

行间距(前导)可以影响句子的可读性 - 取决于所选的字体大小和类型面。尽量不要将文本串在一起,而是让它们通过给予它们足够的空间以便最佳显示来呼吸。

一张图片描绘了千言万语

支持图像为一段内容增添了味道,乍一看帮助观众从您的主要图像到较小的支持图像建立联系,为他们提供文章的要点并诱使他们阅读。查看任何杂志,了解这种视觉连接的工作原理。

16.在网格上设计

Gridded design system example from Luke Prowse

Luke Prowse的网格设计系统示例

在网格上进行设计可能会导致一些“通过眼睛做”的设计师将目光投向他们所处的感知限制。网格只是指南和辅助工具,可以作为网页设计的压载物。他们不应该限制创造力。详细了解他们网格系统

17.混合字体

不要试图混合你的字体。一个人的不同重量会产生更大的影响,吉尔为你的头条新闻,Gotham你的子标题和Tahoma你的常规副本。

您可以进行彻底的实验,并使用不同字体的子标题,并尝试线高和字母间距,但你必须考虑你所针对的观众,如果这只会......惹恼他们。

18.构成和简洁

最难生产的布局是最简单的。带有两个文本块的页面上的六个元素比大量的文本和图像更难完成工作。

传统上,印刷设计师已经理解了简洁的力量以及它如何能够决定布局或设计。很难理解布局或过于复杂的列和文本不断包装到图像很难通过。最简单的布局永远是最有效的。

19.键入

Who says type is limited online? Great example here from typographer and web designer Luke Prowse

谁说在网上限制类型?印刷师和网页设计师Luke Prowse就是一个很好的例子

良好的排版意味着良好的可读性,并影响您的网站的外观和感觉。网上类型不好。通常情况下,网页设计师可用的字体数量有限,导致“我们不能像印刷一样在网上打字”的原因是,现在借口没有多少水。

可以在以下网站找到用于在线创意努力的字体Fonts.com类型套件,和谷歌字体- 这些允许设计人员将自定义字体嵌入到他们的网页中,而无需最终用户安装。辉煌。

20.智能物体

非破坏性编辑是打印或网页设计师无痛工作流程的前进方向。打印设计师的工作分辨率远高于网络设计师,因此我们知道使用“智能对象”图层。

智能对象将以原始分辨率粘贴在矢量或光栅艺术作品中 - 无论您缩小它的大小。无论如何它都会很好看。如果您的主要图像成为您的小型支持图像,然后(受客户更改)成为您的大图像,这将有所帮助。它将帮助您完成客户变更的变幻莫测。

网页设计师还可以从印刷中学到什么?在评论中告诉我们!

保罗怀亚特



翻译字数超限