易搜百度贴吧排名 让客户更容易搜索到您!

立即致电:4000-340-360 体验易搜百度贴吧排名为您带来的高效服务。

当前位置:易搜网络技术公司 >> 百度排名 >> 百度贴吧排名 >> 浏览文章

设计师怎样学习网站开发

文章标签:设计,设计师,怎样,学习,网站,站开,开发

  创业项目优选 好项目来招商 ,点击入驻!

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

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

  1. 计划

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

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

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

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

设计师怎样学习网站开发

首先要确定导航网站的排布体例,导航栏的位置。根据大多数这类导航网站和我本身的体验来看,最好的交互应该是左侧固定全局的导航栏体例,由于导航的内容条款会特别很是多,不适合做顶部导航或者可收缩式的导航栏。固定的全局导航可以让用户能够快速选择并且定位到本身必要的内容位置。

 

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

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

设计师怎样学习网站开发

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

设计师怎样学习网站开发

 

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

设计师怎样学习网站开发

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

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

关于结构图的写法大家可以根据本身的必要去写,我风俗用思维导图的体例记录,关于怎么做思维导图大家可以去知乎科普,照旧那句话,我们的目的就是要让这些图能表达出本身的想法就行。4. 交互UI设计这里作为设计师来说,就是很擅长的事情了LED灯笼,我这里网站结构特别很是简单,为了节省时间并没有去用软件画线框交互稿,但是最基本的线框图照旧要在纸上简单绘制,让本身对设计的网站有个也许的框架。

设计师怎样学习网站开发

后台管理体系界面设计,后台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. 总结这篇文章是写给设计师看的,其实设计师一小我去做一个网站也不是很难,虽然接触的东西比较多,但是设计师通过这些东西可以本身掌控一个项目,而且入门的学习成本并不是很高。信赖许多设计师是可以很容易做到这些的,后续会在出一些系列的文章,感谢大佬们看到这里。