M11: Tables and FormsClass Recap: In this module, you gain basic knowledge of creating tables and forms. You need to remember that <table> should NOT be used for pure styling, it should only be used to display tabular data and other information. Treat it as excel spread sheet. I assume you won't use excel for your layout design, you will use inDesign instead. But you might imbed a spread sheet within your layout.
The form element has many uses, you learn the basics to create a contact form. It will be more useful once you learned how to work with data and gain a little more knowledge on how forms function on the backend. Then you can use forms to create surveys, shopping carts, web applications and anything that requires user data and customer interaction. For now, you can simply create an email form. If you would like to find out more about how forms work, here is a link: http://webdesign.about.com/od/forms/qt/make-html-forms-work.htm Student Outcome:
|
Examples
Dealing with unwanted gaps when working with images
I run into this problem while creating an image gallery. I have three rows of images. There is a vertical gap at the bottom of the image I could not get rid of (please see image below the pink gap).
It turns out a quick fix is to set images as block element. So it looks like this
img {
display:block;
}
That trick fixed it. And here is an article explains why:
Images, Tables, and Mysterious Gaps
img {
display:block;
}
That trick fixed it. And here is an article explains why:
Images, Tables, and Mysterious Gaps
M11 Discussion
On the web, find an example of great form design and an example of terrible form design. Write a bit about your choices.
Please <click here> to participate discussion. (Participation points)
Please <click here> to participate discussion. (Participation points)
M11 Homework:
1. View the videos in M12 and complete the tasks
2. Human+Design (site map + interactive wireframes)
Due Date:
This week: site map + interactive wireframes + first draft design layout
The wireframe is not just some empty boxes, it can help you to conceptualize your project. The more detail you can include in your wireframe, the easier to move on to the design phase. Below are just a few examples.
http://i0.wp.com/blog.mockupbuilder.com/wp-content/uploads/2013/06/ac70fae902be20d0158c71ebe65e8898.jpg
http://i2.wp.com/blog.mockupbuilder.com/wp-content/uploads/2013/06/Park-Bond-on-Behance.png
http://i2.wp.com/blog.mockupbuilder.com/wp-content/uploads/2013/06/bdd609a51c6acb37fbd5a5f159d08b95.png
http://www.uxforthemasses.com/blog/wp-content/uploads/2010/11/Example-wireframe.gif
http://www.ospreydawn.com/assets/images/work/blog/great-ux/Sero-Image.004.png
http://images.sixrevisions.com/2010/10/28-38_googlewave.jpg
http://ibayamariaapuntesdwm.files.wordpress.com/2011/01/wireframe_example.png
http://www.saggezza.com/saggezza/wp-content/uploads/2014/10/hifi-wireframe.png
Prepare for discussion and/or critique
You will share your work at the beginning of the next class session.
• View your classmates’ website, post constructive feedbacks
• Be prepared to share your experiences completing this assignment
- Create site map
- Create an interactive wireframe by using invisionapp.com or other similar web based prototyping tools
- Site visual design for each unique page based on the feedback from your peers
The wireframe is not just some empty boxes, it can help you to conceptualize your project. The more detail you can include in your wireframe, the easier to move on to the design phase. Below are just a few examples.
http://i0.wp.com/blog.mockupbuilder.com/wp-content/uploads/2013/06/ac70fae902be20d0158c71ebe65e8898.jpg
http://i2.wp.com/blog.mockupbuilder.com/wp-content/uploads/2013/06/Park-Bond-on-Behance.png
http://i2.wp.com/blog.mockupbuilder.com/wp-content/uploads/2013/06/bdd609a51c6acb37fbd5a5f159d08b95.png
http://www.uxforthemasses.com/blog/wp-content/uploads/2010/11/Example-wireframe.gif
http://www.ospreydawn.com/assets/images/work/blog/great-ux/Sero-Image.004.png
http://images.sixrevisions.com/2010/10/28-38_googlewave.jpg
http://ibayamariaapuntesdwm.files.wordpress.com/2011/01/wireframe_example.png
http://www.saggezza.com/saggezza/wp-content/uploads/2014/10/hifi-wireframe.png
Prepare for discussion and/or critique
You will share your work at the beginning of the next class session.
• View your classmates’ website, post constructive feedbacks
• Be prepared to share your experiences completing this assignment
Submission Directions:
- Upload your site map to concept folder
- Upload your design layout to concept folder
- Create one HTML page provide links to all documents
- Create an interactive wireframes by using invisionapp or any other similar tools of your choice
- <click here> to post your urls on homework submission discussion page
- View and critique at least two of your classmates’ project by commenting the post. Please make proactive suggestions regarding design layout and/or site structure. (Participation point)
Grading Criteria:
Exceeds expectations (A/B) | Meets expectations (C) | Does not meet expectations (D/F) | |
---|---|---|---|
Sitemap | Sitemap is complete, and well organized. The site structure helps site visitors easily find infomation. | Sitemap is complete, and organized. |
Incomplete Sitemap. |
3pts | 2pts | 1pt | |
Interactive Wireframes |
Wireframes are complete, including all five pages. Interactive Wireframes are well thought. | Wireframes are complete, including all five pages. Used an on-line to to produce interative wireframes. Have some click through functionality. |
Wireframe provided. |
3pts | 2pts | 1pt | |
Design Layout | All pages are well designed and well thought with all details. |
Provide designs for all five pages. But missing certain components. |
|
2pts | 1pt | ||
Meeting Deadline | The assignment was turned in on time | The assignment was turned in late. | |
2pts | 0pt | ||
Feedback | Provided constructive feedback to your peers | Did not participate | |
5pts | 0pt |