Project 2 presentation wen liu

108 views
83 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
108
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Project 2 presentation wen liu

  1. 1. The Element of Design: ValueWen LiuWeb Authoring Project 2
  2. 2. Normally, Value was existed in sketch and fine art, it also is a important element indesign. Basically, Value is the relative degree of lightness and darkness in a designelement and it is used to describe objects, shapes, and space.
  3. 3. High Resolution Mock UpCreate a simply home page by usingPhotoshop, which is easily help meorganize the website.Whole website using the color toExpress the valueWebsiteLogo
  4. 4. SitemapThe Navigation directlyConnect with three pages,they are Value, Gallery and ContactUnder home page, there areSome thumbnails and referencesThe main point of the websitewhich will be the value, it showsto audience how value will workIn element of design
  5. 5. Source Materials, Assets & Site Inventory
  6. 6. Set the .Body in CSS size be 1663px x 426px,Which help me easily organize each column of website
  7. 7. Design Challenge#1Automatic slideshow with mouse click tag
  8. 8. Using Flex Slider Plugin, and createan div id named as home-slider, inOrder to help me change the valuein CSSSetup the Slide show positionin the home page, and useThe jquery.flexslider-min.js toEnsure the mouse clickfunction work on the slider"touchstart":"click";d.cloneCount=0;d.cloneOffset=0;d.manualPause=false;
  9. 9. Design Challenge#2Responsiveimage and text
  10. 10. using media query and set<meta name="viewport" content="width=device-width, initial-scale=1"/> in <head> tag of HTMLCreate 3 media query in CSS with the plugin was called css3-mediaqueries.js5 columns in the size between 480px and 767px3 columns in max-width size 760px, with a comboNavigation8 columns in the size between 760px and 991px
  11. 11. Design Challenge#3When mouse move on the picture,Picture turn to pink with some text on it
  12. 12. Create HTML with <figure> and <figcaption>also need to work with div class called “one-third-thumbs clearfix“ and JavaScriptHTML JavaScript CSS
  13. 13. Conclusion & Future directionMake an intuitive and laconic website,Express more dynamic effects.http://www.instructables.com/
  14. 14. Thanks for watching

×