Story Board Exampleby 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

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

This was a rough pre-engagement annotated PowerPoint discussion straw-horse with a possible preliminary design.

Sunset from Signal Hill Apartments - Freetown

Home

Join our Bureau

Pandemic News

Post Profiles/Images

Bureau Biographies

Bureau Office Portlets

Bureau Contact Lists

Domestic Links

Reports

Speeches and Remarks

AGOA

Announcements

External Links

Join our Bureau AF Projected Position Vacancies

AF FS 2006 Vacancies Plus

Post Overview for Bidders

AF Volunteer TDY Program

AF Post Key Factors

Jendayl Frazer

African Affairs Biographies

1. Assistant Secretary

3 level + in dropdown Slide Show for images

Readers to encourage frequent visits

What should disclaimerBe for the pages I develop?

Marquee with links to state.govContent as well as AF news

20,162 VisitorsHit counters and statistics

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

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

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

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

This one was from existing HTML of old pages.

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

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

•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 <UL>, <LI> sets.

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.

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

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

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

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