从网站存在开始,Web设计和开发的概念就已经存在了。因为网站创建曾经是一个相对简单的过程,所以它曾经有一个更简单的定义。将1991年推出的第一个网站与现代网站进行比较时,就能真正看到网站的发展。如今,创建和维护一个网站更为复杂,涉及到一个由角色和技能组成的完整系统。对于设计师来说,很难确切地知道你在这个系统中的位置。这篇文章概述了网站创建过程的主要方面,清晰地描述了你的角色、其他人的角色以及所涉及的技能集合。

什么是网页设计和开发?
 
网页设计和开发是一个笼统的术语,描述了创建网站的过程。顾名思义,它涉及两个主要技能:网页设计和网页开发。网页设计决定网站的外观,而网站开发则决定网站的功能。由于并不总是将两个角色分开,因此标题经常可以互换使用。随着网络的不断发展,角色也随之发展。自从第一个网站创建以来的近30年中,出现了许多职位描述各种用于创建网站的技能,并且每年还会出现更多的职位。这些标题经常重叠,并且各个公司的含义也有所不同。这足以使人晕头转向。
 
设计与前端开发与后端开发
 
为简单起见,我们将网站创建分为两类:用户看到的内容和用户看不到的内容。用户看到的内容发生在浏览器中,涉及设计和前端开发。设计定义了网站的颜色,布局,字体和图像(所有与网站的品牌和可用性有关的内容),并且需要诸如Photoshop,Illustrator,Fireworks和Sketch之类的工具。使用HTML,CSS和Javascript等编码语言来实现该设计称为前端开发。这些语言使用户可以与按钮,图像,文本,联系表格和导航菜单进行交互。它们是响应性和适应性设计的组成部分。一些设计师编写代码,一些前端开发人员进行设计。有些设计师一点代码都不懂。一些前端开发人员坚持编写代码。
 
用户看不到的东西发生在服务器上,并且涉及后端开发。网站需要一个后端来存储和组织通过前端来的所有数据。因此,如果用户购买了商品或填写了表格,那么他们就是在网站前端的应用程序中输入信息。该信息存储在服务器上的数据库中。网站按想要的方式工作,因为网站的前端和后端始终处于通信状态。后端显示就像导体。他们确保应用程序,数据库和服务器使用Ruby,PHP,.Net和Python等语言以及Ruby on Rails和Code Igniter之类的框架和谐地协同工作。
 
网页设计要素
 
标志性的设计师保罗·兰德(Paul Rand)在他的文章《The Politics of Design》中写道:“设计是解决问题的活动。它提供了更清晰易懂、综合和戏剧性的表现一个词、一张照片、一个产品或一个事件的方法。”网页设计人员正在不断为其用户解决问题。网站应该使用户可以轻松地去他们想去的地方并做他们想做的事情。因操作失败而沮丧的用户不太可能留下来,更不用说再次回到网站了。这就是每个网页设计元素都在致力于使网站尽可能易于使用的原因:人们可以一遍又一遍地访问网站并与之互动。

布局:布局是网站标题,导航菜单,页脚,内容和图形的布局。布局取决于网站的用途以及网站设计师希望用户与网站进行交互的方式。例如,摄影网站将优先处理大型精美图像,而编辑网站将优先处理文本和字母间距。
 
视觉层次结构:用户应该可以浏览网站,从而访问所需的信息。这就是视觉层次结构出现的地方。视觉层次结构是使用大小,颜色,间距等来确定网站哪些美学方面应脱颖而出的过程。
 
导航:导航使用站点架构,菜单和搜索栏等导航工具帮助用户从A点到达B点。简单有效的导航可帮助用户快速,轻松地找到所需的信息。
 
颜色:颜色赋予网站个性,使其脱颖而出,并向用户展示如何采取行动。调色板可以由品牌的现有标识或网站的内容(例如该工厂网站如何使用绿色)确定。一致的调色板有助于使网站秩序。
 
当UI的相同元素在应用程序/网站的不同部分看起来不同时,这可能会使您的用户感到困惑。保持一致的设计方法,使用户在与产品进行交互时可以使用以前的知识。
 
图形:图形是网站上的徽标,图标和图像。它们应补充调色板,布局和内容。
 
速度:用户的第一印象取决于网站加载所需的时间。如果花费的时间太长,则用户可能不会留在身边。
 
根据Akamai的2017年在线零售绩效报告,网站最佳页面加载时间为1.8到2.7秒。同一份报告还发现,延迟两秒钟可将网站的关闭率(即查看一页后离开网站的访问者的百分比)提高多达103%。
 
可访问性:谁可以使用或不能使用网站取决于网站的可访问性。将可访问性作为优先事项来确保所有用户都能平等地访问和使用网站及其功能。