Some people are asking me what is “prototyping”, why it is important to prototype the software in the early stages of the development process and how a prototype looks like.

Prototyping is well-known concept in software engineering. We could find many good articles about it and answers to the above questions by performing a simple Google search (e.g. try searching “user interface prototyping”).

I often tell my students to create a small prototype of the system before starting of its implementation. This is generally a good idea by students always want to see an example. Recently I tried to find an example of Web UI prototype and this was not easy. In fact after 15 minutes searching I failed to find any good example of Web UI prototype – a set of Web pages (HTML + CSS) that illustrate how a system will look like and how it will perform its functionality when it will be implemented.

Finally I needed to create a Web UI prototype to show the students and I would like to share it with you. It is called “Art Gallery”, a prototype of a simple Web photo album in which users can browse the folders (galleries) and view images inside them and the administrators could create / edit / delete folders and images.

Download the Web UI prototype example now: ArtGallery-Web-UI-Prototype-Example.zip.