Gayr's Multimedia Story

Artefact 6 Evaluation

2011-05-11T22:05:00.002+02:00

Overall I am very happy with artefact six and the point it has brought me to within the personal research project. Due to the feedback I received from artefact five I feel that creating a ‘web package’ made from an iphone application, ipad application and website will attract a broad range of students. I have made the iphone and ipad application connect with the same scoreboard but for different variations of the game. This will bring a sense of competition to the game and bring students together over facebook as they can share/compare their scores therefore this will advertise the art gallery more.

Another reason why I have created two variations of the game for different reasons is because of the user experience design. The iphones size is restricting therefore it would be difficult for users to recreate pieces of artwork to that scale successfully in the amount of time given. In place of this game on the iphone I have created a question and answer game. By creating these two games I will attract a broad audience made from more logically minded students that will be attracted to finding out more facts as well as students that are more attracted to the creative aspect of the application.

I think that the applications work well together as they all create a sense of what the art gallery is like through its graphics, layout and artwork displayed within the application. As a final artefact the web package incorporates all aspect that new web interfaces has done to change traditional artwork within education. It is a developed interactive web interface that allows students to develop their education and experiment with forms of artwork both traditionally and digitally. Entwining their museum experience with a new web interface gets students more involved with the artwork.

More Artefact 6

2011-05-11T21:34:00.001+02:00

Due to the feedback from my last artefact I have created an iphone version of the game with a social networking element to advertise the gallery and give the gamers some one to compete with.

I have done a different game for the iphone due to UX issues. It would be hard for the user to create a drawing of a high quality on such a small scene so I have made an ipad version that could be used by visitors within the art gallery.

Feedback from Artefact 5

2011-05-11T21:17:00.001+02:00

This is the main feedback I have used to create artefact 6

I like it. I also agree with sam on the social media approach too.
Some possible developments I would suggest...

Add easy, medium and hard levels to each portrait/image
easy - image is transparent
medium - select parts of image is transparent, the rest blank
hard - blank background only

Maybe a larger iPad version would work better for kids too. Could be attached to the wall for passing kids to play on as art galleries are usually boring for kids.

Win medals rather than extra pens/brushes. Giving them more tools would be a natural development of the game anyway. Start with a pencil only then develop to full colour set of pens, etc. The rewards should be medals for completing each artwork. Gold for 1 - 10 seconds, silver for 11 - 20 seconds, bronze for 21 - 30 seconds finally 30+ seconds 'FAIL!' These times would obviously depend on how complex the artwork was to start with.

With using these medals you would still be able to include the leaderboard. 'John got a Gold medal for completing Fisher Boy in 4.5 seconds. Do you think you could beat his time?' Also you could after collecting x amount of gold medals give them 'youve won a £5 voucher to use at our gallery gift shop'

Overall I think its a brilliant idea that if produced well could spark more than just the 8 - 13 year olds playing on it. Yes, this means that I would be trying to beat Johns time of 4.5 seconds to gain myself enough starts to get a £5 voucher

f you wanted to take this further and put it out there as a proper artistic-kids product I would suggest running two Apps simultaneously, an iPhone App which forces kids to look at the images, but instead of draw what they see, they could answer questions about things like what colours were used, what type of paint, what was in the picture, how old do they think it is etc. And then you could have an iPad/tablet App, which could be downloadable, or just used within the gallery itself for kids to act out the original idea.

Artefact 6

2011-05-11T15:16:00.004+02:00

For my final artefact I have decided to make a web package that will include my art/game app as well as information about the Usher Art Gallery, The collection (museum linked to Usher). I think this would be beneficial in a real life situation as all aspects are linked to form the Ushers online identity.

I have included a user interface for the ipad as it will link to the iphone and get rid of any UX issue that effects drawing on the iphone. All of the ideas that I have created in artefact 6 have been developed from the online focus group that I created to get feedback.

The Usher Art Gallery has tarted to create a new online identity that I wanted to carry on through my entire web package. The web page is designed for the user to spend longer gaining knowledge and sharing their art work with each other with the museums community.

You can view the original art work and compare it to the work created through the app to make it more personal.

The iPad design

The navigation is designed to keep within the theme of the website. It uses the same colours with simple, self explanatory heading to keep within the theme of the package.

This is the Usher interface I have designed for the option of 'Play Art Project'. (Art project isn't its final name). The background is designed to give the audience a sense of what the game is about.

Before they start the game thy have to randomly choose which material etc they have to use as part of the challenge and to get the students out of their artistic comfort zones.

Once again I wanted the background to further suggest what the game is about so I have done a gradual fade of the background to replicate what will happen in the game on different levels.

As Always the instructions are always helpful...

On the hard level there is a blank background therefore no guidance of how to recreate the image. The aim of the game is to recreate the art work in the quickest time possible in the materials, colour etc set the idea is that the students will gain a deeper interest of the art work if they recreate it in their own way.

At the Medium level you can only see a faded image.

The Easy level gives you the most guidance as you can see all of the image

The scoreboard will keep the level of competition up. The aim is to reach certain targets of amount of medals won in a certain time to win a voucher for the gallery.

2011-05-01T17:03:00.002+02:00

iplots seems like a good way to see if the navigation on a device will work, especially when it comes to designing for new devices. Although it seems to be useful I would only use it when it comes to designing new UI for iphone but I couldn't use it due to the complexity of my navigation as it is a gaming app.

Artefact 5

2011-05-01T15:01:00.005+02:00

My aim for Artefact 5 was to create a User Interface for one of their exhibitions. However after looking at their newly designed website, with added information about their growing education section I decided to create an app that can be used for any one of their exhibits. I think that this approach is the best way to go as the app could be adapted to any exhibit that the museum may want to advertise, especially in this time of need (funds).

This is their new website http://www.thecollectionlincoln.org/usher/?page_id=43. The main page that changed the direction for my app is the Saturday workshops that they provide for 8-13 year olds. The children get to use different mediums varying from collage to paint and learn about the art work within the museum. I have created an art app that is based on their workshops on a Saturday, giving them the chance to get more involved with the gallery/ recreating artwork in both traditional and digital methods.

I have focused on how the navigation will work within the art/game app as it is a key part to how the audience will interact with the app.

The first interface is based on the art app artstart that was designed by a teacher as a way of inspiring children with different projects.

My version is basically the same concept but leads on to an art gaming challenge. I have slightly changed the navigation so that the audience can change the sub sections individually. I think changing them individually is a good idea as it will get the students to think about one medium and how it can be used in different ways to challenge their comfort zones.

Unlike art start the version I have created is designed to get the children to recreate the art work in different mediums so that they students can get more involved with the artwork therefore forming a connection with it and the museum. By recreating it they'll want to find out more about it.

Once the colour, medium and artwork has been chosen it will be summarized on a UI with the painting in full that they will then recreate on the next screen.
They have a set time to recreate the artwork. If they complete it in the set amount of time they win an art tool. All art tools won can be used at the end of the game (once they've completed all levels) to create their own artwork that has been inspired by the previous stages of the game.
The UI sums up what art tools they've won. If they choose to they can go onto the information section to learn more about the art work or move on to create they've own piece of art on a blank UI.

Once the levels have been completed the children will have the option to look at the knowledge section or...

Create their own artwork using the tools they've won from the game.

User Interface Design (revisited)

2011-04-29T13:16:00.003+02:00

I have designed 3 UI's for the iphone. They are all based on a question/answer game using different navigation to see how I can get student of a different ages to engage with UI for learning that they don't see as a task.

This UI uses a simple touch option to select the answer. Simple, easy to use.

This is based on the same question/answer game however I have used a different navigation that gets the audience to interact with the interface a bit more. This is a typical technique used by apple.
I have added a new element into this interface to engage the audience in a simple game- guess the answer to the question before the water level goes down. The quicker the audience does this the more life they keep.

I think that the challenge now is to make sure that the game is suitable for the Usher art gallery.

Art App Development of ideas

2011-04-29T12:29:00.003+02:00

I have tried my previous idea with an iphone interface. I am having slight problems with the adjusting to the size of the screen from designing for web, in terms of navigation. I have to be very careful where the navigation is positioned in order not to clutter up the page and ruin the UI as the audience won't be able to see the full UI to see what the game looks like.

Story Boarding for Art Museum App

2011-04-28T14:12:00.004+02:00

The idea of this art/game app is to get children more involved with the art work in museums. Through gaming they learn about the pieces of art work through acceding through the levels to win art tools as prizes before they run out of life. The game is quite simple so will attract most ages as they won't see if as a task they have to do.

They gain more points/tools by guessing the answer to the question before the water level is at its lowest point. I still intend to design this based on the Lincolnshire Usher art gallery exhibit.

At the final stage the 'prize' is to create a drawing with the tools that have been won. My aim to to inspire children through this art app to use techniques and expand their ideas through absorbing ideas from masters of the discipline that they have gained knowledge about by playing the game.

App Map

2011-04-28T13:13:00.001+02:00

This is a map of how my app will be navigated, what functions it will have and how people will engage with it between each interface....Now for the game plan and design.

Example pic

2011-04-27T20:16:00.002+02:00

This is one of the photos that we are using in the multimedia catalogue for 2011. (sorry Sam your voted as the 'example'). It'd be great if everyone could get the raw file version and the jpg version. Cheers!

UI IOS Navigation

2011-04-26T17:17:00.003+02:00

The iphone is very restrictive, it is very small, doesn't have a keyboards and few buttons so I have to be thoughtful when it comes to navigating such a small screen. It needs a navigation that doesn't clutter up the UI.

Navigation on an iPhone generally allows you to-

explore all of the level of the flow diagram and get to where you want to be easily
switch between main functionality systems without loosing your place within the app
edit and adjust info without loosing your place
display a list of info or choices

This is a tableview controller. It uses a tab list that is scrollable. Each option provides another list once tapped. This allows for a clean design that is easy to navigate. Easy to understand as items of a similar nature are generally listed in the same category/section.

This is a tab bar controller. It is designed to save space on the screen once you choose the option to hide the main screen. Each button has a menu that pops out individually that you can hide easily.
This is an example of flattened navigation hierarchy. It is usually used in information rich apps. It works by having a single type of main view with multiple option within each of them.
The 2 app navigational systems below aren't standard navigation systems but they focus around one interaction point. The first app uses a ticker wheel that is designed by weightbot. It has a mechanical spinning wheel for selecting items.
This navigation is used mainly for musicians but is a different version of the tab controller as it is placed in the middle of the screen instead.

User Interface Design Tips

2011-04-26T16:39:00.003+02:00

http://www.ambysoft.com/essays/userInterfaceDesign.html

User need to know how to work the UI that you designed for them so keep the UI consistant throughout the design.
Use a interface flow diagram.

E.g.

The flow diagrams used is to form the architecture of the app and how the user can move through the stages. It can also be used to form the behavior of the user. It gives me the chance as a designer to see if the system of the app will work. The main purpose of the UI flow diagram is to see if the UI is useable.

Design the navigation left to right, top-bottom as in western cultures this is the format that we read in. It will seems more natural.
Colour should be used appropriately. If you use it as a highlighter make sure that you use something else to highlight it as well as people might be colour blind. Also use it sparingly so as to not overwhelm people.
Use the contrast blue e.g blue on white is easy to read, red on blue isn't
Align the fields. Left justify so make all the fields line up in a straight line. MAke the other fields right aligned so that it is organised. Make it is visually appealing and efficient.

Constantine and Lockwood have a set of principles that guide UI design

The structure principle. Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.
The simplicity principle. Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.
The visibility principle. Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.
The feedback principle. Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
The tolerance principle. Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.
The reuse principle. Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

IOS UI Revisted

2011-04-25T20:53:00.002+02:00

http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/AppDesign/AppDesign.html%23//apple_ref/doc/uid/TP40006556-CH19-SW1

I have visited this website at the start of producing the artefacts. It is really helpful as it provides a lot of information about how to create an IOS app. I have gone through the basic structure of how to plan my app in order to see how my plans have developed a few artefacts on.

Potential features users might be interested in:

Creating artwork
earning points
Socialising through earning points (international/local scoreboards)
gaining art knowledge
throwing paint game
exploring different art games

What is most important to the users

They are artists
want to learn about art in a fun, game experience

3 characteristics that app buyers have

Love to experiment with art
gain knowledge of art
want to experience art in a new way

App definition statement (this is to be referred back to at any time to focus the app)

"An art knowledge tool for creative students that love the gaming experience"

The app should have classic characteristics of IOS apps.

IOS users are accustomed to the look and feel of IOS so the buttons have got to feel like they belong to that device.
Controls should look tappable
App structure should be easy and clear to navigate. IOS provides the navigation bar for drilling down through hierarchical content and tab bar for displaying different peer groups of content/functionality.

User feedback for IOS: should be subtle but clear (an animation for example).

The user expects to accomplish something in an app.

Design for touch- get familiar with UI elements and patterns of IOS. Examine menus, interaction initiated by hovering and links.

If the app is a game or provides an immersive story driven by experience people expect to enter a unique world filled with rich, beautiful graphics and innovative apps.

User Interface Design

2011-04-25T17:17:00.004+02:00

http://www.sourcebits.com/user-interface-design

I have been exploring the process of User Interface design (UI) and have come across a company that produces UI for a wide range of platforms (android, ipad, iphone, blackberry etc). The company Sourcebits are about creating beautiful, easy to understand UI design. They see the design as being very important because it is what will leave the user with a lasting opinion. They create apps for the web and mobile, making them very flexible.

Art whirled is one of their most successful art apps as it provided the audience with a simple, easy to use spinning canvas. It replicates how paint splatters in real life without the mess.

Screen shot of UI

Layout of UI (wire frames): each frame has a wire frame designed with functionality high on the list so it is easy to use

Inspiration for UI

Objects that the paintings created in the app can be transferred to.

What do art galleries need from apps?

2011-04-25T15:59:00.002+02:00

I think it is very important that an educational art app gives the user a taste of what the art gallery is like. I think the app should encapsulate what the art gallery has to offer through its graphics, information provided, layout and purpose of the art app.

I am looking into options of creating an art app for The Usher Art Gallery in Lincoln. It is a small art gallery, not unlike The Tate. It does have a large education section http://www.lincolnshire.gov.uk/visiting/museums/the-collection/new-investigate-art-programme-at-the-usher-gallery/ that aims to give students an experimental experience of the art gallery. I want to give the students an experience through the app that they won't get in any classroom to inspire them, spark their imagination.

The Usher Art Gallery also offers an educational program called 'Investigate', which is designed to engage students in 'hands on' activity. I want to replicate this in a user interface design.

The education department holds work shops that cover many areas such as:

For example the Time detective section goes through what detectives do to find out what the art work is about. I could recreate this in an art app that the students could feel like they are just playing a game. In fact they will be learning without knowing it.

The Game Theory Behind Apps

2011-04-23T09:54:00.002+02:00

Game Theory: The Basics (http://herselfsai.com/2007/03/game-theory.html)

Game theory is the study of how people make decisions and how people will react during these processes. According to the Nash Equilibrium many of peoples actions can be predicted as it is assumed that they will go for the rational choice. Rational choice is defined by 'the action chosen by a decision maker is at least as good as every other available action'. (Jon Von Neumann). To me this suggests that one action my be preferred over another because it is seen as being benifical to them (e.g. they gain more points by choosing option 'A' over 'B').

Nash Equilibrium is when a player can do no better than one another no matter what the other person decides to do.

iPhone Gaming (http://gametheoryonline.com/2011/02/16/app-store-video-games-disposable/), (http://www.appolicious.com/articles/1958-game-theory-q-a-with-joe-wee-of-chillingo)

iPhone gaming has created a new trend of 'the disposable game'. For instance people like angry birds for its experience without making a commitment to it through its cheap price. It has also changed the way that game are distributed, bringing gaming further into the distribution digitally. Also gaming through the iPhone adds a more socially focused element to gaming through global scoreboards that keep people coming back for more to top the score boards. Apple have landed on a money making scheme through peoples need for social integration. gaming apps fill the market for those of us that will only go on social networking sites before feeling a bit 'stalkerish'. Gaming apps are a perfect opportunity to fill your time and still interact with other on a different level.

The Usher Art Gallery

2011-04-21T13:39:00.007+02:00

The direction of my research project has gradually become more focused towards User interfaces. After experimenting with a few art/game app ideas that aren't based on particular exhibits I thought it'd be a good idea to base one on a current art exhibit. I have chosen the Usher Art Gallery in Lincolnshire as in is a small gallery with a growing educational sector. Although the educational development officer was interested, they want to see the product after I have completed the research project.

The pieces of artwork below are from different exhibits within The Usher Art Gallery. I choose these as I think that they represent the art gallery and I want to create a User Interface that encapsulates the atmosphere of the gallery.

Validation Process

2011-04-13T14:17:00.008+02:00

I have validated all of the main pages of the website. It document type is XHTML so it is a bit stricter than standard HTML.

The errors that arose are below.

One of them was that that some browsers don't support the cursor hand but only supports pointer. This just refers to the type of icon used to show that it is a clickable image.
Next error= Z index

The Z index signifies the stack order of an element. This means that the Z index only works when the positions of elements are set to fixed, relative or absolute.
This is one of the problems caused by the tags in the ditto call, connected with the Hpfeatured and HpfeaturedTPL

This means that script language is wrong it should be script type instead

This error is referring to the border "0" being referenced constantly so should be set in the CSS as a div class to create cleaner code.

Result- Homepage validated!

Validating the 'About Us' page

Extra div in the foot section

To have HTML5 or not to have

2011-04-11T22:22:00.005+02:00

My original plan was to explore HTML5 intensively throughout the duration of the client project but I had to adapt to the clients requirements. The most important element that changed my mind was that they needed to be able to constantly update their website so I had to learn a content management system. This would allow the client to be more flexible with the content and be able to update the website whenever needed. This will keep more people interested in the website for longer and ensure repeat visitors as they will come back for updates on events etc.

One of the main issues of HTML5 is that I would've had to make two websites as HTML5 isn't compatible with older browsers. Originally I didn't realise how long learning the content management system would take so thought I could still complete both learning a new content management system (Modx) and do HTML5. I have finished slightly early so I am exploring the basics of HTML5 and its potential.

http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/ The first thing that I have noticed is that HTML5 is structured differently with tags such as

All of these sections, particularly

Another element that I have been recommended to explore my a fellow website designer is a HTML5 boilerplate.http://html5boilerplate.com/

The Footer

2011-04-10T20:16:00.007+02:00

Although this section isn't seen as the most important part of any website it is a detail that I think can make or break a website. It is a standard area of a website that people expect to be there and hold additional details. In the case of charities they are usually social widgets or some type, charity details, address and contact details.

My original problem with the footer is that it doesn't seem to go with the design of the rest of the page. It seems separated by the line created by the div box. The client wants the footer to include the charity details-contact, legal details (charity number etc). Also through talking to ibrow media, the website designer has recommended that putting a second navigation in the footer is good practice as it means people don't have to scroll to find where they are therefore making it easily to navigate.

When you wish upon a star have requested that their Twitter account and Facebook account be added to the footer to make the charity have a stronger online presence. This will give the target audience more options to keep updated with what the charity does.

Original Mock-up=small footer can't fit all of the charity information in.

Footer 2= bigger to fit in all of the information in, green to integrate it into the colour scheme of the rest of the website. Facebook icon needs the CSS altering to move it into the middle.

Final Footer

I have used the hand drawn line from the hills illustration to integrate the footer with the main website. Centralized the widgets to give the footer some symmetry. Changed the colour of the footer from green to a mid blue to give the website some balance with the colour scheme and so it goes with the sky and charity colours. Overall I am very happy with the footer design I think that it brings the website together. It makes a simple block of information interesting to look for a wide range of people.

To create a footer with an uneven line presented me with a few problems so I had to create an extra div to provide me with the space to add padding so that the green line would overlap the faded white background instead of being covered by it.

Within Modx I created a div id called widgets and set the width and height to 50 along with setting the image to source to the hand drawn facebook logo. I made sure the border was 0 aswell.

Sponsorship Page

2011-04-06T22:35:00.005+02:00

The sponsorship page has always been a bit of a task for me as it is a lot of information and logos to display on one page. The challenge is how to get people interested in a series of logos that may not necessarily interest them. Also it is important that I take into account the companies that take priority as they have contributed substantial amounts of money as well as the smaller companies/individuals. So I have decided to create a image that will contain the logos and constantly be changing so that each sponsor will have equal amounts of time at the top. This will be at the top of a series of 3 logos that will change, at random each time the page is refreshed that way no company is seen to be preferred.

Also by formatting it this way it means that the page won't 'grow' too big with each logo that is added therefore making the audience scroll too far and get bored.

Below is a basic diagram of how the page is structured. I have created it using the same code as the news ticker on the homepage, except in Modx I changed it to the marquee settings so it flickers in and out rather than scrolling up and down.

Creating the sponsorship pages in Modx

I had to create an individual page for each logo/sponsorship so that the audience can interact (if they wish) with each sponsor equally and find out more information about them. This ensures that each sponsor gets equal coverage. Also creating each page helps to connect the logos with the fading in and out logo.

To ensure that all of the logos are presented well and load quickly I saved them for web to a 72 res. I saved them all in a supporters folder so that the client can choose which logos are presented from a folder.

I made sure the page is published in Modx so that it can be viewed as part of the live website.

Click icon to browse folder of uploaded images that I had altered in photoshop.

Take away the image size so the image doesn't pixilate. If i kept the dimensions in the logo would automatically try to format itself to those dimensions.

The Events Page Carried On

2011-03-29T22:56:00.002+02:00

In some ways the events section is one of the most important pages of the website, if not the most important as it is the section that will inform the audience of that is going on within the charity. It gives them the key information and quickly if they want to get involved. I have done this through the interactive map so that they know where it is and don't have to deal with a lot of information. It gets the audience involved in the website.

My next aim was to make the individual events stand out in a similar way to the information. I did this by redesigning the calender icon in photoshop so that the text stands out. I altered the CSS in dreamweaver to make the a block space for the image with a margin to separate the text.

See the .supporters for the CSS I added to it.
However the text wasn't clear enough so I made the red section of the calender bigger so the text was clear.
Code for calender image above
Here come the Modx bit. I created a template variable called {{list-events-tpl}} it sets teh date, tells the links to look for [~+id+~}, which means look for the div id with the styles and pick up the date [+date+]
Final result of icons highlighting the events

Attracting and keeping the audiences attention of the events page

2011-03-29T22:36:00.005+02:00

My goal for the Events page was to create a format that would make it easy for the audience to know exactly when, where, who to contact and what website to visit quickly. So I have used icons along with a bold title to make the information eye catching. This means the audience doesn't have to spend ages searching for information or get bored of looking for it.

To add in the icons I had to create a div id for each, changing the name of the image, adding a class to position the icon and I referred it back to [*Eventphone*],[*Eventemail*]etc changing it for each icon so that it picks up the template variable that will style it in Modx. The * means that the template variable will refer to the page that I am now on.

The code above create the icons below
That I then styled into all of the defining icons. At first it was adding the email icon in the wrong place so I had to take out

Final result of specified event page

Adding Up-dateable Content in Modx

2011-03-27T21:53:00.002+02:00

I have constantly been in contact with the client about what content she wants in the website. She has provided me with a word document, containing all the information, photos etc that she wants included in the website. From there it is my job to ensure that I provide a easy to use, flowing way that she can update the content in the future. It also has to be in a way that fits the style of the website.

Again I have followed the structure of the previous pages of adding content (within Modx). The client adds the content into title, long title, intro text and then the main content area. Modx styles it according to which area it is put into e.g. the title and intro text will be in a bold, dark blue text and the main content will be in a normal, black text.

I have learnt that it is important to but the text into the document with the insert icon within the Modx interface. If I just copied and pasted it into the general text area in Modx it tends to add code into it from word. However by doing this it doesn't completely get rid of unwanted code it has added breaks instead of paragraphs

at time which I have had to go through and alter in the 'edit HTML' section.
Another really good thing about Modx is that you can alter the content/layout of the website in the front end. I have experimented adding pictures through the front end (only work in the browser you have logged into Modx with).

First you go to the quick edit section, manage picture and choose the files that you want to upload then press the upload button. It then accesses the gallery code that I have created to format the photos.
Final look of the photos.
To create the gallery I have 'nicked' the code from the images that I have on the homepage (3 pictures that can be up date able) however again I have altered the code to adjust the size and position of the photos. As you can see from the screen shot of the code below I have changed the height from 500 to 250 and changed where it links to

The Donate Button

2011-03-27T21:42:00.004+02:00

The donate button is a big part of how When You Wish Upon A Star will gain funds. It is an eye catching illustrated graphic that I hand drew and altered in photoshop (using my graphics tablet).

After sizing it in photoshop and creating the space for it (going by the chosen mock-up) within the website using CSS I created a div in Modx. This is the basic code that that any template variables or ditto calls will relate back to. Because it is just a click able image no ditto calls are needed just a link to the donate now page that will give the audience plenty of simple options to donate. By having two options to donate (a button image or text within the navigation it will attract more people). It adds extra functionality and user ability by having two options as different people may respond better to images or text.

After creating the div id in modx I copied the source code back into dreamweaver so that I could work with the CSS.

The supporters page: Modx style

2011-03-27T13:33:00.002+02:00

My next task was to set up the 'Our Supporters' page so that the client can easily in put new content. This is one of the pages that needs to be constantly up date able.

This is the main template that I created that will be refereed to in the main document so that I don't have to duplicate code. It will also refer back to this code.

For the template to work I had to use a ditto call. A ditto call is a templating command that lists data from documents to create content in many different formats. Through using a ditto call I have been able to specify what data/layout that the data is presented in.

In teh code below I have changed it so that the content is presented in the order that it is edited on &sortBy`editedon`. Also I have changed &tpl=`testimTpl` to refer to the supporters page template &tpl=`testimTpl` to &tpl=`supporterTpl`. This will get all the correct data that I have specified in the supporters page template.

I started by creating a new template called supportersTpl. One of my aims throughout teh website is to keep the text of the website in a simpler format so I have always included text in the Long title, Description (so that the client gets extra guidance of what to write in that section), Documents alias (helps to locate it in the left hand side bar), Summary (intro text)-When You Wish Upon A Star can enter text in here to keep up with the format of the other pages, Menu index-places it within the navigation in a suitable place, Uses template- MainTemplate refers to the styling of the other pages that are under that template so that I don't have to keep duplicating code.

The only other alteration I had to make to this template to make it fully functional was to make it refer to the right page within the ditto call. I changed what parent page that the ditto call refers to on the left hand side e.g. &parents=`206`. This just tell that template to go to the main supporters page that happens to be referenced as 206. At first it didn't work because I had typed in supportersTpl instead of the proper template name that is supporterTpl. This just goes to show that adding one letter can through the code off course. As I have always known you have to be VERY precise in the code used.

Whilst creating these templates I have realised how much using a content management system benefits the user and myself as a website designer as the content can be altered through one ditto call/chunk/template instead of having to keep altering everything in dreamweaver that within a second can change the whole website. Most of all for this project it has helped me learn about what system is used in the industry and how this benefit the client. I am glad that I have learnt more about content management systems as I feel it has made my work more professional. As I have had to learn so much about content management systems in such a sort amount of time I have had to reconsider what my priorities are to learn. HTML 5 and CSS3 have taken a back seat in terms of learning new skills but intend to experiment with them a bit but not include them in the website as the client needs the content management system to be working and look at its best before I delve into that new technology.

The search box

2011-03-27T13:09:00.005+02:00

For the search bar I altered some ajax code that I put into a chunk labeled {{search}}. &addjscript='0' means that no I don't want javascript to be applied to this section and showResults=`0` means that no I don't want the results to be shown. 0=yes 1=no within the code.

The only problem is that the search bar appeared as below so I had to apply some CSS to style how I wanted it to look.

This is the CSS that I used to style the search box.

The most important elements out of this section is the image that provides the background for the search bar. Also I made the font height 100%, which applies to the line height being used to its maximum.

Overflow set to hidden to prevent overlapping of text typed into the box overlapping the search bar. overflow:hidden;

This part is used to style the label 'search' so that everyone knows what it is.

This is to style the text that goes into the search bar.

Adjusting/creating Modx elements

2011-03-27T12:14:00.005+02:00

Throughout the screen shots below I was creating details that are going to be displayed on the right hand side of the page to give the audience specific details of when,where, cost, contact details and the venue of an event so that it is easy to find and in a structured format.

1) First of all I had to create a chunk. A chunks purpose is to refer to code so you don't have to duplicate code. Below I had to alter which part the code is referring to within the chunk e.g. [*Eventcost*]

[*Eventvenue*]

[*Eventemail*]

The * means that it will refer the code to the page that you are now on.

2) That print the text on the page but I still had to alter the CSS to change the colour of the code, which was easy to do.
3) I changed the CSS in dreamweaver
4) And uploaded the CSS style sheet (this is the general method of uploading the CSS I go through each time that a style change is made and the back end is dealt with in Modx).

5) Final result of bold, dark blue text that defines the major details of each events. The client can go into Modx and adjust the details.

Although this was a simple task compared to other tasks I have done in Modx I think that is an important component because it is forming a structure for each page that the audience will find simple to use as they will immediately get used to the structure. This will make the website easy to use because of the flowing nature of the site. Where ever you are on the site you will be able to navigate to where you want by the main navigation, the footer navigation, the search bar and on each page on the right is has elements that relate to the topic you are on so the information you need is easy to find.

Creating an interactive map through Modx

2011-03-23T22:42:00.014+01:00

The client has requested that I created a map of England that highlights their main offices through the country and what events are being held in each area. I have drawn a map in photoshop (using my graphics tablet). The events need to be assigned to each area so you can click on the area and it will take you to the events page.

There have been a few dilemmas that I have had to solve through this request:

What if there is an event that is held more than one of the regions?
What if the event is in an area that isn't highlighted as a main area that events are held? (see below for how I have dealt with these issues).

1) I created a template variable. A template variable allows you to bring in a template where ever you like throughout the website so you don't have to keep individually code the elements.

2) I had to tick the option to publish this page as I duplicated the page from the template that I previously created. I gave it a different name (within the code in modx). Modx works like a database system in the respect that it allows you to set options of the template variables to change the appearance. it then adds javascript code in to dreamweaver to set the design.

3) So far I have got the content to layout simple text that is calling the information that is needed to format the events. However I have run into my first problem-the time isn't set put properly and it still includes events that have already passed. My client needs it to only have present and up coming events.

4) This is a ditto call. A ditto calls purpose to command the template. It can also list data from other documents and create outputs in many formats. You can also specify what data goes in and how it is laid out. Within this ditto call I had to change what are it is referring to (that I have already labelled in dreamweaver).

5) In dreamweaver I drew in links to define areas of the country that will act as a button to connect it to its event page. I went to properties-hot spots-choose the 'angled' tool-drew round the are that needed to be defined and gave it a region name.

The client asked if I could specifically created links on the map for Scotland, North East. North West and the Midlands as they all have offices that need to be able to send their content to the main office where it will be up dated (in Modx) by my client. I also created links on other areas of teh country in case there are events that are organised by a certain office but are out of their area. I thought that this would give them flexibility in the future in case events are hosted in different areas that they don't have to account for now.
6) I had to set more templates variables for the fields needed in events, such as cost, place, time, venue, email and phone number of the organiser. I also had to set what order that they would be in so with each field it goes up. They are labelled individually from 55-60 so they will be set in a different place in the code and can be reference through their number.

7) I set a title and a 'long title' as the field that they will type into to describe the events. The long title field has a shorter word limit so I thought it would be a good, quick way to limit their word count and keep it in a format that the audience can follow. It will make it neat and tidy.
8) I set what template it will be linked to. In this case the Main template. I have created a Homeage template and a main template as the home pages design differs from the rest of the website due to the news ticker and donate button. I also set the place the it will be in the navigation (1-it is the first child page that goes off the main events page with the map).

A parent page is the main pages labelled in the navigation and a child page is any page that goes off that navigation.

9) In this bit of code I had to direct it to the right image file and the right are. I also had to change the bit of code [~193~] to direct it to the right area (see child pages on the left hand side).

Through these steps (with the guidance of Chris at ibrow media and his helpful work experience) I have created the map below that link to the events page once the area is clicked on.

Events page (still needs to be styled) Here is the address (but only for a short period) http://s109231681.websitehome.co.uk/events1.html

On the left hand side I have create a box that people can click on to see the rest of the events in different areas so that they don't have to keep navigating back to the map. It will save the audience time and keep them interested as the events will always be updated.

Artefact four: User Interfaces

2011-03-23T21:05:00.005+01:00

As part of my research project I have decided to explore different aspects of user interface design and how it affects peoples interpretations of how good the game will be. Judging from my research in to artifact 3 that asked people if colour and bold graphics affects their decision to play the game I decided to experiment with different types of graphics.

This user interface is aimed at 8-13year old as it uses simple, bright primary colours that suggest a tame, easy to play game. Also the text is simple to read and the graphics tell the target audience what the game is about.

I have carried this theme into the first UI (user interface) to provide a sense of consistency. Personally, I think this colour scheme gets the younger audience to trust the purpose of the game as the younger audience are more unlikely to go through the instructions.

For the second UI I have chosen to experiment with the background of the interface to see how this would affect the users choice to play the game. Although this is a simple change I think it will attract an older age range of up to 19 as the colours give it a more sophisticated, cleaner look.

I have chosen to put the silhouettes in the background to draw the eye to the slingshot and constantly remind the gamer of what the games purpose is. The black button and 'tools won' bar instantly stand out to guide the user. It does it through the stark contrast that makes the main elements stand out.

Art/game app story boarding

2011-03-21T14:59:00.005+01:00

I have designed the story board for 2 prototypes for an art/game app designed for museums. I think that most museums are missing apps that work on more levels than just giving the students a digital tour and ploughing through information. I think for a museum app to be successful it needs to engage the user in a task so that they are subconsciously learning through about art through the game.

The first stage of this app is to give the user options so they can participate in the game to learn or got through the content in order to learn. I am going to design the prototype to 320w by 480 (iphone standards) to begin with as it is the most popular phone on the market and has been used the most in museums to guide people.

The idea of my first art/game app is to find the artist through a shooting game mixed in with the concept of catch phrase.

Aim of the game: Answer the questions as fast as possible so you can shoot the canvas to find out who the artist is.

The questions: Get harder with each level and are all related to the art/artist so you get clues about who they are (like catch phrase). With each correctly answered question you win a art tool that you can propel at the canvas to reveal who the artist is. Each art tool has different qualities so will hit the canvas differently.

I have based the shooting aspect of this game on angry birds as it is what the audience in the current market are attracted to.

Art detective

Aim: The idea is to solve the mystery to save the art being lost forever. The canvas is damaged and you have to answer questions to restore it and choose the missing objects. The idea is that the audience gets to know the aspects of an art piece.

More Museum Art/Game apps...

2011-03-20T14:18:00.008+01:00

http://itunes.apple.com/us/app/china-heart/id415232061?mt=8

I like this idea as a starting point for my app. It draws you into the museum app through a story. My thought is what else are art museums about apart from telling the story of where the painting originated from, who the artist is and what their story is. Although I didn't like using the app as I found the story disappointing as it just led onto some static information I think i could create an app that leads on to a game of piecing a story together. Through the game you would gain artist tools to piece together the story.

I have also looked into experimental art apps as they link to the area I am exploring, however because I am introducing point scoring to keep the user engages and giving them an goal alterior it is classed as game. http://todayinart.com/2010/03/18/experimental-art-apps-on-the-iphone/

I like the idea of Record maker. It let you create images using one finger. It has a humour factor with the images created.

I also like this app because it lets you manipulate work in the style of Joshua Davis, a digital and vector artist. I think it gives you an insight into how the artist works. This is what I want my app to do.

http://kids.tate.org.uk/games/art-detective/

Tate Britain has created a kids section that includes a game section. I have looked at the detective game that gets children actively thinking about why the artwork has been created, by who and why.

I think this is a successful art/game app because it

uses bright graphics
multiple tools-zooming in etc
gives the children a challenge and a goal

Colour Colour: This web based game app teaches children about colour theory andd how it has developed since teh 50's. It lets you paint famous art works in the process.

Art Lab: The aim of the game is to restore an art piece of your choice. Along the way it describes for the process behind art restoration in real life.

Game possibility= a game that mimics a real life art process so that the children can learn and engage in a fun, educational game.

http://kids.tate.org.uk/games/discovering-turner/

This game reminds me of my angry birds art app in terms of how it propels objects onto a canvas. You choose objects that make up a painting by Turner. Although it works I think it needs some more to keep the user engaged, something to aim for. Maybe a question and answer game after you've chosen the elements to be propelled onto the canvas.

http://www.ismashphone.com/2009/08/14-best-iphone-apps-for-graphic-artists-and-web-designers.html

This link (going slightly astray from my game app) has some useful links for website/ graphic designers. It has apps that send you jobs, portfolio apps, colour palette apps and even project management apps.

Creating a News Ticker Through Modx

2011-03-20T11:54:00.003+01:00

To get to grips with Modz and how it works in a website design agency I have had a series of meetings with Chris Fickling (one of the partners at ibrow media). He is the website design/developer of the previous website. he has been showing me the ropes of how to use Modx so that the client can use the update able content to its ultimate level.

To create a news ticker I had to set the layout of it in dreamweaver first so that I could assign Template Variables to it (tv's).

In this screen shot I had to add a Template variable to a template so that the document could access it and implement it on the web page. I called this Template variable 'newsoptions' so that the client will know what it is and be able to change the settings for the news that she wants to be shown.

This screen shot shows me defining the options that the client will be able to choose from (yes or no). The code for that is yes==yes||no==no

|| is telling the code to show the next radio option on the next line. A radio option just means that a few options are chosen and only one can be chosen.

The next step was to set the options for what images will be set up in the news ticker and where the images will be brought from.

The next step was to set the chunks, which is raw HMTL code that tells that template variables what to do and what div to access whilst carrying out its function.

Augmented reality with art/museum apps

2011-03-18T21:49:00.003+01:00

http://artisticallyconnected.wordpress.com/2010/12/02/augmented-reality-smart-phone-apps-revolutionize-museum-audio-tours/

“We want to make an A.R. project with strong emphasis on user-generated content,” Mr. Wils said, referring to augmented reality. He also emphasized the importance of getting artists involved in the process. “We want to see that artists are using the technology to come up with new user experiences,” he said.

“I myself would call it an interactive participatory work of art, but it’s up for interpretation,” said Amy Heibel, the museum’s director of Web and digital media, referring to the application that lets people rearrange 38 elements of a 17th-century Dutch still life. This is referring to the museum app called 'In still life'. In my opinion it gets people involved in the work, getting them actively involved in the museums content and the work artists are producing. For example John Baldessari is an artists work who is becoming brought into the world of app and therefore exploring the art works boundaries. His work was initially about bringing text and photography into his painting but this app allows you to merge real life images into still life juxtapositions that are personal to you but done in the style of that artist.

http://www.in-still-life.com/index.php

This has given me the idea to develop my app design to incorporate an aspect allowing people to interact and recreate the artwork so that they can learn about it on a new level.

Background magic

2011-03-15T17:54:00.003+01:00

The background of wish upon a star's website is going to be a vital part of the websites success. It is going to tell the story of the charity and help to persuade people to donate. Below are the stages I have gone through to put the composition (through photoshop and CSS) together so that the background compliments the content.

The illustration is too big...

Characters aren't in the right position...

Now to layer the faded white background on top through CSS. I've got to make sure that it makes the content clear whilst blending the background and content together...

More art/game apps (in museums)

2011-03-14T17:16:00.006+01:00

I aim to explore art/game apps within the museum field to see what the competition is and how I can create a game that children will enjoy whilst teaching them about art. Below are a range of games that I think express the different areas of art/game apps. Both of the art/game apps below are web based apps that aim to teach children art techniques or information about artists.

http://www.metmuseum.org/explore/van_gogh/menu.html

This is one of 4 games that allows you to experiment with different sketching techniques as Van Gogh did.

http://www.getty.edu/gettygames/

Getty games has a range of slide shows, puzzles, detective games and spot the difference to attract children to art information. This is is the metropolitan museum.

http://apps.su/program/11146/art-museum-matchem-up-history-geography.html

Simple matching pictures game to the title game.

ArtStart: Was developed by an art teacher in Seattle. It is an ideas generator that gives students a tool, project and colour to work in. It has proven very successful to simulate idea with students. A simple ideas ticker taken to the next level.

http://itunes.apple.com/us/app/animalia/id388859403?mt=8

Animalia is a story telling game for the young artist. You have to find over a 100 items scattered throughout the artwork. A hide a seek game that can get the audience to explore the depths of the artwork. So far I like this concept the most as a story can make the artwork more intriguing rather than just straight up information.

What do think about whilst creating an art/game app for a museum:

In reality (if this wasn't for a uni based project) cost of development would be a factor
How much content to include
What the 'forward' thinking theme would be to attract/inform more visitors
The content of the app should enhance the experience of looking at it in person
Should raise the museums appeal to attract tech savvy people.

What have iphone apps been used for in the past?

Launch an app for a special exhibition.
Create an app for selected works rather than focus on thousands of artworks throughout the whole museum. Offer detailed information on the 'best' of the current exhibition. This is usually designed for the pieces that people are naturally attracted to any way, giving them a deeper insight (possibly before they even go to the museum).
A app that covers an extensive range of all the art work throughout the museum.
For donations/sponsorship

Final Client Design Choices

2011-03-14T15:52:00.003+01:00

The client has decided she wants the most hand drawn style that is closet to the mock-up I originally showed her. Her final choices are below:

Likes the design but doesn't want the extra people (on the far right side). She doesn't think they are required to keep the page 'interesting' in larger browsers.
She likes this design as it is closet to the original concept.

Art/game apps in museums

2011-03-14T14:36:00.005+01:00

http://www.suite101.com/content/teaching-and-learning-digital-storytelling-a98595 This museum in Texas uses multimedia technology to tell historical stories. It uses a mixture of sounds, music, pictures etc as more traditional forms of story telling would through audio.

http://travelandcultureapps.com/2010/08/08/acoustiguide-smartour-asian-art-museum/ this art app is designed to take people through 6,000 years of Asian art history. The Acoustiguide smart tour has a well designed User Interface that navigates the content well. However I think that this is only a basis and need something to spark the users interest and get them involved in the app. It needs a story that makes the user interact with the UI. One of the key features to the apps accessibility and functionality success is that the app offers multiple choices of how to access the information therefore the user can choose which menu suits their needs/way of navigating.

http://www.nytimes.com/2010/10/02/arts/design/02apps.html: This article discusses the use of museum apps being purely for guidance and as a reference point to support the audiences museum tour. My thought is that don't children need something a bit more guiding/ attractive than a purely information based app. They need to feel like it isn't a task. They should feel like they are engaging in an entertaining game. Maybe a game that they can play before and after the visit to test their knowledge in an attractive way. It will also give the children additional reason to pay attention at a visit to a museum.

After downloading the MOMA art app I can see that although it is highly functional it doesn't engage the children in any way that would be different from a audio tour. Yes, it does supply the audience with extensive knowledge but I don't think any child would pay attention to it long enough to reap the benefits. If the information could be presented in a game format then the child could interact with the content and learn whilst participating. The would also have the option of learning it through a structured part of the app so that they can choose which option suits them best.

Gap In the market: There are 181 iphone art museam based apps vs only 31 in android...

Why: The iphone is available in 90 counties whilst teh android is available in just 32. There have been reports that there are bugs within the android system and it is hard to get apps to work on back-dated versions of android devices.

http://www.museums2go.com/2011/03/03/androids-museum-app-gap/

Modx: A content management system

2011-03-14T13:49:00.002+01:00

Throughout my client project I am going to be working with Modx to create an up-dateable website for Wish upon a star. They a lot of photos, information and events that constantly need up dating so that people know what they are currently doing. it will also attract new companies and individuals to contribute to the charity if they know what is presently going on.

I will be using evolution. The classic version of Modx as the newest version is currently being developed therefore has a lot of bugs in it.

"there comes a point where doing things without a CMS just doesn’t make sense. Imagine trying to do what we do onwww.foxycart.com without a CMS. We have a blog with comments, a site gallery, dozens of “static” pages, forms, changelog updates, and etc. Trying to do that without a solid CMS is a waste of time, energy, and money. We love MODX."

Brettt Florio, FOXY Cart

Interactive map illustration

2011-03-14T13:28:00.002+01:00

This map is created for the 'Events' page. The idea is to scroll of each area (in a red tone) and on the side a events calender will come up for each area. However there is one problem I have to account for the possibility that, for example some one from Scotland wants to find out about an event in London (which isn't on the map). It will be listed in all areas as it may be a popular event.

I hand drew this in photoshop CS5 with my graphics tablet so that it will fit in with the hand-drawn style of the rest of the website.

Illustrative backgrounds

2011-03-11T20:03:00.003+01:00

Today I have produced two slightly different backgrounds. Both of them are originally hand drawn but digitally altered in different ways.

This illustration is just my hand drawing but 'cleaned' up with the clone tool etc for a sharper appearance that will stand out in the browser. The centre is where the content will be but the client wants to be able to see some of the background through it so it unites the content with the background therefore taking away the 'boxy' appearance.

At the moment this is my preference as it seems more unique but I am going to play about with more techniques. Also I don't want to alter the illustration too much as the client wanted me to stick as closely as possible to the original drawings.

For the second illustration I have applied a filter (cutout) but I think it looks too manufactured and it doesn't look like my style.

Also I designed it in photoshop to incorporate different browser views. The audience with bigger browser wont get bored of looking at white space. As you can see from the diagram I have incorporated different illustrations at the points where a new browser size would fit to ensure that everyone enjoys the website and the design makes the best use out of the space.

Artefact three: evaluation

2011-03-09T22:05:00.000+01:00

Artefact three was about clarifying whether students respond to combined art/game applications. This idea was brought to my attention through the first two artefacts, as it was evident that students (between 16-18) see their mobiles and the applications within it as a fun, social activity. They want applications that they don’t have to think about too much, are easy to use and can enjoy with their friends.

For the User interface I designed an arty version of Angry birds to test how students respond to bold graphics, bright colours, challenges and prizes earned throughout the game. I discovered that the most vital aspect of a user interface in this context is the bright colours and bold graphics to visually engage the user. Personally, I think that this artefact has been successful because it reflects how important the user interface alone is to the success of an art/game application. It is the first thing that a person sees therefore it will be want grabs the audiences attention or makes them leave the application (especially if it is a free application as there is no money lost).

The bold graphics engage the audience in an eye-catching environment that is unrealistic so it gives people a sense of play. In my opinion art applications can be taken too seriously as people expect them to replicate real life art work but due to the playful nature of the graphics people don’t have these expectations so are willing to be more experimental with it and enjoy it for what it is. For art/game applications to be combined successful I think that the User interface has to lead people to the more serious notes of educational value that people can share through comparisons of scores. Also a way to way the application more realistic in the way that art work is shown is to make the tool be affected by what type of canvas it is being aimed at. The texture will affect both the art- work and the gaming component of the application.

Donate button designs

2011-03-09T19:05:00.005+01:00

I thought I'd give the client a simple image as an option just in case they want a more subtle approach to gaining donations.

A smiley face to symbolise what you would be doing by giving the charity a donation.

I designed this balloon to use wish upon a stars colours and to represent hope for the children and families through the use of the star. I also think it will unite the branding through its connection with the logo.

I don't like the colours of the balloon although I thought I'd try it out as it goes with the colour of Wish upon a star.

This is my favourite design so far as I think the colours make the design stand out. I intend to experiment with the text.
Lighter colour makes the text stand out more.

Artefact 3: The results

2011-03-09T17:02:00.005+01:00

Through testing/ redesigning the interface of angry birds combined with an art app I have discovered that simple, colourful graphics draw people into game apps however I think that the results point to me developing the concept so that the games can connect with it on a deeper level. This will allow them to form a deeper knowledge base of art through a fun activity. From the previous artefact it was evident that the students want art apps that don't feel like they are doing work, something they can connect over sociably.

This chart could point me in the direction of experimenting further with the user interface by exploring propelling weapon options.

Feedback-

Would you play this game based on the aim of the game? Why?

It's a challenge, to see if I could complete it.
Because of its simplicity and its longetivity, if made in a way angry birds is made
I'd be happy to try the game as the concept sounds interesting. Although I'd worry that it's only possible to draw parabolas of varying colours therefore making multiple levels would be a challenge (as they would all look like rainbows)
What happens when you get to Art School isn't explained, and at a guess it would just be the end of the game. Maybe if when you get to Art School you could unlock new art tools, levels or difficulties for the next time you play.
The challenge
Sounds potentially fun when understanding the objective.
Seems like a fun concept
as a gamer myself I enjoy really involved games where I feel apart of the game and become involved in its story line. this game would be more aimed at the casual gamer rather than the serious gamer stereotype.
because i want more colours and points, im a big kid
Not complex enough - theres not enough incentive to win.
because the aim is simple,its the doing it tht counts

Also the results from this chart suggest that bold graphics are a big part of gaming and for a successful application bold graphics are a vital part.

Navigation Inspiration

2011-03-09T11:32:00.003+01:00

After my meeting with Wish upon a Star yesterday to discuss the final touches to the rest of the website (now that the home page has been decided upon). Help for heroes was constantly referenced in terms as navigation. It is simple and clear yet there is a lot of content to get through, as there will be in Wish upon a stars website.

http://www.helpforheroes.org.uk/

The Navigation

I like the way that the navigation works and think it will suit the Wish upon a star's website because it will make the content flow easily. The audience will have that area as a constant reference point to find information quickly and easily.

Art angry birds interface

2011-03-07T21:42:00.003+01:00

I have created a user interface for an arty version of angry birds. The aim of the game is simple, you just have to shoot the right colour in the right place on the canvas to earn points. The more points you get the more art tools you gain. The challenge is to get the quickest time so that you can graduate from art school. Each tool that is fired from the canon has different properties so you'll never know how the texture will work with the canvas. As the game goes on, the compositions that you have to aim at on the canvas get more complicated. If you fail the level the game gets slightly educational and you have to answer a question related to the painting on the canvas in terms of formal elements (it will be well known).

Elements of the game:

The colour bar: you have to choose which colour as the menu moves.

The tools: as you go through the levels you gain rewards (the art tools)

The canvas: The composition you have to aim at. Get the right colours in the right place

The score board: compete against others and show off you high scores. Possibly compare the results of how the artwork has been changed.

The canon: Propel you art tool towards the canvas. It works through touch directing it.

Angry Birds: My Arty Version

2011-03-06T19:00:00.006+01:00

This is a magazine article from Web designer that goes through Angry birds success and the concept behind it. The article has helped me to grasp an understanding of how the game has developed and the simplicity behind the idea that has led to its success.

Angry birds started out as just some character designs that Jaakko Lisalo (one of the team that worked on it) created. It was a mixture of some of his favorite games of the time (including Patapon). The game was designed to be casual and accessible to everyone. Two elements that make the game successful is that it has a simple yet strong scoring system and it plays on physics based gameplay that was becoming popular at the time. Lisalo also says that the audience form a connection with the game through the strength in the character design.

So what have I learnt from Angry birds- That people are looking for casual, simple escapism so that they don't feel like they are doing any work, whereas with art apps they feel that they have to focus. Art apps are hard to create detail with which makes it frustrating and unenjoyable for the user.

Here is my concept for an arty version of Angry birds. Through creating this art app I am to create a casual gaming app that young art students will be attracted to and not realise that they are learning through completing each level.

Here is the introductory screen to give the gamer a goal/reason to get involved with the game.

The aim of the game is to hit the coloured art tools against the matching colours in the canvas so that the gamer can gain their art tools back. The art tools will be displayed in the top left hand corner.

Also after each level is completed it will show up in a tally to give the gamer a sense of achievement.

If the player fails the level they will be asked an art related question about the canvas to potentially get on to the next level.

I plan to do a mock-up of the user interface and compare it to a pure art app. This will gain me an understanding of how art students will respond to each app and what will develop the creation, display and teaching of traditional art practice.

Merging game and art

2011-03-06T15:50:00.001+01:00

After contemplating my last 2 artefacts I have come to the decision to create an art and game app combined. It was evident that students of the age 16-18 preferred using game apps over art apps as they saw game apps as more fun. Additionally, in my 2nd artefact the range of artists who tried the art apps weren't impressed with the quality of art work that could be achieved due to the un-precise nature of using your finger to draw on a heat sensitive touch screen.

A lot of the students at Ashfield school really like Angry birds so I am thinking about ways to combine the game with artistic factors that would contribute to their art education in a fun way. My idea is to swap the birds in the slingshot for art objects that you sling at a canvas that you have to aim the colours at the right place. This will possibly be timed and if u miss the colours you aim for you will be asked a question to gain you points and move you onto the next level.

Although this is moving away from my original area of focus I am still looking at how art work is being displayed and taught through new means.

Inspiring drawing apps

2011-03-06T13:17:00.004+01:00

http://artnectar.com/2011/01/online-app-drawing-excercises/

I have been researching art apps for inspiration as to what the art app market is missing. So far I have found a web based app called posemaniacs. It is based on life drawing classes and gives you a certain amount of time to draw the pose. It is designed to make you sketch with minimal lines in the smallest amount of time to recreate the human form.

My idea: I think that this idea could be improved on to develop students skills of drawing from memory. An app could be created that shows them an object that they have to draw, using their fingertips. This could improve on their drawing skills with their fingertips therefore improving the ipad etc as a drawing medium. As the levels go on the complexity of the object that they would have to draw would grow.

http://www.brighthub.com/mobile/iphone/articles/75195.aspx?image=87537

To begin with I thought the concept behind this app was a really good idea to train students in drawing with their fingertip. My thought was if they are creative then surely they've got the skills to draw something reasonably good? Well the precision of the tools is awful, the line doesn't follow your fingertip at all so how can this train students. You need a bit of control to be able to draw successfully. There is only 2 brushes that aren't the shape that a regular brush is. It gives you the choice of a square or a circle so you can't make any detailed marks.

On the other hand the functionality is good. It is easy to navigate. Also it times you, as well as marking your precision, which if the tools were of a good quality to use then would be a good way to develop students skills.

My idea: Keep the timing and marking system but with more options of tools and materials to draw on. Also a higher quality of tools that can create more detailed marks.

Adobe Air as a Android App building Platform

2011-03-05T20:36:00.007+01:00

Adobe air runs HTML, Javascript, Adobe flash software and AS3 without the constraints of a browser. This means more experimentation for the app designer. It supports android (what I want to design for), blackberry and IOS.

I found this helpful article in Web designer magazine that focuses on creating layouts for apps. I found it really useful as it goes through the code in detail of how to generate search capabilities, which may be helpful for art education based art apps. Within Adobe air you can create a 'project skeleton', where you can define basic for the mobile app layout. Adobe air also has a device simulator to test horizontal and vertical displays.

Sample pages

2011-03-04T23:11:00.004+01:00

Now that Tracy (my client) from Wish upon a star has chosen a final design for the home page I am now working on a few templates to follow for the rest of the pages. (See below).

Also it has been finalised what the section are going to be for the navigation. The three photo image titles for the Home page will be Latest Wishes, Fundraising and Lapland.

The drop down lists for each of these will be (but could change once we start to see the layout)

About Us
- The Team
- Press/Media
- How It All Began
- Contact Us

Wishes
- Latest Wishes (I would like this to lead to other wishes granted but we can chat about the best way)
- Lapland( I would like this to lead to the 4 flights, again we can discuss how)
- Centre Parcs
- Apply For A Wish

Events
- Events In Your Area – (Map to be Discussed)
- East Midlands/Head Office
- Northwest
- Lincolnshire/Yorkshire
- Scotland

Get Involved ( These have not been decided yet but here is an idea)
- Community Fundraising
o What on
o Organise an Event
o A-Z Community Fundraising
- Corporate Funraising
o How can you get involved
o Charity of the Year
o A-Z Corporate Fundraising

Donate Now
- Ways to Donate
- Gift Aid

IPad sketches

2011-03-04T21:57:00.002+01:00

Both of these videos intrigued me as to how the art apps are used as a medium. They are good footage to see how the painting in gradually developed. What caught my attention is the fact that Mik Godley prefers to use his finger tips than a stylus. Does this mean that we, as artists are being too critical of the ipad as a medium. Instead of comparing painting with your fingers on the ipad to the products that we produce through pen and paper shouldn't we be focusing on it as a new exciting medium. A medium that can develop the realms of art in it's own way.

Also by watching the interaction in the 'Batman' video it has got me thinking about the placement of the navigation for the user interface design of my app.

Combing Art and Game

2011-03-04T20:01:00.004+01:00

Wire frame 1: This is a simple art app that presents all of the elements to create art work with in the main canvas. Although there won't be as many formal elements to choose from this would be an easy to use app that is quick to use for ideas.

Wire frame 2: I have been studying what tools are included on art apps and none of them have a clear section for canvas types. I think that this is a very important aspect as it replicates what we do when we create physical artwork. One of our first thoughts as artists is what canvas we are going to use and what medium is going to be used on it. Inevitably this effects what the texture of the medium will turn out like. Art apps are lacking in this department, artists are looking for a product that is easy to use yet doesn't loose qualities that working in a physical medium would give you.

Throughout this wire frame I was focusing on how the formal elements options are presented.

Wire frame 3: This is a simple art app but I have focused on the menu as a scroll tool to the left and right so that the audience can interact with the tools easily rather than searching through a lot menus they have instant access to it on the user interface. The simplicity of this design would give artists a place to quickly sketch ideas and send them on quickly. I think that an older range of artists would be more attracted to this rather than art students (around 18yrs old).
Wire frame 4: This idea has taken a new turn away from a pure art app. Going back to my feedback from Ashfield School. I want to combine art and game as an app to attract young artists. I have based this layout on Angry Birds, as it was a very popular game amongst the students that they were easily addicted to. They said that they liked the simplicity of the aim of the game to aim the birds.

I think an art/game app could replicate this by introducing a canvas with a picture on that you have to recreate by slingshotting the paint. However before this the audience would have to choose the formal elements through the menu on the left hand side. I think that the students would keep more engaged with this than a pure art app. It would also introduce them to using the formal elements in a different way, in a form that they can connect to.

Additionally, I have created this art/game app in a horizontal format so that there is a bigger space to play about with in terms of the audience being able to control where the paint goes.

Professional coding

2011-03-02T13:12:00.004+01:00

Although HMTL mark-up is one of the basics of website design I have decided to go back to basics to an extend to make sure that my coding is industry standard. After an ex student came in to talk about placement opportunities it got me thinking about how potential employers are going to analyze every part of how I create and design websites and the coding has to be understood by multiple people within an agency. So here goes I'm starting to build my website for wish upon a star in dreamweaver. I am also going to experiment with aspects of HTML 5 and CSS3 to show potential employers that I am at the fore front of design.

Also this link established some of the naming conventions (most I already new) but alwauys good to check for that job!

What the client really wants and how to find out

2011-03-01T22:38:00.004+01:00

Recently I have been talking to Chris Fickling, of ibrow media. Whilst dealing with the client I have learnt a lot of new skills that have helped me to demonstrate the role and responsibilities that a multimedia practitioner should provide. For instance Chris recommended that every-time I have a new client, providing them with a questionnaire that covers the area that the clients needs changing/developing of the website. It will also be solid evidence of cost and a reference point of which to go back to if the client looses sight of what they want. I have re-designed the questionnaire so that the client can focus on areas that they may not have covered previously.

Basic information

Who is the key client of the business organisation?
Name
Title
Contact details

Who has the final say of the product?

When is the product needed by?

What may effect the schedule? (e.g. meetings, marketing, reports).

Budget?

Current website

What are the main features you need changing?

What areas are successful? Why?

What aspects of branding, feel of the website needs to be kept?

Reasons for redesign

What are the main reasons that you need the website redesigned for? e.g. outdated website, re-branding etc

What are the main purposes of the website redesign? donations, increased sales, advertisement

What do you want to be achieved in the long and short term of the website?

How will the new redesigned websites success be managed? Questionnaire, google analytics

How do you intend to achieve your business strategy both online and off line?

Audience

Who are you aiming for? Age, job, income, what do they use for the web for?

What is the main action the audience will engage with on your website?

What are the main reasons you stand out from the competition and people choose your website over others?

The impression

Use a few adjectives to describe how you wan the visitor to feel when they are on your website. e.g. friendly, business orientated, professional, cutting edge

How does your website/business stand out against the competition?

Example of URL that you admire

Content

Is there any part of the website that you want to transfer into the new one?

How do you want the functionality and navigation be altered?

Tech

Do you need a content management system to create update able content?

Do you need more defined programming, such as photo galleries, news updates, news letters etc?

All of these questions aim to get a solid idea of what the client NEEDS

The next stage...

2011-03-01T22:08:00.004+01:00

Since Wish upon a star have chosen a final design I am building the website and designing the template for the key pages. I am going to create two templates that the website is going to be based on and work with them in Modx (the content management system). So far I have done the wireframes below in Gliffy.

I have also been inspired by http://wisergirls.org/. The website has a beautiful yet simple logo that when you mouse over it, it lights up and birds fly. I think that this may be a good idea for the donation button. When people mouse over the text lights up and the hot air comes out of the balloon or maybe the little girl starts waving.

What to consider with UI design

2011-03-01T20:21:00.004+01:00

Android UI Design Tips

Through viewing this presentation it has got me thinking about what makes an app good? It is all about quick and simple functions. If detailed instructions are needed then the app is too complicated so quick actions are needed, such as being able to choose a brush, colour or texture to work with. I have got to think about:

How to make the action quick to summon
How is my app different?

My aim is still to experiment with merging art app design with game however for artefact three I intend to design a UI and compare it to the rest of the market to see if the audience respond well to it.

About Modx

2011-03-01T12:32:00.003+01:00

For my client project I am going to learn how to use Modx, an open source content management system. It is a php and MySQL database. It works by uploading HTML files in to the system that then allows you to create up-datable content with small tweaks.

Here are 3 examples of websites created in Modx. I have chosen them to look at their structure based on the layout of my website for Wish upon a Star and to see if my layout is achievable within Modx.

http://www.ywamthai.org/: I can play about with bold headers and placement of navigation.

http://true-word.org/: shows that the background can be altered to any degree as wish upon a stars will need to be.

http://www.oprone.com/oproneBeta/index.php: use of animated 'news ticker'. I really like how this website is built and the main focus is the news ticker as it will be on my home page. I like the subtle animation that flicks through the news. The timing of it is also good as it gives the audience enough time to look at the content without boring them.

Here is a video that explains the benefits of Modx and how it makes content easy to create and alter without any bounderies.

Finger painting developed

2011-02-27T13:04:00.002+01:00

I found this video from the constant posterous emails Shaun sends us but it could be a turning point in exploration of my research project. The stylus cap is everything in terms of functionality that artists I have interviewed are looking for. It mimics real life drawing through the attaching a cap to an every day pen. It allows concepts to be drawn out quickly and altered quickly. It can also be a key tool to a design agency as the concepts can be send on quickly for effective, instantaneous communication.

The design of the cap gives the user control for a more precise drawing than using your finger tip as it can be too chunky to create detail.

Google app inventor

2011-02-25T13:00:00.002+01:00

Google app inventor makes it easily accessible to create app for the android phone. So far I don't think it is possible to make an art app however it seems like a good tool to experiment with for the interface. It is highly based on functionality that leads the user through the stages of basic-component- defining properties.

What do the audience want from User Interfaces?

2011-02-24T16:17:00.002+01:00

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/AppDesign/AppDesign.html

The link above describes steps to creating a IOS app, of which I think can be transfered to android UI design as well. So far it has guided me in getting started with what the audience need/want from a UI. I have also been referring back to my previous artefacts for information that young artists need to create artwork through apps.

Tasks/ protential features that users might be interested in:

Creating line, tone, texture etc (formal elements)
Range of colours
Range of brushes
rubber
Different backgrounds that replicate different paper textures
Using layers
Importing photos as backgrounds
being able to sketch
simple interactions to create the artwork
create range of graphics
easy to find/use navigation

Who are the users?

Young artists in education between 18-21years

What features are they looking for?

Play game apps as they find them more enjoyable
Used to social networks
Used to traditional tools
Used to photoshop

Streamlined or thematic style?

Generally games have a thematic style and art apps are more streamlined so I think it would be more beneficial to have a streamlined interface because it won't distract the target audience from the purpose of the art app.

What do they want to accomplish? Serious or entertainment? Most art apps don't have an entertainment factor so the audience gets bored and frustrated quickly as they are trying to purely work with the functions of the app. I think young artists would benefit form an art app merged with game as they could learn different skills at each level therefore getting a sense of achievement.

Final Mock!!!

2011-02-23T14:43:00.004+01:00

This morning I had a meeting with Wish upon a star to get opinions about what mock-up they want as their final website and the image above was their final choice! Their was response was very good. They felt that it represents their charity as through the illustrations the audience automatically know what the website is about. The sky also stick with the colours of their branding (dark blue and white). The balloon was one of the main features that everyone loved as they felt that it represents the giving of wishes. However I am going to experiment with the text and colour of the balloon to see what stands out. At the moment everyone at the charity prefers the stripes to the red balloon, although it may be a bit difficult to read.

My plan of action to move the project along is to:

Produce a site map of pages we know about so far including 'parent' and 'child' pages and assess the design requirements of those pages. We don't have to design every page but we have to make provision for certain page designs such as the event map(s) (which we didn't talk about) and layout for 'standard' pages.
Produce HTML / CSS for home page and alternative page(s)
install modx and link it to the database, upload your HTML, CSS and design elements.

Feedback...

2011-02-20T13:16:00.004+01:00

On feedback from ibrow media (wish upon a stars current web developer) I have made a few alterations so that the website can be up-dateable easily by Wish upon a star.

Made the banner smaller so there more room for content
made the balloon smaller so more room for animation
added a plane with a banner so there's more space for navigation to advertise links when needed.
Only put one picture in the banner so that it doesn't have a 'wide screen' affect. Taken away the blue so it doesn't separate the information from the picture.

I intend to draw my own plane and banner to make it fit in with the rest of the design but for the moment I have placed this image in to see what the clients response is in order to save time.

Final Mock-up???

2011-02-18T12:39:00.002+01:00

After a meeting with both Wish upon a star and their current web developer I have come up with this final mock-up made from feedback from both of them. The balloon was an essential that wish upon a star wanted to keep, whilst Chris Fickling at ibrow media (Nottingham) suggested blending the background with the banner by creating some sort of 'sheet' with a news ticker that was tied between two trees.

The only other change I might make is to put the widgets amongst the trees to complete the animated balloon. However so far wish upon a star have liked the widget being at the bottom of the page.

Artefact Two Evaluation

2011-02-17T12:23:00.000+01:00

The aim of artefact two was to find out what applications on either the android or IOS system that artists are attracted to, to create artwork. I have chosen to observe a focus group of artists using drawing apps and completing a questionnaire to gain an understanding of what factors that they connect to whilst using the device in order to create artwork. As well as how they create the artwork I was focusing on each devices functionality and usability as components towards the application and devices successful.

A prominent factor throughout the course of the study was that artists choose the android phone first and that sketcher was the most popular app. This is was because the application was self explanatorily therefore the user assumed that it was easy to use. Also the artists that choose IOS applications first preferred the android art applications (just draw, sketcher) overall as they felt that they provided a wider range of tools. However I find this surprising that they find android tools easier to use due to their functionality systems, as they are both used to IOS.

Throughout artefact two it has become evident that artists are looking for tools that are quick and easy to use with out the ‘clearing up’ factor. Yet they want the detail of using traditional tools. Personally I think that the user interface and how the tools are presented are a major contributing factor to this because artists are initially drawn into the application because of its appearance and user interface. If tools weren’t clearly laid out they would disregard the application, moving onto the next one. Throughout both artefacts it is clear that people want the tool set to be less sensitive and the drawing board to be more sensitive to touch so that fine detail can be created.

Artefact two results

2011-02-16T15:59:00.003+01:00

Preference of device

The the pie charts above are only a small part of my second artefact so aren't what I'm judging the next move on in terms of my personal research project. They are just a good visual basis, for them to be more substantial evidence I would have had to have tested more people. Generally people who haven't used android or IOS before are more attracted to using android as a platform to create artwork but overall people find IOS easier to use because of its clear layout.

Focus group responses to art apps

2011-02-15T18:25:00.002+01:00

What I want to find out-

If the IOS/android apps can be used to created art work successfully by artists.
If android or IOS functions better as an art tool
How does using android or IOS affect the creation and display of artwork.
Which platform work better in terms of functionality and usability

The results-

Artist one-

IOS

Choose IOS and the app artist touch first as felt more comfortable with apple products and was attracted to the user interface of the app. She trusts apple as a brand and uses a MAC to create her artwork normally. Didn't like the style of the instructions at teh start of suing the app, put her off using it as just wanted to draw. Quit using that app and used JUST DRAW to create artwork as it has a simple interface and easy to navigate.

Android

Confused by the black background of the user interface, wanted something that replicates paper. Liked exploring the different brushes but doesn't think it compares to the traditional tools. Finds using fingers too chunky.

Artist two-

IOS

First choice was IOS app adobe ideas as he is used to abode creative suite so finds it a reliable choice. Doesn't find it a useful tool as finds it hard to use. Can't judge where the marker is so can't make accurate marks. Doesn't like the user interface as was expecting something to challenge teh adobe suite. UI easy to figure out but no diversity in the tool set (very basic). Took a while to work out zooming in, still didn't make it easy to create detail. Can't create exactly what you want.

Android

First time using android phone. Thought the app (Sketcher) was easier to use than IOS but found it hard to navigate as there wasn't a menu. The markings where too small to tell where he was marking them on the page. Not easy to control as it makes marks for you. The overall outcome is so undefined that the observer will add in detail with their imagination to construct the object.

Artist three

IOS

Brushes appeals for its easy to use, arty looking interface. Unclear what certain function were e.g spacing. IOS has more gadgets so she experimented with more affects. Colour was hard to find, she thought you could only create artwork in black and white. Also hard to control enlargement function.

Android

Liked the variety of brushes but couldn't find the rubber. Also found it easy to find the colour. She chose just draw for its simplicity of name. Also not used to touch screen technology so found it difficult to control the lines of the drawings. Found the app challenging to use so wanted to try again.

Artist four

IOS

Used just draw, again the artist chose it for its simplicity in name. Found the brushes hard to control as it was a very small line that was produced from his finger. Couldn't tell where the line was going to fall. Easier to use than android app.

Android

Choose android first using the app Andrawing pro. Found the interface childish and the sound effect when you touched the screen off putting. Also didn't feel like he was in control of the drawing because the app would change the colour for you with each new mark made. Couldn't find rubber to add/remove any detail.

Art created by art apps

2011-02-15T18:11:00.004+01:00

Selection of Images created using the android or IOS art apps.

(Android-Andrawing pro)
(Android-Just draw)
(IOS- Brushes)
(IOS- adobe ideas)

Artefact Two Footage

2011-02-13T23:42:00.016+01:00

Artefact Two: IOS vs Android

2011-02-11T14:21:00.002+01:00

For my second artefact I intend to test the most popular art apps on android and IOS to see how artists respond to the usability and functionality factors of each device. I am trying to find out out whether a group of young artists that have never used the apps before find it easy to use as a medium. Also I want to find out if using either android or IOS affects the display and creation of art work.

The Most popular Android drawing apps are: Doodledroid, Draw!, draw and share and paint joy. Most of the apps are advertised for the fact that they can be used on the go however paint joy is the only app that is advertised for its range of artistic tools (brushes, paint buckets etc).

The most popular IOS drawing apps are: Line art, sketchbook pro, art studio, artist touch, adobe ideas (popular with professional artists), paint-book.

Art apps vs game apps

2011-02-09T23:14:00.003+01:00

As a result of my 1st artefact I discovered that Alevel art students don't see apps, such as brushes as a platform to create artwork. They spoke about gaming apps more passionately, even though a lot of the students I spoke to are considering art as a career pathway. I want to explore combining art and game in apps to lure students into using art apps as a creative platform. I think that if art was introduced in a game format then students would find it more natural as in their every day lives the play games such as angry birds. So far I haven't seen many apps that combine both art and game.

I began my research at http://www.hongkiat.com/blog/25-most-addictive-free-iphone-games/ and have only found one app that combines art and game. Trace is an app that allows the player to draw their own pathways through a range of obstacles to reach your goal at the end of each level.

I have also found many games in this genre that are based on path creating (see http://appadvice.com/appguides/show/best-iphone-line-drawing-games). A variation of this idea would be to create a game that is based on path finding, however to get the points you would have to not only make a successful pathway but create a drawing.

Another app that explored game and art is Gartic. A drawing game that you you have to guess what the other player has drawn, based on a theme. Could be good to get the creative juices flowing?

Doodle jump is another popular gaming app that has a creative edge with its hand drawn character that you use to get through the levels. This has inspired me to maybe look into creating a game that allows you to draw you own character that can get you through a game? It would be something for everyone, addictive because you want to get through the levels quickly to earn the points and appealing to the more creative people because you can make the game your own through the characters. To develop this I though that certain shapes that make up the physics of the character would allow you to get through the game quicker therefore earn more points.

Spot the difference

2011-02-07T16:20:00.002+01:00

I have created these 3 mock-ups to experiment with the navigation and placement of the logo as I think they are both vital factors that could interfere with how the website works visually. I have aligned the logo with the header so it doesn't draw peoples attention away from the content and also made it slightly smaller.

Centre aligned- suggested by ibrow ltd (who designed/developed) their current website. Personally I think this makes it look like a brochure but can work visually well.

Also suggested by ibrow ltd is the search menu so that the audience can find anything on the website easily.
The next stage is to see what design the client likes to take forward to the next stage and try to see how the mock-up would work with the content management system that they want me to use (modx).

Slight changes

2011-02-04T16:00:00.006+01:00

I have had another meeting with Wish upon a star and their current web provide/developer. The design I produced last time were both popular among the staff, which has caused a few problems as they all want different things. The background was the most in debate. Some wanted it more faded, some want it bolder so I have produced a few mock-ups that toy around with those factors. Also I have made the logo smaller (on feedback from ibrow design-web provider).

The main issue that has arisen from the meetings in terms of design is saving space on the browser (that I was already thinking about from the mock-ups) and the background and how it impacts on the content. So I have experimented with different colours etc.

Ipad observation and interview

2011-02-01T18:46:00.008+01:00

You've guessed it..another mock-up

2011-02-01T18:14:00.002+01:00

I think I'm almost there with the mock-up stage. I have created this from feedback from Wish upon a star and my tutor (David Downes). I have saved a bit of time by using the same illustration for the background as the illustration process is going to be a very time consuming process throughout the course of creating the website. I have taken down the opacity of the background to give it a watercolour effect (as the charity asked for). This will also let the content remain the focus of the design. Also to make the navigation clearer I have given it more spacing and underlined, in blue what page it is on so that the audience will find it easy to navigate. Also I think that the background unites the content with the charities purpose and doesn't look to formal because it is drawn in a fun, bright way. Another factor that makes it work is that it hasn't got a stark contrast between the content and background as the other mock up did with the white square highlighting the background of the content.