Rationale

My aim was to design and compile an interactive piece that systematically describes a process, event or documents a series of steps.

For my infographic I chose to utilise knowledge that I already had with digital artwork, and gain more in the process to explain the stages of how I create my work. The intention of this was to hopefully inspire people to give digital painting a when they see that it is interesting and interactive.

To achieve this I created a linear timeline that stopped at each frame to allow the user to interact and explore each stage before moving on. I wanted them to be able to see the effects of each step so I designed the image to show what was added while providing more information when the cursor overs over it. There is also a navigation bar at all times at the bottom to allow the user to skip forward or go back whenever they wanted. The final frame is a full sized comparison of the final painting and the reference image to clearly show what the final result was.

After the suggestions at the presentation I could have improved the infographic by adding more graphic elements, specifically to the introduction page.

Flash

You can see the flash for yourself here

If you want to see the speed paint of this piece or others like it click here

Content

I have been adding tips and facts relevant to digital painting, such as the importance of adding lights to eyes for them to become more realistic.

Stucture Complete

The first frame is complete along with the basic structure of the timeline, now it just needs to be filled and polished.

Layers

Each layer of the portrait is in a separate re-sized jpg ready to be placed in the infographic.

Interaction

I want every frame to have some sort of interaction, so there will be scroll over functions for the main image, where if the mouse hovers over, it will show what was added at that stage, and some relevant information about it.

At the last stage when the image is completed, I want the final frame to transition to a large side by side comparison with the reference image and the digital portrait.

Structure

The infographic will be a relatively straightforward set of frames. There will be a NEXT button that plays through the flash one frame, where you can interact and read information before continuing. There will also be a navigation system at the very bottom to skip or go back frames.

Speed Paint

I created a new digital paint so that I can take it apart and through the use of an infographic show how it was made and hopefully inspire others to create artwork of their own.

Digital Artwork

Digital Painting is a hobby of mine so I decided to create my infographic on how I go about digital artwork. There are hundreds and hundreds of step-by-step digital painting tutorials out there, so I will not focus everything on the exact process. It will go through what I do, but also have tips and interesting information relating to digital artwork.

http://psd.tutsplus.com/articles/web/fascinating-digital-painting-tutorials/
http://www.hongkiat.com/blog/advanced-digital-painting-tutorials/
http://blog.spoongraphics.co.uk/articles/20-tutorials-for-learning-digital-painting-techniques
http://www.smashingmagazine.com/2009/11/13/35-incredible-digital-painting-tutorials/

Infographic Sites

Visual.ly
Dailyinfographic
Coolinfographics
Infographicworld

Research of Infograpics

Although these infographics are nicely stylised, they are very text heavy. Hierarchy is extremely important otherwise viewers will just run into a wall of text and become disinterested. The use of flash will be very helpful in containing the relevant information untill it is called for.

Live Website

Wellington Food

Updates on website

 The website starts off on the splash page, showing that the website revolves around the search engine

Then you get to the results of your search, where the majority of the website sits, providing many links further into the site.

 The results of the search are the main focus on this page, so they have an interactive accordion type selection system to draw the attention of the user.

From there you can read more reviews and ratings of the selected restaurant.

If you have a visited a restaurant you can rate and review it yourself from the review tab.

There is also a profile tab where you would be able to save preferences and keep track of your reviews.

Splash Page Progress

The Splash page is complete for now, I will probably update the style if I have enough time.

Website Mapping

 "A splash screen is an image that appears while a game or program is loading. The term may also be used to describe an introduction page on a website. Splash screens cover the entire screen or simply a rectangle near the center of the screen. The splash screens of operating systems and some applications that expect to be run full-screen usually cover the entire screen."

I want the search engine to be first thing people see, then have the rest of the website branch off

The search results page will be a three column structure, and will function like a secondary index

Site map

I made a site map to help focus on what pages need developing

Similar Websites

I have found several websites with similar ideas to mine:

     http://www.lonelyplanet.com/
     http://bars-restaurants.wellingtonnz.com/
     http://www.menus.co.nz/
     http://www.localist.co.nz/wellington/
     http://www.tripadvisor.com/Restaurants

I want my website to focus on the aspect of sharing your experience with reviews, photos, recommendations etc

Colour Palette

After exploring restaurant themes, I noticed a clear relationship between food and dark, red, warm colours. I have made my colour palette based on these findings. I included one cool blue colour in case I need a contrast, but it might not be used.

Developments into Food

I chose to keep exploring ideas for a website that has a concept around food. I want to make a search engine that informs you of nearby restaurants/bars/fast food places near you, depending on what you search for.

The target audience will be young adults who enjoy going out for dinner, looking for new places to dine at.

Website Ideas