网站运营之间设计一个网站草图

今天晚上的基础课是先设计一个网站的草图,我是西方然后自我介绍就免了,大家都是很熟悉的。今天晚上我们来做讲,这节课的目的其实相对于很多同学来说是非常有必要的,为什么呢?这个课程不管在你的在你之前或者是你有网站,或者是你没网站都需要用到的,为什么?因为我们每建立一个新的网站,我们首先是需要一个设计方案的,对不对?

在设计方案里面,我们离不开的网站草图设计,他是给我们的网站的发展的,或者是我们网站前期它的版面进行一个设计,也就是能够如果是对于网站的改版的话,也是需要先设计草图的,也是需要先设计草图的,因为这个草图它可能会直接决定你网站未来的发展。

为什么?因为我们的网站知道,我们知道一个网站的版面做好,它最他最少他基本上能够为期一年,因为在这一年之中,我们不会对它进行太大的改动,除非是一些些微调整,根据用户体验或者是提到的一些优化的方面来进行一些微调,对它的大大的板块是不会对它进行改动的,所以说网站的草图设计是非常重要的,看似非常简单,那么下面我们就来看一下网站草图设计需要经历过哪一些步骤以及网站草图设计,我们是怎么设计出来的,好不好?

能够很清楚的听到我声音的,大家刷发也可以,刷个一也可以,现在频道里面同学虽然说不是很多,但是会慢慢增多的。还有有问题请大家有问题的话请大家把这个问题积累的课后,好吗?我们下面就来到下一张,这怎么从第二章直接从第二章开始了和PPT,是不是前面还有一张PPT,不管它。

我们网站设计草图,我们首先要做的用户需求研究,然后我们是说要用到哪些工具,我们说是说网站建设草图,我们需要用到哪些工具?

第三步当然了,当然了我们就下一步我们就对动手操作,怎么去画一张网上的草图去设计,然后我们网站草图,这个修改是什么意思?就是我们的网站草图设计之后肯定会,因为它是草图是可以修改的,我们是需要针对他进行一些修改,我们是需要针对他进行一些修改的。

好,我们下面就能够就来重点的去来说一下这几个方面的知识。

网站设计这个是上面提到的,这上面提到的用户需求,我们要根据用户来对我们网站的草图设计,要根据首先是要考虑到用户的需求,在我们考虑到搜索引擎利于搜索引擎优化的同时,我们还必须得考虑用户,如果你忽略了用户只是关注搜索引擎的话,那么你做出来的网站即使是取得了很好的排名,对它的转化率以及什么它都会没有任何帮助的。

我们挂网站草图只有一个原则,站在用户的角度听懂了吗?只有一个原则。等一下,因为我可能县稍微等一下这个网线弄好了,我们只有一个原则,一个什么样的原则?好了,以用户的需求为前提,听懂了吗?以用户的需求为前提,对于纠结对于搜索或者是小人这些事情你们别纠结,我们会是有方案的好,等一下我们客户也可以。

好了。然后我们是依照用户需求,对吧?

所以说我们只有一个原则,还是我前面说的以用户的需求为前提,我们去挂网站的,像对网站的草图进行来进行设计,只要在这个前提上面,我们才能考虑到下面我们才能考虑到下面,考虑到下面的问题,我们网站草图设计,我们可以用哪一些工具在这里?

在这里网站草图设计需要用到哪些工具,请大家注意一下,别扯淡了,好吗?第一个可以是ps,也可以是vivo works。也可以是还可以是Excel,听懂了吗?也可以是Excel等等,当然我们还可以使用windows的系统的画图工具,可以使用windows的系统的话,除工具也可以使用QQ的截图工具。

在后面我会有一个简单的工具,我会画一个非常简单的网站设计草图,我们可以来填充里面什么内容,我们先发一个框架对吧?草图无非就是一个框架而已,大家听懂了吗?听懂了给我刷个一,没听懂的课后好吗?只要大部分同学听懂了,因为这是一些规则基础的操作,比如说经常有同学问我老师,我的网站没怎么布局怎么了?

其实这就是一个网站炒作设计,都可以。都可以。你只要能画图的,你甚至可以用铅笔,你甚至可以用铅笔,没话,听懂了吗?甚至可以用铅笔来画。今天不是有一个同学他用铅笔画的,他通过截图然后传给我了吗?那是非常好的。然后网站的草图收取,设计需要设计一个核心,这个核心是什么呢?他还是用户需求,但是它有一个基础点,你的是屏障还是图片上,因为视频上和图片上它是需要视觉冲击的,它是需要有视觉冲击的,这就需要非常专业的在网上的你草图设计出来之后,不管是图片站还是视频站,他都要非常专业的美工做出非常漂亮的图片,然后那个是来给予用户他有一个耳目一新的感觉。

如果是文章上是文章占这文章占它分为两种, how are you?博客类型。他有资讯类型对吧?资讯类型我们都知道它是由一个小板块,它会有一个小板块而得来的。他会而博客段他是用哪一种方式?它是通过这样一种它是博客,但是比如说这里是一个页面,它是通过这个是头部,然后下面通过是一个的文章栏目,它是通过一个小栏目,网页网站栏目形式的这种展现模式给大家予以展现的。

而企业债它是属于哪一种?企业站它是属于图片站,而对于企业站我们是有一个经典的布局的,企业在我们是有一个经典的布局的,大家知道经典的布局是什么样的布局吗?是怎么布局的吗?对,小黄肯定听过,对不对?F型的布局,这小刚他是第一个答出来的,而不行的布局,他是这个APP上面这一横它是导航,而这一束它是我们最重要的,包含一些关键词的内容,不累,而它这一横表示一些什么东西,一些用户能够给用户带来视觉冲击,能够把用户想要找的东西,它只能体现在中间这一横这里对吧?

这是我们所说的企业战的经典布局。

我们所说的企业这样的经验布局,然后下面我就给大家来说一下,你看这个是我刚刚做刚刚做 Ppt的时候,刚刚做 PPT的时候,我就随手用 QQ截图工具画的,用QQ截图工具画的。

比如说其实他已经在我心目中,这个网站它已经在我的心中有一个这样的网站炒作的印象了。已经在我在我的心目中有一个这样的印象,比如说像怎么为文字说明?比如说这里是什么?这里是什么? Logo对吧?这里可以放什么?尤其是对某一些比如说电器维修的一些电器维修的网站,一些搬家的,就是那些需要实时性马上联系到你,能够看到这个东西,我不用去看下面的内容,我就马上能联系到你的网站,最好是电话对不对?

他能够通过网上的联系你,而且在这个位置其实在搜索引擎看来,在这个位置我们用户看它也是一个不起眼的位置,那么我们就可以在这里可以在这里放一个什么?网站地图,对吧?这里是一个网站地图,刚刚谁说谁说的,我没有图没有文字,我们应该怎么去弄?

这不就出来了,对不对?当然我会在每一个板块给你们进行详细的讲解,像孔子提的这是差m2o还是htm2,这个是随便你,你可以给他们两个都做账,可以给他两个都做上对不对?

好了,那么我们这个顶部给它解决了,顶部可以解决了,那么我们在这里你想放个什么?你想放个什么?或者我想放一个轮岗图对吧?在这里想放一个1234张的轮转图,对吧?在这里是一个轮转图,在这里是一个轮转图,在这里是一个轮转图,对吧?1234张有他的轮子,123张,这橡皮擦没用。可以。可以服务员等一下,那些问题我等一下都会给你解答,现在大家有问题积累到一定程度,然后我们在课后统一的解答一下。

可能一个问题就都能够解决掉。

好了,我也可以不放轮转图,可以不放轮转图,那么我应该怎么做呢?在这里我可以轮岗投放在这一边,轮转不放在这一边,听懂了吗?这里放了什么?或者是我整个大图,像医疗站的他就喜欢那么弄对吧?像医疗那么喜欢那么弄,可以放个大图,是不是我们的导航就没有了?如果这样一做,我们的导航是不是没有了?其实导航挺简单的,你可以坐在这里,你可以坐在这里对吧?

虽然说我这个可能画的不太成比例,因为是随手一画对吧?可以做成一个这样的导航,可以做成导航,然后这里擦掉这一个大头。它占据1/2平的位置,对吧?它的头部是可以做成一个这样的导航。当然我们也可以我们也可以我们也可以怎么做,我们也可以这样,这些东西导航可以坐到这个位置,这上面做一张门诊图,我这个不成比例的,已经画得被我弄得不成比例的。

也可以放在这个位置,对不对?可以放在下面,档案可以放在下面。这个就是看你怎么想的,你怎么去设计,而不是说根据我们去看一些其他网站,看它的是什么样子的,我们是怎么去设计,这个都是有理,这个都是有理。但是比如说我是想做一个图片站,我想做一个图片站,那么我导航下面是不是我做图片看的话,我导航下面是不是必须都是图片,而不是文字型的介绍,这个位置这么大一块,全部是图片对吗?

这么大一块。

然后给它分割,或者像我们做图片上的话, logo我们全图片对吧?甚至我们只需要有导航就行了。

下面我们都可以给它抹掉,而这些地方我们全部可以给它抹掉做成什么?因为全图片上的话,我们可以给它做成那种瀑布流的,或者就像那种商城站也一样太乱了,图片站它不会太乱,我们是要依据依照自己的网站来进行草图的设计,而不是说任何一个网站都是一模一样的设计。

不是说任何一个网站都是一模一样的设计,那就坑爹了,那就比较坑爹了。

那么我们现在来说一下企业端的经典布局好吗?画的太乱了,我是随手画的,我是随手画的,没有通过正规培训的,不是一个正规培训的美工,这个就能够希望你们太来谅解一下。

大体上我说的你们听懂了没有?大体上我说的你们听懂了没有?有点模糊,小黄有点模糊不要紧,一点点的话我等一下给你详细的解释也无所谓。那好。好。现在就是这样,一个企业站的经典布局,一个企业站的经典布局。好。

我们设定为这里网站是第一屏好不好?设定网站为第一屏,这里是网站的第一屏,对吧?中间这些小小的横线我们可以给它忽略,中间的这些小红线我们可以给它忽略。那么企业债一般都是属于这种对吧?一个这样的形式。一个这样的形式的话,企业上的经典布局是上面是logo,然后这里是导航,这里是导航,这个位置是导航。然后在导航上面放一些什么样的内容呢?不要用。

我相信有很多同学他是明白的,但是你如果不明白的话,我等一下我就给你一个简单的一个非常简单的企业债布局,永春又发了一个也可以,有没有参考网站,有的企业网站我们随手就可以拉来一个参考网站,好吗?随手来一个参考网站,好了。

你看不用他不就发现发出来了,我也需要点一下我才知道。这个网站是我今天有一个同学发给我了,也是差不多的,但是好像不是这个样子。

好了,他网站的草图设计大家然后我用那个标清楚,我用画图工具标清楚,大家稍微等一下我就好的也是随手弄的,可能形状不太规则,他只有允许发送200KB一下,这个这个比较坑爹。

还是以这个网站的为案例看这一下看搞一个小于200的话,然后小于200的就行了。看能不能发送。好,可以了。

好,可以了。大家能打开图片吗?大家能打开图片吗?你看上面这第一个框,在头部,在斑马的上面基本上是符合优化原则的,对不对?但是它在下面如果要按经典的布局的话,他下面分类应该放在哪一边?因为我们知道它从f型的分布,而蜘蛛的抓取也是这么抓取的,我们用户的眼睛去看,它也是从上到下从左到右对不对?而喜欢点击的,他也是这样,是不是我们喜欢点左边的东西?

好,那么他这个是不是有错误?好。他这个是不是有错误?如果按照那种经典布局来说的,当然他这种布局也能说得过去。如果是按照我说的那种比较经典的布局,应该是在左边对吧?它那个栏目应该是要放在左边。而且他这里还出现了一点小小的问题,它这里还出现了一点小小的问题,你看它的右边我们看上去是不是密密麻麻的,我鼠标好像哪里都不好点,有没有这种感觉?有没有这种感觉?

大家看看它右边是不是密密麻麻的点,哪里都不好点。鼠标你是从哪里点他都不感觉到不好,有没有这种感觉大家?有的方案一没有的方案,有没有这种感觉到它的右边?他的俺爸妈以下的右边点哪里都不好点。还有对于那些有密集恐惧症的人来说,其实这是一个非常伤心的事情。

如果把它的一到左边,大家认为是不是会好一点?因为他那个图片对吧?因为黑色的图片,他黑色的图片,他边上是不是有很多白的东西,如果你移到左边就是不是稀释了它的密度?从我们的幼儿园上去看,是不是稀释了它的密度?那样的话是不是会更好,用户去点也好,自己去点也好,你会感觉到好很多,对不对?所以说我们在布局的时候,这一点是要特别注意的。

你如果他刚刚不发,这个可能我要到后面我才会来讲这个东西就是留白,你一定得留很多的空白的地方,让用户让用户的眼球集中于你的某一个链接,对他感兴趣,而不是说他看哪一个都不顺眼的,那就不好弄了对吧?我们是需要他看什么都训练,而不是需要他看什么都不训练。

如果看什么都不顺眼,或者是有些同学他说我的就是这个样子,为什么用户进来了他就走了,其实就是这个东西它是它是一个很重要的原因,这个是一个很重要的原因,留白是一个很重要的原因。

底部的火箭我们不管它,其实对我们来说是它他对我们来说是对用户来说,他想返回顶部就返回顶部。它网站的草图,它的角度来说,它的角度来说是做的特别好。空空的。空空的。你看空空的脚步是做的很好,只是他的腰中间中间那个部分有一点点小小的问题,其他其他事很好了。

那么草图应该怎么画?企业单子草图应该怎么画?基本上都懂了吧?只要看到上面那张图片的,对每一个部分也进行了详细的讲解。大家都懂了吗?我说所说的经典布局就是这个类型,这个样子。懂得三个一还是继续我们前面的套路,懂得刷个一,不懂得刷个二,我脚步什么都不要放,脚步你能放什么呢?小顾就放一个备案,放一个网站的版权不就得了吗对吧?好了,然后我们一继续下一张。

一个完整,我刚刚只说了一个版面,轮转图你就做一些轮转图的位置不就是一个轮转图吗?如果轮转图真正的作用是什么?轮转能真正的作用,我估计这里面没有几个人能说上来,轮转,其实它是真正的作用,不是说只抓不抓得到的问题,不用他说轮转图是一个用户信任度的体现,真正真正做到这一点的没几个人,为什么?

因为它需要专业的非常专业的美工,你整个网站应该他还有轮转图上体现非常重要的,你网上去的核心要在轮转图上体体现出来。

比如说你购买的产品,你的活动,你的什么?为什么?因为做成那种轮转图,它用户它就会我们自己也会他会傻逼的想用鼠标去点一点对不对?他去点不就点到了我们的泪液对吗?就等着他想要了解的那个东西,就想点到他就点到了他的用户需要了解的那些内容的页面。

你们有没有打开那种搜狐或者是网易或者是那种页面,新浪有没有打开过他们的网站或者是腾讯或者是腾讯?他轮岗不是你看到某一条新闻,你是不是想要了解到新闻的内容,会不会去点那轮涨图点那一张图片?跟大家互动一下好吗?你们是不是会想去点一下?我觉得那么既然是这样,在我们的网站上面,我们为什么不能这么做?我们为什么不能做这种体现?体现用户需求的东西,很多人他的轮转图就是为了一个好看,不是说这个不是技术的问题,这个不是技术的问题,比如说你是做活性炭的,我在门诊图上面什么做那种什么以质量求生存,以信誉求发展,用户没有去想去点的冲动,然后做一个很大的厂那个厂图那个厂门对吧?

并不是,所以说我说做到这一点,其实很少人即使是听过今天的课,可能也只有那么一两个同学他会做到。

还有我们一个完整的网站草图要包括哪一些东西?一个完整的网站草图要包括哪一些东西?1个完整的网站草图最少是5个以上的页面,听懂了吗?最少是5个以上的页面,为什么?第一个,我们网上首页的布局应该怎么样给它布局?我们首页第一版第二版应该都要进行什么样的布局?列表页、内容页就有三个页面了对吧?还有两个单页面联系我们,或者像那种对那种单页面。

那种单页面的布局其实相当于一个什么?相当于一个专题,我们需要做的特别好,只要用户点进了我们这个单页面,我们就可能猜想到他可能是想找,虽然说上面也有电话体现,他们找到联系我们,他就可能是有需求了,那么这个页面要做成非常专业的一个完整的网页网站草图,它是要包括这些页面的。

当然了一个完整的草图,怎么把它变为一个真正的网,变成真正的网页,一个专业性的网页,那是那不是我们儿子有所做的事情,对吧?那是程序员和美工,把他们变为现实。然后我们做好草图之后,不是说一出来就我们今天画了,上画了,我就说画好了对吧?

我们挂好了草图,只是首次完成之后,我们应该对它不断的进行完善,在我们的脑袋里面我们要有要有那种这个网站好像形成了一个立体的,在我的脑子里面我就想打开第一个页面,大概是我们可以想象一下它的情景是一个什么样子。

然后他打开他的点,我从从我想象中我就点开那个栏目页,我的网站是这个样子,我点开我的内容页,点开我的单独的独立的页面那种,它应该是一个什么样的点开那种关于我们联系我们的那种页面,它应该是一个什么样子。

那么如果这已经非常完美的事情情况下,那么我们应该怎么去做?我们还是得多听取我们的这一些非常有经验的这一些人的意见。

因为他们往往一个很小的意见是你没有他们一个很小的方面的东西,他是你并没有想到的,你并没有想到的。他为什么会这么说?他肯定是有他的事实依据的,对不对?要么有的人他是经过了很多的操作经验,他有很很多的操作经验,他能够提供很多关于为什么要这样改的数据给你。

那么在这个时候,即使有个时候它是不是那么好看的,它改一下。但是我们也是需要去考虑的,是不是需要这样改?是不是需要这样改?做到这一步了,我们基本上认为网站草图去设计一张网站草图是很容易的,我们大家也可以用铅笔在纸上面写一下,对吧?

画一下,换一下我想做一个什么样的网站,比如说我想做一个企业站,我想做一个博客,我这个版面应该怎么安排,应该做成一个什么样子?

大家能够按照自己的想象,能够画一张这样的草图出来吗?我们从最简单的开始,从企业上开始,好吗?能够画出来的刷个一,知道怎么去画网站的草图了,只要能够大家能够创出很多依赖了,我就基本上这节,课基本上我的目的也就达到了,对不对?以后你们做网站不是说大你好,你给我做个网站,做成什么样子,你这样我也不知道对吧?不会有这种不会有这种情况出现了。

大家如果还有这种情况出现的,你给我发个一好吗?还有这种情况出现的,还不会设计草图的班长张亮,你去扯淡,你的老公也比较好。

然后装修类的不知道怎么做,装修类的陌陌装修类的陌陌你加一下5号姐打老师的QQ,然后等一下。现在我的QQ是这个状态,现在我的QQ是这个状态,因为在我也比较迟的话,我的QQ一般都是这个状态。等一下我上线了你我发一个装修站,就是一个没有做好的装修站,但是它的网站的排名,而且它的空间非常不稳定的。你就画一个那样的给你看一下。对,小芳如果发给你了,网站的草图是我设计出来的。就是那个样子。

然后我们怎么把我们爸的怎么把我们画的草图变为我们想要的网站,它就关于很多的它就有很多的东西,他有哪些东西?他要美工对吧?首先需要美工,然后它变为效果图是只需要美工就行了。

它美工它会把你这种草图,它通过制图它可以给你转换成为一个很好的效果图,然后程序员他会让你这种效果图,他会给你做成一个很好的就是符合你心中那个样子的网站,当然我们前面在最前面我们也说了,我们的网站操作,其实它不是由我们天马行空所想的,我们还是有依据的,对不?然后然后这是什么,然后这是谢谢大家。今天的基础课37分钟圆满结束了。

本站文章均为原创,版权归倪叶明创业工作室所有,不欢迎任何形式的转载和复制,请自重。

最后编辑于:2022/5/19作者:倪叶明创业工作室

倪叶明创业工作室(微信:543890)专注于网络创业12年,操盘过上百个网络项目,拥有丰富的网络项目运营经验。2016年切入知识付费赛道,深耕6年时间,已赋能超过3万+草根创业者,是集项目实战运营与培训一体化的创业工作室。我们的目标致力于帮助10万名草根成功实现互联网创业,赚取网络第一桶金。