Building a web app (Whinst) Part 26: Creating a UI and UX design plan

Building Whinst

Now that all essential functionality in the Whinst web app has been added, I’ve started working on the UI(User Interface) and UX(User Experience). But before jumping into this I’ve created a design plan that highlights how everything will look once complete and how I will go about creating it. In this article, I’ll tell you about some of the things I considered when making the Whinst UI and UX design plan.

UI and UX design plan🖌

Some of the things I considered when creating the design plan were:

  • App colors: One of the first things I considered was the main color of the app. This is important because it’s serves as a theme for the whole application. There’s many reasons as why a particular color might be chosen, but for me I chose what I feel will look pretty. I won’t reveal the color now but you’ll definitely see it once the web app is complete😅.
  • Landing page design: For any application it is very important that the landing page looks good because this is the first page users see when they access an app. It also sort of sets the theme of the whole app because all the other pages will look similar to it. Because I’m not a designer and because Whinst is a budget project (I can’t afford a designer🥲) I decided to look at other existing web app landing page designs to get inspiration from. After looking at a couple I found one that I felt was perfect for Whinst.
  • User Experience: Another very important thing I looked at was the general user experience which is just how the application responds when the user interacts with it. What I did was go through the app and took note of all the points where a user would expect some feedback. Feedback such loading indicators, pop up windows, etc.
  • Other: Some of the other things I considered were Input form design, Navbar design, Button design and Logo design (how the logo would look and where to get it designed).

With a design plan now set, I’ve moved on to implementing it which now takes me a huge step closer to completing the Whinst web app. Thank you for reading🙏.

Share

Leave a Comment

Your email address will not be published. Required fields are marked *