isalena.horvath+UNIT+3


 * Year 8 Unit 2: Web Design **
 * Unit Question: What makes an effective Web Design? **


 * Task 1 Investigation (3 pieces of work) **

(Part 1) Introduction: We are looking for a good website meant for people older than 50.


 * __The website I found looked different to the usual websites I use because… __
 * It had a really polished color scheme, it doesn't have any ‘distractions’ such as pop ups or things moving around, it’s very organized and ‘clean’.


 * __It’s not like the websites I usually look at and here is why… __
 * The websites I look at are usually very crowded and you get things you don’t want and it’s not specifically aimed at 50 or above more for teens to adults.
 * The website is not a social one, it is designed for people who need to know how to ‘flourish over 50’ so it’s for 50 and over.


 * __The age that this website is aimed for is 50 and here is how I know that… __
 * It has a big title at the top that shows a picture of a 50 year old woman because that is the age the website is for.
 * The website is called: []  so that’s a big clue.


 * __The website is user friendly because… __
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">This website is user friendly because it is clear what it is made for, it is organized and it shows exactly who it’s aimed at.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">­­­­­­­­­­­­­­­­­­­­­­­ <span style="font-family: Arial,sans-serif; font-size: 10pt;">­­­­­­­­­­­­­­­­­­­­­­
 * <span style="background-color: yellow; font-family: Arial,sans-serif; font-size: 12pt;">(Part 2) ****<span style="background-color: white; font-family: Arial,sans-serif; font-size: 12pt;">Answer the unit question: What makes an effective Web Design? **
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">I think that an effective web design has a nice color scheme or colors that go together, has content that is specifically for something not a bunch of nonsense. It should be organized, it should be free of more than 2 animations on one page – more than that make is confusing. It should be user friendly: clear intent, organized and there should be a help page.


 * <span style="background-color: yellow; font-family: Arial,sans-serif; font-size: 12pt;">(Part 3) ****<span style="background-color: white; font-family: Arial,sans-serif; font-size: 12pt;">What do you think of these websites? Talk about content, audience, design and how user friendly it is. Only write about 5-10 sentences maximum on each. **

Or... in word:
 * || <span style="font-family: Arial,sans-serif; font-size: 10pt;">bbc.co.uk: || <span style="font-family: Arial,sans-serif; font-size: 10pt;">tsb.co.nz: || <span style="font-family: Arial,sans-serif; font-size: 10pt;">wunderground.com: || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Donegalpans.com: ||
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Content: || <span style="font-family: Arial,sans-serif; font-size: 10pt;">The content of this website is news from all over the world || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Bank things like loans. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Weather for the day/week || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Pens. ||
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Audience: || <span style="font-family: Arial,sans-serif; font-size: 10pt;">The audience is mainly for adults although younger people read it as well. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Adults and up. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Everyone, it doesn't suggest it’s for only adults or teens. But uses language adults are very familiar with. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">For older people as I have a hard time imagining a kid researching and ordering pens. Maybe gifts for friends. ||
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Design: || <span style="font-family: Arial,sans-serif; font-size: 10pt;">The design is organized, no animations, pictures and a good color scheme. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Is good, nice color scheme, good pictures at the top of the page, clear content. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Bright, organized but the adverts are taking up quite a bit of room on the page. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Organized, no clashing colors, good design. ||
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">How user friendly: || <span style="font-family: Arial,sans-serif; font-size: 10pt;">I’d say the user friendliness is about as friendly as it could get, the website makers are clearly doing their best to keep everyone informed and keep it organized at the same time. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">User friendly because it is easy to see/ read, its well laid out and organized and it’s designed to help you. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Looks pretty user friendly, nice and organized. || <span style="font-family: Arial,sans-serif; font-size: 10pt;">Looks user friendly because it’s clear, it’s in two languages so that allows other people to be able to read it too. ||


 * <span style="background-color: white; font-family: Arial,sans-serif; font-size: 12pt;">Task 2 **

<span style="font-family: Arial,sans-serif; font-size: 10pt;">1. **What do you need to shop online?** <span style="font-family: Arial,sans-serif; font-size: 10pt;">You need to have some money, obviously and a bank account. You will also need to have a computer and an internet connection. You should also now what website you will go to and if it is safe. You need to know what you are buying.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">2. **What does the shop need to offer online shopping?** <span style="font-family: Arial,sans-serif; font-size: 10pt;">I think it needs to be able to transport items to people’s homes and needs to be able to accept credit card number or whatever you buy with. It also has to be able to keep your bank details and your personal information secret and not show anyone else.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">It might not be a much protected website and someone might see someone else’s details then buy with their money, or log into the website owner’s account and change things around.
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">3. How can hackers steal either your money or the shops money while shopping online? **

<span style="font-family: Arial,sans-serif; font-size: 10pt;">Some people from the website can be helping keeping an eye on people buying things and make sure there isn’t any suspicious activity going on. The passwords should be kept very safe and secret and also the other details such as email address and where you live.
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">4. What measures can be used to prevent hacking? **

<span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">I am going to design and make a website about the stakeholders involved in online shopping. It should be suitable for students aged 12 to 18.
 * <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Design Brief: **


 * <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Design Specifications: **

<span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">My website must:
 * 1) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Have a Homepage
 * 2) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">...... Pages about what you need to shop online
 * 3) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">...... Pages about what the shop needs to offer this service
 * 4) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">...... Pages about hacker's methods
 * 5) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">...... Pages about security measures
 * 6) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Have a consistent layout
 * 7) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Appropriate use of pictures
 * 8) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">No copy and pasted information
 * 9) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Have tables with merged cells
 * 10) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">All pages that adjust to the window size
 * 11) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Must function the same in three different browsers.
 * 12) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Look nice
 * 13) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Have nice color(s)
 * 14) <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Be clear, titles should stand out and so should other important information.


 * <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Tests: **
 * 1) <span style="font-family: Arial,sans-serif;">Does it have a homepage?
 * 2) <span style="font-family: Arial,sans-serif;">Do your designs have pages on what you need to shop online?
 * 3) <span style="font-family: Arial,sans-serif;">Do your designs have pages about what the online store needs to offer?
 * 4) <span style="font-family: Arial,sans-serif;">Do your designs have pages about hackers methods?
 * 5) <span style="font-family: Arial,sans-serif;">Do your designs have pages that talk about security methods?
 * 6) <span style="font-family: Arial,sans-serif;">Do your designs have a consistent layout?
 * 7) <span style="font-family: Arial,sans-serif;">Do your designs have appropriate use of pictures?
 * 8) <span style="font-family: Arial,sans-serif;">Do your pages have no copy and pasted information?
 * 9) <span style="font-family: Arial,sans-serif;">Do your pages have tables with merged cells?
 * 10) <span style="font-family: Arial,sans-serif;">Do all the pages adjust to window size?
 * 11) <span style="font-family: Arial,sans-serif;">Do your pages function the same in three different browsers?
 * 12) <span style="font-family: Arial,sans-serif;">Do your pages look nice?
 * 13) <span style="font-family: Arial,sans-serif;">Do your pages have nice colors?
 * 14) <span style="font-family: Arial,sans-serif;">Do your pages and designs have clear titles and text?

=__**<span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Design: **__=

<span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Design One: <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">

<span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">I really like this design because it is very colorful and clear. I would improve it by not having very many of those places to put pictures in maybe just one of them. The second list (underneath the homepage) can be used for all the pages, the information, text and pictures just have to be changed.
 * <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Explanation: **


 * ** Design Specifications/ Must have: ** || ** Yes/ No: ** ||
 * Homepage || Yes ||
 * Pages about what you need to shop online || Yes ||
 * Pages about what the shop needs to offer this service || Yes ||
 * Pages about hacker's methods || Yes ||
 * Pages about security measures || Yes ||
 * Have a consistent layout || Not sure ||
 * Appropriate use of pictures || Has no pictures ||
 * No copy and pasted information || Yes ||
 * Have tables with merged cells || No ||
 * All pages that adjust to the window size || Not sure ||
 * Most function the same in three different browsers || Not sure ||
 * Have clear titles/ text || Yes ||
 * Have nice colors/ be colorful || Yes ||

<span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;">Improved version: <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;"> <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;"> <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;"> <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt;"> <span style="background-color: white; font-family: Arial,sans-serif; font-size: 10pt; line-height: 0px; overflow: hidden;">


 * ** Design Specifications/ Must have: ** || ** Yes/ No: ** ||
 * Homepage ||  ||
 * Pages about what you need to shop online ||  ||
 * Pages about what the shop needs to offer this service ||  ||
 * Pages about hacker's methods ||  ||
 * Pages 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 ||  ||
 * Most function the same in three different browsers ||  ||
 * Have clear titles ||  ||
 * Have nice colors/ be colorful ||  ||

Design 2:

Explanation: I like this design because there is a nice homepage and I think it's nice and colorful, the words are quite clear. I could improve by again, not inserting so many of the spaces to hold pictures in because I don't have any pictures and making the writing bigger. <span style="background-color: #ffffff; font-family: Arial,sans-serif; font-size: 13px; line-height: 1.5;">The second list (underneath the homepage) can be used for all the pages, the information, text and pictures just have to be changed.


 * ** Design Specifications/ Must have: ** || ** Yes/ No: ** ||
 * Homepage || Yes ||
 * Pages about what you need to shop online || Yes ||
 * Pages about what the shop needs to offer this service || Yes ||
 * Pages about hacker's methods || Yes ||
 * Pages about security measures || Yes ||
 * Have a consistent layout || Not sure ||
 * Appropriate use of pictures || Has no pictures ||
 * No copy and pasted information || Yes ||
 * Have tables with merged cells || No ||
 * All pages that adjust to the window size || Not sure ||
 * Most function the same in three different browsers || Not sure ||
 * Have clear titles/ text || Not really, could have been bigger ||
 * Have nice colors/ be colorful || Yes ||

Improved Version: The images are of people sitting at there computer. The images show stakeholders standing with a white background. The images show people looking at a computer. The images are of someone thinking and of a credit card. The images are of people guarding something. The images are of a delivery truck and someone receiving a box in front of their house.

I like the improved version better because it has all the pages.


 * ** Design Specifications/ Must have: ** || ** Yes/ No: ** ||
 * Homepage || Yes ||
 * Pages about what you need to shop online || Yes ||
 * Pages about what the shop needs to offer this service || Yes ||
 * Pages about hacker's methods || Yes ||
 * Pages about security measures || Yes ||
 * Have a consistent layout || Yes ||
 * Appropriate use of pictures || Yes ||
 * No copy and pasted information || Yes ||
 * Have tables with merged cells || No ||
 * All pages that adjust to the window size || Not sure ||
 * Most function the same in three different browsers || Not sure ||
 * Have clear titles || Yes ||
 * Have nice colors/ be colorful || Yes ||

Design 3:

Explanation: I like this design because it's different than the other ones I made and the colors are nice. I could have improved by making the writing on the homepage clearer perhaps in the color black so everyone can see it. <span style="background-color: #ffffff; font-family: Arial,sans-serif;">The second list (underneath the homepage) can be used for all the pages, the information, text and pictures just have to be changed.

My design justification: My favorite design is the improved version on design one because it is unique, colorful and has a yes to most of the design specifications even though some pages were missing. Design Specifications yes/no for design I prefer:
 * ** Design Specifications/ Must have: ** || ** Yes/ No: ** ||
 * Homepage || Yes ||
 * Pages about what you need to shop online || Yes ||
 * Pages about what the shop needs to offer this service || Yes ||
 * Pages about hacker's methods || Yes ||
 * Pages about security measures || Yes ||
 * Have a consistent layout || Not sure ||
 * Appropriate use of pictures || No I have no pictures ||
 * No copy and pasted information || Yes ||
 * Have tables with merged cells || No ||
 * All pages that adjust to the window size || Not sure ||
 * Most function the same in three different browsers || Not sure ||
 * Have clear titles/ text || Not all of them ||
 * Have nice colors/ be colorful || Yes ||
 * ** Design Specifications/ Must have: ** || ** Yes/ No: ** ||
 * Homepage || Yes ||
 * Pages about what you need to shop online || Yes ||
 * Pages about what the shop needs to offer this service || Yes ||
 * Pages about hacker's methods || Yes ||
 * Pages about security measures || Yes ||
 * Have a consistent layout || Yes ||
 * Appropriate use of pictures || Yes ||
 * No copy and pasted information || Yes ||
 * Have tables with merged cells || No ||
 * All pages that adjust to the window size || Not sure ||
 * Most function the same in three different browsers || Not sure ||
 * Have clear titles || Yes ||
 * Have nice colors/ be colorful || Yes ||

= PLAN: =

Lucid Chart, Flowchart:

Table: Better version: Do some research for info to fill in the blanks of the website. Just carry on with the website in Microsoft word. || * Microsoft Expression Paste images of website ON website. || * Microsoft Expression
 * **Date:** || **Stage:** || **Work:** || **Resources:** || **Comments:** ||
 * Monday: || Plan – Create || Open Microsoft expression and start homepage. Include links for other pages. Look up appropriate images. || * Microsoft Expression
 * Internet ||  ||
 * Tuesday: || Plan – Create || Start other pages. Put in images. || * Microsoft Expression
 * internet ||  ||
 * Thursday: || Plan – Create || Carry on doing other pages. Put in images || * Microsoft Expression
 * Internet (optional) ||  ||
 * Monday: || Plan-Create || Start finishing website. || * Microsoft expression
 * Internet ||  ||
 * Due Date: Tuesday 5th March || Plan - Create || See if everything works (links, website can open in different browsers). Do last minute touches. || * Microsoft Expression
 * Internet ||  ||
 * **Date:** || **Stage:** || **Work:** || **Resources:** || **Comments:** ||
 * Monday: 4th || Plan – Create || Open Microsoft expression and start homepage. Include links for other pages. Look up appropriate images. || * Microsoft Expression
 * Internet
 * Microsoft Word ||  ||
 * Tuesday: 5th || Plan – Create || Start other pages. Put in images.
 * Internet
 * Microsoft word ||  ||
 * Thursday: 6th || Plan – Create || Carry on doing other pages. || * Microsoft Expression
 * Internet (optional)
 * Microsoft word ||  ||
 * Homework day: Thursday 6th || Plan-Create || Start finishing website. || * Microsoft expression
 * Internet
 * Microsoft word ||  ||
 * Due Date: Tuesday 5th 11th March || Plan - Create || See if everything works (links, website can open in different browsers). Do last minute touches.
 * Internet
 * Microsoft word ||  ||

Create: Homepage: Hackers Methods: Security Measures: What do you need to shop online? Stakeholders: What service does the online shop need to offer? I linked all the links and if I scrolled my mouse over the place where I put the link, I would be able to click it and it would send me to the page I clicked.

**__ Task 5: Evaluate for Unit 3 Online Shopping: __**

Colors, background, organization, pictures…etc. (Laetitia Durand) ||
 * Comparing each of the separate pages to the designs I made beforehand:
 * Homepages: look almost exactly the same except one of the pages is a bit lower than it should be but it looks better than the design.
 * What do you need to shop online: the pages look the exact same and its different because I inserted the image and I had to, so that’s okay.
 * Security Measures: the pages don’t look the same except for the title, which is at the top where it should be. I changed the design of it because I needed to insert more text and changing it around a bit allowed me to do so without overly crowding the page.
 * Hackers Methods: the page is pretty much the same except for a few changes I made because I needed to insert lots of text.
 * What Service do Online Shops need to offer? It’s exactly how I planned it out and I think it looks good.
 * Stakeholders: I didn't do a design on the stakeholders involved in online shopping because I forgot to and someone reminded me before I made the website so I was able to include that page. I think it looks nice even though I didn't really plan it out so well.
 * Page: || What I would improve: || Criticism from other person:
 * Page: || What I would improve: || Criticism from other person:
 * Homepage || I think the actual image I designed on the website looks good. I would improve the background color though because it kind of hurts my eyes. || The picture is a bit smudged. Put it in the center. Make colors complement each other. ||
 * What do I need to shop online? || I like this page because I think it’s a good background color and I think it goes with the colors on the image. But it’s a little bright, next time I will make it a more peaceful and lighter green. || Can’t read it. Empty space. ||
 * Stakeholders involved in online shopping: || This is one of my favorite pages because the background color goes with the image and I think it’s well organized. || Nice background color. ||
 * Hackers Methods: || I think it’s a good page because the colors go well together, it’s well organized and I think it looks nice. || Can’t read writing. ||
 * Security Measures: || My favorite page because it looks good and the colors go together. It looks well organized to me. ||  ||
 * What service does the online shop need to offer? || I don’t really like this page because the actual colors don’t look good together, it’s not very colorful and the background is too bright. But I think it’s well organized and the picture looks good. || Make title bigger. Nice organization. Nice pic. ||


 * Additional notes to self:**
 * Instead of putting where I found the picture (link) at the bottom of the page, I would insert a link by clicking on the actual picture and that link would take me to where the image comes from.
 * Next time instead of doing it in a picture I will do the actual website not as a picture.
 * Next time I will choose and easier design to do because then I wouldn't have to do it in smart art and it would look better as a website.
 * Make writing clearer.
 * Make title bigger.

Pages about stakeholders || Yes Yes || Working Links || Yes Yes ||
 * ** Design Specifications/ Must have: ** || ** Yes/ No: ** ||
 * Homepage || Yes ||
 * Pages about what you need to shop online || Yes ||
 * Pages about what the shop needs to offer this service
 * Pages about hacker's methods || Yes ||
 * Pages about security measures || Yes ||
 * Have a consistent layout || Mostly ||
 * Appropriate use of pictures || Yes ||
 * No copy and pasted information || Yes ||
 * Have tables with merged cells || No ||
 * All pages that adjust to the window size || Not sure ||
 * Most function the same in three different browsers || Not sure ||
 * Have clear titles/ text || Not really, could have been bigger ||
 * Have nice colors/ be colorful

This unit I learn't a lot about online shopping. I learn't about what stakeholders are and what a good website is. I also learn't about how to actually make a website and I learn't how my website was good or not. I think the most fun part of the unit was making the website because I had to problem solve and I got some good feedback so I know how to improve next time. I had to problem solve because I couldn't make my page exactly like the design i wanted so i made it an image and inserted it onto a blank page. I did my website on my most original design because I saw a lot of people do a very simple one so I didn't want to copy them so I got creative and made my own. I think the most difficult part of the unit was making the designs because I got confused at some parts but thanks to the help of kind classmates, I understood better. If I could do this unit again I would definetly improve the quality of my website pages.
 * Reflection:**

** What I could improve on at each stage of the design cycle: **

 * Investigation: ** I could do more research and add more detail.
 * Designs: ** I could have added more information and finished the last design.
 * Plan: ** Follow assessment criteria exactly.
 * Create: ** write any changes I mad to the plan in detail.