M5: Designing with Color and TypeClass Recap: As you can see, CSS adds a whole new dimension to how you can design for the web. Styling with the color and background-color property alone affords an endless palette of tones and hues. Adding in transparency values and using <span> to highlight or color text elements contributes even more to the variety of styling options. In this module, we also looked at the many type, font, and text properties that enable you to style and format text for readability, tone, and visual interest.
This was your first introduction to styling with CSS, but we are by no means finished. In upcoming modules, we will continue to explore the wide world of CSS and delve into its many mysteries. Student Outcomes:
|
Translate Wireframes into Design
Some times it is a direct translation, but sometime, it changes. Keep in mind that nothing is set on stone. Based on client feedback, we will work / refine the wireframe and layout.
Client: Lingraphica | UX/UI Designer: Lawrence Lee
Client: Lingraphica | UX/UI Designer: Lawrence Lee
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
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
Simplicity
M5 Homework:
1. View the videos in M6 and complete the tasks.
2. Finish Site Wireframes + Finalize Design Layout, start coding in class
Due Date:
Description:
For this assignment, you will be creating a small website that takes your viewer on a tour of a Bay Area city. It will consist of five HTML pages: one home page with an introduction, and four other pages that have stops on your tour.
For this week you will select one final concept, create the low fidelity wireframes for your entire site. You will also design all five pages.
For this assignment, you will be creating a small website that takes your viewer on a tour of a Bay Area city. It will consist of five HTML pages: one home page with an introduction, and four other pages that have stops on your tour.
For this week you will select one final concept, create the low fidelity wireframes for your entire site. You will also design all five pages.
Purpose:
This assignment reinforces the topics covered in the module. It also demonstrates the process of creating a website from the beginning to completion.
This assignment reinforces the topics covered in the module. It also demonstrates the process of creating a website from the beginning to completion.
Tools:
Any software of your choice. Photoshop for layout.
Any software of your choice. Photoshop for layout.
Submission Directions:
Upload a ONE PAGE html file in the same folder where you posted your site map and design concept.
The one page should contain:
Upload a ONE PAGE html file in the same folder where you posted your site map and design concept.
The one page should contain:
- wireframes for all 5 pages
- design layout for home page and four sub-pages.
- example: http://agustinbella.com/AAU/WNM249/m4/SfTour.html
Grading Criteria:
Exceeds expectations (A/B) | Meets expectations (C) | Does not meet expectations (D/F) | |
---|---|---|---|
Wireframes | Wireframes are complete, including all five pages |
Wireframe provided. | |
2pts | 1pt | ||
Design Layout | All five 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 |