Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August...

13
Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis, Minnesota

Transcript of Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August...

Page 1: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

Website DesignPresentation to Members

Of The American Morgan Horse

Association

By Bill LereAugust 22, 2012

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

Page 2: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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

Page 3: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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

Page 4: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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.)

Page 5: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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)

Page 6: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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

Page 7: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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.

Page 8: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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.

Page 9: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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

Page 10: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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

Page 11: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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

Page 12: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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

Page 13: Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

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