作品案例

案例逐步添加中,我们的要求是下一个永远更好

武汉大学-人文情怀与科学设计的极致融合

wednesday 13 july 2016 at 16h23

Categories : 用户体验, 营销类, 网站, 平面, 移动端APP, 品牌设计, 产品视频

项目背景

坐落于武汉珞珈山的武汉大学在2015年年末的时候找到优意,委托优意在目前的网站版本上做进一步的优化,希望网站能做成栅格化的形式,适配大小不一的屏幕。并且在整个网站中融入只属于武汉大学独有的特色元素。

项目目的

这次项目是为学校官网设计,所以在整个网站上更偏向书卷气息多一点的感觉,与一般的商业网站的大气风格不同,首页排版内容相对应的也有所增加。

确定首页主色调,保持整体风格协调一致

刚刚拿到武汉大学的页面时,首页的配色没有一个明确的主色调,之前的设计在色彩的选区上采用了很多颜色,这样使整个页面的风格看上去不是很统一,有着很强的分裂感。针对这一情况,优意所设计的是在颜色上整个页面基本上不超过3种以上,以便保持整个页面的风格统一。

武大元素与网站导航的完美糅合

将武汉大学的LOGO色中的墨绿色设为整个网页的主色,网站导航主要以墨绿色打底,将武汉大学的图书馆、行政楼及有名的武大樱花以镂空的花纹融入导航里,使人一点开网页就感受到武汉大学独有的特色。

美观、可用性更强的栅格化系统

在设计过程中,我们使用了Bootstrap及HTML5响应式框架,同时我们采用了栅格化系统。考虑到这次网站在信息量可能会有一定的需求,我们将栅格设为12格,每个栅格条设为90px,将中间的11个间隙每个设为10px,整个栅格的总长度设置为1190px,这样便于划分网页中的版面布局以及信息分布,使网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。提升了工作效率,使网站在各个分辨率的显示器上完美展现。

图文搭配提高阅读性

针对信息展示较多的网站,如果只排列单个的消息,可读性及网站的展示效果可能不会达到想要的展示效果,所以在每个头条新闻旁加入新闻相对应的照片,在阅读性上,使用户看图片第一眼就可大概知道新闻大概的内容。

 

这次设计武汉大学的网站,在色值、整个布局的分布上都是经过反复的推敲,整个页面视觉效果上简洁大方,可读性强。色调上是以Logo色为主色进行铺开,使整个网站保持一致性。