In this assignment I set myself the task of learning the basics of the Adobe Flash program. On looking back to my SMLP (Self Managed Learning Plan) I am going to now assess how successful I was in completing this task.
When I set out on this project I had never before even opened the Flash program so I was a novice to say the least.
What I felt I needed to do in the first instance was to understand the capabilities of Flash as I couldn’t design something in Flash without knowing this.
What I had to do to understand what it was capable of was to look at existing examples of it. One place that I looked, which came recommended was http://www.thefwa.com/ which had what is considered to be the best uses of Flash on the internet. When I looked at this site I couldn’t help but be inspired, but at the same time a bit boggled, at the ability of some of these sites creators. In addition to looking at this site I also looked to http://www.bestflashanimationsite.com and http://weblogs.macromedia.com.
Once I had given myself this time to research what I potentially could achieve (in future) I felt more equipped to then given myself a smaller goal to get me off the starting block.
At this point I was on track with my SMLP and was keeping to the schedule, I had allotted myself one week approximately to complete this section so I was pleased that I had appropriately identified how long this should take.
The next thing I needed to do was to complete some tutorials so that I could pick up some basic understanding of the Flash interface and become familiar with the words and phrases associated with the program.
To do this I looked to the Flash program itself for in built tutorials but in addition I looked on the internet at sites such as http://www.kirupa.com.
At first I found Flash very difficult to understand as it was introducing me to terms I had never heard before such as ‘Tweens’ (a motion animation) and FMA (flexible messaging area). In addition to this there were multiple layers to create animations on and ‘keyframes’ (points in the timeline in which a key event will occur) to be inserted and the whole thing took place on a ‘Stage’ (the working area).
All of these terms are now familiar to me but initially it is very difficult to understand and what I found most difficult is that many tutorials are written assuming you understand all of these terms. Luckily the tutorials built into Flash have a much smoother learning curve and I found that I much preferred these tutorials.
For this element of my SMLP I had given myself two weeks to complete it making use of class and self study time. Unfortunately I had not estimated this correctly as the time spilled over to a third week to complete tutorials as didn’t feel I had enough understanding. What I feel contributed to this was that I was held up by trying to produce a web page that held all of my written documentation, I had tried to put this together in class and this had eaten away at my tutorial time.
The next thing I needed to do was to complete a web plan. I had chosen for this assignment to produce a site for somebody other than myself to make the projects end product more purposeful. In addition it gave me a small taster of what it would be like working for a client. As I decided this at short notice I used a recently qualified Photographer friend of mine as my guinea pig.
To be able to create the web plan I needed to know what my client wanted in her website and so I created a scoping document. This was a document to ask probing questions and find out colour schemes, target market and the purpose of the site.
On doing this I was provided with all the relevant details to then create my web plan and it made the job much simpler than in the past.
When I came up with my initial Screen design my client was very happy with it as it was a direct interpretation of what had been asked for, however I wasn’t completely satisfied with the design and after feedback with fellow students decided to redesign it. On doing this the client was also much more impressed with the redesign and so I was able to press on with my new improved design.
The time allotted to this exercise in my SMLP was one week using class and self study time (sixteen hours) I had eaten into this time already because of not finishing my tutorials when I had originally proposed. Fortunately I had overestimated in this department and instead of needing the full time I was able to finish it in eight hours initially. However because of the later decision to re-design I did end up going over again.
I was then able to start production Initially I had allotted fourty hours to this section of my SMLP but this had now almost been cut in half by other areas of my plan taking longer than expected.
When I first decided I wanted to use Flash for this project one of the factors was that I wanted to make images open in a method I had seen on the web already. What I found out after I started the project was that this was a method called ‘Lightbox’. I wanted to incorporate this into my page also http://www.huddletogether.com/projects/lightbox2/.
A major problem that I did have now was that once I had built all my elements for my webpage I realized that it was actually quited a difficult layout that I had given myself and so much of the time I was using in class in the penultimate lesson was eaten up by trying to correct my HTML and CSS coding to make my site work correctly. After class this still wasn’t working correctly and so I consulted Web Standards Solutions in which I immediately found the problem and my 2 collumn layout code had been over complicated and I just needed to slim this down, I had put in ‘clear’ which wasn’t needed I had just needed to use ‘floats’ and ‘margins’.
When it came to actually producing the Flash elements of my page I felt really quite confident at this stage and when I produced the border of my page in lights I did this without any aid at all.
The Slideshow I produced however was done using a tutorial but this went very smoothly. http://www.flashvault.net/tutorial.asp?ID=118
Towards the end of the project my biggest concern was making the site validate in HTML. I had thought this would have been simple as I had not used flash before. What I soon realized was that the Flash code was not compliant with web standards.
To resolve this I looked at the ‘Satay’ method which involved altering your Flash code, unfortunately I felt it was too late for this as I had all my elements finished. http://www.alistapart.com/articles/flashsatay/
What I decided to go with was the UFO method which alters the way in which the Flash components are embedded in your HTML document. This was very difficult to get a grip with and it took up a whole day making this work.
http://www.bobbyvandersluis.com/ufo/index.html
In addition to this I also learnt a very basic piece of PHP which I didn’t set myself to do but I thought would be good to have a taste of. I completed a tutorial and I am pleased to say that the PHP on this site is in working order.
http://www.kirupa.com/web/php_contact_form.htm
Overall I feel that the project has been a success, I feel that my initial SMLP was well thought out and that I had included everything in it that I needed to achieve. I feel that the only reason for me being of schedule is due to personal choices that have been in error such as my attempt to make my own site to hold my written documentation. This information in now in a blog instead which I think is a much more appropriate place.
I feel that I have benefited from writing the brief myself, I think because I wrote the document I was aware all along of what exactly needed to be done and when. When the brief is given to you by somebody else then it is more difficult to remember everything required with referring back.
I think that the SMLP has also made me more aware of thinking about how long tasks take to complete.
I am very pleased with my end product and am happy to say that I met all the goals set in my SMLP and that the site validates in both HTML and CSS on the W3C site.
Wednesday
Tuesday
Competetive Analysis
1. http://www.123photography.co.uk/indexportraits.html
This is one of the top sites that comes up when I search for a portfolio photographer in Yorkshire. This would be one of the competitors as this site offers a many different types of photography including Glamour, which would be the market Laura Bainbridge would be aiming for.
The sites appearance is quite corporate and the layout is rather cluttered. There doesn’t look to be too much thought to have gone into the layout and for a photography site there appears to be quite a lot of text.
The layout and links are not clear. The main navigation at the top are obvious enough but aren’t particularly attractive to look at and look quite amateurish.
Having clicked onto the Glamour Photography Portfolio to look at the gallery I am navigated to a page with different layout to the main pages which is a design floor. Clicking the images makes them open up in a new window.
I feel that this site would have benefited from having a more regimented layout that was consistent throughout. I don’t think it is a bad thing that the images open in a new window but I think there are more attractive ways of doing this, such a using Lightbox.
2. http://johngardnerphotography.com/portfolios.htm
This site has some really great examples of work and the initial impression I got from the site was a professional one. On further investigation it is clear that the design of the site has errors.
A brisk flick along the top navigation bar highlights the errors with the sites layout; certain pages have a completely different banner that is a totally different size to the others. Even the pages that have a banner that is the same size all have a different image behind the banner which again provided problems with consistency.
In addition to the banner problem the pages with the smaller banner also are wider and the navigation shifts position also. This gives the impression that you have left the site and I was inclined to press the back button to get back to the site rather than use the navigation links available.
The thing that the two sites so far have in common is that they have examples of more than one genre of photography which is broken up into categorys. As for this project I am aiming to make a small site I will only be displaying one genre of photography on the site. Laura Bainbridge has provided photos of different genres but as there will only be one gallery I wouldn’t want it to look confused.
Overall the work on the site is strong and some of the design elements are nice, such as the banners, unfortunately the whole thing is let down by inconsistency.
3. http://www.imagemaker.org.uk/index.html
This is my favourite site so far. The look of the site is by far the most professional and slick in regards to design. The navigation is clear and the content is primarily kept down to the photographs which I think is a bonus.
One thing I would point out about the navigation is that when on the home page you are presented with a set of images which are the navigation and unfortunately there are no words to support the images. The result of this is that you don’t actually know for certain where the link will take you. You are able to hazard a guess by the look of the pictures but it isn’t made clear until you actually go into the page.
Another area where this site is better than the others is the way in which it displays the photographs. On this site the pictures are presented in a square and so are all neatly presented are within a bounding grid. Clicking on the image you want to view then makes it appear in the box to the left.
This is something I would like to incorporate into my design to allow the audience to view the photographs without navigating away from the page within which they thumbnails are contained.
Overall I think this a really successful site with little wrong with it and I would hope that I can make a site with a similar amount of functionality.
This is one of the top sites that comes up when I search for a portfolio photographer in Yorkshire. This would be one of the competitors as this site offers a many different types of photography including Glamour, which would be the market Laura Bainbridge would be aiming for.
The sites appearance is quite corporate and the layout is rather cluttered. There doesn’t look to be too much thought to have gone into the layout and for a photography site there appears to be quite a lot of text.
The layout and links are not clear. The main navigation at the top are obvious enough but aren’t particularly attractive to look at and look quite amateurish.
Having clicked onto the Glamour Photography Portfolio to look at the gallery I am navigated to a page with different layout to the main pages which is a design floor. Clicking the images makes them open up in a new window.
I feel that this site would have benefited from having a more regimented layout that was consistent throughout. I don’t think it is a bad thing that the images open in a new window but I think there are more attractive ways of doing this, such a using Lightbox.
2. http://johngardnerphotography.com/portfolios.htm
This site has some really great examples of work and the initial impression I got from the site was a professional one. On further investigation it is clear that the design of the site has errors.
A brisk flick along the top navigation bar highlights the errors with the sites layout; certain pages have a completely different banner that is a totally different size to the others. Even the pages that have a banner that is the same size all have a different image behind the banner which again provided problems with consistency.
In addition to the banner problem the pages with the smaller banner also are wider and the navigation shifts position also. This gives the impression that you have left the site and I was inclined to press the back button to get back to the site rather than use the navigation links available.
The thing that the two sites so far have in common is that they have examples of more than one genre of photography which is broken up into categorys. As for this project I am aiming to make a small site I will only be displaying one genre of photography on the site. Laura Bainbridge has provided photos of different genres but as there will only be one gallery I wouldn’t want it to look confused.
Overall the work on the site is strong and some of the design elements are nice, such as the banners, unfortunately the whole thing is let down by inconsistency.
3. http://www.imagemaker.org.uk/index.html
This is my favourite site so far. The look of the site is by far the most professional and slick in regards to design. The navigation is clear and the content is primarily kept down to the photographs which I think is a bonus.
One thing I would point out about the navigation is that when on the home page you are presented with a set of images which are the navigation and unfortunately there are no words to support the images. The result of this is that you don’t actually know for certain where the link will take you. You are able to hazard a guess by the look of the pictures but it isn’t made clear until you actually go into the page.
Another area where this site is better than the others is the way in which it displays the photographs. On this site the pictures are presented in a square and so are all neatly presented are within a bounding grid. Clicking on the image you want to view then makes it appear in the box to the left.
This is something I would like to incorporate into my design to allow the audience to view the photographs without navigating away from the page within which they thumbnails are contained.
Overall I think this a really successful site with little wrong with it and I would hope that I can make a site with a similar amount of functionality.
Delivery Requirements
XHTML 1.0 Strict
XHTML will be used to make the structure of my site and hold the content. The content will be in ‘Divs’ and I will use CSS to then arrange my divs and control the design and look of the site.
CSS 2.1
I am using CSS to keep file sizes lower and coding faster. CSS will provide a better result in search engines and help to adhere to the W3C guidelines 1.0. I will use CSS 1 and CSS 2 as they are the most widely supported versions in current browsers.
Flash
When I am using Flash to produce elements of my web page I will be using Flash CS3. Should the elements produced contain actionscript it will be implemented in Actionscript 3.0 as this is the latest version of the language which is supported in Flash Player 9.
PHP 5
PHP 5 will be used if I am to use a form element. I am using this version of PHP as this is the latest version that is supported by my web host. I will also use PHP to enable people to contact my client.
XHTML will be used to make the structure of my site and hold the content. The content will be in ‘Divs’ and I will use CSS to then arrange my divs and control the design and look of the site.
CSS 2.1
I am using CSS to keep file sizes lower and coding faster. CSS will provide a better result in search engines and help to adhere to the W3C guidelines 1.0. I will use CSS 1 and CSS 2 as they are the most widely supported versions in current browsers.
Flash
When I am using Flash to produce elements of my web page I will be using Flash CS3. Should the elements produced contain actionscript it will be implemented in Actionscript 3.0 as this is the latest version of the language which is supported in Flash Player 9.
PHP 5
PHP 5 will be used if I am to use a form element. I am using this version of PHP as this is the latest version that is supported by my web host. I will also use PHP to enable people to contact my client.
Target Audience
Kate is an 18 year old female Fashion student who has recently started her study at University. Kate is an attractive girl and has aspirations of working part time as a model whilst she studies and is supported by her parents, she has no previous experience. Whilst study she works part time at Top-Shop doing 15hrs per week at £6 per hour. In addition to working she has a student loan of which she receives £3k per academic year. She is experienced with her use of the internet as she has grown up using it quite regularly to send emails and chat online, more recently she has used it to access online profiles such as ‘Facebook’. Kate accesses the internet daily to check her profile and to chat to friends, access is mainly recreational but she also uses the internet to carry out research for her degree in Fashion. Kate is living in Halls of residence and so access the internet from her university building and in the university library. The university offers use a modem and has an 8mb broadband connection, internet explorer 7 and a 17” monitor. She enjoys socialising, movies and reading in her spare time. Kate visits ASOS, River Island and Office to shop online making one purchase every 2 weeks.
Simon is a 25 year old male who works full time in customer service. Outside of his role in customer service he is signed up with a local model agency that spotted him whilst he was out shopping. Simon earns a basic salary of £18k per annum but with his bonuses he usually tops this up to around £22k. Simon is between novice and experienced with internet use and accesses the internet for an average of an hour per day to use email and look at online profiles. Simon uses the internet at work which has a 17” widescreen, broadband connection and uses Internet Explorer 7 Simon currently doesn’t have internet access set up in his rented flat where he lives with a flatmate. Simon enjoys socialising, Music, Football and Technology and also likes to play computer games. He is very fashion conscious and always makes an effort with the way he looks. Simon visits sites such as Play, BBC Sport and Top-Man and makes an average of one online purchase per month.
Simon is a 25 year old male who works full time in customer service. Outside of his role in customer service he is signed up with a local model agency that spotted him whilst he was out shopping. Simon earns a basic salary of £18k per annum but with his bonuses he usually tops this up to around £22k. Simon is between novice and experienced with internet use and accesses the internet for an average of an hour per day to use email and look at online profiles. Simon uses the internet at work which has a 17” widescreen, broadband connection and uses Internet Explorer 7 Simon currently doesn’t have internet access set up in his rented flat where he lives with a flatmate. Simon enjoys socialising, Music, Football and Technology and also likes to play computer games. He is very fashion conscious and always makes an effort with the way he looks. Simon visits sites such as Play, BBC Sport and Top-Man and makes an average of one online purchase per month.
Goals
• To design a site that meets with the W3C guidelines for accessibility.
• To create a website in XHTML 1.0 strict that validates.
• To use Flash in the design of the page.
• To produce a web page that is appropriate to the target market.
• To create a website in XHTML 1.0 strict that validates.
• To use Flash in the design of the page.
• To produce a web page that is appropriate to the target market.
Subscribe to:
Posts (Atom)
