Ultimate Angular

Ultimate Angular is an online learning resource for the JavaScript and Angular community. Since September 2016, I have worked with Todd Motto to build a brand and a home for his courses.

Ultimate Angular (UA) started life on a subdomain of Todd’s Website (courses.toddmotto.com). In September 2016, Todd approached me to create a new home for his courses, and give him room to expand in the future. Angular 2 was also on the horizon to launch, and as Todd was producing courses to help users learn the framework, our aim was to launch UA to coincide with it’s release.

Building a Brand

As we were occupying the Angular niche, Todd had given the brief that the logo should either be a play on the Angular logo, or have strong ties that would make it easily recognisable as being an Angular project. To begin, I started quickly sketching rough directions we could take with the Angular 2 logo serving as a base.

The first attempts to incorporate a play button into the Angular 2 logo produced interesting results, however we both agreed the direction might not be recognisable enough as an independent (yet still related) project. I am also wary of logos that don’t work flat, or without colour. Whilst logos that are 3D or use multiple colours can look really great in the correct contexts, often situations present themselves where it isn’t appropriate to present them with all their bells and whistles. Ensuring a logo can be easily recognised when it is presented in less than ideal circumstances (e.g. monotone, or at small sizes) is crucial.

Building on the ideas laid down before, I decided to keep things much simpler and started playing with letterforms. As UA was destined to be a learning resource for the Angular community, I started exploring and researching University logos and crests.

After a number of sketches, we settled on combining the U and A from Ultimate Angular into one flowing shape. Once we had a finalised enough idea of the shape, I proceeded to vector the sketch. Below on the left is the direct trace of the drawing, with the right after I had spent time correcting the curves and sizing of the mark.

Having refined the combined U & A letterforms, the next step was to combine the Angular 2 logo and the newly created lettform into one easily recognisable logo. The finished version can be viewed below:

Creating the Platform

Due to the imminent release of Angular 2, our goal with the first version of the website was to release something useable, but gave us a base to iterate on. Myself and Todd built first version of the site over the course of 7 days.

Iterating and Improving

Since launching the original website, we have been refining its design and usability. One main focus was trying to improve how we presented all the different courses to the user. As the library of material grows in size, ensuring users can find the courses of most interest to them was important. The original design of the courses page had all individual courses and bundles grouped together. Distinguishing between the course cards was difficult at best, and made it a challenge for us to display the bundle discounts effectively.

The first step was to split each type of course into different categories. With the approaching launch of UA’s TypeScript courses, it made sense to group them by framework.

The next focus was to look at what each course card was conveying to the user. The original card designs had a lot of wasted space due to the large image header. Eliminating this freed up room for more useful information, such as the course release date. We also reduced the total height of the course card, allowing more courses to fit on screen at one time.

The next place we focused our efforts was on the performance and page weight of the website. Whilst the page weight of the site wasn’t particularly large (~250kb), it was always worth looking at ways to improve the situation. The first step was to ensure all our assets were optimised efficiently. Running all our images through TinyPNG and our SVGs through SVGOMG reduced our total assets folder by over 1.5MB.

However, the biggest weight of our site was the custom fonts we were loading in from Google Fonts (Open Sans). After lengthy discussions, we decided to swap Open Sans for a System Font Stack. This meant we’d rely on each Operating System to provide their own fonts, leading to less requests and an overall reduction in page weight. The font stack we used was:

font-family: -apple-system, 
               "Segoe UI", 
               "Fira Sans",
               "Droid Sans",
               "Helvetica Neue", 

This did 2 great things. Firstly, it reduced our total page weight of the courses page to a mere 65KB. Secondly, it meant we would get to use the beautiful San Fransisco font on OSX.

Moving Forward

The redesigned Courses page gave us an improved direction to filter through to the rest of the website. We took the gradient header and filtered the design through to the About, Testimonials, and FAQ pages. The action button featured in the header also provides an extra level of navigation, helping guide users through the site.

UA is an ever evolving product, and we strive to provide the best experience for its users. You can see the live project here.