设计
交互设计
视觉设计
Web 视觉设计
交互动效

你是如何设计一个网站的?

梳理一下流程,想要了解工作顺序是怎样的, 概念生成,选色,字体,平面稿,交互稿,动效设计etc.如何安排?
关注者
177
被浏览
101,649

27 个回答

搭建网站的一般流程,大概是这样的。

①策划阶段(确定需求)

②交互设计(完善功能点)

③视觉设计(实锤网页最终效果)

④前端制作(编码重构)

⑤后端制作(优化数据)

⑥测试上线(封装到CMS中)

⑦维护运营(添加内容或推广)

详见我的这篇文章: 《自学网页设计,需要了解的网站开发流程》


以「 平面设计学习日记网」为例

①策划阶段

我在准备制作这个网站时,其核心就是以“平面设计自学者的福音”为宗旨,希望解决初学者自学平面设计时需要的资源难题。所以就策划了职业路径、设计教程设计书籍几个主要栏目,这是学习平面设计补给知识最为迫切的三个需求。以及学习日记栏目,可以用来写写自己的学习心得,满足自己的同时,帮助他人。

用A4纸记下网站的大体框架。

②交互设计

网站的交互设计,整体结构相对简洁明了,层级结构最多三级。没有什么华丽的特效,但是唯一定要确保:鼠标滑过时一定要有明确的反馈,以告诉读者你正在经历什么。


设计书籍栏目


③视觉设计阶段——这是由网页设计师为主导的环节。

【A色彩】

我在设计这个网站时,主题色选用了纯度和亮度都比较高的蓝色(#0f88eb),希望用蓝色寓意设计知识的理性,同时蓝色也是我个人比较喜欢的色彩,所以选用了它作为主色调。

另外,平面设计学习日记网的其他标准色,是在主题色的基础上,通过降低明度、饱和度得到的,分别运用在hover色块、阴影、线框色等场景。

【B字体】

全局字体选用的是最常见的微软雅黑(备选:宋体),因为大家电脑都有,选用这两款字体不会出太大差错。

*{font: 16px/1.5 Microsoft YaHei,宋体;}

不同字号的预设,主要用以拉开页面的层级结构。字重有Blod、normal、light三种状态,在加上色彩的变化,就可以制作出很多种对比变化来,并足够用来表达页面内容的主次关系。

字号预设

【C完善设计稿】

在确定了色彩、字体的规范后,接下来最重要的就是,沿用这样的规范重复执行下去。并逐步细化到字体的行间距(line-height)、字间距(letter-spacing)的调整上。期间有不妥的预设可以适当修改,但是类似的页面之间一定要有相同的规范,确保视觉的统一。

完善后的设计标注稿。

将所有页面设计完毕过后,按照类似上面的方式标注好,交给工程师用以前端重构制作。如果你想要工程师99.9%的还原你的设计稿,那么你标注得越细致越好。

【D关于动效】

动效这玩意,主要是用作优化页面阅读体验的,适可而止、越简单越好。一些个性化的页面可以适当炫酷一点,但主要的内容呈现页面还是越朴素越好。


关于动效

虽然炫酷的动效能够让你眼前一亮,但刻意、反复、过多的动效容易低阅读效率,加重心理负担。而且,工程师的制作成本也会更高。

④前端制作

我敲起代码来,可真是龟速那种,我用一周的时间,完成了前面的策划设计工作,用了两周敲完所有页面的代码。这个过程就是反复输入、测试,然后IE、Google、火狐这三个主流的浏览器,也要测试一遍,确保没太大差异就可放心了。

前端制作。

⑤后端制作

我这个网站几乎没有后端制作部分,一是我对后端语言这块完全懵逼,二是这个网站主要是用来发布内容,不会涉及到浏览者自定义的数据与服务器交换。

⑥测试上线(封装到CMS中)

通过前端制作,一个个的页面倒是能够在浏览器中打开了,但是它们相对是独立的,不便于统一管理组织。所以必须得想办法,把它们封装在一个建站程序里,也就是CMS(Content Management System的简称,译为内容管理系统。)

目前开源的CMS系统有很多,主流的有WordPress、PHPCMS、以及Dede CMS等,由于我早前自学习过Dede CMS对这个系统比较熟悉,所以就选用了它。

DEDE CMS后台登录界面

这个环节主要做的工作就是,修改Dede CMS里面的内容模板,将我们在「④前端制作」阶段重构好的页面,按照Dede CMS模板中的语法规则套用进去,然后登录网站管理后台,在对应的网站栏目中调用。

所有内容封装完毕后,用FTP工具或远程桌面的方式,将整个CMS程序上传服务器,此时你需要购买一个域名,并将域名解析到你的服务器ip地址。

接下来你就可以在浏览器中输入域名,访问到你的网站了。

⑦维护运营(添加内容或推广)

后续工作就是运营推广,让更多的人知道你的网站;做SEO优化,让你的网站对搜索引擎友好;并不断地给网站更新添加内容,传递你的价值。

一个网站的建设,前前后后要做的工作、要学的知识还真是挺多的。不过只要你感兴趣,原意去折腾,制作一个网站也不是什么难事,一点时间和耐心足矣。

我就这样,从设计到代码,陆陆续续弄了两个月,平面设计学习日记网2.0版本,终于在2016年12月25日上线了。。。。。

△这是1.0版本(体验地址: xxriji.cn/diary1.html

△这是2.0版本。(体验地址: http://www.xxriji.cn)


最后

如果你是建站新手,欢迎给我私信咨询,也许我也可以为你解答一些问题哦。当然你也可以去我的网站,去挑选一些适合自己提升学习的设计课程或书籍,比如:

真心希望以上内容对大家有所帮助。


关于我

@酷coo豆,平面设计学习日记网站长,对自学平面设计、以及互联网职业技能,有着深刻的见解。乐于分享自学平面设计的相关书籍、教程、经验等资源参考,希望和你一起进步,欢迎 订阅我的专栏。

设计师必备收藏: 100本人气设计书单汇总。

编辑于 2018-02-12 00:09

在网站设计中,先进行基本网站设计,网页上需要些什么东西,行业不一样,那么网站设计出来也不一样,如果是企业站,一般都都是针对客户需求来进行设计,再根据网站页面结构,进行基础的页面布局、图片和文字的组织处理、程序设计等,那么,具体怎么进行网站建设呢?下面是网站制作的基本流程。



一、网站基本规划

网站规划往往是进行网站制作的第一步,这个“规划”内容通常包含了很多方面,例如选择网站的域名和主机、网站的用途定位、未来的运行发展目标、网站内容大概主题方向、如何进行网站制作、需要采用什么技术,以及网站的推广、维护、安全防范措施的使用等等。这只是有关网站制作的一些基本规划,需要将未来网站运营可能需要考虑的各种各样的问题大概列举出来,尤其是一些相对来讲比较重要的问题,更要尽可能详细地考虑。

二、域名的选择

网站的域名选择也是很有讲就的,很多比较著名的网站在域名上就已经胜人一筹了,目前来说简洁好记的域名很容易受到人们的青睐,也确实比较容易被人们所记住,所以选择域名也是比较重要的步骤。不过现在申请好的域名确实是有难度的,但是使用了好的域名对提高公司和品牌的辨识度有很大好处。

三、确立建站流程

建设网站是一个比较复杂的过程,但是现在市场上建站的技术已经算是比较成熟了,企业可以将这个任务委托给比较靠谱的建站公司,只需要支付一定的建站费用即可。建站流程包括确立建站目标、域名选择、网页设计、程序开发、选择网站服务器空间、本地测试、建成使用。一个好的网站必然要包括稳定的服务器和不错的域名,网页设计和程序开发都相对来说比较复杂,需要用心来处理。

四、有效利用网络资源

网络世界是一个“资源丰富”的世界,大家若想更好地利用起互联网资源,首先就要意识到这个问题。有效地利用起网络资源有助于帮助大家更好地走向更广阔的发展前途。所以网站制作不应该脱离网络本身,工程师要时刻意识到这个问题。

以上就是网站制作的基本流程了,网站制作是在基于域名、虚拟空间、数据库这三个条件并存的基础上进行的,所以要想保证网站制作的质量,它们三者是基础。

编辑于 2019-10-21 13:35

如何让自己的网站设计与众不同呢?你也许需要一些更多的灵感和技巧。


让一个网站看起来酷炫,丰富,具有吸引力。你可以添加多种多样的设计效果和技巧。而视差滚动效果则是其中一个很不错的选择。这里,Mockplus团队精心整理了20多个视差滚动网站设计,希望您在看完这些不错的设计后,也可以使用Mockplus做出同样创意满满的网页视差原型设计。


首先,什么是视差滚动设计呢?

视差滚动,英文为Parallax Scrolling,是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。网页设计中的视差效果的最常见的一种,就是用户在向下滚动页面或跨页面时可以创建3D滚动效果。视差设计如果做得好,将会大大提升用户体验,吸引更多的用户。


接下来,我们一起看看这些优秀的视差滚动网站设计吧。


1.Femme Fatale

Femme Fatale是一家专注于文化,奢侈品,社论和艺术的创意工作室。它包含了精彩的动画互动页面,可以很好的调动访客的情绪。当你向下滚动页面时,页面背景会伴随页面滚动条进行切换,每个页面的背景色各不相同,在页面滚动切换时,页面文本会以不同的速度载入,和页面图像等其他元素形成视差滚动。



Visit site


2.Every Last Drop

Every Last Drop是一个展示生活用水场景的网站,旨在呼吁关注地球水资源,节约水资源。设计师以等比例分割页面进度条,当你向下滚动页面时,您会看到各种不同的生活场景里水资源是如何被消耗的,并且展示水资源使用的占比等数据。每个场景的切换都带有动画视差效果。在其“Universe”页面还增加了3D视差滚动效果。



Visit site.


3.Beer Camp

Beer Camp整个网站页面划分为5个页面层,当你滚动时会有一种“一镜到底”的感觉。并且它的视差滚动效果非常与众不同,它既不是水平也不是垂直的,而是一种平滑缩放的效果。当你滚动页面时,各个层都可以连贯地依次放大到页面最前端。加上明亮的配色和粗放的版式,创造出一种惊人的空间感。




Visit site.


4.Porsche Volution

Porsche Volution完全可以看出设计师对汽车的热爱以及对保时捷品牌的浓厚兴趣。整个页面设计以视差滚动照片的形式展示了保时捷的进化,并且配有高雅的背景音乐,配色惊艳。屏幕左侧有一个时间轴,向下滚动时,可以清晰的看到保时捷的进化历程。



Visit site.


5.Spokes

Spokes Eclectic Pedicab Rides是一个提供停车和公共交通的即时解决方案的网站。这个网站号召绿色生活和经济生活,对以倡导骑车为中心的社区文化有极大的意义。该网站是漫画风格,滚动页面时会以不同进度载入页面元素,具有丰富的视差效果。顶部导航栏的设计也是一个亮点。



Visit site.


6.Hot Dot

Hot Dot和上面的视差例子又不尽相同,它是水平视差滚动。页面从左到右以平滑的3D视差效果推进,页面元素和纯黑色背景搭配具有不错的美感。这个网站也是响应移动优先设计的一个很好例子。页面底部有可点击的CTA,方便用户访问。



Visit site.


7.Hobolobo

这也是一个水平视差滚动效果网站,但它不同之处在于它更适用于触摸设备。但你滑动触摸板时,页面会从左向右移动,以讲故事的方式呈现页面。页面的顶部栏上有一个页面列表,可与页面一起滑动以显示您当前位置。这个网站是完全漫画形式的,最惊艳的是其3D视差效果。



Visit site.


8.Firewatch

Firewatch是一个荒野探险类的设计网站。该网站有6个移动层组成,展现出页面的丰富感和深度感。它的视差效果仅在第一个页面使用,当页面滚动时,元素向上推进,营造出一种3D效果,让我想起《狮子王》里的经典镜头。其他页面都是平滑的静态页面,方便用户读取大量的文本信息。



Visit site.


9.Nizo App

这绝对是我的最爱的视差滚动网站之一。当滚动鼠标时,所有UI元素以特定的不同节奏向页面中央聚集,形成一个排版精致的整体。当鼠标滚回时,所有元素又从中心分离,形象生动,极具动感。整个页面风格干净简单,采用了纯色背景和粗文本。



Visit site.


10.Peugeot

这是一个很酷的网站,当你滚动鼠标时,你会进入一个精彩的故事情景里。它以视差滚动的方式自动播放漫画故事,视差效果会根据故事情节会采用水平或垂直两种展现方式。



Visit site.


11.Bunkai

这是一个日本网站。当向下滚动时,有一个可爱的卡通女孩在页面上移动,页面会根据女孩的位置载入不同的信息。视差滚动效果会在最后一个画面结束,因此您可以阅读所有信息而不会感到头晕眼花。



Visit site.


12.Melanie Daveid

Melanie Daveid会带给你一个数字世界的美妙体验。精致的细节展示和品牌指南使它在视觉上有惊人的效果。滚动时,页面被分成两部分,左侧页面静止,而右侧则继续滚动,形成一种视差。



Visit site.


13.The Boat

这也是通过讲故事的方式展示网站视差设计。The Boat共有6章,每章节以视差幻灯片形式演示了各个不同的情节,移动视差层也有利于创造深度感。我个人也很喜欢这种素描风格的页面元素。



Visit site.


14.Dave Gamache

该视差滚动网站采用纯深色背景。当你向下滚动鼠标时,界面右侧有UI元素淡入淡出。此外,有一款手机会在你滚动时页面时有节奏的旋转。



Visit site.


15.Assemble

Assemble是一个免费的在线的作品集网站,您可以制作出精彩的作品集。首页有18个美丽的主题可供选择,这些主题以网格结构排列,当你向下滚动时,每各主题会依次展示,伴随轻微的跳动载入。



Visit site.


16.Walking Dead

这个网站很有创意,以视差滚动的方式讲述一个惊悚的迷你僵尸电视剧。向下滚动鼠标,你会看到一个丧尸如何走向不同的场景。整个故事以水平视差滚动自动播放。里面的动画真的很棒,另外背景音乐也创造了一种令人毛骨悚然的氛围。



Visit site.


17.Seymour Powel

该网站的设计师是一个多学科的设计研究团队,有战略家,品牌专家,产品经理,用户体验师,用户界面设计师和制造商。该网站有不同的图层可以增加界面深度,并且采用平滑滚动的视差效果。和Porsche Volution的设计比较接近,只是配色没有那么大胆。



Visit site.


18.Youandigraphics

该网站是一个可以完全将您的设计理念变为现实的地方。设计师Irene DemetriI热衷于创建美观和直观的响应式网站,适用于各种类型,各种尺寸设备的大型和小型项目。这个网站的视差没有那么强烈。你单击按钮时,不同的元素会以反方向移动,形成一种简单的视差。



Visit site.


19.Bagigia

想象一下,冬天里,怀抱一个热水袋感觉怎么样呢?这就Bagigia的设计师的灵感来源,创造一个关于热水袋展示的网站。当你向下滚动时,第一个网页页面会像幕布一样升上去,切换到一个可爱的热水袋的页面。该网站的视差效果也几乎集中在第一页。另外,滚动时,底部有一个“拉链”进度条,从左向右移动,很生动。



Visit site.


20.Anton&Irene

我很喜欢这个网站的配色,温暖干净的界面。首页的安东和艾琳穿着一件色彩鲜艳的衣服看起来很酷。当向下滚动时,他们则会退后一步,同时页面载入文本信息。粗字体和整体色彩创造了一种美妙的视觉体验。如果你将鼠标放在Anton&Iren身上,就可以看到他们的脸部或一个鼻子。



Visit site.

A:Anton&Irene

21.Putzengel

向下滚动鼠标时,会以视差滚动的方式连续显示6个页面。每一个页面都是日常生活中我们做清洁的场景。页面动画非常不错,尤其那个垃圾自动进入垃圾桶的动画,引人深思。



Visit site.

A:Putzengel


22.Beckett

该网站是您进行创意设计的一个不错选择,它是一个德国网站,但有多种语言可以切换。通过使用视差滚动来增加了网页插图的丰富度。但个人觉得这个网站的元素有些许杂乱。



Visit site.

A:Beckett

23.Lost Worlds Fairs

这也不是一个非常典型的视差滚动效果网站,当滚动鼠标,会有一个卡通人物进入一个神秘的管道,管道上有无数的窗口,可以让该人物在页面滚动时看到不同的场景。这个网站还是有一定的趣味性,看这个人物经历所有场景并最终到达他的目的地非常有趣。



Visit site.

A: Lost-Worlds-Fairs


以上就是Mockplus团队整理的一些视差滚动网站设计例子。不知道是不是对您有所帮助呢?不要忘了使用Mockplus去进行网页视差原型设计哦。还没有尝试过的小伙伴,点击 https://www.mockplus.cn下载,相信你也可以做出同样精彩的设计。欢迎交流。

发布于 2018-04-11 18:05

通常来说,一个设计得体,感觉专业的数字杂志式的网站,需要具备下面9种特征。

1、明确和突出的品牌设计

这是显而易见的事情。印刷出版的杂志通常会有明显而突出的品牌设计,通过品牌化的设计,有的会强调其权威性,有的会强调其个性。很大程度上,品牌化的设计是为了从激烈的竞争者脱颖而出。数字杂志同样如此。

突出品牌的方式有很多,内容是其中很重要的部分,同时视觉和体验也不容忽略。比如在技术类数字杂志中极为出名的 Wired ,也就是《连线》杂志。独树一帜的LOGO,黑白分明的配色融入整个数字杂志的网站设计,和LOGO以及品牌本身遥相呼应。

将品牌的色彩、设计元素贯穿到整个数字杂志的网站设计,这样能自然而然地强化整个品牌的概念。



2、抢眼独到的头条

数字杂志外有品牌化设计,内要有强大的内容支撑。头条是这个网站的拳头,它要抢眼,干脆,直击用户,在网页上要一目了然,是视觉焦点。清晰的排版和易于浏览的头条文章,是必须要有的。

看看 UX Magazine 的首页设计,相信你就明白了我的意思。头条字体采用了展示性的字体,厚重,和正文形成明确的对比。在头条文案上,也需要多花心思打磨,这样才能确保它真正有吸引力。



3、有阶梯层级的导航

虽然现在主流的导航设计都奔着简化去了,但是强调专业性的网站其实还是多少需要多层级的大型导航栏的。一方面,这类数字杂志类的网站通常有着类别多样文章和大量的存档,另一方面,这样的导航会给人以“专业”的感觉。

无论你用的是Wordpress这样的CMS平台还是自己写的网站,都可以使用这样的导航。在Wordpress 当中,无论是加入标签还是进行自定义分类都很方便,类别多了之后可以采用下拉式菜单,但是不论怎样设计,尽量让体验顺滑流畅。

Atlanta Magazine 的大型导航菜单给人的体验就非常流畅,下拉菜单中嵌入了大量的链接。由于响应式的滑动导航在移动端上也已经很常见了,这使得它还轻松兼顾到了移动端的设计。



4、文章推荐小插件

每个数字杂志风格的网页首页看起来都不尽相同,它们有着相似的首页,但是借助不同的排版布局,见缝插针的各式文章推荐的小插件,实现不一样的视觉效果,引导用户不时停下来点击感兴趣的文章。

这些热点文章推荐的小插件是非常引人瞩目的。用来推广热门文章和最近文章是相当有用的。

Search Engine Journal 的首页上就采用了一个这样的轮播式文章推荐小插件,每次展示3篇推荐文章,并且轮播滚动的时候会在左侧视觉化地展示出相应的图片。你可以仔细看看你所喜欢的数字杂志网站都是怎么设计这样的小插件的,或者了解一下他们用的都是哪些插件。



5、显著的分享按钮

社交媒体的重要性是不言而喻的。如果你想让你的网站拥有更多的访客,充分利用社交媒体,让你的网站文章有更多的曝光度,是不错的选择。在这样的需求之下,尽量让每篇文章当中的分享按钮尽量明显一些。

在著名科技博客 ZDNet 上,每篇文章下方都有一连串非常醒目的社交媒体分享按钮。在许多流行的杂志和网络媒体网站上,你能找到许多值得参考的案例,具体多看看吧。



6、相关文章推荐

在许多网站上,我们会在看完文章之后看到底部或者侧面有更多相关文章推荐,这是遵循用户偏好的一种内容推荐机制,非常有用。

这应该是所有以内容为导向的内容都应该有的组件和功能,因为这是几乎不费吹灰之力就能获得更多浏览量的方法。

Real Simple 的相关文章推荐和绝大多数网站并没有太大差别,但是绝大多数时候,这样的推荐都会发挥作用。



7、可用性良好的搜索引擎

现如今每个网站都有搜索引擎了。对于目标相对比较明确的访客而言,他们多数时候会直接使用搜索引擎开始搜索而不是漫无目的地浏览。

而数字杂志类网站的问题在于,其中所涵盖的内容信息量都很大,如果需要针对文章内容进行检索的话,搜索引擎压力并不小,但是用户的需求是非常明晰的,所以网站的开发者需要提供可用性良好的搜索引擎,帮助用户找到内容,提高用户的停留时间和内容的打开率。

设计师需要让搜索引擎显著的位置,让用户在任何时候都能够快速找到它,并且可以进行搜索。



8、自定义的页面元素

其实这个界定有点含糊。你会发现,绝大多数的内容为主的博客和数字杂志都大同小异。但是也有那么一些网站给人感觉稍稍不同:它们会在页面细节上进行一定程度的定制,让信息更容易被消化,或者更加个性化。

通常而言,这些效果突出的网站会在下面的部分花心思:

重点内容和引用的文本

目录

图片和轮播图

相关文章推荐

就像我前文所提到的,相关文章推荐,这个模块你可以设计得更加走心,更加吸引人。科技博客 TechCrunch 和 Hongkiat 都是在文章推荐上非常花心思。

我无法确切地告诉你到底有多数功能和模块可以进行定制和修改,这些部分通常需要创意团队集思广益。



9、页头焦点图

如果你想一进入页面就将用户的注意力牢牢抓住,那么你需要有醒目而抓人眼球的文案,以及一张同样在视觉上瞩目的高清特色图。

WordPress 这类CMS系统通常会有这样的焦点图模块,尺寸在后台有详细说明,不同的主题会设置不同的尺寸。对于数字杂志式的网站,图片是让用户点击的重要元素之一,最好用大图,强化视觉,在页头展示。你可以像下面的Dwell 一样,使用全屏图片。

无论怎么设计,在哪个位置,都应该以展示内容为核心,在视觉上最大化。



擅长品牌策略设计多年4A公司经验,自己也在运营品牌相关知识的公众号【 LIONBRAND 】 主要面对任职或在读的广告人,以分享干货为主,一起来聊聊品牌,广告,文案,设计哪些si儿

发布于 2018-03-15 00:06

随着网络技术的不断发展,网络应用已经渗透到人类社会的各个角落。

作为 网络世界的支撑点的网站,更是人们关注的热点:政府利用网站宣传自己的施政纲领,日益成为与百姓交流的直通车;企业利用网站宣传自己的形象,挖掘无限商机;个人利用网站展示个性风采,创建彼此沟通的桥梁。越来越多的人希望拥有网站,开辟网络世界里的一片天地。

如何设计一个出色的网站呢?关于这个问题,人们讨论的很多,可以讨论的内容也很多,加之网络技术的飞速发展,很难提出一个绝对权威和正确的设计思路,笔者不才,根据自己的设计体会,总结出以下基本设计思路:

一、定位网站的主题和名称

  网站的主题也就是网站的题材,网站设计开始首先遇到的问题。网站题材千奇百怪, 琳琅满目,只要想的到,就可以把它制作出来。下面是美国《个人电脑》杂志(PC Magazine)评出的99年度排名前100位的全美知名网站的十类题材:

第1类:网上求职;

第2类:网上聊天/即时信息/ ICQ;

第3类:网上社区/讨论/邮件列表;

第4类:计算机技术;

第5类:网页/网站开发;

第6 类:娱乐网站;

第7类:旅行;

第8类:参考/资讯;

第9类:家庭/教育;

10类:生活/时尚;每个大类都可以继续细分,比如娱乐类再分为体育/电影/音乐 等小类,音乐又可以按格式分为MP3,VQF,Ra等,按表现形式分古典,现代,摇滚等

同时,各个题材相联系和交叉结合可以产生新得题材,例如旅游论坛 (旅游+讨论),经典入球播放(足球+影视)按这样分下去,题材可以有成千上万种。

这么多题材,如何选择呢?遵循的原则如下:

1、主题要小而精:定位要小,内容要精。如果你想制作一个包罗万象的站点,把所有你认为精彩的东西都放在上面,那么往往会事与愿违,给人的感觉是没有主题,没有特色,样样有,却样 样都很肤浅,因为你不可能有那么多的精力去维护它。网站的最大特点就是新和快,目前最热门的个人主页都是天天更新甚至几小时更新一次。最新的调查结果也显 示,网络上的"主题站"比"万全站"更受人们喜爱,就好比专卖店和百货商店,如果我需要买某一方面的东西,肯定会选择专买店。

2、题材最好是你自己擅长或 者喜爱的内容。比如:你擅长编程,就可以建立一个编程爱好者网站;对足球感兴趣,可以报道最新的战况,球星动态等。这样在制作时,才不会觉得无聊或者力不 从心。兴趣是制作网站的动力,没有热情,很难设计制作出优秀的网站。

3、题材不要太滥或者目标太高。"太滥"是指到处可见,人人都有的题材;比如软件下 载,免费信息。"目标太高"是指在这一题材上已经有非常优秀,知名度很高的站点,你要超过它是很困难的。

如果题材已经确定以后,就 可以围绕题材给网站起一个名字。

二、定位网站的CI形象


  所谓CI(corporate identity),意思是通过视觉来统一企业的形象。一个杰出的网站,和实体公司一样,需要整体的形象包装和设计。准确的,有创意的CI设计,对网站的宣传推广有事半功倍的效果。具体的做法是:

  1、设计网站的标志(logo)
  就如同商标一样,标志是你站点特色和内涵的集中体现,看见标志就让大家联想起你的站点。标志的设计创意来自你网站的名称和内容:
  (1)网站有代表性的人物、动物、花草等,可以用它们作为设计的蓝本,加以卡通化和艺术化,例如迪斯尼的米老鼠,搜狐的卡通狐狸等等。
  (2)网站有专业性的,可以以本专业有代表的物品作为标志。比如中国银行的铜板标志,奔驰汽车的方向盘标志等等。
  (3)最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体,字母的变形,字母的组合可以很容易制作好自己的标志。

  2、设计网站的标准色彩
网站给人的第一印象来自视觉冲击,确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。举个实际的例子就明 白了:IBM的深蓝色,肯得基的红色条型,windows视窗标志上的红蓝黄绿色块,都使我们觉得很贴切,很和谐。"标准色彩"是指能体现网站形象和延伸 内涵的色彩。一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。标准色彩要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,只是作为点缀和衬托,绝不能喧宾夺主。适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色,要注意色彩的合理搭 配。

  3、设计网站的标准字体
  和标准色彩一样,标准字体是指用于标志,标题,主菜单的特有字体。一般我们网页默认的字 体是宋体。为了体现站点的"与众不同"和特有风格,我们可以根据需要选择一些特别字体。例如,为了体现专业可以使用粗仿宋体,体现设计精美可以用广告体, 体现亲切随意可以用手写体等等。

  4、设计网站的宣传标语
  也可以说是网站的精神,网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如:鹊巢的"味道好极了";麦斯威尔的"好东西和好朋友一起分享";Intel的"给你一颗奔腾的心"等等。

三、确定网站的栏目


建立一个网站好比写一篇文章,首先要拟好提纲,文章才能主题明确,层次清晰。如果网站结构不清晰,目录庞杂,内容东一块西一块;

结果不但浏览者看得糊 涂,自己扩充和维护网站也相当困难。网站的题材确定后,并且收集和组织了许多相关的资料内容,但如何组织内容才能吸引网友们来浏览网站呢?栏目的实质是一 个网站的大纲索引,索引应该将网 站的主体明确显示出来。

一般的网站栏目安排要

注意以下几方面:

  1、要紧扣主题

2、设立最近更新或网站指南栏目

  设立"最近更新"的栏目,是为了照顾常来的访客,让你的主页更有人性化。如果主页内容庞大,层次较多,而又没有站内的搜索引擎,设置"本站指南"栏目,可以帮助初访者快速找到他们想要的内容。

  3、设立可以双向交流的栏目

  比如论坛,留言本,邮件列表等,可以让浏览者留下他们的信息。

  4、设立下载或常见问题回答栏目

  网络的特点是信息共享。

如在你主页上设置一个资料下载栏目,便于访问者下载所需资料。另外,如果站点经常收到网友关于某方面的问题来信,最好设立一个常见问题回答的栏目,既方便了网友,也可以节约自己更多时间。

四、确定网站的目录结构

网站的目录是指你建立网站时创建的目录。例如:在用frontpage98建立网站时都默认建立了根目录和images(存放图片)子目录。

目录结构的 好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的上传维护,内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议:

  1、不要将所有文件都存放在根目录下,会造成文件管理混乱

你常常搞不清哪些文件需要编辑和更新,哪些无用的文件可以删除,哪些是相关联的文件,影响工作效率。另外,上传速度慢。服务器一般都会为根目录建立一个 文件索引。

当您将所有文件都放在根目录下,那么即使你只上传更新一个文件,服务器也需要将所有文件再检索一遍,建立新的索引文件。很明显,文件量越大,等 待的时间也将越长。所以,尽可能减少根目录的文件存放数。

  2、按栏目内容建立子目录

  子目录的建立,首先按主菜单栏目建立。

例 如:企业站点可以按公司简介,产品介绍,价格,在线定单,反馈联系等建立相应目录。其他的次要栏目,类似what‘s new,友情连接内容较多,需要经 常更新的可以建立独立的子目录。而一些相关性强,不需要经常更新的栏目,例如:关于本站,关于站长,站点经历等可以合并放在一个统一目录下。所有程序一般 都存放在特定目录。

例如:CGI程序放在cgi-bin目录。所有需要下载的内容也最好放在一个目录下。

  3、在每个主栏目目录下都建立独立的images目录

  为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。

  4、目录的层次不要太深

  目录的层次建议不要超过3层,维护管理方便。

  5、不要使用中文目录

  6、不要使用过长的目录

五、确定网站的链接结构

  网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。建立网站的链接结构有两种基本方式:

  1、树状链接结构

  类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。这样的链接结构浏览时,一级级进入,一级级退出。优点是条理清晰,访问者明确知道自己在什么位置,不会"迷"路。缺点是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须绕经首页。

  2、星状链接结构

  类似网络服务器的链接,每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。

缺点是链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。

最后,对于设计素材的选择,这个资源站更容易让人免费获取~

免费的图片素材视频素材以及各种音效文件都可以免费商用下载~

最后,希望以上的建议能给予你们在设计网站时候的帮助~

发布于 2020-11-23 09:24

对你来说的,谁拥有这个网站,或者谁负责对这个网站的验收,谁就是甲方。可以是你老板,项目经理,或者你的老师,也可能是你自己。

1。甲方是谁,去听他的构想

2。用户是谁,做好画像

3。梳理一圈,找出相似网站做竞品分析

4。搜索一遍,看看优秀作品,找找灵感

已上是概念生成

5。然后差不多可以开始考虑做卡片分组了之类的,整理大体结构

6。根据已知的概念,结合甲方和用户的两方面需求,做出主要用户流程图

7。根据流程图画线稿...这时候考虑如何交互,和交互的动效*

8。根据线稿(可以考虑做线稿原型)做用户测试,看看有没有什么大毛病,没毛病就继续做

9。根据线稿和测试结果修改,定出网站地图最好,然后考虑视觉元素的设计,和额外的动效**

10。设计完视觉,做高清效果图,做高清原型

*动效和视觉主主要还是服务于用户体验,一般不是炫技的(还是会有,实际项目里要看甲方有没有炫技这个需求,就像一个新闻网站你不可能花里胡哨做一堆闪闪闪,做个夜店的就可以)

**有实际作用的动效是做线稿的时候考虑的,一般结合在交互里,属于用户体验。没有实际意义的动效属于装饰,最后做视觉的时候加上去的,这时候加的动效往往其实都是狗尾续貂,不过甲方喜欢,谁跟钱过不去呢

11。做测试,没啥大毛病就差不多了,如果是长期跟的项目后期反正还要迭代的,如果是外包私活就差不多了,要求切图的切图,要求做spec的做spec...

至于很多UX工具都是服务于具体项目的,遇到不同问题使用不同的工具,比如有个地方拿捏不定那就做个ABtest,或者有些项目需要跟wei随xing甲方去理解业务流程之类的,不是必须每个项目都要用到所有的工具。

有项目经理的话,他一般都会帮你把很多东西梳理好,比如用户画像啊,甲方采访啊,甚至整个概念生成都跟你没什么关系,你只管根据需求做线稿,甚至线稿都画了,你就只管一个视觉,这是最轻松的

编辑于 2017-12-17 17:00

将各位答主的答案整合整合也近完全了,想必题主应该也已整理好了自己的工作流程。

我并不想给题主去继续掰扯我的流程到底是什么样的,所以给题主整理出了我一直遵守的网站设计8个tips:

【1】高质量内容

网站内容和网站设计一样重要,因为互联网上95%以上的信息都是书面内容,这也是人们访问你网站的原因。

即使你的网站设计得很漂亮,也只是一个没有高质量内容的空框架。所以说一个好的网站不仅需要好的设计,还需要高质量的内容。

【2】简单的互动

根据官方调查报告显示,76%的用户觉得易用性是网站设计中最重要的一点,所以网站设计要“保持简单”原则。尽量减少不必要的交互和组件,从用户使用感出发,降低用户学习成本。

【3】装载时间快

随着技术的发展,网站的加载速度越来越快,体验也越来越好。与此同时,用户等待网页加载的意愿有所下降,快节奏的访问成为了主流,所以加载时间长是访客离开网站的主要原因。

网页加载慢会影响用户体验,用户不愿意等待,跳出率高,同时还会影响网站的搜索排名。

还有,如果网页加载过程中没有显示任何内容,他们会认为网站加载太慢,很可能会转向竞争对手的网站。

【4】感受到一种掌控感。

人都喜欢能够自己掌控的感觉,所以控制感是用户界面设计中一种基本的可用性启发式方法,让用户能够通过已有的经验去操控软件往往比较容易获得用户好感。

【5】视觉外观好。

人都是视觉动物,所以网站也要符合目标用户的审美,虽然网页的视觉效果不能直接作用于转化,但是会在用户潜意识里增加印象分,从而增加转化率的机会。

就好比一个美女一个丑女,站在你面前你会选哪个?

【6】所有用户都可以参与设计。

用户体验感不佳的设计都不是成功的设计。而用户体验差和访问困难有直接联系,设计决策的一个典型例子是在浅色背景上使用浅灰色字符。

想象一下浅灰色的人物,几乎与背景融为一体。即使视力正常的人也很难看到这个网页上的文字,更别说视力有障碍的人了。

同时,缺乏色彩对比,字体小,也会造成易读性问题。

【7】难忘的设计。

现在各行各业饱和度高,竞争激烈,因此,网站设计差异化是非常重要的。

芭芭拉和丹尼尔卡内曼提出了一个心理学定律,叫做“峰-尾定律”,它指导我们如何认识、记忆和体验。

顾名思义,高峰和终点的规律意味着我们对经验的记忆是由高峰(无论好坏)和终点的感觉决定的。

无论体验是好是坏,这种体验都会产生这种效果。

或者通俗来说,在我们回顾以往经历时,我们通常印象深刻的都是某一时间点,如那天吃了一顿饭非常好吃,我们能描述出食材、餐厅,但是很难记起那天我们穿了什么颜色的衣服和袜子。

这就是为什么非常有必要创造一个可以在用户记忆中停留很长时间的高光设计。

【8】优先考虑移动设备。

近年来移动端的流量不断增加,所以我们的网站设计也要优先考虑移动设备,比如说苹果手机,要更侧重移动设备的兼容性和可用性。当然,其他设备的尺寸也同样重要,比如说iPad、苹果手表、苹果电视、笔记本电脑、Windows、安卓手机等,我一般是直接在 墨刀(在线原型设计团队协作工具)里面创建这些项目,里面的设备尺寸非常地全,墨刀的素材广场也提供各种自适应的原型模板、页面、组件及图标素材。丰富的设计素材资源降低了设计门槛,提升了工作效率,同时,可以激发产品和设计的灵感、发散思路并提供学习交流平台,推荐大家可以试试。

以上便是我总结的8大技巧。

Thanks for your time~

发布于 2021-09-22 17:11

背景 :2016年-2019年底都在负责 OnePlus.com的交互设计,重点设计过OnePlus6T到7到7T在到即将发布的8的网页交互设计,。2020年切换到新项目。

从用户研究到交互到动效都有执行,所以有资格谈下这个。

先看下一张图,是以目标导向的网站设计或APP设计。整个设计过程总共分为5个步骤:研究 — 建模 — 构建 — 美学 — 执行。具体在另外一篇文章中有回答。


第一步:内部访谈和用户调研获取设计目标;

第二步:制作情绪版建立审美倾向;

第三步:对设计进行关键词描述,推论设计方向。

第四部:视觉设计基于情绪版设计多个飞机稿,交互设计师依据用户研究构建信息和流程;

第五部:确定终版视觉设计稿和和交互稿,制作高保真原型和动效设计。

上具体案例,一加7Pro网站设计就具有很强的交互效果和设计感。


来一副图说明下设计过程:

编辑于 2020-04-08 13:38
你是如何设计一个网站的?
1718 播放 · 3 赞同

凡科建站,0代码轻松建站!点击这里获取精美网站设计模板: jz.fkw.com

如何设计一个网站?网站设计的流程是什么?

网站设计是网站建设的关键环节,一个好的网站都需要良好的网站设计。


一般而言,网站设计流程包括网站主题设计、网站内容设计、网站布局设计、网站色彩设计等几个方面。它并非一个独立的网站建设环节,需要与网站规划、网站开发等工作相结合。


1、网站的主题需要更多地考虑网站的属性。针对不同的网站需求,网站的主题也会有所不同。不过它体现的是网站品牌形象,所以主题一定要慎重考虑。

2、网站的内容是根据网站的主题来确定的。包含各种标题、文案介绍、信息文章、图片视频等。网站的内容是网站的灵魂,是网站的“硬实力”,在这方面要精心策划准备。

3、网站的布局要合理,网站的重点内容要放在用户的视觉焦点区域,这样可以更好地发挥网站布局的效果,也可以更好地提高转化效率。

4、网站的色彩更容易被人忽略。相对于国内的网站,国外的网站更注重色彩方面的网站设计。要多借鉴一些国外优秀的网站,看看他们如何合理地运用色彩,使网站的风格更受用户欢迎的。

网页设计不是一件简单的事,要想做好网站设计,除了有坚实的设计基础外,还需要不断的实践。


现在快来【凡科建站】!PC、手机、微网站、小程序四站合一,这里网站建设可以很简单~


100+行业类型,3000+免费精美网站模板,可视化在线自由设计,一键应用!


简单修改,10分钟就能生成一个好看的网站,还有多种的网站功能等你解锁! /多种的网站功能等你解锁,助力品牌网站营销推广!


==°·°★ 这里是小凡 @凡科建站 ★°·°==


简单易用,效果出众!

3000+模板,四站合一!


☞ 点击这里获取【超好用的在线建站工具】

发布于 2021-08-04 16:02· 1352 次播放

我是做网站设计的,第四年。


比如视觉设计上,标题是正文的1.6倍合适,但是要突出可能达到2倍或者4倍;

比如按钮默认可能是网站主题色调,蓝色等;但是要突出,可能需要更加突出的红色;等;

但是所有以上这些,都不是设计的标准。


设计的参考是:

你的同行,他们的设计可以用来参考,不能作为标准。


能做为标准的,是下边的,

设计不仅仅是好用,在我的领域,外贸建站中是询价作为唯一指标。也就是转化率,将流量转化为询价。

所以,设计好的页面,一定是给人专业,可信,方便等感觉,进而在心理上有一定的触动,压力,或者情感等,最终是点击我们设定的按钮,来制作询价。

能做为标准的,是大量的AB测试之后的网页形态。

我是

做外贸网站设计。

发布于 2019-05-05 08:11

感谢邀!

这种设计方式是代码设计的,技术要求高,成本高,现在都被那些一站式代替了,网站设计,空间,设计服务,后台数据,而且上千套网站素材随意选,独立网站,一键转换,随时随地都可以改网站,而且不花钱。

发布于 2020-01-13 17:52

当访问一个网站的时候,进入用户的第一印象就是网站的页面设计。在这个颜值经济时代,网站即代表产品,代表了用户自身的个性化标签,所以我们在建站时,会根据每一位企业所处行业量身定制,让企业的网站脱颖而出。

那么我们网页设计师在设计页面的时候,是怎么设计的呢?首先,有一些基本原则是必须要遵循的。

1、明确网站内容

一个网页在设计的时候首先应该考虑网站的内容,包括网站功能和用户需求,而不是以漂亮为中心进行设计规划。明确设计网站的目的和用户需求,从而做出切实可行的设计计划。

2、导航清晰

导航的栏目不要过多,一般5-9个比较合适,只需要列出几个主要的页面就可以。如果栏目比较多,尽量采用分级栏目的方式展示出来,这样更直观清晰。

3、易读性

设计出的网站应该是易于用户浏览的,导航应清晰、简洁,返回主页的标识要容易找到,所有的链接要有目标。网页还要符合人们从左到右、从上到下的阅读习惯。对于较长的页面,还应在底部设置一个导航。

4、页面协调性

网站页面的协调性能够影响整个页面所展示的视觉效果。将整个页面的所有元素都进行合理搭配、统一处理,最后形成一个和谐的整体,这样有利于提高用户体验。

5、打开速度要快

如果一个网站设计的再漂亮,打开的速度却很慢,也是无意义的。用户好不容易找到了感兴趣的内容,最终却因为迟迟打不开而放弃,这也是很多网站存在的问题。

基本原则确定后,接下来,创意和特色是抓住人心、给用户留下深刻映象的关键之处了,可以从以下几点着手:

一、确定网站的整体风格。不同行业的网站有不同的代表色,色彩对于建立网站形象很重要,一个网站通常有主色调和辅助色调,但色彩也不宜过多,不然会显得很花哨,最好控制在3-5个左右。

二、布局突破。

很多网站一比较,发现风格都差不多,原因就在于布局,因为排版差不多,所以看起来给人千篇一律的感觉。打破原有布局排版,可能会收获不一样的视觉体验。

三、高清大图

一张大图,有时候比再多的设计和文字内容都有表达度,可以瞬间吸引浏览者的眼球。并且高清大图可以清晰定义网站风格,对于目标客户来说,大图会产生一种熟悉感。

四、logo设计。

Logo是网站的灵魂,好的网站logo能传达整个网站的理念,给人专业,高大上的感觉,吸引用户更长时间停留在网站上,设计logo要遵循易于传播的特性,突出主题,切要具有识别性。


在竞争激烈的今天,网站想要与众不同,简单的套模板已经不能满足客户的需求,来自细节的打造,个性定制,才能超越竞争对手,让用户记住你,从而让你的营销推广效果更好。

【魔思工作室】小兰编

编辑于 2018-05-11 16:06

很多企业官网设计的很随意,甚至没有官网。官网是企业的名片。高质量的官网设计会使人们产生耳目一新的感觉, 提升企业形象,进而吸引更多潜在客户, 提升企业竞争力。

网站设计可以私信,免费提供设计建议和设计参考样式。

A 进行用户调研,确定网页的内容(主体):确定网站的名称什么,也就是说确定我们要做的究竟是一个什么网站;确定在这个名称主题下,用户要表现的主要内容是什么,即用户的意图,用户想从那个侧面来表现他的主题。

B 设计网页栏目及组织结构:网站结构一般包括三种,即层状结构、线性结构、Web结构(网状结构)。

层状结构:层状结构类似于目录系统的树型结构,由网站文件的主页开始,依次划分为一级标题、二级标题等等,逐级细化,直至提供给浏览者具体信息;

线性结构:线性结构类似于数据结构中的线性表,用于组织本身的线性顺序形式存在的信息,可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下,网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点,使网站文件既具有条理性、规范性,又可同时满足设计者和浏览者的要求;

Web结构:Web结构类似于Internet的组成结构,各网页之间形成网状连接,允许用户随意浏览。

C 准备素材:收集与整理相关资料

D 界面设计:根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构

E 网页排版(页面实现):根据所设计的界面进行网页排版。

F 网页测试与发布:网页测试包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性,达到最初的内容组织设计目标,实现所规定的功能,读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确,链接准确,无差错无遗漏。如果在测试过程中发现了错误,就要及时修改,在准确无误后, 方可正式在Internet上发布。网页设计好,必须把它发布到互连网上,否则网站形象仍然不能展现出去。发布的服务器可以是远程,也可以是本地。

网站设计的原则

一个成功的网站是多方面的精心设计与努力完成的,但是到浏览者的面前,这些都如同一个匣子,浏览者最为关注的就是网站的内容是否吸引他,网站中显示的网页是否美观观看是否具有舒适感。网站设计中的基本原则标准实际就是为浏览网页的网络用户提供便捷优质服务。

1.1网页风格一

这里的网页风格统一主要包含两层含义第一种,就是网页的整体风格统一,每个网页从外观上,栏目设计上有相似之处。当然,有个别的一、二个特色网页,为了起到强调突出作用,脱离整体风格,有时会起到吸引浏览者的效果。但是这种突出一定要精心设计,一旦失败,就会给网络用户留下网页质量低劣的印象。第二种,就是网页的美化风格要跟主体统一。举例来说,京剧的美化风格就适合古韵古香,用一些招滚、重金属的图片等素材进行美化,就是一种不统一的应用。美化过程是为了两者风格统一才让网页表现更加协调。

1.2主题鲜明突出,内容翔实

美丽的网页吸引的是网络用户第一眼的印象,能够让用户长期使用,长期浏览的是不断更新的用户们关注的网站的主要内容。所以制作网站之前,一定要准确定位。网站的方向是什么?是提供大量信息资源的门户网站,还是侧重于某些专业知识的论坛,又或许是互动平台如此等等,不一而足。定位后就要进行材料的收集与分类,提供用户感兴趣的专栏。

1.3网页设计避免过于花哨

长期被网络用户关注的网站,绝大多数都并不花哨。这是有一定原因的。吸引大量网络用户,长时间关注与浏览,不可避免的有一个视觉疲劳的问越。如果颜色过亮,设计过于花俏,视觉疲劳就会很早发生,这就会流失大量的浏览者。

网站、网页常用设计工具简介

针对简单的静态网页来说,网页三剑客是使用最为方便,高效完成完成网页设计的工具网站设计过程中,常常要使用图片,对图片进行细致设计的常用软件无疑首选, photshop它的CS版本还特意推出了网页制作功能,为网页制作提供便走的服务。但是目前静态网页己经不能满足网站的需求,任何的网站都应该实现数据交互的功能。所以后台数据库管理系统不可或缺,日前使用较多的有 Oracle系列Sgl系列、 dbase系列等等。值得一提的是针对小型网站, Mysql t也是一个不错的选择。前台开发的高级语言主要有C#、JAVA,当然PHP即本应用也占有一定市场份额。特效脚本常见的有 Javascipt、 vbscript。

网站设计的主要模块

网站设计从功能角度出发,要了解用户需求,实现网站平台的主体功能,实行网页的基本框架。要通过高级语言或者脚本语言实行前台设计,要与数库合作进行数据存储与互联,后期要进行美工美化过程,让网页更加美观,便于浏览给用户舒适感。要搭建网站需要的服务器。

发布于 2021-06-19 14:25

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。

二、搜集材料

明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。

三、规划网站

一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。 四、选择合适的制作工具

尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。

五、制作网页

材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。

六、上传测试

网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。

七、推广宣传

网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

八、维护更新

网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者

如果你是零基础小编建议可以用阿里云建站产品进行操作更方便快捷,安全稳定,维护简洁。

编辑于 2020-08-12 11:37

设计一个网站是个技术活,如果要求不高,预算不多,建议直接用免费的程序,虽然丑点但

是便宜啊。如果你是初创型企业,可以考虑大品牌自助建站系统阿里云·速成美站,集成云

服务器、云数据库、对象存储、全球加速、负载均衡、Web应用防火墙等,确保网

站快速、安全。云·速成美站包括1000余套精美模板覆盖多个行业,将常见的网页

样式、网站功能全部封装成控件模块,集成到可视化设计器,用户可通过拖拽、编

辑、设置等操作即可自行搭建PC网站、手机站、微信公众号及小程序。可视化全

功能管理后台,真正做到“会打字,就能建网站”。如果你对设计有特别要求的话,

就需要专门的设计公司来做项目开发了,CSS样式,切图,表单等等设计技术,

所以大家根据自己的实际需求选择相应的网站设计。

发布于 2020-09-28 16:57