BLOC: Working on Jott.ly

Having done a front-end course with ThinkFul before, I was keen to spend more time on the design part than the front-end coding. Mike agreed but was surprised as his students usually request the other way round.

Sketching

So, My first assignment is to create a logo and landing page for a SaaS start-up called Jott.ly. I took a brief from my Mentor asking him some questions and started mind-mapping and sketching based on his input. This is what I arrived at.
Mind Map for Jott.ly
Logo Concept sketches
The hardest part was explaining the reasoning and value behind each concept. But, a very good exercise.

Illustrating

Mike gave his input and I picked the top 3 and started illustrating them.

Shorlisted Logos Illustrated

Another review, and we decided to go with the mark which clearly conveyed what Jott.ly was about.

Final Logo Illustration

Switching

In between, I switched to the 36 weeks track since I found a pattern that, If I worked hard, I was able to commit 20-30 hours per week after my job and family. I had presumed that I should be mastering it quickly and had to accept that it is okay to learn slowly. That has made all the difference to my learning.

The most important advice I got from my mentor was that,

It can be the most beautiful of designs but if your user cannot find what they need, then it sucks.

Wireframing

So, Keeping that in mind, I set about to wireframe a landing page. There are a wide range of tools to use and I like UX pin but, love paper and pen far more. So, For this assignment stuck to Pen and Paper. I came up with 2 versions and then went through it explaining my decisions to Mike.

There is another thing I have learnt this past month.

What makes up a good design?
Making consious decisions for the right reasons.

Photoshopping

After reviewing both with Mike, We picked the one more relevant and started laying it out with Photoshop. It was pretty intimidating to get started on converting my wireframe to photoshop since, I have always moved from paper to code editor directly and worked out the details as I go.

I took more than a week to simply start but once on it, I pulled an all-nighter and was ready to get it reviewed by Mike. He gave me tips on how he gets started manages his workspace, tools etc.. After Revision, it looks like this.

Photoshop Mockup

There are some tweaks I need to do to this, but this is more or less how the landing page will look like with regards to the layout, copy, typography and colours.


Study Report

02/06/14 to 06/06/14

Study Report
This week, I will be coding it using the skeleton framework. I will upload it to github and update you on how I go next week.

Until then, Happy Hacking! 🙂