网页设计过程分为7个简单的步骤

发布时间:2019-08-15 10:10:36 阅读:54

  网页设计师经常考虑网页设计过程,重点关注线框,代码和内容管理等技术问题。但优秀的设计并不是关于如何整合社交媒体按钮甚至是光滑的视觉效果。伟大的设计实际上是关于创建一个与总体战略一致的网站设计。

 精心设计的网站提供的不仅仅是美学。它们通过各种指标(包括视觉效果,文本和交互)吸引访问者并帮助人们了解产品,公司和品牌。这意味着您网站的每个元素都需要朝着既定目标努力。

 但是,你如何实现元素的和谐合成?通过整体的网页设计过程,将形式和功能都考虑在内。

  对我来说,网站设计过程需要7个步骤:

  1、目标识别:我与客户合作确定网站需要实现的目标。即,它的目的是什么。

  2、范围定义:一旦我们了解了网站的目标,我们就可以定义项目的范围。即,网站需要哪些页面和功能来实现目标,以及构建这些目标的时间表。

  3、站点地图和线框创建:在范围定义明确的情况下,我们可以开始深入研究站点地图,定义我们在作用域定义中定义的内容和功能将如何相互关联。

  4、内容创建:现在我们已经对网站有了更大的了解,我们可以开始为各个页面创建内容,始终牢记搜索引擎优化,以帮助保持页面专注于单个主题。在下一阶段为您提供真正的内容至关重要:

  5、视觉元素:通过网站架构和一些内容,我们可以开始研究视觉品牌。根据客户端的不同,这可能已经定义明确,但您也可能从头开始定义视觉样式。样式图块,情绪板和元素拼贴等工具可以帮助完成此过程。

  6、测试:到目前为止,您已经拥有了所有页面并定义了它们如何向网站访问者显示,因此是时候确保它们都能正常运行了。将各种设备上的站点手动浏览与自动化站点爬虫相结合,以识别从用户体验问题到简单断开链接的所有内容。

  7、上线:一旦一切正常运作,就可以计划并执行您的网站发布了!这应该包括规划发射时间和沟通策略 - 即,你什么时候开始,你将如何让世界知道?在那之后,是时候打破泡沫了。

  现在我们已经概述了这个过程,让我们深入研究每一步。

  1.目标识别

  最初的阶段是了解如何帮助您的客户。

  在这个初始阶段,设计师需要确定网站设计的最终目标,通常是与客户或其他利益相关者密切合作。在此过程的这个阶段要探索和回答的问题包括:

  谁是网站?

  他们期望在那里找到或做什么?

  该网站的主要目的是告知,出售或娱乐吗?

  网站是否需要清楚地传达品牌的核心信息,还是具有自己独特焦点的更广泛的品牌战略的一部分?

  存在哪些竞争对手网站,以及该网站应该如何受到这些竞争对手的启发?

  这是任何网页设计过程中最重要的部分。如果这些问题在摘要中没有得到明确的回答,那么整个项目就会出现错误的方向。

  写出一个或多个明确确定的目标或预期目标的一段摘要可能是有用的。这将有助于将设计放在正确的道路上。确保您了解网站的目标受众,并培养竞争的工作知识。

  有关此阶段的更多信息,请查看“ 现代网页设计流程:设定目标”。

  2.范围定义

  困扰网页设计项目的最常见和最困难的问题之一是范围蔓延。客户在设计过程中只考虑了一个目标,但这在设计过程中会逐渐扩展,发展或改变 - 接下来您知道,您不仅要设计和构建网站,还要设计网络应用,发送电子邮件,并推送通知。

  对于设计师来说,这不一定是个问题,因为它通常可以带来更多的工作。但是,如果增加的预期与预算或时间表的增加并不匹配,那么该项目很快就会变得完全不切实际。

  甘特图详细说明了项目的实际时间表,包括任何主要地标,可以帮助设定边界和可实现的最后期限。这为设计师和客户提供了宝贵的参考,并帮助每个人专注于手头的任务和目标。

  3.站点地图和线框模型

  简单网站的站点地图。请注意它如何捕获页面层次结构。

  站点地图为任何精心设计的网站提供了基础。它有助于网页设计者清楚地了解网站的信息架构,并解释各种页面和内容元素之间的关系。

  建立一个没有站点地图的站点就像建造一个没有蓝图的房子。这很难说得很好。

  下一步是构建线框模型。线框提供了一个框架,用于存储网站的可视化设计和内容元素,并可帮助识别站点地图的潜在挑战和差距。

  令人惊叹的Timothy Noah构建 了一个可以免费克隆的Webflow线框工具包。

  虽然线框不包含任何最终设计元素,但它确实可以作为网站最终外观的指南。一些设计师使用像Balsamiq或Webflow这样的光滑工具来创建他们的线框。我个人喜欢回归基础并使用可靠的纸和铅笔。

  4.内容创作

  说到内容,SEO只是成功的一半。

  一旦您的网站框架到位,您就可以从网站最重要的方面开始:书面内容。

  内容有两个重要目的:

  目的1.内容推动参与和行动

  首先,内容吸引读者并驱使他们采取必要的行动来实现网站的目标。这受到内容本身(写作)及其呈现方式(排版和结构元素)的影响。

  沉闷,毫无生气,过长的散文很少会引起游客的注意。简短,活泼,有趣的内容抓住了它们并让它们点击进入其他页面。即使您的网页需要大量内容 - 而且通常也是如此 - 通过将内容分解为由视觉效果补充的简短段落来正确地“分块”内容可以帮助它保持轻松,引人入胜的感觉。

  目的2:SEO

  内容还提升了网站对搜索引擎的可见性。创建和改进内容以在搜索中排名很好的做法被称为搜索引擎优化或SEO。

  正确获取关键字和关键词对于任何网站的成功至关重要。我总是使用Google关键字规划师。此工具显示潜在目标关键字和短语的搜索量,因此您可以了解实际人类在网络上搜索的内容。虽然搜索引擎变得越来越聪明,但您的内容策略也应如此。Google趋势在识别人们搜索时实际使用的字词时也很方便。

  我的设计过程侧重于围绕SEO设计网站。您想要排名的关键字需要放在标题标签中 - 越接近开头越好。关键字也应出现在H1标签,元描述和正文内容中。

  搜索引擎更容易获取编写良好,信息丰富且关键字丰富的内容,所有这些内容都有助于使网站更易于查找。

  通常情况下,您的客户会生成大部分内容,但您必须向他们提供有关应在文本中包含哪些关键字和短语的指导。

  对于一篇博文来说,Lisa太过分了,但是工作非常出色!

  5.视觉元素

  Style Tile: 由Mat Vogels建造的 自由风格瓷砖/情绪板模板。

  最后,是时候为网站创建视觉样式了。设计过程的这一部分通常由客户规定的现有品牌元素,颜色选择和徽标来塑造。但它也是网页设计过程的一个阶段,一个优秀的网页设计师可以真正发挥作用。

  现在,图像在网页设计中扮演着比以往更重要的角色。高质量的图像不仅可以为网站提供专业的外观和感觉,而且还可以传达信息,对移动设备友好,并帮助建立信任。

  众所周知,可视内容可以增加点击次数,参与度和收入。但更重要的是,人们希望在网站上看到图像。图像不仅使页面感觉不那么麻烦且更容易消化,而且它们还增强了文本中的消息,甚至可以传达重要消息,甚至无需人们阅读。

  我建议使用专业摄影师来拍摄正确的照片。请记住,大量漂亮的图像会严重减慢网站的速度。我使用Optimizilla压缩图像而不会降低质量,节省了页面加载时间。您还需要确保您的图片与您的网站一样响应。

  视觉设计是一种沟通和吸引网站用户的方式。做对了,它可以确定网站的成功。弄错了,你只是另一个网址。

  6.测试

  别担心。它并不总是这样。

  一旦网站拥有所有视觉效果和内容,您就可以进行测试了。

  彻底测试每个页面以确保所有链接都正常工作,并确保网站在所有设备和浏览器上正确加载。错误可能是小编码错误的结果,虽然找到并修复错误通常很痛苦,但最好现在做,而不是向公众提供破坏的网站。

  编者注:我强烈推荐Screaming Frog的SEO Spider用于此阶段。它允许您在一个工具中完成许多标准审计任务,并且最多可以免费提供500个URL。

  最后再看一下页面元标题和描述。甚至元标题中单词的顺序也会影响搜索引擎上页面的性能。

  Webflow有一篇关于发布前流程的优秀文章。

  7.上线

  现在是网站设计过程中每个人最喜欢的部分的时候了:当所有内容都经过全面测试,并且您对该网站感到满意时,就该开始了。

  不要太兴奋,但......我们快到了!

  不要指望这完美。可能仍有一些元素需要修复。网页设计是一个流动且持续的过程,需要不断维护。

  网页设计 - 实际上,一般来说 - 设计就是在形式和功能之间找到适当的平衡。您需要使用正确的字体,颜色和设计图案。但人们浏览和体验您网站的方式同样重要。

  熟练的设计师应该精通这个概念,并能够创建一个网站,走在两者之间的微妙走钢丝。

  关于启动阶段要记住的一个关键事项是,它还远未结束。网络的美妙之处在于它永远不会完成。网站上线后,您可以继续对新内容和功能进行用户测试,监控分析并优化消息传递。

  你的过程是什么样的?

  您是否遵循类似的设计流程,或者您的设计看起来截然不同?我们很乐意听到所有这些,所以请在下面评论。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"网页设计过程分为7个简单的步骤",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560