不擅长界面设计,但是又想与设计妹妹和谐友爱的开展工作,你想过木有来来了解学习一下网页设计的排版布局小知识呢?至少这样设计菇凉不会泪眼婆娑的看着你把她辛苦打造的设计稿,最后改的面目全非。拿出一点敲代码或者看片的时间来欣赏下本文的案例吧。

因为讲大道理也没用,就先来看看这些网页案例的截图吧:)你肯定会有收货的,至少不会觉得世界还是被table包围的!

1、圆形,完美而不受拘束的形状。

希望引起看客注意的文字、链接等部分,你可以为它们染上靓丽的色彩,注意一小点就可以了——如果到处都是亮色,就没有亮色了...

给程序猿看的web页面设计和排版

2、一个个人主页,大大的纯黑hello,不由得让人联想到主人的随性、洒脱、热情,或许还有那么一点儿无厘头的可爱...

给程序猿看的web页面设计和排版

3、居右排版,左边只给出一个清晰的摄氏度标志,投在页面上的影子呈现出立体的效果,take the temperature——consider,类比很特别,想法读来很窝心~~

给程序猿看的web页面设计和排版

4、亲爱的coder们,如果你对黑白色感到腻味了,#43BBEF是个很不错的选择:清爽、敞亮、优雅。
据说,每一个coder都必须和英文打交道,据说,英文排版的话居中总是没错的...

给程序猿看的web页面设计和排版

5、圆形链接背景,图文混排,文字颜色有深浅区别,不多说

给程序猿看的web页面设计和排版

6、这就是传说中的网格背景了,避免单调的最好办法就是打格子,设计师肯定懂的,面对一张新建的空白稿纸,第一步,显示网格。
不过,英文排版与中文还是有些区别的,至少字体种类比中文丰富很多很多,但是——我们有惊艳饱满的繁体字!
从小我就觉得,会写繁体字显得很有文化...

给程序猿看的web页面设计和排版

7、与6中不同,这种风格适合喜欢摄影又文艺的coder们,好处自不必多言:)。

给程序猿看的web页面设计和排版

8、这种比较复杂,怕麻烦的coder请绕开走,不过,应该可以找到现成模板的,修改背景图片为自己喜欢的,ok。

给程序猿看的web页面设计和排版>

9、你喜欢这个图么?我很喜欢,简洁大方的灰色系,年幼时看的动画片里物品的风格,优雅中透着温馨...

给程序猿看的web页面设计和排版

10、标题居中,缀饰花纹,画一般的字体,很朴素,很优美。

给程序猿看的web页面设计和排版

11、淡淡的骄傲感从这个圆形头像和简单的文字说明里流了出来...话说圆形头像真的很别致,建议用彩色照片...

给程序猿看的web页面设计和排版

12、我的163博客...一直想搬出去自己搭建,又比较怕麻烦...这个页面,也很简洁,菜鸟程序媛一枚。

给程序猿看的web页面设计和排版

转载请声明:图片来源:shijue.me,文字编辑@亲爱的葱

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:15335158)分享实战经验。
设计微博:拥有粉丝量27万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

给程序猿看的web页面设计和排版
 

收藏 3
点赞 2

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。