1. Story Board Example by Clarke Group, LLC The following goes through the story board method of design for one of the pages developed for the bureau of African Affairs of the US Department of State

2. Here is the original page that needed a makeover and a new look and feel. Icons and hyperlinks just didn’t do it!

3. This was a rough pre-engagement annotated PowerPoint discussion straw-horse with a possible preliminary design. Sunset from Signal Hill Apartments - Freetown Jendayl Frazer African Affairs Biographies 1. Assistant Secretary 3 level + in dropdown Slide Show for images Readers to encourage frequent visits What should disclaimer Be for the pages I develop? Marquee with links to state.gov Content as well as AF news 20,162 Visitors Hit counters and statistics

4. The first step of the engagement is to draw out by hand a new page layout with the desired areas generally defined and placed.

5. Next draw out each of the desired areas in greater detail, questions and notes. Added notes are for fingerprinting with the client.

7. The pieces are all passed by the client subject matter experts and approved tentatively.

8. The pieces are all developed from existing parts of old pages or from scratch when they do not.

9. This one was from existing HTML of old pages.

10. This one was a new JavaScript that developed using client provided images.

11. This one was a PowerPoint saved through a graphics screeen capture since its final form is not sure..

12. This one was a JavaScript CSS combo cloned from a previous engagement. The color was changed and it was reduced from 3 levels to two. The arrows were added to level-one for multi level, sets.

13. This map is for a button to go to the next page and was borrowed from Google image as a temporary part to demo to the client committee. The marquee above is a JavaScript CSS combo cloned from a previous engagement.

14. Begin constructing the page using the pieces developed or captured. They should be screen captures of the actual code generated images.

15. Put the screen images of the pieces created all together. Thus the page may be modeled in PowerPoint to show to the client committee.

16. Demonstration of the operation of the menu and other functions may also be simulated.

17. Here is the actual screen capture of the final result of the development.