How to build an app/website ( part 1 )
A free guide that you can use to start your own path in designing better digital products for yourself and others
Well, first of all congratulations , you’ve made it to the first step “GREAT SUCCESS”. Now that you have chosen the path of design you are on the right track for happiness. I remember when I made my first design sketches, how eager I was to learn about it and I do hope you feel the same too. It is a beautiful process that requires some learning and some patience, but it can yield fruitful results if you apply it wisely. Now lets move on to the process. But first what is digital product design?
Digital product design is a process of creating a digital product ( much rather a service ) with the intent of selling it either to businesses or consumers. It is a process of creating something digital using digital tools and digital processes such as user interface design and user experience. The later being simply a process used to describe the way your potential users will interact with a product. All product designs starts with a sketch. As boring as it might sound , but the best ideas are the ones you start on paper. Drawing down ideas makes the process more simple and more intuitive for designers as it lays down the creative output generated in ones mind.
So first things first, all designs start with a sketch. Simple circle and squares and rectangles can work here. The idea is to translate - the functional into a form - and give your potential layout a visual illustration. Simply saying put the picture from your head on the paper or on a computer if you wish so, but make it clear and neat ( as much as possible of course don’t go to perfect here ). Don't go too far and simply use basic shapes, forms and drawings.
Create a sketch that can serve as a starting point and that makes a little bit of sense. Put some circles and squares in order if possible, using a hierarchy for things , using some spacing and some basic structure as well(which are all fundamental parts of a design). Don't go too far here, just make it obvious that there was a thought process behind it so that you can slowly expand your designs and make yourself ready to translate it from pen and paper to screen and mouse.
Moving things from paper to screen. A.K.A digital wireframes
Now that you have created the impulse you can start feeling the wave of ideas rolling into your head and you can start visualising what you need to do. But you might be confused as where to start or how to do it. But be patient it all will come once the ball is rolling. Now to start with digitalising your ideas you need to have the right tools and the right processes. For tools I recommend using Figma as your design tool of choice or maybe Adobe XD. Both are free so none will break the bank here. Start of by downloading the tool and create a free account. After all that is done you are ready to go with your first wireframe.
A wireframe is simply a way of putting content digitally so that your ideas take form and shape on screen. It involves laying your design drawings on a laptop screen, but now using digital tools at hand. Start by selecting a frame of your choice. If you want to create an app use and iPhone frame such as iPhone 14 if you are creating a website go for a MacBook frame instead. Although nowadays as most users experience digital products through phones it would be technically wise to create your website first for the mobile device and then for the MacBook device. Although any approach works but many say creating the mobile first version is easier and more prudent.
Now after you got you first frame on the screen simply start laying out what you have drawn on paper onto the screen. Do not worry at this stage about components or auto-layouts, just simply use shapes, text and maybe icons as well. Using icons is way easier than drawing them so you might want to download a plug in for that (for icons I recommend if you use Figma to download Iconify and use icons from there).
To sum up, at this stage you need to :
Get a pen and paper
Start drawing
Draw things so that those make sense
Download some software
Get some frames ready
Start putting shapes , texts and icons on the canvas so that it mimics you paper drawings
What else do I need to start?
Now that is a great question. At this stage while building wireframes you might actually need a few basics to know before moving forward with lo-fi and hi-fi prototypes. I would recommend at this point after finishing you wireframe to start learning about spacing and visual hierarchy for a few simple reasons. All digital products are based on some sort of hierarchy because when you lay down content you want that content to make as much sense as possible in order to provide the user with good user experience. It design you do that by organising things neatly on surfaces so that users intuitively understand what is what and which component belongs to which group.
A good resource to start learning more about these things would be Human interface guidelines or Google's material.io, but honestly at this stage if you do not want to overload yourself start learning by doing and use some video guides from YouTube whenever you re stuck. You will feel intuitively by the looks of your layout where you are doing well and where not so. So then it will feel more natural to know what to learn and where to correct. Very good tutorials are available on the Figma channel on Youtube and generally on the Figma website. In fact for a started you might generally use Figma resources better than Human Interface guidelines for example because Figma resources teaches you how to use the tool and you need to master the tool before you master the field. So please use these Figma resources here whenever you get stuck or you can simple contact me at pavel@pear2pear.co.uk and I can help you with any questions you have got.