商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 建站经验 >

设计师怎样学习网站开发

发表日期:2018-01-14 19:42聚圣源浏览次数: 本文关键词:设计师,怎样,学习,网站开发,写,这篇,文章,的,

  写这篇文章的本意是站在一个设计师的角度,分析设计师在有一个好玩的点子的时候,应该怎样利用所有的资源去完成这个点子在看这篇文章之前大家先看做出来的产品是什么:www.WebStack.cc --这是一个设计师的网址导航网。

  写这篇文章的本意是站在一个设计师的角度,分析设计师在有一个好玩的点子的时候,应该怎样利用所有的资源去完成这个点子,下面我是通过做这个导航网站为栗子,来讲述一个产品从0到1的这个过程和一些个人建议。

  1. 计划

  首先说明一下这个项目我计划是在一周时间做完,实际是差不多7天时间,后面有几天是在完善内容数据。开始之前我会根据定下来的功能需求自己大概估计一下时间,这里就包括产品需求文档、UI设计、前端开发、后台开发、测试上线、内容完善 等。这些对于这个简单的网站来说开发和完善内容用掉了大多数时间。

  因为这篇文章是写给设计师看的,可能除了设计之外的其他工作并不是我们擅长的,但是我们可以不一定要很专业,我们的目的是做一个产品出来,我们只需要知道这个东西怎么做,然后就用最简便的方法去实现,有现成的东西就不去重复搭梯子,有开源的代码就不自己重头码。

  2. 确定功能需求这里要扯一点其他的。在2017年我养成了一个习惯,每天都会抽空看看有哪些互联网新产品出现,不管是App还是有趣的网站。在这个习惯有了一段时间之后我发现我自己收藏了很多很多的网站书签,但是在保存这些书签的时候并没有很好的去按照严格的分类收集,这就导致了后来想起之前看到过的某个网站,也记得当时收藏了,但就是死活想不起来收藏到哪个浏览器分类当中了。

  这里也就是差不多我最初要做这个导航网站的原因(不算是直接原因)。后来我在网上搜集了很多设计师的导航网站,发现在这很多的导航网站中其实产品定位都是有很大不同侧重。这里我们不用出具体的设呢么竞品分析,用户研究这些,大概按照自己想要的方向去做就好,我这里很明确的目的就是要做UI设计师需要的导航网站。后面我收集了大量的导航网站,算是简单竞品分析。如下图

设计师怎样学习网站开发

首先要确定导航网站的排布方式,导航栏的位置。根据大多数这类导航网站和我自己的体验来看,最好的交互应该是左侧固定全局的导航栏方式,因为导航的内容条目会非常多,不适合做顶部导航或者可收缩式的导航栏。固定的全局导航可以让用户能够快速选择并且定位到自己需要的内容位置。

 

  除了导航功能之外还有一个就是让用户提交书签的功能。根据自己的需求和竞品初步分析确定了产品主要功能之后,这一步就ok了。这一步基本可以不需要输出任何东西,只要知道要做的东西即可。3. 需求文档这一步作为设计师,我们来看看怎么去简单快速的输出一些东西。

  PRD文档的编写我们不用按照非常规范的东西去写,但是要让自己能够梳理清楚产品的结构即可。我这里用的是Mindnode和Axure这两个软件。

设计师怎样学习网站开发

我是先在Axure中创建如下图的目录,完整的PRD目录不止是这些内容,但是对于这个小项目来说,我们只需要着重关注产品介绍、信息结构、产品结构这几个方面即可,我的目的就是清楚的梳理产品的逻辑。对于后面设计和开发来说也是必要的。在这个梳理的过程中也会发现很多功能方面的问题,自己也可以在这一步验证产品的可行性。而不是想到一个点子直接开始设计UI界面,这是设计师做产品比较忌讳的。- 产品介绍先看产品的介绍部分,这里用最简单的一句话描述一下产品,这句话要能体现产品的核心功能和面向用户。再做一下简单的用户特征等的简单分析,怎么简单怎么来。

设计师怎样学习网站开发

 

  - 信息结构图在写信息结构图的时候其实是梳理网站逻辑的一个过程,要将产品功能的信息进行一一罗列,你会清楚的知道每一个字段的对应关系,也完全能够确定下来产品的功能结构。在写这个结构图的过程一定要不断挖掘到最底层,每一个产品细节都可以在这里体现出来。

设计师怎样学习网站开发

- 产品结构图产品功能图实际上就是一种结构化的产品原型。我们在梳理产品功能的时候,就会清楚这个功能有哪些表现方式,跳转到什么样的网页上,网页之间的互相关联等。

设计师怎样学习网站开发
设计师怎样学习网站开发

关于结构图的写法大家可以根据自己的需要去写,我习惯用思维导图的方式记录,关于怎么做思维导图大家可以去知乎科普,还是那句话,我们的目的就是要让这些图能表达出自己的想法就行。4. 交互UI设计这里作为设计师来说,就是很擅长的事情了,我这里网站结构非常简单,为了节省时间并没有去用软件画线框交互稿,但是最基本的线框图还是要在纸上简单绘制,让自己对设计的网站有个大概的框架。

设计师怎样学习网站开发

后台管理系统界面设计,后台Dashboard界面在设计之前就有考虑,因为是管理网站的界面,我这里是直接用开源的框架来用,界面风格不用过多设计,网上有很多售卖的前端web UI kit,这类套件能让设计师很快的做出网页,代码方面只需要知道前端基本知识就可以,后台对于界面要求不是很高完全可以直接用框架节省时间,也不用专门去找前端研发同学来做。

 

  下面是后台的部分界面截图:

设计师怎样学习网站开发
设计师怎样学习网站开发

5. 前端开发开发网站对于设计师来说其实是比较难,但是去学习一点前端开发知识是很容易入门的,建议去 慕课网 看一下相关的HTML/CSS课程很快上手,然后用开源框架也能够很快的实现想要的网站效果。我这里用的是XENON这个基于Bootstrap的前端Dashboard UI框架。也有另外一套框架Bootstrap 4 UI Kit- Wrappixel这个UI Kit可以做网页中基本能用到的所有控件效果,但是界面设计的局限性比较大。这类UI Kit是有很多的,不用每个都去用,找一套自己比较喜欢的下载来用一次两次就能很轻松的自己实现网站静态页面开发了。

设计师怎样学习网站开发

在写好页面前端之后,还可以再去看一些基础的网站SEO优化的内容,最简单的方法去买本书来看即可,不用深入,简单入门,知道怎么优化网站title、description、keywords即可,我这里加入了一些facebook、google+、twitter等的分享的标签,在分享网站的时候看到的网页链接就会有小图片显示了。

设计师怎样学习网站开发

加入Google Analytics的代码就可以监测网站访问数据了:

设计师怎样学习网站开发

前端开发在这里基本就ok,如果你做的网站是静态网页,到这一步就可以直接发布网站上线了。

 

  6. 后端开发后端开发这里对于UI设计来说其实是比较难入门的,要学的东西比较多,笔者大学是学的软件开发专业的,毕业之后从事了UI设计的工作,深知后台开发和服务器开发是需要比较多的时间去研究才可以的。所以这部分不建议设计师去花时间搞的,可以找朋友做。我这个项目在前期设计的时候是有后台系统的,直接用开源的CMS框架开发起来其实也是可以很快完成的,但是我后台放弃了,因为这个系统还是比较笨重的,对于导航网站这个项目来说可以不用这么复杂。最后放弃了开发后台系统,改用了纯静态的网站页面。7. 网站上线我们网站设计实现ok之后,怎么让别人顺利访问我们的网站,这里可以自己买域名,买服务器然后上线。这里是需要一定的花费的。

  - 网站域名:可以去万网或者GoDaddy购买

  这里需要一点注意,国内在万网购买的域名需要实名认证,服务器需要备案别人才能正常访问,很多后缀的域名现在暂时不能实名认证所以你就算买了服务器也不能通过备案。在购买域名的时候一定要注意。

  - 服务器:阿里云、腾讯云、百度云都是有服务器卖

  国内独立主机比较贵,学生是有免费主机可以用,有时候买域名也是有送半年服务器这样子的,但是续费比较贵。当然也可以考虑国外云服务器。这个坑也是比较多,需要时间去学。建议用下面的方法。

  - 用Github做静态网页服务器

  这里可以去学一下怎么用github,也是简单入门即可,github注册帐号之后你是可以有一个个人独立主页,这个主页是可以直接通过互联网访问的,例如:viggoz.github.io这个域名地址前面是你的github用户名,你可以在购买了域名之后直接通过CNAME方式解析域名到这个地址即可。

  github的每一个项目也都可以有gh-pages分支,这个分支也是可以直接放静态页面通过外网访问。这个项目是可以有多个项目的,也就是说你可以放无数多个静态页面在这里。但是这些项目的网站并不能当成一级域名地址来访问,他都是包含在你的viggoz.github.io之下,所以这个页面就不能单独进行域名绑定。

  但是,还有但是,通过github你是可以创建多个组织,一个组织是可以有一个官网,一个官网可以像你的github帐号一样解析一个域名的。

  注意:如果这里自己搞不定,也是建议直接找朋友帮忙吧。

  8. 总结这篇文章是写给设计师看的,其实设计师一个人去做一个网站也不是很难,虽然接触的东西比较多,但是设计师通过这些东西可以自己掌控一个项目,而且入门的学习成本并不是很高。相信很多设计师是可以很容易做到这些的,后续会在出一些系列的文章,感谢大佬们看到这里。

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/jzjy/9790.html

网站设计案例推荐

热门文章

站长工具综合查询里面SSL证书不...

SSL证书不安全是怎么回事?但是点进去这个提示后,显示的是别人的tdk是不是被劫持或者被黑了?...

日期:2018-03-27 浏览次数:1882

简洁而实用的版权信息可增色网...

打开网站,人们自然会从上往下浏览,首先映入眼帘的一定是BANNER主视觉,然后是网站主体内容部分。相比较而言,注意到网站底部版权信息的浏览者确实不多,但这并说明网站版权信...

日期:2018-03-05 浏览次数:1876

网站设计需要注意的3点问题...

对于网站设计来讲会受到很多因素的影响,而且不同类型的网站,在设计时需要体现的元素也不一样,比如说对于一个企业网站更想体现出品牌以及产品的特点,主要是对产品、企业信...

日期:2018-02-12 浏览次数:1805

企业网站为什么要改版 改版选择...

网站改版,是每个建站企业必须面临的工作。相信也有不少站长问,已经做好的企业网站,为何还要大费周章重新进行改版设计呢?下面小编就来给大家说说,企业究竟为什么要改变,并...

日期:2018-03-26 浏览次数:1333

永城网站制作:模板建站不可不...

随着互联网建站尤其是自助建站热潮不断高涨,建站行业涌现出越来越多的自助建站平台,这些平台普遍都提供网站模板可选。...

日期:2018-04-30 浏览次数:936

相关文章

请指引我们前进的道路:全球著...

每个行业都存在着不少"领头羊",他们总是能够提出好的想法,带来新的改变,对该行业产生深远的影响。这就像摄影界的David Bailey,艺术界的Tracey Emin,他们都是自己行业的"大家",都...

日期:2018-01-14 浏览次数:76

企业商城建设要选择怎样的企业...

随着电商行业的逐步稳定,各大电商企业也在寻找新的突破口,还有许多实力的电商企业,已经选择其他第三方电商服务公司,去搭建独立的网上商城系统。但是,面对搜索结果中众多...

日期:2018-01-14 浏览次数:64

公司网站建设怎样才能跟紧社会...

网站不是什么新鲜名词,对于很多公司来说已经实实在在的运用起来。网站的目的是为别人提供所需的信息,这样人家才会愿意光临,网站才有其真实意义,但有太多网站显然忘了这个...

日期:2018-01-14 浏览次数:65

理解与沟通是蜕变为优秀网站设...

如果说内容是网站的血肉灵魂,那么设计一定是表达其价值的华丽外衣。人靠衣装福靠金装,而优秀的设计就是网站的包装,设计精美的网站总能快速吸引用户注意力,给人以赏心悦目...

日期:2018-01-14 浏览次数:62

前端领域2017年有哪些变化,20...

以下为我在知乎问题「2017年前端有什么样变化?即将来临的2018有什么样的期待?」下的回答,稍作整理分享给大家。如有遗漏欢迎在评论中指出。原文如下: 在即将过去的2017年里,我们...

日期:2018-01-14 浏览次数:63

随机推荐

配送小哥福音!江湖外卖O2O系统...

2017年新环境下如何做好网站友情...

装修系统又添新姿势,你确定不...

快速搭建一个“一元云购”商城...

高性价比的美国虚拟主机BlueHo...

H5建站让企业网站变身移动秀场...