在当今世界，了解如何进行网页设计变得越来越重要，并且现在已成为设计师不可或缺的技能。网页设计可能相当复杂和令人畏惧，但随着互联网和技术的发展，网页设计制作现在比以往任何时候都容易。互联网上有很多资源，每个人都可以学习自己成为一名出色的网页设计师。在这篇文章中，我将简要指导您如何在家学习网页设计。

目录：

什么是网页设计？

网页设计师需要具备哪些技能？

网页设计的基本五要素

在家学习网页设计的最佳资源

什么是网页设计？

许多年轻或新设计师经常误解网页设计的概念。网页设计是指在互联网上显示的网站的设计。它通常指的是网站开发的用户体验方面，而不是软件开发。因此，即使没有任何技术知识的人也可以使用Mockplus、Figma 或 Sketch等平台成为一名出色的网页设计师。当然，如果你懂一些编码语言（HTML、CSS、Java）那就太好了，但你无法深入前端开发，那不是网页设计的核心。网页设计的核心是视觉和交互。旨在解决用户与网页信息之间的沟通问题。

网页设计师需要具备哪些技能？

作为年轻的设计师，当你开始职业生涯时，你可能会对要掌握哪些技能感到困惑。在这一部分中，我们将探讨年轻网页设计师必须具备的顶级技能。现在，让我们深入了解一下。

掌握视觉设计的基本规则

简单来说，视觉设计是通过视觉元素和效果（包括颜色、插图、摄影、排版、布局、留白等）改善网页/应用程序的 UI 和 UX 的过程。与 UI 设计相比，它更注重网页/应用程序设计的视觉效果，旨在吸引用户。作为初学者，如果你想拥有出色的视觉设计，你需要牢记比例、视觉层次、平衡、对比度和格式塔的基本原则，这可以帮助你提高参与度并提高可用性。

学习布局设计

布局设计是在给定页面上排列视觉元素（例如文本、图像和形状）的过程。布局设计对于网站设计至关重要，因为它可以决定页面的整体外观以及图形元素之间的连接，以实现流畅的消息流，从而最大限度地提高性能。

学习色彩原理

给定页面上的不同颜色组合可以为访问者提供不同的体验和视觉对比，使其成为网站设计的关键组成部分。请记住颜色的基本原则，这可以帮助您为您的网站创建有效的配色方案。

掌握交互设计的基础知识

交互设计是关于创建具有深思熟虑的行为的引人入胜的界面。对于网页设计师来说，您需要具备交互设计的基本知识，例如创建设计策略、识别关键线框交互和原型交互，这可以帮助您为访问者创建用户友好的体验。

学习使用原型制作和设计工具

有许多原型和设计工具供您选择来创建您的网站。作为初学者，您需要选择像Mockplus这样易于使用并提供各种内置组件的工具，它可以帮助您快速获得对未来网站的第一视觉印象。使用Mockplus，您不必等待最终的屏幕设计，而是可以在几分钟内验证您的想法。

了解基本的编码语言（HTML、CSS）

如上所述，网页设计与软件开发无关，您不必深入前端开发。但作为一名设计师，拥有基本的编程知识可以让你更有效地与开发人员协作。这里我们有一些最好的免费在线网站，供初学者学习编码。

熟悉你公司的产品和用户群

无论您是初学者还是专业设计师，您设计的目的都是向客户展示您的产品或业务的价值。因此，设计师的最后但最不重要的技能是拥有清晰的角色并创造出满足客户需求的设计。

网页设计的五个基本要素

掌握上述所有技能后，就可以翻动素描本并开始网页设计了。以下是您需要确保正确使用的五个基本设计元素。

整体布局

网站的整体外观是网页设计的重要组成部分。研究发现

用户只需 50 毫秒即可形成对您的网站或业务的看法，这将决定他们是留下还是离开。因此，您需要保持设计简单、干净且易于访问，同时使用基于网格的设计来保持设计项目的组织和有序，从而创建良好的整体布局。

配色方案

您网站上的调色板和字体将直接告知访问者对您网站的看法，并且是大多数新手设计师开始的地方。想知道选择什么配色方案？只要转向你的品牌或行业观点——以及你的目标受众人口统计数据——将有助于节省你的工作量，并使这个过程变得有点轻松。

版式

说到排版或字体设计，您需要使文本易于阅读，这通常意味着正文应至少为 16 像素。标题或重音使用互补字体是理想的选择，但不要超出三种字体或不必要的大小调整。

导航

导航在用户如何与您的网站或产品交互和使用您的网站或产品方面发挥着不可或缺的作用。

导航设计是一门为用户创建、分析和实施网站或应用程序导航方式的学科。只需花一些时间将导航元素放置在网站上的正确位置，您可以将其存在于网站的页眉、正文和页脚中，但只是用于将访问者尽快引导到他们想要的信息。

内容

获得布局、配色方案、字体和导航设计后，现在您需要向网站添加内容，以使其值得信赖并能够提供一流的产品和服务。效率是关键，因为多余的文字可能会阻碍并削弱品牌的主要卖点。因此，只要想得短小精悍，就能让你的内容井井有条、信息丰富。

在家学习网页设计的最佳资源

随着新型冠状病毒在全球蔓延，我们在学校学习或与他人一起工作的机会不多，但学习是生活的事情，我们也可以在家向一些专业人士学习。在这一部分中，我们将与您分享一些学习网页设计的最佳资源。

网页设计学习书籍

HTML 和 CSS：设计和构建网站

这本书是 Wrox 出版商对 HTML 和 CSS 基础知识的全彩介绍。这本教育书籍是一本您会喜欢拿起、阅读、然后回顾的书籍。这将使设计师希望其他技术主题能够以如此简单、有吸引力和引人入胜的方式呈现。

2. 学习网页设计：初学者指南

本书最近经过修订，非常适合各种背景和技能水平的学生和专业人士。对于初学者来说，它足够简单明了，但又足够全面，可以作为经验丰富的开发人员保持最新技能的有用参考。

3. 不要让我思考：Web 可用性的常识性方法

在第二版中，史蒂夫·克鲁格为那些老板、客户、利益相关者和营销经理坚持做错事的人添加了必要的弹药。如果您设计、编写、编程、拥有或管理网站，则必须阅读本书。— Jeffrey Zeldman，《使用 Web 标准进行设计》一书的作者

4. 为黑客设计

本书帮助新手设计师了解优秀的设计：它从何而来，如何制作（和复制）以及如何将自己变成一名出色的网页设计师。

5. 使用 Web 标准进行设计

这本书最近在伊桑·马科特 (Ethan Marcotte) 的参与下进行了更新。设计人员将通过《使用 Web 标准进行设计》这本书了解编写符合标准的 HTML 和 CSS 的方法和原因，以及处理常见 Web 设计问题的技术。

网页设计在线课程

树屋：网页设计轨道

TreeHouse 的网页设计课程提供 43 小时的有关 HTML、CSS、布局和其他网页设计基础知识的视频和互动课程。它还包括新手图形设计师的基本技能，例如 SVG 教程。

2.Envato Tuts+：适合初学者的响应式网页设计

面向初学者的 Tuts+ 响应式网页设计课程快速介绍了响应式设计、HTML、CSS、媒体查询等基础知识。您可以从其他课程中学习如何使用 Adobe XD 和 Sketch 等设计软件，还可以通过相同的会员资格访问数百万张库存照片、网页模板等。

3. 未来学习：用户体验（UX）设计与研究

Future Learn 和密歇根大学的这个用户设计和研究项目非常适合那些想要更多地了解用户体验设计的有抱负的网页设计师。您可以学习如何更好地了解用户如何与网站和应用程序交互，并使用这些技能提供除基本网站设计之外的更全面的服务。

4. OpenHPI：以人为本的设计课程

如果您想提高设计基础，这门以人为本的设计课程是一个很好的起点。它可以帮助您提高构思和研究技能，并快速（10 小时内）建立您作为设计师的基本技能。

5. WebFlow大学：终极网页设计课程

这门终极网页设计课程是WebFlow大学提供的免费课程，WebFlow大学是一个由CMS和设计工具WebFlow托管和开发的在线学习平台。

它为设计师提供了超过 5 小时的视频课程，很好地介绍了有关网页设计的所有知识。

值得关注的前 5 个网页设计博客

粉碎杂志

这个博客拥有您需要的一切，从图形到灵感以及大量的设计。其博客内容按类别组织，涵盖用户体验、网页设计、React、JavaScript、CSS 和可访问性等主题。本网站上共享的所有内容均旨在易于阅读且信息丰富。

2. 网页设计师仓库

Webdesigner Depot 在世界上最受欢迎的设计博客中脱颖而出。它拥有一个包含技术技巧、新闻、思想领导力帖子和灵感的综合中心。它经常更新，内容来自一系列经验丰富的作者。在这个博客中，您将获得最新的设计新闻，探索不同编码系统的优缺点，发现并学习一些最好的设计资源。

3.Mockplus博客

Mockplus不仅仅是一个博客制作者。该公司为设计师提供了一个原型设计、设计和协作的设计平台，并且通过可扩展的设计系统，您的设计工作流程将完全简化。它拥有设计团队从构思到执行所需的一切。Mockplus博客使用各种工具和软件为来自所有环境的设计人员提供易于使用的内容。它的许多热门帖子都是您可以在设计任务中使用的有用资源、网站和下载的列表。

4.网页设计分类帐

该博客组织精美，包含有用的信息。网页设计师可以在此网站上找到作品集作品、移动设计、业务开发、电子商务甚至可穿戴设备的内容类别。不仅如此，它还有一个评论部分，您可以在其中查看一些可供设计专业人士使用的最新工具。

5.网页设计库

对于设计专业人士来说，这是一个简单但非常有吸引力的博客环境。它为初学者和希望磨练技能的专业人士提供了大量有价值的信息。网站上的“免费赠品”部分也是获取经济实惠资源的好地方。

网页设计师的编码资源

W3学校

W3Schools 是一个免费增值教育网站，用于在线学习编码。它提供涵盖网络开发各个方面的课程。它由挪威的 Refsnes Data 运营。它是一个 Web 开发人员信息网站，提供与 HTML、CSS、JavaScript、SQL、PHP 和 ASP.NET 等 Web 开发主题相关的教程和参考资料。

2. 代码学院

Codecademy 是一个完全免费的教育网站，许多初学者都可以从这里开始学习。该公司致力于帮助所有人，无论他们处于编码之旅的哪个阶段，都能继续学习、成长并对周围的世界产生影响。

3.Udemy

Udemy 是一个在线学习平台，您可以在其中找到适合初学者或更高级程序员的编码资源。它还提供几乎所有可以想象到的语言和框架的编程课程。

4.免费代码营

这是一个完全免费的编码工具，只需要一个电子邮件地址即可开始。在这个网站上，您可以学习JavaScript、HML5、CSS3等强大的技能。您还可以通过在小团队中工作来进一步发展您的技能，为非营利组织构建解决方案，同时获得现实生活经验。