网页视觉的设计诀窍

作者: fangjun 分类: 网站设计 发布时间: 2017-05-08 19:17

在设计网页的过程中,为了让创意发想和作品能更符合客户需求,必须要多方参考他人的经验和技巧,在这里我会分享一些经验与实际的做法帮助你达到更快速、精准的设计,符合规范逻辑与流程让客户怎么样都无法打枪你的作品,创意是可以被推翻,逻辑是无法被推翻的。

  流程1.阅读资料

网站设计的前提必须先打好整个骨架并了解对方公司在做什么,就像盖大楼一样,设计图(企划)一定要先出来你才能知道你要盖什么,所以先大量的阅读与了解。

  流程2.找参考网站资料

找参考资料,以下分享一些我常上的设计师网站,可以从中找寻灵感和设计方向,同时也可向客户展示实际的范例与效果,让彼此在规划网站蓝图的过程中达成更深一层的共识。

  流程3.创意发想

创意发想,通常这是最难的要怎么让网站结合客户产品与创意,比方说整合居家电子控制的产品,我们做了一种简单的方式,透过Before & After的对比,让使用者可以立即看到产品效果,达成情境式销售氛围,如下所示:

→Before

→After

▲参考网站 杰峖数位科技网站

  流程4.设计

设计面分为下列几种方式个别介绍,logo色系搭配、网站配色、版面配置、Photoshop网格、banner设计、字型搭配、文字大小。

  ■ logo色系搭配与网站配色

通常网站的配色会搭配企业的企业色去做配置,那么要从何得知企业色呢?就是LOGO或是企业VIS识别系统,再来思考辅助色,如果企业是绿能产业是不是搭配绿色会比较妥当,若为糕点产业颜色上是否需要偏向较柔和的粉嫩色彩,除了配合企业色外也需要看业主产品去做适当的调配,下面介绍两个配色网站:

 

  ■ 版面配置

版面设计的方式有很多种,建议先在纸上绘制线框稿,同时可在后面加注动态呈现手法,也可以拿着稿件跟前端与客户讨论是否合理、洽当,当一切备妥后再行设计也不迟。

目前圣侨使用的方式是用Axure去做网站规划,如下:

圣侨网页设计用-版面配置参考

  ■ Photoshop网格推荐

建议用Photoshop在设计中就要把网格的概念建立起来,让网站设计更有逻辑并且有参考依据的指标,在??前端开发时也可以依照此网站进行开发,可以省下不少时间。

  ■ Banner设计

网站最重要的无非是一进来就载入的Banner,所以在设计上更需要特别下功夫在此,设计Banner无非就是考验设计师的功力,在此给大家几个设计模式方向参考:

 →以字型为主的设计

→产品为主文字为辅

→美图放上去就是美

→底图押上色块底再配字

→平拍图像素材

→平拍图像素材

以上各种Banner设计都可以看得出其焦点、品牌意象,建议在设计时须先了解主从关系,清楚文字叙述和情境式图像的先后顺序,主要>次要安排,再接续补齐细节即可。

  ■ 字型搭配

在字型搭配的这个项目必须先说明,有些时候为了符合SEO现在在中文网页上多数都统一用微软正黑体或是思源黑体,而不是用图片去切图作字,但在英文的应用上就会比较多选择,通常我们都会使用Google Fonts的字体,如下图就是使用google font去搭配出符合业主网站个性的字体:

  ■ 文字大小配置

设计网页时通常会在稿件上注记此网站的统一标题大小、内文文字大小、主要配色与次要配色等资料,若是有下一位设计师接手制作的话就能立即作业,也可以借此统一整体网站的文字逻辑。

  流程5.找图配图(关键字搜索、找对图带你上天堂)

很多公司都有配合的图库,如何在茫茫的图海当中找到合适的图片确实是很重要,首先你要知道你要什么,搭配精准的关键字来缩小搜索范围,比方说现在要找世界地图观的意象,你会输入"Earth"还是"Global"? 两种搜索出来的答案会不太一样喔!如果要再加入合作Cooperate或是Trade会让图的表现更有意向,也可以多加入一点关键字获得更精确的搜索结果。

  流程6.设计精修

其实就是刚完稿的设计千万不要马上寄出,先??放着或是钉在墙壁上等待~下周或许会发现意料之外要调整或是看不顺眼的地方,这时可以立马着手精修。

  流程7.黑白看稿

在设计好时会让稿件试着黑白呈现看看,可以看出你的稿件是否平淡无奇或是对比明显,以此来确认在彩稿中有哪些部份需要调整。

以上介绍了整体的设计流程与设计诀窍给大家参考,实际运用上还是得选择一套符合自己习惯且好用的设计模式,可以依照自己喜好去做调整喔。

发表评论

电子邮件地址不会被公开。 必填项已用*标注