Page 1


Step One:

SITE OUTLINES Am I An Alcoholic?

LEARN

The Science of Addiction Consequences of Alcoholism Recovery Options

Educate

STORIES

Internal Story Page (x12) Submit Your Own Story Take Our Self-Test

GET HELP

Empower

Get Immediate Help

PLEDGE

Pledge

Find Local Assistance

Take the Pledge Don’t Become a Statistic


Step Two:

INTERFACE DESIGN COLOR SCHEME Yellow & orange help convey a sense of urgency.

ACTION BUTTONS CALL TO ACTION

Links are designed to stand out and encourage user interaction.

CONTENT BOXES AND ICONS Bordered boxes are used to break-up content, and illustrative icons help users process information.


Step Three:

CODING

29

HTML

documents

1600

CROSS-BROWSER

COMPATIBILITY

lines of

CSS

RESPONSIVE WEB DESIGN

Validated by W3C

for phone, tablet, and desktop

Scores

99 / 100 on speed tests.

GZIP COMPRESSION

Back-End

CACHING SVG SER VING

Development

For a better, faster website.


Step Four:

INNOVATIVE TECHNOLOGY

Dynamic Quiz Scores are calculated with jQuery, and results are retrieved in HTML.

Content Tabs Large amounts of content are displayed in digestible amounts of information using jQuery.

Interactive Diagrams Clickable diagrams, made with advanced CSS and jQuery, create a hands-on learning experience.

Location Services Integration with Google Maps provides personalized information for users worldwide.


Step Five:

MEDIA ELEMENTS VIDEO

45+

hours

of work

in Adobe Illustrator and After Effects to create original videos.

STORIES

12

personal

stories offering different

angles on addiction.

INTERACTIVE MEDIA FORMS Used to collect data, gain user action, and fight alcohol addiction.


Additional Info:

INDIVIDUAL ROLES Makayla Pinoni Interface Designer

Sarah Riedlinger Web Designer

Tanisha Thomas Content Developer

Lindsay Klenzman Content Developer

Fragments Foundation: Branding Guide  

A look at the branding and design process of the Fragments Foundation website.

Read more
Read more
Similar to
Popular now
Just for you