DEV Community

Cover image for UI Design Of A Kanban Application
Collins Lagat
Collins Lagat

Posted on

UI Design Of A Kanban Application

Introduction

The objective was to design a Kanban application targeted for use on the web. Since it would be used in a browser, the app must be usable on mobile, tablet and desktop (Responsive Design).

Motivation

(a) For Me

It's a combination of wanting an extra app in my portfolio and wanting to use Bootstrap in an application. I observed that many people posted freelance jobs related to Bootstrap therefore I wanted to dip my feet into it.

(b) For User(s)

Kanban users love their kanban applications because they help them visualize project progress and status.

Inspiration

The colors and design of components was influenced by Bootstrap, while the layout was influenced by two posts I found on dribbble. You can find those posts here:

Summary of Process

  1. Brainstorming: involved looking at existing kanaban apps and browsing designs by professional designers.
  2. Sketching prototype on paper.
  3. Implementing sketched prototype in Figma.

Screens Samples

Mobile View of Home Page
Mobile View of Kanban Page
Tablet View of Home Page
Tablet View of Kanban Page
Desktop View of Home Page
Desktop View of Kanban Page

Link To Article

You can get further material on this project, including images and screens, at (Part 1) Kanban Application - Design Stage.

Top comments (0)