Skillshare E-Learning Style Guide
Style guides are a popular way to control the use of design elements for websites, company branding and many other applications. These guides not only contain the details for using a company's brand elements but can also be used to reflect their mission.
I'm working on my very first online course about creating design with code, specifically P5.js. About half way through the second video, I noticed that I wasn't maintaining consistency of the fonts, colors and other design elements that I planned to use throughout the course videos. Then I realized that I forgot to create a style guide. So, I decided to write this article.
A style guide has more than just the obvious purpose. Some guides emphasize things like mission statements or the reason behind the choice of design elements included in the guide.
Being interested in style guides for e-learning and online courses, I checked out Skillshare's style guide in detail. Skillshare is an online course marketplace for creatives and my personal favorite.
Their design style guide, or brand guidelines, starts with their logo. When talking about the Skillshare logo, they begin with a discussion of how the design elements in the logo reflect Skillshare itself. After that, they introduce their logo alternatives and how these logos should be used, including clearspace, how to place the logo on an image and the use of the trademark symbol. They also give a few examples of how not to use their logo.
Moving on to fonts, they introduce their primary and secondary typefaces, along with the hierarchy guidelines for titles and body text. They also include some samples of typography used in both still and animated graphics.
When introducing color, the guide begins with a discussion of how their choices of color reflects the company's mission. They present their primary and secondary color palettes, along with neutral and tertiary palettes. For each color they include the color name, RGB color and Hex color codes.
The Path is a design element used specifically to reflect their mission, especially when used in animation. They include end cards featuring the moving path and their tagline that can be added to videos. They also include more general animation samples, including a text card, lower third and logo bug.
Lastly, they discuss their use of stylized brand photography and lifestyle brand photography, including several samples.
Skillshare Brand Guidelines
https://brand.skillshare.com/page-2
I'm working on my very first online course about creating design with code, specifically P5.js. About half way through the second video, I noticed that I wasn't maintaining consistency of the fonts, colors and other design elements that I planned to use throughout the course videos. Then I realized that I forgot to create a style guide. So, I decided to write this article.
A style guide has more than just the obvious purpose. Some guides emphasize things like mission statements or the reason behind the choice of design elements included in the guide.
Being interested in style guides for e-learning and online courses, I checked out Skillshare's style guide in detail. Skillshare is an online course marketplace for creatives and my personal favorite.
Their design style guide, or brand guidelines, starts with their logo. When talking about the Skillshare logo, they begin with a discussion of how the design elements in the logo reflect Skillshare itself. After that, they introduce their logo alternatives and how these logos should be used, including clearspace, how to place the logo on an image and the use of the trademark symbol. They also give a few examples of how not to use their logo.
Moving on to fonts, they introduce their primary and secondary typefaces, along with the hierarchy guidelines for titles and body text. They also include some samples of typography used in both still and animated graphics.
When introducing color, the guide begins with a discussion of how their choices of color reflects the company's mission. They present their primary and secondary color palettes, along with neutral and tertiary palettes. For each color they include the color name, RGB color and Hex color codes.
The Path is a design element used specifically to reflect their mission, especially when used in animation. They include end cards featuring the moving path and their tagline that can be added to videos. They also include more general animation samples, including a text card, lower third and logo bug.
Lastly, they discuss their use of stylized brand photography and lifestyle brand photography, including several samples.
Skillshare Brand Guidelines
https://brand.skillshare.com/page-2
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
