Desktop HD Copy 10.png

Visual design & code

Creating landing page for an app

Timeframe: 2 weeks, completed in June 2016
Tools: Axure, Sketch, Atom, HTML, CSS, Github

Overview

KiM is a concept created by my peer Chije Wangati (who, in turn, developed the landing page for my app concept, TraWell).  It is a team and task management mobile app designed to increase productivity and help team leaders to assign, prioritize and rearrange tasks. 

Challenge

My challenge was to create a high-fidelity mock up of a desktop landing page and to code it.

Discovery

I started with doing research on competitors such as Trello, Taiga and Asana.  I sought design inspiration, and given this was my first coding experience, I tried to keep it as simple as possible.  After sketching a few versions, I used Axure for the initial wireframes:

Design

Moved on to Sketch and did a quick moodboard.  Continued to work in Sketch for high-fidelity mock-ups and experimented with color palette, typography and iconography...

...until I came up with my final design:

KiM landing page

Develop

After doing my spec sheet and style guide (I used Sketch Craft plugin), it was time to start coding.  You can check out the end results here: https://aygyung.github.io

Takeaways

It was an eye opening experience to see the other side of the project cycle.  I feel like it made me even more appreciative of a developer's work.  This experience definitely helped me empathize with visual designers and developers, and taught me to become a better collaborator.  Visual design turned out to be more difficult than I thought, and CSS can drive anyone crazy!  But it is also extremely gratifying to be able to build something from scratch.  There is so much to learn about CSS and JavaScript, and thankfully so many online resources to help with learning.  With their help, I am hoping to further develop my skills in the near future.

Questions or comments? I would love to hear from you!