超赞!使用大气醒目的字体排版的优秀网页设计

2016/03/11 25414

great-typography-front-pages-1

当我们谈及网页字体的时候,更多聊到的是文本的样式,比如字体族、大小尺寸、粗细字重等属性。然而实际上,深究网页字体的排版,所涉及到的属性更多。

字体排版拥有着无限的可能性,而这种排版设计并不是每个人都能胜任的艺术。在对的人手中,它能创造奇迹,大放异彩。在网页设计中充分运用排版,时刻保持关注,是很有必要的。更何况近年来的网页设计趋势也充分证明了字体排版设计的实际价值。

从那些使用华丽精致的字体设计的网站到页面字体精挑细选的页面,字体排版都充分证明了它的独有价值,今天推荐的网站都充分使用了这一设计技巧,让它“脱颖而出”。

Stugoo

1-Stugoo

使用高识别度的字体设计,加上吸引人的细节设计,的确是抓住用户注意力的利器。优雅的线条勾勒和漂亮的水泡装饰,同其他的视觉元素很好地结合起来,营造出安静又俏皮的氛围。

Teamgeek

2-Teamgeek

网站的开发者充分展现了如何将新技术运用到网页设计中的技巧。充满复古风格的LOGO设计让网站打开的时候有了独特的气场,而当可交互的粒子特效出现的时候,用户除了”Wow”大概也做不出别的表情吧。

Rightmove

3-Rightmove

漂亮的卡通式的字体设计延伸到背景的配色和细节上,居中的标语以背景为舞台,占据视觉中心,同友好安定的环境融为一体,使得网站氛围相当不错。

St. Louis Browns

4-St.-Louis-Browns

半透明的外观设计使得网站的字体显示效果独树一帜,整饬的字体排版和戏剧化的背景选取,两者互相组合,但是又确保了识别度,设计师在此相当用心。

Thunderdome

5-Thunderdome

极简的首页设计让整个页面显得干净利落,虽然标题字体并未经过深入的设计和调整,但是强烈的色彩对比,大量的留白,柔和的背景和细小的装饰性元素,让页面显得主次分明。

Moisture

6-Moisture

充满气场的背景选择使得自然的美感和气势展现得淋漓尽致,处于中心的文本因此而显得相当吸引人。简单的文本借助背景的气势,从而显得不那么简单,色彩上鲜明的对比也强化的信息的传递效率。

The Wanderlust Storybook

7-The-Wanderlust-Storybook

这个网站的设计师同样使用了漂亮华丽的水彩插画来作为背景,而以蓝色为主的背景用了对比色黄色来作为网站标题的色彩,对比强烈而又恰如其分。

C2

8-C2

这个网站的排版设计可以称得上上一石二鸟。别具一格的排版设计绝对称得上独特,它不仅展现内容还作为标识而存在,此外它还具有导航的功能。

Ape Unit

9-Ape-Unit

这个极简的单色网站设计看起来够清爽,导航设计也充分融入其中,这使得用户毫无干扰地看到了网站的欢迎信息。

RC

10-RC

设计师非常讨巧地借助排版设计让用户注意到页面中心交叠的RC Logo,又让网页的层次呈现在大家面前。

Jean Baptiste Calzia

11-Jean-Baptiste-Calzia

网站的设计者重点在于引导用户注意到网站的内容和设计师本身的角色,而问候语则居于次席,用来引导用户关注主要内容。

Pixelundcode

12-Pixelundcode

和之前的案例类似,黑白色调的配色是网站设计的重中之重,优雅而高效地呈现出欢迎语。

51North

13-51North

对于欧美国家而言,666是魔鬼的数字(而此刻在中国666的含义似乎更富于调侃一些),这种不吉利的数字会瞬间吸引访客的注意力。

Liechtenecker

14-liechtenecker

许多设计师对于这种暗背景+明文字的设计情有独钟,而两者之间对比度的控制则是整个设计的重中之重。这个网站的设计明显是老司机,这种微妙和谐的感觉很是不错。

Melanie DaVeid

15-Melanie-Daveid

标题字体的选取不仅独特而且微妙精炼,更重要的是暗色调的背景很好地营造了整个展示的氛围。作为一个作品展示类的网站,这种手写字体很符合它的调性。

FiberSensing

16-FiberSensing

动静结合是这个网页的特色,动态可交互的背景和前景静态的文字等视觉元素达成了平衡,设计师成功地将柔和动态元素、渐变背景和风格稳健扎实的字体搭配到了一起,让整个设计相得益彰,动静相宜,强弱对照。

Uni Sapon

17-Uni-Sapon

同样的,壮观的场景让文字和背景有了充分的对比,背景的树林所呈现出的角度让这种气势足以凝聚到文字上,让人难以忘怀。

The Crumpled Ball

18-The-Crumpled-Ball

网站中漂亮的徽章设计和其中独特的复古产品保持着相同的调性。独特的产品设计和细致的文字/徽章设计反映了设计者统一的精神和风格,值得学习。

La Dogana Food

19-La-Dogana-Food

La Dogana Food 还是更倾向于传统的设计路线,用加粗的字体来让吸引用户的注意力。网站的设计对于用户而言也相当的直接易用。

The Dilla Dimension

20-The-Dilla-Dimension

这个网站的设计相对而言比较有争议,背景中的元素是动态的,色调明亮,看起来有点奇怪,但是你不得不承认它相当的能吸引人的注意力——当然也让人注意到文字。

「看网站学设计系列」

插画网站合集:
《灵感大餐!8个有趣有特色的国外插画师官网》

交互优秀的网站:
《身临其境!那些给人逼真交互体验的优秀网页设计》

卡片式网站案例:
《高手才能这么玩!一组创意+色彩都超赞的「卡片式设计」网站》

原文地址:designmodo
原文作者:Nataly Birch
优设译文:@陈子木

「子木说」

「全栈设计师」的概念真的是培训机构的阴谋炒作的概念?还是说有人在下很大的一盘棋?至少到现在看来都不是,更像是设计师角色发展的一个趋势。不明白一定的技术细节的设计师,直接把设计稿甩给开发,就能作出带有可交互粒子动效背景的网页了?这似乎不太能说的通吧?《高能警报!2016 UI设计失业潮可能要来了!》这篇文章文章反应的现状、所构想的未来,大概就在我们眼前吧。

uisdc-hao

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/great-typography-front-pages

平面设计 界面设计 好文 交互设计师 UI 转场动效 设计流程 设计师 设计师专访 排版布局 扁平化设计 用户体验设计 素材下载 职场 视觉设计 配色 设计规范 web前端开发 产品设计 海报设计 设计趋势 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里