当前位置: 主页 > 平面设计 > 给程序猿看的web页面设计和排版

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

  • 2021-08-18
  • 来源/作者: 优设/ 情非得已
  • 23 次浏览

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

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

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

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

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

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

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

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

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

4、亲爱的coder们,如果你对黑白色感到腻味了,#43BBEF是个很不错的选择:清爽、敞亮、优雅。

据说,每一个coder都必须和英文打交道,据说,英文排版的话居中总是没错的…

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

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

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

6、这就是传说中的网格背景了,避免单调的最好办法就是打格子,设计师肯定懂的,面对一张新建的空白稿纸,第一步,显示网格。

不过,英文排版与中文还是有些区别的,至少字体种类比中文丰富很多很多,但是——我们有惊艳饱满的繁体字!

从小我就觉得,会写繁体字显得很有文化…

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

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

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

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

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

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

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

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

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

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

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

12我的博客。。。我一直想搬出去自己建造,但我害怕麻烦。。。这个页面也很简单。这是一个新手项目。

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

标签(TAG) 网页设计