视觉设计全能速成完结素材第五节

产品介绍网页设计奶哥—视觉设计全能速成班字体VIICON包装网页H5第五节讲师：奶哥规范设计细节功能场景排版技法配色体系创意构思整齐品牌调性不同功能场景下的网页设计网页设计的流程与方法网页设计的细节—低级错误实战：产品介绍页设计+2.5d风格插画本节课主要内容网页设计的功能与场景01Partone不同场景下的网页设计，其功能和设计方法也不同为什么要知道分类？区分设计方法！网页设计网页设计也被称为WebDesign、网站设计、Websitedesign、WUI等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的APP来获取资讯，但是在工作场景中基于个人电脑平台的网站上网方式比手机久很多。网页是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。网页的主要类型与设计分工形象网站功能网站信息门户营销专题形象网站品牌与产品的宣传网站，用于信息传达，理念传达，产品介绍通常追求所谓“高端”、“大气”、“上档次”的风格为了达到让消费者认同品牌这个要求。一般由品牌与营销的视觉设计师进行设计网页的主要类型与设计分工综合性的用户网站，主要有搜索、新闻这两个种类为主网站结构流程复杂，组件化的设计，以迭代的方式维护设计一般由产品设计方向的界面设计师进行设计网页的主要类型与设计分工信息门户功能网站ToB后台、办公OA、CRM产品等办公自动化系统注重功能业务逻辑与交互，以体验和效率为重一般由产品设计方向的界面设计师进行设计网页的主要类型与设计分工促销、专题报道等各式活动页面，有时间性在于抓住用户眼球，传达信息，提高转化和销量一般由品牌营销设计方向的视觉设计师进行设计网页的主要类型与设计分工营销相关根据网页的用途进行设计方法和设计依据的判断本次案例以品牌形象网站为切入点02Parttwo网页设计的流程与方法知识体系与技法的整合使用，需要各独立领域针对性地学习网页设计工作流程原型图需求方或运营完成分析业务细节了解业务目的视觉稿设计修改定稿切图与标注前端代码开发结合找灵感构思设计初稿自行调整根据相关人员意见修改输出页面切图程序员开发阶段本阶段设计基本不调整项目走查上线内测环境视觉走查撰写验收报告跟进开发修改进度原型图示例页面切图展示没那么简单，都很有深挖的空间创意设计页面排版字体设计画面配色文字转图形的视觉表现整体图形创意页面排版布局引导用户视觉路径突出重点信息文字排版和创意字型设计品牌调性与氛围合理的配色网页设计之视觉设计的工作流程项目讲解：某云平台产品介绍页设计网页视觉设计的工作流程深度全面了解需求分析+沟通+确认自行浏览原型与需求方确认各项需求细节确认项目工作时间安排接到一个需求之后logo版块1版块2版块3登陆制作实例banner用户评价用户评价1:文字文字文字文字文字文字文字文字文字文字用户评价1:文字文字文字文字文字文字文字文字文字文字业务介绍1文字文字文字文字文字文字文字文字文字文字业务介绍2文字文字文字文字文字文字文字文字文字文字成功案例展示邮箱联系界面关于我们设计一个demo吧看看我们能帮你什么根据页面类型寻找竞品与画面灵感网页视觉设计的工作流程收集不同风格的网页从各维度收集如排版，节奏，风格，主视觉根据页面类型寻找竞品与画面灵感网页视觉设计的工作流程收集不同风格的网页从各维度收集如排版，节奏，风格，主视觉页面整体排版布局头部画面创意构思进行无色的页面排版大致勾勒主视觉画面网页视觉设计的工作流程网页设计相关尺寸超出安全区域的最好为填充色，或可以被切割的不重要内容。具体方案可与前端开发进行商讨主流的分辨率宽度1920x1080px来设计第一屏1920x1080px来设计内容安全区域为1200px通常商品一排不超过5个top高度60-100logo网页设计相关尺寸:BANNER内容安全区域为1200px整体尺寸区域为1920px网页整体框架配色使用品牌色，辅助色根据竞品和主流审美进行细节颜色调整网页视觉设计的工作流程很好的配色网站：/如何提取页面配色：根据你的logo颜色进行查找高亮文字标题文字正文文字品牌主色网页辅助配色网页辅助配色网页辅助配色页面设计细节设计刻画具体版块的细节设计可在原有框架上优化网页视觉设计的工作流程使用一个贯穿始终的细节样式细节也是需要概念支撑的从概念推导—介绍介绍的具象华符号—对话框进行样式上的艺术处理绘制（设计）主视觉以及需要手绘（设计）的插图根据文案设计主视觉统一风格的前提下绘制页面其他元素网页视觉设计的工作流程考虑到具体工作量，本次作业（网页设计）主视觉可以使用第三课作业绘制的辅助图形！特大喜讯!!!!!!!!!!!细节调整文字+配色+图形调整文字细节图形，形状的细节微调排版间距，对齐维度的检查网页视觉设计的工作流程图片“质量”也要高大上图片“质量”也要高大上我没办法表达哪里不好，反正就是感觉哪里不对劲。。。。关于细节的弹幕差之毫厘，失之千里一个像素的距离对齐啊对齐～糊了有点粗糙，不够精致看起来不够严谨网页设计的细节与错误03Parttwo注意标准化的细节，规避低级错误的出现以上所述就是传说中的设计细节严谨的细节很大程度上决定设计的精致度和设计师的专业度产品介绍页设计+2.5d风格插画04Parttwo辅助图形的落地使用与排版实战产品介绍页设计2.5d风格插画设计作业来了～每节课的作业可以在课后的一周内提交，这是最快的～根据每个同学个人水平可以延后提交，但是不建议超过两周。还在拖欠作业的同学请尽快补交，课程过半了。提交时间根据第一课作业