Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for The Web

de
January 27, 2016
Design
0
64

Designing for The Web

Work in The Web - Talk for students.

de

January 27, 2016
Tweet

More Decks by de

See All by de
Finding Your Mojo
de
1
35
Lessons I've Learned (TBOWD 2014)
de
1
770

Other Decks in Design

See All in Design
Web 組版の課題とその解法
yamatoiizuka
0
110
デザインをみんなのものに　「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Installing and Running decksh/pdfdeck
ajstarks
1
490
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
8k
プロダクトデザイン部 組織紹介（デザイナー向け）
chatwork_hr
1
260
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.4k
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
410
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
310
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
500
1人歩きする営業資料作成
yutoshukuya
2
160
Goodpatch Tour💙 / We are hiring!
goodpatch
28
700k

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Agile that works and the tools we love
rasmusluckow
325
20k
Clear Off the Table
cherdarchuk
85
310k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
A Tale of Four Properties
chriscoyier
153
22k
The Language of Interfaces
destraynor
151
23k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Become a Pro
speakerdeck
PRO
13
4.6k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k

Transcript

  1. Designing for The Web January 27, 2016 #WorkInTheWeb

  2. None

  3. @DE

  4. None

  5. wow i am designer much fotoshop such flat how to

    vector moar color many layers
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None

  16. #LETSTALKDESIGN

  17. Designing The Web January 27, 2016 #WorkInTheWeb for

  18. Being a Designer The Web January 27, 2016 #WorkInTheWeb for

  19. .01 The Importance of Words

  20. Designing for the web is still about words

  21. None
  22. None
  23. None
  24. None

  25. Learn to create content - you might not always have

    it.

  26. Find a great copywriter…

  27. …work with them at every opportunity…

  28. …and hug them!

  29. Book Recommendations buy at fivesimplesteps.com

  30. .02 Learn about Graphic Design

  31. Graphic Design is different to Web Design…

  32. … but we still use it’s principles.

  33. Learn the principles, they remain constant.

  34. Vertical Rhythm The Elements of Typographic Scale by Robert Bringhurst

    Book Recommendation buy at Amazon

  35. Web Typography The Geometry of Type by Erik Spiekermann (Foreword)

    Stephen Coles (Author) Book Recommendation buy at Amazon

  36. Grid Systems Grid Systems in Graphic Design by Josef Mülller-Brockmann

    Book Recommendation buy at Amazon

  37. Content Hierarchy Grid Systems in Graphic Design by Josef Mülller-Brockmann

    Book Recommendation buy at Amazon

  38. “I move things around until they look right” Milton Glaser

  39. “Great design is supported by all browsers” Mike Kus

  40. Has Web Design become predictable?

  41. None

  42. “Limitations to web design come not from the tools or

    technologies we use but from our imagination” Mike Kus

  43. .03 To code or not to code?

  44. None

  45. <html> <head> <title>Should Designers Code?</title> </head> <body> <h1>Who cares?</h1> </body>

    </html>
  46. None
  47. None
  48. None
  49. None
  50. None

  51. NO!

  52. NO! YES!

  53. NO! YES! NO!

  54. NO! YES! NO! YES!

  55. NO! YES! NO! YES! NO!

  56. None

  57. Fuck, now what?

  58. Code… if you want to. But definitely learn the basics.

  59. “HTML is a Design Element” Christoper Murphy

  60. None
  61. None

  62. Understanding code will make you a better designer.

  63. New problems to solve. New things to learn. Don’t get

    too hung up.

  64. Book Recommendations buy at amazon.co.uk

  65. Book Recommendations buy at abookapart.com

  66. .04 Be the Designer you want to be

  67. None
  68. None

  69. Expectation

  70. None

  71. Reality

  72. Reality

  73. Write, blog and speak about it.

  74. Experiment, and set your own challenges.

  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None

  83. Show what your working on.

  84. None
  85. None
  86. None
  87. None

  88. It’s not all about the £££’s

  89. .05 The importance of colour

  90. Colour is…

  91. Colour is… hard.

  92. Colour is… subjective.

  93. I love that green!

  94. I love that green!

  95. I HATE that green!

  96. I HATE that green!

  97. Use Colour Theory to win over clients.

  98. What is Colour Theory?

  99. complementation contrast vibrancy The interaction of colours in a design

    through , and , .

  100. complementation contrast vibrancy The interaction of colours in a design

    through , and , .

  101. Complementation ,

  102. Complementation ,

  103. Complementation ,

  104. Complementation , Triads

  105. Complementation , Triads

  106. Complementation , Triads

  107. Complementation , Triads

  108. Complementation , Triads

  109. Complementation , Analogous

  110. Complementation , Analogous

  111. Complementation , Analogous

  112. Complementation , Analogous

  113. Complementation , Analogous

  114. Contrast By choosing stark, complementary colours, text becomes easily readable.

    Just like this.

  115. Contrast Choose a colour scheme where the text is the

    brightest element of the design can reduce eyestrain by focussing the user’s attention.

  116. Contrast A lack of contrast between the text and the

    background will drive your users insane. Eyes struggle to know which colour to focus on, which will cause eye strain.

  117. Contrast Just because these colours may be complementary. The colours

    can be too bright in comparison to each other that your users will still get eye strain.

  118. Contrast

  119. Contrast

  120. Contrast

  121. Vibrancy

  122. Vibrancy

  123. Vibrancy dictates the emotion of your design.

  124. Bright colours

  125. Bright colours are energetic and stimulate the user.

  126. Dark colours

  127. Dark colours are relaxing and do not interrupt.

  128. None
  129. None
  130. None
  131. None
  132. None
  133. None
  134. None
  135. None

  136. Psychology of colour

  137. Psychology of colour Colours determine the psychological effect on viewers.

  138. None

  139. Power, Importance

  140. Power, Importance Friendliness, Energy

  141. Power, Importance Friendliness, Energy Happiness, Enthusiasm

  142. None

  143. Growth, Stability

  144. Growth, Stability Honesty, Calm

  145. Growth, Stability Honesty, Calm Luxury, Romance

  146. https://color.adobe.com

  147. https://coolors.co

  148. Color Theory in Web UI Design A Practical Approach To

    The Principles by UX Pin https://studio.uxpin.com/ebooks/color-theory-web-ui-design-practical-principles/

  149. Colour: A Workshop For Artists and Designers by David Hornung

    Buy at Amazon.co.uk

  150. .06 Have a side project

  151. Why?

  152. You will…

  153. You will… Scratch your own itch.

  154. You will… Share what you know.

  155. You will… Learn new skills.

  156. You will… Understand new personas.

  157. You will… Get new clients.

  158. You will… Be a better designer.

  159. You will… Make some money. (maybe)

  160. Why didn’t they launch?

  161. Why didn’t they launch?

  162. Let it go.

  163. Let it go.

  164. None
  165. None
  166. None
  167. None
  168. None
  169. None
  170. None
  171. None
  172. None

  173. Book Recommendation buy at rachelandrew.co.uk Buy at rachelandrew.co.uk The Profitable

    Side Project Handbook A practical guide to developing a product business. by Rachel Andrew

  174. .07 Get your portfolio right

  175. Build your portfolio with the work you want to do

    in the future, not just a backlog. Tip number 01

  176. Your portfolio reflects what you’ll do next. Tip number 02

  177. Tell people what you did. This sets expectations as to

    what your skills are. Tip number 03

  178. Side projects show who you are and what you want

    to do. Tip number 04

  179. Treat your portfolio like an album. Sometimes it would have

    been better without the 2/3 mediocre songs. Tip number 05

  180. Make it easy to update. Or you’ll never do it.

    Tip number 06

  181. dribbble.com/playbook

  182. squarespace.com

  183. dunked.com

  184. semplicelabs.com

  185. .08 Get smart with your pricing

  186. Pricing is hard.

  187. None

  188. WTF!??!

  189. Imitate .01

  190. Industry Standard £40 - £80 per hour https://deardesignstudent.com/pricing-ad00ad5c4b7f

  191. Student Guide £20 - £30 per hour https://deardesignstudent.com/pricing-ad00ad5c4b7f

  192. Do the work.

  193. Do the work.

  194. Question .02

  195. Was it worth it?

  196. Yes? Congratulations, that’s your rate (for now).

  197. Yes? Congratulations, that’s your rate (for now).

  198. No? Re-evaluate. How much is your weekend worth?

  199. No? Re-evaluate. How much is your weekend worth?

  200. Object based pricing.

  201. None
  202. None

  203. £1200

  204. £1200

  205. £1200 £1200 ÷ 20 (hours) = £60 (per hour)

  206. It takes time.

  207. Experiment.

  208. Popular pricing methods. Industry Standard Cost Plus Opportunity Cost Value

  209. Popular pricing methods. Industry Standard Cost Plus Opportunity Cost Value

  210. Industry Standard

  211. Industry Standard Pros • Easy to work out • No

    guess work

  212. Industry Standard Pros • Easy to work out • No

    guess work Cons • Based on who you know, not experience • Competitive • Not always right for you

  213. Popular pricing methods. Industry Standard Cost Plus Opportunity Cost Value

  214. Cost Plus

  215. Cost Plus Pros • Easy to work out • Works

    for you

  216. Cost Plus Pros • Easy to work out • Works

    for you Cons • Based on your outgoings, not experience • Not easily scalable • Not flexible for clients

  217. Popular pricing methods. Industry Standard Cost Plus Opportunity Cost Value

  218. Opportunity Cost

  219. Opportunity Cost Pros • Easy to work out • Works

    for you

  220. Opportunity Cost Pros • Easy to work out • Works

    for you Cons • Based on your outgoings, not experience • No formula • Not flexible for clients

  221. Popular pricing methods. Industry Standard Cost Plus Opportunity Cost Value

  222. Value

  223. Value Pros • More room for profit • Works for

    you and the client equally

  224. Value Pros • More room for profit • Works for

    you and the client equally Cons • It’s tricky to understand • Clients are not always used to it

  225. buy at abookapart.com Pricing Design by Dan Mall Buy at

    abookapart.com

  226. .09 Be able to sell yourself

  227. None
  228. None
  229. None

  230. Now what?!

  231. Write, blog and speak about what you know.

  232. Figure out your value proposition.

  233. Why should a client hire you?

  234. Creating your value proposition Memorable Concise Different Confident

  235. “I love to design and build websites for companies that

    want great results and have five years of experience working with small to medium businesses.”

  236. “I love to design and build websites for companies that

    want great results and have five years of experience working with small to medium businesses.”

  237. “I love to design and build websites for companies that

    want great results and have five years of experience working with small to medium businesses.”

  238. “I’m valuable to clients because I have five years experience

    of creating websites that deliver excellent results.”

  239. “I’m valuable to clients because I have five years experience

    of creating websites that deliver excellent results.”

  240. “I’m valuable to clients because I have five years experience

    of creating websites that deliver excellent results.”

  241. Work on your elevator pitch.

  242. Creating your elevator pitch. Summarize who you offer your services

    to Identify the biggest concerns facing those people Explain how you solve those problems Show how you've helped similar people in the past

  243. “You know how small businesses often struggle to get the

    most out of their websites? Well, what I do is create websites that really engage users convert them into customers - with measurable results. One company I worked with recently was able to increase online sales by 40% over 3 months.”

  244. Have a Target Audience.

  245. Have a Target Audience. Network in their circles Connect with

    them online Establish yourself as an expert Share your work

  246. .10 Respect the client

  247. Clients can be challenging, but remember that when they stop

    calling you with questions or with work to be done, that is the day you no longer have a job.
  248. None

  249. CLIENTS FROM HELL

  250. "Some of us like the sans-serif font, and some of

    us like the serif font. So if you can just show us an option in the middle of those two that would be great."

  251. "Can you scan a picture of this document onto the

    computer for me? I need to edit it in Word."
  252. None

  253. So, is the client always right?

  254. An abusive client who must be fired is very different

    from one who simply asks a lot of questions because they recognise that you are the expert.

  255. But your answers and advice are why they hired you

    in the first place.

  256. You’re my Favorite Client by Mike Monteiro Buy at abookapart.com

  257. .11 Be self aware

  258. Know yourself.

  259. Know yourself.

  260. Know yourself. Understand what you suck at and make a

    choice.

  261. Know yourself. Understand what you suck at and make a

    choice. There are two.

  262. Know yourself. Understand what you suck at and make a

    choice. There are two. 1. Take the time to get better at what you suck at.

  263. Know yourself. Understand what you suck at and make a

    choice. There are two. 1. Take the time to get better at what you suck at. 2. Go all in on what you’re great at.

  264. 2. Go all in on what you’re great at.

  265. Go all in on what you’re great at.

  266. Go all in on what you’re great at. … and

    don’t give a what you suck at.

  267. Go all in on what you’re great at. … and

    don’t give a what you suck at. Work with people who are great at what you suck at.

  268. Go all in on what you’re great at. … and

    don’t give a what you suck at. Work with people who are great at what you suck at. Stick to your DNA.

  269. “What holds people back is the romantic version of who

    they think they want to be versus who they actually are” Gary Vaynerchuk

  270. Just because it’s cool to be a startup founder doesn’t

    mean that who you need to become.

  271. Just because it’s cool to be a startup founder doesn’t

    mean that who you need to become.

  272. .12 Be part of the community

  273. Behind the Industry

  274. Behind the Industry

  275. Behind the Industry is a community.

  276. Meet great like- minded people

  277. Meet great like- minded people

  278. Opportunities to work with great people.

  279. Don’t just take.

  280. None

  281. Give.

  282. Giving can establish you as the expert.

  283. None
  284. None

  285. Give,Give,Give.

  286. Give, ASK. Give,Give.

  287. Depth vs Width

  288. kk.org/thetechnium/1000-true-fans/ 1,000 True Fans

  289. bit.ly/1-zero 1 > 0

  290. Jab, Jab, Jab, Right Hook How to tell your story

    in a noisy social world. by Gary Vaynerchuk Buy at Amazon.co.uk

  291. .13 Have empathy

  292. “The ability to understand and share the feelings of another”

  293. “The ability to understand and share the feelings of another”

  294. Understanding feelings is easy. Sharing feelings is harder.

  295. Imagine: An Ice Cream man who doesn’t like Ice Cream.

  296. Imagine: A bike salesman who doesn’t ride a bike.

  297. How could you empathise with them?

  298. How could you empathise with them? Make the effort.

  299. How could you empathise with them? Expand your social circle.

  300. Don’t get stuck in the web ‘bubble’.

  301. Well Designed by Jon Kolko Buy at amazon.com

  302. And finally… Don’t be afraid to ask questions.

  303. :)

  304. :) Thank you!