Prototype Design for Color Farm’s Pitch
I was hired by Color Farm and All for One GP to work on designing a website that could be pitched to investors and eventually developed into a real site. Color Farm had a vision of creating a website that would work as a marketing site and also a repository of courses with videos and community interaction. Its main goal was to help open a path for diversity into Hollywood by offering courses and networking for those who would normally not have access to this.
Since the logo was already designed, I worked moving forward with creating a wireframe to get the best user experience for the site. This helped to guide the client from thinking too far ahead with the design. I researched other education websites like Lynda.com and Masterclass.com to get a better sense of what to show users who first visit the site. While I normally make my wireframes less designed, for the client, I worked in some design choices like typography and some final layout options like the footer. This helped to engage the client as they found black and white wireframes to be unclear. Overall, this helped to accelerate the UI process.
After the wireframes, I designed style tiles that would later create a pattern library for the entire website. The owners of Color Farm was really influenced by Uday_Bruh and Paula Scher and asked me to step outside my comfort zone of minimal design to create something louder and bigger. Because they didn’t feel the colors and typography of the logo worked well for web, I helped to explore further type choices and color palettes. We went through 6 concepts before settling with Work Sans and a CMYK inspired palette. I used a perfect fourth type scale to help create the large font size while balancing it with the legible paragraph font size.
Overall, I felt this design was out of my normal design choices but I really loved how it came together. It is loud and in your face and really speaks to a young demographic. It’s artsy but still usable for web for young and old people alike.
HTML Prototype
The client also wanted a working prototype which I quickly built in Codepen. This would allow them to showcase to potential investors.