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

2013/05/13 11588

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

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

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

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

排版简洁的网页设计(1)

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

排版简洁的网页设计(1)

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

排版简洁的网页设计(1)

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

排版简洁的网页设计(1)

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

排版简洁的网页设计(1)

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

排版简洁的网页设计(1)

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

排版简洁的网页设计(1)

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

排版简洁的网页设计(1)>

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

排版简洁的网页设计(1)

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

排版简洁的网页设计(2)

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

排版简洁的网页设计(2)

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

QQ截图20130504162859

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

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

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/website-design-and-layout

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里