James+Nitz+Unit+3

Web Design

**Unit question: How can online shopping be made effective**

 * Pre-Unit exercise (if any)**

= INVESTIGATION = ===The current situation/problem: How can shopping online be made effective, the reasons it is not effective might be because hackers may steal either your money or the shops money and many online shopping websites are very confusing.===

The Design Specification:

 * Have a Homepage
 * ...... Page(s) about what you need to shop online
 * ...... Page(s) about what the shop needs to offer this service
 * ...... Page(s) about hacker's methods
 * ...... Page(s) about security measures
 * Have a consistent layout
 * Appropriate use of pictures
 * No copy and pasted information
 * Have tables with merged cells
 * All pages that adjust to the window size
 * Must function the same in three different browsers.
 * It must be easy to read and use
 * It must be tested thoroughly before display
 * It must have highlighted or bold words so it is easy to scan
 * There must be no spelling or grammar mistakes

Tests:
1) Does my website have at least five pages? 2) Does my website have a homepage? 3) Does my website have page(s) about what you need to shop online? 4) Does my website have page(s) about hackers methods? 5) Does my website have page(s) about security measures? 6) Does my website have page(s) about what services an online shop needs to offer? 7) Does my website have a consistent layout? 8) Does my website have any copy pasted information? Check all websites that i have used to research and see if it has the same information on any of these websites 9) Is my website in table form? 10) Does my website have merged table cells? 11) Do all my pages adjust to the window size? Open my website to see if it adjusts to the window size  12) Does my website function correctly in three different browsers? Open and use my website in Mozilla Firefox, internet Explorer and Google Chrome 13) Is my website easy to read and use? 14) Are there any spelling mistakes in my website

[[image:bmisclass2010/amazonpic1.jpeg.jpg]]this is an example of a very successful shopping website
this a website for people over fifty you can see that it has less color than normal websites and it is more simple and clear, pictures are less numerous text is easier to read

Over 80% of web users are scanners, they scan several different website to see if it is one that they want therefore the more successful websites have there text formatted in a way that is is easy to browse through.

things that make a good website it has to be self explanatory, the web user has to know everything they need to know without someone explaining it to them keep things simple White space can be useful, empty space of the same color helps people absorb information more effectively Make things easily readable, you do not want your text too small or a similar color to the background Do not test web users patience, you want simple and usable websites, pop ups and adverts can be very annoying and distracting Make your page easy to scan, most web users are not actually going to be reading your page but scanning for the information that they want. Make it visually appealing, make it look nice. Do not forget to test your website early and often, if you do not want mistakes on your web page test the finished product before you put it on the internet and test it regularly after too.

Websites assessment: Reference: http://www.sonicseo.com/good-site-elements/ http://webdesign.about.com/od/webdesignbasics/tp/aa112497.htm http://www.webs.com/blog/2011/12/22/what-makes-a-good-website/ http://www.spritzweb.com/resources/good-website-characteristics.html

Conclusion: I will create tests that will be effective so there will be no mistakes on my website, I will use solid colors in each background of each page so people can absorb information easily, I will make my text and information easy to read and scan.

= DESIGN =

Design 1

 * Design specification || Design one || Design two || Design three ||
 * Have a Homepage || yes || yes || yes ||
 * Page(s) about what you need to shop online || yes || yes || yes ||
 * Page(s) about what the shop needs to offer this service || yes || yes || yes ||
 * Page(s) about hacker's methods || yes || yes || yes ||
 * Page(s) about security measures || yes || yes || yes ||
 * Have a consistent layout || yes || yes || yes ||
 * No copy and pasted information || NA || NA || NA ||
 * Appropriate use of pictures || yes || yes || No ||
 * Have tables with merged cells || NA || NA || NA ||
 * All pages that adjust to the window size || NA || NA || NA ||
 * Must function the same in three different browsers. || NA || NA || NA ||
 * It must be easy to read and use || no || yes || yes ||
 * It must be tested thoroughly before display || NA || NA || NA ||
 * It must have highlighted or bold words so it is easy to scan || NA || NA || NA ||
 * There must be no spelling or grammar mistakes || NA || NA || NA ||

[[image:JamesNitzDesign3ICT8JCR.jpg.jpg width="536" height="309"]]
I like the colors on this design i also like how the title is positioned with the picture right next to it but the thing i like the best about this design is the fact at the bottom left corner i think this was a very good idea as people don't usually read large chunks of texts where as a small fun facts tend to draw people in and if they are interesting the web user is more likely to read the actual text on the subject. The thing i don't like about it it is that there is nothing on the other side on the title and pictures also the links would turn out quite small and inaccessible. Overall it is quite a bad design and i will not be using

[[image:JamesNitzDesign2ICT8JCR.jpg.jpg width="536" height="338"]]The links to the page wi ll be parallel to the curved lines of the semi circles on the left
This is a very good design because the colors are fit well with each other and are appropriate for a teenager the links are clear easily accessible and will look nice when put into website form I like the idea of having an introduction to the subject near the heading. The negative things about this design is that the layout of picture text picture text is quite boring and not visually appealing. But this is still a very good design and i really like the idea of the links being on the curved lines this would look good and would be quite accessible as well. This is the design that i am choosing.

Justification: first of all this design met all the the design specification and second of all the color scheme is the most appropriate for teenager. Also the links will look nice when they are put onto a real website. I will use some of the other ideas from the other designs: i will be using the interesting fact on each page from design 1 and the diagonal layout from design three but he majority of my website will be from this design.

Design 3
I think this design is very good the layout is formal and easy to read although the colors seem a bit childish and perhaps the layout is a little to straight forward for all five pages. I really like how the important text goes from the top left corners down the bottom right in a diagonal line. This i think make s it easy and natural to follow the information. I also like the fact that on this design there are pictures with the links to give them an idea of what they will be seeing in the page that they click on. As i said before the color scheme may no be the best for a teenager and the layout is a little straight forward. The other problem is that there will be two sets of pictures right next to each other this will probably not look very nice. Over all it is not a bad design but if i did choose this design i would make a lot of changes therefore i will not be using this design. = **PLAN** =
 * Date || Stage || Work || Resources || Comments ||
 * 25th (class time) || create || Research about what you need to shop online paraphrase into word (include your own opinions and ideas) – 20 minutes

Research about hackers methods paraphrase into word (include your own opinions and ideas)- 20 minutes

Research about security measures and paraphrase into word (include your own opinions and ideas) – 20 minutes || Internet, internet is needed to research about these three topics

Word, word is needed to paraphrase the information I have found. || If this is too much to do in one lesson then focus on the first two and do the third in the next session ||
 * 25th (home work) || create || Research about what services an online shop needs to offer paraphrase into word (include your own opinions and ideas) – 20 minutes || Internet, internet is needed to research about these three topics

Word, word is needed to paraphrase the information I have found. ||  ||
 * 26th (class time) || create || Create the new site and name it properly – 5 minutes

Create the layout for the five webpages – 10 minutes

Download the pictures required for all five pages – 10 minutes

Fill in one of the layout pages as your homepage (copy your design) Insert pictures and copy your information from word – 10 minutes

Create your ‘what you need to shop on line’ page (copy your design) insert pictures copy your information from word – 10 minutes

Create your ‘what services an online shop needs to offer’ page (copy your design) insert pictures copy your information from word – 10 minutes

Save all these pages and pictures in the same folder and site file. Also make sure the websites are in tables || Internet, Google images, Google images is need to download the pictures required

Microsoft Expression, this is needed to create the layout and specific pages || The layout for all the pages took alot longer than i thought it would so i will shift work to the two lessons next week ||
 * 27th (class time || create || Create your ‘security measures’ page(copy your design) insert pictures copy your information from word – 10 minutes

Create your ‘hackers methods page’ page(copy your design) insert pictures copy your information from word – 10 minutes

Create the hyperlinks on each page – 10 minutes

Try different colors for backgrounds – 5 minutes

Fix any spelling mistakes – 5 minutes

Text your website – 5minutes || Microsoft Expression, this is needed to create the webpages, links background colors etc…. ||  ||

= CREATE =











= EVALUATE = Tests: 1) Does my website have at least five pages? 2) Does my website have a homepage? 3) Does my website have page(s) about what you need to shop online? 4) Does my website have page(s) about hackers methods? 5) Does my website have page(s) about security measures? 6) Does my website have page(s) about what services an online shop needs to offer? 7) Does my website have a consistent layout? 8) Does my website have any copy pasted information? Check all websites that i have used to research and see if it has the same information on any of these websites 9) Is my website in table form? 10) Does my website have merged table cells? 11) Do all my pages adjust to the window size? Open my website to see if it adjusts to the window size 12) Does my website function correctly in three different browsers? Open and use my website in Mozilla Firefox, internet Explorer and Google Chrome 13) Is my website easy to read and use? 14) Are there any spelling mistakes in my website

1) Yes my product does have five pages 2) Yes my product does have a homepage 3) Yes my product does have a page on what you need to shop online 4) Yes my product does have a page on what services an online shop needs to offer

5) Yes my product does have a page on security measures

6) Yes my product does have a page on Hackers methods

7) Yes my product keeps the same layout in each page

8) No the information on my website was all written by me 9) Yes my website is in table form all the way through

10) Yes in every webpage there are merged table cells 11) No although none of the text is altered the design is completely ruined because it does not adjust to the window size 12) Yes it function the same in three different 13) Yes the text is all easy to use and the links are obvious and consistent, but there is no highlight 14) No there are no noticeable spelling mistakes

Over all my product meets most of the design specifications but i do not think hat my product was very good. The reasons for this are: My website looks quite messy and unorganized, it looks boring and is generally lacking colors. The good points are that it followed my design almost perfectly, and i am quite proud of my self for finding a way to insert the smart art picture into the background of my website, also my website is easy enough to use and very consistent layout.


 * ==Stage== || ==Grade== || ==Reason For Level .== || ==How to improve next time .== ||
 * ==INVESTIGATE== ||  ||   ||   ||
 * ==**DESIGN**== ||  ||   ||   ||
 * ==**PLAN**== ||  ||   ||   ||
 * ==**CREATE**== ||  ||   ||   ||
 * ==**EVALUATE**== ||  ||   ||   ||
 * ==**ATTITUDES IN**==

**TECHNOLOGY**
||  ||   ||   ||