Design for Web
Upcoming SlideShare
Loading in...5

Design for Web






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Design for Web Design for Web Presentation Transcript

  • Design for Web Practical Guide
  • 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
  • Turning point
  • Penguin
  • 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?
  • AnatomyA normal website will have:● Header● Content● Sidebar● Footer
  • Header Sidebar (widgets)Content (post) Footer (widgets)
  • Grid System
  • Typography
  • Font facts ● Cosmetic structure of the web. ● Not all computer has the font. Solution?
  • 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
  • Colour Scheme
  • Where to get pictures?Commecial Free● iStockphoto ● Flickr● Shutter stock ● Google Search? (not● Getty Images recommend for company and product)
  • Flickr Advance SearchGo to: Only photos2. Tick "Only search Creative Commons" a. Content to use commercially b. To modify, adapt, etc
  • Learn from Copy
  • 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
  • Photoshop ShortcutCtrl + C / Ctrl + XCopy / PasteShift (Hold) + DragResize image and shape in ratio
  • Photoshop ShortcutCtrl + TTransform tool. Resize text and imageCtrl + EnterAfter input text, press this for okay.Alt (Hold) + DragDuplicate image, text, folder