Voyage Presentation
View more presentations from sarahandhollie.
Friday, 9 December 2011
Finished Second Term :)
Finished my voyage & presented it to the class today. Now 3 beautiful weeks off for christmassssssssssssss :)
Constantine & Lockwood.
DP3 – Voyage Evaluation.
My brief was to create a 5 page website, validated to WC3 standards and includes at least 3 interactive JavaScript routines that enhance the interactive experience.
I brainstormed a few ideas together for a theme; learning to drive, Thailand, birth to adult, theme park trip, Zante. I decided to go with Thailand as I personally found it the most exciting and thought I could portray this well into the task set. I needed to be able to tell this theme as a narrative.
The methods I used to develop my ideas can all be seen on my blog posts over the duration of the project. I created wire frames which both looked like simple layouts but with images, backgrounds and text it improved the look. I didn’t want to design anything too complicated that I had to follow as I wouldn’t have been able to follow through with that design, I started with something simple that changed along the way as I got more advanced. I created mind maps to enhance ideas as well as a time chart to allow myself to work to reach the deadline. I also received feedback from my audience and peers which allowed me to improve my work.
Problems that rose for me in this project were that the idea I had, may not have been as great as I thought it was to start with. It was all a very personal experience and found the only thing I could share with this was words put into text and photos – which I worried would become very boring for the audience. The audience being friends and family, as I could keep the page quite informal and more about my holiday than if it was targeted at travellers and students looking to travel. I tried to overcome this with JavaScript to make it more interactive, I did however struggle with using JavaScript and didn’t manage to create as much interactivity as I wanted – such as games to play. Compared to my peers websites I feel mine is very basic however I do feel I have improved on my skills since my last interactive project.
Things I have learnt from this particular project are skills such as using CSS, JavaScript and JQuery which I didn’t use in the first year. As I said I did struggle with some parts of the JavaScript but online tutorials did help me. Looking at other websites really helped inspire me into colours to use, image to text ratio & layout. I think it’s also important to try a few different layouts to see what’s best. For example I tried putting text and images in different places on the page to see what looked best as the final design. Also it was important to check my website worked in all internet pages eg firefox, internet explorer, safari & Google chrome as some people in my group had problems with this - mine works in all.
Personally, I am happy with the final design of this project. However compared to other people in the class I am disappointed with it. I find coding very hard and wish I had skills such as illustrations so I could draw more images and put them into the webpage to make it look more creative. I would like to have another go at this project in my own time to make improvements and would like to change it so it’s a scroll down website, which I think is becoming more popular to use on the web now.
In Terms Of Constantine & Lockwood.
1. The structure principle.
My design is organized in a meaningful and useful way in which the navigation is in order of the places in Thailand visited from dates arrived. Photos and content that relate to each place are on that page and this is very clear for the user to recognise. Things that relate are on the same page, things that don’t relate are on separate pages. I have used cartoon images on each page that for me relate to that part of the holiday, an elephant for Phuket, island for Phi Phi, cocktails for ladyboys and a rain cloud for Bangkok.
2. The simplicity principle.
My design is simple to look at and simple to use. Tasks are simple to do and the website provides good shortcuts that are meaningfully related to longer procedures such as a homepage button at the bottom of each page. The navigation is simple to use, placed at the top and each page is a different link. On reflection I now wish I had used the scroll effect website in which each link on the navigation is just a scroll down. I think this looks more effective and can be used better on tablets than the basic website can.
3. The visibility principle.
This meaning that the design shouldn’t distract the user with too many images, colour of text. Don’t confuse them with unneeded content. I have stuck well to this. There is the same logo throughout the webpage, headings and texts that relate well to the name of each page and a few images that relate to the page such as an elephant for Phuket. I used Adobe Kuler to make a colour chart for a “Thailand Theme.” The colours are very neutral and I think fit in well to the theme of the Voyage. I think I have balanced text to image ratio well & nothing is too overpowering for the user.
4. The feedback principle.
Keeping the users up to date, as it happened in the past this is easy to do whilst creating the site. It is also easy to add bits and pieces in when I want to, or change photos and the design around when I get bored of it. My audience – such as friends and family have seen the website I created and gave positive feedback, if I change the design then I would again ask their opinions and work around the best interest of them.
5. The tolerance principle.
Planning my project well would have meant reducing the cost of making mistakes and errors. The design needs to be flexible and tolerant. Familiarising myself with the software Dreamweaver meant I could test a code out and if it didn’t work be able to undo that without causing any major problems to my webpage.
6. The reuse principle.
My site should be able to let the user reuse the site and each page without having to think how to use it and having to remember what that are looking at exactly. I have clearly stuck to the Thailand theme throughout and the design is simple enough for the user to reuse it without any problems.
My brief was to create a 5 page website, validated to WC3 standards and includes at least 3 interactive JavaScript routines that enhance the interactive experience.
I brainstormed a few ideas together for a theme; learning to drive, Thailand, birth to adult, theme park trip, Zante. I decided to go with Thailand as I personally found it the most exciting and thought I could portray this well into the task set. I needed to be able to tell this theme as a narrative.
The methods I used to develop my ideas can all be seen on my blog posts over the duration of the project. I created wire frames which both looked like simple layouts but with images, backgrounds and text it improved the look. I didn’t want to design anything too complicated that I had to follow as I wouldn’t have been able to follow through with that design, I started with something simple that changed along the way as I got more advanced. I created mind maps to enhance ideas as well as a time chart to allow myself to work to reach the deadline. I also received feedback from my audience and peers which allowed me to improve my work.
Problems that rose for me in this project were that the idea I had, may not have been as great as I thought it was to start with. It was all a very personal experience and found the only thing I could share with this was words put into text and photos – which I worried would become very boring for the audience. The audience being friends and family, as I could keep the page quite informal and more about my holiday than if it was targeted at travellers and students looking to travel. I tried to overcome this with JavaScript to make it more interactive, I did however struggle with using JavaScript and didn’t manage to create as much interactivity as I wanted – such as games to play. Compared to my peers websites I feel mine is very basic however I do feel I have improved on my skills since my last interactive project.
Things I have learnt from this particular project are skills such as using CSS, JavaScript and JQuery which I didn’t use in the first year. As I said I did struggle with some parts of the JavaScript but online tutorials did help me. Looking at other websites really helped inspire me into colours to use, image to text ratio & layout. I think it’s also important to try a few different layouts to see what’s best. For example I tried putting text and images in different places on the page to see what looked best as the final design. Also it was important to check my website worked in all internet pages eg firefox, internet explorer, safari & Google chrome as some people in my group had problems with this - mine works in all.
Personally, I am happy with the final design of this project. However compared to other people in the class I am disappointed with it. I find coding very hard and wish I had skills such as illustrations so I could draw more images and put them into the webpage to make it look more creative. I would like to have another go at this project in my own time to make improvements and would like to change it so it’s a scroll down website, which I think is becoming more popular to use on the web now.
In Terms Of Constantine & Lockwood.
1. The structure principle.
My design is organized in a meaningful and useful way in which the navigation is in order of the places in Thailand visited from dates arrived. Photos and content that relate to each place are on that page and this is very clear for the user to recognise. Things that relate are on the same page, things that don’t relate are on separate pages. I have used cartoon images on each page that for me relate to that part of the holiday, an elephant for Phuket, island for Phi Phi, cocktails for ladyboys and a rain cloud for Bangkok.
2. The simplicity principle.
My design is simple to look at and simple to use. Tasks are simple to do and the website provides good shortcuts that are meaningfully related to longer procedures such as a homepage button at the bottom of each page. The navigation is simple to use, placed at the top and each page is a different link. On reflection I now wish I had used the scroll effect website in which each link on the navigation is just a scroll down. I think this looks more effective and can be used better on tablets than the basic website can.
3. The visibility principle.
This meaning that the design shouldn’t distract the user with too many images, colour of text. Don’t confuse them with unneeded content. I have stuck well to this. There is the same logo throughout the webpage, headings and texts that relate well to the name of each page and a few images that relate to the page such as an elephant for Phuket. I used Adobe Kuler to make a colour chart for a “Thailand Theme.” The colours are very neutral and I think fit in well to the theme of the Voyage. I think I have balanced text to image ratio well & nothing is too overpowering for the user.
4. The feedback principle.
Keeping the users up to date, as it happened in the past this is easy to do whilst creating the site. It is also easy to add bits and pieces in when I want to, or change photos and the design around when I get bored of it. My audience – such as friends and family have seen the website I created and gave positive feedback, if I change the design then I would again ask their opinions and work around the best interest of them.
5. The tolerance principle.
Planning my project well would have meant reducing the cost of making mistakes and errors. The design needs to be flexible and tolerant. Familiarising myself with the software Dreamweaver meant I could test a code out and if it didn’t work be able to undo that without causing any major problems to my webpage.
6. The reuse principle.
My site should be able to let the user reuse the site and each page without having to think how to use it and having to remember what that are looking at exactly. I have clearly stuck to the Thailand theme throughout and the design is simple enough for the user to reuse it without any problems.
Completed Voyage
My finished voyage project, not quite how I would have liked it to turn out but it's okkkk..
Wednesday, 7 December 2011
Javascript
here is a rollover mouse image that changes on the "ladyboy" page for the user to guess what images are ladyboys and what aren't. Image changes to a tick or cross to show if they are or not.
Sunday, 4 December 2011
Voyage, Less Than A Week To Go
Voyage is looking ok. Not the happiest with it but it will do.
Need To:
- Add another element of javascript
- Sort font out
- Check errors
Currently doing evaluation..
Can't wait for this term to be over.
Need To:
- Add another element of javascript
- Sort font out
- Check errors
Currently doing evaluation..
Can't wait for this term to be over.
Friday, 2 December 2011
Going Slightly Better Than Yesterday..
Still not brilliant, very very average but at least I have something & also have 2 bits of javascript so need one more to meet the brief.
Very simple structure & working from that, still have a lot to do, considering there's only a week left.
Very simple structure & working from that, still have a lot to do, considering there's only a week left.
Thursday, 1 December 2011
Mardy
This was how my website looked before I realised a lot of the coding was wrong. It looked crap before I realised
After deleting the code and sorting it out it now looks like this
& I don't know how to go about fixing it and making it look good so i'm starting again using a basic code Shaun put on the Now.
Either going to fail or have the shittest webpage in the class.
This is what I have so far & have a week so make it amazing:
Fantastic
After deleting the code and sorting it out it now looks like this
& I don't know how to go about fixing it and making it look good so i'm starting again using a basic code Shaun put on the Now.
Either going to fail or have the shittest webpage in the class.
This is what I have so far & have a week so make it amazing:
Fantastic
Wednesday, 30 November 2011
Monday, 28 November 2011
Voyage
Hmmm not going too well, I hate my idea, I hate the design of the website & hate how good everyone else is in the class compared to me. Some screen shots of what i've done so far:
Yet to add javascript :(
Yet to add javascript :(
Friday, 25 November 2011
Thursday, 24 November 2011
Accessibility & Validation
Accessibility:
To put the Internet and its services at the disposal of all individuals, whatever their hardware or software requirements, their network infrastructure, their native language, their cultural background, their geographic location, or their physical or mental aptitudes.
Tim Berners-Lee, director of the W.3.C (World Wide Web Consortium)
Accessibility is the degree to which anyone can access and use a website using any web browsing technology. A fully accessible site is one that is designed to make use of the latest web technologies such as multimedia, while at the same time accommodating the needs of those who have difficulty with or are unable to use these technologies.
http://www.rnib.org.uk
http://validator.w3.org/
To put the Internet and its services at the disposal of all individuals, whatever their hardware or software requirements, their network infrastructure, their native language, their cultural background, their geographic location, or their physical or mental aptitudes.
Tim Berners-Lee, director of the W.3.C (World Wide Web Consortium)
Accessibility is the degree to which anyone can access and use a website using any web browsing technology. A fully accessible site is one that is designed to make use of the latest web technologies such as multimedia, while at the same time accommodating the needs of those who have difficulty with or are unable to use these technologies.
http://www.rnib.org.uk
http://validator.w3.org/
Wednesday, 23 November 2011
Monday, 21 November 2011
Voyage
I meant to post these a while ago, my wireframes & ideas for voyage. I've started to code the website now although worried it may just have too many photos, so need to add my javascript etc.
When i've done a bit more to it will post some pictures up.
I am using the colour sceheme from adobe kuler I created but not sure if the colours work too well together:
Friday, 18 November 2011
Marketing Strategy
I have signed up to use Google analytics to see who and how many people are viewing my page.
Here is one for my blog from blogger stats:
JavaScript
JavaScript Events.
When a user causes an event to happen on an HTML page, such as clicking on a link, a piece of JavaScript can be executed. Most HTML tags have certain events that can be used to trigger JavaScript, examples of such events are ‘onClick’ and ‘onMouseOver’. When developing a web page, which uses such events, you need to be careful about compatibility issues as Netscape Navigator and Microsoft Explorer differ in the type of events each HTML tag is capable of supporting.
< a onClick="document.write('you clicked me!');">click here< / a >
< html >
< body >
< img src ="Img/elep.jpg" name="elephant " onmouseover="document.images['elephant'].src='Img/elep.jpg';" onmouseout="document.images['elephant'].src='Img/monkey.jpg';">
< /body >
< /html >
When a user causes an event to happen on an HTML page, such as clicking on a link, a piece of JavaScript can be executed. Most HTML tags have certain events that can be used to trigger JavaScript, examples of such events are ‘onClick’ and ‘onMouseOver’. When developing a web page, which uses such events, you need to be careful about compatibility issues as Netscape Navigator and Microsoft Explorer differ in the type of events each HTML tag is capable of supporting.
< a onClick="document.write('you clicked me!');">click here< / a >
< html >
< body >
< img src ="Img/elep.jpg" name="elephant " onmouseover="document.images['elephant'].src='Img/elep.jpg';" onmouseout="document.images['elephant'].src='Img/monkey.jpg';">
< /body >
< /html >
Thursday, 17 November 2011
Encoding An Email Link & Links Within A Page
http://hivelogic.com/enkoder/
The standard format for an email link is:
< a href = ”mailto:myname@yahoo.com ” > My email address here< / a >
- Online addresses should always be encoded.
- Go to the link encoder at: http://hivelogic.com/enkoder/
- Fill in the Email address and Link text fields and select Submit.
- Copy all of the generated JavaScript into your page.
- NOTE: Switch on Live View in Dreamweaver to see the link.
http://w3schools.com/html/html_links.asp
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the < a > tag.
The < a > tag can be used in two ways:
- To create a link to another document, by using the href attribute
- To create a bookmark inside a document, by using the name attribute.
< a href="url " >Link text < / a >
The standard format for an email link is:
< a href = ”mailto:myname@yahoo.com ” > My email address here< / a >
- Online addresses should always be encoded.
- Go to the link encoder at: http://hivelogic.com/enkoder/
- Fill in the Email address and Link text fields and select Submit.
- Copy all of the generated JavaScript into your page.
- NOTE: Switch on Live View in Dreamweaver to see the link.
http://w3schools.com/html/html_links.asp
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the < a > tag.
The < a > tag can be used in two ways:
- To create a link to another document, by using the href attribute
- To create a bookmark inside a document, by using the name attribute.
< a href="url " >Link text < / a >
HTML Tables
http://www.somacon.com/p141.php
http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
Thursday, 10 November 2011
Wednesday, 9 November 2011
Tuesday, 8 November 2011
Catching Upppppp
I have been away at a wedding all weekend
so missed David & Shaun's lectures/seminars on friday. Looked on the NOW & this is was i've sussed out for what I missed:
Common features of WEB 2.0 DESIGN
The great sites share the following design features:
Simple layout
Centred orientation
Design the content, not the page
3D effects, used sparingly
Soft, neutral background colours
Strong colour, used sparingly
Cute icons, used sparingly
Plenty of whitespace
Nice big text
Choose one example of a Web 2.0 website from:
http://www.webdesignerdepot.com/2009/09/25-examples-of-web-2-0-and-traditional-design-rules-coming-together/
so missed David & Shaun's lectures/seminars on friday. Looked on the NOW & this is was i've sussed out for what I missed:
Common features of WEB 2.0 DESIGN
The great sites share the following design features:
Simple layout
Centred orientation
Design the content, not the page
3D effects, used sparingly
Soft, neutral background colours
Strong colour, used sparingly
Cute icons, used sparingly
Plenty of whitespace
Nice big text
Choose one example of a Web 2.0 website from:
http://www.webdesignerdepot.com/2009/09/25-examples-of-web-2-0-and-traditional-design-rules-coming-together/
Thursday, 3 November 2011
Forms & Font
http://www.fontsquirrel.com/fontface/generator
http://www.google.com/webfonts
A web form needs a programmed script to process the information that
someone has filled in. When you hit the submit button, the information gets
sent to the script. The script processes it and does something, e.g. emails you the information.
The script is referenced with the action attribute. The method attribute
specifies how the data gets sent
Most host accounts have a default formmail script which you can link to from a contact form.
Form scripts can be written in .cgi or .php, or any other server-side
programming language.
The label tag connects each bit of text with its relevant input field and is an accessibility requirement. It is also useful for styling forms.
The HTML < input > tag is a stand-alone tag, i.e. it does not come in a pair.
http://www.google.com/webfonts
A web form needs a programmed script to process the information that
someone has filled in. When you hit the submit button, the information gets
sent to the script. The script processes it and does something, e.g. emails you the information.
The script is referenced with the action attribute. The method attribute
specifies how the data gets sent
Most host accounts have a default formmail script which you can link to from a contact form.
Form scripts can be written in .cgi or .php, or any other server-side
programming language.
The label tag connects each bit of text with its relevant input field and is an accessibility requirement. It is also useful for styling forms.
The HTML < input > tag is a stand-alone tag, i.e. it does not come in a pair.
Wednesday, 2 November 2011
Context 2
I have spent so much time on my context 2 essay this week & hopefully it's paid off as i'm nearly finished. Going to print it off to give to Shaun to look over tomorrow. May have to kill myself if i've got the wrong end of the stick and wrote about a load of nothing.
Deadline in a week for it so just touch up on Shaun's advice and then I can finally start my voyage project. Have an idea that's sticking out to use for it but need to create wireframes etc as it's only 4 weeks until that deadline.
Deadline in a week for it so just touch up on Shaun's advice and then I can finally start my voyage project. Have an idea that's sticking out to use for it but need to create wireframes etc as it's only 4 weeks until that deadline.
Monday, 31 October 2011
Halloween
Google is making the context 2 essay slightly better today with the pumpkin video.
Really worried only one company has been in contact, so struggling to write lots about the other companies as I don't know a lot.
Really worried only one company has been in contact, so struggling to write lots about the other companies as I don't know a lot.
Friday, 28 October 2011
Voyage
Thinking about ideas for brief one in dp3 - Voyage.
Voyage: A long journey by sea or space. No limit or imagination. A website in which I can pretty much do what I want. Can be a voyage of anything. Be original.
Thinking about journey I went on in September to Thailand. Colour themes I could use for this:
http://colorschemedesigner.com/
http://kuler.adobe.com
Depending on my audience my website would either be quite formal or could be really informal.
Travellers / Older Audience: Use maps & images to show and talk formally about Thailand, the culture and food etc.
Friends/Family/Travelling Students: Make less formal & more fun. Can include photos of self. Still talk about culture but also own opinions of country.
I'm undecided on my audience yet but going make wireframes for both audiences & see what I think works best.
Voyage: A long journey by sea or space. No limit or imagination. A website in which I can pretty much do what I want. Can be a voyage of anything. Be original.
Thinking about journey I went on in September to Thailand. Colour themes I could use for this:
http://colorschemedesigner.com/
http://kuler.adobe.com
Depending on my audience my website would either be quite formal or could be really informal.
Travellers / Older Audience: Use maps & images to show and talk formally about Thailand, the culture and food etc.
Friends/Family/Travelling Students: Make less formal & more fun. Can include photos of self. Still talk about culture but also own opinions of country.
I'm undecided on my audience yet but going make wireframes for both audiences & see what I think works best.
Subscribe to:
Posts (Atom)