搜故事,从300万个故事到海量知识百科的华丽转变!

25个实例讲解故事性网页设计的方法

时间:2020-05-06

设计中的故事性怎么体现

提示:本文共有 1533 个字,阅读大概需要 4 分钟。

版权申明:本文出自“jongde”原创,感谢“jongde”的原创教程分享!

然而,打造一款极富故事性、艺术性和视觉效果的网页设计,并非易事。那么对设计师而言,如何才能成功设计一款有故事且代入感极强的网页呢?请跟随小摹的脚步,一起了解如何让网页讲好故事:

最佳故事性网页设计实例

1.Pierre Herme Nicolas Buffe

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:

网页类型: 小说阅读类网页

作为一款真正讲故事的小说类网页设计案例,这个网页并未像同类网页一般,直接通过小说书籍罗列的方式,供用户选择和查阅,而是选择了另一种更具故事性和视觉效果的方式进行展示。

当用户进入网站的那一刻,故事的阅读就已经开始。在一系列简洁易懂的文字引导下,用户不仅能够层层深入地了解相关小说情节,还能够实时与网页互动,同小说主人公一起完成冒险。

其逼真的背景人物场景、配乐、动画以及交互设计,也使整个小说阅读过程更具代入感,让用户深陷其中,不能自拔。

2.Borgo Veneto

网页类型: 时尚工作室类网页

本款视觉故事性网页设计,通过左侧的线性导航设计,向用户逐一展示其工作室和以往设计项目的相关信息,娓娓道来。结合极具视觉效果的切换、交互以及鼠标悬浮动画,动静结合,赋予网页活力。黑白配色的选用,也使整款设计时尚、高端而神秘。

总之,小摹非常喜欢界面上悬浮展示的各类简笔画模特设计,优雅时尚、吸睛炫酷。

3.Mi Banxico

网页类型: 银行金融类网页

相较于以往严肃正式的银行金融类网页设计,此款设计让网站更像是在售卖儿童类产品。无论是卡通人物绘画、糖果配色以及圆润字体的选择,还是动态视频的选用、文本内容的设计以及交互动效的添加等等,处处都充满着童趣。

作为一款专为墨西哥银行(一个专为学校教育类机构提供投资服务的银行机构)而设计的网页,设计师把握住在校学生这一受众特色,选择了充满童趣的故事展开和呈现方式,极具创造性。

看多了严肃正式的网页,此款五颜六色、童心满满的设计是不是更能引起你的注意呢?

4.Domaine Glinavos

网页类型: 酒类网页

作为一款专为知名希腊葡萄酒品牌(Domaine Glinavos)而打造的在线网页,本款设计选用了极其简单自然的叙述方式展开。用户轻松点击,即可逐步了解必选该酒类品牌的8个理由。

无论是其直接展示原料种植、生产和加工场景的背景视频,还是高清的产品图片和文字介绍,都体现出其产品"自然、安全和放心"的制作和经营理念。

简约的设计风格、恰到好处的微交互以及炫酷的交互动画等等,都让此款设计轻松脱颖而出。是一款非常适合设计师学习和模仿,打造优质品牌或产品介绍类网页的设计案例。

相关阅读:极简网页设计技巧,打造简约之美

5.The Boat

网页类型: 小说类网页

此款小说类网页设计,从设计风格上更像是图文漫画类网页。用户进入网页,即可根据图文指导,一步步阅读相关小说内容。搭配炫酷的背景音效、动画以及交互设计,则更像是一款以水墨画风格为基调的动画游戏设计。

总之,这是一款非常逼真、且代入感极强的小说类网页设计。

6.Popitas

网页类型: 零食类网页

如今,虚拟化的公仔或吉祥物设计,已然成为公司推广产品、树立企业产品形象、传播公司企业文化的重要方式。

而本款网页设计案例(一款主营爆米花之类零食产品的网页),就选用了一个类似爆米花的吉祥物设计,作为其网页产品介绍的主人公,依次介绍各类零食产品的同时,也向用户介绍着一种休闲娱乐的生活方式。潜移默化中感染用户,从而促使销售达成。

此外,吉祥物本身丰富的面部表情设计、网站文本动画的完美搭配以及横向导航设计等等,都使整款设计生动而极具吸引力。

7.Bagigia

看到此处说明本文对你还是有帮助的,关于“25个实例讲解故事性网页设计的方法”留言是大家的经验之谈相信也会对你有益,推荐继续阅读下面的相关内容,与本文相关度极高!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
25个实例讲解故事性网页设计的方法

25个实例讲解故事性网页设计的方法

网页,设计,网页设计,类型,产品,方式,用户,动画,炫酷,小说类,吉祥物,故事性,故事,本款,极具,案例,网站,视觉效果,设计师,银行,代入感,内容,图文,场景,平面设计,小说,工作室,文本,时尚,爆米花

2020-05-28 #短篇故事

25个Web设计中的有趣和创造性的结构的实例

25个Web设计中的有趣和创造性的结构的实例

布局,创意,设计,网站,好的,网页设计,内容,例子,颜色,丽的,和美,基础知识,专栏,图像,网格,方式,文本,横向,结构,细节,结果,网页,说明性,都喜欢,不喜欢,不同的方法,有组织,并不意味,好方法,精心布置

2016-06-03 #经典故事

25个故事性网页设计 轻松讲述网页独有的故事~

25个故事性网页设计 轻松讲述网页独有的故事~

网页,网页设计,设计,类型,设计师,用户,是一款,方式,产品,故事性,炫酷,故事,动画,本款,视觉,教育类,食谱,文化,案例,极具,在线,代入感,小说类,模板,交互设计,主页,数据,是非,背景,美食

2020-05-29 #故事大全

干货25个故事性网页设计 轻松讲述网页独有的故事!!!UI设计教程2

干货25个故事性网页设计 轻松讲述网页独有的故事!!!UI设计教程2

网页,网页设计,设计,设计师,类型,用户,教育类,是一款,故事性,故事,文化,食谱,动画,方式,视觉,炫酷,主页,创意,交互设计,用户体验,网页模板,交互式,图片,作品集,产品,图表,大学,技术,极具,本款

2020-05-29 #故事大全

网页会把你当成孩子一样给你讲故事网页教程尛沫尛沫

网页会把你当成孩子一样给你讲故事网页教程尛沫尛沫

网站,效果,故事性,情节,用户,网页设计,宣传,设计,视差,网站中,有情,个人主页,企业,内容,方式,时间轴,时间,目的,角度,设计师,为大家,达内,上都,日程安排,事物,上班族,个人,主人公,主色调,总能

2020-09-24 #故事阅读

网页会把你当成孩子一样给你讲故事网页教程尛沫尛沫

网页会把你当成孩子一样给你讲故事网页教程尛沫尛沫

网站,效果,故事性,情节,用户,网页设计,宣传,设计,视差,网站中,有情,个人主页,企业,内容,方式,时间轴,时间,目的,角度,设计师,为大家,达内,上都,日程安排,事物,上班族,个人,主人公,主色调,总能

2020-09-24 #短篇故事

《琳达Premiere Pro故事性电影的编辑》 – 大设天下原设计大学

《琳达Premiere Pro故事性电影的编辑》 – 大设天下原设计大学

素材,字体,网页,模版,文章,图片,出处,文件,本站,类型,清单,部分,不包含,商业图片,不负责,没有办法,这种情况,链接

2020-06-28 #故事阅读

谷歌通过深度度量学习 提出新的语义实例分割方法

谷歌通过深度度量学习 提出新的语义实例分割方法

种籽,像素,实例,掩码,类别,对象,图像,模型,方法,阈值,谷歌,分数,标签,损失,分类,团队,向量,空间,训练,特征,每个像素,张量,语义,大小,背景,结果,相似性,可能性,提案,数量

2008-11-26 #故事会