网页设计流程中常见问题分析及建议
网页设计流程中常见问题分析及建议
从和客户沟通了解客户需求到画出草图进行构思和创意,直至打开Photoshop完成整个的设计,每一个网页设计师都在每一个新的设计项目中不断重复这个过程。整个看上去规范而流程化的工作方式似乎按部就班就能够顺利拿到
让大家都满意的结果,但其实在每一个步骤中都存在难度,某一个方面没有做好,可能就会影响到最终设计稿的质量。因此在这篇文章中我就来结合自己的设计体会谈谈这其中
存在的常见问题,以及我们应该如何有意识的避免或者解决它们。
这篇文章中的内容我已经在SDC的网页设计讲座中和大家谈到,这次算是对整个讲座内容的总结和归纳,如果大家需要查看讲座当天的文字记录,欢迎加飞鱼的声纳的QQ群:233898966。关于网页设计中的问题,我总结了个人认为常见的六个,下面一一道来。
问题一、和客户沟通的不够充分,导致设计方向出现偏差。这个问题是在设计流程中出现最多,也最容易导致客户和设计师产生矛盾的问题。最终的结果是客户觉得怎么修改设计都不能让自己满意,而设计师却不胜其烦,认为客户太难说话,原因其实就出在双方的沟通上。
作为客户来说,很多时候他们对于期望的设计产品脑子里往
往只有模糊的概念,只能交代给设计师一个过于粗略的设计方向,甚至有些客户提出”先做一稿出来我再看”的要求。遇到这种情况,设计师要清楚客户自己的设计需求是不明晰的,而作为设计师来说,这时就需要积极地引导客户,使他们明晰设计需求,从而避免由于双方未在设计目标和期许上达成一致,造成设计方向上出现偏差,而导致设计中大范围、不断的修改设计稿,甚至一遍一遍的推倒重来的结果。
要使双方对最终的设计都满意,就需要尽可能详细的沟通,客户和设计师之间理解程度越高,最后达成的一致性也越高,这两者是呈正相关的关系。要做到这一点,我个人的方法是在沟通的环节设计系统的调查问卷让客户作答,以帮助客户梳理、明晰设计需求。下面是我经常使用的调查问卷内容,其中需要客户作答7个问题,这些问题基本可以帮助客户和设计师明确设计方向,你也可以依据在和客户沟通中的具体情况修改或者完善这些问题。
1、当访问者访问你的网站的时候,你希望它们做什么?(比如购买某种产品、服务,或者展示企业的形象等)
2、网站的主体用户是哪部分人群?(白领年轻女性、有某方面需求的老年人等)
3、网站的整体风格是什么?当访问者进入你的网站,你希望他们有什么感觉?不希望他们有什么感觉?
4、举几个你喜欢的网站,并说明原因;例举几个你讨厌的
网站,也说明原因。(请将网站链接或者截图粘贴在下方)
5、网站栏目有哪些?并提供具体信息内容(可粘贴在下方)
6、请提供网站设计的资料,包括logo,公司图片,产品图片等(打包以附件形式发送至设计师邮箱)
7、请提供您的联系方式。(QQ、手机或者邮箱)
问题二:跳过网站功能及信息架构上的研究,直接开始视觉创作。
网站的功能和信息架构是网站的核心,一个网站不是单纯的让访问者去感受视觉上的美观,美观永远是第二位的,而功能性却是第一位的。一个企业网站是为了展示企业的形象、售卖企业的产品和服务;一个门户网站是为了更好的提供信息内容,一个个人博客是为了分享个人的观点,树立个人品牌等等,保证了这些功能更好的实现了之后才应该去考虑视觉上是否美观的问题。
我在之前的一篇文章《从千鸟志看网页设计中的功能性》中分析过千鸟的个人博客在功能性和用户体验方面的优点,虽然初次打开该博客并不会被它看上去似乎没怎么设计的灰
白界面所吸引,但这个网站良好的用户体验却一定会让你记忆深刻。
更重要的是,网站功能以及它的信息架构对于视觉是有非常重要的影响的,这点我在《网页核心内容对视觉表现的影响》这篇文章中有较为详细的论述,在这里就不再展开了。
问题三、缺乏对网站整体风格的思考和把握,做到哪里算哪里。
这个问题也非常常见,以下是一个设计师发给我的问题及我的答复,应该说非常典型的反映了这个问题。
“想请教你一下,一个学校的网站,客户说要做活泼一点,怎么搞呀?我设计了一个头部,我发给你看一下啊!指点一下但是下面我就不知道怎么布局了,现在头都想大了。”答复:这是一个没有系统的考虑整体风格而急于动手的例子。问题主要由以下几个方面:
一、布局上,Banner割裂的边缘限制了视线的拓展,显得死板而不够透气。其他元素也是大框套小框的思路。总体的布局思路没有逃脱条条框框的限制,看得出来,整个设计是思路没有打开却急于动手的表现。要做到活泼的设计,不是用一张现成的关于儿童的图片放上去就行了,要让个的设计元素往这个方向走,比如布局,比如色彩,比如质感,比如插图和图标的使用,比如字体的选择等等,所以你的问题是完全没有系统的思考这些问题,还没找到答案就急于往前走,结果肯定是刚刚开始就感觉无所适从。
二、再来说说具体的问题,Banner的设计在整个页面中通常起到非常重要的作用,是视觉的焦点,先不说你选的这个图片方向对不对,但这个设计看上去过于小气,原因是图片中的元素视觉比重都差不多,没有重点,没有主次。其次是Logo
文字以及宣传语文字的设计,感觉太散、太单薄,需要加强他们的视觉比重和气氛感受。Banner底部的弧形边缘不仅没有起到给整个气氛加分的效果,反而割裂了Banner的设计,看上去很不美观。
如何避免盲目开始,途中无从下手的问题出现?很简单,画草图。虽然我个人有时候也会省略画图的步骤,但每次至少会在PS 中做一个主页的设计方案,其中包括需要放置的信息内容、排版、色彩方案以及设计方案的说明文字。但我发现相较于纸和笔来说,这样的方式还是限制了创意的拓展。所以还是强烈建议大家在开始设计之前画草图。很难想象,不通过画草图的方式能做出来下面的设计效果。
但是纸和笔的方式也有它的缺陷就是在设计排版方面不能
精确的定位元素的空间。所以为了弥补这个缺憾,建议大家使用960 像素网格系统的草图稿纸。纸和笔的自由保证了创意的拓展,而不用纠缠于实现方面的技术问题。
下载
另外,在平时的学习积累中,多从整体风格上分析优秀的设计作品是如何考虑和实现的,可以尝试从以下几个方面分析网站风格:一、概念元素:背景、修饰图形等;二、具象元素:文字、照片、插图、图标图形;三、关系元素:方向、位置、空间、重心;四、交互方式:节奏、运动方式;五、色彩方案。
问题四、设计过程中遇到困难,随意调整设计方向。
画好了草图就要按照设计方向坚决执行,这样才能保证前期的创意阶段的工作不被浪费。很多设计师前期的创意构思都很有想法,但是一旦开始设计,途中遇到寻找素材或者技术方面的困难,或者突然发现某一个素材很不错,很漂亮,马上抛弃前面的整个创意,开辟一条新路从头开始,但往往做到半中间就再做不下去了,导致设计总是半途而废,情绪上不断受挫,焦躁不堪。而我们如果看过高手的设计过程,比如文子的光大银行的设计视频,我们就会发现高手从来都不轻易的改变已经设定好的设计方向,并且总能把我们看来完全用不着的素材变废为宝,从而拥有化腐朽为神奇的本事。千万不要花费大量时间去寻找完美的、拿来不用调整就能用的设计素材,能找到这样的素材的几率比中彩票还要低,而是要不断提高我们将看上去和整体设计毫不搭边的素材融
合进整体设计的能力。
问题五、细节不够讲究,显得粗糙。
一些设计师给我发来个人作品让我给说说建议,我发现其中共同存在的问题就是设计中细节做的不好。渐变和高光过于生硬、阴影的距离和不透明度太高、对齐方式偏差几个像素、上下左右边距距离太小、元素和背景的反差不够造成元素清晰度不够等几个问题是常见的设计毛病。这些问题虽然也涉及到技术的问题,但是最重要的我认为还是用心不够、认为
做到差不多就行了的态度问题。这里我向大家推荐Dribbble 和PremiumPixels这两个网站,这其中的设计作品无论哪一个细节都是非常完美、无可挑剔的,下面是我随手从这两个网站中拿出来的作品,大家应该能从这里理解网页设计就是细节的艺术这句话的含义。
问题六、技术不过关,创意无法得到实现。
这个无需多说,只有通过大量的设计和练习才能尽可能多的掌握具体的技术。但是无论是跟着网上的设计教程学习,还是通过研究别人的PSD文件也好,不能做过一遍就过去了,拿我之前翻译的《在photoshop中制作一个飘浮于空中的茂盛的”树屋”》这篇文章来说,你需要通过这篇教程掌握的是如何处理手头的素材,将其融合于整体的场景之中的思路的方法,看看高手是如何通过使用调整图层、自由变换、色彩范围选择等一系列的技术去实现需要的效果,而不仅仅是按照教程做一遍就完了,下次遇到需要自己动手创建场景的时候依然无所适从。如果你已经有了一定的PS基础,我建议多练习些图标和场景的创建,例如下面这个精致的西红柿图标和几个场景的创建,认真研究,你一定能学到很多东西。
原文地址:
https://www.360docs.net/doc/8918322291.html,/web-design-process-analysis-and-recom
mendations/
web网页设计报告
web网页设计专业物流工程学院 班级物流1301 姓名李维源 学号 2016年5月4日
第一部分:实训目的 21世纪是一个信息时代,Internet已经进入人们生活与工作的各方面,而网页作为Internet信息传递的重要载体,其重要也日趋突出。所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力,并且上传到网上去,让更多人认识我,更好的宣传自己。 第二部分:实训准备 通过一个学期的web网页设计课程的学习,我终于明白我们浏览的每个漂亮的网页是怎么做出来的,我也想自己亲手来做自己的个人网站。在做个人网站之前,我做以下准备:理清自己的思绪,想清楚自己的网站设计,做模板,找素材,进行站点的规划和素材、资料的收集,要按照制作网站的步骤一步一步来完成。 第三部分:实训要求 1、主题鲜明、内容充实;颜色清新、舒适、结构合理; 2、导航清楚、栏目合理、层次分明、使用方便 3、设计8至15个页面。内含:用户注册,登录系统,留言系统、统计在线人数,设为首页、加为收藏等动态网页内容。 第四部分:个人网站的总体规划和步骤 1.设计的思路 我的个人网站主要是以绿为主,以淡色为辅。主要是希望所有的朋友看到这个空间能一种和谐、安宁、充满生机的感觉。得到心灵的慰藉! 2.绿色网站的意义 我设计的这个网站主要是给人轻松舒爽、赏心悦目的感觉,让人们置身于一种美丽大自然的意境中,明快而错落的绿,让人仿佛来到青山翠谷。 网站的总体风格 网站的总体风格主要是以绿色为主,以淡色为辅,充满活力,生机。具有个性色彩。 网站的布局其实很简单,主要是做好一个模版,模版做好框架了,那网站就初步形成了,虽然主要框架做好了,但是也不要高兴得太早哦,但是你也要想清楚怎样把整个界面搭配得更具有个性化。首先,在框架的最top要插入一个能体现你个人网站的主图。然后在主图的下面插入按钮导航条,之后下面就插入自己想要的风格,虽然用模版做出来的风
网站制作步骤
网站制作步骤 [ 浏览: 541 次添加人:胡居雄 | 发表于: 2009-5-14 ] 网站随着互联网络的发展越来越普及和深入到每一个行业、每一个人。做网站对于知道的人是很简单的事情,对于不知道的人,显得很高深莫测。其实,做网站的门槛是很低的,只要你想做,很少钱、很短时间就可以做到。对于我们自己,做网站可以随心所欲,充分展示自己。我在这里把做入门级网站的具体步骤告诉你,如果要做大型的网站,这个就肯定不够用了。 第一步:注册域名 什么是域名?域名是Internet上用来查找网站的专用名字,与我们熟悉的地址、门牌号的作用相似。据规定,域名由英文字母(不区分大小写),阿拉伯数字和横杠“-”组成,不能有空格,“-”不能放在最前面或最后面,每个层次最长不能超过67个字母。 互联网上的域名可谓千姿百态,但从域名的结构来划分,总体上可把域名分成两类,一类称为“国际顶级域名”(简称“国际域名”),一类称为“国内域名”。 一般国际域名的最后一个后缀是一些诸如.com,.net,.gov,.edu的”国际通用域”,这些不同的后缀分别代表了不同的机构性质。比如.com表示的是商业机构,.net表示的是网络服务机构,.gov表示的是政府机构,.edu表示的是教育机构。 国内域名的后缀通常要包括“国际通用域”和“国家域”两部分,而且要以“国家域”作为最后一个后缀。以ISO31660为规范,各个国家都有自己固定的国家域,如:cn代表中国、us代表美国、uk代表英国等。 举例:https://www.360docs.net/doc/8918322291.html,(国际域名) https://www.360docs.net/doc/8918322291.html,(国内域名) 互联网地址资源注册管理机构: 中国互联网信息中心https://www.360docs.net/doc/8918322291.html,/ 根据信息产业部授权,CNNIC是我国域名体系注册管理机构和域名根服务器运行机构。CNNIC负责运行和管理国家顶级域名CN、中文域名系统及通用网址系统。 CNNIC是亚太互联网络信息中心(APNIC)的国家级互联网络注册机构成员(NIR)。以CNNIC为召集单位的IP地址分配联盟,负责为我国的网络服务商(ISP)和网络用户提供IP地址和AS号码的分配管理服务。 推荐的知名注册服务机构: 中国万网https://www.360docs.net/doc/8918322291.html,/ 新网https://www.360docs.net/doc/8918322291.html,/ 中国频道https://www.360docs.net/doc/8918322291.html,/ 商务中国 新网互联https://www.360docs.net/doc/8918322291.html,/ 第二步:制作内容 根据自己想要做网站的目的来设计组织网站的页面和内容。 构成网站页面的必备要素:
网页分析报告
高 校 艺 术 网 页 设 计 分 析 姓名 班级 学号: 学院:国际教育学院
一、网站设计 1.1、网站设计的意义 网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求,在教师指导下对学生进行的网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的转化,是对理论与实践教学效果的检验,也是对学生综合分析能力与独立工作能力的培养过程。 因此,加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素有着重要的作用。 1.2、网站设计的目的 1通过综合实训进一步巩固,深化和加强学生的理论知识与专业技能 (1)、进一步熟悉和掌握网站建设的基本流程和技术规范; (2)、巩固运用Dreamweaver网页制作软件制作静态网页的知识; (3)、巩固综合运用Dreamweaver独立设计一个内容完整、图文并茂、技术运用得当的网站; (4)、具备独立撰写实训报告的基本能力; (5)、在网页设计的实践中培养分析问题、解决问题的能力,培养创新能力和团队意识; (6)、培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力,树立自信心; (7)、为今后从事网站开发、维护和管理奠定基础。 1.3、网站设计的任务 1、站点规划,搜集资料。确定网站主题内容,规划站点结构,从网上搜索相关资料(图片、文字等)。 2、进行主页设计。构思主页布局,进行主页标题图片的设计(要求原创),进行主页其余图片的设计和页面内容的录入,最后进行主页的整体优化设计。 3、动画设计。主页动画设计和其余页面动画设计,充分运用所掌握技术,效果好。
网页制作课程设计报告
网页制作课程设计报告 学院: 专业班级: 姓名: 学号: 成绩: 阅卷教师:
目录 1.设计目的 (1) 2.设计思想 (1) 2.1网站整体结构规划思想 (1) 2.2 主页设计思想 (1) 2.3子页的设计思想 (1) 3网页详细设计分析 (1) 4结论 (2)
1.设计目的 阐述该个人网站的设计意图和创意,简单介绍自己的个人网站。 2.设计思想 阐述网站的整体设计思想,包括: 2.1网站整体结构规划思想 要求阐述网站整体结构的选择、设计的思想,绘制网站结构草图。 2.2 主页设计思想 要求对主页的布局思路进行阐述和分析。 2.3子页的设计思想 要求对子页的设计以及网页对象的选取思路进行阐述和分析。 3网页详细设计分析 要求选取一张网页,对网页的设计实现过程进行阐述和分析,详细说明制作该网页的步骤,所使用的网页对象以及该网页对象的操作方法。
4结论 对整个设计报告做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。 一、设计目的 本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素
网页设计与制作期末试题及答案(2)(1)
网页设计与制作模拟试题 一、单项选择题(每空1分,共10分) 1. 客户/服务器系统的最大特点是客户机和服务器( D ) A. 必须运行在同一台机器上 B. 必须运行在同一个网络上 C. 必须运行在不同的计算机上 D. 不必运行在同一计算机上 2. 若需要软件把LAN上的客户机从Internet上隐藏起来,并为客户机执行Web 请求,则下面( D )软件能实现此项功能。 A. Internet Information Server B. Index Server C. Personal Web Server D. 代理服务器 3. 通常一个站点的主页默认文档名是( C ) A. Main.htm B. Webpage.htm C. Index.htm D. Homepage.htm 4. 通常,比较好的建立站点目录的习惯是( A ) A. 在根目录下建立一个总的IMAGE目录放置图象文件 B. 直接把图象文件放置在各栏目的目录下 C. 为各栏目建立一个单独的IMAGE目录放置图象文件 D. 在每个目录下建立一个IMAGE目录放置图象文件 5. 以下有关页面布局的说法正确的是( D ) A. 分辨率越高,可供使用的页面尺寸越大 B. 网页布局与平面设计一样,不受页面大小的影响 C. 页眉和页脚中只能出现文本,不能出现图形 D. 页面布局通常是通过手工设计的,目前还没有相应的电脑软件完成这一工作 6. 以下关于HTML文档的说法正确的一项是( A ) A. 与这两个标记合起来说明在它们之间的文本表示两个HTML文本 B. HTML文档是一个可执行的文档 C. HTML文档只是一种简单的ASCII码文本 D. HTML文档的结束标记