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

Designing for The Web

Avatar for de de
January 27, 2016
Design
0
76

Designing for The Web

Work in The Web - Talk for students.

Avatar for de

de

January 27, 2016
Tweet

More Decks by de

See All by de
Finding Your Mojo
Avatar for de de
1
51
Lessons I've Learned (TBOWD 2014)
Avatar for de de
1
830

Other Decks in Design

See All in Design
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1k
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
210
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
190
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
210
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
930
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
1.9k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
230
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
220
hicard_credential_202601
Avatar for hicard hicard
0
170
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
510
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON Design vivion
3
8.8k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
570

Featured

See All Featured
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
350
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
320
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
310
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
150
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k

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!