网站设计

Website development

7个简单的步骤，Web设计的全过程

发布时间：2017-03-14 10:05:52

TAGS：网站设计

找出下面的一个结构化的Web设计过程可以帮助你提供更多的成功的网站更快更有效。

网页设计师经常思考在如线框，编码技术问题的焦点网站设计过程中，和内容管理。但是，伟大的设计不是关于你如何整合社会媒体按钮甚至光滑的视觉效果。伟大的设计实际上是创建一个网站，有一个总体战略。

设计良好的网站提供的不仅仅是美学。他们吸引游客，帮助人们了解产品、公司和品牌通过各种指标，包括视觉，文字，和相互作用。这意味着你的网站的每一个元素需要朝着一个明确的目标。

但你如何达到和谐的合成元素？通过一个全面的网页设计过程中，形式和功能的考虑。

对我来说，Web设计过程需要7个阶段：

1.目标识别

初始阶段是所有关于了解你如何能帮助你的客户。

在这个初始阶段，设计师需要确定网站的终目标，通常与客户或其他利益相关方密切合作。探索在这个阶段回答的问题包括：

是谁的网站？

他们有什么期待找到的吗？
该网站的主要目的的通知，出售，或娱乐？
网站是否需要清晰地传达出品牌的核心信息，或者是一个更广泛的品牌战略，以其独特的重点部分？
什么竞争对手的网站，如果有，应该如何存在，这个网站是由/不同，这些竞争对手？
这是任何Web设计过程中重要的部分。如果这些问题都不清楚的回答简短，整个项目可以设置了错误的方向。

它可以写一个或多个明确的目标有用，或预期目标一一段总结。这将有助于设计的正确路径。确保你了解网站的目标受众，并建立一个竞争的工作知识。

网站的目标识别阶段的工具
观众的角色
创意简报
竞争对手分析
品牌属性

2.范围定义

一种常见的和困难的问题困扰着网页设计项目范围蔓延。客户端设置了一个目标，但这一逐渐扩大，演变，或完全改变的设计过程中，你知道接下来的事情，你不仅是设计和建立一个网站，而且一个Web应用程序，电子邮件，和推送通知。

这不是必要地设计的问题，因为它会导致更多的工作。但是，如果增加的期望不在预算或时间的增加相匹配，该项目可以迅速变得完全不切实际。

甘特图的解剖

甘特图，详细说明项目的现实的时间表，包括所有的主要景点，可以设置边界和可实现的期限。这是设计师和客户宝贵的参考，有助于保持每个人都专注于手头的任务和目标。

范围定义的工具
一个合同
甘特图（或其他时间线技术）

3.站点地图和线框的创作

一个简单的网站地图。注意捕获页面层次。

站点地图对于任何精心设计的网站提供了基础。它有助于给设计师的网站信息架构的一个清晰的思路和解释之间的关系，不同的页面和内容要素。

建设一个网站没有一个网站就像建房子没有蓝图。而很少原来。

下一步是创建线框图。线框存储网站的视觉设计和内容元素提供了一个框架，可以帮助识别潜在的挑战和差距的地图。

‍曾经惊人的Timothy Noah了一个线框图工具可以克隆WebFlow免费

虽然一个线框不包含任何终的设计元素，它作为一个指南网站如何终将。一些设计师使用光滑的工具如Balsamiq或Webflow创建线框图。我个人喜欢回到基础知识和使用可靠的OLE的纸和铅笔。

对于网站映射和线框图工具

钢笔/铅笔和纸
Balsamiq
moqups
素描
Axure
Webflow
slickplan
writemaps
MindNode
想玩
（flexbox）游戏吗？

flexbox游戏是快，简单的方式学习flexbox（和Webflow）。

现在玩现在，从我们的赞助商的一个简短的单词

4.内容创作

在内容方面，SEO只是战斗的一半。

一旦你的网站的框架是在的地方，你可以从网站的重要的方面：书写的内容

内容有两个基本目的：

目的1。内容驱动的参与和行动

第一，内容吸引读者并促使他们采取必要的行动，完成一个网站的目标。这是受内容本身（写作），如何呈现（排版和结构元素）。

沉闷，毫无生气，过长的散文很少让游客关注长。短，快，和有趣的内容吸引他们，让他们点击到其他页面。即使你的网页需要很多的内容，通常，他们做适当的“组块”由分解成小段辅以视觉效果可以帮助它保持光的内容，引人入胜的感觉。

目的2：SEO

内容也提高了搜索引擎网站的知名度。创造和改善实践内容在搜索排名，被称为搜索引擎优化，SEO

让你的关键词和关键短语是任何网站成功的关键。我一直使用谷歌关键词规划师。这个工具显示了潜在的目标关键词和短语的搜索量，所以你可以在磨练中什么实际存在的人都在网上搜索。而搜索引擎越来越聪明，所以如果你的内容策略。谷歌趋势也方便识别方面实际使用的人当他们搜索。

我的设计过程主要集中在网站搜索引擎优化设计。关键词你想排名的需要放在标题标签的接近开始，更好的。关键词应该出现在H1标签，meta描述，与正文内容。

的内容，写的很好，内容丰富，和丰富的关键字更容易被搜索引擎，所有这些都有助于使网站更容易找到。

通常情况下，你的客户会产生大量的内容，但重要的是你为他们提供什么样的关键词和短语应包括在文本的指导。

‍太多的博客，丽莎，但出色的工作！
可怕的内容创作工具
谷歌文件
Dropbox的纸
妙语
收集的内容
方便的SEO工具
谷歌关键词策划
谷歌趋势
尖叫青蛙SEO蜘蛛

5.视觉元素

‍style瓦：自由式瓦/ Moodboard模板Mat Vogels建立的。

后，它的时间为网站创建的视觉风格。这部分的设计过程中经常会被现有的品牌元素，颜色的选择，和标志形，按客户规定。但它也是阶段的网页设计过程中，一个好的设计师是闪亮的。

图像在网页设计中发挥更重要的作用比以往任何时候都。不仅是高质量的图像，给网站一个专业的外观和感觉，但他们也传达一个信息，是移动友好，并帮助建立信任。

视觉内容是增加点击，参与，和收入。但更重要的是，人想要看到一个网站的图片。不仅做形象做一个页面感觉不那么繁琐，容易消化，但同时也增加了消息的文本，甚至可以传达重要的信息甚至都不需要读的人。

我建议使用一个专业的摄影师把图片右。只要记住，巨大的，美丽的图片可以严重拖慢网站。我用optimizilla压缩图像不失去质量，减少页面加载时间。你也会想确保你的图像作为你的网站的响应

视觉设计是一种沟通和吸引网站的用户。得到它的权利，它可以确定网站的成功。得到它错了，你只是另一个Web地址。

视觉元素的工具

通常的嫌疑人（素描、插图、PS图象处理软件、等）

情绪板，风格的瓷砖拼贴，元

视觉风格指南

6.测试

你别担心。它不总是这样的感觉

一旦网站有其视觉效果和内容，你准备好测试。

彻底测试每个页面，以确保所有的联系工作而正确的在所有的设备和浏览器的网站负载。错误可能小的编码错误的结果，而这往往是发现和解决他们的痛苦，不如现在就做比呈现给公众一个破碎的网站。

编者按：我高度推荐尖叫的青蛙SEO蜘蛛这个阶段。它可以让你做许多标准的审计任务都在一个工具，而且是免费的长达500网址。

后一次看网页的Meta标题和描述太。即使在元标题词的顺序会影响一个搜索引擎页面的性能。

Webflow有一篇很好的文章发射前的过程

网站测试工具
W3C链接检查器
SEO蜘蛛

7.发射

现在是大家喜欢的网页设计过程中的一部分时间：当一切都已经彻底的测试，和你快乐的网站，它的发射时间。

‍不要太激动，但…我们很快就到了！

别指望这去完美。可能还有一些元素需要修理。网页设计是一个持续的过程，需要不断的流体和维护。

网页设计-真的，设计一般都是关于寻找形式和功能之间的平衡。你需要使用正确的字体，颜色和图案的设计。但人们浏览和体验你的网站才是重要的。

熟练的设计师应该在这个概念，可以创建一个网站，走两者之间的微妙的走钢丝的贯通。

记得发射阶段的关键是它的地方工作接近尾声。网络的美在于它永远不会结束。一旦网站上线，你可以继续运行在新的内容和特点，用户测试的监测分析，并提炼你的消息。

你的流程是什么样子的？

你遵循类似的设计过程，还是你看起来完全不同？我们很乐意听到关于它的一切.

原创不易，未经授权，严禁转载

原文地址：https://www.yzlink.cn/i,72,7178,0.html

上一篇：好的网站设计的技巧和想法

下一篇：北京网站开发如何获得大品牌的注意

您还有可能感兴趣的内容

建站流程

Website development

网站需
求分析
网站策
划方案
页面风
格设计
程序设
计研发
资料录
入优化
确认交
付使用
后续跟
踪服务
+86 10 64758810
18510861135

热门标签

Website development

客户评价

更多+

感谢云智互联，系统提前完成，在整个项目周期内，云智互联对待我们并不像是对待客户，更像是朋友一样，每一次，都能以专业的角度向我们提出更合理、更有效的解决方案，并快速、细致地完成我们的每一个需求，再次感谢以至诚之心做事的云智互联团队。

潘涛
我是东方龙马集团，在云智家做了2个企业官网，服务态度超级好。如果想做网站，选择他家一定不后悔。性价比高，服务态度好。值得你的信赖！

谭娇
技术好，设计精良，操作便利，很专业！配套的服务和后续的服务都很好,网站封面堪称精品，运行方便，后台操作的简单。技术还会耐心教我,很好的云智互联（北京）科技有限公司，建站很不错的。

陈曦
不错，价格比较合适，重点是响应速度蛮快，有什么问题都会马上给你解决，公司很满意，因为他们都是针对每个项目建了相应的讨论组，有问题可以再里面提出，人员分工到位，解决问题很及时。

张经理