Building a New App: How to Map out Basic Layout and Flow

You have an amazing idea for a new app, but you’re not entirely sure how to create an app for the web yet. You’ve played with NodeJS and MongoDB in the past, and neither was complicated. 

Creating a new web app might be the perfect chance to learn Angular, so you’re itching to dive right into it. However, you’re missing a crucial step. You need to learn how to map out the app’s basic layout and flow first. 

When learning how to create an app, it’s crucial that you understand how to plan it first. So many developers fall into the trap of diving into the development phase before planning how their apps will work. In this article, we’ll discuss why mapping your app’s basic layout and flow matters and how to do it. If you’re the kind of person that prefers videos, check out Shaun Wassell’s YouTube video. He does a great job walking through the app layout planning process. 

An Overview of Mapping Out Basic Layout and Flow When Building New Apps

In this video, CBT Nuggets trainer Shaun Wassell provides a quick look at how to map out basic layout and flow, so you can successfully build apps. 

How To Create An App: Why The Planning Stage Is Important

It might be overwhelming the first time you learn how to create an app. As you skip back and forth between writing lines of code for different parts of the app, it quickly becomes apparent why a little planning goes a long way. 

That overwhelming feeling dissipates a little more each time you start a new project as you learn various development patterns. Don’t become complacent, however. Developing new apps rarely occurs in a vacuum. There’s a good chance you will work with a team of developers in the future. That’s why it’s essential to plan the basic layout and flow of an app before a single line of code is ever written.

When you learn how to create an app, remember that the development process requires project management skills. It’s the responsibility of all project team members to stay organized. That hat doesn’t only fall on the project manager’s head. 

Planning an app is part of staying organized. The planning process will help each team member understand who the stakeholders are, what endpoints need to be created in Express, how MongoDB documents will be structured if the project requires specific packages in NodeJS, and how many pages need to be staged in Angular. Responsibilities should only be delegated to team members once the project’s requirements are clearly outlined. 

How to Plan Basic Layout and Flow for a New App

There are a variety of methods for planning the basic layout and flow of a new app. Seasoned developers love using tools like Figma, but I’m partial to the whiteboard method. A pen and napkin (sans coffee stains) will work, too. Lean on your fellow devs when learning how to create an app. They’ll give you the tricks they learned through the school of hard knocks. 

When I first learned how to create an app, it was drilled into my head to make a list of features my app would need. We’re talking essential elements for the MVP — not extra “nice to have” features. If you’re making a note-taking app, such features might include account login capabilities, creating and editing notes, note-sharing features, etc. 

Once a list of features is completed, draw a square in your diagram tool of choice for each page your app will need. Label each square with the name or function of that page. For instance, the home page for a note-taking app might be called a dashboard. Don’t forget to add obvious pages like a login screen, account settings, and a 404 page. 

After a square for each ‘page’ is created and labeled, add each feature in your feature list to the page that requires that feature to function. Try and limit each feature to one page only. If possible, represent each feature with a rough sketch. In this case, a note on the homepage might be represented by a drawing of a sticky note with a couple of words explaining what it is. 

After each item in your feature list is notated on individual pages in your app diagram, start linking them together. Arrows are useful for this step. An arrow is a great visual representation to demonstrate flow. For instance, a double-sided arrow might connect a sticky note on the homepage to the page that handles the note-editing features in your diagram. 

A double-sided arrow demonstrates that users can click on a note in the dashboard to traverse to the note editing page, edit and save that note, then travel back to the dashboard where they started. It demonstrates the flow of interaction within the app. 

After linking each square together in your diagram, you’re done. You’ve just made a basic layout and flow chart for your app! If you’re feeling adventurous, use your app diagram to start planning things like MongoDB document records and Express API endpoints. That process should be much easier with a fresh app diagram in front of you. 

Start Building an App Today!

Learning how to create an app with NodeJS and MongoDB is infinitely easier after learning how to create a game plan for the development process. The next step is designing API endpoints for Express, building a NodeJS server, and designing document records for MongoDB. 

Shaun Wassell has a fantastic course at CBT Nuggets that teaches new software developers how to create an app using those tools. As a bonus, he’ll introduce you to Angular as well. So, go ahead and get started right now! The best path forward is by practicing with seasoned vets.