I've wasted months not just days trying to create an MVP ( Minimal Viable Product ) for an idea. I spent nights and nights refactoring the user interfaces by changing just the places of the components and the layouts. Don't be stupid like me!
When you start designing a new user interface for a web or mobile application, most of the time you think about the structure or the position of your components, so you start designing the Header or the Top Navigation as your first component in your UI. Me too I was doing this mistake!
Do you know why it's a mistake? Because you're limiting yourself from the beginning. Because you're seeing the App Design from Top-To-Down or Down-To-Top while the App Design is a collection of features. You're not building a house here using LEGO bricks! But you're building a car and you can start designing the engine or the wheels, right?
Most of the folks try to copy & paste from popular websites and apps, without knowing the Standards or the Design Decisions for each product. This is the easiest way to find themselves frustrated, limited and they figure out that they overthink only on Generic Things.
They focus on the shape of their app but not the core features, and they start asking frequently these questions :
→ Where should I put the Logo?
→ How many items should I have in the navigation bar?
→ Should I have one or two sidebars?
→ Should I have a Grid Layout or a Table of items?
But, what you don't know ( maybe ) is UI Components are made to solve certain problems that are related to user interaction, data displaying, or new device screen invention, and you may be noticed that the Hamburger element is started to be well-known in mobile devices.
Obviously, we are not designing user interfaces but we are designing and implementing features, and Top Navigation is just a common feature that helps users to do quick navigation for certain and most important pages.
So, don't care about common features or what I call them Generic features or layouts.
Instead of starting by a layout, start with a feature or specific functionality, and not any feature but the core feature in your product.
Let's say you'll build the next-gen social media app for sharing videos. You could start with this core feature: Share a short-form video.
The UI will need :
→ Field for upload a video
→ Field for the caption
→ Field for the description
→ Button for posting or sharing
→ Button for saving in draft
These are the requirements to design your UI.
Star the project on Github: You Don't Know UI
Top comments (0)