Design for Web

•

0 likes•413 views

Mohd Rafie Kamaruzaman

Design Technology Business

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

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)

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

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

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

Viewers also liked

Edisi 5 Feb Acehepaper

02jan A C Ehepaper

Bitly Presentation Ron PringleStraight North

Fox Cities Chamber Cultivate: Mobile MarketingThomas Clifford

Dania Jai Alai Proposed Plans & Agreementcity of dania beach

15acehepaper

Press Release 4 Q02 Tele Nordeste Celular EnTIM RI

FY 2017 Kickoff PresentationArts and Humanities Council of Montgomery County

Results presentation 2 q14 engTIM RI

Apresentacao de resultados 4T15TIM RI

FVCP Google Analytics Setup and Use for landing pagesStraight North

Edisi 22 Feb Medanepaper

Financing CDM ProjectsProbodh Mallick

2 Des Nasepaper

Get Any Job You Want Trepoint

Presentation1Nitish Kumar

TIM - Results Presentation 2Q13TIM RI

Stand Out in a CrowdThomas Clifford

08jan N Asepaper

PDD for GTCCProbodh Mallick

Viewers also liked (20)

Edisi 5 Feb Aceh

02jan A C Eh

Bitly Presentation Ron Pringle

Fox Cities Chamber Cultivate: Mobile Marketing

Dania Jai Alai Proposed Plans & Agreement

15aceh

Press Release 4 Q02 Tele Nordeste Celular En

FY 2017 Kickoff Presentation

Results presentation 2 q14 eng

Apresentacao de resultados 4T15

FVCP Google Analytics Setup and Use for landing pages

Edisi 22 Feb Medan

Financing CDM Projects

2 Des Nas

Get Any Job You Want

Presentation1

TIM - Results Presentation 2Q13

Stand Out in a Crowd

08jan N As

PDD for GTCC

Similar to Design for Web

Developing Custom WordPress Themes for ClientsSteven Slack

WordPress 101 Sunday Sessionpamselle

WordPress 101 Saturday Sessionpamselle

Twitter Bootstrap for web UI development Infinity Levels Studio

WordPress SEO Class Outline for NCSU Professional DevelopmentFrank Jones

Introduction to Gutenberg- Imran SayedImran Sayed

Freeformers starting to codeMax Bye

BUILD YOUR OWN WEBSITEIskender Piyale-Sheard

The Technique of Solving Html Assignment QuestionsLesa Cote

Responsive design in ploneAlin Voinea

GDI WordPress 3 January 2012pamselle

GDI WordPress 3 January 2012 (white background)pamselle

Monster JavaScript Course - 50+ projects and applicationsLaurence Svekis ✔

PortfolioSiva Ram

How to make a great websiteDr. Taher Ghazal

How I Built a Membership Site Using Joomla Components and without being a dev...jdaychi

Website developmentBrizGo

Html week7 2019 2020 by eng.osama ghandourOsama Ghandour Geris

WordPress Loves Google: Marrying Great Design and SEO with WordPressWebspec Design

SEO For Japan Market EntryZo Digital Japan

Similar to Design for Web (20)

Developing Custom WordPress Themes for Clients

WordPress 101 Sunday Session

WordPress 101 Saturday Session

Twitter Bootstrap for web UI development

WordPress SEO Class Outline for NCSU Professional Development

Introduction to Gutenberg- Imran Sayed

Freeformers starting to code

BUILD YOUR OWN WEBSITE

The Technique of Solving Html Assignment Questions

Responsive design in plone

GDI WordPress 3 January 2012

GDI WordPress 3 January 2012 (white background)

Monster JavaScript Course - 50+ projects and applications

Portfolio

How to make a great website

How I Built a Membership Site Using Joomla Components and without being a dev...

Website development

Html week7 2019 2020 by eng.osama ghandour

WordPress Loves Google: Marrying Great Design and SEO with WordPress

SEO For Japan Market Entry

Recently uploaded

SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1

VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Roomdivyansh0kumar0

Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure

Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy

B. Smith. (Architectural Portfolio.).pdfUniversity of Wisconsin-Milwaukee

Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Call Girls in Nagpur High Profile

Editorial design Magazine design project.pdftbatkhuu1

DragonBall PowerPoint Template for demo.pptxmirandajeremy200221

The history of music videos a level presentationamedia6

Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home

AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...BarusRa

young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service9953056974 Low Rate Call Girls In Saket, Delhi NCR

Peaches App development presentation decktbatkhuu1

VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile

$Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...$ $Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...$

Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...nagunakhan

Design Inspiration for College by Slidesgo.pptxTusharBahuguna2

Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823

Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls

CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun serviceanilsa9823

Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588

Recently uploaded (20)

SD_The MATATAG Curriculum Training Design.pptx

VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room

Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...

Chapter 19_DDA_TOD Policy_First Draft 2012.pdf

B. Smith. (Architectural Portfolio.).pdf

Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...

Editorial design Magazine design project.pdf

DragonBall PowerPoint Template for demo.pptx

The history of music videos a level presentation

Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...

AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...

young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service

Peaches App development presentation deck

VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...

$Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...$ $Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...$

Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...

Design Inspiration for College by Slidesgo.pptx

Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)

Best VIP Call Girls Noida Sector 44 Call Me: 8448380779

CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service

Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...

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

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

Design for Web

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Design for Web

Similar to Design for Web (20)

Recently uploaded

Recently uploaded (20)

Design for Web