想必大家也会遇到这种情况，要做一个项目，产品经理说产品原型图已经画好了，让我们去找一下素材，调一下颜色，看一下像素，把这个原型图整体装饰美化一番，然后就把我们叫做美工。
我很不喜欢这种称呼也很反对这种看法，其实像我们这种前端设计师应该成为懂美术和用户体验的产品经理，即时是装饰美化也要注入产品的灵魂和思想在里面。
其实设计师是在改善产品的表征，同时在把更多的产品信息传递给用户，通过不同元素的排列布局把产品的核心价值传递给用户。
设计师应该把自己和产品经理一样当成需求方，而不是执行者。用设计的语言展示产品需求，使老板看起来更直观，让技术不用过多的看产品文档就能明白。只有这样，才能让其他环节对你更加尊重，愿意倾听你对产品的建议。
今天就来说说前端设计的那些事儿：
一、什么是前端?
设计就是呈现的过程，前端设计是通过色彩/构图/等元素赋予页面性格和特点，前端也是展现，通过色彩先抓住自己的目标人群，通过设计表现自己。
当然这仅仅是是Web前端设计的一部分而已，这被成为-界面设计。WEB前端设计实际上是网页制作
，经过Web1.0进入Web2.0之后网站的前端由此发生了翻天覆地的变化，网页不再只是承载单一的文字和图片,它除了设计还要掌握开发技术，如：HTML、CSS和JavaScript等。
二、Web前端设计主要分为5个步骤：
1.看需求
2.画草图
3.设计界面
4.前端代码编写
5.兼容性调试。
当然事情并不绝对，除了必要的步骤之外还有一些细节需要去做，设计前与产品经理，视觉分析师，体验师沟通。设计定稿后，就是和后台程序员，测试工程师沟通，并反复调试。
三、扁平化VS拟物化
扁平化与拟物化，作为设计师现在必然要知道的两个词，那么他们本身都有什么样的优缺点呢?
1、什么扁平和拟物设计
扁平化设计(Flatdesign)完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D
效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。
而拟物设计(Skeuomorph)正好相反，他需要加入各种元素的效果，通过不同的效果组合达到模拟要呈现物件外观的目的，以使新的外观让人感觉熟悉和亲切。
2、扁平化与拟物化的优缺点
扁平化设计单独设计起来更容易，突出内容主题，减弱各种渐变、阴影、高光等视觉效果对用户视线的干扰，让用户更加专注于内容本身，并且容易统一设计风格，调整设计方案更加方便。而现在手机平板电脑“横行”的今天，扁平化设计更能支持手势交互，而且它占用系统空间相对较少。
拟物化设计更适合初级人员了来做，这并不表示拟物化设计简单，而正是因为它的复杂所以更适合初级人员来做，可以让设计人员短时间内熟悉各种效果的实现，更好掌握色彩搭配等。并且拟物化设计认知和学习成本低，更能直接的表现出想表现的事物。
相对于它们的优点多多，它们的缺点确是一目了然。拟物化设计更倾向于视觉效果，功能实现很少。扁平化所能承载的信息量太少，会提高用户的学习成本。
四、前端设计如何规范?
(一)前端设计当然应该规范，原因是：
1、为了信息加载更快。
2、有利于后期调适和修改
3、有利项目二次开发。
4、有利于项目交接。
(二)那么前端设计应该如何规范呢?
1、最基本的就是代码规范，整齐、简洁的代码规范更方便后期调试和修改，也方便重用。
2、样式素材归类规范，养成好的素材归类习惯，也是设计规范的一种。
五、设计师应该从什么角度考虑用户体验
一直以来产品的设计都是在讨好用户，或者说是让用户知道什么是适合他的设计，那么我们要从哪些角度让用户知道这些呢?总体来说大致可以分为两种，一种是视觉上给予用户满足，另一种则是在流程引导上下功夫。
细致说来可以分为以下几点：
1、符合产品特点的视觉呈现，并把自己代入用户场景和角色设计布局(地铁中右手使用手机等)。
2、突出的，利于使用的视觉交互体验。
3、用户对产品功能不清晰的情况下，通过视觉表现合理的引导整个使用的流程。
总结来说就是在视觉上引导和取悦用户，在元素布局上让用户使用方便。
以上就是小编今天为大家分享的关于设计型Web前端做什么?都要学习什么的文章，希望本篇文章能够对正在学习Web前端技术的小伙伴们有所帮助。想要了解更多Web相关知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师！
企业-公司等网站开发的基本流程
在生活中我们常常能在手机或电脑浏览器搜索我们问题需求时，往往就会出现成千上万的网页出现在我们面前，那么这些网页是怎么开发出来的，今天来给大家梳理下这些页面是怎么做出来的，做法流程又是什么？
网站建设流程图
第一步：网站定位及需求的确定：首先确定客户需要做哪个行业，是大竞争的行业，还是小竞争行业，这时候我们建议做小而美，在做大而全，慢慢发展排名，也是搜索引擎比较喜欢的做法，如客户要做液压机，而液压机是个大的名词，所以你就会做：液压机厂家，液压机型号等，这样就能降低竞争度，（在这之前要做好行业及数据分析），明白我是做什么的（服务商，厂家，专卖店），我能提供什么产品，我的用户用户是谁（个人，单位，企业），客户会搜索什么关键词。总之反正是单一，专业化网站，排名要好
第二步：关键词挖掘及分析，搜索引擎，确定你要做的词，然后进行分析，如：学车，搜索学车，就会出现（金花工具）下面举个例子：学车
学车价格：学车费用一般多少钱学车要多少钱学费
学车步骤：学车流程步骤-学车流程-学车报名流程步骤
学车咨询：学车哪个驾校最靠谱-学车学自动挡和手动挡哪个好
学车宝典：学车宝典免费下载2021-学车科目一考试题
1.关键词分析：分析我们要做那些关键词首先过滤删除不符合定位的关键词，
2.关键词分类，把同义词，相同意思的词放在一起，层级词进行分类，
3.关键词流量：关键词流量，关键词搜索指数以及需求指数
4.关键词有效性：符合定位，能形成转化，能获得更多客户
5.关键词竞争度：包括指数，搜索数量，竞价价格与数量，同行网站
第三步：网站导航栏目的布局，关键词分类，需求指数分类进行产品、服务的栏目分类，一般产品服务栏目：首页-产品-价格-咨询-案例-问答-关于-联系。上面都是为栏目铺垫w
第四步：网站TDK设置：
标题：关键词1-关键词2-关键词3-品牌公司（29个字符最佳）
关键词：关键词1,关键词2,关键词3(不可关键词堆砌)。
描述：围绕着关键词写出概括性的介绍
第五步：网站空间服务器选购：首先网站空间或者服务器选择哪些知名企业或者品牌，建议选择阿里云，或者腾讯云，华为云，服务品质皆有保障。然后就是服务器大小配置，可根据自己经济选择购买，然后进行相应的设置，（根据他们的提示进行购买环节）
第六步：域名注册及备案：域名注册选择拼音或者英文，不能有汉字，（汉字的域名影响备案），国内选择.com或者.cn，国外可以选择其他的后缀，接下来就是域名备案（提供身份z，营业执照在7个工作日就能办下来，一个小细节不注意，可能会取消备案）
第七步：网站程序选择，SASA建站系统，不存在模板建站，模板网站SEO优化太差，程序可以完全进行个性化设计，seo优化后台全面支持，从首页到文章页，以及公司简介，关于联系都能进行优化
第八步：网站整体设计，进行相应的首页，栏目页，文章页的轮播图以及LOGO和联系方式，营销界面，优势界面，项目产品界面，价格界面，案例界面，公司简介界面等等
第九步：网站整体设计制作好之后就进行网站链接优化和301设置，链接遵循树状结构，扁平化结构，一个关键词对应一个页面，避免过度优化，以及www重定向不带www或一级域名转接到二级或三级域名
第十步：网站内容更新，更新方法关键词库打造以及长尾词写作可根据原创和伪原创，进行多平台整合，图文结合，以及热点咨询，这里要记住图片不要过大，以及图片title和ALT属性都是搜索引擎抓取收录的关键
第十一步：网站代码和网站速度优化：网页使用静态或伪静态，使用DIV+CSS布局，a链接要放在快状里，h1只能使用一次，以及图片的压缩和大小有利于搜索引擎收录和提升网站加载速度
第十二步：网站上线检查：网站安全和robots文件404页面设置与优化，网站安全考虑程序有没有广告和木马侵入，减少页面404页面，以及死链接的监测接下来进行网站域名绑定
第十三步：把网站提交给搜索引擎，每天都去提交一次，加快蜘蛛抓取，以及添加百度统计代码，和网站客服，网站沟通，接下啦就是网站运营推广，以及网站日志分析
第十四步：网站日常文章更新，以及数据分析，转化率的分析，然后加以调整方向
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）