Web Design Fundamentals

Slide 1

Slide 1 text

WEB DESIGN FUNDAMENTALS

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Please do not copy nor distribute without permission from the author. Thank you!

Slide 4

Slide 4 text

you your website your users

Slide 5

Slide 5 text

you TALENT TOOLS

Slide 6

Slide 6 text

your website Content Interface

Slide 7

Slide 7 text

tools your users behavior

Slide 8

Slide 8 text

why what when how where ?

Slide 9

Slide 9 text

why why do I need a website? why is web design a bit difficult to learn? why do I need to learn coding?

Slide 10

Slide 10 text

what what do all websites have in common? what are websites made of? what are the good practices in web design? what tools do I use to design and develop a website? what are the fundamental differences between designing for print and designing for the web?

Slide 11

Slide 11 text

when how long does it take to design and develop a web site? how long will it take me to learn web design and development?

Slide 12

Slide 12 text

how how do I design and build a website from scratch? how much does it cost to design and build a site? how much does it cost to maintain a site?

Slide 13

Slide 13 text

where where do I begin? where does my website live? where do I publish it?

Slide 14

Slide 14 text

where do I begin?

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

PRO QUICK &PAINLESS LAZY

Slide 17

Slide 17 text

WORTHLESS

Slide 18

Slide 18 text

PRE-PRODUCTION PRODUCTION POST-PRODUCTION 1 2 3

Slide 19

Slide 19 text

CLIENT QUESTIONNAIRE >

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

What are websites made of? What do all websites have in common?

Slide 22

Slide 22 text

Static Dynamic 20

Slide 23

Slide 23 text

web of Page Elements A 22

Slide 24

Slide 24 text

Navigation Text Multimedia

Slide 25

Slide 25 text

Content + Interface

Slide 26

Slide 26 text

web of design layers 22

Slide 27

Slide 27 text

Structure Style Behaviour

Slide 28

Slide 28 text

Structure

Slide 29

Slide 29 text

Hamburger Tomato Mayo Lettuce

Slide 30

Slide 30 text

Style

Slide 31

Slide 31 text

Cabbage Sayote Salad

Slide 32

Slide 32 text

Behaviour

Slide 33

Slide 33 text

sugar?

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

What can I put on a web page?

Slide 37

Slide 37 text

CONTENT text multimedia

Slide 38

Slide 38 text

TEXT

Slide 39

Slide 39 text

Multimedia audio graphics video 28

Slide 40

Slide 40 text

1. Native 2. Plug-in Dependent

Slide 41

Slide 41 text

Graphics 28

Slide 42

Slide 42 text

1. Bitmap 2. Vector

Slide 43

Slide 43 text

Bitmap Vector pixel-dependent pixel-independent image is mapped into a grid image is defined mathematically difficult to scale scalable

Slide 44

Slide 44 text

jpeg gif png tiff bmp pictraw psd aieps pdf ico dng

Slide 45

Slide 45 text

tiff bmp pictraw psd aieps pdf ico dng jpeg gif png

Slide 46

Slide 46 text

AUDio 30

Slide 47

Slide 47 text

mp3 wav midi ram aiff SAMPLES: Grizzly Bear Apple Showcase Buzz Soundcloud

Slide 48

Slide 48 text

Video 31

Slide 49

Slide 49 text

flv vs HTML5 VIDEO SAMPLES: DarkStrider Vimeo Apple Showcase HTML5 Video wmv mov mp4 avi 3Gp

Slide 50

Slide 50 text

Elements Interactive

Slide 51

Slide 51 text

Flash HTML+CSS+JS SAMPLES: Leo Burnett 2Advanced Google Maps Google Art Project Mugtug Sketchpad Aviary 25

Slide 52

Slide 52 text

Tools 28

Slide 53

Slide 53 text

BROWSERS

Slide 54

Slide 54 text

BROWSERS

Slide 55

Slide 55 text

BROWSERS Firefox Safari Opera IE Chrome 36

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

GRAPHIC EDITORS Adobe Photoshop Mac / PC Adobe Illustrator Mac / PC GIMP Mac / PC /Linux Inkscape Mac / PC /Linux $ $ FREE! FREE!

Slide 61

Slide 61 text

I.D.ES and“WYSIWYG” EDITORS Dreamweaver Mac / PC $ Muse Mac / PC

Slide 62

Slide 62 text

TEXT EDITORS Notepad++ PC Dreamweaver Mac / PC $ FREE! Sublime Text Mac / PC $

Slide 63

Slide 63 text

Dreamweaver Mac / PC FTP CLIENTS Cyberduck Mac Transmit Mac FileZilla Mac / PC / Linux FireFTP Firefox Add-on $ FREE! $ FREE! FREE!

Slide 64

Slide 64 text

Others Adobe Flash Mac / PC WD Toolbar Firebug Firefox Add-ons $ FREE! LiveReload Mac / PC $

Slide 65

Slide 65 text

Process 20

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

PRE-PRODUCTION PRODUCTION POST-PRODUCTION 1 2 3

Slide 68

Slide 68 text

PRE-PRODUCTION DESIGN BRIEF RESEARCH CONTENT DEVELOPMENT INFORMATION ARCHITECTURE 1

Slide 69

Slide 69 text

Design Brief goals & strategies target audience brand standards technical considerations

Slide 70

Slide 70 text

Research technologies market/audience visual research keyword research (Search Engine Optimization)

Slide 71

Slide 71 text

CLIENT QUESTIONNAIRE >

Slide 72

Slide 72 text

Content Development inventory creation & optimization

Slide 73

Slide 73 text

CONTENT DEVELOPMENT

Slide 74

Slide 74 text

CONTENT DEVELOPMENT

Slide 75

Slide 75 text

How do we organize all this content?

Slide 76

Slide 76 text

Information Architecture The art and science of organising the content and flow of a website

Slide 77

Slide 77 text

SITE OUTLINE I.A.

Slide 78

Slide 78 text

I.A.

Slide 79

Slide 79 text

I.A.

Slide 80

Slide 80 text

I.A.

Slide 81

Slide 81 text

I.A.

Slide 82

Slide 82 text

I.A.

Slide 83

Slide 83 text

I.A. I.P. COURSE Contact send message see address find location on map Map Form Contact Details Course Title Course Description read title + description look at sample photos be convinced to register click on Register Now button Prerequisites must be prominent Registration Form fill up fields send form - validation - user gets a "Thank You" email Course Meta read meta info click through to INSTRUCTOR profile click through to REG. INFO/FAQs Lightbox: - instructor profile - Reg info / FAQs Main Header navigate Nav Courses Gallery Services FAQs About Contact Logo Link back to PCCI Main click through to pcci.com.ph Social Media Widgets see buttons click on buttons - Reg Now button => if ani-scrollable on mobile, do it

Slide 84

Slide 84 text

I.A. I.P. COURSE Contact send message see address d location on map Map Form Contact Details Course Title Course Description read title + description look at sample photos be convinced to register click on Register Now button Prerequisites must be prominent Registration Form fill up fields send form - validation - user gets a "Thank You" email Course Meta read meta info click through to INSTRUCTOR profile click through to REG. INFO/FAQs Lightbox: - instructor profile - Reg info / FAQs Social Media Widgets see buttons click on buttons - Reg Now button => if ani-scrollable on mobile, do it

Slide 85

Slide 85 text

I.A. I.P. GALLERY Contact send message see address ﬁnd location on map Map Form Contact Details Main Header navigate Nav Courses Gallery Services FAQs About Contact Logo Link back to PCCI Main click through to pcci.com.ph At The Lobby scan/read INFO ABOUT EXHIBIT see a grid of thumbnails click on a thumbnail browse through collection of images - min. 6, max. 12 images - small thumbnails - big pics - captions/credits text Exhibit Title Artist Name Blurb Dates Student Work see a grid of thumbnails click on a thumbnail browse through collection of images - min. 6, max. 12 images - small thumbnails - big pics - captions/credits text jQuey Plug-ins - Masonry - Lightbox

Slide 86

Slide 86 text

I.A. I.P. GALLERY ontact d message e address cation on map m tact Details At The Lobby scan/read INFO ABOUT EXHIBIT see a grid of thumbnails click on a thumbnail browse through collection of images - min. 6, max. 12 images - small thumbnails - big pics - captions/credits text Exhibit Title Artist Name Blurb Dates Student Work see a grid of thumbnails click on a thumbnail browse through collection of images - min. 6, max. 12 images - small thumbnails - big pics - captions/credits text jQuey Plug-ins - Masonry - Lightbox

Slide 87

Slide 87 text

WIREFRAMES (WHITEBOARD) I.A.

Slide 88

Slide 88 text

WIREFRAMES (PAPER) I.A.

Slide 89

Slide 89 text

WIREFRAMES (PAPER) I.A.

Slide 90

Slide 90 text

WIREFRAMES (PAPER) I.A.

Slide 91

Slide 91 text

WIREFRAMES (PAPER) I.A.

Slide 92

Slide 92 text

WIREFRAMES (PAPER) I.A.

Slide 93

Slide 93 text

WIREFRAMES (PAPER) I.A.

Slide 94

Slide 94 text

I.A. WIREFRAMES (DIGITAL)

Slide 95

Slide 95 text

I.A. WIREFRAMES (DIGITAL)

Slide 96

Slide 96 text

WIREFRAMES (DIGITAL) I.A.

Slide 97

Slide 97 text

I.A. WIREFRAMES (DIGITAL)

Slide 98

Slide 98 text

I.A. WIREFRAMES (DIGITAL)

Slide 99

Slide 99 text

PRODUCTION FRONT-END DESIGN & DEVELOPMENT BACK END DEVELOPMENT DEPLOYMENT 2

Slide 100

Slide 100 text

Design

Slide 101

Slide 101 text

PINTEREST.COM DESIGN

Slide 102

Slide 102 text

COLOURLOVERS.COM DESIGN

Slide 103

Slide 103 text

DESIGN

Slide 104

Slide 104 text

DESIGN MOOD BOARD

Slide 105

Slide 105 text

DESIGN MOOD BOARD

Slide 106

Slide 106 text

MOOD BOARD DESIGN

Slide 107

Slide 107 text

VISUAL MOCK-UPS DESIGN

Slide 108

Slide 108 text

VISUAL MOCK-UPS DESIGN

Slide 109

Slide 109 text

VISUAL MOCK-UPS DESIGN

Slide 110

Slide 110 text

VISUAL MOCK-UPS DESIGN

Slide 111

Slide 111 text

VISUAL MOCK-UPS DESIGN

Slide 112

Slide 112 text

VISUAL MOCK-UPS DESIGN

Slide 113

Slide 113 text

Front-End Development

Slide 114

Slide 114 text

Languages sprachen ݴ talen langages Γλώσσες linguaggi ݴޠ línguas Языки lenguajes 44

Slide 115

Slide 115 text

Languages of theWeb markup stylesheet scripting query

Slide 116

Slide 116 text

HTML CSS Javascript

Slide 117

Slide 117 text

Markup 31

Slide 118

Slide 118 text

format structure instructions tags links HTML Hypertext Markup Language

Slide 119

Slide 119 text

The HTML Tag

Slide 120

Slide 120 text

Slide 121

Slide 121 text

This tag indicates a paragraph.

Slide 122

Slide 122 text

This tag indicates a paragraph.

This tag indicates

a paragraph.

Slide 123

Slide 123 text

Think in boxes...

Slide 124

Slide 124 text

Slide 125

Slide 125 text

Basic HTML Tags

Slide 126

Slide 126 text

Hello World!

Slide 127

Slide 127 text

HTML5 XHTML1 HTML4

Slide 128

Slide 128 text

Stylesheet 33

Slide 129

Slide 129 text

presentation css Cascading Style Sheets

Slide 130

Slide 130 text

p { text-align: center; color: black; font-family: arial; }

Slide 131

Slide 131 text

CSS3 CSS2.1

Slide 132

Slide 132 text

Scripting 34

Slide 133

Slide 133 text

client-side server-side

Slide 134

Slide 134 text

JavaScript function toggleMenuClick(e) { var event = new Event(e); var menuId = event.target.parentNode.parentNode.id; toggleMenu(menuId.substring(2)); }

Slide 135

Slide 135 text

foreach ($charsetList as $charset) { echo “” . $charset . “”; } PHP

Slide 136

Slide 136 text

<% Set oConn = Server.CreateObject(“ADODB.Connection”) oConn.Open “DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=” & Server.MapPath(“DB.mdb”) Set rsUsers = Server.CreateObject(“ADODB.Recordset”) rsUsers.Open “SELECT * FROM Users”, oConn %> ASP

Slide 137

Slide 137 text

class com.example.Greeter extends MovieClip { public function Greeter() {} public function onLoad() :Void { var txtHello:TextField = this.createTextField ("txtHello", 0, 0, 0, 100, 100); txtHello.text = "Hello, world"; } } ActionScript

Slide 138

Slide 138 text

Query 35

Slide 139

Slide 139 text

SQL SELECT Book.title, count(*) AS Authors FROM Book JOIN Book_author ON Book.isbn = Book_author.isbn GROUP BY Book.title;

Slide 140

Slide 140 text

HTML + CSS + Javascript = Static / Dynamic HTML + CSS + Javascript + PHP + SQL = Dynamic HTML + CSS = Static