M9: Advanced Styling with ImagesClass Recap: In previous modules, we've already learned many ways to incorporate images into your HTML pages. In this module, one new skill you learned is using images as styling elements rather than simply using them as content. The ability to use images in this manner will broaden your design options as we move along through the remainder of this course. Before the midterm, you were introduced how to add full-page images to your site background, and you reviewed this option again in this module. You also learned the use of tiling small images as textures or patterns, this new skill should take your site design in a whole new direction. A new HTML5 element-figure element was introduced during this module. It is important to use it to create more semantic content in conjunction with the figcaption element. Finally, we examined how to use sprite image to create rollovers, and learned the important usages of sprite image.
Student Outcomes:
|
In class activity:
1. Use the image to create a social media icon roll overs
2. Design and code a simple landing page/home page that employs a large, scalable background image and a CSS rollover navigation menu.
Create an image-based navigation menu using the techniques and methods demonstrated in this module. You should design for 3 states: link, hover, and active. The text in the navigation menu should be:
Here are some examples:
Create an image-based navigation menu using the techniques and methods demonstrated in this module. You should design for 3 states: link, hover, and active. The text in the navigation menu should be:
- Products
- Events
- About
- Contact
- Blog
Here are some examples:
M9 Discussion
Research 3 options for creating interactive prototypes and share your findings with your classmates.
Be sure to investigate not only free or online solutions, but the wide variety that are available to us as either desktop or mobile apps.
Please <click here> to participate discussion. (Participation points)
Be sure to investigate not only free or online solutions, but the wide variety that are available to us as either desktop or mobile apps.
Please <click here> to participate discussion. (Participation points)
M9 Homework:
1. View the videos in M10 and complete the tasks
2. Human+Design (proposal)
Due Date:
Description:
For our final project, you will be creating a small website about something you are passionate for. Human+Design can be a very loose umbrella term for this project. In the past, students have done projects with subjects ranging from personal survival kit, organic farming, stars and constellations, brunch to post-it note.
<click here> for final project grading rubric.
For our final project, you will be creating a small website about something you are passionate for. Human+Design can be a very loose umbrella term for this project. In the past, students have done projects with subjects ranging from personal survival kit, organic farming, stars and constellations, brunch to post-it note.
<click here> for final project grading rubric.
Requirement
Design and Content
Design and Content
- All content, including photos, illustrations and written descriptions, must be 100% original.
- Site should include at least 20 original art works (photo, illustration)
- Site must include a contact and/or user feedback form.
- The site should have a logical color scheme for navigation, text, and ornamental elements.
- Large images and textures may be used for styling if done tastefully and do not distract from site content.
- The site may use advanced styling, such as CSS transitions, gradients, shapes, etc. as long as they are
- tasteful and do not distract from the content.
- Site must work on latest versions of Chrome, Safari, Firefox, and IE8 or above.
- Site must be hosted on your own domain server.
- Site must employ only HTML and CSS.
- Site should work at any resolution., but optimize for 1024x768. Do not design solely for a specific monitor
- size unless you have been specifically commissioned to do so. Since we did not cover liquid layout in this
- course, use other methods to ensure your site will display nicely.
- All images must be compressed for optimal load time.
- The “home” page of the site must be named “index.html.”
- Site must include a site map which links to all your pages.
- It is highly important that the site accommodates those with visual and audial disabilities. Use link titles and alt tags appropriately.
- Site proposal pdf file
- Site map for client review
- Interactive site wireframes for client review
- Web Style guide containing color palette, type choices, type sizes, and image size requirements
- Live site deployed on your own hosted web server
- A ZIP archive file containing all of the above and any other ancillary work files (yes A ZIP file, the interactive wireframes can be a short cut)
This week: pdf project proposal including the following (please refer M8 page for examples)
- Overview: define design project (Creative brief)
- Proof of concept: your research and findings (Empathize, run your idea by someone, get feedback and data)
- User experience: Define the target audience, demonstrating a consideration of both primary and secondary targeted site users (Persona)
- Ideas: apply findings to design decisions, demonstrate knowledge of topic and identify resources for content development (e.g. software required, content experts need to be interviewed. The more original the topic the more fun you will have and the better response you will get. The more cliché the topic the more struggle you will have finding an interesting angle that has not already been done).
- Visual: Sketches of ideas
- Identify testing scenario and methods.
- Time line
Submission Directions:
- Create a project folder inside wnm249 named finalProject
- Create a subdirectory named proposal
- Upload your single pdf file to this directory
- <click here> to post your url on homework submission discussion page
Grading Criteria:
Exceeds expectations (A/B) | Meets expectations (C) | Does not meet expectations (D/F) | |
---|---|---|---|
Presented a clearly defined design project (creative brief) | 2pt | 1.5pts | 1pt |
Provided proof of concept demonstrating the feasibility (scope of project) | 2pt | 1.5pts | 1pt |
Conducted appropriate research and apply findings to design decisions (research) | 2pt | 1.5pts | 1pt |
Clearly define the target audience demonstrating a consideration of both primary and secondary users. (persona) | 2pt | 1.5pts | 1pt |
Demonstrated design thinking and visual communication (sketch+moodboard) | 2pt | 1.5pts | 1pt |
Demonstrated interactive design principles as appropriate to the project(sketch+notes) | 2pt | 1.5pts | 1pt |
Developed a final testing plan based on initial explorations (testing plan) | 2pt | 1.5pts | 1pt |
Developed a production schedule/time line (time line) | 2pt | 1.5pts | 1pt |
Demonstrated organizational skills in the proposal (pdf presentation) | 2pt | 1.5pts | 1pt |
Meeting Deadline | 2pt | 1.5pts | 1pt |