High-Fidelity Drynamic Website
Introducing the Drynamic Website
I started developing my high-fidelity prototype with my low-fidelity prototype sketches and a template created by UX instructor, Karen McClellan. I copied her template and then replaced and deleted items as I went along. It helped me to ensure I had all the pieces in my prototype.
Starting with Styles (colors, effects, and type), I developed my brand color palette using Coolers.co. I went to Eva Design Systems for semantic colors, which are colors that indicate standard values (such as negative, warning, positive). I used Learn UI Design for divergent colors, which are colors that show a transition from (a) one extreme, through a (b) neutral middle, and finally to a (c)opposite extreme.
I changed the pre-set font in Karen’s example from Roboto to Montserrat. My website will be fairly minimalist with larger headers and I think Montserrat does a better job.
I went into my Assets Page and started filling out my global icons using the Noun Project set of icons and collecting photos and my design sketches. If I were to create a custom website, I would consider creating my own set of icons.
I searched through the Figma Community Library for UI elements and started adapting them to my brand while also filling out my components.
In the end, this is what my prototype website turned out to look like.
For the next steps, I’ll work on the product prototypes and website until June or July when I can go back to Jackson Hole and test the product on another Picnic. I hope to get some quality product photos and then truly share this product out with people who may be interested in purchasing a bag or helping me scale this product.
