网页视觉的设计诀窍 | 圣侨资讯

网页部 郑奇儒 2017-04-21

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

流程1.阅读资料

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

流程2.找参考网站资料

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

日本地区网页设计师作品合集4db

网页作品展示及评分平台Awwwards

网页设计竞赛平台CSS Design Awards

评选全球最佳网页作品的竞赛平台CSS Winner

时尚型设计网站分享网Reeoo - 可依据配色加以筛选

知名互动多媒体网站收录平台Favourite Website Awards (FWA)

流程3.创意发想

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

→Before 创意设计-网页-前后效果图 →After 创意设计-网页-前后效果图 ▲参考网站杰峖数位科技网站

流程4.设计

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

■ logo色系搭配与网站配色

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

Degraeve - 可针对图片给出合适的配色

Coloes - 可随机挑选颜色以及观察目前流行配色

■ 版面配置

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

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

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

■ Photoshop网格推荐

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

圣侨网页设计-PHOTOSHOP网格

■  Banner设计

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

→以字型为主的设计 网页banner设计-字体 ▲图片来源 Tom Rich's Dribbble

→产品为主文字为辅 网页banner设计-产品 ▲图片来源 Stefan Tran's Behance

→美图放上去就是美网页banner设计-情境图 ▲图片来源Valery Gurkov's Behance

网页banner设计-情境图 ▲图片来源Corey Haggard's Dribbble

 

→底图押上色块底再配字 网页banner设计-底图配置

→平拍图像素材网页banner设计-平拍图像 ▲图片来源Maan Ali's inspirationde

→平拍图像素材网页banner设计-人物情境图 ▲图片来源 Bart Ebbekink's Behance

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

■ 字型搭配

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

网页字型搭配 ▲图片来源Jsedm

■ 文字大小配置

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

网页字体大小

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

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

流程6.设计精修

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

流程7.黑白看稿

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

网页黑白比对

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

  • 539