Article #3:

Whether you’re designing a poster or a card or a website or an app the design procedure remains the same. You create a simple layout where you fill it with a simple reproducible pattern and then you proceed to add further layers to that till you reach your satisfactory final design.

I would like to further explain using 2 simple practical examples of a poster that is hand drawn using markers and an app that is designed online using Figma. For the poster, I created a simple reproducible pattern of a basic flower distributed repeatedly within the bigger layout of a flower field. For the app I created a simple wireframe of a screen in which I have organized my images, buttons and text into simple boxes and lines within.

Now that I have my paper or online design page already organized and I know where everything is laid within that page, I can proceed to a further step of sophistication by providing further details to the included items. For the poster I have provided more decoration to the flowers in the fields to make them standout using colors and striations and for the app I supplemented it with detailed text and colors to create a low fidelity prototype. You can check out the complete low fidelity prototype @ https://www.figma.com/file/UMF0DEr3ADLj0JlHPQjafp/Restaurant-app?node-id=72%3A134

Having made the simple items within the page more evident and detailed for both designs, I can now proceed to decorate the backgrounds and spaces more confidently. For the poster I will proceed to decorate the background with further colors and striations to show more contrast and make the overall design more appealing. For the app I proceeded to add all images to make the design more appealing and to further explain the text thus creating the first mock up for the app.

Now that I have my design ready I can move forward by making it more interesting by providing further depth to it. For the poster I will further add more contrasting lines and colors to the background to add more depth along with sealing the whole design within a colored frame to make it stand out even more. For the app I will create depth by linking all the screens I have created in the above mentioned way together. In such a manner, I will have elucidated how all screens will communicate within the required app design by providing a detailed 3D experience for users, which is what a high fidelity prototype is all about. Also you can check out the full high fidelity prototype @ https://www.figma.com/proto/UMF0DEr3ADLj0JlHPQjafp/Restaurant-app?node-id=134%3A360&scaling=min-zoom&page-id=134%3A2&starting-point-node-id=134%3A360

I think layering your design is most crucial as it allows you to add more details to it in a stepwise manner while also preserving the previous versions of your design. Hence, you can always remove/add a layer or adjust more details within a certain layer without affecting the previous ones. It is a great method to efficiently develop designs, share your work for feedback, adjust accordingly and develop the final version of it most efficiently. Also it reminds us all that all designs start simple then gradually one can reach more levels of sophistication according to one’s needs. Hope you enjoyed reading my article, thank you!