Designing for The Web

Work in The Web - Talk for students.

Transcript

1. Designing for The Web January 27, 2016 #WorkInTheWeb
3. @DE
5. wow i am designer much fotoshop such flat how to vector moar color many layers
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
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?
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?
45. <html> <head> <title>Should Designers Code?</title> </head> <body> <h1>Who cares?</h1> </body> </html>
51. NO!
52. NO! YES!
53. NO! YES! NO!
54. NO! YES! NO! YES!
55. NO! YES! NO! YES! NO!
57. Fuck, now what?
58. Code… if you want to. But definitely learn the basics.
59. “HTML is a Design Element” Christoper Murphy
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
69. Expectation
71. Reality
72. Reality
73. Write, blog and speak about it.
74. Experiment, and set your own challenges.
83. Show what your working on.
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.
136. Psychology of colour
137. Psychology of colour Colours determine the psychological effect on viewers.
139. Power, Importance
140. Power, Importance Friendliness, Energy
141. Power, Importance Friendliness, Energy Happiness, Enthusiasm
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.
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.
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.
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
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.
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."
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.
281. Give.
282. Giving can establish you as the expert.
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!