website project examples of good site design

Website Project

Examples of Styles Used for Websites- Food Banks and Non-Profits

Qualities of Food Bank Websites• Reviewed 200 food bank sites to discover both the functional and

visual qualities of the best Food Bank websites.

• Considered website "theme" qualities, i.e., colors, fonts, layout, images, banner, navigation

• First viewing ranked sites by High, Medium, Low – relative ranking based on visual quality

• Second viewing of 36 high ranked sites confirmed key functions

• Content Management System used by high-ranking sites

• WordPress (5)

• Drupal (5)

• ExpressionEngine (4)

• ASP.NET (3)

• Convio (2)

• Other

Visual Qualities of Food Bank Websites

• Common discovery on visually-attractive siteso Slider dominates many designso Fixed widtho Two page templates

o Home page o Section/internal page with section menu in left sidebar

o Elegant menu, clear navigationo Some horizontal secondary menus

o Quick Find on Actions – Donate, Volunteer, Give Foodo Lightbox to grab attention (Chicago, Pittsburg, Eastern Wisc)o Search box; Social Media connections prominently set at topo Clean footer, possibly duplicates main menus/functions

Functional Qualities of Food Bank Websites

• Discovered primary functions o Volunteer – Convio, Volgistics, VolunteerHub, othero Donation – Convio, Network for Goodo Email List Signup – Constant Contact, Emma, Convioo Virtual Food Drive – Aidmatrix, Convioo Mobile or Responsive Design

• Measured functions based on seamless integration within the website

Functional Qualities of Websites• Common Elements of High Functioning Sites

o Agency Locator / Find a Food Pantry / Get Help / Meals on Wheelso Blogo Board login / Employee logino Community / Events / News / Photos / Videoso Connections to Sponsors, Partnerso Food Drive Signupo Food Recallso Join Our Mobile Community (FB/ South Jersey)o Metrics on food in warehouse (Hawaii, RFBOo Nutritiono Personal Fundraising (FB/Rockieso Programs Highlight (almost micro-site)o Resourceso Sponsors / Partnerso Take Action / Advocacyo Virtual Tour (FB/NW Indiana)

List of the Best Food Bank WebsitesLocation City State Volunteer Donate VFD Email Mgmt CMS

Mobile/ Resp Web Page

Akron-Canton Regional Foodbank Akron OH Convio Convio n/a Convio ASP.NET http://www.akroncantonfoodbank.orgAmerica's Second Harvest of Coastal Georgia, Inc.Savannah GA Sabretech Sabretech Aidmatrix WordPress http://www.helpendhunger.orgAtlanta Community Food Bank Atlanta GA Convio Convio Convio Drupal http://www.acfb.orgCapital Area Food Bank Washington DC VolunteerMatrixinternal WordPress Resp http://www.capitalareafoodbank.orgCentral Pennsylvania Food Bank Harrisburg PA embed embed DotNetNuke No http://www.centralpafoodbank.orgCity Harvest New York NY None internal internal ExpressionEngine Mobile http://www.cityharvest.orgFeeding America Eastern Wisconsin Milwaukee WI Convio Convio Convio Drupal No http://www.feedingamericawi.org/Feeding America, Kentucky’s HeartlandElizabethtown KY internal NFG Joomla! http://www.feedingamericaky.orgFeeding South Florida Pembroke Park FL ColdFusion http://www.feedingsouthflorida.orgFeedMore Richmond VA ExpressionEngine No http://www.feedmore.orgFood Bank For New York City New York NY Salesforce / offConvio Convio internal ColdFusion No http://www.foodbanknyc.orgFood Bank of Central & Eastern North CarolinaRaleigh NC Convio http://www.foodbankcenc.orgFood Bank of Contra Costa and Solano Concord CA internal NFG Aidmatrix ConstantContact WordPress Mobile http://www.foodbankccs.orgFood Bank of Northeast Georgia Athens GA internal internal Ruby on Rails http://www.foodbanknega.orgFood Gatherers Ann Arbor MI VolunteerHubConvio internal http://www.foodgatherers.orgForgotten Harvest Oak Park MI Cervis internal ConstantContact ASP.NET http://www.forgottenharvest.orgGleaners Community Food Bank of Southeastern MichiganDetroit MI internal Convio internal Convio http://www.gcfb.orgGood Shepherd Food Bank Auburn ME internal ConstantContact Django http://www.gsfb.orgGreater Chicago Food Depository Chicago IL internal Convio Aidmatrix internal http://www.chicagosfoodbank.orgHarvest Hope Food Bank Columbia SC internal Blackbaud Aidmatrix internal ExpressionEngine No http://www.harvesthope.orgHigh Plains Food Bank Amarillo TX internal internal CakePHP No http://www.hpfb.orgMANNA FoodBank Asheville NC Volgistics internal internal PHP No http://www.mannafoodbank.orgNorth Texas Food Bank Dallas TX internal internal ASP.NET No http://www.ntfb.orgOregon Food Bank Portland OR embed internal Aidmatrix ConstantContact SiteCore No http://www.oregonfoodbank.orgPhilabundance Philadelphia PA Convio Convio WordPress No http://www.philabundance.orgRhode Island Community Food Bank Providence RI internal ConstantContact DotNetNuke Mobile http://www.rifoodbank.orgSan Francisco and Marin Food Banks San Francisco CA Democracy-in-action Drupal No http://www.sffoodbank.orgSecond Harvest Heartland St. Paul MN CiviCore Convio Convio No http://www.2harvest.orgSecond Harvest North Florida Jacksonville FL VolunteerMatrixBlackbaud Emma Drupal No http://www.wenourishhope.orgThe Food Bank of Western MassachusettsHatfield MA internal internal Aidmatrix ConstantContact WordPress No http://www.foodbankwma.orgThree Square Food Bank Las Vegas NV Volgistics DonorPerfect Vertical Response No http://www.threesquare.orgUnited Food Bank Mesa AZ internal internal internal No http://www.unitedfoodbank.orgHunger Free Minnesota MN Drupal http://www.hungerfreemn.org/ Association of Arizona Food Banks ExpressionEngine http://www.azfoodbanks.org/

Three Square – Las VegasStrong visual; clear actions; main functions (Donate, Volunteer, etc) tightly-integrated

Harvest Hope – Columbia, SC- Colorful display with clear actions; perhaps too busy

City Harvest (New York)- Light, clean home page; ExpressEngine CMS- Fresh, bright menus; clear footer- Section pages (Volunteer, Donate, Programs) lead with black & white photo

North Texas FB – Dallas, TXFresh look, strong visuals on action items

The FB of Western Massachusetts- More conventional, “professional” look with clear navigation

Oregon Food Bank- Prominent links to major food bank functions/actions

Qualities of Non-Profit Websites

• Reviewed several large non-profit sites for qualities on newly designed sites

• Review provided for discussion purposes, not intended to display the absolute best

• These sites used a stylized look to match organization's cause

• Many of these sites highlighted stories, photos of audience

• Also, display key elements prominently…o Donate, Stories, Photos, Videos

Austin Pets Alive- Clear tagline to tell people what they do; distinctive home/internal page design change- 3 distinct things you can do; Content is fresh; WordPress- Zoho CRM for Volunteer/Adoption forms; NFG/Donations; Google Calendar; Custom Store

Acumen Fund- Innovative “one-page” design on home page; uses Infographic for accomplishment timeline- Design popular with site developers, though some visitors may get “lost” on home page- Distinct things you can do – “What We’ve Accomplished,” “What We’ve Learned,” etc.

Livestrong- Strong use of colors – Yellow/Black- Multi-column menus; bold design on forms- Distinct actions – Get Cancer Help / Take Action

Amnesty International- Image rotation at top; clear actions below- Clear tagline to tell people what they do; distinctive home/internal page design change- 3 distinct things you can do; Sign Up/Donate Now/Act Now; Drupal

Charity:Water- Simple design; plenty of white space- All actions – Fundraise, Sponsor, Info, Birthdays, Donate -- are available above the fold- Bold HOME design and secondary navigation menus (Water Projects, Get Involved, About)

Children in Crisis- Carousel image rotation, prominent DONATE links

Girls Action Foundation- Simple design; plenty of white space; Drupal- Good balance between images and text- Clear navigation & prominent calls to action

Family Promise- Good use of colors to brand site- Simple to read and taglines explain what’s going on; Drupal- Constant Contact for subscribers; NFG/Donations; Yahoo Store