Lars Thurlow

Artefact 3 - Ideas

2012-02-16T04:31:00.000-08:00

After gaining positive results and feedback towards the theory of websites being interactive I aim to take this research to the next level. In organise some hand on data in the form of a focus group. This will allow me to test them as a group and individually using live examples followed by a few starting points to debate. This will allow me to document the discussion and see the audience’s response and reactions towards interaction within websites. The notes on the debate will give me key quotes and figures that will hopefully support the theory of interaction being a key element in engaging the browser and keeping them interested.

The plan

I plan to keep the test as accurate as possible taking into account all acting variables.

I aim to start by getting an interactive web page against a non-interactive website then innate a debate that I will take notes from and then conclude this with a few one on one interviews to get a select few opinions.

Artefact 2 - Evaluation

2012-02-15T04:02:00.000-08:00

The website was produced to gain a stronger development on the research undergone in artefact one. Allowing me to gain an insight into what works better in websites to interact with the browser and keep them interested.

After gathering positive data towards interaction in this website I realised that web applications must consist of a working balance between interactive features and content to keep the viewer engaged and interested. I took the theory further with artefact two by gaining some in-depth data using Google analytics and a survey to give the best possible results. I chose to categorise the different forms of interaction this gave me a greater understanding of each specific method. It allowed me to see what worked best in keeping the viewer interested.
This artefact showed me that browsers are more interested by interactive website but in particular more interested by physical interactions such as games or animation. Question two in the survey supported this with the majority agreeing with that animation and games are the most interactive feature. Question 5 specifically asked the browsers what feature kept them interested. If you compare these results to question 4 it shows that even though the participants where split over page 1 and 2 for which was most interactive still 2 people were interested by media factors from page 4. This still showed that the two most interactive features that kept the viewer engaged was mouse interactions and games/animation.

Overall this artefact has taken my research to the next level in understanding the different techniques and how they can affect the time spent on a web page. It also showed me how website environments can be improved with the use of interaction creating a more user friendly experience. In the next artefact I aim to take the research further by a focus group/ interview to get some quotes from users and see the reactions for myself.

Artefact 2 - what I discovered

2012-02-15T03:48:00.000-08:00

This question specifically asked the browsers what feature kept them interested. If you compare these results to question 4 it shows that even though the participants where split over page 1 and 2 for which was most interactive still 2 people were interested by media factors from page 4.
These results clarified the theory from artefact 2 whilst supporting the data I had got from Google analytics. Overall from this artefact I have discovered that games and animations seem to keep the viewer more interested than non-interaction features such as text imagery or even video/audio.

The overall results showed me that most participants preferred the interactive web pages in comparison to the non-interactive. The participants were unaware which pages where the interactive and which weren’t to allow a fair test. In addition to the results accumulated by Google analytics I added a set of questions at the end of the test. This gave me more useful data as well as the results I got from artefact 1. This made the theory even more clear after being influenced by the questionnaire it was made even more obvious from the in-depth data that websites use interaction to keep the viewer interested. This artefact was created to give a clear comparison of time spent on a web page if it is interactive in comparison to a non-interactive web page. This gave results that proved the argument. It also allowed me to test a few variations of different interactive features to see which were most appealing. The data showed me that to grab the audience’s attention the webpage must use certain interactive features alongside the content.

Artefact 2 Results and analysis

2012-02-15T03:47:00.001-08:00

I developed a design that would test the viewer’s engagement with a web application whilst testing the interaction in different forms. I have done this by using Google analytics to test time spent on the website and the time spent on each page. This generated results that gave me clear figures of which page kept the viewer most interested and what interaction worked best. In addition to this a small set of questions were asked at the end to give extra data.

The results
Below is a few of the results from Google analytics followed by a few sentences about what I have found. In addition to this the questions from the end of the experiment are listed below with the results.
The main feature was the custom report that I created. This tested time spent on the website, with average time spent on each page. It used metric features against dynamic features such as daily basis.
Here is three examples from the Artefact.
1. Page 1 (10:00 a.m.) --> Page 2 (10:04) --> Page 3 (10:10) --> Page 4 (10:11) -- >Exit (10:13)
2. Page 1 (9:00 a.m.) --> Page 2 (9:03) --> Page 3 (9:06) --> Page 4 (9:08) -- > Exit (9:12)
3. Page 1 (2:00 p.m.) --> Page 2 (2:05 p.m.) --> Page 3 (2:16 p.m) --> Page 4 (2:19p.m) Exit (2:25p.m.)

The results showed that the most common time spent on the website was around 16 minutes.
Here is the average time spent for each page:
Page 1 (mouse interactions/ hover effects): 2-5 mins
Page 2 (Animations and games): 6 – 12 mins
Page 3 (text based): 1-4 mins
Page 4 (video and audio): 2-6mins

The results showed that interaction does keep the viewer more interested and work to create a more engaging experience. This is shown with the lack of time spent on the non-interactive pages. The page that got most time spent on was the page that used the highest amount of interaction in flash based games and animations that required a physical input. This was the main focus of this particular artefact and with the results from artefact one they both point to the outcome that websites interest the viewer more with physically interactive features such as games/ animation and mouse effects.
The other results that I got from Google anaylitics gave me background information that was useful but not particularly necessary for this investigation, such as location, new vs old user etc.
The questions that followed the experiment are listed below with the results.
1. After using all for pages which one did you prefer?
The majority replied that they preferred using page 2 with the next most popular being page 1 (mouse effects/ physical interaction). Page 1 and 2 where the two interactive pages out of the four which showed how interaction can enhance the browsers experience.
2. What feature out of the website do you believe was most interactive?
Animation/games – 8 people
Mouse over effects and interactions -6 people
Text - 0
Video and audio -2people
Other -0
The results showed that the participants believed the features on page 1 and page 2 where most interactive. This shows that the viewer’s understood what interaction can take the form of in websites.

3. Out of all four pages which one kept you most interested?
This had a very similar outcome to question 1 with the majority answering page 1 and page 2. This clarified that interaction can keep the browser more interested even more than media or text.

4. Which page do you believe was most interactive?
Page 1- 7 people
Page 2- 9 people
Page 3- 0
Page 4- 0
This data showed me that the browsers found the games and animation the most interactive and engaging.

5. What particular feature in the website kept you most interested?
Animation/games – 8 people
Graphics and imagery – 0
Mouse over effects and interactions – 6 people
Video and audio – 2 people
Other – 0

Client website in Wordpress

2012-02-14T01:40:00.000-08:00

I have decided to create the website in word press. This will give more perks and advantages to both user and client.

The different features that Wordpress will offer are:
A blog: This will allow the client to import images, data, schedules or other relevant information.

A weather forecast: This will allow players/clients to see the weather forecast and be updated on what equipment they will need for the conditions.

A calendar: This will act as a schedule producing information on when the next training session is or if a session has changed date or time.

A login form: I believe this particular feature will open up a section for players to see additional information from their coach on progress and training, whilst keeping it confidential and personal to them.

I aim to create a database in Word press that will give the client easy access and ways of updating the website whilst having those extra features that engage the browser and keep them well informed. These additional changes will help keep the web application one step ahead of competitors and ahead of times.

Google Analytics

2012-02-14T01:31:00.003-08:00

I have used Google Analytics to create data for the website I made. It will allow me to gain a better understanding of how interaction works within websites whilst seeing which works best.

This is the first time i have used Google Analytics and i documented some of the pages such as the Overview that contained useful information. Also i managed to make my own custom form that measured time spent on the website and time spent on each page. This allowed me to see which page the user stayed on the longest.

The Overview

The vistor overview

Online Survey

2012-02-14T01:25:00.004-08:00

This website was a useful tool in creating a custom survey that fitted in at the end of the experiment. On the website it offered different forms, questionnaires and surveys. Below are a few screenshots of the website itself.

This the client side overview showing surveys or forms you have made.

These are the different forms you can create with a small description.

Artefact 2 - Question list

2012-02-14T01:19:00.003-08:00

The list of questions
After using the web application and participating in all four pages could you answer the following questions below to give an indication of your response.
Please fill in the answer to your best ability.

1. After using all for pages which one did you prefer?

2. What feature out of the website do you believe was most interactive?

3. Out of all four pages which one kept you most interested?

4. Which page do you believe was most interactive?

5. What particular feature in the website kept you most interested?

Thank you for participating and answering the questions above.

Below is a screenshot of the online survey i created.

Artefact 2 wireframe and ideas

2012-02-06T10:42:00.000-08:00

This is the first wireframe and ideas for artefact2.

Artefact 2 - website experiment

2012-02-06T08:01:00.001-08:00

I have created a simple four page website to test website interaction and how it engages the audience. I also looked at how these features can keep the browser more interested.

Below is a few screenshots of the website.
The splah page

Part of the home page/ page 1 of the experiment

Part of page 2

This is the final image page 4

Different Interactive Features

2012-02-03T05:08:00.000-08:00

Links in dialogue

Light box

J Query gallery

Marquee

Calenderer

Mouse over affects

Physical click of the mouse features

The website plan (Artefact 2)

2012-02-02T08:06:00.000-08:00

Splash page- This will introduce the participant into the experiment with a small introductory paragraph.

Page 1 – Home page (Java script and J Query)
This page will consist of mouse over features and other forms of interaction that will creating an interactive environment.

Page 2 – A flash based and animation webpage
This page will be a different form of physical interactivity.

Page 3 – HTML and CSS
This will just be text with minimal images. This page will be one of the non-interactive page.

Page 4 – Video and Audio
This page will consist of video and audio to show that some features can seem interactive but actually just be consumerism not physical interactions.

Final Plans for artefact 2

2012-02-02T07:25:00.000-08:00

Interactivity is this key element in keeping the viewer interested. The link below is a blog entry that supports that without interactive features a website can be boring and not engage the browser.

http://www.hongkiat.com/blog/importance-of-web-interactivity-tips-and-examples/

After the first artefact I plan to take the idea of interaction in websites further by getting a group of participants to test it and answer a few specific questions on the experiment. This will hopefully produce positive data like the first artefact with accurate results.

The first page will consist of simple mouse over effects with simple Javascript and j Query.

This will use features such as a j Query gallery with simple Javascript imagery and dialogue effects.

The second will be a flash based animation and games to physically engage the audience with interaction.

The third page will consist of text using HTML and CSS. This will be the non-interactive page to test both ends of the spectrum.

The fourth will be a video and audio page this will try to see if people are tricked by consumerism instead of physical interaction.

The four page design will be followed by a unique set of questions relevant to the test. It will be also tested online with Google analytics with additional heat maps to track what the users looked at.

To summarise the structure two pages will test the two main different interactions whilst the third and fourth will test for non-interactive to see what grabs the viewer’s attention and keeps them interested.

Artefact 2 Plans

2012-02-02T07:24:00.000-08:00

Plans and ideas

The plan for this artefact is to extend my knowledge of website interaction and the techniques used to keep them interested. This will hopefully give me an insight into what method works best.

This particular artefact is influenced by the questionnaire. After finding that viewers believe websites are interactive and also the understanding that browsers want to be interested when entering a website. I chose to take this theory further by developing a four page web application. This would include four types of interactive pages that would test the viewer’s reactions to come to a conclusion of what works to keep the viewer interested.

I will be testing how interaction is used in websites to create an interesting and engaging environment for users. I will do this because it will allow me to see what works best and how websites keep the participant interested in different ways.
I will begin the process by producing a 4 page website I will base each page around the same topic just with a different technique of producing the information. This will allow me to use Google analytics to produce a range of results. This will show me how long the person stayed on the website and further what they looked at with heat maps to support the findings. In addition to this I will follow up the experiment with a set of questions. It will give some extra information on the interaction within the website and how these kept the viewer interested. I aim to do this as the first artefact produced data that gave me the understanding that the websites use interactions to stimulate the audience and keep them interested. I personally wanted to take this further by creating my own website that can test these features. It will consist of two different variations of good and bad techniques/ non- interactive and interactive. This will allow me to see a difference in time spent on the page and also see if the viewer was interested by the page or not. This will tell me what works best and what interests the viewer most when interacting with them.

The first group will be mouse overs / mouse interactions. These will test the viewer and keep them engaged. The different effects will require a reaction from the browser.

The second group will be just sections of text and with little of anything else. This is to see how non interactive content can quickly stop the browser from being interested.

The third will be interactions such as games and interactive diagrams that all require a physical reaction from the audience.
The forth group will be minimal images and text with no forms of interaction with a clip or two. This will include video and audio to an extent.
The first group – this is designed to test for response and interaction in websites
The second group - this is designed to create a non-interactive environment that doesn’t engage the audience. This will give a comparison between the interactive pages to see the difference in results.
The third group – this group will consist of different interactions to the first but will test for interaction in website and hopefully give a conclusion of how they work to keep the viewer interested in comparison to non-interactive applications.
The forth group - this will be a middle ground with very few interactive features but other forms of media such as video and audio that engage the browser. This will see how the in between ground of interactive and non – interactive websites work in keeping a participant interested. This web page will consist of both methods.

Questions at the end of the website will allow me to get a better insight. It will give me clear pointers on what works best interactively in websites and what keeps the browser most interested.

Interactive Website Article

2012-02-02T06:52:00.000-08:00

How Does One Achieve Website Interactivity?
There are many elements that can be focused upon to achieve web interactivity that attracts users. The main subject of the website should be taken into consideration. This can give a clue as to the kind of interaction to be used. For example, a product website will have various categories on display. The range should be presented in an interactive manner rather than plain rows of products. A 3Dimensional Flip Book can be used to its advantage to showcase a range of products with the relevant information. A user gets engaged whilst flipping through the book.

The creation of these website interactivities requires time to be spent on technical details. However, in the recent times, designers can create these interactivities within minutes without any programming with rapid interactivity software that is available in the market

This is an article on a blog that had different examples of interactive websites. It had a positive theory of how interactive websites keep the viewer more interested.

http://www.hongkiat.com/blog/importance-of-web-interactivity-tips-and-examples/

Evaluation - Questionnaire 2

2012-01-26T03:20:00.000-08:00

This is the evaluation after doing the second part of artefact 1. I created a second questionnaire to ask more precise questions and get more accurate data.

Evaluation

The data from this questionnaire resulted in giving me accurate results and an understanding on how responsive content works. In addition it showed me what engaged and interacted best with the audience to stimulate the browser and keep them interested. These results showed me that being interested is one of the most important elements of creating a website. If a website doesn’t engage the browser or keep them interested it can result in them looking elsewhere for the content. Question 12 supports this statement with the majority of the candidates believing that websites need to keep them interested and in addition keep them engaged.

In one of the questions there was a split better two of the possible answers for what most interests them as a browser content scored high but was just beat by interaction and engagements. This showed that content is a main factor of why they use the web page but keeping a viewer interested doesn’t just rely on the content, it also relies on interaction and engagements that stimulate the audience with physical features.

The results from this questionnaire made it clear that there is a demand for interaction in websites. Also the web page must engage the user to keep them interested. I intend to exploit these findings by producing an interactive web application with various techniques to test the user and see what features keep them most interested, What do they believe is most interactive and what engaged them. This will give me an idea of what features work best in interacting with the browser and also be a way of comparing an interactive website with a non-interactive sight to see the audience’s opinion.

Questionnaire addition 2

2012-01-26T02:52:00.000-08:00

Below is a couple of the questions and results from the second questionnaire I did.

12. When browsing the web do you agree that websites need to interact with you as a user and keep you interested, to prevent you from looking elsewhere?

Yes – 15 – 100%

No – 0

This showed that every candidate believed that websites should interact with the user and keep them interested. This would prevent them from going elsewhere.

10. What part of a website interests you most?

1: content -6

2: Interactions and engagements - 8

3: Other -1

In this question I aimed to see what people found most interesting. It would give me a clear insight into what they thought. The data showed that content was important but interactions and engagements where more affective in keeping the browser interested.

4. Are you more interested to stay on a website if it has physical features that stimulate a reaction?

Yes - 14

No -1

This question gave positive feedback towards physical features that stimulate a reaction within websites. This extends the theory that people want to be engaged on a website and have physical interactions that stimulate.

Project process

2012-01-23T08:16:00.000-08:00

This is the new project process for the proposal.

Client Website so far

2012-01-19T01:53:00.000-08:00

This is the client website so far. There is still a few changes to make but the basic structure is there.

Questionnaire Evaluation (Artefact 1)

2012-01-17T10:11:00.000-08:00

I chose to do a questionnaire for the first artefact as it would give me an insight into the audience’s opinions and their thoughts on the topic. It would also work as a great foundation for the next few artefacts.

After doing a range of background research I translated my report question into a series of questions that would reflect the study and gain results that would support my argument. In addition it helped me gather accurate results. The results showed that a hundred percent of people where under the impression that websites are interactive. This supported the argument that websites use specific design techniques and interaction to engage viewers and keep them interested. The data also showed that people believe that mobile internet is more interactive than desktop applications. Is this because people use touch screen phones which creates a new and exciting environment for mobile users.

The likert scale questions consisted of statements that where answered with a scale of 1-5. This created positive results but additionally let the candidates strongly agree/ disagree with the statement. This produced accurate responses to each statement whilst giving clear results that could be compared and analysed. In addition to this I used charts and tables to display the data and help clarify specific points and arguments that supported the theory that websites do interact and engage the audience. Specific answers such as ‘The animated website because the pictures keep my attention and engage with me, whereas the writing image was confusing and unclear. ’ This insinuated that browsers believe websites with interaction interest them more than plain text that can be daunting.

Overall the results showed me that no matter what the age or gender the candidates believe that web applications are interactive, using audio and video to engage them. It was clear from the questionnaire that imagery and audio/video are the two most popular forms of interaction used. The experiment showed that these two groups can influence people to stay on a web page or used incorrectly go elsewhere.

This clarified the secondary research I had done and also supported the argument that websites interact with the audience using responsive content to engage the browser and interest them.

Questionnaire Results (Artefact 1)

2012-01-17T10:03:00.000-08:00

A few of the questionnaire results with charts and tables.

Question 16: What key factor would make you engage with a website?

Imagery -17 people
Audio -18 people
Video – 23 people
Animation/games -12 people
Other - 0

Question 6: Do you think websites are interactive?

Yes – 60 people (100%)
No – 0 people

This question showed me that everyone believes that websites are interactive in some shape or form. This proved a great success in supporting the argument that websites are interactive. The question had a second part that was created to see which factor they believed interacted.

If yes what factors do you think engage the audience. (E.g. colour scheme, imagery, video etc.)

1 - Colour scheme and graphics – 7 people
2 - Audio and video – 30 people
3 - Animation and page transactions – 13 people
4 – Other – 10 people

Question 7: When using a website what factor of the web page keeps you most interested?

(Circle your answer)

1 – Content - 17
2 – Interactions, such as transitions and animation -11
3 – Video and audio - 30
4 – Other -2

This question was a key way of comparing the different features and how they may enhance the viewer’s experience.

Designer - Impero

2012-01-13T14:40:00.000-08:00

Designer: Impero
www.imperodesign.com

“One of the greatest things about the internet lies in the freedom for people to not just build websites in a certain way, but also to create them for just about any purpose. The epitome of this freedom of expression is City Dogessentially a specialist service that promises to make urban pooches better behaved” (dotwebdesigner, 2011). The website has a real professional feel to it. The website creates a memorable experience and uses bold graphics to create a functional application. The use of bold typography in a range of styles, coupled with a two-tone color palette and some subtle decorative features taps into current trends, while also remaining lightweight in build. Overall I think the design is very impressive using a subtle design that conveys a clear business message.

Final wireframe design (client project)

2012-01-13T14:22:00.000-08:00

After doing different background research and looking at existing companies in this genre I produced this design. It followed the design methods and structural themes that websites in this field follow to give a design that is fit for purpose. I used a selection of colours that complemented each other but also signified football in the colour scheme. For example the green is a significant colour to football that represents many different things in team logos, to the stadium pitches. The structure itself is spilt into three main horizontal sections with the links and header in the top, captions of text and gallery in centre, with information, contact and footer at the bottom. This breaks up the content making it flow better and much easier to understand.
Below is a screen shot of the design with annotations and labels to explain the different plans and why.

Mock up designs (Client Project)

2012-01-13T14:08:00.000-08:00

I made three mock up designs with different structures and colour schemes. The images are annotated with the plans and ideas.

Robots.txt

2012-01-13T11:44:00.000-08:00

“The Robot Exclusion Standard, also known as the Robots Exclusion Protocol or robots.txt protocol, is a convention to prevent cooperating web crawlers and other web robots from accessing all or part of a website which is otherwise publicly viewable. Robots are often used by search engines to categorize and archive web sites, or by webmasters to proofread source code. The standard is different from, but can be used in conjunction with, Sitemaps, a robot inclusion standard for websites.” (wikipedia 2011)

I looked at numerous websites to gain an understanding of robots.txt to see how it worked and what it is used for. A robots.txt file on a website will function as a request that specified robots ignore specified files or directories when crawling a site. This might be, for example, out of a preference for privacy from search engine results, or the belief that the content of the selected directories might be misleading or irrelevant to the categorization of the site as a whole, or out of a desire that an application only operate on certain data. I hope this document will work as a factor to the live client project. It may take me a few attempts to get it functioning live but the text its self seems straight forward.

Artefact 1 (Plans and Ideas)

2012-01-13T11:42:00.000-08:00

Below is the plans for artefact 1 and ideas.

I intend to analysis the data found from this questionnaire using a series of tables and charts. I will then review the results and statements to come to a conclusion for the research. This will give me an insight into the audience’s opinions and also an understanding of if interaction is a key element. It will also help to create the next two artefacts as they are based around the structure of how design theories and interaction can affect the viewer’s perception.

I chose to manufacture a questionnaire as part of the research as it will offer a chance to get other opinions on the topic and analyse the different variables. This is the first of five artefacts and will be the foundations to my primary research. The research will enable me to understand the audience and their thoughts on web applications on both mobile and desktop, but mainly seeing the interaction of content. Interaction is a factor in web design and helps to engage the audience and keep them interested. This data will help to see if it does or doesn’t work. In addition taking into account the different structures and design theories. This may support the research in the report or may show it to be a different outcome. I aim to see how websites interest the viewer, and does this develop into an addiction. The questionnaire proved a perfect way to start the research.

I began the development of my questionnaire by analysing existing questionnaires and surveys to see the ideal way to produce one that gets background research, answers the question in hand and weighs up all the possible variables. I used a range of different types of questions such as multiple choice. This produced different types of answers to analysis. It was split into sub sections with the opening questions giving a bit of background to the participant. The next set of questions consisted of multiple choices and a variety of questions for the participant to express their opinion. This open answered question will help to gain the different views which will give accurate data to analysis. To ensure the questions met the needs of the topic I also looked at a few practitioners to see how they approached the market and used questionnaires to achieve a set of data. That was accurate and weighed up all the different variables.

In distributing the questionnaire I chose to hand it out to a selection of people. I first split it into two groups of 50. This being people who use computers on a regular basis and people who don’t. This would test if interaction in websites appealed to both people who are well equipped on computers and people who aren’t. After this I ensured I got a mixture of both genders and all age groups. This would clarify if these two factors have any input in the interaction side or if they don’t affect the results at all. The plan was to distribute the questionnaires across the majority of age ranges and both genders with a selection of computer literate and non-computer users. This was to check all possible effecting variables that may be a part of the equation. I discovered that the best way to do this was send a chain mail to people through Hotmail or social networks whilst to get the extra forms filled out I would approach others with a one on one method.

Fallback code for HTML5

2012-01-13T11:39:00.000-08:00

This is a fallback code that works to enable different tags that dont show up in internet ie6, 7 or other browsers.

http://remysharp.com/2009/01/07/html5-enabling-script/
Fall back code for div tags and features on HTML5. Website above.

Questionnaire (website)

2012-01-13T08:08:00.000-08:00

How To Create The Perfect Client Questionnaire is an article that explains how to design and make the best possible questionnaire. It was a great starting point for designing my questionnaire and making a set of questions that asked all the points i needed to understand.

http://www.noupe.com/how-tos/how-to-create-the-perfect-client-questionnaire.html

ARTIST/DESIGNERS - bascule

2012-01-11T06:58:00.000-08:00

The corporate home for Tokyo-based web studio Bascule Inc you’ll see the site ‘exhibits charming cultural contrast with western designs’ (webdesigner, 2011). The page is very long and feels like a blog with paragraphs of text broken up by little flash animations and bright vibrant images. “Our mission is to promise high-quality user experience to people who visit our websites,” says the company’s PDF brochure. “We aim to provide unique and sophisticated communication design, leaping over the traditional paradigm of web creation.” The website produces unique illustrations with vivid and extravagant scenarios. The feature that I found most appealing was a very amazing animation. If you scroll right to the bottom of the homepage there is a small creature with a jar. If you click the jar it sucks the entire website into it. This looks and works very well with such attention to detail in this very different animation. The only down side was the long loading to enter the site due to the translation from Japanese to English.
Here are a few images from the home page.

www.bascule.co.jp

The image below doesnt done the website justice. If you go on the website you will see how interactive the webpage is.

Colour Schemes (Client website)

2012-01-11T06:30:00.000-08:00

A few colour swatches and different colour schemes

Orange, red on grey and black – These colours will have the ability to stand out and catch the browsers eye. I looked at a range of different styles and genres of colours schemes. This helped in creating a few of my own and incorporating a colour scheme fit for purpose. I preferred the pastel style colours over the bright colours that are too bold and eye catching. The bright colours draw the attention away from the important content and sources.
Here are a number of different colours schemes I gathered to fit the genre and purpose of the website.

Below is a range of different colour schemes that i though would work with the genre.

Artefact 2 and 3 (plans)

2012-01-10T13:09:00.000-08:00

Website ideas/plans

Artefact 2 and 3 will be used to produce two complete different experience’s to test the interaction in websites. They will enable me to see the audience’s reaction towards the different interactions in web pages.
This artefact will consists of a web based application with a series of three interlinked pages. This will give an experience and atmosphere similar to any existing web application. The only difference is that this web site will be designed to have all the interactions that engage the audience. This will work to test if the interactions enhance an experience and how they can keep the viewer interested. This particular artefact will consist of a website that uses different theories and principles with different forms of interactions. It will then be used and tested by a group of participants. In addition a focus group or set of questions will be asked to get accurate data that will be then compared with the results from artefact 2. Artefact 2 will be another website in the same genre. It will consist of opposite features not following the design principles or any forms of interaction. This will show the differences and how simple interactions can make a responsive website whilst engaging the audience.

Artefacts 2 and 3 are both web applications that will work together to test if interaction is a key element in keeping a viewer on a website and engaging them.

Initial plan for Artefact 1:
Website 1 (interactive site) will consist of:
4 pages
A homepage with interactions, images, J query galleries, graphics, media e.g. audio or video
Structured to the F model
Structured to the Lockwood design principle and other design theories

Artefact 2:
Website 2 (minimal design)
Bulks of text
Poor use of colours
Not structured to design theories or principles
No media
No J query animations or slide motions

Artefact 1 (Draft questions for Questionnaire)

2012-01-10T13:05:00.000-08:00

Draft Questions

This is the question that is being analysed and the focus of the research. (“How does the response of websites and interaction help keep viewers Interested?”)

The questionnaire was used to weigh up all the variable’s and use numerous questions to ask a range of participant’s relevant questions to the experiment. Each question aimed at a specific area of the interaction whilst gaining background information.

What is your gender: Male, Female?

Circle the relevant age group: 20 below, 21- 39, 40-59, 60- 79, 80 and above

How regular do you use the internet? Please state how often in days, eg every 2 days.

What most appeals to you when entering a website?

What keeps you interested in a website and makes you stay?

Artefact 1

2012-01-09T14:08:00.000-08:00

Questionnaire

Initial ideas
In this artefact I aim to achieve a better understanding of how web applications appeal to the audience. Is it the engagement of the design elements and use of media or is it an addiction. I will get numerous participants to answer the questionnaire. I will get both media and non-media participants to answer the questions to get varied data from both ends of the spectrum. This will help in obtaining accurate results that will be analysed to give a final outcome. I intend to get at least 40 people for both sides of the spectrum. This will in total give me at least 80 results that can then be analysed and put in to charts and tables for further analysing. This will make it easy to see most common of certain question and work out the mean and mode. This will give me a final conclusion to the particular investigation and will be a key primary source.

Different theme ideas

2012-01-09T13:59:00.000-08:00

These are three different theme ideas for the client project.

The first idea is a Comic style using bold colours similar to work of Lichestien (pop art). This is inspired by marvel and DC comics. It will use elements of comic strips in the layout with bold imagery.

The second idea is a professional finish with graphics and chrome finishes giving an element of sophistication. (Similar to LIVE LOUNGE and BBC look for professional side of theme.)

The third idea is a black and white/ Noir style design with relevant colours that make specific parts stand out. This gives the effect to grab the audience’s attention.

I intend to create a retro colour scheme with a modern theme. This will give the impression that it is Morden new and professional whilst having a retro twist. This will give it that unique appeal whilst grabbing the audience’s attentions merging the retro style with the professional and Modern finish in the graphics. This will help in producing a website that works well and has a professional feel with an original style making it stand out from offer competitors.

After trying these different designs and looking at the different themes I chose to keep it professional with textures and brush effects to create a bold design. I also applied a colour scheme that has a retro feel. This gave the design a modern appeal whilst having a retro genre to the design that fits the football style.

Football based websites

2012-01-09T13:30:00.000-08:00

These are a few websites in the same genre as the client application. I chose to look at a range of different websites to gain an insight into how they appeal to their audience.

Website 1 consists of a graphic based website it is a high budget website designed for the professional football team Barcelona. I looked at high and low budget websites to make the comparison between the two and see what methods are used to fit the genre. I looked at a few coaching/ training websites too also get an understanding of what is out there at the moment and how they appeal to the audience. This consisted of my own market research into the methods of design and layout in these particular applications. I discovered that the layouts where very complex following the structural design principle of Constantine and Lockwood whilst having lists and links to numerous pages of content. These specific rules applied to the football clubs and other football based websites. I discovered there was a pattern in the themes and how they achieved the genre. In the different websites I looked at I saw how they scattered the content across the pages splitting it into blocks of information. This gives the browser an insight into the services of the web application and an over view of the content.

Website 2
This is a basic website that immediatly shows the browser the purpose. It uses little animation or other forms of media, stopping any distrations from the text. This makes the content the main focus.

Website 3
This website uses a complex structure with numerous links leading off the homepage to different sources. It is designed as an information point for the local football club.

Themes and ideas for client project

2012-01-09T13:27:00.000-08:00

Plan
I intend to produce a website that will fit the genre and needs of the client.
I looked at existing football coaching and training applications. This gave me an insight into how they achieve a site that tells the audience its market sector. Below are some images and websites I found. In addition I looked at football websites particularly focusing on fan websites and teams.
I will use the research to create a website that grabs the audience’s attention and functions to the user’s needs. It will work across all browsers and have a mobile version to fit the increasing market in portable devices. In addition it will create a friend environment that is easy to use and interacts with the browser.

Mood board
I looked at different imagery that represents football as a sport. I created a wireframe from a mood board of images that stood out. This gave me an idea of the colours, images and iconic styles.

Context 3: Assingment Two Images

2011-12-06T10:39:00.000-08:00

Here is two of my five images for the assingment 2 project.

This is image 2 for my assignment and is a representation of an application i have programmed.

The next image symbolises the passion I have for design and Interactive media.

Live Client Gnatt Chart

2011-12-06T10:30:00.001-08:00

This is my propsed timeplan for the Live Client.

Below is the second half of the gnatt chart.

This is a table of the tasks with a daily duration.

Design for Interaction: User-friendly Graphics (book)

2011-11-25T14:16:00.000-08:00

This book was used for the research part of the project and helped in the analysis of the graphics and imagery within websites. It helped me understand how they interacted with the user and compliamented the structure.

Baggerman, L (1 Jun 2000). Design for Interaction: User-friendly Graphics . US and A: Rockport Publishers Inc.; illustrated edition edition . p10-25.

The ideas/ plans for the five artefacts

2011-11-25T14:15:00.002-08:00

The first: This will be a website that uses the methods and theories of design whilst using the techniques I found in my secondary research to produce a website that interacts with the audience and engages them. This will help in keeping them interested in the content. Thius will stop them from going elsewhere for the content they require. I will compare it with the second artefact in gathering results and data to gain a better understanding of the audience with my own primary research. This will support my findings within the report. To hopefully show how interaction and design principles with the correct use of different media forms engage with the user to keep them interested.

Second artefact: This will be another website that uses the same content and genre as the first artefact but instead will do the opposite. It will work as a comparison between both the first and second to see how the different methods and principles with the correct use can achieve an interactive and functional website that engages the user. This will hopefully show that uses poor colour schemes no images/little with a combination of obscure graphics and designs work against the client in making a website that doesn’t engage the browser and may cause them to look elsewhere.

Third artefact: This will be a series of focus groups and interviews linking back to the first two artefacts in gathering a range of data that supports the experiment. This will then be displayed in tables and charts to look at the patterns and data more efficiently.

Forth artefact: The next artefact will be a questionnaire that will be used to gain the opinions and beliefs of numerous participants. I aim to gain 100-200 people to part take in the survey. I will do this from one to one hand outs and chain mail through university and my blog and other social networks. I also aim to split them into too equal groups of people who are computer illiterate/ or of less knowledge of the genre against people who are in media and use computers on a regular basis. These results will be compared and analysed with an evaluation to conclude the data.

Fifth artefact: In the production of the final artefact I want to find out how interaction not only affects the desktop market of web but mobile. In this area I will look at a mobile application. I will create it in the same genre as the first artefact. It will test how interaction within mobiles and tablets can engage with the user.
In doing these five artefacts I will gain primary research that will give me accurate results.

Possible Clients

2011-11-25T14:15:00.001-08:00

Rock city – Mobile variation of the website with media queries
Other local bars that may not already have an existing website with a mobile variation

Small business or companies - Such as low key business opened by graduates or uni based companies.

Gym website – This could have a database with PHP to create a schedule and booking system with timetable.

A portfolio website that will be used by photographers, graphic designers or other forms of designers.

Live Client - Ideas

2011-11-25T08:30:00.000-08:00

Ideas and proposal

My initial plan is to create the following for the specific client. I aim to create a web application that fits the needs of the client and has additional features that will work with the structure and functionality of the website to ensure an interactive design. (Below is a list of the features I intend to add or possibilities for the application).

QR tag

Scroll box - on some of the information pages

J query toolbar/ navigation

A database with PHP for Schedule’s or timetable, with possible login and booking.

A mobile variation, with media queries to apply it to tablets and mobile devices.

Using percentages to readjust the slides structure to the screen size.

A contact Form that links to the administrators email.

Rollovers/ page transitions

Icons linking to social networks (Twitter, Facebook, and Youtube.)

J query sliding gallery.

Twitter Feed, that updates with comments.

All these features will show my skills as programmer whilst the content and layout will show design skills I have and my approach on graphic design.

Webdesign Management Plan

2011-11-25T08:01:00.000-08:00

I was browsing the web and found this example of a way of time mangement in web design. I will use this as a starting point for creating my own gnat chart that will show the work plan in more depth.

Principles of user interface design

2011-11-19T12:51:00.000-08:00

The principles of user interface design are intended to improve the quality of user interface design. Constantine and Lockwood principles are as follows:

• The structure principle: 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 overall user interface architecture.

• The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.

• The visibility principle: The design should make 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 alternatives or confuse with unneeded information.

• The feedback principle: The 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: The 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.

• The reuse principle: The 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.
These are some of the different principles I analyzed whilst looking at the websites. This helped in producing my research report and in gaining more accurate data whilst giving me a better understanding of web applications.

Raskin, J. (27 August 2011). Principles of user interface design. Available: http://en.wikipedia.org/wiki/Principles_of_user_interface_design. Last accessed 16th Nov 2011.

User Requirement analysis

2011-11-18T13:06:00.000-08:00

Requirements Gathering- A requirement is a statement of what the system should do. The overall goal of requirements is to express what the proposed system should do; just what it should do. The “hows” are answered by the anylsis and design. It is a key method of expressing the requirements in a way that all concerned can understand.

Analysis – Analysis is the process of examining the requirement’s and making models such as wireframes, storyboards and site maps.

Design- The principal is to create the models into a design.

Implementation- Implementation takes the ideas from design to add the code of the web applications.

Test- This is to test the web application and check the code works and functions correctly

Deployment- Is to deploy the web application.

Definition of Research Methodologies

2011-11-18T13:03:00.000-08:00

‘Generally speaking, methodology does not describe specific methods despite the attention given to the nature and kinds of processes to be followed in a given procedure or in attaining an objective. When proper to a study of methodology, such processes constitute a constructive generic framework; thus they may be broken down in sub-processes, combined, or their sequence changed. As such, methodology may entail a description of generic processes, philosophical concepts or theories related to a particular discipline or field of inquiry. Similarly methodology refers to the rationale and/or the philosophical assumptions that underlie a particular study or a particular methodology (for example, the scientific method). In scholarly literature a section on the methodology of the researchers is typically de rigueur.’ (Wiki,2010). This is a definition I discovered that describes the research methodologies and helped me in writing the paragraph for my research report.
I found the Methodology is generally a guideline for solving a problem, with specific components such as phases, tasks, methods, techniques and tools. It can be defined as the analysis of the principles of methods, rules, and postulates employed by a discipline also as the study or description of methods.

Online Hosting

2011-11-18T13:02:00.000-08:00

I have been recently looking at online hosting and servers, looking at the different deals and price variations. This was to see what site would offer me the best online hosting.
Here is a list of a few I found:
http://www.rustymonkey.com/nottingham-web-design/web-hosting.php - this is a Nottingham/local based one
http://www.pipeten.com/
http://www.ipage.com/ipage/index.html

Python

2011-11-18T13:00:00.000-08:00

The Python programming language is actively used by many people, both in industry and academia for a wide variety of purposes. This object-orientated language is quite similar to Java and ASP.NET I found in its ability to create dynamic web pages and various types of software applications. Python integrates well with many other technologies. Apart from Ruby, Python is said to be the fastest growing open-source languages available, used in everything.

A clean object-orientated design and extensive support libraries make Python far more productive than languages such as C++, Visual Basic and Perl. Some of its major advantages include:

Cross Platform - Python is compatible with most major operating systems

Speed - Python is much faster than other interpreted languages.

Extensible - Python makes it easy to write your own extensions in C or C++.

Highly Scalable - The extensibility, speed and power of Python provides access a dynamic set of tools that help you effortlessly scale to larger projects.

Easy to Maintain - Python's natural elegance produces code that is not only easy to read, but simple to redesign and modify as well.

Open-source - Starting as an open-source project, Python's efficiency can be attributed to the contributions of thousands of developers around the world.
I have created a list from numerous sources just listing the possibilities of using python within web documents.
OpenERP, an open source comprehensive suite of business applications
ERP5, a powerful open source ERP / CRM used in Aerospace, Apparel, Banking and for e-government
GNU Mailman, one of the more popular packages for running email mailing lists
MoinMoin, a popular wiki engine
MootiroForm, an open source form creating software
Planet, a feed aggregator
Plone, a user-friendly and powerful open source content management system
Roundup, a bug tracking system
ViewVC, a web-based interface for browsing CVS and SVN repositories
Trac, web-based bug/issue tracking database, wiki, and version control front-end
Python Shell, A Python shell inside the Google Chrome browser.
Turntable.fm, a social media site for interactively sharing music, currently in beta

Perl

2011-11-18T12:57:00.000-08:00

I learnt that Perl is a general-purpose programming language developed for text manipulation and now is used for a wide range of tasks including system administration, web development, network programming, and more. The language is intended to be practical. Its major features are that it's easy to use, supports both procedural and object-oriented programming, whilst having powerful built-in support for text processing.
‘It is a high-level, general-purpose, interpreted, dynamic programming language.’
To run the Perl programming/coding this code: perl progname.pl
Or an alternative is this line with the first line: #!/usr/bin/env perl

Exibition Image Descriptions/Ideas

2011-11-16T07:23:00.000-08:00

Image Notes:
In the exhibition booklet I found that the images included the following.

Progressive

Showing all their initial ideas and skills

Attention to detail in the visuals and imagery

Eye catching and bold- with the effect to make you look in more detail after first
glance.

Colourful

They all summarise the practitioners skills, telling the audience what they can do .
This helps me understand the practitioners own talents and gain an insight into how they work and what they do.

My own Image plans/ideas:
The images should show my skills and what I can offer a possible client or company in the future. In these five images I want to specifically show that I can do illustration and Graphic design whilst being a web programming in CSS, Html, Javascript and Jquery. Using my own unique style to attract the audience’s attention and express ideas through the five images.

50 word statement Ideas

2011-11-16T07:19:00.000-08:00

I have so far produced two possible 50 word statements for the exibition caption. These are two ideas that I will work on and develop my final 50 word stateent.

Lars Thurlow uses a range of different skills to produce original desktop and mobile applications. He works in programming and designing web sites that interact with the audience. He has a passion for design incorporating graphics, illustration and programming to develop unique functional websites.

Making original websites that express his ideas, Lars Thurlow uses a range of skills to produce unique designs. He uses graphics, illustration and programming to create mobile and desktop applications, whilst having a passion in design and an eye for detail.

Designing for Interaction: Creating Innovative Applications and Devices (Book)

2011-11-11T02:20:00.000-08:00

The book has useful tips for design research to uncover people’s behaviors, motivations, and goals in order to design for them. This helps to understand how responsive websites work and how to create a website that fits within that critera. It also offers interviews and case studies from industry leaders on prototyping, designing in an environment, service design, and more.

A small summary from the book its self.
'Interaction design is all around us. If you’ve ever wondered why your mobile phone looks pretty but doesn’t work well, you’ve confronted bad interaction design. But if you’ve ever marveled at the joy of using an iPhone, shared your photos on Flickr, used an ATM machine, recorded a television show on TiVo, or ordered a movie off Netflix, you’ve encountered good interaction design: products that work as well as they look. Interaction design is the new field that defines how our interactive products behave. Between the technology that powers our devices and the visual and industrial design that creates the products’ aesthetics lies the practice that figures out how to make our products useful, usable, and desirable.'

Saffer, D (14th Aug 2009). Designing for Interaction: Creating Innovative Applications and Devices . 2nd ed. United States of America: New Riders. p1-29.

Human-computer interaction: theory and practice

2011-11-10T13:19:00.000-08:00

Author Julie A. Jacko, Constantine Stephanidis

This particular article describes how human interaction used to occur face to face and now has adapt to fit the virtual enviroment in creating this effect in interactive websites. This shows how the world is changing and become more dependant on technology replacing the interaction of human to human to human and computer.

Julie, A (10th April 2003). Human-computer interaction: theory and practice. 2nd ed. Mahwah New Jersey: Lawrence Erlbaum Associates,Inc. p53-62.

Undercover User Experience Design (Book)

2011-11-10T09:44:00.000-08:00

This book particulary looks at design methods and how to create a functional website that fits the users needs whilst creating a user friendly experince. This didnt contain all the materail I was looking to gain in this area but offered ideas and some termonolgy of how websites are created to fit the users needs. This gave me an insight in to how certain aspects within the design can make a responsive website attarct more browsers and be more successful in engaging the user.

Bowles, C (17 Sep 2010). Undercover User Experience Design. United States of America: New Riders. p52-64.

Eyetracking and Usability (book)

2011-11-10T09:23:00.000-08:00

Eyetracking Web Usability is a book I looked at as part of my research, it is based on the studies of eyetracking usability in existence. This is from aurthor Jakob Nielsen and coauthor Kara Pernice. It looks at how human eyes interact with design within web. Their findings help understand what people see or don’t see, when they look, and why.They also discovered important new user behaviors that are revealed here for the first time. Using compelling eye gaze plots and heat maps,demonstrating why some designs work and others don’t. They also provide valuable advice for page layout, navigation menus, site elements, image selection, and advertising. This book is essential reading for anyone who is serious about doing business on the Web.

Nielsen, J (1 Dec 2009). Eyetracking Web Usability . United States of America: New Riders. p10-18 and 70-74.

Article Supporting Research project

2011-11-08T14:27:00.000-08:00

The title is: Reach beyond use and usability and focus on impact by combining marketing and interaction design to improve academic website development.

Below is a slight summary of the article I have looked at. To create a sucessful website it must be an engaging, user-focused site that gathers needed data and advances organizational goals is not simple. To do so effectively requires a willingness to approach a website development project in a way that capitalizes on both interaction design and marketing principles.

Journal piece that supports Research project

2011-11-08T14:21:00.000-08:00

The title of the journal is, Opinion piece: Social media: Should marketers engage and how can it be done effectively?

This journal supports the idea that to engage with the customer or browser offers more possibilities and a better experience a quote specifically stood out was ‘Online advertising has been criticized for its creative limitations for years, but changes in the internet landscape have created new opportunities to engage with customers in ways not possible through offline channels. This particularly shows how technology and the internet have enhanced and improved aspects of the advertising world by using interaction to connect with the users.

Assignment 2: Image 1 Idea

2011-11-04T14:26:00.000-07:00

This is one of my image ideas for the assignment two project. The idea is to show that I have a passion for design and creating web applications, whilst doing illustration and my own style of drawing in biro and pen.

Zach Gold - Photographer

2011-11-01T08:08:00.000-07:00

Zach Gold is a photographer for the “Life Hurts” campaign for Dickies this is a range of images. The workwear company has been making tough, durable clothes for workmen. Their latest campaign highlights their heritage, claiming as a slogan “When Life Hurts, Dickies Endures.” The work shows scenes where the worker is at the worst situation. The photos them self are very powerful motion shots in black and white with the Dickies Logo in colour make their brand stand out from the imagery. The grayscale effect adds more definition and detail to the specific scenes of disaster. Here is a few of the photographers work for the campaign.

Web Template in hand-drawn sketchy graphics

2011-11-01T02:22:00.000-07:00

This design was a blog style template I found on webdesigner mag website. I discovered it whilst looking into different web applications and designs within the graphic sector of wbedesign. Below it the sketch style home page. I specifcally like the use of a varied palate of colours in a collage of visuals. I hope to achieve a simular effect on an upcoming project but in my own style of illustration.

This is a close up shot of one of the other images.

Exibition Ideas

2011-10-28T02:56:00.001-07:00

I have been thinking of possible exibition ideas below is a scanned in copy of my ideas and notes.

Final Screenshots of Client Project

2011-10-28T02:51:00.000-07:00

Screen shots of final mobile site.

The first image is of the homepage.

This screenshot is of the gallery within the mobile site.

Proposal - Assingment one Context 3

2011-10-26T15:02:00.000-07:00

Proposal: I propose to found a unque bussiness that will appeal to a large audience. The concept wasnt possible years ago due to the lack in technology but now times have progressed and the technology is at a sustainable level. I intend to make a web/graphic designer company that specailes in 3D stereoscopic applications, that will change education, advertising and online shopping. Improving all the aspects within these fields. Eg education helping teach children space enviroments and the solar system in 3Dimensions from their classrooms. To unversity medical school where possible autopseys and digrams in 3D give them the more accurate results and indepth knowledge that 2D couldnt provide.

Research Project - Topic Sheet

2011-10-26T15:00:00.000-07:00

“How does the response of websites and interaction help keep viewers Interested?”

I hope to find out how specific techniques within web applications use interaction to keep a browser interested. I intend to look in depth if this encourages the browser to stay on the webpage or not. Investigating how these forms of interactions are developed and the outcome of the end results. Do they work and what multimedia methods are involved in the interface, such as Graphics, visuals, structure, sounds and videos. I intend to support this research with five articles using a mixture of secondary and primary sources to complete the project. So far I have began researching useful sources whilst gaining some background knowledge.
My initial plan is to separate the specific interactions into set category’s. This will define the different interactions within the web applications. After looking at numerous web interfaces both on desktop and mobile devices I have decided to split the interactions into three very specific groups. Whilst looking at the three groups I will also look at other factors that may affect the overall response between the viewers. The first category will be visuals and graphics, looking at how certain imagery can interact with the browser or even keep them actively engaged with the web page. The second group will be video and audio mediums applied to the web applications. The final group will be other interactions including things such as the animations within the webpages and other content. Whilst investigating these three areas I hope to see not only if a websites responds with the user but does it keep them interested using specific technique. In addition this should indicate which method works best to achieve the interaction.

Research Project - Possible Questions

2011-10-26T14:56:00.000-07:00

I have listed three possible starting questions below;

“How has web design changed to become more portable to fit the needs of the user?”
I intend to research the development of new web applications and how they have changed to fulfill the needs of the audience. Particularly looking how the web response has changed from desktop to mobile. I intend to investigate the variables of a traditional mobile site in comparison to the desktop interface, comparing the evolution between the old and new. Taking in to account the specific aspects of both desktop and mobile/ App to discover how the need for portability has modified the original desktop web interfaces.

“How does the response of websites and interaction help keep viewers Interested?”
I hope to find out how specific techniques within web applications use interaction to keep a browser interested. I intend to look in depth if this encourages the browser to stay on the webpage or not. Investigating how these forms of interactions are developed, and the outcome of the end results. Do they work and what multimedia methods are involved in the interface, such as Graphics, visuals, structure, sounds and videos.

“Do mobile websites and apps benefit Local Leisure and Tourism?”

I intend to investigate how Mobile applications such as Apps and mobile sites can benefit Local Leisure and Tourism. Achieving a better understanding of the capability of mobile applications and how they function to the needs of the audience. Looking in depth how interfaces such as maps, guided tours, events, facts and figures can possibly improve tourism.

Report Client Project

2011-10-26T14:55:00.001-07:00

In the client project i chose to create a design that would boost the awareness of cancer research within the Alumni association.

The project was to create a multimedia device/service for Alumni. That would benefit the company or clients. Immediately I tackled the brief by thinking up possible scenarios and how the product I would make may solve these or in fact help. I found that after numerous lectures the company helps others in many ways and works across a board area. To create something that functioned and was fit for purpose in the allotted time I decided to develop something more specific aiming at a certain sector of the business. The particular sector I wanted to do was Cancer research as not only would this be an area that I could raise awareness but I could develop A device that could raise donations that would help others. Working for the Alumni Company to create a way of donating through them which has its benefits.

Now I had a goal set in mind of what I would make I began the planning stages. The initial Ideas for the products I had where, A short animation with details at the end for charity purposes and Donating. The second was a website or App. The next was a logo and poster. These all being different ways of developing a multimedia product that could work for the Alumni in advertising and functioning to help raise awareness. After weighing up the pros and cons and taking into account the time limit I decided on making an App with a Logo as an addition. The reason for this was to help create a design that functioned but also has its own identification. I started the producing stages by drawing up a few different wireframes for the site. I also drew up numerous illustrations of possible logo designs. Now I had some ideas on paper I began the coding process and getting the structure of the app made. For this part I had a few problems getting the code to look and function correctly on both IPhone and Android. I used J query to help and also added media queries to resize the screen for other protable devices. I then used the CSS to style and add the graphics from the wireframes I had created on Photoshop. I decided on one of the designs out of the two I made by getting constructive criticism and an audience to pass comments on both. This gave me critical comments on the style, structure, color scheme and visuals. This helped in making the final decisions on how to design the final app but also what would work best. After creating the basic structure and design I began polishing parts of it and adding/ improving areas of the design. This included the functionality and transitions between the slides and the padding between certain objects. After adjusting these minor sections it made the overall functionality work and look better. Once finished and the final adjustments where amended after gaining feedback and constructive criticism off a number of participants. This consisted of statements about the graphics on certain pages such as font styles and typefaces that didn’t fit the correct criteria. Also another key change I made was the format of the pages and how the text was portrayed to the browser within the website. I made a theme that works as a whole to get the message across whilst graphically standing out.

The final product I believe achieved the aspirations and goals I set out to meet at the beginning of the project. I came across a few problems in the project especially in the coding, but putting in extra time and effort overcame these glitches and helped produced the final product. Overall I managed to organize my time well and finished the product in time even with the problems I had within the programing. After testing the app/ website I don’t think I would have done the project differently than I did it. As I meet the brief and managed to create a piece of work that not only functions to the needs of the client but also helps in the awareness and donation of cancer research.

Final Logo Client Project

2011-10-26T13:59:00.000-07:00

I Decieded to redevelop the logo to create a new design that fitted in with the design better and look more the part.

Edited Logo Client Project

2011-10-26T13:47:00.000-07:00

This is the edited version of the drawn logo I did earlier in the project.

Illustrative Logo Designs - Client Project

2011-10-26T13:29:00.000-07:00

Wireframe Client Project Design 2

2011-10-26T13:21:00.000-07:00

The home page is below.

The image below is a wireframe of the information page in the same style.

Wireframe Client Project Design 1

2011-10-26T13:16:00.000-07:00

This was one of the two wireframes I created from my sketches and designs.

Proposal For Client Project

2011-10-26T13:15:00.000-07:00

I hope to create a design that will appeal to a wide audience and inform people of the work Alumni do. With the key function of the app/ mobile site to inform people and work as a donation recipient for cancer research. One of the main donations Alumni do. My initial plan was to do a mobile interface because of the advancement in multimedia portability. Giving people the freedom anytime and anywhere to use the very helpful app that when finished will not just inform people but work as a device to gain donations for Cancer Research. The Alumni particularly aim at graduates, but I intend to make my market sector more niche and be designed for one of the sections within the Alumni. Instead of creating a board vague App I have decided to make a more detailed specific App. I will produce the App programing it in Dreamweaver using specific lines of code to make it work on both IPhone and Android.

Wireframe For Client Project

2011-10-26T13:13:00.000-07:00

Client Project- Ideas

2011-10-26T13:11:00.000-07:00

Ideas Client project
The projects brief was to create a multimedia form that meets the aspects of the company. The guide lines where board and the project could be whatever we deemed useful or relevant for the Alumni. I chose instead of targeting the company as a whole just aim at a specific part of the Alumni Corporation. This area was the Alumni Cancer research sector with key benefits for donating with them.
The first initial ideas I had where;
A short animation,
Poster,
Logo design,
Website,
App/mobile device.
After doing some quick market research and considering possible routes I may take. I decided the best one for numerous reasons was the App for Android/IPhone. The reason for this was because it would work best and put my talents/skills to best use. Using my programing and graphic design to make a popular portable site functioning to raise awareness and donations. This was also decided from my research showing that desktop websites are become less used in comparison to mobile web browsing. As an addition to this I decided to create a logo for Alumni, as there isn’t an existing one at the moment. This would give the company branding and identification within their field.

2011-10-03T13:04:00.000-07:00

This Is one of the new advertisments from the Youtube Home screen. It imediatley stood out from the site for its unquice comic/ grunge mannerisums within the design. It almost has this old style feel that I want to capture in some of my future digital based designs.

Photography Website Development

2011-10-03T12:49:00.000-07:00

Photography Website- Homepage Graphics

I have done three alternative illustrations for the home page. The first was a illustration of my own. That I created uses brushes, layers and opacity in parts to give the finalised look. After constructive critisum I ddecied to develop the main focus of the page. I made the image more fit for purpose, making the main image a polaroid. This imediatly says photography being symbolic in illustrating the websites purpose. I created two different variations with this in mind. The first out of the two a scatterted stack of polaroids and the other a centralised polaroid. They both consisted of the same photo. Which was one of the images from the photographers portfolio. Giving the browser an insight into her work and style of photography. Below are the three different illustrations for the website I created.

Evaluation

The other amendments included a slight problem with the font face kit for the Google browsers homepage. Where the sub title disapeared, which i corrected by redirecting the code enabling it to work correctly. The next change I made was to the Gallery page as with all the graphics in the background. It drew too much attention away from the images them self. So for this page I simplified the design that made it stand out more whilst getting the message across clearly. A few minor changes that where easily solved was a postioning of the sound bar, readjusting the sizes of the php form, and adding some social icons to the homepage. Giving the browser that extra form of contact and information. The other big change I made was adding different home page illustrations after constructive critisum. I gave a variation of a few different designs for the homepage main focus, all saying straight away "Photography".

Immersive Gardens

2011-10-03T12:02:00.000-07:00

http://www.immersive-garden.com/

This is a practioner I noticed in a webdesign booklet and decied to check out the Interface. After seeing the powerful imagergy and bold photography. I visted the site and discovered that it is an animated design that is very imaginative and complex, with an eye for every little detail. All working as one to make a smooth running, and extra ordinary portfolio. They have won world wide awards in web for this particular website. I personally liked the interaction of the website and how it keeps the viewer interested and wanting to see more. Using unfolding digital compositions of high quality. The other part I really liked was the subtle navigation that interlinked all the different sculptured pages and animations. Below I have listed a few screenshots but for the full effect check out the web link above.

Static Webpage Defintition

2011-09-28T06:05:00.000-07:00

A static web page is a web page that is delivered to the user exactly as stored, in contrast to dynamic web page which are generated by a web application.Consequently a static web page displays the same information for all users, from all contexts.Static web pages are often HTML documents stored as files in the file system and made available by the web server over HTTP.

Pricing guidelines - How to give a design quote

2011-09-28T06:04:00.001-07:00

"1. Single Page Website
Single Page website price from £250.Four or Five Page website price will cost about £350 - £450." This is a statement on the http://www.toucher.co.uk/website-price.htm#websiteprices , refering to the price that should be charged or how to work out the set cost for a website. The rates for a website increase with extra features such as javascript and J query. Also the price varys on the amount of pages and time taken, with the extra use of coding adding to the equation. All of which adding to the equation of overall cost. After taking some time to research the variables and look into web companys specifically looking at how they quote a design. I realised that it depends on the brief from the client and there is no set price just guidelines on how to price up all the aspects involed in creating a functionaly site that is fit for purpose. In some cases going from three to four figures.

Illustration Of Man

2011-09-23T10:43:00.000-07:00

This is an illustration I did in my spare time. Using pen and ink to give the rough effect before scanning it in to add the other details, such as textures and lighting effects.

Old Techno Portfolio Website Evaluation

2011-09-23T10:26:00.001-07:00

This is the portfolio website that I used as a prototype to test how i would potray my work. Not only showing the websites I have done but selling my designs to future cilents. I began like before by going through everypage and beta testing the pages looking at the navigation and quality of the visuals and content. I started by adding a few animations and motion tween to specific pages. Making subtle changes that made the pages more interesting to the browser. The next change I made was transforming the work done page. I perviuosly had screenshots of the designs I had done with a small caption of writing. I developed the page into a gallery with icons to flick through my work. This made the page stand out more visualy and gave the browser control over what they want to view within the work done section. I also added three social icons to the footer of the contact page. For other methods of contact and viewing other content. After making these few changes and adjustments to the home icon position and padding of divs. I began testing the amendments on all browsers, such Google Chrome, IE9 and Firefox. I then finalised the design by Validating and checking it a final time to ensure it runs smoothly.

New Portfolio Design

2011-09-21T05:26:00.000-07:00

Here is the first intail idea that I drew up.

My New portfolio design
This is the wireframe for my portfolio website. I developed this design from numerous sketches and hand drawn wireframes. Which ended with this as the final product. I intend on turning this graphic wireframe into a fully functional home page for my website. It consists of a box style toolbar that spreads across the header of the page. Which will have an animate mouce over effect for the text and links. Whilst having a Jquery sliding gallery below with a reel of my own illustrations and imagegry. I believe once completed and finalised the piece will speak for its self with bold imagergy, strong graphics and easy navigation whilst being fit for purpose.

Below is what I developed from the first wireframe to create my new portfolio design.

Portfolio Navigation

2011-09-21T05:25:00.000-07:00

Typeface Wireframe Designs

2011-09-21T05:24:00.000-07:00

Comic Style Wireframe

2011-09-21T05:22:00.000-07:00

Floral illustrations

2011-09-21T05:19:00.000-07:00

Here are few different floral patterns I have created.

Illustrative Wireframe

2011-09-21T05:18:00.000-07:00

Mobile Website for android and Iphone

2011-09-19T06:56:00.000-07:00

I have made anbd developed an Iphone/ Android based website. I created the coding and made back up lines with the iphone and Android Icons saved. So when in use it looks proffesional and functions effortlessly. I used a iphone simulator to test it called Xcode 4 which is Apples development enviroment for creating Apps for Mac, Iphone and Ipod. Xcode Includes Xcode, IDE instruments and the simulator to help test and design. In this process I created a simple index page from an idea. Which I developed into a few pages. From this I added the graphics and tested it not only on the Xcode 4 but on Google chrome and Internet explorer. Below Is a few screen shots of the product. In the design process I started it the same as a normaly webpage in dream weaver. Structuring the site as normal with exceptions for the start up code for Jqtouch that sets icons and start up screens. All of these steps where straight forward and done following the step by step guide creating this Iphone/ Android mobile application.

People per how (website)

2011-09-19T06:36:00.001-07:00

This is a useful website I found that is designed to hold jobs that can be bidded on by freelance designers to ethier gain experince or just add too their exsiting portfolio. You are competing against other designers but it is a great website to get your foot on the ladder and gain an insite into the industry.

QR tag (Quick Reponse code)

2011-09-19T06:33:00.000-07:00

A QRtag or Quick Response code is a twodimensional barcode. These are often used for adding web links to a printed page. When scaned using a web cam or mobile phone camera, the QR reader application can take you to a Web site, a YouTube video or some other web content. QR codes are an easy way of sending people to a site without having to type a URL
Also QR tags can be used for containing other information such as;
A QR code on a business card can contain an electronic version of the contact information. Scan the code and the reader application adds the contact to your address list.
A QR code can contain event information. Scan the code on a poster for a concert and the app automatically adds its name, date and location to the agenda on your smartphone or PC.
A QR code can contain an SMS with phone number and text. Scan the code and the scanning app lets you automatically participate in some contest to win fabulous prices.
A QR code can contain an e-mail message with a subject and message text. That message can be a request for information so that in return you might get a reply email with additional information and attached files.
A QR code can contain a geographical location. Scan the code on a poster advertising for a restaurant and its location becomes available to your navigation software, informing you how to get to that place.
WIFI configuration data.
These are many of the Uses a QR tag can have, I have been researching into QR tags to try adding one myself to my website. At the moment it is early days and Im still decied what to use it for and how to make it. I have found a website that you can create a QR tag for free online but personally I would like to have a look at the coding and see how it works and possibly try it myself.
Here is a useful link : http://www.qrtag.net/create

Across All platforms

2011-09-19T06:18:00.000-07:00

I tested a turtorial I found that makes a mobile site work across most platforms, targeting a larger market. In this turtorial I achieved a mobile website that uses lines of J query code to make it work on all devices giving that freedom to the browser. The turtorial also helped me grasp how to create a simple but effect mobile website. This is one of the first proper mobile interfaces I have made that isnt just a side site from the main one. I even made the effort to add a specific code whilst using percentages within the design to resize the application so it works on tablets too.Below is a screenshot of the intail homepage and the contact page, with the contact form.

Tools of Trade - Web design

2011-09-19T06:05:00.000-07:00

Below I have listed a range of different tools, methods and vices used within webdesign.
HTML 5 - html5 is the succesor to XHTML1.1. HTML 5 is going to revolutionise the web. It is an extension of HTML4. Html itself is the language that powers the web. The code its self literally marks up the contnet that is presented on every page. HTML stands for hyper text markup langauge. It was developed as a simple language to link text documents together. HTML3 and HTML4 lost there way and allowed developers to specify colours, fonts and other visual content in the markup. This made the code especially messy. With HTML5 and XHTML readressed this by sperating design from content. Instead using a style sheet to add the visuals. HTML5 goes far beyond XHTML with mark up and new tags such as articles, stories, asides, headers and footers- and much more. For the first time web designers can truly mark up their code in such a way that the code can describe the code within properley. This allows search engines to quickly establish the content of a page, and therefore return more accurate results. Also allowing develops to reduce the amount of code they need to write. HTML5 being the future to webdesign and a great addition in developing the website, with most browsers surporting it.

Css3 - Css is an acronym for Cascading Style sheets. This is what makes and is used to create the webpages visualy appealing. Originally webdesigners wrote the code and embeded it straight into the HTML but this led to very heavy code with confusing markups in pages. Css was the solution to the problem allowing the content to be sperate from the deign. Each element in the page can be targeted from CSS and a series of visuals.

Dreamweaver- Dreamweaver is the web design and development tool .Originally the product of Macromedia. Recent versions produce clean code that works well. As well as the ability to edit HTML, CSS, javascript and server side code, other built in functionality includes testing live server and allowing to constanly check the site through any browser in design view.

Javascript- Scripting language that incresingly powers the special user interactions and effects that are on the web. Javascript is now the most popular scripting language within the web. The most advanced user interactions that arent created using flash or sliverlight where powered by javascript. The language allows the developer to respond to user interaction and change elements on the page, from visual characteristics such as width, height, background colour and so on to position visabilty and contents.

wordpress-It is a content management system on the web. The system uses a template scvheme to publish content. This templating system allows the developer to create any number of different looks for a wordpress powered website, all thwe while maintaining the content seperately from the design.

PHP- PHP is a server side language that enables more complex computing that can be achieved server side only. The acronym stands for Hypertext Preprocessor, but originaly stood for Personal Home Page. The code itself is quick to develop and deploy, while retaing full power of a desktop programming language.

MySQL-MySQL is a open source database server.It doesnt have any direct user interface being a relationship database.

Joomla
Joomla is a content management system that is competor of Drupal.

Drupal- This is a free content management system written in PHP. It contains the core features as all common CMS platforms, including user accounts, menu management, content management, page layout and templating.

Flash-Is a multimedia object designed to sit within a website as a plugin or embeded.

Social Icons

2011-08-12T08:53:00.000-07:00

I have drawn and designed some sample social icons. I have just made them as drafts, to improve on and develop into my own unique social icons for my portfolio website. So far i have kept the ideas very board trying numerous methods and design techniques creating these simple mock up ideas which will be the starting point for making some new icons of my own. So far I have found that social icons stick to a simple but effective approach with little details that adapt to there specific genre or criteria.

Pit and Pendulum Development Evaluation

2011-08-12T08:51:00.000-07:00

I have spent some time beta testing my website and being critical on what improvements could be made. I started by making a list of points I wanted to change to make the website look and function better. I added a copyright protection to the home page to protect the content, but also make it more professional looking and functional. I also added a Facebook social icon with working link to the contact page to give an extra feature for the social side of the website. Giving the browser that extra information. The last tweak I made was deleting the line of coding that made the links change a purple colour after use. Overall after making these minor changes I believe it has made it overall look and work better. The final change was organising all the files and documents making it easier in the future for further adjustments if needed. The finalisation of the website included me checking it on Internet explorer, Google chrome, and Firefox and validated it on W3schools.

Diesel website

2011-08-12T08:42:00.000-07:00

I like this site for its bright colours and originality. The bright colours and bold imagery doesn't clash but in fact complements each other. This is a flash based website and one of the most interactive sites I have visited. It is a well structured site with multiple layers with imagery that interacts to the mouse crusor. Each image on the comic strip style page interacts differently either expanding across the page to overlap other parts or changing all together. Overall this site works well and not only fits the comic/ super hero style design but uniquely fits the criteria of the diesel clothing line. Below is a series of screenshots from the website and some annotations.

The main homepage

Below is the side panel that slides across for an alternative navigation.

Parallax scrolling with Html5 and css3

2011-08-12T08:37:00.000-07:00

The method is that each panel has a fixed width and height , and contains between six and 12 layers. A layer is either a transparent PNG (larger than the panel) or a speech bubble. The movement of the mouse moves the layer on both X and Y axis with a jquery easing effect, according to speed and direction parameters. The parallax effect is triggered by each layer having different parameters.
Technique
1. In dreamweaver I created a HTML5 page and started by creating an area to fill with multiple background images. For this I made a simple div container.
code:

id="scroll"> box

2. Then I set the style.
.parallax {
width:400px;
height:180px;
padding:10px 10px 10px 10px
background-colour:#a0e0ff;
background-image:url (tree.png),url(ground.png),url(clouds.png),url(sky.png);

3.The finishing styling to the div.
background-position:0 0, 0 0, 0 0, 0 0;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x,
}

4.The javascript.
< script type="text/ javascript">
var clouds_x =0;
var ground_x =0;
var tree_x=0;
function animate(){
clouds_x = clouds_x - . 2;
tree_x = tree_x - .7;
ground_x = ground_x - .5;

5.Final code
Document .getElementById
(' scroll').style.
background Position =
tree_x+'px 0, '+ground_x+'px 0,
'+ clouds_x+'px 0, 0 0';
t= set Time out ('animate() ' , 10);
}
animate();

Web design- creative to master the web(magazine)

2011-08-12T08:34:00.000-07:00

This is a magazine I just recently bought that gave me a lot of knowledge and inspired new ideas. It includes lots of techniques and useful tutorials. There is specific sections that have helped me to create some useful additions to my websites. Also trying out furhter examples and making prototypes. Looking specifically into the HTML5 tags and CSS3. This magazine is more a text book of web design. It has helped me progress into this field and gain a better understanding.

Portfolio - Pieoneers

2011-08-12T08:31:00.000-07:00

This website is a portfolio website and is good but has its faults. As a few of the links don't link to the correct pages. With some of the pages having to be refreshed. To solve the problem in some cases to recover the contents. The reason I wanted to write about this site was because of the bright colours and bold illustrations. I loved the use of hand drawn bright exstravaggent imagery. This not only looks good but sells the sight and makes it stand out from the rest. I would like to give my website this Unique selling point, whilst showing my own design flare and creating a website that's fits the criteria and meets the goals of the audience. Below is the home page with the illustration that drew me to the website.

Claire Coullon-portfolio site

2011-08-12T05:31:00.000-07:00

This website is a simple/subtle portfolio website with some complex functions. The graphics are smooth and subtle having a perfect flow throughout the website whilst the colours complement the design and make the images stand out. The main homepage consists of a simple structured layout with the main focus a sliding Jquery gallery that discreetly changes image every few seconds. The other thing I like about the page is the block toolbar at the top that is made up of five blocks each with a title. Interaction with the set of sub links makes them fade into existence to allow you to navigate through the site more precisely. This is done with a simple image with downwards arrow key implying the box has more to reveal too the browser. Throughout the other pages the structure sticks to the theme of the homepage alternating the image slider for the specific pages content, most of the time with a photo/ illustration to the left with a caption describing it to the right. I really like the graphics behind this site and the fact it captures simplicity whilst being effective visually and fitting the correct criteria of its market audience.

The AJC website

2011-05-27T09:56:00.000-07:00

We have managed to get the whole site up and running with everything looking good whilst containing all the correct content. The only issue we have had is a couple of the pages are still a working progress due to the volume of the wesite and amount of content. Apart from this we will carry on to finish these few pages even though the site has been handed in.