网页设计的基本步骤及设计方法
网页设计通常有哪些基本步骤呢?要想设计出漂亮的页面。需要熟悉哪些设计方法呢?以下仅供参考!
第一步. 收集与归纳素材
确定项目设计方案、确定项目创意要点、确定项目表现形式、确定项目文案以及确定项目相关素材。
第二步. 处理酝酿,构思画出项目原型图
让思想自由驰骋,发挥思维的灵活性;对前期收集的信息进行综合处理;运用各种方法勾画出若干可实施方案。
第三步:讨论并 总结可实施方案
对一众方案进行筛选并挑选出最具备可行性特质的方案。
第四步. 项目设计实施与后期校验
在整个项目进行过程中,都要对项目的各个关键点进行全面的思考,并要与项目相关的各个角色保持高效的沟通,善于抓住问题核心并能给出相应的解决方案,很多时候设计师的沟通水平决定了项目的进展、推进速度与最后输出成果的质量。
网页设计创意方法之一——借鉴创意法
特点:较适用于短平快.但又要求有细节的项目。
借鉴创意法可以从我们已知的一切入手,一如街边的路牌、途中的风景、斑驳的墙漆、月夜下的街灯,再到同行的案例启发,这些都是我们可以吸取的地方。相信我们都有逛网的习惯,这不仅是积累各方知识及了解时下流行视觉趋势的好方法,无形中也丰富了我们的创意阅历,为借鉴创意种下良好的因子。在工作中,当我们黔驴技穷,为找不出一个好的创意解决方案而挠头时,可以吸取日常工作、生活中的所见所闻,从其中的一个点,或者一个表现出发,借鉴其成功之处,拓宽创意思路,结合项目现状,给出优质的创意设计。
网页设计创意方法之二——情景(情感)映射创意法
特点:较适用于短平快.对情感有一定诉求的项目。
说明:情景创意法的'进行要求对一个想法进行纵向深入发掘,思维忌横向发散。
生活中,我们都是独一无二的,不同的成长的历程赋予了我们不同的阅历、不同的性格、不同的想法与世界观。我们每个人都有自己独一无二的想像力、理解力和判断力。于是乎,当我们面对同一件事物时,会做出不同的情感反映。同样的,在我们的日常创作过程中,也就有了不同视觉风格,不同创意想法的出现。
情景映射创意法是把我们所要表达的概念化的、抽像化的东西(如文案、主题等)丰富化、立体化。把这些所要表达的概念逐步的从低级抽象向高级抽象演变,直至获得满意的创意表达为止。
比如说春天,在想到春天的时候。在脑海里我们都会出现不同的元素,丰富而有诗意,绿色、和风、细雨、春泥、青草,还有风筝、燕子、踏青诸如此类。由此,我们可以充份发挥我们的主观能动性,融合主题创造出富有感染力的创意画面。
网页设计创意方法之三——思维导图创意
特点:要求有较好的视觉表现力,有思想深度、延展度的项目,如海报、平面、广告、富媒体等。
思维导图是一种放射性的创意模式,被认为是最自然的一种创意工具(自认为是这样),很多时候,当项目对创意表达有较高的要求时,它是一个既简单有效又具有美感的创意工具。思维导图法以需要解决的问题为起点,把我们所认识的、与问题有关的元素进行联想细分,向外延展,再延展,充分发挥联想的创造力。然后思维再跳出来,把这些之前创造性的想法都结合起来,进而激发出我们创意的火花。
网页设计创意方法之四——头脑风暴与逆向思维
说明:较适用对整体创意有较高要求的项目,如大中型项目的创意起始阶段。
局限性:头脑风暴方法对会议的主持人有一定要求,要求具备相当的专业性与组织能力。
说起头脑风暴,似乎已经没有人不知道了;在创意工作开始的时候,想到的最优先的,也应该是头脑风暴,但在这里还是想提一下。因为始终觉得在众多创意方法中,头脑风暴确实是优秀的且可行性很高的创意方法之一。
头脑风暴的特点是:众志成城。是集众人才智解决创意缺失的良好方法。是众多创意方案的集合。是创意工作中的捷径。
关于网页制作主题。
主题网页制作旨在培养学生利用现代信息技术对信息进行收集、整理、加工、设计和创作的能力;通过本项制作,鼓励广大中小学生积极探索、勇于创新、大胆实践。
1、评选目标:培养学生研究性学习的能力;培养学生表达自己思想的能力;培养学生组织知识的逻辑性的能力;培养学生的审美能力。
(1)评审要求:
①作品的选题和内容:作品是作者以家乡建设、风景、人文、民俗及文化等的某一个侧面作为选题,通过搜集大量的资料,经过精心的梳理后,从不同的角度阐述主题,以达到宣传、赞美家乡,弘扬民族文化的目的。要求作品根据作者自己学龄和认知水平, 从不同深度围绕主题发表自己的感悟、体会以及动手实践的过程和成果。
②参赛方式:参赛选手以个人或创作团体的名义报名参加比赛。
③网页内容:网页内容强调突出乡土化,要求对当地某一个具有代表性的特色内容进行具体、深入地研究,要保证网页设计和网页内容的原创性。网页内容的可选类别如下:
A.走入家乡
a.地方民族风情和民俗文化。
b.地方风景名胜。
c.地方物产(土特产品)。
d.地方民间艺术。
e.地方饮食文化。
B.中国古代民族英雄
网页内容主要以表现中国古代民族英雄的成长历程、英雄事迹为主。即可对单一人物进行描述,亦可对多个人物进行描述。
④参评作品分为小学组、初中组和高中组。每位参评选手只能提交1件作品。作品容量不大于60MB(非压缩文件),不需要服务器支持,并将原文件及创作说明的电子文档一起刻录成光盘,要求提交的光盘无病毒。
⑤在提交作品的同时还需提交一个作品创作演示文稿(仔细说明设计思想、制作过程、参赛心得及使用软硬件工具等内容),作品和演示文稿均为赛项非常重要的评分项目之一。
⑥网页的文件名统一采用小写英文字母命名, 首页文件名统一用index.htm。建议使用正版软件,如:Dw3、Dw4、Flash5、page98等以上版本软件。
(2)评审标准:(如图)
(3)注意事项:
①网页内容必须健康向上,不得包含违反宪法和法律、破坏民族团结、捏造或扭曲事实、宣扬封建迷信、淫秽、色情以及其他违反法律法规的内容。否则,相关责任自负。
②网页作品在技术上必须符合活动的要求。
③凡转载的图片和文字,必须注明来源。否则,相关责任自负。
什么是网页主题?怎样去应用页面主题?
网页主题,主要随个人爱好而定,我喜欢黑色风格的主题。
要将丰富的意义和多样的形式组织成统一的页面结构,形式语言必须符合页面的内容,体现内容的丰富含义。 运用对比与调和、对称与平衡、节奏与韵律等手段,通过空间、文字、图形之间的相互关系建立整体的均衡状态,产生和谐的美感。如在对称原则页面设计中, 它的均衡有时会使页面显得呆板,但如果加入一些富有动感的文字、图案,或采用夸张的手法来表现内容往往会达到比较好的效果。
网页设计作为一种视觉语言,要讲究编排和布局,版式设计通过文字图形的空间组合,表达出和谐与美。
对网站的整体风格和特色作出定位, 准确无误地标识你的站点和企业标志,声明版权所有者等。
WEB网页设计常见布局
我们一般的版式设计除了平面设计,就是网页设计和互联网产品,比如一些移动端手机APP这些界面的设计。这些设计都有一些通用的布局, 大家在刚开始学习布局时有一个诀窍,即不用太在意布局的理论,而去收集一些大家常用的布局,先把这些东西记下来,随着经验的积累,可以通过这些通用的布局产生自己的理解和想法,然后去打破这些传统的布局,有自己的创新和突破。
左边为最常见的大框套小框的布局,整个网页首先在一个比较大的框里面,然后各个模块在大的框里面去布局分配。
这种布局的特点是有一个比较大的背景,背景是可以平铺的,然后其他的内容可以限制在一定的宽度范围内,好处就是视线比较集中。
通栏布局打破了框的限制,如图导航部分等是适应屏幕拉伸的。
如图背景可以根据屏幕无限延伸,显得比较大气。视觉上显示比较整体,整个网页上都是有内容的。
如图为导航在主视觉下方的布局的示意图,传统规则就是导航放在画面中间。
这是一种比较时尚、流行的布局方式,如图上面是体现当前页面主题的一个banner,这个banner比较重要,它的设计完全可以体现整个网页的风格,同时也起到一个装饰的作用。接下来把这个banner放在中间的位置而不是传统的上面的位置,这样就给banner这个位置留下了比较多的空间,让整个画面显得比较简洁大气。
如图为左中右布局示意图。
结合案例,如图分三栏左中右。对banner进行比较主题式的设计,如图第一张素材的选择体现了整个网页的风格。同样第二张、第三张的图片选择也是体现整个网页主题的主体部分。所以这种布局是必须有个部分体现这个主题的,其他两个部分用来布局网页的其他内容。
如图为环绕式布局的示意图。
环绕式就是页面会环绕一个比较显眼的图片装饰来进行设计。如图一,中间为图片焦点,内容部分环绕在图片焦点周围,进行布局设计。第二张、第三张也为内容环绕主题进行设计的。这种布局比较灵活,可以先选好一个主题图,然后所有元素围绕它的视觉效果去设计,整个画面的效果就会以图为中心,主题非常鲜明。
穿插式布局虽然很少看到,但效果也不错。
如图案例均属于穿插式布局,即所使用的图片素材在内容里面是一个穿插效果。整个banner穿插在网页内容里面,整个网页对称、画面感非常强。比较适合做一些专题类的网站。
真正的版面设计里面的布局时千变万化的,我们只要遵循前面讲到的用户体验要好、视觉上画面平衡,那效果就会很好。
该如何设计网页
一、网站结构设计
网站结构设计包含网站栏目设计和网站模块设计以来确定网站提供服务的一种逻辑表现形式,也是网页之间的层次关系。
1.网站栏目能起到提纲挈领额作用
2.网站栏目具有清晰导航的功能
3.网站模块要做到顺序清晰且紧密结合
二、网站主题设计
网站主题设计实际就是网站视觉呈现风格的设计。网站的主题风格要能充分吸引用户的注意力,为用户提供愉快的访问体验。
1.设计能反映网站内容的logo,并且将logo放在网站的醒目位置。
2.网站的颜色要统一,要突出网站的主调色彩。
3.相同类型的图像要有相同的效果。
4.网站要有一句明晰的宣传标语。
三、网站布局类型
1. 国字型布局
这种布局类型分为上边栏、左边栏、中间内容区、右边栏和底部的页脚区域,其形状酷似一个“国”字。国字型是目前比较常用的一个网页布局结构,它适用于信息分类繁多、需要良好组织的网站。
2. T字型布局
这种布局类型由上边栏、左边栏、内容区、下边栏组成,其形状有点像一个英文字母写的“T”字。T字型网站目前在一些权威机构、企事业单位的公司网站出现得比较多。
3. 左右框架型布局
这类网站主要由左边栏和内容区组成,组成比较简洁,主要用于精彩内容的呈现,主要是很多个人站点、博客的首选。
4. 上下框架型布局
这类网站由上下边栏组成,上边栏用来放置logo和链接等信息,下边栏用来放置网页的内容。上下型网站经常用来进行个性化展示,在企业门户网站的公司展示中也比较常用。
5. 标题正文型布局
这类网站的布局结构由上边栏和内容区组成,上边栏用于显示文章的标题。主要用于显示文章的标题,内容区放置文章的内容,这类布局在一些论文、学术网站的设计中比较常用。
网站设计都不会单独使用以上列出的某一种布局结构,而是通过混合使用多种布局结构来实现自己想要的效果,这类布局通常称为“综合性布局”。
四、网站页面设计
网站页面是网站的最终表现形式。网站页面内容的质量度和页面的美观度来决定。页面设计应该遵循的原则如下:
1.符合企业的行业属性和企业特点。客户打开网站能直观感受企业所传递的理念和特征。
2.符合用户的浏览习惯。根据网站内容的重要性进行排序,让用户花最短的时间能够找到自己需要的信息。
3.符合用户的使用习惯。将用户经常使用的功能放在网站的醒目位置。
4.图文搭配。
5.利于搜索引擎优化。减少图片和动画,多使用文字描述,以便于搜索引擎收录,让客户更容易找到你。格子网络解答。
网页的主题
网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为“网络商标”,也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。企业网站设计显得极为重要,下面是一些网站设计中应注意的原则。
一、 明确建立网站的目标和用户需求
Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径,因此必须明确设计站点的目的和用户需求,从而做出切实可行的设计计划。要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析,牢记以“消费者(customer)”为中心,而不是以“美术”为中心进行设计规划。在设计规划之初同样考虑:建设网站的目的是什么?为谁提供服务和产品?企业能提供什么样的产品和服务?网站的目的消费者和受众的特点是什么?企业产品和服务适合什么样的表现方式(风格)?
二、总体设计方案主题鲜明
在目标明确的基础上,完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位,规划网站的组织结构。 Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法,提供华丽的图像、闪烁的灯光、复杂的页面布置,甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。 要做到主题鲜明突出,要点明确,以简单明确的语言和画面体现站点的主题。调动一切手段充分表现网站点的个性和情趣,办出网站的特点。Web站点主页应具备的基本成分包括: 页头:准确无误地标识你的站点和企业标志; Email地址:用来接收用户垂询; 联系信息:如普通邮件地址或电话; 版权信息:声明版权所有者等。 注意重复利用已有信息。如客户手册.公共关系文档.技术手册和数据库等可以轻而易举地用到企业的Web站点中。
三、网站的版式设计
网页设计作为一种视觉语言,要讲究编排和布局,虽然主页的设计不等同于平面设计但它们有许多相近之处,应充分加以利用和借鉴。 版式设计通过文字图形的空间组合,表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处,才能使整个网页生辉。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来,特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果,应讲究整体布局的合理性,使浏览者有一个流畅的视觉体验。
四、色彩在网页设计中的作用
色彩是艺术表现的要素之一。在网页设计中,根据和谐、均衡和重点突出的原则,将不同的色彩进行组合.搭配来构成美丽的页面。 根据色彩对人们心理的影响,合理地加以运用。按照色彩的记忆性原则,一般暖色较冷色的记忆性强;色彩还具有联想与象征的物质,如红色象征血、太阳;蓝色象征大海、天空和水面等。所以设计出售冷食的虚拟店面,应使用淡雅而沉静的颜色,使人心理上感觉凉爽一些。网页的颜色应用并没有数量的限制,但不能毫无节制地运用多种颜色,一般情况下,先根据总体风格的要求定出一至二种主色调,有CIS(企业形象识别系统)的更应该按照其中的VI进行色彩运用。
在色彩的运用过程中,还应注意的一个问题是:由于国家和种族.宗教和信仰的不同, 以及生活的地理位置.文化修养的差异等,不同的人群对色彩的喜恶程度有着很大的差异。如:儿童喜欢对比强烈.个性鲜明的纯颜色;生活在草原上的人喜欢红色;生活在闹市中的人喜欢淡雅的颜色;生活在“沙漠”中的人喜欢绿色。在设计中要考虑主要读者群的背景和构成。
五、网页形式与内容相统一
要将丰富的意义和多样的形式组织成统一的页面结构,形式语言必须符合页面的内容,体现内容的丰富含义。 运用对比与调和、对称与平衡、节奏与韵律以及留白等手段,通过空间、文字、图形之间的相互关系建立整体的均衡状态,产生和谐的美感。如对称原则在页面设计中, 它的均衡有时会使页面显得呆板,但如果加入一些富有动感的文字、图案,或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素,要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的,很多时候都需要将它们结合起来,表达完美的设计意境。
六、三维空间的构成和虚拟现实
网络上的三维空间是一个假想空间,这种空间关系需借助动静变化.图像的比例关系等空间因素表现出来。 在页面中,图片、文字位置前后叠压,或页面位置变化所产生的视觉效果都各不相同。图片、文字前后叠压所构成的空间层次目前还不多见,网上更多的是一些设计比较规范、简明的页面,这种叠压排列能产生强节奏的空间层次,视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生的空间关系,以及疏密的位置关系所产生的空间层次,这两种位置关系使产生的空间层次富有弹性,同时也让人产生轻松或紧迫的心理感受。 现在,人们已不满足于HTML语言编制的二维Web页面,三维世界的诱惑开始吸引更多的人,虚拟现实要在Web网上展示其迷人的风采,于是VRML语言出现了。VRML是一种面向对象的语言,它类似Web超级链接所使用的HTML语言,也是一种基于文本的语言,并可以运行在多种平台之上,只不过能够更多地为虚拟现实环境服务。
七、多媒体功能的利用
网络资源的优势之一是多媒体功能。要吸引浏览者注意力,页面的内容可以用三维动画、FLASH等来表现。但要注意,由于网络带宽的限制,在使用多媒体的形式表现网页的内容时应考虑客户端的传输速度。
八、网站测试和改进
测试实际上是模拟用户询问网站的过程,用以发现问题并改进设计。要注意让用户参与网站测试。
九、内容更新与沟通
企业Web站点建立后,要不断更新内容。站点信息的不断更新,让浏览者了解企业的发展动态和网上职务等,同时也会帮助企业建立良好的好象。 在企业的Web站点上,要认真回复用户的电子邮件和传统的联系方式如信件.电话垂 询和传真,做到有问必答。最好将用户的用意进行分类,如售前一般了解.售后服务等,由相关部门处理,使用站访问者感受到企业的真实存在并由此产生信任感。 注意不要许诺你实现不了的东西,在你真正有能力处理回复之前,不要恳求用户输入信息或罗列一大堆自己不能及时答复的电话号码。 如果要求访问者自愿提供其个人信息,应公布并认真履行个人隐私保承诺。
十、合理运用新技术
新的网页制作技术几乎每天都会出现,如果不是介绍网络技术的专业站点,一定要合理地运用网页制作的新技术,切忌将网站变为一个制作网页的技术展台,永远记住用户方便快捷地得到所需要的信息是最重要的。 对于网站设计者来说,必须学习跟踪掌握网页设计的新技术如Java、DHTML、XML等,根据网站的内容和形式的需要合理地应用到设计中。
暂无评论
发表评论