# dinlab / 设计学习实训平台官网 - ID: 316 - URL: https://www.stoyard.com/works/316 - English URL: https://www.stoyard.com/en/works/316 - Year: 2021 - Cover: https://static.glabcms.stoyard.com/stoyard/project/cover/20210608/iwoepraux8.png - Categories: 大型品牌官网定制, 中小型企业网站方案, APP/小程序解决方案, 视频、动态图形、动画设计, 互联网产品 - English Categories: Office Website SOLUTION, Products Marketing Website, APP Programs Design Solution, Motion Graphics, Internet Products - Author: 葛熙呈 - English Author: Xicheng Ge - Editor: STOYARD SHANGHAI - External Link: https://www.dinlab.cn ## 中文主体 ### 项目简介 Din芝士学院是由BAT成员创建的前沿设计学习实训平台。致力于为设计师打造职业规划成长路径,提供BAT、奥美、frog设计师带队的实训项目和跨国企业的设计证书课程。     1.知识付费行业火热 认知盈余时代下海量的信息让用户在难以抉择的同时产生了知识焦虑 ，“信息降噪”成为品牌和消费者共识，知识分享类平台成为消费者决策参考的重要渠道。 随着用户对高质量内容的需求不断增加，同类型的知识付费产品是否能提供实时的优质内容便成为其核心竞争力。 2021年，我们为Din芝士学院设计搭建了网站，提供UI界面设计 、UI交互动态、Gif、视频Demo、技术定制开发、小程序、H5等十几种服务。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210714/f8hgb3qk9up.mp4) 2.网站的非凡开场 我们为网站首屏设计了一组动态的视觉，视频素材来自学员中最受欢迎的设计风格和优秀作品，以此引导用户对网站课程内容产生兴趣也对网站内容的质量产生信任。 视频经过简单的闪屏处理，不同作品友好衔接在一起，富有节奏感，令人感觉到欢快和灵动。经过暗色处理的视频不至于让人眼花缭乱，可以更好的突出“发现你的创造力”这句品牌slogan。动与静的结合会使得整个效果更加生动有效。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210714/vw2geucjlc.mp4)  3.网站的课程产品 在内容的布局中，我们不仅将课程清晰直接的传达给用户，还为在平台学习的用户以及对行业感兴趣的用户设置了梳理了部分名企职位要求，如此一来，大家可以更理性的选择自己想要学习的课程。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210714/tnve9rb27z.mp4) 我们希望可以通过简约有效、逻辑清晰、可理解的方式提供知识服务，所以我们在界面和交互的设计时，尽量在各个环节为用户节省时间，删除没必要的内容，将各大热门课程直观的呈现出来，以供用户选择。  [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210726/o97eid2r8l.mp4) 4.更受年轻用户喜欢的细节 din芝士学院的大部分受众为年轻用户，有艺术设计专业的学生、或是从业者，也有纯爱好者。 基于用户的特性，在视觉的呈现效果方面，我们为品牌选了青春跳跃的色彩，蓝、黄、红这些饱和度较高的颜色。我们还设计了信息滚动过程中的页面背景、课程封面也采用了极具视觉冲击力的作品。 我们还设计了大量微动态，每个栏目入口的banner图，有流动的色彩背景也有跃动的形状，包括旋转的logo图形。这些细节，都是我们满满的诚意。我们希望通过表现力强的画面吸引用户目光，并给人一种专业、年轻、前卫的品牌形象。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210726/p5omwogzsag.mp4) 5.让用户有所获得 网站上除了具体的课程板块，还设置了路径和活动两个类目。 路径顾名思义就是学习路径、职业路径，是学院归纳整理的大板块学习入口，方便学员查找自己感兴趣的内容。活动则是对学员的鼓励，通过完成不同主题活动，参与活动讨论，来拓展学员关系，增加学习兴趣。我们最终目的，是希望学员能在这里获得知识。     6.stoyard独家技术支持 我们为平台提供了独家技术支持，承担开发和维护的职责，策划前期，我们调研了许多设计师与学生，同时采纳了部分来自团队中设计师的建议，根据这些信息对用户使用体验有了更为全面的了解。 实训平台支持电脑PC端、Ipad、以及移动端，用户通过多端口观看课程，方便在任何情况下学习内容，不会改变浏览的舒适度。  7.更加合理化的个人中心 个人中心是平台的重要部分，为了增强用户的使用度，除必要的课程与订单外，网站还增加我的活动、打卡、返现以及邀请奖励的项目，通过这些交互小细节，丰富这一板块的内容，打破传统的订单模式。  8.社交文化 dinlab招募了不同行业的优质导师搭建更为多元化、 纵深化的内容体系。通过他们丰富的工作经验和专业知识满足不同用户的需求，所以师资的力量也是网站的品牌。 知识付费的信息传播高度依赖分散式的个体多节点传播，借助于个体的社交关系，付费类知识产品可以在社交网络中被广泛传播。所以，在内容中，推荐好友学习以及签约讲师，也是品牌传播的重要渠道，凸显了以信任为核心的社交化信息传播模式。   ## English Content ### Introduction Din cheese college was founded by members of the BAT cutting-edge design learning training platform.Committed to provide designers make career planning growth path, BAT, ogilvy & mather, frog designers led the training project and the design of the multinational enterprise certificate course.     1. The knowledge payment industry is hot In the era of cognitive surplus, massive information makes it difficult for users to make choices while generating knowledge anxiety. "Information noise reduction" has become a consensus between brands and consumers, and knowledge sharing platforms have become an important channel for consumers to make decisions. With the increasing demand of users for high-quality content, whether the same type of paid knowledge products can provide real-time high-quality content has become its core competitiveness. In 2021, we set up a website for Din Cheese Institute design, providing more than a dozen services such as UI interface design, UI interactive dynamics, Gif, video Demo, technical custom development, small program, H5 and so on. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210714/f8hgb3qk9up.mp4) 2. The extraordinary opening of the site We have designed a set of dynamic visuals for the first screen of the website. The video materials come from the most popular design styles and excellent works among the students, so as to guide the users to have an interest in the course content of the website and create trust in the quality of the content. The video is processed by a simple flash screen, and the different works are connected together in a friendly way, which is full of rhythm and makes people feel cheerful and smart. The video with dark color processing will not dazzle people and can better highlight the brand slogan "Discover your creativity". The combination of motion and stillness makes the whole effect more vivid and effective. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210714/vw2geucjlc.mp4)  3. Course products of the website In the layout of content, we not only clearly and directly convey the courses to users, but also set up some job requirements of famous enterprises for users who are learning on the platform and those who are interested in the industry. In this way, you can choose the courses you want to learn more rationally. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210714/tnve9rb27z.mp4) We hope to provide knowledge services in a simple, effective, logical and understandable way. Therefore, in the design of interface and interaction, we try our best to save time for users in every link, delete unnecessary content, and present popular courses intuitively for users to choose.  [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210726/o97eid2r8l.mp4) 4. Details that are more popular with younger users The majority of din Cheese Academy's audience is young, ranging from art and design students and practitioners to pure enthusiasts. Based on the characteristics of users, in terms of visual presentation effect, we chose the color of youth jumping for the brand, blue, yellow, red these colors with higher saturation. We also designed the background of the page in the process of information scrolling, and the course cover also adopted the works with great visual impact. We also designed a lot of micro-dynamics, the banner images at the entrance of each column, the flowing color background and the bouncing shapes, including the rotating logo graphics. These details are full of our sincerity. We hope to attract the eyes of users through the expressive picture, and give people a professional, young, avant-garde brand image. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20210726/p5omwogzsag.mp4) 5. Give users something to gain In addition to the specific course section, the website also has two categories: path and activity. Path, as the name implies, is the learning path and career path. It is the entrance of the large block of learning summarized by the school, so as to facilitate students to find the content they are interested in. Activity is to encourage students, through the completion of different theme activities, participate in the activity discussion, to expand the relationship between students, increase the interest in learning. Our ultimate goal is that students can gain knowledge here.     6.stoyard exclusive technical support The front and back end technology of the website was completed by our team in collaboration with dinlab. We also provided exclusive technical support for the platform and undertook the responsibility of development and maintenance. In the process of redesign, we surveyed many designers and students, and adopted some suggestions from designers in the team. Based on these information, we have a more comprehensive understanding of user experience. The training platform supports both PC and mobile terminals. Users can watch courses through multiple ports, which is convenient for learning content under any circumstances without changing the comfort of browsing.  7. More self-centered Personal Center is an important part of the platform. In order to enhance users' usage degree, besides necessary courses and orders, the website also adds activities, punch in, cash back and invite rewards. Through these small details of interaction, the content of this section is enriched and the traditional order mode is broken.  8. Social culture dinlab recruits high-quality tutors from different industries to build a more diversified and vertically deepened content system. Through their rich work experience and professional knowledge to meet the needs of different users, so the strength of teachers is also the brand of the website. The information transmission of paid knowledge is highly dependent on decentralized individual multi-node communication. With the help of individual social relations, paid knowledge products can be widely disseminated in social networks. Therefore, in the content, recommending friends to learn and signing lecturers are also important channels for brand communication, highlighting the social information communication mode with trust as the core.  