Web Design Fundamentals

Web Design Fundamentals, a one-day seminar at the Philippine Center for Creative Imaging. These slides won't make sense outside the context of the seminar and are meant as a visual reminder, reviewer, or guide for those who attended.

Transcript

1. WEB DESIGN FUNDAMENTALS
2. © Philippine Center for Creative Imaging and Datu Arellano
3. Please do not copy nor distribute without permission from the author. Thank you!
4. you your website your users
5. you TALENT TOOLS
6. your website Content Interface
7. tools your users behavior
8. why what when how where ?
9. why why do I need a website? why is web design a bit difficult to learn? why do I need to learn coding?
10. 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?
11. 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?
12. 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?
13. where where do I begin? where does my website live? where do I publish it?
14. where do I begin?
16. PRO QUICK &PAINLESS LAZY
17. WORTHLESS
18. PRE-PRODUCTION PRODUCTION POST-PRODUCTION 1 2 3
19. CLIENT QUESTIONNAIRE >
21. What are websites made of? What do all websites have in common?
22. Static Dynamic 20
23. web of Page Elements A 22
24. Navigation Text Multimedia
25. Content + Interface
26. web of design layers 22
27. Structure Style Behaviour
28. Structure
29. Hamburger Tomato Mayo Lettuce
30. Style
31. Cabbage Sayote Salad
32. Behaviour
33. sugar?
36. What can I put on a web page?
37. CONTENT text multimedia
38. TEXT
39. Multimedia audio graphics video 28
40. 1. Native 2. Plug-in Dependent
41. Graphics 28
42. 1. Bitmap 2. Vector
43. Bitmap Vector pixel-dependent pixel-independent image is mapped into a grid image is defined mathematically difficult to scale scalable
44. jpeg gif png tiff bmp pictraw psd aieps pdf ico dng
45. tiff bmp pictraw psd aieps pdf ico dng jpeg gif png
46. AUDio 30
47. mp3 wav midi ram aiff SAMPLES: Grizzly Bear Apple Showcase Buzz Soundcloud
48. Video 31
49. flv vs HTML5 VIDEO SAMPLES: DarkStrider Vimeo Apple Showcase HTML5 Video wmv mov mp4 avi 3Gp
50. Elements Interactive
51. Flash HTML+CSS+JS SAMPLES: Leo Burnett 2Advanced Google Maps Google Art Project Mugtug Sketchpad Aviary 25
52. Tools 28
53. BROWSERS
54. BROWSERS
55. BROWSERS Firefox Safari Opera IE Chrome 36
60. GRAPHIC EDITORS Adobe Photoshop Mac / PC Adobe Illustrator Mac / PC GIMP Mac / PC /Linux Inkscape Mac / PC /Linux $ $ FREE! FREE!
61. I.D.ES and“WYSIWYG” EDITORS Dreamweaver Mac / PC $ Muse Mac / PC
62. TEXT EDITORS Notepad++ PC Dreamweaver Mac / PC $ FREE! Sublime Text Mac / PC $
63. Dreamweaver Mac / PC FTP CLIENTS Cyberduck Mac Transmit Mac FileZilla Mac / PC / Linux FireFTP Firefox Add-on $ FREE! $ FREE! FREE!
64. Others Adobe Flash Mac / PC WD Toolbar Firebug Firefox Add-ons $ FREE! LiveReload Mac / PC $
65. Process 20
67. PRE-PRODUCTION PRODUCTION POST-PRODUCTION 1 2 3
68. PRE-PRODUCTION DESIGN BRIEF RESEARCH CONTENT DEVELOPMENT INFORMATION ARCHITECTURE 1
69. Design Brief goals & strategies target audience brand standards technical considerations
70. Research technologies market/audience visual research keyword research (Search Engine Optimization)
71. CLIENT QUESTIONNAIRE >
72. Content Development inventory creation & optimization
73. CONTENT DEVELOPMENT
74. CONTENT DEVELOPMENT
75. How do we organize all this content?
76. Information Architecture The art and science of organising the content and flow of a website
77. SITE OUTLINE I.A.
78. I.A.
79. I.A.
80. I.A.
81. I.A.
82. I.A.
83. 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
84. 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
85. I.A. I.P. GALLERY Contact send message see address find 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
86. 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
87. WIREFRAMES (WHITEBOARD) I.A.
88. WIREFRAMES (PAPER) I.A.
89. WIREFRAMES (PAPER) I.A.
90. WIREFRAMES (PAPER) I.A.
91. WIREFRAMES (PAPER) I.A.
92. WIREFRAMES (PAPER) I.A.
93. WIREFRAMES (PAPER) I.A.
94. I.A. WIREFRAMES (DIGITAL)
95. I.A. WIREFRAMES (DIGITAL)
96. WIREFRAMES (DIGITAL) I.A.
97. I.A. WIREFRAMES (DIGITAL)
98. I.A. WIREFRAMES (DIGITAL)
99. PRODUCTION FRONT-END DESIGN & DEVELOPMENT BACK END DEVELOPMENT DEPLOYMENT 2
100. Design
101. PINTEREST.COM DESIGN
102. COLOURLOVERS.COM DESIGN
103. DESIGN
104. DESIGN MOOD BOARD
105. DESIGN MOOD BOARD
106. MOOD BOARD DESIGN
107. VISUAL MOCK-UPS DESIGN
108. VISUAL MOCK-UPS DESIGN
109. VISUAL MOCK-UPS DESIGN
110. VISUAL MOCK-UPS DESIGN
111. VISUAL MOCK-UPS DESIGN
112. VISUAL MOCK-UPS DESIGN
113. Front-End Development
114. Languages sprachen
     ݴ talen langages Γλώσσες linguaggi ݴޠ 
     línguas Языки lenguajes 44
115. Languages of theWeb markup stylesheet scripting query
116. HTML CSS Javascript
117. Markup 31
118. format structure instructions tags links HTML Hypertext Markup Language
119. The HTML Tag
120. <open> </close>
121. <open> </close> <p>This tag indicates a paragraph.</p>
122. <open> </close> <p>This tag indicates a paragraph.</p> This tag indicates <p>a paragraph.</p>
123. Think in boxes...
124. <kitchen> </kitchen> <refrigerator> </refrigerator> <home> </home> <freezer status=”full”> </freezer> <meat type=”beef” weight=”100kg”> </meat>
125. Basic HTML Tags
126. <html> </html> <head> </head> <title>Hello World!</title> <body> </body> <img >
127. HTML5 XHTML1 HTML4
128. Stylesheet 33
129. presentation css Cascading Style Sheets
130. p { text-align: center; color: black; font-family: arial; }
131. CSS3 CSS2.1
132. Scripting 34
133. client-side server-side
134. JavaScript function toggleMenuClick(e) { var event = new Event(e); var menuId = event.target.parentNode.parentNode.id; toggleMenu(menuId.substring(2)); }
135. foreach ($charsetList as $charset) { echo “<option value=\”” . $charset . “\””; if ($collationList[$infoRow[‘Collation’]] == $charset) ! {echo ‘ selected=”selected”’;}! ! ! echo “>” . $charset . “</option>”; } PHP
136. <% 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
137. 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
138. Query 35
139. SQL SELECT Book.title, count(*) AS Authors FROM Book JOIN Book_author ON Book.isbn = Book_author.isbn GROUP BY Book.title;
140. HTML + CSS + Javascript = Static / Dynamic HTML + CSS + Javascript + PHP + SQL = Dynamic HTML + CSS = Static
141. DEVELOPMENT HTML
142. HTML DEVELOPMENT
143. HTML DEVELOPMENT
144. CSS DEVELOPMENT
145. CSS DEVELOPMENT
146. CSS DEVELOPMENT
147. CSS DEVELOPMENT
148. JAVASCRIPT DEVELOPMENT
149. JAVASCRIPT DEVELOPMENT
150. DEVELOPMENT
151. ADOBE FLASH DEVELOPMENT
152. Back-End Development
153. DATABASES DEVELOPMENT
154. C.M.S. INTEGRATION DEVELOPMENT
155. PROBLEMS DEVELOPMENT
156. SOLUTIONS DEVELOPMENT
157. MORE PROBLEMS DEVELOPMENT
158. MORE PROBLEMS DEVELOPMENT
159. MORE PROBLEMS DEVELOPMENT
160. Deployment
161. TESTING DEPLOYMENT
162. TESTING DEPLOYMENT
163. TESTING DEPLOYMENT
164. TESTING DEPLOYMENT
165. TESTING DEPLOYMENT
166. DEBUGGING DEPLOYMENT
167. F.T.P. DEPLOYMENT
168. F.T.P. DEPLOYMENT
171. POST-PRODUCTION TURN-OVER LAUNCH MAINTENANCE PROMOTION 3
172. Turn-over technical documentation style guides client training and de-briefing
173. Launch
174. Promotion
175. Maintenance content database links domain and web hosting server
178. Quick & Painless? Lazy?
179. SALAMAT