有哪些值得推荐的平面设计自学视频教程,或平面设计培训班,尽在平面设计学习日记网。
当前位置: 首页 > 学习日记 >

自学网页设计,需要了解的网站开发流程

@酷coo豆-头像 酷coo豆 2017-04-23 浏览次数:-
自学网页设计,需要了解的网站开发流程_平面设计自学教程,0基础到精通。系统学习,并掌握平面设计软件,色彩搭配,版式布局。实例包含印刷设计,户外设计,包装设计等平面设计自学视频教程。

小编:搭建一个功能完善的网站,从构思到上线,离不开各职位成员的共同努力。作为一个准网页设计师,提前了解网站开发的流程,有助于在团队协作中更好的配合。通常情况下,任何一网站的建立,都会经过“策划—交互—视觉—前端—后端—测试”六个环节,其中网页设计师的核心任务则落在了“视觉设计”这个板块。接下来@酷coo豆 就简要的谈谈每个环节的大致工作内容。

自学网页设计,需要了解的网站开发流程_系统全面的平面设计培训、自学教程推荐,尽在平面设计学习日记网(www.xxriji.cn)

【声明】本文为@酷coo豆原创文章,首发于平面设计学习日记网xxriji.cn)与知乎网,你可以直接分享本文到微博或其他平台,若需商业转载或用于培训请联@酷coo豆获得授权。(我已委托“维权骑士”(http://rightknights.com)为我的文章进行维权行动)。

搭建一个功能完善的网站,从构思到上线,离不开各职位成员的共同努力。作为一个准网页设计师,提前了解网站开发的流程,有助于在团队协作中更好的配合。通常情况下,任何一网站的建立,都会经过“策划—交互—视觉—前端—后端—测试”六个环节,其中网页设计师的核心任务则落在了“视觉设计”这个板块。接下来@酷coo豆 就简要的谈谈每个环节的大致工作内容。

自学网页设计,需要了解的网站开发流程_系统全面的平面设计培训、自学教程推荐,尽在平面设计学习日记网(www.xxriji.cn)

1. 策划阶段

每一个网站的建立同时,都伴随着诸多尚未解决的需求。为什么要做这个网站?是制作之处需要想到的问题,无论是为了宣传业务、提升业绩,还是表达观点、传递价值,一个网站都会承载着诸多的功能需求。那么,在策划阶段,就要围绕着需求及功能点,将其一一解析出来,并整理成册为:PRD产品需求文档。通常这部分是由产品经理(PM)完成,需要在与客户详细交谈过数次后,才能一并输出。如果项目中途突然加个需求,程序和设计的心里一定会很难过的,所以一个新站的策划初期,至少要考虑到未来2~3年,网站的功能添加的可拓展性。

2. 交互设计

这一阶段的工作通常由专业的交互设计师来完成,当然也时常可由产品经理兼职。 交互设计师得根据解析出的PDR需求文档,合理地组织网站框架,建立一级、二级导航栏目,规划网站内页的浏览路径,以及页面跳转关系。通常会用到Sketch(相关教程:http://t.cn/RIz5S0B)、或OminiGraffle、mindnote等软件来梳理页面逻辑及框架结构,以完成交互设计稿的绘制。以便网站受众在浏览过程中能高效、愉悦地获取到他们想要的信息。如果是页面不多,可在白板上或几张A4中完成这个环节的工作;页面巨多,则要将交互稿整理出图,打包为电子手册,方便下一工作环节的实施。

3. 视觉设计

现在该网页设计师正式出场了,这一环节中,设计师主要根据交互设计稿,确定网站内页的具体设计规范,包括网站颜色VI的选用、字体字号大小、以及素材的编排、选取及处理、每一根线条、每一个像素,都是由作为准网页设计师的你来把控了。将所有页面的视觉稿设计完毕后,标注好尺寸、颜色等数值信息,输出必要的图片、icon等资源,打包好后一并交给Web前端工程师。

自学网页设计,需要了解的网站开发流程_系统全面的平面设计培训、自学教程推荐,尽在平面设计学习日记网(www.xxriji.cn)

4. 前端制作

这个环节的主角是Web前端工程师。其主要根据网页设计师出具的设计稿,运用HTML(相关教程:http://t.cn/RI7Q0g7)、CSS代码实现页面重构和页面逻辑跳转,运用JavaScript、JQuery等技术优化网站浏览体验,以及网站界面交互动效、功能实现的制作。相信你的程序员哥哥定能给你办得稳妥妥的,当然在这个过程中会遇到些许问题,作为网页设计师的你要及时与之沟通,一起将界面的细节做到99%还原设计稿。那么 @酷coo豆 平时上班时,程序员哥哥就坐在我的旁边,上班交流,开小差,那简直是亲切得很啊!!!哈哈哈...

5.后端制作

实现后端数据的逻辑处理,比如数据的提交存储、更新修改、查询等。这个环节的主角是Web后端工程师,通常要用到PHP、java、C语言或C++等编程技术。作为网页设计师的我,对于这一环节的工作是持仰望态度,无法展开来讲了。

6. 测试上线

在网页重构及后端制作完成后,将代码模板套入CMS(即:内容管理系统)完成本地测试,以检验其可靠性。在排除bug问题后,就可准备上线了。买个域名和服务器,做些必备的服务器配置工作,完成DNS解析,将域名和服务器连接起来,最后再运用FTP工具上传资料到服务器。于是该网站就可以正常访问了。

实操案例

@酷coo豆 在去年的工作中,公司网站经过了一次大的改版。我所在公司是传统实业型,网络部门的技术人员不多,在协作过程中主要有:经理、设计师、程序员三个角色。其中功能需求由经理提出,其负责策划、交互事宜。以口头阐述及Word线框图为主要沟通方式。而我(设计)则主要负责视觉稿的输出与素材处理,与程序员间的沟通以图片、标注文档、及口述为主;程序员则负责了前端制作以后的所有工作。在办公室里程序员在左、我在中间,右边是经理,这样位置安排刚好符合工作流程,且有助于沟通效率的提升。

自学网页设计,需要了解的网站开发流程_系统全面的平面设计培训、自学教程推荐,尽在平面设计学习日记网(www.xxriji.cn)

因为是在小公司,在工作对接上没有太多的规范标准,不过大家在一起合作还是蛮开心的。去年在程序员哥哥的的技术熏陶下,@酷coo豆 重拾了曾学过的前端知识,尝试着做了「平面设计学习日记网」用作分享自学平面设计相关的经验及资料,也算是去年独自完成的一个大工程吧。

第一次尝试着用代码去100%的还原自个儿做的设计稿,让我习得了更多团队协作需要注意的细节问题。在设计上虽然还有很多提升空间,但在做过之后,总能比光想不做学得更多。2017,新的一年开始了!希望今年的你我,都能在自学设计的路上取得更大的进步!

如果你正对网页设计感兴趣,想要自学前端和设计,@酷coo豆 整理的网页设计自学教程也许能够给助你一臂之力:http://www.xxriji.cn/career/7.html,赶紧get一下,自学的走起!

——

以上就是@酷coo豆 整理的有关“自学网页设计,需要了解的网站开发流程”的全部内容,欢迎在留言区留下你的评论,一起交流学习。更多有关“自学设计”的话题,请持续关注「平面设计学习日记-知乎专栏」。

您所看到的,也许正是别人需要的,感谢你将本文转发到微博、微信!

(完)

版权声明

作者:@酷coo豆 ,公众号:followdesign;

原文地址:https://zhuanlan.zhihu.com/p/25097044

本文由@酷coo豆 原创,首发于「知乎专栏」与「平面设计学习日记网」。非商业转载请注明作者、原文地址,若需商业转载或用于培训转载请联@酷coo豆 获得授权。

>>关于平面设计学习日记网
平面设计学习日记网xxriji.cn)”是一个发布分享平面设计自学教程和分享设计经验的学习平台。为零基础自学平面设计的小伙伴提供快速入门的资源参考。让学习有路可循,成长更加高效。
>>平面设计教程资料推荐
平面设计自学视频教程:市面上最为系统全面的平面设计自学教程体系:http://www.xxriji.cn/career/9.html
设计师必备的阅读书单:百万设计师热心推荐的设计类图书目录。http://www.xxriji.cn/books

您的打赏,将用来升级服务器,感谢!

职业路径