Design First, Code Second: Save Time (and Frustration) by Prototyping

+ While developing the first iteration of my personal website, I made the mistake of designing while coding. It was frustrating and the result was a lackluster, unresponsive design.

+ After a coworker presented a methodology for constructing a website [insert link to methodology shout out], I decided to scrap the previous site and start fresh. From online courses, I learned it was much easier to code off a design than to do both at the same time, and this time I had a better understanding of my abilities to reduce complexity while still keeping the design professional.

+ There are many different options for prototyping a website, but I found the free Adobe XD to be lightweight and simple to use, with the right amount of functionality to get the job done without getting in the way.

+ Here's a short list of some of my favorite features:

• Cloud saves and the ability to share 1 project link.
• Drag-and-drop image masking with shapes.
• Save components and colors to easily reuse assets. 
• Sync between components, change a style one place and it updates everywhere used.
• Add interactivity with triggers, actions, and animations. 
• All of that and more for the low cost of $0. 

+ Why use software to mock up over pen and paper? The design in my head and notebook looked incredible, but it wasn't until the prototype that I realized it was quite ugly and not functional. I instead used XD to create a new design. Now as I code, the design results are exactly what I expect, freeing up that wrangling and frustration for CSS. :)

+ The results were positive: my "in-my-head" design looked horrible in practice, and not only was I able to create a better design, I was able to export the visuals and assets I'd need when it came time to code. I could also gain feedback along the way, with the free version allowing cloud saves and 1 free share link to send my artboards.

+ Being able to have a sense of the "look-and-feel" of your site before coding definitely makes the process easier, and coding from a design removed previous frustrations. I highly recommend giving Adobe XD a try before developing your next site!