Difinitive Mindmap

Here is a finalized mind map I have developed for my Dog Care infograph.  As I am documenting an object (dogs) I have chosen to use a page based format with a more traditional navigation system. The opening page will act as an introduction and lead into the first section of the infograph which is 'Breed'. The user will then be able to select a breed of dog, then continue further through the navigation menu to explore the other infograph sections. This allows more control over what the user views and the buttons they wish to push.

Nintendogs

Nintendogs is a real-time pet simulation video game developed by nintendo. The game allows users to adopt a puppy then teach, care for and love their furry friend. The game has a similar context and content (of dog care) and displays it in a playful and visual way. The game uses a lot of iconography and imagery in its navigation, to process information in a visually pleasing and recognizable way.

Research- Dog Infographics

Displayed are a few Dog Infographics that I feel work well. Dog and pet infographs tend to evoke a playful and quirky feel through colour and display. The colours are pastel and dog related to exhibit the subject quickly to the viewer. The content often includes a fact reinforced by an image, which often includes pie charts, graphs, maps and size comparison. Similar aspects of symbolism and iconography are repeated throughout each of these examples, for example paw prints, bones and the depiction of dogs with people. 

Decided Subject - Dog Care

Here is a refined brainstorm I created of my chosen theme of 'Dog Care' -

Research- Infographics

Cake

http://designtaxi.com/news/357153/A-Series-Of-Illustrated-Infographics-That-Explain-How-Our-Daily-Objects-Work/

Jing Zhang created a series of Illustrated infographics similar to this one, displaying how our daily objects work. The colour scheme works really well with the subject of cake, and I really like Zhang's unique illustrative style and simplicity. The facts are clear and easy to read, and icons have been used wherever necessary and possible.

Beagle Training

http://www.dogbreedstraining.com/breeds/beagle-training/

This infograph portrays the subject of Beagle Training and contains information about both the breed in general and tips for training. Graphs and bars have been used to visually display the facts and are very eye catching to the viewer. Having a photograph of the beagle helps establish the subject quickly and visually.

The DNA of a Successful Book

http://visual.ly/taxonomy/term/72835

The DNA of a Successful Book displays facts about men and women preferences to books, who reads books and the number of pages within best selling books. The colour scheme of this infograph is very quirky and inviting. The Illustrative style is minimal, however the use of texture adds and element of realism and complexity. I am very fond of this subtle contrast.

X-Men Family Tree

http://visual.ly/x-men-family

This infograph portrays the family tree of the X-Men characters from the original Marvel X-Men comic series. Each character has been redrawn in the artists own illustrative style, and simplified by including distinguishing features and only displaying faces. Colour is used effectively in this piece as a classification method attracting our eyes to whats important- who's related to who? 

Potential Ideas Brainstorm

Research - Infographics

Accessibility Challenges in Email Design

http://litmus.com/blog/accessibility-email-design-infograph

This piece displays the most common types of disabilities amongst Americans along with eight email-friendly principles to ensure peoples messages are usable by all. The use of iconography and charts really works well and engages the audience to read further. The overall columned layout and central downward focus works really nicely in specifying the order it is meant to be read.

 Avengers, Assemble

http://lemon.ly/work/avengers-assemble

Lemon.ly created this infographic in honour of the release of the Avengers film asking Twitter fans to rate the characters upon 5 different categories. I love the depiction of each character whom have been simplified and stylized, but are still recognizable. The charts are a good depiction for displaying statistics, and having the twitter Avengers fans vote adds a nice interactive and personalized touch.

 Dinosaur Comparative Sizes

http://www.bestinfographics.info/dinosaur-comparitive-sizes/

This chart was created to show the varying sizes of recognizable dinosaur species. The simplicity of this piece is my favourite aspect. The dinosaur images appear minimal appearing as filled shapes. This helps draw attention to the information the creaters are trying to convey, which is the varying sizes of each species in comparison to one another and humans.  

Faster, Better, Stronger

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/08/infographic43.jpg

This infograph displays the links between technological evolution's and athletic performance, focusing on the 2012 Olympics Swimming races. The piece contains some really nice sets of imagery that display the ideas well in various ways. The information is clear and pictures reinforce the individual facts well.

Tea & Biscuit Giude

http://visual.ly/tea-biscuit-guide

Displayed in this infograph is a Tea & Biscuit Guide based on the top 8 UK favourite biscuit brands, which were tested and voted for maintainability once dunked into hot tea or coffee. This simple graph displays clearly the good and bad ratings of each biscuit. These are clarified by the happy and sad faced icons which I believe add a nice touch and help convey the message well.

Tiger Extinction

http://www.bestinfographics.info/tiger-extinction/

This work conveys a more serious awareness of the growing extinction of tigers. The colour scheme matches the subject of tigers nicely with the greens representing nature and the bright orange resembling that of a tiger. Maps and icons work well with this subject, and display the message formally. 

New Brief - Infographics

Infographics

Infographics are visual presentations intended to communicate complex information quickly and clearly. The devices include, charts, diagrams, graphs, tables, maps, icons and lists. The basic material of an infographic is the data, information, or knowledge that the graphic presents. Most Infographics are fun to read and provide valuable information.

History of Infographics

Infographics have been used throughout history. The first known examples of infographics are hieroglyphics or cave paintings in ancient Egypt 5,000 years ago.

The Commercial and Political Atlas, published in 1786 by William Playfair, was the first example of modern infographics. Otto Neurath was then famously known to have attempted to create a language without words, an endeavor that developed into the Isotype movement (International System of Typographic Picture Education). Early adapters of infographics in the US include Fortune magazine, the Chicago Tribune and the New York Times.

Types of Infographics

Cause and Effect Infographics
These graphs explain causal relationships between various physical or conceptual stages; for example, the causes of the recession in the US and its effect on the global economy.

Chronological Infographics
Chronological infographics explain an event or process as it happened in time. Presenting information on a timeline enables readers to analyze the temporal relationship between various stages of a process.

Quantitative Infographics
Quantitative infographics convey statistical data to readers quickly and clearly. These graphics include charts, bar graphs, tables and lists.

Directional Infographics
Infographics can navigate readers through information. Numbers, symbols, icons, diagrams, graphs, tables, arrows and bullets are used to communicate information.

Product Infographics
Product infographics can be seen on notice boards at factories and corporate offices, conveying information to all employees and visitors. Product infographics are also used by dieticians and in cooking schools to convey key procedures. Combining images with data makes it easier to comprehend large amounts of information in a limited space.

Rationale

I chose to create a website that represents the local community group of my cricket club Hutt District Cricket Club (HDCC). The club was founded in 1909 and for the past 100 years has fostered cricket in The Hutt Valley and Wellington. With over 500 members Hutt District is a leading club for men’s, women’s and junior cricket in the region. The club has twice attempted to create websites that encourage players to join, however both were disbanded and left outdated. It was my goal to recreate and redesign the website to a higher standard with easy navigation, critical information, interactive features whilst maintaining principles of good interface design and usability.

The program I have used to create the webpages was Adobe Dreamweaver CS6. Each page consists of a number of CSS style sheets attached to an html file. To add an element of interaction and meet the Clubs requirements, I have added a few CSS style sheets relevant for external resources and applications for example Google Maps and Show My Weather. I structured the website in a way that provides easy and logical navigation for the user whilst maintaining a consistent layout throughout the website.

The website consists of four overall sections- general club information, men, women and junior. This allows users of any intention to access the section they need, quickly and easily from the homepage. The men, women and junior links are displayed on the homepage and are represented by images to gain the viewers’ attention immediately. Their eyes are then free to diverge to the banners display menu hosting links to information about the club itself. All information I put on the site was negotiated with the HDCC committee and board members, as well as existing material on the other two websites. I chose to have a background image of the clubs ground for the website to help engage the users and act as a symbol of recognition.

The websites visual layout was strongly influenced by the clubs existing logo and branding. HDCC has an official blue hue displayed beside white, and their font is always Helvetica or Arial. To keep the branding consistent and true to the HDCC image I decided to integrate these colours and fonts into the website. This will help users recognize the website belonging to the HDCC, which is ideal for the target audience which is the clubs existing players. It reflects the tone and aims of the club, whilst maintaining an appropriate sense of professionalism.

If I had more time to complete this assignment and continued the project, there are a few extra elements I would explore. Firstly, I would have looked into adding a zoom in feature for the 'honours' page imagery, allowing viewers to read the names on the boards clearly. Also I would add an update feature that allows coaches and managers themselves to access and edit the news feed and content themselves.

Final Website

Here are some screenshots of my final website for the Hutt Districts Cricket Club community. The website consists of approximately 26 pages. It is built ideally for the browser Google Chrome.

Client Consultation

I had a client consultation today to show the committee my final work, and they loved it. They asked me to edit one thing, which was the facebook icon in the top right. They said that there was no need to link the site to facebook as HDCC does not have a facebook page. Also as Crichq is a new vastly expanding technological company, they suggested I change the words 'follow us on' to 'check out'. This allows users the freedom to explore the possibilites crichq has to offer.

new layout-

Audience Testing

I tested my website on my target audience to gage a response on how the website would perform if it were to be implemented. I showed the site to 11 different people- 3 whom are current players, 2 whom are parents of current players, 3 whom are HDCC committee members, 2 whom are interested players and 1 who is a past player.

Comments/ Feedback given were:

• The site reflects the sport well and is easy to interpret -Having an image of the Hutt Recreation ground as the image background + the strong use of blue helps clarify this. 
• Showcase of the site- important aspects displayed on homepage
• Layout is easy to follow and structured logically
• Icons appear a little out of place- needs specification
• Interactive features are nice and easy to interact with
• Site is nice and informative

Majority of feedback given was positive, which is great. However, mentioned a couple of times was the purpose of the facebook and crichq icons displayed :

I will therefore add a line of text beside these icons saying "follow us on:". This should clarify the purpose of them being there.

Development

The development of my website is almost complete. I have created all the webpages planned and filled them with the proper content. I now plan on displaying the site to the committee on Friday during a consultation, to  see if anything needs editing before hand in. Here are some images of a few of the pages-

Homepage

Men ->News

Men ->Training

Women ->Representatives

There is are only a couple of major design changes I have made to my original paper prototype and wireframe. The first is that I have decided to include icons into the 'Match Reports' pages that lead from the mens, womens and junior players pages. I thought a more visual interpretation of the handbook and the websites logos would be a more interesting and interactive aesthetic a opposed to text on a page:

icons-

 

displayed on webpage-

Men-> Match Reports

The second major change, is more to do with my original navigation. After a further consultation with the committee the other day, they decided they wanted a couple of the titles changed-

About---> Contact

they want changed to:

About--->Bookings

I have taken this into account, and changed the title.

Target Audience

I have created a chart that displays the target audience for the Hutt District Cricket Club website-

Main- I have listed the current Hutt District Cricket Club players as my main target audience. Simply because the players will want to access the site to find out important information about their upcoming games, match results, registration dates, cancellations, etc. This will require a consistent and updated site.

Secondary- Prospectus players, Parents and Committee members & organizers will be my secondary audience. Players interesting in joining the club will seek guidance and information, and the internet is the basis of information for our generation nowadays. Parents of current players (particularly junior) will also be a secondary audience. As the junior club ranges from years 2-8, alot of them are reliant on their parents organizing their travels, registration, training's etc. Committee members & organizers may also wish to visit the site for information on upcoming events, teams scores, current sponsors, etc.

Other- Other teams, Rep selectors, Officiating bodies and Past players may also access the website. Other teams will want to see Hutt Districts current scores and players. Rep selectors may also wish to view these statistics in order to help them in their decision of which players have the ability to play rep. Past players and Officiating bodies may also wish to view the site to read at the clubs history and view the clubs honors boards.