Here are some workflow examples from a project called "Your Strategic Future". You will also find additional documents I created to assist in the development in a gfx naming scheme and to bring new testers up to speed.
Click on the thumbnail to view a larger image.
1. We started with notes taken in meetings,
2. Then created rough Story Boards.
3. Then created Flat mockups which eventually became the artwork for the final designs.
4. Then we would add in any interactive elements.
Click Here to see the above design in action in Adobe Captivate.
These were designed to run from a CD so they may take a bit of time to load.
Here is another set.
![]() |
![]() |
![]() |
|
Some more Story Boards to mockups
![]() |
![]() |
Click Here to see the above design in action in Adobe Captivate.
These were designed to run from a CD so they may take a bit of time to load.
![]() |
![]() |
![]() |
![]() |
Click Here to see the above design in action in Adobe Captivate.
These were designed to run from a CD so they may take a bit of time to load.
Now we have a different Story Board for use in delegating design tasks.
Reusing a Story Board to assign gfx names and backend ID's
Storyboards are only one way I start development of a project. I also use wireframes. It really depends on the project. Here are some examples of a project that is in the initial design phase now.
Development Wireframes.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Here are some designs based upon the above approved wire frames.
![]() |
![]() |
A Document given to new testers before testing begins .
A document to explain the naming system used in the project. This would be given at the start of the project so that all developers, both front and back end, are on the same page with the naming conventions.
chrisbatedesign :: 201.639.2511 :: chrisbatedesign@gmail.com