website design presentation to members of the american morgan horse association by bill lere august...

Website DesignPresentation to Members

Of The American Morgan Horse

Association

By Bill LereAugust 22, 2012

Copyright, Bill Lere, 08/22/2012, Minneapolis, Minnesota

Website Description

The American Morgan Horse Association * Member driven contributor to the equine industry

Primarily Focused On * Education, recreation, advancements in equine health

* Breeding programs for “The Morgan Horse Breed”

* People who own and care for them

Secondary Focus * Building an online community

* Marketing products and services

* Education through publications and other media

* Providing links to other sources

Basic Demographic

This Audience Includes (But Is Not Limited To) * Horse lovers of all ages and income ranges

* Riders, showman, (all disciplines and classes)

* People interested in all aspects of horsemanship

Advancing Sources For * Breeders

* Buyers and sellers

* Trainers, students, and riding instructors

* Veterinarians, and more

Demographic Region * The United States and Canada

Design Goals And Concepts

Purpose

• To create a focal point for news, education, opportunity, and sources for the

health, wellbeing and promotion of the “Morgan Horse Breed.”

• To create a fresh look and feel

• To build in easy navigation

• To install universal usability concepts for those with handicaps

Basic Construction• Header, left side navigation, right side ad space, and footer (include CSS)

• cool color pallet, use color sparingly

• Sanserif text and headings

• Domain remains as it is www.morganhorse.com

(As always, this design is open for suggestions.)

Design Features

Header Includes (will use CSS for consistency)

* Logo on left side (will design)

* Site Identity

* Help, FAQ, site map, member log-in, forgotten password

* Site search

Main Body Includes * Page content and breadcrumb navigation trail

Left Side Bar Includes * Navigation

* Social media (Client Choice)

Right Side Bar Includes * Advertising Connected To The Site and Subscription Info

Footer Contains * Copyright, address, and main phone number

(All items are open to client ideas)

Other Design Options

• Assistance with menu choices

• Easy access for the user and for maintenance

• Links To web pages can open in the same window or different aWindow

• Consideration for banner ad space if applicable

Browser Requirements • Internet Explorer, Firefox, Safari, Opera • Consider optimization for other devices.

Testing

• Alpha testing will occur before the site is released.

• Beta testing is an option for customer feedback on functions

Proposed Site Map

This is an example of what the

Site Map might contain. It will appear in the main

body as a webpage when

“site map” navigation is

clicked in the upper right

corner of the top banner.

All items are live links that

Open the corresponding pages.

Basic Site Structure Main Navigation

* Left side bar

* All pages connect to home

* Every page connects to all

other pages

Contacts Section

* names As links to bios and

contact info ( email, phone, etc.)

(Bios open in their own page)

Tack Shop, Book Store

* Includes shopping cart

(includes payment options)

Members, Events

* Include registration forms

(where applicable)

All applications, forms, and shopping carts connect with appropriate servers.

The colors in the above chart are for category separation only. They don’t represent any colors of web pages or design elements.

Basic Wireframe Parts Include

* Header ( Photo Link To Home

( Logo / Site I.D.

( Site Map, Log-in, Etc.

( Site Search

* Footer ( Copyright

( Main Contact Info

* Left Navigation ( Links to Web pages

( Social Media

* Right side column ( In Site Advertising Links

* Main Body ( Information, Main Copy

( Breadcrumb Trail

Header

TypographyFont

• Verdana

(Main Body)

• Headings (48pt Bold, Blue) • Secondary headings (24pt Bold, Blue)

• Text (16pt Regular, Black)

(Left Navigation)

• Main category titles (21pt Bold, Blue)

• Inside category titles (12pt Regular, Blue)

Left navigation headings are blue but change color when clicked

Sample graphics from Contact page, Graphics may change as project moves forward.

Navigation

Left Nav Bar

Opens pages in body

*font color and background

………color changes

*Breadcrumb trail is highlighted

for way finding

* Right side ads open in body

……….to featured page.

* Names open bio page in their

own window and change

color when clicked as a

……….reminder for way finding

Project Disclaimer

All Items shown in this presentation are open to new ideas within the scope of design requirements and fundamentals.

The Client assumes all liability for copyrighted material and photos used on this site.

Thank You

Bill Lere