-
空白在网页设计中的应用
良好的设计需要呼吸的空间,也就是我们所看到的空白。空白是围绕设计元素,如图像,文本,信息图形等等,它使得使布局干净和精致。当然,空白也不一定真的是白色,它也可以是其他的颜色,甚至是比较鲜艳的颜色,但是它都是干净和优雅的设计。CoryGibbonsMettaSkincareWebydoBookshelfPlainwhiteBarleyBradHoganMusioHop.inBrightByteWho’syourSanta?CycleLuxSuki0
-
扁平化设计风格创意设计师个人在线作品集
这是一组扁平化设计风格的创意网站设计,是来自世界各地设计师插画家的在线作品集页面设计,或者你也可以称作互联网在线简历!你可以在这些个人设计风格鲜明的设计中寻找灵感!更多扁平化设计欣赏,可以参阅《扁平化设计风格网页设计欣赏》《创意设计欣赏扁平化设计风格》《扁平化风格移动UI设计欣赏》《扁平化设计风格免费英文字体下载》。RobbyLeonardiErikFordBradHaynesThrillbentAntoniaPowersGuyMoorhouseJonathanDaCostaOliLisherPeterFigasinskiDanyelPeralesLorenzoVerziniJustinAguilarBobGalmariniJanValosek2ndFloorEtchThomasSwellmannEdwardThringAngieWangZacharyTaylorKevinCannonRoyBarberAndreasSchusterClintTabone0
-
网页设计欣赏 排版的艺术
我们都知道,排版(typography)是一个非常重要的设计元素,追求极简主义风格的设计师偏爱在排版和字体的选择上下功夫。在这一次的创意网页设计中,我们精选了一些极好的简约风格的网页设计,希望你会喜欢!RareviewArneMeisterTen&BourneNavigatingMedicareYaronSchoenStudioKällbomNicolaPottswearegoatKylePennPrometheanITSydney–Stockholm0
-
惊艳的咖啡网页设计示例
还有什么比清早的一杯咖啡更让人心旷神怡?浓郁醇厚的味道,让你神清气爽,精力充沛。你是愿意与伴侣享受午后咖啡的那份闲适呢,还是更喜欢在小巧复古咖啡店感受夜的宁静呢?无论如何,咖啡和它的忠实拥趸有一套完整的文化体系。快来看看这些咖啡店的网站示例吧,它们都是为咖啡供应商、咖啡俱乐部、好玩的博客和论坛提供的各种网站模板。不仅如此,我们还收集了一些有关这种大众饮品的绝妙插图。以下网站大多是咖啡供应商、零售商和咖啡店的电子商务广告。留意其中流行到爆的布局、配色和出色的字体设计哦~1
-
网页设计的极简主义:少即是多
作为设计者,我们都知道极简设计可以达到喜闻乐见的结果。但是,仍然有不少设计者还没达到这样的水平:他们经过一轮艰辛做了一个很少元素并看上去不错的网页或者他们做的网页最后看上去不会很“复杂”。网上有可多关于极简设计用在网页上的文章,这篇文章目的是指导你如何让你的网页设计做到华丽却不失内涵。最重要的是,我们将为你展示一系列的设计,让你从中体会为什么一些设计可以做到这样的效果而另外的一些却不能。什么是极简设计?极简设计被描述成将最基本的元素呈现,并摒弃所有多余结构,色彩,图形和其他素材的设计方法。其目的是使主要内容浮出并成为聚焦点,从视觉角度出发,极简设计意味着要沉静并将最基本的元素作为中心思想。设计起源于瑞士而后广泛应用各种媒介:平面设计,建筑,音乐,文学,绘画等等领域,而最近更在网页的设计上盛行。尽管极简设计已在数十年前起步,早期的互联网并没有把它付诸实践。没有旋转的图形,选取框和夸张的色彩,网页设计混乱而沉冗。我们将为你介绍极简设计的基本准则。即使你不是追求极简审美,你也会通过这里来简化你的设计。少即是多就如人们常提及的那样,极简主义会在最前部带出最重要的内容并为用户最小化一切干扰。如果某一页有过多结构,用户会对每个元素的位置感到疑惑并曲解其本意。一个极简设计会将焦点直接放在内容上。举例说,任何黑白组合的设计都会吸引用户的注意力。颜色自身会成为焦点。让我们看看这个特别的例子。或许你已经看过这类设计:单纯的白色背景,一块内容还有一个图案。图案包含色彩,结构和设计者的品牌和身份。由于这个特别图案的复杂性,其他在这个页面上的内容被忽略,显得不重要,最小化内容使设计者达到完美的平衡。如何使内容最小化创作极简设计的第一步,或说是仅仅简化布局,并不是简单地删掉大部分图片,而是重新考虑内容并摒弃空洞内容。只有这样才能使页面上最重要的元素发挥作用。就如你计划做一个网页,你先要把你想要的内容写下来:图标,介绍,导航条等等。然后把那些不需要的部分删掉。能舍弃的尽量舍弃。以下的内容或许你是不需要在网页上一一列出的(单独作一个部分),记住这只是一个指导。需求因人而异,以下的明细并不能以偏概全,希望大家能各取所需。社交媒体的图标或图案标题和补充说明“专题”,“偏好”,“最近”(包括了Twitter和RSS订阅)之类的条目页面多于3个部分(例如“简介”,“关于”,”服务”)次导航页以上所提及的东西并不是要你去减少网页的内容,而是为你提供一个参考去裁减网页中的累赘元素,从而突出主要内容或者用一种更为简单的排版方式去把各个元素更好地结合成整体(举例说,把媒体链接放到“关于”或者简介部分)。你也可以把内容分布在不同的页面,把它们细分说明。如何简化设计要想把设计简化,极简设计必须要求结构,颜色,形状,线条,内容,文字都要精简。工具栏上尽管会让你觉得乏味,但是相对把所有内容全盘托出,让唯一的重点呼之欲出更吸引用户眼球。选好要主要的内容,并以之作为你设计的重心来提醒自己。框架主导内容通过浏览下列的展示,你会发现一些设计者会加很多显眼的且微妙的颜色,独特的排版和引人入胜的形态在里面。尽管只需要一个独特的线框设计来迎合所有的元素。在一个空白的页面创造一个线框需要额外地留心。有适当的框架,你便可以利用层次,排版来制造出视觉的冲击。构建框架,请遵循以下步骤:选定你真正需要的内容。列出优先考虑的内容,分清主次。尝试为你的框架作几张草图,去感受下好的视觉层次是怎样得出来的。当你得出这个框架,考虑一下怎样使布局具有美感。例如,你的图标要上颜色但是这个设计你不会在其他地方重新使用,你必须为这些作出说明。空空是极简主义的同义词。无论你多有创意,极简设计绝对不能离开”一片空白“的。在页面上出现的元素的空间布局需要得到平衡。平衡,对齐,对比平衡,对齐,对比是极简主义的三大要领。累赘的内容可以用空白和适当的构图所取代,设计的基本原理要求必须非常谨慎地处理这个问题。确保你的设计坚持这些准则便不需要补充额外的视觉辅助来使用户看上去是“完整“水平对称近似水平对称放射对称不对称与此同时,你也需要牢记其他的设计基本准则。在不同的选择中反复试验以达到最好的效果,你可以看看“设计的准则“以获得更多的信息。当过度设计成为习惯过度设计有时会成为习惯。无论你多想把东西设计成简单,最终的结果也是一件乱七八糟和复杂的成品。为了解决这个问题,我们必须形成某些新的习惯。尝试记住下面的提示。将重点放在每一次培养习惯的时候。例如,尝试在空白页面前先减少和简化内容。如果你发现找出中心思想是一件很困难的事情时,“有些东西已经遗漏了“首先要把累赘的东西拿走而不是加入新的内容。每一个极简主义的方面要求与众不同的天赋去驾驭它。你若想简化你的设计你必须把这些准则实践。更进一步来说,当你应用这里所提及的技术,参考那些成品再看看你还有没有在简化设计上有提高的空间。在你设计的时候,你要把关注点放在那些你不确定的东西上并让其他设计者去指出你错过的东西。极简主义的展示下面是一些简要的极简主义的展示。看看它们各自的设计准则,并留意下它们是如果打破我们常规却立于不败之地。1.JamesDayPhoto2.KillswitchCollective3.Lonely4.DBushell5.XPD.no6.ToyNY7.JoshuaSerbus8.Ah-Studio9.SymourPowell10.IconWerk11.NeilWilsonArchitects12.Non-Format13.Zaum14.ChecklandKindlysides15.Blumenthal16.TinkLondon17.ProudCreative18.Kimag19.BernatFortet20.AllDay趋势你所接触到的极简主义都是有它自身所特有的设计趋势。请注意这些趋势,它们是提高你设计水平的试金石。我们从前人的设计布局中不但可以获取灵感,更可以打破这些去开创一条属于我们自己的道路。让我们看看这些趋势的详细情况。黑白最显著的趋势是黑与白的延展运用。这样做对比最明显不过,从颜色到结构,形状和内容上都可以使整体布局简化,但是如果过火了就会适得其反。看看以下一些网页时怎样定义颜色的,它们是极简主义用于网页设计上的佼佼者。同样,考虑下在强烈颜色的应用下怎样达到极简主义的效果的。趣味的排版基于排版为设计基础的网页更趋向于极简主义。当设计者并没有过多的刺激用户的元素,他们往往会用趣味的排版去突出内容。你甚至可以只应用一个视觉元素去排版。这是一个具有挑战性的却自成一派的技术。看看它们是如何运用排版技巧增强设计效果却仍然能保持唯一性。动画有相当一部分的极简主义设计为原则的网页是以Flash为蓝本的。适可而止的视觉造福于细节上的动画效果,例如是文本的渐出渐入的效果。同样,Flash的移动毫无疑问会成为设计的限制。突破常规的线框,排版等元素的变化将会比遵循传统套路的设计更容易用Flash做出你想要的效果。结束语极简主义的设计可以从多途径获取,目前我们看到的大多数都是重复的。这些趋势会压倒一切,当我们去创造任何能行之有效的趋势时,必须与抄袭作斗争。任何情况下,极简主义会在将来很长的时间里在美化工作上扮演重要的角色,无论对于客户或者是你的工作,学习相关技术将可以达到立竿见影的效果。如果你对极简主义并不感冒,并不要紧,这些指导和准则能使你的设计简化,这绝对是好事!是什么使极简设计成为趋势,人们将怎样选择呢?欢迎留言!0
-
10个令人印象深刻的视差滚动网页设计欣赏
网站设计演化产生随时间和今天,视差效果添加了额外的美,每一个网站。视差滚动是一个完美的滚动技术,背景图像移动速度对前景图像,创造一个深度的幻觉,而向下滚动页面,并添加到浸泡。有一些网站已经被介绍到视差效果,以下是10个令人印象深刻的视差滚动网页设计,将吹你的思想。享受!DreamPretzelsQMusicTitanicWhiteboardInceptionExplainedCantileverBiamariRangeRoverVictoriaBeckhamBataBagigiaAla0
-
网页设计新趋势 更少文字更多的富媒体
更少的文字,更多的富媒体——在网页设计中运用视频来达到特定效果,这算是2014年的一项新兴网页设计趋势。有些人坚持认为,这是一种有争议且冒失的展现方式,因为内容(文字)为王。其他人则打破这种共识,拥护更为激进的观点,他们的依据是人类好奇心的力量,和对更加炫酷的信息获取方式的喜爱。不管怎样,你一定会注意到近的几个月来,包含视频等富媒体,并扔掉文字内容的网站,出现得越来越频繁。毫无疑问,这种做法有它的支持者与反对者,而且也难以断言,它是否是一种合理而有益的方式,能让网站看起来更现代、精美和创新。然而它当然也别具风味。只有时间能够展现它所有的“缺陷”,最终得出积极的结论。在此我们收集了一些网页设计案例,它们更多依靠视频与图片制造视觉冲击,而非常规文字所构成的大量信息。带有视频的网页设计案例ManazProductions,正如之前例子一样,这个网站只包含了视觉信息,几乎没有文字。使用这种方式并不令人感到惊奇,因为这个网站代表着一家视频制作公司。因此,设计师仅仅使用了能够展现这家公司能力与经验的视频,来构成这个着陆页。Designmodo的StartupFramework,这个网站同它所展示的产品宗旨一样,散发着专业与老练的形象。这个页面包含很多解释与描述性的视觉信息,包括视频与图片,自然比单纯的文字更加引人瞩目。TheBarstow,网站被优雅地切分为两半,每一半都有一段豪放的视频。它们起着显著的引导作用,也有助于将用户带入恰当的氛围。WinshapeCamps有着梦幻般欢乐有趣的网页设计。主页包含了一段全屏视频介绍,也有效地与炫丽的半透明渐变背景融合,成为功能的一部分。Apple30Years,这家公司献给它的忠实用户一个干净、现代、精致的页面,作为它30周年纪念。这个页面主要包含很多有趣迷人的视频,有力地展现了它的精髓。Garmin,这是一个促销网站,用最佳位置巧妙地展现了它的广告商品。这个网站的文字与图片相互支撑,结合地非常好,值得夸耀。Happy,乍看之下,这就是一个普通的单页网站,推销着它的设计者。然而,它利用一种相当创新的方式吸引用户的注意,通过播放一段24小时不间断的音乐视频,展示着这件精心设计的产品的全部力量。eCardsStrasbourg,这个网站让用户有机会发送特殊的电子卡片。相当讨人喜爱的别致背景是电影的风格,不仅强调了文字,也积极地鼓励着用户填写表单。Sonia,适用于所有时尚主题的网站,它也利用了大量以图片、视频、甚至电影短片为代表的促销元素。JoostHuver的网页设计靓丽而匀称,主要运用了大量图片。设计师通过最简练的方式,巧妙地创造一个相当精简却内容丰富的单页网站。TSC,这个网站强烈依赖绝妙的图片来创造视觉冲击。网站团队使用很多不可思议的图片与照片来构建网站,不仅仅是首页,还有其他内页。SiraiHorses,这个网站很聪明地使用了华丽的专业摄影图片作为背景,伴随着它所有的内页。它们担任着主要的视觉引导力量,将用户的注意力聚焦在宠物身上。StoryandHeart,这个网站的着陆页包含了一段令人吃惊的视频作为背景,有效地补足了内容,与此同时也抓住了用户的注意力。很像第2个例子,选择四两拨千斤的视频作为背景,可以让人轻易预知网站内容,因为它代表着一个电影制作社区。HelioSequence,设计师运用了暗色调,它以突出亮色元素著称。在这个例子中,干净的深色背景不仅强调了内容,也令视频更加突出。CuriosityAmsterdam,欢迎页面部分包含了一组令人难以置信的短视频,还有令人印象深刻的背景,主要用于支撑标语“Curiousity.CreatingInterest”。通过它强势的视觉内容,这个网站绝对能够激起用户的兴趣。ZioneCeramica有一个工艺精良基于图片的单页网站,以大量专业摄影图片为主。设计师巧妙地将多种视觉信息组合起,但整体界面组织良好,便于快速浏览。KidsLoveJetlag,这个网站属于一家创意数字机构,使用了迷人的全屏轮播图和颇具争议的视频。Geox是个完美无瑕的促销网站,背后有着新颖绝妙的创意。为了展示使用Geox产品的所有优势,这家公司没有一条条列出它的好处,而是创作了一段原创视频。InnerCity又是一个基于图片的一流网站,设计师巧妙地运用迷人的图片,作为常规内容的补充。GoogleGlassExperiment是个先进的交互式网站,通过变化的视频,传达出了充满活力与能量的形象。这些视频则成为了新产品中潜藏的巨大可能的有力证明。WeareTaiga,网站首页只包含了一组全屏视频,和简单的介绍。这家公司主要强调他们的作品,正力图避免所有杂乱的文字。结论基于视频的网站方案,正在飞快地聚齐人气,那些久经考验、大家习以为常的文字布局却没有。这种方式不仅在创意机构或视频相关公司间盛行,也受到一些设计师与艺术家们的追捧,他们信奉“我的作品自己会说话”。0
-
迷人的深色调网页设计的灵感
使用黑色调然后对比细小的明亮光线,是网页设计中最常见的设计方法,在这一次的创意网站设计中,我们寻找了一些深色调的设计,希望你会喜欢!当用户在黑暗当中寻找自己想要的内容的时候,所产生的趣味感让人寻味。DUNCKELFELDElectrikCompanyQIdeasLOUISXIVEnergyimgclass=”pinable”src=”http://sudasuta.com/wp-content/uploads/2014/11/42.jpg”alt=”LOUISXIVEnergy”/>BayStreetBiergartenVisageIntercoreFLIPPCirclesConferenceRookDrexlerMammothMediaTheWhigDang&Blast0
-
网页设计中的半透明运用准则
使用半透明元素来设计网页很美观也很需要技巧。半透明效果是指色块、文字或图片被“稀释”或者冲淡,使得颜色减淡,并且透出后方内容执行到位的话,这种效果会非常震撼,能划出一块绝佳的文字展示区域,或者作为吸引注意力至图像某部分的手段但是使用半透明时,设计师必须小心谨慎。这种效果很难处理得当,因为事关可读性。透明度使用错误的半透明块和文字也,会能散注意力,并且破坏整体设计效果接下来看一套行为准则,附带一些半透明效果在网站上的优秀执行案例通过半透明来形成对比选用半透明设计技巧的最大好处,是创造对比。这种效果可以让设计师通过色块、图片上的大字体或多种颜色层次来创造视觉焦点半透明也可以在背景图不能很好展现上方文字时,将文字分离开来使用半透明设计时尤其需要考虑对比。只有图片(或背景)和文字都可读时,半透明效果才是有意义的。当你考虑使用半透明效果时,问问自己:这是否有助于用户对图文的理解?避免遮挡图片的重要部分半透明效果不应该遮挡其下方背景或图片的重要部分。决定半透明层位置的时候,要清楚你“牺牲”了什么内容用不同的透明度没有完美的透明度值。对于某些项目,80%透明度比较理想;对于其他的也许15%才是最佳选择。对每个项目采用不同的透明度不要觉得半透明就能让文字更易读使用半透明色块来衬托文字并不意味着文字会自动变得易读。要考虑对比——半透明色块与文字、背景图与半透明色块两方面都要考虑半透明效果用在图片、色块或文字上时,考虑文字的可读性至关重要。切记,如果设计效果致使文字难以辨认,你的信息将无从传达在细节处使用半透明效果半透明并非只适用于网站的主体部分。这种效果在细节处也能大放异彩可以考虑用半透明来展示导航工具栏,或者作为按钮和可点击元素的鼠标悬停效果。多种透明度不要使用过度。选定一种元素和透明度样式,然后使它贯穿整个网站的设计不要在对比强烈的图片上放置半透明元素处于可读性考虑,最好避免在已经包含强烈对比的元素上使用半透明效果——比如黑白对比或色盘上的互补色因为要在背景的各个部分都达到正确的效果很难,想在这类元素上使用半透明效果,除非强烈对比在你的设计中真的只起到负面作用。考虑用浅色块代替吧将半透明作为一种艺术手法半透明不只是次要效果。可以考虑用这个效果为你的网站设计主画面大尺寸半透明创造的对比、强调和视觉吸引令人震撼不要将半透明作为装饰物使用半透明效果并非为了打破设计中的单调。把这种效果作为装饰物使用,注定会导致糟糕的设计半透明效果的使用应该事先考虑和规划好。半透明不是加粗这类简单效果,处理不当看起来会很草率且不专业在背景中使用半透明不只是设计前景元素时可用半透明效果,它也能用在背景图上。有些非常棒的半透明元素精细微妙还有些半透明效果夹在图像层之间。例如TonyChester的网站,就用了绝妙的半透明分层技巧打造了一件多维度的设计不要同时运用过多半透明效果在每个项目中有节制地使用不同类型的半透明效果。透明度要能制造反差对比,产生视觉吸引力。这样使用过多的差异化效果,会分散用户注意力在轮播图片上使用半透明元素半透明的使用不限于单页网站或静止网站。它在变化的图片和背景上也起作用。两种方式都可以用上半透明效果在轮播图片上使用半透明,是该效果最棘手的用法之一。却也最令人印象深刻。慎重考虑多张背景图的情况。选用颜色和对比搭配相近的图片,这样只需一种半透明效果即可应对后方移动变换的背景格外注意半透明效果与每张图的匹配程度,才能保证每张图的整体性,并创作出易辨认的照片或其他背景与文字,保持视觉统一小结尝试半透明效果,是拓展设计技巧的一个绝妙方法。像很多其他效果一样,要有节制地使用这个技巧,并且在多种环境下实验这种设计,来确保它按你的意图运作和展现半透明设计的最大挑战,是在轮播图片上使用时确保文字清晰可读,和避免半透明元素错误地遮挡下方图片尝试多种透明度和使用方式——用于图片、背景、遮罩效果——来决定那种效果最适合某个项目2
-
设计理论 网页设计的灵感来源
能够激发我们创作优秀网站的,不仅仅是网页设计。这世上几乎每一样你身边的事物都能对你有所启发。你总是无法预料什么东西会点燃你创意的火花,我经常发现一些最常见的事物能让我从新的或不同的角度来思考项目。这里我们介绍10种我最爱的网页以外的设计灵感来源。大自然思考设计的最佳地点之一就是户外。看看自然界这些伟大的图形和色彩搭配。就我个人而言,我喜欢从花卉中汲取配色灵感这株秋天的三色堇可以作为新项目配色的出发点,伴以明亮(且对比鲜明)的颜色营造出的各种怦然效果【作者这里似乎忘记配图了,说好的三色堇呢~】音乐虽然很多设计师都会赞同,听听小曲是挑逗设计的绝佳方法,不过音乐中也能有其他收获。想想你听不同风格音乐时,所感受到的形形色色的情感。收听吻合你项目基调氛围的音乐,可以稍稍激发一些灵感。听音乐时保持思维跳跃,将你大脑在听音乐时创作出的画面用作项目雏形的基准