# 出山大师课 / 5G时代的艺术学习新方式 - ID: 336 - URL: https://www.stoyard.com/works/336 - English URL: https://www.stoyard.com/en/works/336 - Year: 2022 - Cover: https://static.glabcms.stoyard.com/stoyard/project/cover/20230101/aaqt7x55h8.jpg - Categories: 大型品牌官网定制, 中小型企业网站方案, 互联网产品, 建筑与设计 - English Categories: Office Website SOLUTION, Products Marketing Website, Internet Products, Design & Architecture - Author: STOYARD - English Author: STOYARD - Publish: 2022-03-02 - Editor: STOYARD SHANGHAI - External Link: http://www.chushan-art.com/ ## 中文主体 ### 项目简介 出山Master Class 是出山与世界级艺术大师合作，共同打造的艺术课程，曾多次举办线下艺术课程教学。我们接受委托策划，设计，开发了包括线上课程，购买，授课，在线学习，作业，课后答疑等网站系统。   1.项目背景 出山Master Class官方网站是出山艺术团队从线下课程教学拓展至线上课程的一次尝试，希望通过这个数字平台实现课程营销和艺术交流的目的。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220318/wnmfg9e8xe.mp4) 2.网站定位 出山艺术团队有非常优质的艺术资源，不论是师资还是内容上都能排在业内前端，所以，我们希望网站的设计效果既有艺术性、创意感又能匹配对方团队的行业地位和愿景。 网站设计前期我们与出山艺术团队经过多次沟通，最终确定整体视觉风格为简约、静怡，另外加入创意构思。出山Master Class网站的内容非常精简，整个界面一目了然，分首页、全部课程以及我的课程三个核心内容。为了将这三类内容以多元有趣的方式展示出来，我们设计了一系列微动效和交互细节。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220318/z6wtfdc9lj.mp4) 3.视觉元素围绕“出山”的意象 网站首页的Banner是一段经过剪辑设计的视频，以大师的教学场景作为切入点，令用户直观感受到网站艺术课程的专业性与趣味性。 下拉页面，我们通过两个内容可以精准地了解到品牌的核心理念，一为专注（专注职业艺术从业者的技能与认知提升），二为探索（探索5G时代的艺术学习便捷方式）。 我们从品牌名称及意象中提取了“山”这个形象并将其抽象成不规则形状，通过微动效将图形进行渲染，使得图形呈现出空间层次，旁侧几行沿着图形边缘滑动的文字以及不断旋转的小图形都能为画面带来灵动的效果。 网站整体给人的感官便犹如山林之风，徐徐而来，万物皆为之而动，既增加了画面趣味，也暗合了出山艺术团队的教学理念。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220318/ga5amra6017.mp4) 4.网站内容细节 网站课程聚集了东、西方的艺术精华，每一期课程都经过团队精心策划，向学习者传达一些具有积极意义的内容，比如“用测量凝视真实”课程，会有艺术家洛佩慈带领学生探讨艺术创作中精细真实的绘画技法,在“东方人物画解析”课上，会有导师带领学生了解古本解析与创作实践。 我们根据不同课程的主题设计了海报，我们将“山”的抽象形状与人物形象融合，在动效的加持下，我们仿佛看到导师们从“山”中走出，与学生一起踏上艺术旅程。  5.动态交互为网站带来活力 “全部课程”这一版块是对课程详情的介绍，其中包括课程介绍、试听课、课程侧重、课程安排以及导师的介绍。 用户可以通过这部分内容了解课程的整体信息，并进行支付。我们为整个页面的内容进行了配图以及版面设计，其中加了一些动态细节，随着页面滚动，会有文字的弹出和滚动，为静态的页面内容增加活泼的气氛，增加节奏感，动静相宜之下，令用户的使用体验更为愉悦，学习气氛也变得更轻松。    我们也设计了与网站适配的手机端页面，整体延续了简约的视觉风格，交互细节也更适用于手机端的展示，我们希望热爱艺术的学生及从业者在各种场景下打开网站都能有耳目一新的体验。  ## English Content ### Introduction CHUSHAN Master Class is working with world-class Master of art, to develop the art of course, has repeatedly held offline art teaching.We commissioned the planning, design, development the online courses, including purchase, teaching, online learning, work, answering questions after class website system, etc.   1. Project background The official website of Master Class is an attempt by the art team to expand from offline course teaching to online courses, hoping to realize the purpose of course marketing and art communication through this digital platform. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220318/wnmfg9e8xe.mp4) 2. Website positioning The mountain art team has very high quality art resources, both in terms of teachers and content can be ranked in the front end of the industry, so we hope that the design effect of the website is artistic, creative sense and can match the industry position and vision of the other team. In the early stage of website design, we communicated with the art team for many times, and finally determined that the overall visual style is simple, quiet and pleasant, and added creative ideas. The content of Master Class website is very simple and the whole interface is clear at a glance. It is divided into three core contents: home page, all courses and my course. In order to display these three types of content in a diverse and interesting way, we designed a series of micro effects and interactive details. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220318/z6wtfdc9lj.mp4) 3. Visual elements revolve around the image of "coming out of mountain" The Banner on the homepage of the website is a video edited and designed. With the teaching scenes of masters as the entry point, users can intuitively feel the professionalism and interest of the website art course. In the drop-down page, we can accurately understand the core concept of the brand through two contents: one is focus (focus on the skills and cognitive improvement of professional art practitioners), the other is exploration (explore the convenient way of art learning in the 5G era). We extracted the image of "mountain" from the brand name and image and abstracted it into an irregular shape. The graphics were rendered through micromotion effect, so that the graphics presented spatial layers. The words sliding along the edge of the graphics in the side lines and the small graphics constantly rotating could bring a clever effect to the picture. The whole website gives people the sense of the wind in the mountains and forests, slowly coming, everything is moving, not only increasing the interest of the picture, but also implicitly in line with the teaching concept of the Ishan art team. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220318/ga5amra6017.mp4) 4. Details of website content Each course is carefully planned by the team to convey some positive content to the learners. For example, in the course "Gazing at Reality through Measurement", the artist Lopez will lead the students to explore the fine and real painting techniques in artistic creation. In the course "Oriental Figure Painting Analysis", There will be a tutor to guide students to understand ancient text analysis and creative practice. We designed the posters according to the themes of different courses. We integrated the abstract shape of "mountain" with the figures. With the support of dynamic effect, we seem to see the tutors step out of the "mountain" and embark on an artistic journey with the students.  5. Dynamic interaction brings life to the site The "All Courses" section is an introduction to the details of the course, including course introduction, trial lectures, course focus, course arrangement and the introduction of the tutor. Through this part, users can understand the overall information of the course and make payment. We have illustrated and designed the layout of the whole page, and added some dynamic details. As the page scrolls, text will pop up and scroll, adding a lively atmosphere and a sense of rhythm to the static content of the page. When the movement is appropriate, the user experience is more pleasant and the learning atmosphere becomes more relaxed.    We have also designed the mobile page adapted to the website, the overall continuation of the simple visual style, and the interactive details are more suitable for mobile display. We hope that students and practitioners who love art can have a refreshing experience when opening the website in various scenarios. 