Development

Here is the development of my index page for my website so far. Using divs to divide the sections of my website, I am able to move the page elements alot more freely. Thusfar, I have stuck to my original wireframe with only one or two minor changes.

Window Size & Browser

Whilst creating the website it became apparent to me the importance of knowing what size window will most likely be used by the audience visiting the site. Due to the unprecedented rise in the use of mobile devices, we are seeing a flood of websites that are designed to work on both desktops and phones. Because of this, I am going to create my site with elements measured in percentages rather than pixels allowing them to work on different screen widths, whether it’s 320 pixels or 2500 pixels and still maintain its design aesthetic. 

To be more precise, I decided to ask a few team members and members of the committee about the screen sizes and browsers they use in order to produce a website predominantly to them. My research concludes that majority of them use a 1366x768 resolution, and approximately one third use 1024x768. However all of them said they have mobile phones and would access the website on whichever is more convenient at the time.

 About 50% of them said they use Google Chrome as their chosen web browser, and the rest use either Firefox or Internet Explorer.

This confirms my original decision to create the website to caterfor multiple screen sizes-  particularly around 1024-1366 sized screens.

Website Divs

I have separated my website into divs as it gives me more flexibility and absolute positioning, as opposed to using tables which the old Hutt District Cricket Club uses. This image displays the basic layout of divs in which most of my pages will follow. This way my structure will be consistent.

Research

Box Model

I had a look into the box model, to gain a better understanding of the makeup my site will have-

• Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
• Border - A border that goes around the padding and content. The border is affected by the background color of the box
• Padding - Clears an area around the content. The padding is affected by the background color of the box
• Content - The content of the box, where text and images appear

Icon Design

Icons aren't a big part of my design because alot of the target audience are older men who aren't interested in a creative user experience. They want a simple easy to understand and use interface. However I could include a few subtle symbols that are well recognized, for example-

Call to Action

Here are a few interaction features I will incorporate into my website-

• Linking log in through facebook
• Links leading to Cricket Wellington website
• Weather RSS feed
• CricHQ integration

Wireframe

These are some wireframes I created using Illustrator. This gives a structural template of my content, and I now have a clear image of the elements that make up my website. I used a 1024x768 canvas, as they are the standard dimensions of google chrome- which is currently the most common web browser used.

Homepage

Template

Template

Template

The image I used as the background is one that I took today when at the Hutt Recreation Cricket Ground (HDCC's home ground)-

Grid

Consistency and predictability are what I was aiming for. I first chose to create a basic layout grid, using a couple of websites I found  -

http://grid.mindplay.dk

http://www.gridsystemgenerator.com/

I've decided to go with a basic 3 grid layout- containing 2/3 content, and 1/3 navigation. To gain a better understanding, I analysed a few sites to see the different sorts of grid structures used-

URL- http://lostworldsfairs.com/

This website has a basic 3 column structure, with varying row sizes. The first screen displays the important content- which in this case is the different artists pages. As the user scrolls further down, they can then read descriptions about them. This is a good website for me to look at when creating mine, and I will also try place the most important sections I want people to access above the fold.

URL- http://pitchfork.com/

There is alot more content in this website. The homepage appears busy, but orderly with a clear grid structure organizing it. This website also has a 3 column structure similar to what I wish to achieve, so again another good example for me. The layout is consistent, and offers alot of information for the music festival lineup.

URL- http://www.viddy.com/

This website focuses on video and offers people to share their videos with friends. The site offers interaction by allowing the users to connect through facebook. The site has a nice clean grid structure layout suitable to the vast content it offers. You can play the videos just by clicking the images displayed- making navigation easy.

Divs

Week 3 lab class, working with divs, float & images-

Paper Prototype

Here is a paper prototype I created using paper, to help map out my ideas more clearly. It gives me an over view of my layout, and I have used colours to help clarify the navigation of the site better -

Mindmap

I decided to create my mind map on the computer, as it'll help me visually understand the structure and layout of my website. I also colour coded the pages, to gain a better understanding of the navigation and which parts different people will visit depending on their purpose.

Client Consultation

I had another meeting with the committee today, and this time it was a full meeting- as the junior, womens and mens leaders were invited to come to discuss ideas for the HDCC website. I took notes of what they discussed, ad have scanned them here-

They are pleased with the progress so far, and suggested only a few ideas to incorporate- for instance adding links to both facebook and cricket Wellington. They also would like pictures of the cricket ground, a google maps link and a weather link s players can justify whether a game may be canceled or not.

Moodboard

Here is a draft of my moodboard to help gain a visual aesthetic of the website-

Here is a more refined version of my original moodboard-

HDCC Branding

The HDCC already has alot of existing branding that I would like to analyse and use as reference for potential designs.

Uniforms-

 Caps-

Logo-

The club has a clear pair of representative colours- dark blue and white. Including these in the visual layout of the website will be more effective and recognizable to the viewers. It will also add an element of consistency, which is always preferred.

CSS

Week 2 lab class, learning CSS

Client Consultation

I had my first meeting with the Hutt District Cricket Club committee on Monday (04/03). I gained an insight to what the members wanted and brought my laptop with my blog and plans to make sure I was on the right track to meet their needs. They enjoy the progress so far, and like the examples I have analysed to gain ideas from. They would like CricHQ links, as this would keep the site constantly updated. One thing they suggested was that I include a data input system, where managers and coaches can write in the blog constantly giving their teams information and updates. This would require alot of extra work and is not part of the HTML and CSS based brief, so I could include this element if I have enough time.- otherwise, I could extend and hand in without data input and create this over the 2 week holiday break for the club. 

Otherwise, I received the members and chairmans email addresses, so that I can keep updating them with my ideas and where I am at. I have already asked them to email me content for the website which I am expecting to receive over the next week or so. 

Lastly, the man who created the original site was at the meeting and has offered me the original coding and content to develop and use for the new website.

Competitor Comparisons

In the Wellington region there's approximately cricket 20 clubs (more or less) that offer teams to compete in the Wellington cricket competition. I decided to analyse a few of their sites to get a feel of the competition the Hutt site will have:

URL- http://www.jcc.org.nz/

This is a screen shot of the Johnsonville Cricket Club Inc website. The site has a clear horizontal navigation system and layout which makes it user friendly and easy to maneuver. The first thing an average user sees (1024x768) is the sponsors, contact and brief description of the club itself. I dislike the plain grey background, as it makes the overall website appear dull and less aesthetically appealing. I also do not enjoy the text placed over the photograph explaining event details as it is exceedingly hard to read. Overall, it has good sections and is very informative towards the target audience which is clearly members of the club & players interested to join.

URL- http://www.collegians.org.nz/drupal/

This image displays the homepage of the Wellington Collegians Cricket Club. This website has a nice calming colour scheme, however it is unclear what the teams official colours are beacuse their uniforms are yellow and black? The toolbar navigation is displayed very nicely, and keeps good consistency throughout the website pages. The website gives links to the Wellington Cricket website for updates on scores and match reports which is a good way to keep it updated, not needing a user to constantly do so. 

URL- http://www.sportsground.co.nz/petoneriversidecc/44362/

This is a screenshot of the Petone Riverside Cricket Club website. This page is very cluttered, which makes it hard to read the text displayed. I dislike the contrast of the image in the header and the background photograph- as the qualities are vastly different, and the colouring is harsh on the viewers eye. The link to the sportsground search app makes it interactive which works. However, the toolbar is too similar to the paragraph text making them hard to distinguish between.

   

Initial Design

This is a brief sketch I created whilst speaking with the managers to gain a visual idea of what they were looking for. I will present this during the committee meeting and get feedback.

I also drew a quick mind map to get an idea of the links and potential sections of the website.

Permission

After contacting the Hutt District Cricket Club managers and board members, the chairman has given me permission to borrow content & photographs and recreate the current website(s) with a more interactive, informative and up-to-date website. They have invited me to a committee consultation meeting Monday (04/03) afternoon in which they will explain everything they want the site to include. It has already been suggested that I include links to the CricHQ website and applications.

CricHQ was founded in April 2010 by Simon Baker, Stephen Fleming and Brendon McCullum and launched its prototype app six months later in New Zealand. It is made for cricket by cricketers. It's popular because it includes everyone. The CricHQ website delivers unique cricket content, critical management capabilities and social networking. The application is free and offers a number of abilities such as live scoring which updates directly to the website. I have asked CricHQ for permission to include their program within my website and intend to hear back from them shortly.

http://www.crichq.com/ 

Existing Cricket Websites

URL- http://www.riccartoncricket.co.nz/riccarton-cricket-club1/

Riccarton Cricket Club is a local cricket club located in Christchurch. This is one of the more developed and up to date community websites in New Zealand.  The grades and teams available will be very similar to that of the Hutt District Cricket Club, and therefore is a good example to look at. The Riccarton Cricket Club colours are displayed well, and the placement of the news feed towards to the top on the open screen works well. Having seperate sections for the Junior and Senior players makes it alot easier for the user to navigate aswell.

URL- www.canterburycricket.org.nz/

Canterbury Cricket are a regional cricket association. This is an example of a current and interactive cricketing website, and a good one to observe. The cricket ground is displayed in the background image, and the colours are clear through the banner and repeated red borders. It is a simple but effective navigation system that works brilliantly meeting the target audiences needs. Having each section supported with an image also works nicely reinforcing the clearly displayed text.

Current Website(s)

Currently the Hutt Districts Cricket Club (HDCC) has two different websites, one as a centennial commemoration and the other is the 'official' website for the community-

URL- http://www.huttdistrictcc.org.nz/home

coding-

URL- http://www.allteams.co.nz/hutt-district-cricket-club/

coding-

Analysis

• The existing website design(s) appear very bland
  -Standard looking font
  - A lot of blank negative space
• Hutt colours (navy blue and white) are noticeable in centennial website, not so much in current
• Both websites include the Hutt Logo beside the title (unique feature to HDCC/ recognizable symbol)
• Image of cricket balls within banner- generic, but makes community interest and sites purpose obvious
• Interactivity currently exists through the search bar and ability to log on through facebook or twitter
• Currently does not allow users to post content or make comments- could use more social features
• Current team listings only include Mens teams.  To widen the audience & bring whole community together, could incluse Womens, Youth & Junior team listings
• Very cluttered homepage- alot of unnecessary sections
• Overall quite outdated- website should allow constant updating-> forums could help with this