web网页设计&排版教程

1. 浅色搭配深色背景 ( 苹果官网 如浅色白背景用黑色字体)

2.  中灰色搭配浅色      中灰或者偏色彩的中灰要用浅色 如白色

3.  深色搭配浅色  如网站底部

4. 彩色搭配非彩色,如 背景多色搭配白色 或者黑色。

  电商类为了突出价格可以用对比色来凸显 单色彩色背景搭配黑白色,或邻近 对比色(  注意 高明度偏高,搭配黑白

  明度偏低搭配白色/彩色。多色组合的颜色尽量搭配黑白最佳,注意明度偏高搭配黑色 明度偏低搭配白色/

5.  色彩之前多色块在一起的时候,为达到视觉上的一致性。通过调整色彩的(饱和度/明度/色温 暖色冷色)达到视觉的平衡

饱和度色彩运用,色彩高低对用户的传达的情感色彩的饱和度高低对

俊敏

01: 学会借鉴几何图形的比例去排版文字

02: 文字排版中巧妙的加入图形,不仅变的具有创意还会让你所表达的信息内容更加易懂。

03: 文字排版中学会融入来生活中图像元素,不仅会让你的视觉上得到质的提升 还会让你整个内容更加的接地气。等等还有很多方式需要你们去发掘了。

线条运用: 采用明亮的线条作为提示作用,不仅潮流,而且抓住了用户视觉的突出。

                在网页中的按钮上!告别实色为主的方式,利用线条更好和整体融合 !加强了按钮的透彻感也是非常新颖的展现方式

                  网页中的装饰作用, 常用线条来辅助作用, 避免的彼此的干扰。

2 : 网页中的利用纯色方式来突出信息内容

01:下面利用纯色方式提炼文字的案例

下面网站为了让用户第一视觉看到网站表达的重要内容,所以利用了纯色打底方式来修饰文字,成功的让用户第一眼注视到了它们!

3:采用活泼的几何形状作为背景的方式。

使得整个网页不单调,给用户一种活力青春的感觉,使模特和和整个画面结合的更加紧密.

04:加入科技的元素,让你的产品增分出彩。

下面网站是一家婚庆公司的宣传网站,网站背景采用了将新娘手捧鲜花的照片 设置透明度模糊展示

既不强主视觉,又让背景和照片完美的融入和呼应,给用户一种淡雅 幸福的感觉。

01:线条的运用,既可以起到装饰 辅助分隔的作用,又可以作为重点信息突出

02: 背景纹理纯色的运用,有效的起到了网站分隔和区分对比的作用。

03: 几何图形的运用,让你的网站更有新意。

04:科技的元素的运用,让你的网站的产品卖点更突出,优势更明显。

05: 增加氛围,可以让你的网站的变的更有青春活力。

06: 实景图的运用,可以使网站更贴切生活。

07:手绘元素的运用,让你的网站更出彩。

重叠 

01: 打破常规,展示更多细节

多方面展示图片的细节,通过3张图片将人物服饰细节分别展示出来。告别死板的设计,板式更加灵活多变

02 :丰富图片展示

图片将图形结合起来,使得图片不在单调,同时富有设计感,而且有助于品牌的传达。下列图片与背景色进行重叠搭配,使图片变的有富有空间和稳重感。

03:相互关联性

利用重叠的设计方式让板块于板块之间相互关联,且具有整体感。告别了原有图片和文字之间的零散性。

04: 增强空间感

下面的海报中,原本很普通的地球,但设计师是采用背景图和球进行重叠搭配,使

拉开了画面的层次感,画面在视觉上变得有空间感

05:增加层次感

下列海报设计中,奔驰车和背景图片之间也是采用了重叠的搭配让整个画面的层次感加强,破出来的车头 在视觉具有强烈的冲击力。

二:文字与图片的重叠设计运用。

01:文字和图片让画面更灵活。

下列数字2014和运动鞋子进行重叠设计,视觉上带来了一前一后的感觉

使得整个画面变得具有活力,给用户传达出了一种轻快的感觉。

02 : 带来更真实的感受

下列设计,使用文字和和产品进行重叠设计,让整个文案和产品结合的更加紧密,而且画面也富有层次感,给用户带来更真实的感受。

03:让文字变具有引导性

下列是一个相关流程设计设计师将文字和数字进行重叠的设计方式来处理,

使得用户能够清晰的了解当前在第几步骤,同时让整段文字变得丰富起来。节省了大量不必要的空间。

四:色彩之间的重叠设计运用。

使用不同的色彩进行重叠搭配在视觉上往往会给用户带来不一样的视觉体验哦

01;强化视觉冲击力

利用鲜明的对比色彩进行重叠搭配,使设计更具有视觉冲击力和吸引力。下列海报设计,设计师将模特用亮紫色渐变到蓝绿色和背景进行的重叠搭配改造。极大的增强了视觉冲击力,同时在视觉上给用户带来极大的冲击感。

02:让画面变得更立体

下列创意类海报,设计师同样运用了色彩重叠的设计方式来处理,将橙色按照透明度以及饱和度不断的重叠到蓝色背景使得整个字变得更立体,画面的设计感和层次给用户带来强烈的视觉冲击力

01 :  节省空间,能让图片展示更多的细节。

02 :  打破固有的版式设计。

03 :  利用色彩可以让设计变得更有冲击力。

04 :  增加层次感 空间感。

05 :  让画面变得有氛围有活力。

06 :  修饰单调的设计,使得它变得更丰富。

07 :  可以让不同元素,或版块之间能相护关联

08 :  让版块之间具有整体感。

09 :  具有一定引导的作用。

形式感

1 抄现实,  抄现实中的物体 (圆桌 钻石)

2. 园方三角

3.断臂处理,  (取局部,放大处理)

4. 欲擒故纵  突出  (加强,减弱)

5. 乾坤大挪移  ( 旋转  平移 ) 整体旋转 背景旋转 内容旋转—— 对称性 不对称形        平移可以增加画面的丰富性和视觉冲击力

6. 全屏不切糕

7 文字衣橱  文字(大关系 解读语意  划重点)

8. 你看起来很好吃  (并列行对比形 流程性)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容