Art of Ascent

 

Visual identity, graphic and web design for online platform offering courses for creatives

Client

Art of Ascent is an online platform offering courses for creatives. Through asynchronous, project-based classes creatives can bring their visions to life from brand identity to web design.

Challenge

After a few years of teaching as a freelancer, I started Art of Ascent to host my own online courses. I needed to establish a brand identity separate from my identity as a freelancer, one that could grow with my business, but that still felt familiar to the followers who already supported me. There were no existing visuals, so they needed to conceived and designed for the website, Instagram and email channels.

Approach

When designing for your own brand, it’s easy to disregard the process, design what you like or think that everything has to happen at once, but I committed to treating this like client work. I systematically generated visual components based on the brand identity, then created assets from them. I ultimately created a vibrant, modern and not too serious visual identity to implement across multiple platforms.

 

Role

Creative Director & Designer

Expertise

Visual Identity, Branding, Graphic Design, Website Design, Digital Marketing, E-commerce, Email Marketing, UX/UI Design

Tools

Adobe Illustrator, Photoshop, Squarespace, Javascript, CSS

Visual Identity & Branding

Establishing the Visual Brand Identity

Before I started designing brand assets, I worked to establish the essential elements of the brand identity: color, typography and graphic styles. I reviewed my mission and values, defined my brand voice and personality, and got clear on my unique positioning. “Energetic” and “approachable” were terms frequently used in my teaching reviews, and students loved that I could relate to many of their own experiences and designed my classes from that place.

 
 

Selecting The Color Palette

Guided by color psychology, I generated a wealth of colors that aligned with the brand identity. I went through a whole bunch of options from neons to purples. Then I used color theory to create combinations for possible palettes. Ultimately, I landed on the red-orange family to invoke or passion and excitement. These colors are used prominently throughout and for calls to action. To balance the high energy, I chose cream to create a more casual and calming vibe. It’s also best for readability. The brown is approachable and ground. It offers high contrast for text, which is crucial for accessibility.

 

Typography

Because I went bold with the color palette, I decided to keep the typography restrained. I chose ITC Avant Garde Gothic for its general readability, modern and clean look. It’s used for all types of headers with varying weights and sizes to offer different tones and to create a visual hierarchy. To contrast, I selected Source Code Variable for body text. It’s a monospaced sans serif designed for user interfaces, and, as a coding font, it’s a bit nerdy, perfect for design classes for creatives.

 

Graphic Styles

The final element to the brand identity, I worked to establish the graphic styles I’d use for background and standalone images in future brand assets. I went with amorphous radial gradients and “lines” that easily add color and depth to backgrounds and paired them with flat designed illustrations to keep standalone images informative and digestible.

Artofascent.com

Home Page

The Art of Ascent home page receives the majority of traffic, so it’s important to make a good impression for people visiting for the first time and for returning users. Keeping in line with the brand identity, the structure is no-nonsense — it’s simple and approachable — but the energy is still lively and fun. It’s easy to navigate and users can make their way through to the courses that interest them.

 

Long Form Landing Pages

Because the courses are high ticket items, it’s important to give the user a lot of information and indicators that build trust. I started writing copy for each course in the brand voice based on what the user would need to make an informed decision, organized it into an information hierarchy, then I built a template for a long form landing page. The landing page positioned various details of the offering in neat sections from features and benefits that describe the course and how it can help to student testimonials that increase trust. Along the page are plenty of repeating calls to action to give the user the option to opt-in when ready. The landing page ends with an email capture sign up as a final effort to maintain engagement with interested users through a newsletter.

 

Animated Moments

To better attract users’ attentions and engage people better, I integrated various types of web animation throughout the site. On page load there’s a moving gradient to highlight the announcement bar and on hover a pop-up drop shadow encourages a newsletter sign up, to name a couple. These Javascript/CSS animations add a levity and playfulness to the site, but they’re also really successful at encouraging interaction and moving users through to conversion.

Social

Instagram Templates

For Art of Ascent, Instagram is everything. It’s a place to showcase students’ work, connect with other designers, announce upcoming classes and engage with creatives looking for help to launch their own brands. Creating templates for Instagram based on silos of content (ie. testimonials, announcements, tips, student showcases) enabled me to quickly create content easily and always on brand.

 

Information Packed Carousels

As an information sharing brand, teaching through social media is one of the most critical ways to attract new followers and increase engagement through to conversions. These carousels perform well as Instagram ads and for users to find in their feed. And because Instagram re-shows carousel posts starting from the second slide, there’s even more opportunity for impressions. In the last slide, icons are included to prompt interaction. The save icon is the most utilized; it keeps users linked to the brand.

“Ana is a justice-focused artist, designer, and teacher. I really enjoyed our time together because she was genuinely interested in the skills I wanted to learn and how to incorporate them into the brand identity and brand design projects we were working on. She is a very encouraging colleague, and I appreciated her leadership style. Working with Ana brought me a lot of joy because her teaching style is accessible and thoughtful. I hope we're able to work together again in the future!”

-Esha Pillay, Art of Ascent Social Media Coordinator

 

Email & Blog

Seamlessly Going from Email to Blog

Content creation takes a lot of work, so finding ways to repackage and reuse content is crucial, especially for a 1-person marketing team. I established dimensions for graphics across email and the blog, then designed templates for various kinds of content, so with one content idea we can multiply its reach.