就像生活中的其他任何事情一样,在块上创建最好的网站和排版设计事情须要专注和韶光。是时候学习,实验和节制这种繁芜而多层次的艺术形式了。我们常常坚持根本知识,由于增强的排版可能不适宜我们正在从事的项目,并不是每个客户都乐意承担包含这种专业沟通层所需的额外韶光和金钱。终极的结果是,我们在这个备受推崇的学科中险些没有得到任何增长,终极认为我们乃至不值得考试测验。
除了焦点和韶光之外,您还须要对细节,平衡,历史,文化,情绪,生理学,符号学,色彩,比拟度等有敏锐的眼力。在看似大略的基于符号的书面笔墨天下中发生了很多事情,虽然本文只能供应对排版维度的奇迹的窥视,但它可能只是有助于缩短将头部放在精确的创意空间中所需的韶光,并增加批驳性眼力的深度感知。
加入我们,通过将一组精心实行的以字体为中央的网站放在显微镜下,来解构网页设计中排版的一些最佳用场。我们希望您喜好这个设计创造的旅程,并敦促您考试测验运用下一个数字项目中提出的一些原则。

某些网站可能须要一些韶光才能加载。请耐心等待,他们是值得的!
一个项目的名字包括Alexander Engzell,Antoine Wodniack,Jimmy Raheriasoa,Anastasi Tikhonova和Giant Steps-你知道这个项目将是特殊的。如果您恰巧知道前三个“正在制作的传奇人物”的作品,那么您就会知道它将是极简主义,时尚,前沿和精心制作的排版。总结这个网站的最佳方法是将其与一部伟大的电影进行比较,每次您看到它时都会供应更多内容。
从第一页到末了一页,用户会碰着一些非常令人印象深刻的排版想法,例如带有视频遮罩的超大大写字母和相同大写字母的变形。还有经典和当代字体的完美结合,以及对讲故事的富有同情心的关注。看重细节的爱好者该当把稳,这些才华横溢的小伙子对利用的单词给予的关心和关注,就像他们对排版和互动性一样。
进入任何一个项目组合项目都会揭示另一种美味的技能,即如何在列磁贴中呈现非常全面的副本,以便于视觉消费,同时仍旧看起来很棒。褒奖操持是,这种方法也适用于相应式设计。请把稳大方的边缘,以保护极简主义美学。值得在许多领域解构,新的Bonne Marque网站是一个看似首创性的作品,它平衡了出色的排版,交互性和美学,并寻思熟虑地利用了视差和运动fx。排版作为英雄的一个很好的例子。
Maeva Barrière by Mashvp
Mashvp是伟大设计的代名词,法国人再次展示了如何通过使排版成为Maeva Barrière网站大部分的英雄来完成它。严格的黑白调色板为该设计的支柱奠定了根本,而由于删除了所有多余的元素,新的极简主义水平欢迎了用户。这个网站是如此的极简主义,以至于它险些没有什么可解构的。向下滚动会在内部页面上调用颜色反转,这也是一个不错的触摸。
末了的基调是通亮的,以丰富多彩的拍照为后盾,然后是排版的无可挑剔的英雄。这是一个光滑而时尚的网站,由于排版的力量,经由寻思熟虑的交互性以及一些非常敏锐的创意头脑,值得一玩。
OH - Beauty & Simplicity by John Jattoh
即时哇成分在标称加载韶光后击中用户,这要归功于一些原始字体的利用,高冲击力的颜色和流畅的fx。伦敦设计师约翰·贾托(John Jattoh)采取经典的排版网站,并通过在这个高雅的数字通信作品中大胆地利用字体来使其成为自己的网站。
平滑和丰富多彩的过渡利用户绝不费力地从一页移动到另一页,而高度相应的滚动对付UX纯粹主义者来说是一种乐趣。设计同等性在全体项目部分都带有类型的英雄,但请务必单击页脚中的导航汉堡包,以得到另一种俊秀的光彩。
John Jattoh网站从一开始便是一次愉快的体验,它利用排版,构图和阴郁空间,带来邪恶的喜悦。值得关注的设计师。
Admir Hadzic Portfolio by Admir Hadzic
Admir Hadzic的投资组合网站代表了几个热门趋势的智能和连贯的整合,就在它们达到大众意识的关键时候。这包括我们所说的“nue-simplism”,在这种情形下,它适用于英雄 - 粗体排版。从一开始,用户就会受到一个令人惊叹的主页的欢迎,该页面具有真正的国际风味,以日本极简主义,意大利大胆和法度模范优雅为主导。
这是一个诱人的页面,一方面吸引用户在玩了哦,如此平滑的视差fx后点击了一个大胆的整年夜写标题,另一方面,它贯注灌注了一种禅宗 - 就像走进当代博物馆或图书馆,并自动尊重沉默一样。
当我们浏览网站时,俏丽而适当的页面过渡会让我们提高,勾引我们进入豪华的远景和酷炫的字体稠浊。当滑过项目区域时,我们会体验到更多的意大利风格大胆,由于超大和笨重的身体字体统治着个人资料页面。总而言之,这是一项真正具有首创性的事情,充满了优雅和精细,排版与其他网站元素一样博识。
WOBI on Leadership by Agencia Ego
Agencia Ego在这个原始网站中以两种成功的办法利用排版。首先是作为一个视觉“钩子”,在设计的独特性方面为主页增长了一大亮点。这种令人惊叹的排版利用在一个趋势可以如此迅速淡化的天下中总是受欢迎的。
但是,与许多供应此类设备并随后是空灵感的网站不同,如果您向下滚动到“Chip Conley”(或点击顶部菜单中的“扬声器”选项卡),您会创造一些出色的分层段落,这些段落再次与供应的独特图形相辅相成。平衡可能是一个很难破解像这样的冒险设计,但Agencia Ego一定错过了备忘录,由于对他们来说,这彷佛是孩子的游戏。一个伟大的排版结果。
2.排版作为配角:Maxime Chillemi & Clément Grellier 的 FAKE MUSIC
有人称主页为网页设计的“金钱镜头”。《假音乐》完美地证明了这一点,它以精美抽象当代主义和美女法国的旋律舞蹈开始了演出。排版只是法国设计师Maxime Chillemi和开拓职员Clément Grellier创造的和谐合奏中的一个音符,但它是使此页面取获胜利的根本。
让我们以大字母F为例,我的预测是,当你点击页面时,这是你的眼睛看到的第一件事。你接下来看了什么?大概是大M?只管在屏幕中间有一件华美的艺术品,周围环抱着华美的空缺,但许多眼睛被大而大略的字母形式所吸引,由于它们是措辞的象征,一个对我们生存至关主要的核心方面。
假音乐中排版的平衡,构图和保留利用创造了一种与网站背景完美匹配的当代节奏和沉着,展示了法国设计师的紧张标志之一。就彷佛他们有一个内置的视觉节拍器,可以确切地知道多少是太多,哪些元素值得关注,以及它们何时该当涌如今舞台上。
移动到页面底部,英雄区域下方的极简主义类型险些是猜想之中的,并且作为次要选项,可以通过闪电般快速滚动来大略地滚动浏览这部分内容。
当然,在这个精良的网站上还有很多值得一看的地方,但是我们对FAKE MUSIC的排版曝光已经结束,以是请查看其他页面并享受节目!
WeLoveNoise by WeLoveNoise
拿出一大袋创造力,添加原创性,一汤匙超极简主义排版和一些独特的互动性 - 你就有了WeLoveNoise。这是一个以排版为背景的网站,作为抽象极简主义英雄的配角。
Luke Finch是一位目前在旧金山事情的多学科设计师,他奥妙地利用极简主义来供应激光聚焦的UX走道路径,让您在浏览特色项目时将独特的字体选择置于中央舞台。被空格包围并保持较小的字体大小,类型的主要性被提升。
WeLoveNoise是一种须要创造性尊重的设计,值得在您的鼓舞民气的排版网站播放列表中霸占永久的位置。
Braind by Braind
如果您须要进一步证明排版是“nue-simplism”的紧张方面,那么请查看Braind的新网站。乃至Braind的标志也暗示了这些来自俄罗斯的才华横溢的窥视者对排版的视觉冲击力的理解程度。
从主页加载的那一刻起,您就知道您正在盯着一个在颜色,构图和交互方面恰好盛行的页面。但。。。这是一篇关于排版的文章,以是我会只管即便不要被周围的眼睛糖果分散把稳力,并专注于类型。
浏览项目时,我们看到厚实的超粗体标题与常规或标准尺寸的字体并置 - 总是很好。如果你深入研究一些项目,你会把稳到有“现实天下”的文本须要处理,并且他们确实处理了它。在这里,我们通过粗体整年夜写的垂直标题欢迎另一种右潮流风格。
IMO这总是具有为网站增长一丝俏皮的效果,一种眇小的混乱感,上面写着“我是一个规则毁坏者......在我的业余韶光;)”。在滚动时将运动fx添加到类型中,再加上甜蜜的页面过渡,以令人愉快的风格完成了这个正潮流网站。
3. 通过排版将稠浊措辞领悟在一起Mazen El Rifai by Douze Degres
网页设计中的排版已经足够困难了,但想象一下,必须将两种视觉上不同的措辞与水彩画相结合,并将它们带入数字领域。这是一个困难的电话,但对付Douze Degres来说,这是一天的事情,由于他们用他们的网站为才华横溢的黎巴嫩艺术家Mazen El Rifai回答了寻衅。
经典字体与数字稠浊风格的身体字体成功稠浊,该字体由英雄增强 - 副本的流畅动画输入,这是这种类型的前沿效果。字体选择是大胆的,同时保持低调,虽然我们中的设计师可能在精神上考虑其他字体选择,但快速向下滚动以显示第二措辞(实际上是第一种措辞),在艺术上呈现出优雅和风格,这反过来又为全体页面注入了传统。
这些元素的力量与富有表现力的水彩画相结合,将这种富有同情心的设计带回家。
4. 排版作为艺术Dada-Data by akufen, David Dufresne & Anita Hugi
Dada-Data是艺术和排版爱好者的梦想网站,拥有奇妙的富有想象力的字母景不雅观和令人费解的抽象主义观点。忠于主题,来自加拿大的设计师akufen设法将字体作为一条线,将这件充满激情的数字达达编织成冒险,仿佛达达总是注定要这种混乱,多层次和动画的存在。
这个网站不仅是一个令人高兴的看,而且导航是令人愉快的,这也是用排版技巧实行的。
达达作为一种艺术形式的风格并不适宜所有人......但没紧要,这有点重点。Dada是一个充满讽刺和无稽之谈的运动,以回应第一次天下大战的暴行,而Dada-Data将这一传统带入了新的数字时期,节制了这本关于排版的未来历史经典书本。
一旦你屈从于随意的导航,一定要探索这些项目,这种导航被奥妙地设计成通过它的傲慢和对秩序的污点来进入你的皮肤。在这个邪恶的网站上还有更多值得一看的地方,再一次,由于闇练的排版的力量,这统统都成为可能。
Marche à l'ombre by Les Évadés
这是一个排版纯粹主义者的网站,由于它依赖于排版使其事情的深层次,并且它所做的事情。从实心块文本开始,我们创造添加了一个砂砾般的纹理,这有助于将标题与网站别的部分的情绪稠浊在一起,而不是普通的扁平颜色,否则可能会使它“站在”页面上方并毁坏感情。
罕见而年夜胆地利用斜体是很高兴看到的,并在这个优雅的设计中清楚地增长了风格。当用户向下滚动时,奇妙的运动fx为每个页面上的类型增长了生命,这供应了一个很好的“樱桃在顶部”,一个非常好的实行体验。
这是排版作为艺术,这在设计带来的审美愉悦中显而易见 - 无论措辞如何。虽然从一开始就有一个俊秀的视觉措辞肯定是一个上风。
米凯拉·基乌奇尼的《陶斯图迪奥》
柔和的色调柔和了视野,由于我们深入研究了意大利最精良的数字艺术家之一Michela Chuicini讲述数字故事的典范。
意大利设计有一些东西。一方面,它讲述了美好的生活,令人愉快的时尚和浪漫的时候,而它则跳动着一颗充满信念和勇气的强烈骄傲的心。Michela Chuicini在这个华美的投资组合网站中俏皮地尊重这些传统,它的成功归功于排版的力量......在一条眨眼的鱼的帮助下,在个性的海洋中拍浮。
纯粹专注于Michela的首创性主页,我们看到每个字母都是在选择和放置时对空间,功能,形式,更主要的是情绪的寻思熟虑和尊重。从顶部开始,我们看到逻辑和层次构造为UX带来了新鲜空气,而放大和厚实的小写字母则呈现出一种视觉舞蹈,将用户带入探索脾气绪。到目前为止,网站顶部的高雅插图角色已经眨了眨眼,并在SEO中赢得了网站宝贵的几秒钟,由于您悬停并玩“测试鱼”,看看是否有任何其他惊喜等待着您。
对细节的关注增强了用户的感知,并将把稳力转移到令人惊叹的“鄙吝械”上,这些“鄙吝械”有助于使这个主页在设计上取得巨大成功。在这一点上,在进一步检讨网站之前滚动全体页面成为逼迫性的,直到终极冒险更深入地看看可以找到其他好东西。
Taostudio是艺术和排版的胜利,与书本封面,海报或大预算年度报告一样有效。通过奥妙地利用排版,Michela的作品超越了多种设计媒介,是排版在设计中的力量的真实例子。
我们吃午饭兄弟?作者:亚历克斯·皮尔斯
这个狡猾的网站可以很随意马虎地包含在上面的“排版作为英雄”部分,但我们将其作为艺术包括在内,由于排版和颜色对这种设计授予了多么强大的力量。事实上,我们午餐兄弟?为供应您可能在很长一段韶光内见过的最大胆的排版而切入。
为了使这个网站更加令人惊异,我们午餐兄弟?网站旨在供应德克萨斯州达拉斯的精选餐厅列表。如果Craigslist以这种办法走下去,那将是多么酷!
忘却你认为的关于目录站点的统统,由于这个大略但超大胆的基于类型的盛会须要引起把稳。以这种办法利用排版突显了UX在紧张基于类型的网站上是多么令人印象深刻。不须要按钮,不须要图像来加强议程,只须要纯粹的大胆话语来刺激眼睛和思想。确实很好吃!
5. 排版以增强感兴趣的数据Elkanodata的《历史上的女性足迹》
为历史遗址设计可能是设计师将面临的最艰巨的任务之一。为什么?由于你正在一个被戏剧吞没的天下里处理事实。Elkanodata以全新的视角欢迎了这一寻衅,这在他们的《历史上的女性足迹》的设计中显而易见。
Elkanodata的闇练窥视者没有用严明的字体和阴郁的感情来压垮我们,而是利用排版来设定更积极的基调,首先创建一个独特且引人瞩目的登录页面。精心挑选的动画图像被友好而中性的字体所粉饰,并通过整年夜写的强度得到加强。这个文雅的合奏与宽敞而柔和的纹理背景并置,其净效果鼓励探索内部内容。
在这一点上,你的滚动手指接管了你,你立即碰着颜色的逆转和更多的权力类型,但演示在主题方面是柔和的。这有效地让你的大脑做好准备,准备好以中立的不雅观点吸收即将到来的内容。从这里开始,排版再次变革,专注于易读性,而标题仍旧受到“高雅的艺术”处理,以保持艺术与信息的平衡。
历史上的女性足迹是一个很好的例子,该网站利用多种排版技能来征服一个非常困难和繁芜的项目。
6. 排版与社会问题超越监狱 - 机场事情室
Beyond Prison是一个网站,展示了由于书面笔墨的固有力量,有争议的问题和排版是如何齐头并进的。从一开始,加载顺序就为用户供应了一个大胆的无废话段落,这有助于设置即将发生的事情的严明但富有同情心的感情。
在导航和图像中利用模糊是一个很好的触摸,有利于UX,同时供应柔化效果以平衡类型和问题的严重性。接下来,背景视频的标题和择要的先容动画是另一个创造性的褒奖,它展示了对如何在视觉上表示精确的情绪敏感性水平的分外理解,这是该网站排版成功的关键。
你越深入这个看似不起眼的网站,你就越能意识到设计师通过精确利用排版和fx完美地确定了内容的高下文。这里须要吸取一些主要的教训。
6. 排版作为导航C2 作者:Anna Travis
C2现在大约一岁,但仍旧是一个当代谜。如果您是这个网站的新手,那么您将得到一种享受。如果没有,那么让我从“多维排版”这个术语开始,以激起你的兴趣。让我们来看看它。
当你第一次看到C2的主页时,如果你脑筋里的声音喊着“眼睛糖果”,不要感到惊异。一些网站彷佛有“特殊的东西”,而C2的分外的东西来自一个精心制作的第一眼美学美(通过大写的C在玄色)和C中微不雅观排版的几何美的稠浊。
详细而言,这些尺寸包括沉降到2D平面上的类型元素的柔和动画和空间运动;精心制作的宏不雅观视图,以大写字母C为特色,在玄色和粉赤色高光下形成光鲜比拟;C形内镶嵌的“印刷游乐场”;排版元素的博识构图和对细节的关注;末了,粉赤色单词的额外维度充当直不雅观且易于利用的导航。
你问的网站的别的部分怎么样,值得一看吗?绝对。这些家伙远远超过一个页面奇迹,这要归功于出色的过渡,时尚的布局,水平内容滑块等等。总体而言,C2是一款全屏游戏,它节制了出色的数字设计和讲故事所固有的许多元素。而这统统都始于类型!
结语
以上只是排版的力量如何被用来影响网站的基调,影响,情绪乃至UX的快照。通过抽出韶光考试测验排版,并鼓起勇气,您可以为项目添加额外的维度,同时从客户和同行那里得到宝贵的尊重点。像所有事情一样,实践履历是节制这只具有寻衅性的野兽的关键。
如果你有一个很棒的排版网站建议,那么请不才面的评论等分享。
编辑:尘渊文化
得到灵感,鼓舞民气!