Proof of Concept

· Very clear understanding of requirements.

· Understanding of the capabilities and limitations of new technologies.

· Ability to assess design decisions early in the process.

· Ability for the customer to visualize early on the look-and-feel of the solution.

· Reduction in the overall risk of project failure.

via Proof-of-Concept Design.

Yesterday, Erik Fadiman recommended (after looking at wireframes) to try out the design suggested by them before going with them. This is called “proof of concept.” Today, I coded a few versions and showed them to one of my designers on the team. He insisted that we have the text or image come out from the triangle. After using CSS sprite and CSS transitions (using CSS Transition), I found Slide in Captions. This is helpful for Blaine to know that this design is possible before putting a lot of effort into a photoshop comp. Slide in Captions is CSS that uses hover state transitions with figure and caption tags. It is easy to implement and customize.


proof of concept triangles

Proof of Concept for Project 3

(Earlier Post Relating to This Project)



Part two: Fadiman and one of the designers on my team though that the slide out caption wasn’t enough. It would have to act more like a pocket. I did some research, had some coder friends look into the problem. With advice from one of my friends, he sent me this link (Sliding Vinyl with CSS3 – ZURB Playground – and told me to save it and then take it apart until I find the code that made it work. That was really informative. I got to see where all of these complex things live in this expert document, full of code comments, url hosted images and @fontface. Saving the website, I saw how much code they used (which was a lot of javascript/jquery/things I didn’t understand). In future projects, I’ll definitely put aside at least eight hours just for researching code. I think it’s really interesting and beneficial to see all the different ways one can do something. I want to be one of those web designers that can carry out a vision. I think in this day and age of open source and Google, what can be thought up can be created using tools already available. It’s just a matter of time and expertise after that.

proof of concept photoshop version
Fadiman made this up in Photoshop to illustrate what would be needed to prove the concept.

One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s