部落格
Blog
熱門文章Hot
-
奥运行销 7个品牌案例教您如何借势造势 | 圣侨资讯
2016-08-17
-
流量成长指标 AARRR理论 | 圣侨资讯
2016-09-29
-
商业4.0 打造未来商圈五大关键 | 圣侨资讯
2016-09-24
-
营照归属感 Airbnb感动人心的品牌策略 | 圣侨资讯
2016-07-29
-
喜迎万圣 不给商机就捣蛋节日行销术 | 圣侨资讯
2016-10-27
-
掌握视觉传达技巧 设计资讯图表So Easy | 圣侨资讯
2016-09-10
-
内容行销必备 活用HASHTAG聚焦社群议题 | 圣侨资讯
2016-08-18
-
打造台湾皮克斯 TAIWAN BAR 让我们看到年轻人眼中的台湾 | 圣侨资讯
2016-08-05
-
Beacon微定位导流 游戏式消费模式 | 圣侨资讯
2016-09-19
-
圣侨CSR 云端活化「放送精神」 | 圣侨资讯
2015-12-30
网页视觉的设计诀窍 | 圣侨资讯
在设计网页的过程中,为了让创意发想和作品能更符合客户需求,必须要多方参考他人的经验和技巧,在这里我会分享一些经验与实际的做法帮助你达到更快速、精准的设计,符合规范逻辑与流程让客户怎么样都无法打枪你的作品,创意是可以被推翻,逻辑是无法被推翻的。
流程1.阅读资料
网站设计的前提必须先打好整个骨架并了解对方公司在做什么,就像盖大楼一样,设计图(企划)一定要先出来你才能知道你要盖什么,所以先大量的阅读与了解。
流程2.找参考网站资料
找参考资料,以下分享一些我常上的设计师网站,可以从中找寻灵感和设计方向,同时也可向客户展示实际的范例与效果,让彼此在规划网站蓝图的过程中达成更深一层的共识。
知名互动多媒体网站收录平台Favourite Website Awards (FWA)
流程3.创意发想
创意发想,通常这是最难的要怎么让网站结合客户产品与创意,比方说整合居家电子控制的产品,我们做了一种简单的方式,透过Before & After的对比,让使用者可以立即看到产品效果,达成情境式销售氛围,如下所示:
→Before →After ▲参考网站杰峖数位科技网站
流程4.设计
设计面分为下列几种方式个别介绍,logo色系搭配、网站配色、版面配置、Photoshop网格、banner设计、字型搭配、文字大小。
■ logo色系搭配与网站配色
通常网站的配色会搭配企业的企业色去做配置,那么要从何得知企业色呢?就是LOGO或是企业VIS识别系统,再来思考辅助色,如果企业是绿能产业是不是搭配绿色会比较妥当,若为糕点产业颜色上是否需要偏向较柔和的粉嫩色彩,除了配合企业色外也需要看业主产品去做适当的调配,下面介绍两个配色网站:
■ 版面配置
版面设计的方式有很多种,建议先在纸上绘制线框稿,同时可在后面加注动态呈现手法,也可以拿着稿件跟前端与客户讨论是否合理、洽当,当一切备妥后再行设计也不迟。 ▲图片来源UI TILES
目前圣侨使用的方式是用Axure去做网站规划,如下:
■ Photoshop网格推荐
建议用Photoshop在设计中就要把网格的概念建立起来,让网站设计更有逻辑并且有参考依据的指标,在前端开发时也可以依照此网站进行开发,可以省下不少时间。
■ Banner设计
网站最重要的无非是一进来就载入的Banner,所以在设计上更需要特别下功夫在此,设计Banner无非就是考验设计师的功力,在此给大家几个设计模式方向参考:
→以字型为主的设计 ▲图片来源 Tom Rich's Dribbble
→产品为主文字为辅 ▲图片来源 Stefan Tran's Behance
→美图放上去就是美 ▲图片来源Valery Gurkov's Behance
▲图片来源Corey Haggard's Dribbble
→底图押上色块底再配字
→平拍图像素材 ▲图片来源Maan Ali's inspirationde
→平拍图像素材 ▲图片来源 Bart Ebbekink's Behance
以上各种Banner设计都可以看得出其焦点、品牌意象,建议在设计时须先了解主从关系,清楚文字叙述和情境式图像的先后顺序,主要>次要安排,再接续补齐细节即可。
■ 字型搭配
在字型搭配的这个项目必须先说明,有些时候为了符合SEO现在在中文网页上多数都统一用微软正黑体或是思源黑体,而不是用图片去切图作字,但在英文的应用上就会比较多选择,通常我们都会使用Google Fonts的字体,如下图就是使用google font去搭配出符合业主网站个性的字体:
■ 文字大小配置
设计网页时通常会在稿件上注记此网站的统一标题大小、内文文字大小、主要配色与次要配色等资料,若是有下一位设计师接手制作的话就能立即作业,也可以借此统一整体网站的文字逻辑。
流程5.找图配图(关键字搜寻、找对图带你上天堂)
很多公司都有配合的图库,如何在茫茫的图海当中找到合适的图片确实是很重要,首先你要知道你要什么,搭配精准的关键字来缩小搜寻范围,比方说现在要找世界地图观的意象,你会输入"Earth"还是"Global"? 两种搜寻出来的答案会不太一样喔!如果要再加入合作Cooperate或是Trade会让图的表现更有意向,也可以多加入一点关键字获得更精确的搜寻结果。
流程6.设计精修
其实就是刚完稿的设计千万不要马上寄出,先放着或是钉在墙壁上等待~下周或许会发现意料之外要调整或是看不顺眼的地方,这时可以立马着手精修。
流程7.黑白看稿
在设计好时会让稿件试着黑白呈现看看,可以看出你的稿件是否平淡无奇或是对比明显,以此来确认在彩稿中有哪些部份需要调整。
以上介绍了整体的设计流程与设计诀窍给大家参考,实际运用上还是得选择一套符合自己习惯且好用的设计模式,可以依照自己喜好去做调整喔。