去某公司培训了有二十天了，目前这前端网页设计水平可以吗？

时间：2022-09-03 22:06:01 | 来源：网站运营

时间：2022-09-03 22:06:01 来源：网站运营

看了题主的前端输出稿，还是中规中矩，算不错的了。只是有一部分视觉元素的对齐、以及某些文字间距有些拥挤。不知道是设计稿本身如此还是重构过程中没有注意，但总的来说还是非常不错的。

△图例：优秀的网页设计作品。来源：Behance。

另外，本人也是从事网页设计行业的，会一些前端，工作了有一定时间。之前回答了一些有关自学网页设计的问题，接下来我就结合自身工作经历，来说说我对学习网页设计的认识吧，都说开卷有益，希望以下内容对题主有所帮助。

一、自学网页设计之前，你需要知道的4件事。

自学网页设计，你首先得了解网站的制作流程。有了全局的概览后，能对接下来需要学习的知识了然于胸。然后再做有针对性的学习和训练，方能够更高效率的入门网页设计。

1、网站的制作流程

引用于：自学网页设计，需要了解的网站开发流程

通常情况下，任何一网站的建立，都会经过“分析策划—交互设计—视觉设计—前端制作—后端制作—测试上线”6个环节。

在实际的工作岗位中，一般由“网页设计师”负责「视觉设计」板块，即我们平常所说的「网页设计」。而「前端制作」环节则主要有“前端工程师”来负责，即用代码来重构还原设计师的视觉稿，这一环节也就是我们平常所说的「网页制作」。

很多初学网页设计的朋友，对这两者的关系往往是傻傻分不清楚的状态，对自己的专业定位没有清晰的认识。这就导致学设计的同学，后来干到了“前端工程师”的岗位，学前端的孩子开始猛补“设计知识”，这个就是要走偏的节奏。

2、网页设计，是以视觉设计为主的工作。

自学网页设计的核心任务是学习“视觉设计”相关的知识点。用什么样的排版，或者富有创意的表现形式，才能如何更加高效的传达版面信息？如何规划页面路径？用什么样的颜色，以及多大的字号？这是新手学习网页设计应该画下的重点。

一个网页被设计出来，是给人用，给人看的。 要好看（简洁）、要好用（高效）这才是一个设计师需要反复考虑的。视觉+交互，是网页设计师的核心竞争力。

其中“视觉设计”的依据，源于前面的策划和交互设计。最后出具的“视觉设计稿”得符合品牌定位，满足生产运营、以及用户需求，这是网页设计师必修的基本功！

3、网页制作，是以前端代码为主。

网页制作在流程上，是在设计之后。这部分工作通常是由WEB前端工程师来完成的，工程师通常会运用到HTML、CSS、以及JavaScript、jQuery等前端代码，来还原网页设计师的“视觉设计稿”，以及交互动画等。

“前端工程师”除了要配合网页设计师外，还要配合做后端工程师，做好网页端的数据收集处理等工作。如果你要励志成为一个优秀的网页设计师，请牢记自己的岗位职责和学习重点，在没有认清“视觉设计”前，要当心自己是不是越位到Web前端开发这个坑里去了。

▽图例：优秀的电商网页设计作品，视觉合成。作者：尚云

再比如优化网站所需的SEO、Ajax等技术，虽无需你动手实践，但能做到了解一二，也是不错的加分项。在设计的时候，也可充分利用这些规则和技术来规划你的版面，使其更加的专业友好。

4、那么问题来了，新手学习网页设计要学些什么？

(1).首先要精通设计软件，把Photoshop玩转，这是网页设计的主力工具！

(2).深入学习排版设计、色彩构成，掌握视觉基础规律（构成、透视、光影）

(3).掌握网页设计规范、设计创意的表达思路流程。了解常见的网页布局形式，学习交互设计等基础知识。

(4).了解前端代码HTML、CSS、JS、JQuery的运用，学一款代码编辑软件（如：Dreamweaver）

(5).了解你设计网站的公司及产品，熟悉这个公司及其产品面向的人群！

(6).拓展学习网站优化、开发、后台数据处理常识（加分项目！）

前四个是基本功，后面的是加分项。越靠前越重要！

二、如何开始着手，系统学习网页设计？

1.从设计书籍着手，学习网页设计理论。

(1).网页设计实践畅销：《界面设计模式(第2版)》

(2).设计入门启蒙书籍：《写给大家看的设计书(第4版)》

(3).色彩搭配实践书籍：《互联网产品(Web/移动Web/APP)视觉设计·配色篇》

(4).网页交互设计经典：《简约至上：交互式设计四策略》

(5).如何制作响应式网页：《响应式Web设计实践》

2.从视频教程着手，学习网页设计实践技能。

学习路线参考：http://www.xxriji.cn/career/7.html

(1).【基础】视觉设计基础理论：学习三大构成、素描基础。

(2).【基础】必备网页设计软件：学习Photoshop视频教程、Dreamweaver视频教程。

(3).【核心】网页设计专业知识：学习网页设计设计概述、制作流程、视觉元素、色彩搭配、以网页布局排版、切图、交互知识等。

(4).【核心】网页设计视觉提高：学习网页设计思路，将文案创意到视觉化呈现的全过程，以及画面光影细节刻画的技能提高。

(5).【拓展】更好的团队协作：学习HTML+CSS网页前端课程。

知识的学习并非一成不变，不同公司的岗位职责、业务工作内容各不相同，以上只是从最基础的层面谈到了一些通识的东西，希望对初学者有所帮助！

三、关于网页设计行业的需求

目前关于网页设计比较热门的两个方向，其一是电商视觉设计、另一个是传统的网站设计。电商视觉设计以淘宝、天猫、京东的店铺装修、产品包装、节日活动的宣传设计为主；传统的网站设计以企业站、门户站、专题活动页面的设计为主。

像网页设计这种职业技能，完全可以通过一两个月的集中学习快速入门的，不要把网页设计想得太过复杂；有些看起来很厉害的设计，也许在你的工作中并派不上用场。

△图：优秀的网页设计作品

刚开始学习时，就老老实实的先把photoshop软件技能、以及排版设计这两个板块的内容掌握好。后期再进一步学习色彩搭配、图形设计、累积不同的创意表现形式即可。关于排版设计可以参考设计行业的经典巨著《写给大家看的设计书》，记得一定要看。

一口气不能吃成胖子，当你扎根一个行业岗位后，向着同行的竞争对手多多学习，这是最为快速的成长方式。如果你是完全的0基础，要系统学习网页设计，最后就再参考一下这系列的BAT网页设计自学教程吧，祝你学习成功。

(完)

未经许可禁止转载，侵权必究！