Design for Web

376 views
323 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
376
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design for Web

  1. 1. Design for Web Practical Guide
  2. 2. Where do I start?2001 Design first website in 20012002 Won first national web competition2003 Won second national-level web competition2005 Present project using website2007 Study in the UK2008 Learn how to use WordPress Work for Cardiff Students First client from US2009 Graduate and back to Malaysia2010 Decided to run own business
  3. 3. Turning point
  4. 4. Penguin
  5. 5. Soalan● Apakah skills diperlukan untuk design web?● Saya ingin jadi web designer, subjek apa saya perlu belajar?● Di mana saya bermula?● Saya design for print, sama dengan web?
  6. 6. AnatomyA normal website will have:● Header● Content● Sidebar● Footer
  7. 7. Header Sidebar (widgets)Content (post) Footer (widgets)
  8. 8. Grid System
  9. 9. Typography
  10. 10. Font facts ● Cosmetic structure of the web. ● Not all computer has the font. Solution?
  11. 11. TermsHeading 1Heading 2Heading 3Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet doloremagna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortisnisl ut aliquip ex ea commodo consequat."This is blockquote. Ut wisi enim ad minim veniam, quis nostrud exerci tationullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."Italic Bold Underline
  12. 12. Colour Scheme
  13. 13. Where to get pictures?Commecial Free● iStockphoto ● Flickr● Shutter stock ● Google Search? (not● Getty Images recommend for company and product)
  14. 14. Flickr Advance SearchGo to: http://www.flickr.com/search/advanced/?1. Only photos2. Tick "Only search Creative Commons" a. Content to use commercially b. To modify, adapt, etc
  15. 15. Learn from Copy
  16. 16. Easy to start1. Learn from blog (WordPress)2. Change theme, font, widgets3. Upload images and insert4. Learn HTML *CSS is a bonus*5. Dont stop learning6. Find good resources
  17. 17. Photoshop ShortcutCtrl + C / Ctrl + XCopy / PasteShift (Hold) + DragResize image and shape in ratio
  18. 18. Photoshop ShortcutCtrl + TTransform tool. Resize text and imageCtrl + EnterAfter input text, press this for okay.Alt (Hold) + DragDuplicate image, text, folder

×