从线框到样式指南的现代网页设计工作流程

使用线框、样式指南、Photoshop、Zeplin 和 Invision 应用程序使你的网页设计过程简单有效

讲师：Muhammad Ahsan Pervaiz

口袋资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

你将会学到的

• 如何为开发人员设计和开发编码风格指南
• 了解有关在项目中构建和使用情绪板的所有信息
• 学习 Zeplin、Balsamiq Mockups 和 Invision App 等工具
• 了解响应式网页设计项目的专业流程
• 了解问题以从客户那里获取项目详细信息
• 设计简报应该有什么？
• 了解IDEATION过程（早期草图）
• 为PC、平板电脑或智能手机等不同屏幕设计和开发网格系统
• 使用 Balsamiq Mockups 设计线框
• 如何为响应式网页设计设置网格和指南
• 了解开发人员的想法“开发人员如何编码你的设计”
• 构建原型以显示网站流程和交互
• 使用 Zeplin 创建在线样式指南
• 如何为开发者设计
• 了解设计框架，如原子设计或内容优先方法

显示更少

要求

• 良好的 Adob​​e Photoshop CC 知识

说明

已更新 ► 2020 年 10 月（添加了有关 Figma 和 Adob​​e XD 的新讲座）

通过此网页设计课程，让你的网页设计过程变得简单、有效且轻松

从过去几年开始，传统网页设计师的工作发生了翻天覆地的变化。为每个屏幕设计（响应式网页设计）并不容易。每个年轻的网页设计师都会想到这样的问题，例如如何更改布局？如何为响应式网页设计设置网格？隐藏和显示哪些内容？

现在在每个网页设计项目中，我们设计师  

• 收集项目需求（来自客户和用户）   
• 勾勒你网站的早期创意
• 线框这些想法   
• 将线框转换为设计模型   
• 为开发人员准备规格和样式指南   
• 创建原型以显示流程和交互
• 如何在 Photoshop 中设计网站的响应式视图
• 通过改进你的网页设计工作流程来节省时间       

每个现代设计师在网页设计过程中使用超过 2 到 3 种工具。设计师还需要与开发人员进行很多协作，以便如何解决所有这些问题。   

因此，在本课程中，我将向你展示创建响应式网页设计的现代流程，从从客户那里收集信息和设计简报，到为开发人员创建草图、线框和原型，甚至是样式指南。   

你将在本课程中使用的工具是   

• Adobe Photoshop 
• Balsamiq 模型   
• 无花果
• Adobe XD   
• 齐柏林应用   

你将在本课程中接触的设计框架是

• 原子设计框架
• 8点网格系统

最后，我将向网页设计师展示其他类似的在线应用程序，并比较它们的优缺点。   

现在，如果你准备好学习现代网页设计并成为一流的网页设计师   

立即开始本课程  

此课程面向哪些人：

• 网站设计者
• 用户界面设计师
• Web开发人员
• 平面设计师
• 创意总监
• 项目经理
• 前端开发人员