How to build an app/website (part 2)

Continuing from our previous post on how to build an app , we stopped on the point of how to build a wireframe and established the process of creating one from draft to real output.

Now the next logical step is to start building lo fi prototypes. Lo fi prototypes are basically lo fidelity prototypes which are usually grey scale prototypes on a white font. You basically build a design for your app without investing too much in design. Like a small drawing of processes but this time in higher resolution aka using digital tools. One example of a lo fi prototype can be seen in the image below.

Now there are a couple of benefits to it which will discuss in details now. First is that you move fast. You do a little willy billy and boom in 2-3 days you have a skeleton more or less for an app, digital platform, website - you name it. Second is easiness. The ease of building a system from the start and not getting stuck on minor decisions. There are also other various reasons to work with grey scales but basically it allows a designer to work “agile” so to say.

You probably heard about agile development and at this stage you might know that agile means moving fast and productive. But if you are not a product and tech enthusiast no problem I will explain in more detail what agile means. Agile is basically a way for cross-functional teams to communicate effectively with one another at early stages of product development so that all information is taken into account and that no major investments of time and other resources are being made before each stakeholders opinion is taken into account. Hence the reason for using lo-fi prototypes and that is - to not waste design time if in the end the development of it is too time consuming or expensive.

So do remember that the right way of designing products is lo-fi and hi-fi second. And it is undoubtedly the right way. So moving with that in mind I must say - build a great system as early as you can in your lo-fi process. Start learning things like spacing , vertical rhytm, hierarchy etc. Go with this first as you start arranging elements in you lo fi prototypes as I feel that 80% of what makes a design beautiful is not colors but much rather symmetry, hierarchy and cleanliness. So LEARN GOOD SYSTEMS. This will help a lot. And once you are ready and you understand your systems well , keep moving forward. Start adjusting your greyscale elements around your system. “Do these bars need to be 8px or 16 px?” “ Do these blocks need to be 32 or 40 px apart?” , start working on that as it saves time and effort and allows you to move with lightning speed at later stages in the design process.

Now if you don’t know any good design systems that is no problem. Here I will put some useful links to get you started and that will help you better understand the logic of it. I will try in time to write my own blog posts about it but please have patience as it is a one man blog process at this stage :).

But continuing on the lo-fi design topic. Start prototyping. As you finish your lo-fi design frames, start prototyping your frames so that you add a flow and functionality to them. Add user flows of how a user gets from point a to point b, of how an element works by clicking it and generally of how screen are connected to each other. Don't invest too much in it and don't try to make smart animated elements at this stage as it is too early. Just try to establish a path of usability so to say and try to show how your screens are connected and what is the logic behind it. It will also help you as a designer better understand your flow and why things are connected and where.