Principles Of Web Design Workshop

1,856 views
1,793 views

Published on

A talk for Codeworks Connect members on principles of web design with a bit of client communication and business related discussions mixed in.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,856
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
61
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide


















































































































  • At any point throughout this that you feel inspired. Open your notebooks and start wireframing, today is a day of freedom.



































































































  • Principles Of Web Design Workshop

    1. 1. PRINCIPLES of WEB DESIGN
    2. 2. PRINCIPLES of WEB DESIGN with Gavin Elliott Creative Dude at Codeworks
    3. 3. PRINCIPLES of WEB DESIGN with Gavin Elliott Creative Dude at Codeworks follow me @gavinelliott
    4. 4. CHAPTER I Principles of Web Design Gavin Elliott | Codeworks
    5. 5. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    6. 6. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    7. 7. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    8. 8. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    9. 9. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    10. 10. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    11. 11. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    12. 12. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    13. 13. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    14. 14. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    15. 15. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    16. 16. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    17. 17. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    18. 18. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    19. 19. CHAPTER I Life at Codeworks
    20. 20. CHAPTER I Life at Codeworks Creativity
    21. 21. CHAPTER I Life at Codeworks Creativity Marketing
    22. 22. CHAPTER I Life at Codeworks Creativity Marketing Thinking Digital
    23. 23. CHAPTER I Life at Codeworks Creativity DIBI Marketing Thinking Digital
    24. 24. CHAPTER I Life at Codeworks Creativity DIBI Marketing Codeworks Connect Thinking Digital
    25. 25. CHAPTER I Life at Codeworks Creativity DIBI Marketing Codeworks Connect Thinking Digital Communications
    26. 26. WHAT ABOUT YOU
    27. 27. WHAT ABOUT YOU Where do you work?
    28. 28. WHAT ABOUT YOU Where do you work? How long have you been in the industry?
    29. 29. WHAT ABOUT YOU Where do you work? How long have you been in the industry? What are your sole responsibilities?
    30. 30. WHAT ABOUT YOU Where do you work? What do you like? How long have you been in the industry? What are your sole responsibilities?
    31. 31. 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?
    32. 32. 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?
    33. 33. CHAPTER II Understanding the ‘minefield’ of our industry...
    34. 34. What is happening now?
    35. 35. What is happening now? A horde of lovely web goodness!
    36. 36. What is happening now? A horde of lovely web goodness! Web Typography
    37. 37. What is happening now? A horde of lovely web goodness! Web Typography CSS3
    38. 38. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery
    39. 39. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery HTML5
    40. 40. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery HTML5 Attention to detail
    41. 41. Web Typography
    42. 42. Web Typography
    43. 43. Web Typography typekit.com
    44. 44. Web Typography typekit.com - easy to setup
    45. 45. Web Typography typekit.com - easy to setup - using one line of code
    46. 46. Web Typography typekit.com - easy to setup - using one line of code - free(ish)
    47. 47. Web Typography typekit.com - easy to setup - using one line of code - free(ish) - extended-library
    48. 48. Web Typography typekit.com - easy to setup - using one line of code - free(ish) - extended-library - standards compliant
    49. 49. Web Typography
    50. 50. Web Typography
    51. 51. Web Typography @font-face
    52. 52. Web Typography @font-face - easy to setup
    53. 53. Web Typography @font-face - easy to setup - using one line of code
    54. 54. Web Typography @font-face - easy to setup - using one line of code - free(ish)
    55. 55. Web Typography @font-face - easy to setup - using one line of code - free(ish) - dependent on users font-library
    56. 56. Web Typography
    57. 57. Web Typography
    58. 58. Web Typography fontdeck.com
    59. 59. Web Typography fontdeck.com - created by the guys at clearleft.com
    60. 60. Web Typography fontdeck.com - created by the guys at clearleft.com - sign up for when it is ready
    61. 61. Web Typography fontdeck.com - created by the guys at clearleft.com - sign up for when it is ready - not much news on availability/pricing
    62. 62. 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.
    63. 63. Using @font-face
    64. 64. 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.
    65. 65. Using Fonts on The Web
    66. 66. Using Fonts on The Web Think about the users
    67. 67. Using Fonts on The Web Think about the users It doesn’t always have to look the same in every browser.
    68. 68. Using Fonts on The Web Think about the users It doesn’t always have to look the same in every browser. Check every browser...
    69. 69. 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.
    70. 70. Web Typography Links
    71. 71. Web Typography Links typekit.com
    72. 72. Web Typography Links typekit.com font-face.com
    73. 73. Web Typography Links typekit.com font-face.com fontdeck.com
    74. 74. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com
    75. 75. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library of font-face fonts
    76. 76. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library CSS font-face of font-face generator fonts
    77. 77. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library CSS font-face of font-face generator fonts
    78. 78. 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
    79. 79. CSS3
    80. 80. CSS3 We’re getting so much to play with!
    81. 81. CSS3 We’re getting so much to play with! font-styling
    82. 82. CSS3 We’re getting so much to play with! font-styling text-styling
    83. 83. CSS3 We’re getting so much to play with! font-styling text-styling box-styling
    84. 84. CSS3 We’re getting so much to play with! font-styling text-styling box-styling gradients
    85. 85. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling box-styling gradients
    86. 86. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling gradients
    87. 87. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling Transforms gradients
    88. 88. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling Transforms gradients Columns
    89. 89. CSS3
    90. 90. CSS3 We’ll play with these a little bit later!
    91. 91. jQuery
    92. 92. jQuery Time-travelling with jQuery
    93. 93. jQuery Time-travelling with jQuery http://razorjack.net/quicksand
    94. 94. jQuery Time-travelling with jQuery http://razorjack.net/quicksand http://www.bensky.co.uk/my-work
    95. 95. jQuery Time-travelling with jQuery http://razorjack.net/quicksand http://www.bensky.co.uk/my-work http://www.giraffe.net
    96. 96. 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
    97. 97. jQuery - Let’s do anything
    98. 98. 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.”
    99. 99. HTML5
    100. 100. HTML5 Do you wait?
    101. 101. HTML5 Do you wait? Do you go?
    102. 102. HTML5 Do you wait? Do you go? Is it ready?
    103. 103. HTML5 Do you wait? Do you go? Is it ready? Different Mark-up
    104. 104. HTML5 Do you wait? Do you go? Is it ready? Different Mark-up Easier/Simpler Mark-up
    105. 105. Attention to Detail
    106. 106. Attention to Detail I dribbble, do you?
    107. 107. Attention to Detail I dribbble, do you? The finer details...
    108. 108. Attention to Detail I dribbble, do you? - dribbble.com The finer details...
    109. 109. Attention to Detail I dribbble, do you? - dribbble.com The finer details... White space
    110. 110. Attention to Detail I dribbble, do you? - dribbble.com The finer details... White space Grid systems
    111. 111. http://crushlovely.com/
    112. 112. http://squaredeye.com/
    113. 113. What’s going to happen in the future?
    114. 114. What’s going to happen in the future? More freedom
    115. 115. What’s going to happen in the future? More freedom Better standards?
    116. 116. What’s going to happen in the future? More freedom Better standards? More platforms
    117. 117. What’s going to happen in the future? More freedom Better standards? More platforms Mobile
    118. 118. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad
    119. 119. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad Mobile Apps
    120. 120. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad Mobile Apps Web Apps
    121. 121. Niche down or grow UP!
    122. 122. Niche down or grow UP! “You can be good at many or a master of one...”
    123. 123. Niche down or grow UP! “You can be good at many or a master of one...” What would you prefer to be doing?
    124. 124. CHAPTER III
    125. 125. CHAPTER III client relations
    126. 126. CHAPTER III client relations Client Education
    127. 127. CHAPTER III client relations Client Education Client Interaction
    128. 128. CHAPTER III client relations Client Education Client Interaction Understanding the job
    129. 129. CHAPTER III client relations Client Education Client Interaction Understanding the job Spec’ing Out
    130. 130. Client Education
    131. 131. 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
    132. 132. Client Education
    133. 133. Client Education Having a client lost in translation can break down an entire job. Educate them, help them and both businesses move forward.
    134. 134. Client Education
    135. 135. Client Interaction
    136. 136. Client Interaction Face-to-face
    137. 137. Client Interaction Face-to-face Over the phone
    138. 138. Client Interaction Face-to-face Over the phone Never leave them feeling lost
    139. 139. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients
    140. 140. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients Friends and Clients
    141. 141. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients Friends and Clients Build lasting relationships
    142. 142. Understanding the job
    143. 143. Understanding the job Questions to ask your prospective client...
    144. 144. Understanding the job Questions to ask your prospective client... What is your budget?
    145. 145. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website?
    146. 146. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website? What are your business objectives?
    147. 147. 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?
    148. 148. 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...
    149. 149. Spec’ing the Job Out
    150. 150. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project.
    151. 151. 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.
    152. 152. 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.
    153. 153. 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.
    154. 154. 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.
    155. 155. 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.
    156. 156. Spec’ing the Job Out Set to-do’s and milestones for the client and yourself.
    157. 157. Spec’ing the Job Out
    158. 158. Spec’ing the Job Out Do you spec jobs about? If so, how?
    159. 159. CHAPTER IV
    160. 160. CHAPTER IV The Web Principles
    161. 161. CHAPTER IV The Web Principles Process Mapping
    162. 162. CHAPTER IV The Web Principles Process Mapping Wireframing
    163. 163. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them
    164. 164. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them Using software to draw your wireframes
    165. 165. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them Using software to draw your wireframes Getting down to business
    166. 166. Process Mapping
    167. 167. Process Mapping What is process mapping?
    168. 168. Process Mapping What is process mapping? Why should you use it?
    169. 169. Process Mapping What is process mapping? Why should you use it? Using it for usability/user experience.
    170. 170. Process Mapping What is process mapping? Why should you use it? Using it for usability/user experience. Getting the client involved.
    171. 171. Wire Framing
    172. 172. Wire Framing What are they?
    173. 173. Wire Framing What are they? Why do we use them?
    174. 174. Wire Framing What are they? Why do we use them? When should they be used?
    175. 175. Wire Framing What are they? Why do we use them? When should they be used? How are they used in a project life-cycle?
    176. 176. 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?
    177. 177. What are wire frames?
    178. 178. What are wire frames? A visual representation brought together from a culmination of user research, business objectives and content.
    179. 179. 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.
    180. 180. 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.
    181. 181. Why do we use wire frames?
    182. 182. Why do we use wire frames? Gain an understanding
    183. 183. Why do we use wire frames? Gain an understanding Help your project workflow
    184. 184. Why do we use wire frames? Gain an understanding Help your project workflow Help your clients understand
    185. 185. When should wire frames be used?
    186. 186. When should wire frames be used? Strategy - What you want to achieve
    187. 187. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved
    188. 188. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved Structure - Structure your new project
    189. 189. 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
    190. 190. 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
    191. 191. How are wire frames used in your project life cycle?
    192. 192. How are wire frames used in your project life cycle? Wire frames can be used within a business/ across the business
    193. 193. 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.
    194. 194. 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.
    195. 195. Why are wire frames important?
    196. 196. Why are wire frames important? Accurate planning for functional specifications
    197. 197. Why are wire frames important? Accurate planning for functional specifications Ensure all project members are briefed
    198. 198. 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.
    199. 199. 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.
    200. 200. What wire frame software is available?
    201. 201. What wire frame software is available? Balsamiq http://www.balsamiq.com/
    202. 202. What wire frame software is available? Balsamiq http://www.balsamiq.com/ Omnigraffe http://www.omnigroup.com/applications/omnigraffle/
    203. 203. 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
    204. 204. 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!
    205. 205. CHAPTER V
    206. 206. CHAPTER V The software
    207. 207. CHAPTER V Going from wires to design The software
    208. 208. CHAPTER V Going from wires to design The software Designing in the browser
    209. 209. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation
    210. 210. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation Progressive enhancement
    211. 211. 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
    212. 212. 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!
    213. 213. THE FREEDOM PROJECT
    214. 214. Thanks YOU’RE AWESOME
    215. 215. Thanks YOU’RE AWESOME follow me @gavinelliott

    ×