Principles Of Web Design Workshop
•Descargar como KEY, PDF•
3 recomendaciones•1,279 vistas
A talk for Codeworks Connect members on principles of web design with a bit of client communication and business related discussions mixed in.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (16)
Destacado
Destacado (20)
Similar a Principles Of Web Design Workshop
Similar a Principles Of Web Design Workshop (20)
Último
Último (20)
Principles Of Web Design Workshop
- 3. PRINCIPLES of WEB DESIGN
- 4. PRINCIPLES of WEB DESIGN with Gavin Elliott Creative Dude at Codeworks
- 5. PRINCIPLES of WEB DESIGN with Gavin Elliott Creative Dude at Codeworks follow me @gavinelliott
- 6. CHAPTER I Principles of Web Design Gavin Elliott | Codeworks
- 7. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 8. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 9. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 10. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 11. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 12. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 13. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 14. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 15. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 16. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 17. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 18. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 19. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 20. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
- 22. CHAPTER I Life at Codeworks
- 23. CHAPTER I Life at Codeworks Creativity
- 24. CHAPTER I Life at Codeworks Creativity Marketing
- 25. CHAPTER I Life at Codeworks Creativity Marketing Thinking Digital
- 26. CHAPTER I Life at Codeworks Creativity DIBI Marketing Thinking Digital
- 27. CHAPTER I Life at Codeworks Creativity DIBI Marketing Codeworks Connect Thinking Digital
- 28. CHAPTER I Life at Codeworks Creativity DIBI Marketing Codeworks Connect Thinking Digital Communications
- 29. WHAT ABOUT YOU
- 30. WHAT ABOUT YOU Where do you work?
- 31. WHAT ABOUT YOU Where do you work? How long have you been in the industry?
- 32. WHAT ABOUT YOU Where do you work? How long have you been in the industry? What are your sole responsibilities?
- 33. WHAT ABOUT YOU Where do you work? What do you like? How long have you been in the industry? What are your sole responsibilities?
- 34. WHAT ABOUT YOU Where do you work? What do you like? How long have you What do you been in the industry? love? What are your sole responsibilities?
- 35. WHAT ABOUT YOU Where do you work? What do you like? How long have you What do you been in the industry? love? What will you What are your sole be doing in 10 responsibilities? years time?
- 37. CHAPTER II Understanding the ‘minefield’ of our industry...
- 39. What is happening now?
- 40. What is happening now? A horde of lovely web goodness!
- 41. What is happening now? A horde of lovely web goodness! Web Typography
- 42. What is happening now? A horde of lovely web goodness! Web Typography CSS3
- 43. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery
- 44. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery HTML5
- 45. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery HTML5 Attention to detail
- 47. Web Typography
- 48. Web Typography
- 50. Web Typography typekit.com - easy to setup
- 51. Web Typography typekit.com - easy to setup - using one line of code
- 52. Web Typography typekit.com - easy to setup - using one line of code - free(ish)
- 53. Web Typography typekit.com - easy to setup - using one line of code - free(ish) - extended-library
- 54. Web Typography typekit.com - easy to setup - using one line of code - free(ish) - extended-library - standards compliant
- 55. Web Typography
- 56. Web Typography
- 58. Web Typography @font-face - easy to setup
- 59. Web Typography @font-face - easy to setup - using one line of code
- 60. Web Typography @font-face - easy to setup - using one line of code - free(ish)
- 61. Web Typography @font-face - easy to setup - using one line of code - free(ish) - dependent on users font-library
- 62. Web Typography
- 63. Web Typography
- 65. Web Typography fontdeck.com - created by the guys at clearleft.com
- 66. Web Typography fontdeck.com - created by the guys at clearleft.com - sign up for when it is ready
- 67. Web Typography fontdeck.com - created by the guys at clearleft.com - sign up for when it is ready - not much news on availability/pricing
- 68. Web Typography fontdeck.com - created by the guys at clearleft.com - sign up for when it is ready - not much news on availability/pricing - similar to typekit? No one knows, yet.
- 70. Using @font-face
- 71. Using @font-face The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features. Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc). @font-face { font-family: DeliciousRoman; src: url(http://www.font-face.com/fonts/delicious/Delicious- Roman.otf); font-weight:400; } Then just use it like any other font in any other style rule. p { font-family: DeliciousRoman, Helvetica, Arial, sans-serif; } That's pretty much it for basic implementation.
- 73. Using Fonts on The Web
- 74. Using Fonts on The Web Think about the users
- 75. Using Fonts on The Web Think about the users It doesn’t always have to look the same in every browser.
- 76. Using Fonts on The Web Think about the users It doesn’t always have to look the same in every browser. Check every browser...
- 77. Using Fonts on The Web Think about the users It doesn’t always have to look the same in every browser. Check every browser... Always have a roll-back.
- 89. Web Typography Links typekit.com font-face.com
- 90. Web Typography Links typekit.com font-face.com fontdeck.com
- 91. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com
- 92. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library of font-face fonts
- 93. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library CSS font-face of font-face generator fonts
- 94. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library CSS font-face of font-face generator fonts
- 95. Web Typography Links typekit.com font-face.com fontdeck.com I have some invites give me your email address and I’ll sort one out for you. fontsquirrel.com Large library CSS font-face of font-face generator fonts
- 96. CSS3
- 97. CSS3 We’re getting so much to play with!
- 98. CSS3 We’re getting so much to play with! font-styling
- 99. CSS3 We’re getting so much to play with! font-styling text-styling
- 100. CSS3 We’re getting so much to play with! font-styling text-styling box-styling
- 101. CSS3 We’re getting so much to play with! font-styling text-styling box-styling gradients
- 102. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling box-styling gradients
- 103. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling gradients
- 104. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling Transforms gradients
- 105. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling Transforms gradients Columns
- 106. CSS3
- 107. CSS3 We’ll play with these a little bit later!
- 108. jQuery
- 109. jQuery Time-travelling with jQuery
- 110. jQuery Time-travelling with jQuery http://razorjack.net/quicksand
- 111. jQuery Time-travelling with jQuery http://razorjack.net/quicksand http://www.bensky.co.uk/my-work
- 112. jQuery Time-travelling with jQuery http://razorjack.net/quicksand http://www.bensky.co.uk/my-work http://www.giraffe.net
- 113. jQuery Time-travelling with jQuery http://razorjack.net/quicksand http://www.bensky.co.uk/my-work http://www.giraffe.net http://www.obox-design.com
- 114. jQuery - Let’s do anything
- 115. jQuery - Let’s do anything “If you have an idea of how you want something to work, look or feel and CSS/ XHTML cannot enable you to do it. Look to jQuery, it can add a lot to the end result.”
- 116. HTML5
- 117. HTML5 Do you wait?
- 118. HTML5 Do you wait? Do you go?
- 119. HTML5 Do you wait? Do you go? Is it ready?
- 120. HTML5 Do you wait? Do you go? Is it ready? Different Mark-up
- 121. HTML5 Do you wait? Do you go? Is it ready? Different Mark-up Easier/Simpler Mark-up
- 122. Attention to Detail
- 123. Attention to Detail I dribbble, do you?
- 124. Attention to Detail I dribbble, do you? The finer details...
- 125. Attention to Detail I dribbble, do you? - dribbble.com The finer details...
- 126. Attention to Detail I dribbble, do you? - dribbble.com The finer details... White space
- 127. Attention to Detail I dribbble, do you? - dribbble.com The finer details... White space Grid systems
- 134. What’s going to happen in the future?
- 135. What’s going to happen in the future? More freedom
- 136. What’s going to happen in the future? More freedom Better standards?
- 137. What’s going to happen in the future? More freedom Better standards? More platforms
- 138. What’s going to happen in the future? More freedom Better standards? More platforms Mobile
- 139. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad
- 140. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad Mobile Apps
- 141. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad Mobile Apps Web Apps
- 143. Niche down or grow UP!
- 144. Niche down or grow UP! “You can be good at many or a master of one...”
- 145. Niche down or grow UP! “You can be good at many or a master of one...” What would you prefer to be doing?
- 146. CHAPTER III
- 148. CHAPTER III client relations Client Education
- 149. CHAPTER III client relations Client Education Client Interaction
- 150. CHAPTER III client relations Client Education Client Interaction Understanding the job
- 151. CHAPTER III client relations Client Education Client Interaction Understanding the job Spec’ing Out
- 153. Client Education
- 154. Client Education Clients, generally have no idea of what you’re doing or why you’re doing it. They just like things to be ‘pretty’. /generally
- 155. Client Education
- 156. Client Education Having a client lost in translation can break down an entire job. Educate them, help them and both businesses move forward.
- 157. Client Education
- 159. Client Interaction
- 160. Client Interaction Face-to-face
- 161. Client Interaction Face-to-face Over the phone
- 162. Client Interaction Face-to-face Over the phone Never leave them feeling lost
- 163. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients
- 164. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients Friends and Clients
- 165. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients Friends and Clients Build lasting relationships
- 168. Understanding the job Questions to ask your prospective client...
- 169. Understanding the job Questions to ask your prospective client... What is your budget?
- 170. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website?
- 171. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website? What are your business objectives?
- 172. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website? What are your business objectives? Who is your target audience?
- 173. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website? What are your business objectives? Who is your target audience? The easiest way is to use a client worksheet...
- 175. Spec’ing the Job Out
- 176. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project.
- 177. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project. Both parties know exactly what is expected of them and when.
- 178. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project. Both parties know exactly what is expected of them and when. Within your business, you can plan how and when the stages of work take place.
- 179. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project. Both parties know exactly what is expected of them and when. Within your business, you can plan how and when the stages of work take place. Set to-do’s and milestones for the client and yourself.
- 180. Spec’ing the Job Out Both parties know exactly what is expected of them and when. Within your business, you can plan how and when the stages of work take place. Set to-do’s and milestones for the client and yourself.
- 181. Spec’ing the Job Out Within your business, you can plan how and when the stages of work take place. Set to-do’s and milestones for the client and yourself.
- 182. Spec’ing the Job Out Set to-do’s and milestones for the client and yourself.
- 183. Spec’ing the Job Out
- 184. Spec’ing the Job Out Do you spec jobs about? If so, how?
- 185. CHAPTER IV
- 186. CHAPTER IV The Web Principles
- 187. CHAPTER IV The Web Principles Process Mapping
- 188. CHAPTER IV The Web Principles Process Mapping Wireframing
- 189. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them
- 190. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them Using software to draw your wireframes
- 191. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them Using software to draw your wireframes Getting down to business
- 193. Process Mapping
- 194. Process Mapping What is process mapping?
- 195. Process Mapping What is process mapping? Why should you use it?
- 196. Process Mapping What is process mapping? Why should you use it? Using it for usability/user experience.
- 197. Process Mapping What is process mapping? Why should you use it? Using it for usability/user experience. Getting the client involved.
- 199. Wire Framing
- 200. Wire Framing What are they?
- 201. Wire Framing What are they? Why do we use them?
- 202. Wire Framing What are they? Why do we use them? When should they be used?
- 203. Wire Framing What are they? Why do we use them? When should they be used? How are they used in a project life-cycle?
- 204. Wire Framing What are they? Why do we use them? When should they be used? How are they used in a project life-cycle? Why are they important?
- 206. What are wire frames?
- 207. What are wire frames? A visual representation brought together from a culmination of user research, business objectives and content.
- 208. What are wire frames? A visual representation brought together from a culmination of user research, business objectives and content. They SHOULD NOT be handed to anyone out of context.
- 209. What are wire frames? A visual representation brought together from a culmination of user research, business objectives and content. They SHOULD NOT be handed to anyone out of context. They are a continuous working environment.
- 211. Why do we use wire frames?
- 212. Why do we use wire frames? Gain an understanding
- 213. Why do we use wire frames? Gain an understanding Help your project workflow
- 214. Why do we use wire frames? Gain an understanding Help your project workflow Help your clients understand
- 216. When should wire frames be used?
- 217. When should wire frames be used? Strategy - What you want to achieve
- 218. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved
- 219. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved Structure - Structure your new project
- 220. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved Structure - Structure your new project Skeleton -The rough stuff
- 221. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved Structure - Structure your new project Skeleton -The rough stuff Surface - The polish
- 223. How are wire frames used in your project life cycle?
- 224. How are wire frames used in your project life cycle? Wire frames can be used within a business/ across the business
- 225. How are wire frames used in your project life cycle? Wire frames can be used within a business/ across the business These same wire frames can be used across the entire life-cycle of a project.
- 226. How are wire frames used in your project life cycle? Wire frames can be used within a business/ across the business These same wire frames can be used across the entire life-cycle of a project. From design to usability to SEO to Marketing and back again.
- 228. Why are wire frames important?
- 229. Why are wire frames important? Accurate planning for functional specifications
- 230. Why are wire frames important? Accurate planning for functional specifications Ensure all project members are briefed
- 231. Why are wire frames important? Accurate planning for functional specifications Ensure all project members are briefed Enable developers to start work on functionality before visual designing begins.
- 232. Why are wire frames important? Accurate planning for functional specifications Ensure all project members are briefed Enable developers to start work on functionality before visual designing begins. Track changes in the design process, refine your design during the project with ease.
- 234. What wire frame software is available?
- 235. What wire frame software is available? Balsamiq http://www.balsamiq.com/
- 236. What wire frame software is available? Balsamiq http://www.balsamiq.com/ Omnigraffe http://www.omnigroup.com/applications/omnigraffle/
- 237. What wire frame software is available? Balsamiq http://www.balsamiq.com/ Omnigraffe http://www.omnigroup.com/applications/omnigraffle/ Visio http://office.microsoft.com/en-us/visio/default.aspx
- 238. What wire frame software is available? Balsamiq http://www.balsamiq.com/ Omnigraffe http://www.omnigroup.com/applications/omnigraffle/ Visio http://office.microsoft.com/en-us/visio/default.aspx We’ll look at these in more depth this afternoon!
- 239. CHAPTER V
- 241. CHAPTER V Going from wires to design The software
- 242. CHAPTER V Going from wires to design The software Designing in the browser
- 243. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation
- 244. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation Progressive enhancement
- 245. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation Progressive enhancement Don’t be scared of doing something different
- 246. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation Progressive enhancement Don’t be scared of doing something different Forget what you’ve been taught, you’re a creative so get creative!
- 247. THE FREEDOM PROJECT
- 249. Thanks YOU’RE AWESOME follow me @gavinelliott
Notas del editor
- At any point throughout this that you feel inspired. Open your notebooks and start wireframing, today is a day of freedom.