Design Folder

Design folder

The design folder is a compulsory component of MYP technology!

As students progress through the different stages of the design cycle, they are constantly experimenting with ideas, researching topics, compiling sources, brainstorming issues, sketching possible solutions, making changes, rejecting proposals and critically evaluating their work. All relevant activities and outcomes should be recorded, and dated, in the design folder.

The design folder is a compilation of evidence that accompanies the final product/solution for a unit of work.

Students formally record the results of their research, their various plans and designs and the evaluation of their finished products/solutions in the design folder.

The design folder must be clearly divided into: investigate, design, plan, create, evaluate. It must begin with the student’s investigation and end with the evaluation.

Navigation

Criterion A

Problem: Briefly explain in your own words what your task is.

The task is to learn and master HMLT5and CSS and apply my knowledge to the project at hand, which is to create a website showing how well I have understood HTML5 and CSS and to what extend I can use both of them.

How is this task relevant to real issues? (Life, society and the environment)

Computers are used by most people all around the world and working with them will always be a part of our daily life no matter what profession we choose to follow. In this case, knowing HTML will help us solve numerous problems that might occur with our computers, for example, when something goes wrong with a site that might or might not be yours – you will know how to fix it! Also, making and designing our own web-pages is a great experience that might always be useful in the future even if I do not choose to go into a career that requires me to do any kind of web-designing. And, it’s even more important if you want to design web-pages because HTML as a language can give us broad abilities to create and tweak our sites.

How is the task related to the Area of Interaction?

The area of interaction of our current unit is learning HTML, this task will help us summarize how much we have learned and how well we can use our knowledge. We will also be learning about how to learn HTML and CSS.

What I need to investigate to complete the task:

Information about HTML! Elements of HTML. HTML and CSS online tutorials and references. How HTML5 documents are produced. Other modern webpages that use HTML.

Information collected:

Here is Homework 1, which shows how to use basic HTML elements like headings and links.

Here is Homework 2, which shows more complex HTML elements, like lists, tables, and embedded images.

Here is Homework 3 and 4,which discuss the semantic elements and how to use them

Evaluate the sources of information:

Diveintohtml

1. Did the source have a lot of information, or a little?

This source had a huge amount of information and I would say that it was one of the best sources to work with. It gave more information about specific things than other sources did.

2. Was the source easy to understand, or difficult?

It was quite easy to understand but I did need to re-read some things and compare them to other sources to make sure that I got everything right.

3. Did the source help you to understand the elements you read about?

It did help me understand the elements.

4. Does the source seem professional and reliable? Why or why not?

It seems quite professional and I liked the design of this source, it was different and made the source aesthetically pleasing.

5. Would you use this source while creating an HTML product? Why or why not?

I would use this source but honestly, if I would have to rely only on this source, I wouldn’t use it. It wouldn’t really help me during the practical work.

Html5doctor

1. Did the source have a lot of information, or a little?

A lot of information but not necessarily about the things I needed at the moment or at this stage.

2. Was the source easy to understand, or difficult?

The information was written in a completely understandable way.

3. Did the source help you to understand the elements you read about?

No, It hardly helped me understand anything but I did get more information about Html5 and semantics themselves.

4. Does the source seem professional and reliable? Why or why not?

It seems like it wasn’t written by a boring 80 year old professor or a computer and was quite fun to read, so, it definitely felt reliable to me, not quite professional though.

5. Would you use this source while creating an HTML product? Why or why not?

To be honest, I wouldn’t. It was good to read once and understand the importance of semantic elements.

Html5doctor flowchart

1. Did the source have a lot of information, or a little?

A little, compared to others especially.

2. Was the source easy to understand, or difficult?

It was easy to understand.

3. Did the source help you to understand the elements you read about?

It did.

4. Does the source seem professional and reliable? Why or why not?

It does seem professional and reliable and it’s quite obvious that it took some effort and was probably made by someone who knows html 5 well and wanted to share their knowledge with us.

5. Would you use this source while creating an HTML product? Why or why not?

I will be using this source since it will help me understand what elements to use when.

W3 Schools

1. Did the source have a lot of information, or a little?

It had a reasonable amount of information.

2. Was the source easy to understand, or difficult?

It had examples so it was easy to understand

3. Did the source help you to understand the elements you read about?

Yes.

4. Does the source seem professional and reliable? Why or why not?

It seems professional and reliable because the information given was short and straightforward.

5. Would you use this source while creating an HTML product? Why or why not?

I would and honestly, this is going to be one of the sources I am definitely using while creating my product.

W3

1. Did the source have a lot of information, or a little?

A satisfying amount.

2. Was the source easy to understand, or difficult?

It was easy and everything was easy to locate.

3. Did the source help you to understand the elements you read about?

Yes.

4. Does the source seem professional and reliable? Why or why not?

It does since a lot of those semantic tags were used on the page itself, including the navigation element which was not used on a lot of those sources.

5. Would you use this source while creating an HTML product? Why or why not?

Yes, just like the previous source I found that this one was perfect for me.

Vanseodesign

1. Did the source have a lot of information, or a little?

It had a lot of information.

2. Was the source easy to understand, or difficult?

It was easy to understand.

3. Did the source help you to understand the elements you read about?

It even helped me understand the elements I did not really need to know about just yet.

4. Does the source seem professional and reliable? Why or why not?

It looked kind of amateur compared to other resources but I guess it was reliable since the text was quite similar to the text I read in other sources.

5. Would you use this source while creating an HTML product? Why or why not?

I would use it since I’m not really dissatisfied with it but other sources were better than this one in some ways.

Design Brief: Briefly explain how you intend to complete the task.

Make an online design folder that shows our understanding of HTML5 and CSS. Use modern HTML methods, including semantic elements, to structure our document. Use CSS to make our design folder beautiful.

List the sources you will use

W3schools
w3.org
HTML5doctor
HTML5doctor flowchart
DiveIntoHTML
Vanseodesign
Apple
Wikipedia
Buzzfeed
Cracked
CNN

Design specification (List of requirements that must be met by the product or solution):

written in HTML and CSS
written ourselves, not with an HTML WYSIWYG editor or code generator
must use HTML5 specification
must contain each element of the design folder
good design - attracts attention - beautiful
readible/informative
usable/easy to use/intuitive
should work on a variety of browsers/platforms

Design tests to evaluate your product/solution against the design criteria:

Check to make sure that we are using HTML5 semantic tags properly (http://validator.w3.org/)
offer evidence of doing our own work: files at various stage of creation, etc.
compare the product to our Word design folder and make sure each element is present
show to others to get their opinion about our design, readability, ease of use
open the product using different browsers: safari, opera, IE, firefox, chrome, mobile devices

Explain briefly about the designs you will sketch. Mention your ideas.

I will create designs by editing a .css file to style an .html document. The document will contain some elements of the design folder. I will use the samples sent by the teacher as base codes for my sketches and change some things in the code if I deem it necessary.

Design 1:

Is it written in HTML and CSS? Yes, It is.
Did we write this ourselves, and not with an HTML editor or generator? Did we use the HTML5 specification? Yes, I did write it myself.
Did we use the HTML5 specification? Yes.
Do we use HTML5 semantic elements correctly? Yes, as I used the teacher’s completely correct code as the base code.
Does the design contain each element of the design folder? No, it only contains Criteria A.
Does the design attract attention? Yes.
Is it beautiful? I would hope so, yes.
Is it readable? Yes, the font is completely legible.
Is it informative? Yes, It contains all necessary information for now.
Is it usable, easy to use, and intuitive? Yes, all you have to do is scroll down.
Do you like the design? I do, even though I could’ve made it more attractive.
Does it work on a variety of browsers? I tried opening it with Google Chrome and Opera, which are most commonly used browsers and it worked on both.

Design 2:

Is it written in HTML and CSS? Yes.
Did we write this ourselves, and not with an HTML editor or generator? Did we use the HTML5 specification? Yes.
Did we use the HTML5 specification? Yes.
Do we use HTML5 semantic elements correctly? Yes.
Does the design contain each element of the design folder? No, it only had Criteria A.
Does the design attract attention? Yes.
Is it beautiful? it's okay.
Is it readable? Yes, everything is legible.
Is it informative? Yes, It contains all necessary information for now.
Is it usable, easy to use, and intuitive? Yes, all you have to do is scroll down.
Do you like the design? I do, even though it looks pretty simple.
Does it work on a variety of browsers? I opened the file with Google Chrome and Opera and it worked on both.

Design3:

Is it written in HTML and CSS? Yes.
Did we write this ourselves, and not with an HTML editor or generator? Did we use the HTML5 specification? Yes.
Did we use the HTML5 specification? Yes.
Do we use HTML5 semantic elements correctly? Yes.
Does the design contain each element of the design folder? No, it is missing all criterions except Criterion A.
Does the design attract attention? Yes.
Is it beautiful? Yes, out of all designs it is the best to look at.
Is it readable? Yes, it is readable.
Is it informative? It contains all the information it should.
Is it usable, easy to use, and intuitive? Yes.
Do you like the design? It is by far the most aesthetically pleasing design out of the three.
Does it work on a variety of browsers? It does, I opened it with Opera and Chrome.

Which design will you choose for your final product? Why?

I chose the last design because it seemed to cover all the specifications and it was the most fun to look at, even my classmates whom I asked to help me choose one design, all liked this one the best. The other two seemed too simple compared to this and I feel like this specific design will be the easiest to work with. The other two were made according to the design specification too but they did not seem to attract as much attention as the design chosen by me does.

Explain in detail the step by step process of creating your product. Make sure to mention any resources you will need.

Now that I’ve finished styling my page, I have an incomplete .html file, and a .css file that styles the html completely.I will need to complete the design so it will contain all of the criterions of the design folder. I will also add a navigation menu to the file so it will be easier for the user to get to certain criterions. I will also add a button that will return the user to the top of the page wherever on the page they might be. The button will be styled with css with the help of this tutorial. After I complete the .html file, I will fill in the answers to the questions in our design folder. By the time I get to Criterion D, I will have answered all of the questions in Criteria A, B, and C. Once my .html design folder is done and completely filled in, I will check the final product to see if there are any changes that I would like to make to the .css file. I might also need to add styling to the Nav that I’ve added, and to the time-table I wrote for Criterion C. When all of those things are done and over with, my product is officially finished.At each step I will have to make sure that my product works – that the .css files and .html files are properly linked, that the file names and locations are correct, and that any other links or embedded images I’ve put in the file are functioning.

Steps	Time
Complete our .html for Criteria B, C, D, E.	120-200 minutes.
Create a Nav and a Go to top button.	50 minutes.
Fill in answers for Criteria A, B, C. Fill in filler text for Criteria D and E.	90 minutes.
Check the design and make any necessary changes to the .css file.	60 minutes.
Do a final check to make sure everything is working correctly.	10 minutes.

Evaluate your plan – Go through your plan and explain if you need to make any modifications to the design, and why.

In my opinion, each step in this plan is quite detailed and understandable. All steps are logical as they will help me finish the product and know exactly what I am going to be doing after what to complete this design. The plan includes the exact amount of time I will need and maybe even more, but everything depends on how fast or slow I will be able to complete certain steps. The steps are in a completely logical order. All resources needed to complete the steps are included and hopefully, I will be able to follow the plan. The only changes I might make are alterations to time.

Write the process on how you created your output.

First, I coded all the Criterions into my design, then I created the navigation menu and the top button. Then, I wrote all the Criterions I hadn’t filled in before and transitioned them to my design. Then I validated the whole file and corrected the things I needed to correct.

Did you follow the plan? If not explain any changes you made to your plan.

I followed the plan step by step and did not make any changes.

Evaluate your design specification. Did you stick with your design specification or did you make any changes? Explain.

The design specification seemingly told me everything that I could have understood and done by intuition anyway, but it somehow gave me a more clear idea of what exactly my design should be like. I did not make any changes because I didn’t think they were necessary.

Test your product: Follow your testing method. i.e. Answer any questionnaire, survey that you have mentioned in the investigation.

Check to make sure that we are using HTML5 semantic tags properly (http://validator.w3.org/) I checked my file and it only had 5 mistakes that I personally could not fix myself so, no it did not validate even though all five mistakes were of the same sort.
Offer evidence of doing our own work: files at various stage of creation, etc.
Before Criterions D and E were filled out.

Finished product
Compare the product to our Word design folder and make sure each element is present.: I did not include such elements as works cited because all necessary sources were cited numerous times before that element. Also, I did not include the screenshot of my final design in the final design itself.
Show to others to get their opinion about our design, readability, ease of use

Tatia:

Does the design attract attention? Yes.
Is it beautiful? Yes.
Is it readable? Yes.
Is it informative? Yes.
Is it usable, easy to use, and intuitive? Yes.
Do you like the design? Yes, she did like the design.

Elene:

Does the design attract attention? Yes.
Is it beautiful? It’s okay.
Is it readable? Yes.
Is it informative? Yes.
Is it usable, easy to use, and intuitive? Yes.
Do you like the design? Yes.

Anna:

Does the design attract attention? Yes.
Is it beautiful? Yes, mostly.
Is it readable? Yes.
Is it informative? Yes.
Is it usable, easy to use, and intuitive? Yes.
Do you like the design? Yes, she did.

5.Open the product using different browsers: safari, opera, IE, firefox, chrome, mobile devices: I opened the product in all of those browsers and it worked in all of them, even though the mistakes made in the code by me stayed there.

Reflect your use of the design cycle.

Investigate

I did really well on this stage, completed all works due the deadline and in my opinion could not have done better on this task. Except, I could have memorized all the codes I read tutorials about then.

Plan

This stage went quite smoothly and I did not have any complications. If I could re-do this stage I would change the times in the plan a little bit and maybe experiment more with designs. Overall, I did okay at this stage even though my designs lacked creativity in some ways and could have been improved.

Create

This stage took the most time out of all things and was the hardest to complete. There was a lot to code and even though I did not make many mistakes while coding, there were the 5 mistakes that I could not fix myself no matter how hard I tried.

Evaluate

I could have been more insightful and give more detailed descriptions of things but I think I again, did okay on this stage and did not have any complications while doing it.

Evaluate the products relevance to real issues. i.e. life, society and or environment

After finishing this project I have obtained skills that will help me do various types of work that has to do with HTML5 and CSS. During this project I obtained skills that I value a lot and which I wanted to learn even before this project but did not manage to get around learning myself. If all people got taught at least the half of what we learned during this project people would be a lot more developed in technological fields.