培训首页  >  网页设计师新闻  >  网页设计师的工作流程是什么?

网页设计师的工作流程是什么?

来源:

上海非凡进修学院

    发表于:2021-12-16 08:52:15   459次浏览

虹口区Web前端设计培训学校:网页设计师的工作流程是什么?
网页设计师的网站项目流程可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。
一、网页设计原型图阶段
原型图阶段中设计师需要和产品经理沟通需求,这时要注意,并不是产品经理向设计师下发需求,而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式,这时需要在设计之前与产品经理达成一致。
二、网页设计视觉稿阶段:
视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了,在设计网站的时候,我们需要一些图像和灵感的素材。比如做世界杯专题时,我们除了收集很多素材之外,也可以设计一个“情绪板”(Mood Board)。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起,这样可以更好地指引我们整个需求的设计主题和大体感觉。另外,很多网站的头部通常需要主视觉来抓人眼球,这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等,那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性,这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等,然后根据这些要求完成页面信息部分的设计。总之,设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。
三、网页设计规范阶段:
当视觉稿通过后,很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范,设计规范就是所有页面中共性的东西,比如说字体不同的大小、图片的尺寸、按钮的样式等,这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己,在用户有限的记忆力中减少思考的成本。同时,设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后,设计规范对于设计师个人来说也是对项目影响的一个佐证,可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做?其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有:字体规范、主体色规范、图表规范、图片规范等不同分类。
四、网页设计切图阶段:
网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握PS软件技能。如果遇到特殊情况需要我们切图时,我们可以使用诸如Cutterman、Zeplin等切图插件中的Web选项为前端切出网站所使用的图片。
五、网页设计前端代码阶段:
前端工程师会用代码重构我们设计的页面,把图纸变为静态页面。然后和后端工程师对接调取数据接口,一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据,也会进行埋点。埋点就是在页面代码里插入一些统计代码,方便我们之后确定哪些页面访问量高,哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等,这里省略。
 六、网页设计项目走查阶段:
网页设计完成后还需要设计师进行项目走查,来确定网页还原度是否有问题。如果发现有和设计稿出入很大的,就需要要求前端工程师进行调整。这个步骤非常重要,因为网站的成品才是我们最终的输出,不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。
 
非凡教育
Web前端网页设计培训班就业机会多,并结合当下前沿的Web前端网页设计技术开发出与企业工作高度相近的项目实训课程,定期优化课程。Web前端网页设计培训技术点覆盖广泛,除基础知识点外,还包括更深层次的Web前端网页设计技巧,还有完善的就业服务做后盾,让你能够实现就业梦想,感兴趣的同学可以提前预约Web前端网页设计培训班的试听课程!

文中图片素材来源网络,如有侵权请联系删除

文中图片素材来源网络,如有侵权请联系删除
  • 平面设计师
  • UI设计师
  • 室内设计师
  • 动漫设计师
  • 服装设计师
  • 规划设计师
  • 零基础
  • 有PS基础
  • 有AI基础
  • 有CAD基础
  • 有PR/AE基础
  • 其他软件基础
  • 周末班
  • 全日制白班
  • 随到随学

热门课程

  • 美工设计实战班

    询价

  • Adobe平面软件培训班

    询价

  • 上海广告设计培训班

    询价

  • 上海PS修图培训班

    询价

  • 上海平面设计软件全科班

    询价

在线课程顾问

预约试听

只要一个电话

我们为您免费回电!

马上预约

温馨提示