DEV Community

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

Posted on

1

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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay