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

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?

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

Colour Scheme

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