Creating a clean, simple, and intuitive UI for the Taskly responsive web app that is aesthetically beautiful and easy to use. See the full creation process from User Research to the final Design here.
- Defining the CI
- Visual Design
To define Taskly's overall style, I searched the web for simple, clean, aesthetically beautiful UI designs and created a Moodboard.
Next, I defined the Taskly colors. Having done a competitive analysis in the research phase, I had a good overview of which primary colors are used by Taskly's competition. This ruled out the use of red, blue, or yellow as I wanted the Taskly brand to stand out. I looked for color inspiration in illustrations and photography. By importing selected images into Adobe Color CC, I generated a couple of color palettes, from which I selected primary, secondary, and accent colors. Considering accessibility, I tweaked the color contrasts until all colors were working well individually and as an ensemble.
I shortlisted a few web fonts and tested them in combination for headings, sub-headings, and body text. My criteria were legibility even at small size, versatility, aesthetics, and feel. I decided to pair Merriweather Bold Italic for strong headlines with Open Sans for any other text. The beauty of Open Sans is that it is optimized for legibility across print, web, and mobile.
Imagery & Illustration
Defining style of imagery and illustration. The age range of Taskly's audience is from 20 to 50 years, with the majority of users being between 25 and 35 years old. With the help of the personas I created for Taskly, I selected visuals that might be appealing to Taskly's users. At a later stage, I tested my assumptions in A/B tests.
Designing the Taskly UI Kit with Sketch. In this step, I created a Sketch symbol library which helped speed up the process of designing all screens for Taskly's core features for mobile, tablet, and desktop.
Laying out every screen for the user flows of Taskly's core features for mobile, tablet, and desktop with Sketch.