top of page

feeling my way around App Design - 3 - Canvas Drafting

Updated: Mar 29, 2023






Good morning – lets begin!

I want to be productive and get stuff done so lets pop on YouTube and pop on some ‘Upbeat Study Music House Mix for Deep Focus – isochronic tones’ to listen to. Are you ready to work? Decent breakfast? Comfortable? Good soundtrack?... lets go.


If we go back to the Figma planning whiteboard, you'll see I have created really simple grey canvas drafts, I just want to go back and take you through this process as its super handy!


To create these, you head over to Figma, create a new design file and select 'frame' from the top left corner. then if you look over to the right of your screen you are given lots of frame options from Desktop sizes to different android and iPhone frames, select the one you want to work with and then proceed to work on your design.


I start by putting small boxes around the edge to remind myself to stay within this space as more often than not phones have bevelled edges or screen protectors that have a black edge that can sometimes impeach the screen space (thanks to Kristine Kolodziejski for this tip!) I will delete these before publishing.



Then you can start placing rectangles and text boxes/text wherever you want them, its as easy as that - see to the left my mock up of an apple phone selling page, this is a exercise I did during my Zero to Hero training with Victor Dantas to get to grips with the design process.


keep an eye out on the Linkdin Zero to Hero profile along with Victor - If you haven't already, do watch the training back on YouTube, it really is fantastic!


And like I have, you can copy and paste these frames onto a Figma Jam file (whiteboard) and add some arrows and snazzy annotations to create a beautiful, initial plan of your app!


Next I head over to the Canvas app, I start, again, by placing boxes around the edge of the screen to remind me not to impeach possible bevelled edges and I pop a darker background colour on so I can see the neon images clearly.


I work with the neon icons for a while, moving them around, matching them with fonts…but something isn’t sitting right so I go back to the Figma whiteboard and look back at my original ideas, this is where I had a feeling I needed to go full on traditional retro gaming.

I think back to trolling around the retro game shop with the boys and there’s something about this style I just know they love and its all about knowing your target audience right?? So I’m going to throw myself into that, knowing my audience and what they love as I want them to enjoy the app in order to actually use it!


So, I start shuffling my canvas, exploring fonts, creating some simple designs and reflecting the boys love for gaming…and this is where I came up with ‘Filthy Beasts’ because that’s what I have called them before. Simple.

With a beast-ish character surrounded by greyish dust bunnies and the perfect retro gaming font I have created the home screen logo.

Now I am happy with the style of the app, I will need to move on to Dataverse to create tables of information such as the jobs that need doing and those who have access etc.

This is a bit of a learning curve for me but hopefully with a design in mind and a list of all the data that needs to go into the app I can piece it all together and turn out a half decent, working app.


39 views0 comments

Comments


bottom of page