Prototype Drudgery

There are some things to prepare in advance to make building a complex prototype feel less like drudgery and more like design.  I have to consciously remind myself before I start to stop and prepare.

I was a bit sidetracked by finishing the mid-term project that I sort of blew thru the first lessons of responsive design in favor of continuing to detail my mid-term project.   I chose to use Adobe XD to build my prototype.  It is relatively easy to use and has a lot of cool features that are very valuable time saving tools.  There are components, colors and character styles.  There are groups and links and layers.   If you are working on a large project things can become a complicate mess in no time flat. 

Here are my suggestions to proceed forward with a prototype builder app.

1. Have some sort of a hand written wire-frame of your prototype so you will have an idea of repeating elements. 
2. Get your colors sorted and saved as color styles.  It seems like the norm is 5 colors, to include dark, lite warm and cool.  I think 5 is a good guideline but it is ok to have a few shades of one color.     You could end up with 15 swatches saved.
3. Create your groups in advance.  Make sure you are always working in the right group.   Make sure to add elements to the right group.  Even make little sub-groups while you are working.   Make your layers make sense so you can scroll logically and find things.  It is much easier to move elements around and re-size if they are grouped properly. 
4. Choose your display font and font sizes in advance.  Headline, Sub Head, body copy, body copy bold, body copy italic etc.   Get them all set up as character styles for each different viewport!   That way when you decide you don’t like your display font you change it in one place. 
5. Create the effect on want on images and buttons and section etc all in advance and use them religiously.   This way when you decide you want to tweak the drop shadow you will tweak it in one place.  
6. Upload “Icons for Design” right into XD and you can search for almost any icon you might need and it will be right there to drag and drop into your design. 

I relaized I am just scratching the surface and there are a lot more tips and tricks that I am not aware of but the ones above are so helpful and huge time savers. If they are mastered well you can then spend more time designing and learning even better XD tricks!