Rationale

I feel that my website meets the requirements of the New Zealand Inline Hockey community group by being a way to connect and inform each other of happenings of the sport and related articles. Through discussion of my project with many Inline Hockey players from all over New Zealand at a recent tournament I found that players wanted a way to communicate and be able to find out what sessions and trainings are going on in other areas as inline hockey players usually travel all over new Zealand and usually travel home often if living in other areas. I took this request  then studied  and developed the current NZIHA website which is a simple informative website with no community and implemented a community pin board and scrimmage board  which allows users to post important notifications and posts on a wall and are able to follow ones they have interested or are needed to  follow for information made by other users also can post up training sessions, one-off games or small regional leagues  on the scrimmage board.my website also has all the information users would expect from my type website such as News, Events, Standings and club contact details. My website makes room for users to celebrate successes of others and of the sport bringing the community closer together. 

Finished Website

Completed all pages, links and styles

External Links Used

Rosters.PDF
Downloaded from http://www.inlinehockeynz.org.nz/

Tinsel Town For Sporty Star

http://fairfaxmedia.newspaperdirect.com/epaper/showlink.aspx?bookmarkid=SHN6ZPNR6K73&issue=18232013031100000000001001&article=6802d2cf-7ad5-4891-aaf3-ef644c7151bf

Hockey Rep Times Two

http://fairfaxmedia.newspaperdirect.com/epaper/showlink.aspx?bookmarkid=92306UAVO1P4&issue=17532013031200000000001001&article=e371ee96-8221-40b8-82ed-1da3fa02c467

International Call Up

http://fairfaxmedia.newspaperdirect.com/epaper/showlink.aspx?bookmarkid=PDZVL1HZYQ97&issue=18302013032600000000001001&article=ad84e887-a697-42d6-b968-eb62dc02a3ff

SABRES INLINE HOCKEY CLUB

http://www.sabres.co.nz/

Creating the community

Started of creating a flow chart to define the paths and where everything will link too and work out.

Green=pages

Yellow=Action/Click

Community Home

Screen shot showing the profile bar, community nav bar, following and attending posts.

Community Pinboard

Screenshot showing the pinboard feed, icons and page setup.

Scrimmage board

 Edit Profile / Registration

Edit Profile and Registrations used similar fields for the page just that some use the disabled feature in the edit page. 

New Post  

Screenshot showing new post page with  title field, to field which would be used to send to individuals,  groups, teams and all.

Standings & Events pages complete

Standings

Simple hierarchy used in the placements of each team.

Events

events page listing major events of the NZIHA 

and a preview photo of the official NZIHA National Champs  (poster not designed by me)

Club Page

Draft Maps

Example 1

wanted to try out a way that when you rollover with the mouse the map would light up but due to div diffucultys thsi was not possible due tho the lower region and southern region are too close together.

Example 2

tested a way if they were permanently on but looked to bright and thought it disrupted the aesthetic of the site.

Example 3

idea of rolling over the island and  the text appearing but had problems with the java scripting  would not load the preset images for some weird reason and only loaded "Northern"

Resolving solutions within Dreamweaver and layout of buttons.

used rollover buttons for the "Northern, Central, Lower North and Southern"

made a nice simple outline map with color coding for text.

Final screenshot resolved solution.

each button once rolled over represents regions colors and corresponds with map for ease with user.

Progress

Spent the weekend in Auckland up at a hockey tournament and had no internet connection but i got my Home page finished. 

and my news feed page

the first 5  news items all have links attached to the corresponding article.
changes through pages 1 and 2.


Resolved LOGO:

decided to adapt my logo to the navigation bar just for aesthetic reasons.

Getting there with Divs

1st Attempt 

trying to understand divs and styles with my 1st attempt at creating my website template

2nd Attempt 

with help from tim explaining easy troubleshooting methods and ways to resolve mistakes i now understand divs now and have a basic template for my site now just need to add  my context and link  pages together.

Visual

Colour Palette

 Palette to base my website around:

may not decide to use the light blue colour

Custom Made Logo

First Step:

Started in Adobe Illustrator to create the correct size and right font and layout. i used Impact but was going to add my own twist in Photoshop.

Final Logo:

I gave the font a warp and played with a few blending options such as Inner Drop Shadow, Stroke and Outer Glow until i found what i think would be suitable for my target market.

I added the fern which i created in Illustrator.

Custom made background image

I started with  this  found sports court image and ran it through photoshop...

Sourced from:

http://www.gamecourts.com/ClientFiles/GameCourts/Assets/UserFiles/file/tile_and_lines.jpg

Converted the image to greyscale then  adjusted the Brightness and Contrast.
I then used the burn tool too create this darker shadow perspective off into the distance effect.

Final BG:

I left the black bar in the middle as that wont be seen due to the large container over it which will be black to give the layout visual symmetry which looks aesthetically better

Wire Framing

Paper Prototypes

Prototype 1

 Prototype 2

Prototype 3

Prototype 4

Grid Research

I like the idea of this layout/grid in this Mission Inline Hockey Website

http://inhaler.missionhockey.com/

i like the large central heading and image which i could use to show a News Article, Notices or Upcoming Events.  i would use a similar navigation bar but on far right of it instead of  the Facebook links it will be the log in text fields.

have a template for the 960 grid system which i have used to layout my own wire frames.

....

Sitemap

Brainstorm

Stylistic Reference

Mood board which includes: Color Swatches, Web Layouts, Drop bars  Buttons, Font Styles, Logo Design, Stylistic References, Photos, Background Ideas.

Related Websites

New Zealand Inline Hockey Association Website

Pros: 

Subtle dark grey scale bg

Latest news bar for easy access

Cons:

Layout (Body Text)

Image hierarchy and Positioning

Inline Hockey Australia Website

Pros:

Central Image and Overlapped Logo

Regional Links and Flags

Cons:

Menu Bar Links

Link text.

International Inline / Roller Hockey Federation
also known as
FIRS

Pros: 

News Feed

The Community

Twitter AD

Cons:

Dislike layout of right side

Banner

NHL Website

Pros:

The team Logos Up the top linking to other pages.

Subtle Bg Image (Black Ice)

Grid

Drop Bars

Cons:

Pretty busy

AHL Website

 Pros:

Subtle Background

Logo

Banner with links

Cons:

Busy

Website Idea

Choose a group that would benefit from a community type website.
Inline Hockey New Zealand
(link to current website)

Consider what the site needs to do?
Connect the Inline Hockey Community Of New Zealand
Topic Discussions (New Players, Rules, Events, Ideas & Development etc.)
News
Club, Regional, National Team Information
Events
Celebrate successes
Inform new players about getting involved
Links to helpful sites

Consider who your target audience will be?
Members/Players of NZ Inline Hockey Clubs
Public
Interested Parties
Travelling Inline Hockey Players (International)
All Ages
All Income brackets
Ice Hockey Community & Enthusiasts

What are the objectives of your site?
To simplify and connect members, players, supporters and Interested parties  to discuss, follow and be informed of happenings within Inline Hockey  throughout New Zealand.The website will help the development of the sport in New Zealand by allowing the input of the community about decisions made and be a voice to the administrators and governing body of the sport.

Website Research

1) Pinterest

www.Pinterest.com

This site is used to organize and share images and links that you find interesting on the internet.

"Pinterest" allows users to create a blog like wall called a “Pinboard” to post Links and Images to share with an online community. Other community users can search common interests to find these links and pin boards and are able to follow the links they are also interested in and even pin links to their own pin boards.

The Unique feature along with this site would be that you can browse pinboards created by other people and then pin their links to your own boards. This site is a great way to make creative things go viral.

I like to use this to create large inspiration libraries of pin board images to spark Ideas with design.

2) Creattica

www.Creattica.com

This site is used as an online resource of inspiration designers.

Creattica is a gallery of great design and inspirational imagery Community submitted. Anyone can submit their work for consideration and voting on items is open to one and all. The best work is accepted and featured in the gallery which receives thousands of visitors every day.

The unique feature to this site is that through your community profile all your posted Material creates an online portfolio and Any Community Members are able to be contacted to request work for other Members and Companies.

I use this website as i like the wide range of categories of design inspiration

3) Brands of the World

www.brandsoftheworld.com

Brands of the World are used as community website for members to discuss, upload and get inspired by Brand Logos of the world.

Brands of the World have a comprehensive library of brand logos in vector format available for community download. Brands of the World is also a great place for designers to upload their own logo designs and professional details to get exposure, recognition and clients.

The unique feature to this site is the annual Brands of the World Logo Awards which is held celebrating the best logos Members have created

4) Facebook

www.facebook.com

Facebook is used to make the world more open and connected.

With Facebook you can connect with family and friends and send massages to people, upload pictures, join groups, comment on pictures, chat to your friends, find friends and share links from the internet all helping you stay connected with everyone with everything you do.

unique feature to facebook is the ability to join groups creating little communities within the site, allowing to keep members notified and informed of events and happening within the group. a great feature used for sports, study, work and friends