SlideShare a Scribd company logo
1 of 18
Download to read offline
Design for Web
      Practical Guide
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
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


                     Sidebar
                    (widgets)
Content
 (post)




          Footer (widgets)
Grid System
Typography
Font facts

             ● Cosmetic structure of
               the web.

             ● Not all computer has
               the font.

             Solution?
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
Colour Scheme
Where to get pictures?
Commecial         Free
● iStockphoto     ● Flickr
● Shutter stock   ● Google Search? (not
● Getty Images      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 commercially
  b. 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 + X
Copy / Paste

Shift (Hold) + Drag
Resize image and shape in ratio
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

More Related Content

Viewers also liked

Edisi 5 Feb Aceh
Edisi 5 Feb AcehEdisi 5 Feb Aceh
Edisi 5 Feb Acehepaper
 
02jan A C Eh
02jan A C Eh02jan A C Eh
02jan A C Ehepaper
 
Bitly Presentation Ron Pringle
Bitly Presentation   Ron PringleBitly Presentation   Ron Pringle
Bitly Presentation Ron PringleStraight North
 
Fox Cities Chamber Cultivate: Mobile Marketing
Fox Cities Chamber Cultivate: Mobile MarketingFox Cities Chamber Cultivate: Mobile Marketing
Fox Cities Chamber Cultivate: Mobile MarketingThomas Clifford
 
Dania Jai Alai Proposed Plans & Agreement
Dania Jai Alai Proposed Plans & AgreementDania Jai Alai Proposed Plans & Agreement
Dania Jai Alai Proposed Plans & Agreementcity of dania beach
 
15aceh
15aceh15aceh
15acehepaper
 
Press Release 4 Q02 Tele Nordeste Celular En
Press Release 4 Q02   Tele Nordeste Celular EnPress Release 4 Q02   Tele Nordeste Celular En
Press Release 4 Q02 Tele Nordeste Celular EnTIM RI
 
Results presentation 2 q14 eng
Results presentation 2 q14 engResults presentation 2 q14 eng
Results presentation 2 q14 engTIM RI
 
Apresentacao de resultados 4T15
Apresentacao de resultados 4T15Apresentacao de resultados 4T15
Apresentacao de resultados 4T15TIM RI
 
FVCP Google Analytics Setup and Use for landing pages
FVCP Google Analytics Setup and Use for landing pagesFVCP Google Analytics Setup and Use for landing pages
FVCP Google Analytics Setup and Use for landing pagesStraight North
 
Edisi 22 Feb Medan
Edisi 22 Feb MedanEdisi 22 Feb Medan
Edisi 22 Feb Medanepaper
 
2 Des Nas
2 Des Nas2 Des Nas
2 Des Nasepaper
 
Get Any Job You Want
Get Any Job You Want Get Any Job You Want
Get Any Job You Want Trepoint
 
TIM - Results Presentation 2Q13
TIM - Results Presentation 2Q13TIM - Results Presentation 2Q13
TIM - Results Presentation 2Q13TIM RI
 
08jan N As
08jan N As08jan N As
08jan N Asepaper
 

Viewers also liked (20)

Edisi 5 Feb Aceh
Edisi 5 Feb AcehEdisi 5 Feb Aceh
Edisi 5 Feb Aceh
 
02jan A C Eh
02jan A C Eh02jan A C Eh
02jan A C Eh
 
Bitly Presentation Ron Pringle
Bitly Presentation   Ron PringleBitly Presentation   Ron Pringle
Bitly Presentation Ron Pringle
 
Fox Cities Chamber Cultivate: Mobile Marketing
Fox Cities Chamber Cultivate: Mobile MarketingFox Cities Chamber Cultivate: Mobile Marketing
Fox Cities Chamber Cultivate: Mobile Marketing
 
Dania Jai Alai Proposed Plans & Agreement
Dania Jai Alai Proposed Plans & AgreementDania Jai Alai Proposed Plans & Agreement
Dania Jai Alai Proposed Plans & Agreement
 
15aceh
15aceh15aceh
15aceh
 
Press Release 4 Q02 Tele Nordeste Celular En
Press Release 4 Q02   Tele Nordeste Celular EnPress Release 4 Q02   Tele Nordeste Celular En
Press Release 4 Q02 Tele Nordeste Celular En
 
FY 2017 Kickoff Presentation
FY 2017 Kickoff PresentationFY 2017 Kickoff Presentation
FY 2017 Kickoff Presentation
 
Results presentation 2 q14 eng
Results presentation 2 q14 engResults presentation 2 q14 eng
Results presentation 2 q14 eng
 
Apresentacao de resultados 4T15
Apresentacao de resultados 4T15Apresentacao de resultados 4T15
Apresentacao de resultados 4T15
 
FVCP Google Analytics Setup and Use for landing pages
FVCP Google Analytics Setup and Use for landing pagesFVCP Google Analytics Setup and Use for landing pages
FVCP Google Analytics Setup and Use for landing pages
 
Edisi 22 Feb Medan
Edisi 22 Feb MedanEdisi 22 Feb Medan
Edisi 22 Feb Medan
 
Financing CDM Projects
Financing CDM ProjectsFinancing CDM Projects
Financing CDM Projects
 
2 Des Nas
2 Des Nas2 Des Nas
2 Des Nas
 
Get Any Job You Want
Get Any Job You Want Get Any Job You Want
Get Any Job You Want
 
Presentation1
Presentation1Presentation1
Presentation1
 
TIM - Results Presentation 2Q13
TIM - Results Presentation 2Q13TIM - Results Presentation 2Q13
TIM - Results Presentation 2Q13
 
Stand Out in a Crowd
Stand Out in a CrowdStand Out in a Crowd
Stand Out in a Crowd
 
08jan N As
08jan N As08jan N As
08jan N As
 
PDD for GTCC
PDD for GTCCPDD for GTCC
PDD for GTCC
 

Similar to Design for Web

Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsSteven Slack
 
WordPress 101 Sunday Session
WordPress 101 Sunday SessionWordPress 101 Sunday Session
WordPress 101 Sunday Sessionpamselle
 
WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Sessionpamselle
 
Twitter Bootstrap for web UI development
Twitter Bootstrap for web UI development Twitter Bootstrap for web UI development
Twitter Bootstrap for web UI development Infinity Levels Studio
 
WordPress SEO Class Outline for NCSU Professional Development
WordPress SEO Class Outline for NCSU Professional DevelopmentWordPress SEO Class Outline for NCSU Professional Development
WordPress SEO Class Outline for NCSU Professional DevelopmentFrank Jones
 
Introduction to Gutenberg- Imran Sayed
Introduction to Gutenberg- Imran SayedIntroduction to Gutenberg- Imran Sayed
Introduction to Gutenberg- Imran SayedImran Sayed
 
Freeformers starting to code
Freeformers starting to codeFreeformers starting to code
Freeformers starting to codeMax Bye
 
The Technique of Solving Html Assignment Questions
The Technique of Solving Html Assignment QuestionsThe Technique of Solving Html Assignment Questions
The Technique of Solving Html Assignment QuestionsLesa Cote
 
Responsive design in plone
Responsive design in ploneResponsive design in plone
Responsive design in ploneAlin Voinea
 
GDI WordPress 3 January 2012 (white background)
GDI WordPress 3 January 2012 (white background)GDI WordPress 3 January 2012 (white background)
GDI WordPress 3 January 2012 (white background)pamselle
 
GDI WordPress 3 January 2012
GDI WordPress 3 January 2012GDI WordPress 3 January 2012
GDI WordPress 3 January 2012pamselle
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsLaurence Svekis ✔
 
How to make a great website
How to make a great websiteHow to make a great website
How to make a great websiteDr. Taher Ghazal
 
How I Built a Membership Site Using Joomla Components and without being a dev...
How I Built a Membership Site Using Joomla Components and without being a dev...How I Built a Membership Site Using Joomla Components and without being a dev...
How I Built a Membership Site Using Joomla Components and without being a dev...jdaychi
 
Website development
Website developmentWebsite development
Website developmentBrizGo
 
Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourHtml week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourOsama Ghandour Geris
 
WordPress Loves Google: Marrying Great Design and SEO with WordPress
WordPress Loves Google: Marrying Great Design and SEO with WordPressWordPress Loves Google: Marrying Great Design and SEO with WordPress
WordPress Loves Google: Marrying Great Design and SEO with WordPressWebspec Design
 
SEO For Japan Market Entry
SEO For Japan Market EntrySEO For Japan Market Entry
SEO For Japan Market EntryZo Digital Japan
 

Similar to Design for Web (20)

Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
WordPress 101 Sunday Session
WordPress 101 Sunday SessionWordPress 101 Sunday Session
WordPress 101 Sunday Session
 
WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Session
 
Twitter Bootstrap for web UI development
Twitter Bootstrap for web UI development Twitter Bootstrap for web UI development
Twitter Bootstrap for web UI development
 
WordPress SEO Class Outline for NCSU Professional Development
WordPress SEO Class Outline for NCSU Professional DevelopmentWordPress SEO Class Outline for NCSU Professional Development
WordPress SEO Class Outline for NCSU Professional Development
 
Introduction to Gutenberg- Imran Sayed
Introduction to Gutenberg- Imran SayedIntroduction to Gutenberg- Imran Sayed
Introduction to Gutenberg- Imran Sayed
 
Freeformers starting to code
Freeformers starting to codeFreeformers starting to code
Freeformers starting to code
 
BUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITEBUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITE
 
The Technique of Solving Html Assignment Questions
The Technique of Solving Html Assignment QuestionsThe Technique of Solving Html Assignment Questions
The Technique of Solving Html Assignment Questions
 
Responsive design in plone
Responsive design in ploneResponsive design in plone
Responsive design in plone
 
GDI WordPress 3 January 2012 (white background)
GDI WordPress 3 January 2012 (white background)GDI WordPress 3 January 2012 (white background)
GDI WordPress 3 January 2012 (white background)
 
GDI WordPress 3 January 2012
GDI WordPress 3 January 2012GDI WordPress 3 January 2012
GDI WordPress 3 January 2012
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
 
Portfolio
PortfolioPortfolio
Portfolio
 
How to make a great website
How to make a great websiteHow to make a great website
How to make a great website
 
How I Built a Membership Site Using Joomla Components and without being a dev...
How I Built a Membership Site Using Joomla Components and without being a dev...How I Built a Membership Site Using Joomla Components and without being a dev...
How I Built a Membership Site Using Joomla Components and without being a dev...
 
Website development
Website developmentWebsite development
Website development
 
Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourHtml week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandour
 
WordPress Loves Google: Marrying Great Design and SEO with WordPress
WordPress Loves Google: Marrying Great Design and SEO with WordPressWordPress Loves Google: Marrying Great Design and SEO with WordPress
WordPress Loves Google: Marrying Great Design and SEO with WordPress
 
SEO For Japan Market Entry
SEO For Japan Market EntrySEO For Japan Market Entry
SEO For Japan Market Entry
 

Recently uploaded

How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfworkingdev2003
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoCarolTelles6
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作7tz4rjpd
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degreeyuu sss
 
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一F dds
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 

Recently uploaded (20)

How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus Rizzo
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
 
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 

Design for Web

  • 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
  • 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)
  • 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
  • 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
  • 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