This is a Design Plan for the build and development of web & mobile interfaces of a Website, its requisites, contents, main components and features.
This project is a sample of the basic documentation process, blue-prints, designs, prototypes and reference material to support the development of web and mobile interfaces of the Capoeira Website.
The documentation and specifications will describe the most relevant steps and deliverables involved in the website's development. This way, the Plan will cover relevant aspects, from conceptual definitions and requirements, going to the elaboration and construction of thumbnails, mockups and prototypes. Some elements that will take part of this Design Plan of the Capoeira Website:
- Purpose
- Audience
- Concepts & Guidelines
- Sitemap
- Thumbnails
- Wireframes
- Mockups
- Graphics
- Web Design Process
- Mobile Design Process
- App icons
- Animation models
- Prototypes
Besides the conventional documentation, the Plan will also be supported by graphical tolls to produce more tangible descriptions/details about the target interfaces' requirements (Wireframe, Mockups, GIFs, PhotoShop, etc.)
The Design Plan comtemplates the production of animated models and prototypes to illustrate the interfaces' main features, functional requisites and UX aspects. The following images are animations (GIFs) exported from the original prototypes built using Adobe PhotoShop for both interface versions:
| Web interface | Mobile interface |
|---|---|
 |
 |
To access a prototype version of the Web interface of Capoeira Website, click the image right bellow This prototype is an application hosted at Heroku. The app will be automatically started by Heroku in case it is not already running. In this case, the link will take some extra seconds to respond.
Here is a link to the GitHub repository of the Capoeira Website project.
More detail about the Design Plan requisites and specifications (sitemap, mockups, wireframes, graphic prototypes, etc.) can be found at:
