Ana Panovic's profile

SaaS platform for online courses

Colors

Each color applied on product causes a different feeling with users. Cooler colors such as blue, purple and green have a tendency to be more calming and relaxing, while warm colors are often associated with passion and love, but also with anger and danger. Some studies showed that woman and man even have different taste in choosing favorite color, but for both the most pleasant one is blue.

Using a Color tool from Google Material design helped me create color palettes for UI and to measure their accessibility. Since white is peace and space, for primary color palette I’ve decided to go with variations of white. Blue color tends to bring feeling of calmness, spirituality, security and trust. It also gives more friendly and relaxing feeling to the users, and this is the main reason why I decided to use a variation of blue for Secondary color palette.

Typography

Well chosen typography will increase engagement, help our eyes to easily flow through content making it more readable. Besides choosing the right font family defining a font color and size can increase accessibility and readability. Font size should change depending on the user screen resolution, so when transitioning from desktop to mobile font size is also adjusting and fitting the screen.

I’ve chosen to go with Lato font family for it’s simple and modern design. It’s a sans serif font which is very versatile with strong and clean presence. Accessibility and readability is achieved with combining Lato font with the right colors of letters, backgrounds and UI elements.

Grid

White space, also known as a negative space, is very important part and should be considered while developing design. In design process using of negative space helps us draws attention, separate areas but also group elements. Lack of white space in design can evoke stressful and confusing impression of a product.

Use of grid helps easily organize elements. Grid provides structure and alignment for interface elements, assisting in hierarchy and consistency. Using grid helps us build dynamic between elements by providing appropriate margins, gutters and columns.

Usage of grid system also helps in developing responsive design for various screen sizes. This made me think how would this application look on a Mobile application; which functionalities would it keep. Is this App going to enable users to just review and share their projects, or should they be able to create and build new courses right on their mobile phones?
SaaS platform for online courses
Published:

SaaS platform for online courses

High fidelity design for SaaS platform which enables users to make their own online courses. Platform consists of various widgets, and users are Read More

Published: