View
361
Download
1
Category
Preview:
DESCRIPTION
Citation preview
Design for WebPractical Guide
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
Where do I start?
Turning point
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?
Anatomy
A normal website will have: ● Header
● Content
● Sidebar
● Footer
Header
Content(post)
Sidebar(widgets)
Footer (widgets)
Grid System
Typography
Font facts
● Cosmetic structure of
the web. ● Not all computer has
the font. Solution?
Terms
Heading 1Heading 2Heading 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
Where to get pictures?
Commecial
● iStockphoto
● Shutter stock
● Getty Images
Free
● Flickr
● Google Search? (not
recommend for
company and product)
Flickr Advance Search
Go to: http://www.flickr.com/search/advanced/? 1. Only photos
2. Tick "Only search Creative Commons"a. Content to use commerciallyb. To modify, adapt, etc
Learn from Copy
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
Photoshop Shortcut
Ctrl + C / Ctrl + XCopy / Paste Shift (Hold) + DragResize image and shape in ratio
Photoshop Shortcut
Ctrl + T Transform tool. Resize text and image Ctrl + EnterAfter input text, press this for okay. Alt (Hold) + DragDuplicate image, text, folder
Recommended