Create a sketch of a web application
There are several stages of web application development.
The first stage is sketching.
My favorite and fastest way is to use a notebook (without lines) and a pen/pencil. It’s old school!
Draw the structure of the user interface of web applications – it doesn’t have to be exact – it’s just a sketch.
When creating a sketch, consider the following:
- Navigation
- branding
- forms
- buttons
Any other interactive elements
Draw different versions of the web application. Think about how the functionality of your web application will affect the overall design.
Add annotations to your sketch and outline how your application should work.
The notes will help you later clarify and understand why you designed certain elements.
Plan your web app workflow
It’s time to put yourself in the user’s shoes. In step 5 we will plan the web application workflow.
Write notes about what you thought was good and what was bad. Pay special attention to the workflow.
Once you have completed your competitor’s web application analysis, it is time to write down the different workflows for your application. Pay attention to the following points:
How does the user register?
Do they receive a confirmation email
How the user logs in
How the user changes their password
How the user navigates the application
How the user changes their user settings
How the user pays for the app
How a user cancels his subscription
Suddenly our one-page web application turns into a 10-page web application.
Write a list of all the different pages your web application will have.
Consider the different states of the pages. For example, the home page will have two states; logged in and logged out. Users who are logged in will see a different page than users who are logged out.
Creating a wireframe/prototype web application
Ok, it’s time to turn these sketches and new understanding of your web application into a wireframe/prototype.
What is wireframing / prototyping
Wireframing is the process of developing a plan for your web application. Prototyping takes the wireframing design one step further by adding an interactive display.
The decision to wireframe or prototype is up to you. If you have the time, I would recommend creating a prototype as it will make it easier to convey information about your web application during testing.
You can create a prototype/framework using the following tools:
Sketch (macOS)
InVision Studio (macOS)
Adobe XD (macOS, Windows)
Figma (Web, macOS, Windows, Linux)
Balsamiq (macOS, Windows, Web)
Look for early validation
Now you have a nice wireframe/prototype that visually describes your web application.
It’s time to show the world your beautiful wireframe. At this stage we want to get constructive feedback.
Just asking your friends if they use your new web app is not enough.
You should start with a small number of representative users. Go to forums of your target market, to places of work, test the problem and present your solution.
Try to build relationships with these representatives as they may become your customers.
I like to use this stage to test my promotional offer – the main signs of validation are pre-launch sales.
Taking notes and documenting all feedback. The learning gained from these meetings will help guide the development of your MEP (Minimum Excellent Product).
Okay, now you’ve got great feedback and product validation. It’s time to start building the web application.
Before we start the development phase.
Before we create our web application, I would like to share the following tips:
- Try to ensure that a small section of the application is fully functional. What we would call a “full vertical”.
- By creating the smallest possible section, you will be able to get all the details together and smooth out those creases in advance.
- You will soon get great satisfaction from seeing something working – great motivation.
- Make things that you know you will throw away later – if it helps you make something work now.
- In the beginning, expect things to change a lot as you learn and discover things you didn’t think about.
- Trust that your app will stabilize.
- Don’t be afraid to make big changes.
- Spend time learning your tools.
- You may feel like you are wasting time reading or experimenting with “hello world”. Learning the right way to perform tasks will have a huge positive cumulative impact on your productivity over time.
- If possible, use tools that are compliant. Understand that once you get out of the normal flow/use of your toolbox, you are on your own and can find yourself deeply devastated. Of course, there are always exceptions!
- Don’t avoid the problems that need to be fixed.
- Face your problems squarely – they will never go away and will only grow.
- However, if it is still likely to change – it is best to spend as little time on it as possible… It’s a tricky balance!
- It’s time to look at your database.