|
Rough Sketch
Concept Fonts
Color Main
Mockup Sample Page
Web Flowchart CD-ROM
Flowchart The Process

Rough Sketch


Concept Statement
What the interface will be used for
The Diabetes Information Center, will be a Web site and CD-ROM
designed to provide information about all aspects of the disease to patients,
their families (often also susceptible), and care givers. Conventional
patient education consists of videotape loaned to the patient, a possible
dietitian referral and pamphlets, generally produced by pharmaceutical
companies. Often the newly diagnoses patient will spend valuable treatment
time in denial or less then enthusiastic responses to learning how to
deal with this potentially debilitating disease. The idea behind this
Web Site and CD-ROM is to provide a lot of information to the patient
available at a time and in a manner he or she will be most receptive and
feel less threatened or pressured.
Audience
While Type One Diabetes often afflicts children. It is more the
parents of these children who need the first education. Type TWO
is far more prevalent and is also called Adult Onset Diabetes.
Additionally there is gestational or pregnancy invoked Diabetes.
This product is geared towards adults 25 and up of both genders.
Marketing might well go through Diabetes organizations and be
underwritten by major HMO's and medical groups who would also
provide CD-ROM distribution and also dissemination of the Web
URL.
Interface Dimensions
The common popular size seems to be 800x 600. Both the CD-ROM
and the Web page will be designed to be visible at 800x600-pixel
screen size. All navigation buttons and bars should be visible
at the top of each screen or within the first 600 pixel length.
Main screens and primary topic screens should not exceed the 600
pixel parameter ( no scrolling should be required.) Sub menus
screens can in fact use longer pages but should use anchors and
targets with the target menu visible at the top of the screen
and return to top buttons available each 600 pixels. Clear large
type will make the data easy to identify and navigate even for
older viewers with limited vision. (Remember Diabetes in later
stages does affect vision)
Navigation System
The Web site will have a simple and familiar design. The Core
home page will have a short welcome note along with a "wire
rack of "pamphlets" that are all prefaced as "All
About…" the pamphlets are nested in or stacked behind
each other in two columns. Mousing over any particular pamphlet
allows it to slide up to reveal more of the "pamphlet"
one sentence or choice words to help the viewer understand more
about what each "pamphlet" or section will reveal when
"opened" or clicked. The sliding motion is a Java script
mouseover functioning much the way many familiar drop down menus
work, only upside down. Each pamphlet has an icon visible at all
times to help the viewer associate the pictures to the content.
Beyond the main page, the "pamphlet" is used as the Masthead
at the top of each page with a sub head identifying the specific title.
To ease navigation a simple table incorporated in both the header and
footer will use words as clickable links. Main Pamphlet Topic Buttons
will use the color code and can include a mouseover change if needed to
indicate it is clickable. All other links including anchor targets,cross
site links and off site links, should use standard browser colors for
new and visited links for ease of navigation. The top of each Page should
have the words Diabetes Information Center. The bottom of each page should
have an address footer with the current location, and a mail link. In
the case of the web pages a last updated notation should be included.
CD Rom vrs Web Configurations
The CD ROM will open with a Flash animation and some high energy music
as medical terms and symbols swirl around. The video fades the music fades
and the pamphlets page comes into view as new soft relaxing music fades
up. Audio track.. Announce says" Diagnosis Diabetes.. It can be confusing
even frightening. Relax. The easy to use pamphlets here at the Diabetes
Information Center will help you make sense out of it all and help you
form a winning partnership with your family, and health care providers."
The CD ROM will utilize QuickTime for audio and video elements. Audio
and video elements will not be included in the web site. Audio Elements
will consist of different "relaxing" sounds for each color coded
section. Seashore, babbling brooks, rainstorm( no thunder effects please),
summer night crickets, rail travel and distant train whistles might work
well for the search engine. The idea is to relax the viewer, and that
ties into the notion of stress reduction as a tool for managing Diabetes.
The home page of the CD-ROM could explain the purpose of the sounds and
relaxing. Audio elements would be backgrounded and linked to play through
during all visits through each color coded section. a "soothing effects"
on off switch could be provided at the opening page and on each main"pamphlet"
page. Audio/video and Flash elements are reflected on the CD-ROM flowchart.
CD-ROM Video Elements would include a short clickable movie at
the bottom of each main pamphlet page. A Pharmacist, a Dietitian, A Fitness
Trainer, A News Anchor would each deliver a short explanation of the topic
and why it has importance to better Diabetes health planning. A Doctor
could be the featured person in the Diabetes, and Success sections. Searching
could feature a Sherlock Holmes characterization. A QuickTime viewer would
also be included on the CD-ROM for both windows and Mac platforms to download.
The CD-ROM would also deliver Search links and News Links directly to
the web site versions related pages. For computers with Internet access.
the Web Version of the Diabetes Information Center, would
have regularly updated news links and new search options related
to other sites and information resources as they are developed.
The two products should take all opportunities to cross promote
each other.
Typefaces
The Font for titles and Navigation Bars will be Arial.
The type may be modified in size leading and tracking to "fill"
the button or pamphlet graphics. An embossed Arial will be used
for free standing titles and subtitles. Impact style buttons
are to be used for the buttons in the header footer navigation
tables, color coded to the included specifications. Times
is the default text but should be up a size or two for easy reading.

The Color Code
Each "Pamphlet" represents a primary zone of information, and each
zone has an associated color. This "color code" should be reflected
on each subsequent page within the primary zone. For example brown is
the color for Medicine. All pages that contain data, graphics animations
etc. related to medicine, supplements herbs and the like, will use brown
borders headings etc. A pastel color of the same primary tone may be used
in the background.
| Topic |
Color |
RGB Value |
Hex Value |
| Home |
Magenta |
142,0,142 |
#8E,00,8E |
| Diabetes |
Maroon |
153,0,0 |
#99,00,00 |
| Searching |
Blue |
6,0,159 |
#00,00,99 |
| Diabetes News |
Green |
0,153,51 |
#00,99,33 |
| Medications |
Brown |
126,81,40 |
#7E,51,28 |
| Exercise |
Aqua |
51,204, 204 |
#33,CC,CC |
| Success |
Black |
0,0,0 |
#00,00,00 |
| Food |
Orange |
246,155,12 |
#F6,9B,0C |

The Main Mock Up

A Sample Page

Web Flow Chart


CD-ROM Flow Chart


The Process
It starts with an idea in the minds eye then a rough sketch, then planning
the site. Using the diagrams, color codes and flowcharts you can have
an input to the design or changes to your site with a minimum of time
and effort on your own part. Or you can just toss out your basic needs
and we can run with the ball from there. Look at the Even after your web
site is designed and implemented We'll be glad to make adjustments to
it. Starshine Design uses State of the Art technology including Macintosh
G-4 computers Photoshop, ImageReady, Fireworks Dreamweaver and meticulous
hand coding to bring your pages to life. Pages are also previewed and
adjusted for a variety of browsers and Windows PC displays before final
publishing. If you need a place to host your Web site We work with some
of the top names in Internet serving to get you hooked up with reliable
fast efficient service.
Choose Starshine Design. You'll be glad you did.
|