Prototype 1

I have built a prototype using draftium.com.

Before you see my prototype, please reed below (I’m talking to you profesor Strickler! 😀 ):

1. What is a Website’s Prototype?

According to weblium.com, a website’s wireframe, mockup and prototype are three different things:

• A website’s wireframe is “a static black and white image showing how the elements will be arranged on the page”.
• A website’s mockup “can be viewed as a wireframe on steroids — it introduces typography, colors, fonts, logos, etc. while staying static.”
• A website’s prototype “takes it to a whole new level by adding interactions and animation and giving a user a look and feel of what an end product will look like.”Importantly, a website’s prototype will be interactive: the user will be able to scroll, navigate and click!Also importantly, it is not a functioning website! E.g. Don’t expect sign up forms to work!

2. Where is all the color!?

Draftium.com removes all the color on purpose. Why? Because the idea of website prototyping is to focus on structure and content, not colors. In their experience, adding color distracts and adds too many iterations (See their FAQs, in particular, FAQ #6. “Can I color my prototypes on Draftium?”).

2. What should you look for in my prototype?

• Please make sure to scroll all the way down on the main page.
• Once you do so, try clicking on “Our products”, “Security and Privacy”, “About us” and “Contact us” in the main navigation bar.
• Next, click on either “Our products”, “Sign in” or “Star now!”.
• Finally, make sure to click on the form at the Sign in/Sign up page.
• Oh.. one last thing.. It is responsive! You can try it on your phone or tablet.

3. I’m ready, take me there!

To see the prototype click here.