Now that you learned how to code, how to build an application? — Part 2

This blogpost is a continuation of a blog post which I have written last week about the process of building an application. After learning how to code in Ruby and JavaScript, I wanted to figure out how to create a web application. What are the steps that are involved before I write a single line of code? This blogpost will cover the steps one can use before creating a web application particularly about the design process. If you would like to checkout the previous blogpost about conceptualizing an idea click on this link.

Sketch Your App

Nothing is quicker and easily accessible than a pen & paper. By now you should have a solid idea of what your app should do, so draw out the wireframe of your app’s UI (user interface). Where buttons should be located, what the purpose of that button is, if there should be a navigation bar, footer, and etc.

Write down notes and sketch out how the app should work. Remember you are in the brainstorming stage, so don’t hesitate to change stuff around until you’re satisfied with it.

Also keep things simple. Start with stick sketching the core funcitionalities — don’t get carried away. If you can’t help yourself, then sketch 2 versions: a basic version and the final version in your dreams.

Remember, nothing is set in stone. This is a step to help you get a more firmer grasp of your app.

Plan the App’s UI Flow

Now that you have a good idea of what your app will look like, what every element should should do, and how users can interact with your app. It is time to figure out your app’s UI flow, which means how a user should use your app from start to end.

Create a chart/diagram and map out every step they (the users) have to take, and every scenario they might encounter. It is important to consider every use-case.

Include all the actions your user can take a flowchart/diagram. This can be done with a pen and paper. This diagram should not be extremely massive, since the app app should be fairly simple.

Designing the Database

Now that you planned out every possible scenario, you need to take a look at it to determine what sort of data you would need to keep. Let’s say if your app requires users to create an account, you will need to keep track of things such as the username, user ID, the user’s email, the password, whether user’s email is confirmed, and when the account was created as well as every time the user has logged into your app.

You can draw a sequence diagram like:

I would recommend a tool called draw.io to sketch out diagrams if you don’t want to use pen and paper. Even gliffy is a great resource too.

UX Wireframes

Now that you have the back-end planned, it is time to plan your front-end. With sketching out the app, you know what you need and now you have a much better idea of what your app should look like.

Since humans are mostly visual creatures, you might have a better time understanding what you should do if you have a visual of every view you’ll be coding.

Fortunately, many wireframing and mockup tools exist online to help you plan your UX/UI flow (e.g. Balsamiq, Sketch, Marvel, and Invisionapp).

The purpose behind this blogpost was cover the steps of the design process, a developer has to go through after one conceptualizing an idea for their app from scratch. In the next blogpost, I will talk more about the development process. Thank you for reading this blogpost.