My project for this unit did not involve a lot of graphical content. So as far as copyright issues I could get away with creating my own graphics, but they were recreation of existing graphics that I found during my research.
My project was mainly interactive, so much of my time was spent learning actionscript. The main source of this code was from tutorials online. While the authors of these tutorials crated the code I had to modify it to suit my project. At no stage did I come across a tutorial where the author asked to be referenced.
As i said before my project was not graphically intense. With other projects that I have completed at university I have used content that I have found online and used those images, or part of them. I try to reference them as much as possible, but for many things the original author/artist's name was not available.
I guess my justification on using these images is that I am learning to be a designer, and that my projects are not in the public domain, yet. I will however have to redo some of my content when I publish this content on my online portfolio.
Sunday, November 7, 2010
Heirachy of Needs
For my Hierarchy of Needs I will focus on my Martin the Monkey Website.
Functionality
Does my Martin the Monkey website perform its basic function? The brief stated that the website had to be a promotional tool for the toy as well instructional guide as to how to use the toy. In my opinion the website did this very well. In collaboration with my other group members the website had information on how the toy worked, had an example of a child using the toy as well as promotional materials such as posters and box designs.
Reliability
With the high level of interactivity needed for this site I had to build it entirely in Flash. This gave me the ability to merge moving backgrounds and video animations within the same page. This was because external shockwaves were loaded into the site. This method meant that once the site had loaded there is no need to load any more pages, which helped the user (child ) immerse themselves in the experience.
With multiple testing and the use of robust actionscript code I did not come up against any reliability issues regarding this site
Usability
Usability was focused around the fact that the toy was aimed at children from ages 5 to 12. It was assumed that both the children and their parents would be the primary users of the site.
With this audience in mind we kept the navigation structure very shallow. We also extended the background on the left and right side. The background moved with the position of the mouse and it was automatic, this gave a clue to the user that their was extra content available.
Video content was displayed through clicking a link. It was designed to play automatically with no controls available to the user.
Buttons were large and animated so the user could d recognise them, as well as appearing in a constant position at the top of the page.
Proficiency
Would a child be able to use the toy that we created better after experiencing our website than before? In my opinion, yes. Instructions on how the toy worked and its purpose was also combined with an animation of how a child could use the toy.
Creativity
With all of the other needs fulfilled it leaves the creativity of the design. The sliding background wasn't in my original concept design for this site, but it was introduced after i realised that there wasn't enough space on one page to fit all of the interactive hotspots.
The use of external shockwaves was introduce to compartmentalise the content of the site. this meant that each group member could work on their individual parts of the project without relying on others.
Overall I thought that my group produced a very creative toy that was reflected in the website.
Functionality
Does my Martin the Monkey website perform its basic function? The brief stated that the website had to be a promotional tool for the toy as well instructional guide as to how to use the toy. In my opinion the website did this very well. In collaboration with my other group members the website had information on how the toy worked, had an example of a child using the toy as well as promotional materials such as posters and box designs.
Reliability
With the high level of interactivity needed for this site I had to build it entirely in Flash. This gave me the ability to merge moving backgrounds and video animations within the same page. This was because external shockwaves were loaded into the site. This method meant that once the site had loaded there is no need to load any more pages, which helped the user (child ) immerse themselves in the experience.
With multiple testing and the use of robust actionscript code I did not come up against any reliability issues regarding this site
Usability
Usability was focused around the fact that the toy was aimed at children from ages 5 to 12. It was assumed that both the children and their parents would be the primary users of the site.
With this audience in mind we kept the navigation structure very shallow. We also extended the background on the left and right side. The background moved with the position of the mouse and it was automatic, this gave a clue to the user that their was extra content available.
Video content was displayed through clicking a link. It was designed to play automatically with no controls available to the user.
Buttons were large and animated so the user could d recognise them, as well as appearing in a constant position at the top of the page.
Proficiency
Would a child be able to use the toy that we created better after experiencing our website than before? In my opinion, yes. Instructions on how the toy worked and its purpose was also combined with an animation of how a child could use the toy.
Creativity
With all of the other needs fulfilled it leaves the creativity of the design. The sliding background wasn't in my original concept design for this site, but it was introduced after i realised that there wasn't enough space on one page to fit all of the interactive hotspots.
The use of external shockwaves was introduce to compartmentalise the content of the site. this meant that each group member could work on their individual parts of the project without relying on others.
Overall I thought that my group produced a very creative toy that was reflected in the website.
80 / 20 Rule
The 80 / 20 rule is also known as the Pareto principle and in essence says that 80% of effects come from 20% of causes. It can also be applied to websites, where 80% of activity can be tracked down to just 20% of its content.
For my Internet Design 291 project I had to produce an 8 page website on coffee. The site was designed to show people how to have cafe quality coffee in their own home. The content covered the whole process from buying the coffee, grinding the coffee, coffee machines to use and even the different styles of coffee they can make.
Pages included
In order to satisfy the assignment requirements I needed 8 individual pages , as well as 1500 words. On reflection these requirements don't lend themselves to adhere to the 80 / 20 rule.
If I was to rebuild this assignment for a real client I would probably focus on the fact that if I wanted to know how to make coffee, I would probably want it all on one single page. In this project the process is spread out over 6 pages. To apply the 80 / 20 rule to this site I would have the most important part of the content on two main pages, with the rest of the content still available but by the way of secondary navigation pages.
This would make the site a lot leaner in the navigation structure and locate the important content on the home page of the site. By applying the rule it shpould make the site more appealing to first time visitors and increase the ratio of users who stay and use the site.
For my Internet Design 291 project I had to produce an 8 page website on coffee. The site was designed to show people how to have cafe quality coffee in their own home. The content covered the whole process from buying the coffee, grinding the coffee, coffee machines to use and even the different styles of coffee they can make.
- About Coffee
- Coffee Beans
- Coffee Grinders
- Coffee Machines
- Coffee Styles
- Coffee Equipment
- Troubleshooting
- Links
In order to satisfy the assignment requirements I needed 8 individual pages , as well as 1500 words. On reflection these requirements don't lend themselves to adhere to the 80 / 20 rule.
If I was to rebuild this assignment for a real client I would probably focus on the fact that if I wanted to know how to make coffee, I would probably want it all on one single page. In this project the process is spread out over 6 pages. To apply the 80 / 20 rule to this site I would have the most important part of the content on two main pages, with the rest of the content still available but by the way of secondary navigation pages.
This would make the site a lot leaner in the navigation structure and locate the important content on the home page of the site. By applying the rule it shpould make the site more appealing to first time visitors and increase the ratio of users who stay and use the site.
Wayfinding
Wayfinding is used to help the user navigate from one position to another, either tin the real world or the virtual world.
Good design lets the user know where they are, where they can go and the path or route to take to get there. For this principle I will discuss the Martin The Monkey website developed for the group assignment in Multimedia Design, Interdisciplinary practice.
The project was focused on the promotion of a toy that we developed as a group, in which I was responsible for the website design. Our toy had a back story that included six extra characters, and the website had to be dynamic and interactive for children rather than static for information.
To integrate these characters into the website the links to them were placed throughout the website as hotspots. When the child investigates the site ,which pans left or right depending on the position of the mouse, they find hints and signposts to their location.
One of the characters had a literal pathway to their location, as well as a rollover that hinted they where there. These hints then opened up further information on the individual characters in another part of the jungle world.
On reflection, one principal of wayfinding was missing, and that was the users ability to understand where they are, their location within this world. I had no form of breadcrumbs to show the user where they are and where they had been.
For the user to understand how they can travel to a destination can be easy in an interactive environment. For this project, navigation is performed with the mouse, so the use of rollover effects show the user that there are possible pathways to new information at aclick of the button.
For the user to remember how to interact with the project I used consistent navigation location. The main links to information are always across the top of the page, no matter where they are located as any link opens up an external SWF file within the page.
Overall I feel that the wayfinding within this project was successfully balanced between having very obviuos signs and signals and hiding links within the page to encourage investigation and interaction.
Good design lets the user know where they are, where they can go and the path or route to take to get there. For this principle I will discuss the Martin The Monkey website developed for the group assignment in Multimedia Design, Interdisciplinary practice.
To integrate these characters into the website the links to them were placed throughout the website as hotspots. When the child investigates the site ,which pans left or right depending on the position of the mouse, they find hints and signposts to their location.
One of the characters had a literal pathway to their location, as well as a rollover that hinted they where there. These hints then opened up further information on the individual characters in another part of the jungle world.
On reflection, one principal of wayfinding was missing, and that was the users ability to understand where they are, their location within this world. I had no form of breadcrumbs to show the user where they are and where they had been.
For the user to understand how they can travel to a destination can be easy in an interactive environment. For this project, navigation is performed with the mouse, so the use of rollover effects show the user that there are possible pathways to new information at aclick of the button.
For the user to remember how to interact with the project I used consistent navigation location. The main links to information are always across the top of the page, no matter where they are located as any link opens up an external SWF file within the page.
Overall I feel that the wayfinding within this project was successfully balanced between having very obviuos signs and signals and hiding links within the page to encourage investigation and interaction.
Progressive Disclosure
Progressive Disclosure is used to display a large quantity of information over multiple screens. By doing this you don't expose the user to an overwhelming amount of information at once.
A typical example of this would be an ATM. The user is guided step by step through the process of withdrawing money. You first enter your pin, then select an account and so on. Each screen only exposes the user to one critical function at a time to reduce the complexity of accessing your bank account remotely.
There are a number of functions that can be performed by an ATM, withdrawing, transferring and depositing money. Progressive disclosure only lets the user pick one action at a time and then drills down into the more detailed user tasks.
For my DSR project I created a Social Currency Calculator. The purpose of this was to get the user to enter in particular information regarding their Physical and Social activity over a period of time, and use the responses to calculate how much social capital they generate over the course of the year.
The calculator helped the user through a Linear path of questions. Each question was restricted to one main information collecting screen. This reduced the complexity of the survey for the user.
While filling out the survey progressive disclosure helped focus the user attention on one specific task, rather than being distracted by the other questions that were to be asked.
In retrospect, if I had to redo this application I would have a "more information' link on the individual questions so the user could investigate the reasons behind the survey. An example for Question 1 on the left would be to give the user more information on where or how they could get a membership number in order to complete the form.
If they needed this information it would be a click away, if not it would not clutter the design and overwhelm the user.
A typical example of this would be an ATM. The user is guided step by step through the process of withdrawing money. You first enter your pin, then select an account and so on. Each screen only exposes the user to one critical function at a time to reduce the complexity of accessing your bank account remotely.
There are a number of functions that can be performed by an ATM, withdrawing, transferring and depositing money. Progressive disclosure only lets the user pick one action at a time and then drills down into the more detailed user tasks.
For my DSR project I created a Social Currency Calculator. The purpose of this was to get the user to enter in particular information regarding their Physical and Social activity over a period of time, and use the responses to calculate how much social capital they generate over the course of the year.
While filling out the survey progressive disclosure helped focus the user attention on one specific task, rather than being distracted by the other questions that were to be asked.
In retrospect, if I had to redo this application I would have a "more information' link on the individual questions so the user could investigate the reasons behind the survey. An example for Question 1 on the left would be to give the user more information on where or how they could get a membership number in order to complete the form.
If they needed this information it would be a click away, if not it would not clutter the design and overwhelm the user.
Golden Ratio
The Golden Ratio, or phi, is the ratio between two mathematical values of approximately 1..6180339887. Also known as the Golden Rectangle, it is believed that the dimensions of a rectangle are more aesthetically pleasing if the larger side is 1.618033988 times larger than the smaller side. This diagram represents the Golden Ratio. 
The Golden Ratio is also closely linked to the Fibonacci sequence of numbers, where starting from 0 and 1 you add the previous two numbers to continue the pattern. For example. 0 + 1 =1, 1 + 1 = 2, 1 + 2 = 3, 2 +3 =5 ... The sequence starts with 0,1 2,3,5,8,13,21... If you divide the previous smaller number by the next larger number the figure is 1.618033988.
This ratio is found in Architecture, Music, Painting, Book Design, Industrial Design and nature and is often related to beauty.
For my Zen Garden Assignment in Internet Design 292 I applied the Golden Ratio to my page layout. This technique is also known as the 960 Grid system where the number of Columns you use determine the total width of the page.
Another intriguing pattern to emerge form the Golden Ratio is the geometric spiral that is created by the above drawing. When conceptualising the page layout I deliberately used this diagram as a template for my page layout. Here is a sketch of my early work.
You can see here that i set up the Spiral to converge on my page logo. The area underneath was to be used for the Zen Garden description and the larger area to the right was filled with the main content.
I also broke up the main content area using the Golden Ratio to keep the design consistent.
During the conceptual stage I realised that I needed to deliver a portrait style page design, rather than the landscape I had originally drawn. It wasn't a problem as all I had to do was flip the grid and rotate it 90 degrees and I could still use the layout.
The whole point of using the Golden Ratio was to get constrain the grid design of the web page to specific widths to achieve an aesthetically pleasing result. The following is a screenshot of my final submission. While it was not possible to contain all the information within the original rectangle, the Logo positioning, Grid widths and Column splits are all results of this design formula.
Subscribe to:
Posts (Atom)