Idea to prototype

tldr;

1. concept of idea

2. prototype

3. test & evaluate

4. repeat steps 1-4

Trial and Error, Science, testttt it

Your idea needs to be tested in some capacity for you to evaluate if it is a good fit or not. The concept of trial and error, some call it science, test the idea! and see what works is probably one of the best ways to minimize both investment, time and feasibility. When you have your eureka moment you need to test it or if you have just overfitted to something that is actually not a problem at all. This is where a prototype comes in. Prototype means, not even a minimial vialable product, minimival lovable product; it means that you have something more than paper and pen. (paper and pen, could be classified as prototype in my opinion as well :) )

More information was taken from the programming showdown podcast and the blog 7 things of visual design 2017

Pen and paper

Take your idea and draw the what you want to make happen. Try to at least have some idea of how the user will feel. More on tht later, for now you need to get something on paper. Focus on clarity and getting the outcome that you want.

todo: add picture of a super simple prototype

Designing

Introduction to UI/UX

UI/UX is important for how the user feels and sees. During the first concept of developing Mindflyp we had an idea, had a flow on paper and pen. But what do you want for an outcome?

• feelings (warmth, scientific, love)

Small tricks for thinking about UI/UX

1. Alignment

2. Fonts

3. Colorscheme / Colorpalette

Alignment

This is not new. Since 1990 where everything was in word and powerpoint with names like (final final review sept v4.ppt) For ages back, powerpoints have made it clear that alignment in any presentation was detrimental to convey information. Tools like snapping came to be (where the object you want to align magically aligns with one or more objects) which made it very easy to make alignments in any presentation/prototype.

Font

explain how a font should bring feelings as well

Colorscheme / Colorpalette

here you want easy colors. different colors convery different feelings. things like yellow, red needs to be careful of. 4 colors to pick from

Making the design

Make the design mobile friendly and tools like affinity design / sketch are amazing at creating a visually stunning prototype that looks like you are a professional. I know, you will actually look professional!!!

Now you have a concept using pen and paper and you have decided at least for now about fonts and a four colorscheme (this can always change, but you should not change them too much because you want users to know that this is your product).

Draw the easiest and most important steps into the design. Using tools like flickr, [icon], google with commerical use to get any icons or images needed to convey the first steps. Important to note is that you should here import or use the Material Design developed by Google. They have a repetoar of buttons, action calls, menus, frames and status bars that have been thouroughly worked through and tested (I assume one billlllion dollars were spent to develop this, maybe not that much but I want to convey the scope of what it means).

todo: add image of a design being developed in affinity design

Prototyping

Tools are becoming amazing these days. I find it incredible that even the colors stay the same throughout the screen each time to start up the computer again; all of the windows, application stay at the EXACT position they were previously; okay Eric talk about prototyping instead.

From @phillipholly and @petermbuch, they are well renowned app designer and their first take is to make a clickable-dummy which can be easily made using invision an increaddddiblle tool, easy-to-use and figure out what to do to make swipe or clicks to get to the next page and bring out a menu on top.

Once every interaction is in place you can share it as a link which you can then try how people interactive with the product. You can even send a sms with the link.

Design algorithm

1. concept of idea

2. prototype

3. test & evaluate

4. repeat steps 1-4