1. Design for Web
Practical Guide

2. Where do I start?
2001 Design first website in 2001
2002 Won first national web competition
2003 Won second national-level web competition
2005 Present project using website
2007 Study in the UK
2008 Learn how to use WordPress
Work for Cardiff Students
First client from US
2009 Graduate and back to Malaysia
2010 Decided to run own business

3. Turning point

4. Penguin

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. Anatomy
A normal website will have:
● Header
● Content
● Sidebar
● Footer

7. Header
Sidebar
(widgets)
Content
(post)
Footer (widgets)

8. Grid System

9. Typography

10. Font facts
● Cosmetic structure of
the web.
● Not all computer has
the font.
Solution?

11. Terms
Heading 1
Heading 2
Heading 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
"This is blockquote. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."
Italic Bold Underline

12. Colour Scheme

13. Where to get pictures?
Commecial Free
● iStockphoto ● Flickr
● Shutter stock ● Google Search? (not
● Getty Images recommend for
company and product)

14. Flickr Advance Search
Go to: http://www.flickr.
com/search/advanced/?
1. Only photos
2. Tick "Only search Creative Commons"
a. Content to use commercially
b. To modify, adapt, etc

15. Learn from Copy

16. Easy to start
1. Learn from blog (WordPress)
2. Change theme, font, widgets
3. Upload images and insert
4. Learn HTML *CSS is a bonus*
5. Don't stop learning
6. Find good resources

17. Photoshop Shortcut
Ctrl + C / Ctrl + X
Copy / Paste
Shift (Hold) + Drag
Resize image and shape in ratio

18. Photoshop Shortcut
Ctrl + T
Transform tool. Resize text and image
Ctrl + Enter
After input text, press this for okay.
Alt (Hold) + Drag
Duplicate image, text, folder