Working with designers that dont code

709 views
669 views

Published on

Presentation for The Digital Barn. September 2012

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
709
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Working with designers that dont code

  1. 1. Working with designers that dont code ~ The Digital Barn - September 2012
  2. 2. Who am I ? ~ Kirsty Burgoine ~ @kirstyburgoine ~ info@kirstyburgoine.co.uk ~ http://bit.ly/RCjnYB I “~ grin!” alotWeb Developer, sometimes designer, owner of the imaginatively named company Kirsty Burgoine Ltd. Geek, music lover, coffee enthusiast.Brief history of Kirsty Burgoine Ltd.I specialise in designing and building bespoke websites using Wordpress.What I do now and how I work with othersI’m going to start with a pretty bold statement
  3. 3. I don’t think web designers NEED to know how to codeMany of you in this room will probably dis agree with this statement. by “code” I mean building a HTML / CSS page rather than server side codeDuring this talk, I’m going to explain how I came to make this announcement, why I think this and show you how I work so hopefully by the end there are a few less people that disagree.Stress that working with designers that don’t code was not originally a choice!
  4. 4. Cue Shameless plug ... http://bit.ly/S1Ek2l ~ grin!and this was it!I was half excited about this and half dreading it.I’ve always wanted to write something for .net and one day I may even get in the printed mag, but for now this was a huge deal for me but also terrifying.It wasn’t helped by the fact that .net chose to tweet and facebook it like this:
  5. 5. This isn’t actually what I said.I get why they did it but at no point did I actually say that.
  6. 6. Overview ... Web designers should have a good understanding of the medium they are I compared it to a car manufacturer. designing for but they don’t need to be able to actually write the HTML / CSS. No one person would design and manufacture that car. Them not knowing how to code makes me think about new ways to do things. There would be a *team* of people with specialist knowledge. Pushes me to do more and do it better. Its all about team work and communicationI like that the designer can think about layout / typography / interactions without the restrictions of only knowing a certain amount.I have to build the site, so they check with me whether the effect is possible and I like the challenge of thinking about how I would do that.I didn’t say that I prefer it working with designers that don’t code, its not always possible, and it does entirely depend on the projectSo it went liveWhat actually happened was quite a surprise! Yes, I did get quite a lot of negative comments including:
  7. 7. “You prefer designers who cant code? Me too.  And bus drivers who cant drive.  And pilots who cant fly.” “How can one be called a *web* designer if s/he doesnt know HTML?” “Car designers may not need to know the exact specification of how the cooling system works, but they ought to know what is feasible to create with the technologies available (materials, processes etc). This applies to the web too, designers *should* have a fundamental understanding of the box model at least so they dont create unfeasible designs.” “I don’t agree with anything you wrote in this article.” * Comments came from the article, twitter and facebookBut, to be honest most of the negative comments made me think that these people hadn’t actually read my article, they were just reacting to thetitle .Net Mag put on Facebook and Twitter.
  8. 8. “seriously tho, why the fuck does a designer need to know about a box model? puhlease” ~ grin!I even had one person email me with:
  9. 9. “I just came across your article on .net - to be frank, a lot of the designson your portfolio are just bad. Id be willing to work with you - if youreinterested.For an idea of some recent work Ive done:”
  10. 10. So, ok. It was kind of this person to email me privately rather than to publicly call my websites bad, but, to be honest, I stand by every website I’ve built. My clients are happy, I’ve interpretedtheir brief correctly, I stick to deadlines and budgets and I still get to add something “extra” to each site that makes them a little bit different.Are they the most amazing websites in the world? Probably not. Do I think they are awesome? Absolutely. Because my clients think so.What surprised me most about this experience though, was the amount of comments from people that actually agreed with me. I genuinely expected to be shot down in flames over this.
  11. 11. “Again and again, I think this topic falls over because many people cant make the distinction between "knowing" and "understanding". For the web, designers need to understand the medium, but they dont necessarily need to know how it works. Designers who dont code often learn through communication with those who can. They dont write any of the code, but they talk to the person who does, and allows everyone to focus on the discipline they want to succeed at.”This was exactly the point I was trying tomake!
  12. 12. Its all about team work and communicationThe mixed reaction got me thinking about what other people in web industry think so I decided to do a small survey.Cue audience participation ...
  13. 13. Its all about team work and communicationThe mixed reaction got me thinking about what other people in web industry think so I decided to do a small survey.Cue audience participation ...
  14. 14. I asked Twitter 3 questions about what skills they expect web designers to haveThere were 59 responses and all were allowed to choose more than one answer
  15. 15. I asked Twitter 3 questions about what skills they expect web designers to haveThere were 59 responses and all were allowed to choose more than one answer
  16. 16. I asked Twitter 3 questions about what skills they expect web designers to haveThere were 59 responses and all were allowed to choose more than one answer
  17. 17. What technical abilities do you expect a web designer to have? Proficiency with image editing software i.e. Adobe Photoshop / Illustrator / Fireworks 53 - 90% Proficiency with page layout software i.e. Adobe In Design / Quark Express 8 - 14% A general knowledge of HTML / CSS but not enough to build the site themselves 18 - 31% A good enough knowledge of HTML / CSS to be able to design in a browser 42 - 71%The questions were:I’m going to give you the top answer for each, I want you guys to guess the next
  18. 18. What technical abilities do you expect a webdesigner to have?Proficiency with image editing software i.e. Adobe Photoshop / Illustrator / Fireworks53 - 90%Proficiency with page layout software i.e. Adobe In Design / Quark Express8 - 14%A general knowledge of HTML / CSS but not enough to build the site themselves18 - 31%A good enough knowledge of HTML / CSS to be able to design in a browser42 - 71%
  19. 19. What technical abilities do you expect a webdesigner to have?Proficiency with image editing software i.e. Adobe Photoshop / Illustrator / Fireworks53 - 90%Proficiency with page layout software i.e. Adobe In Design / Quark Express8 - 14%A general knowledge of HTML / CSS but not enough to build the site themselves18 - 31%A good enough knowledge of HTML / CSS to be able to design in a browser42 - 71%
  20. 20. What technical abilities do you expect a webdesigner to have?Proficiency with image editing software i.e. Adobe Photoshop / Illustrator / Fireworks53 - 90%Proficiency with page layout software i.e. Adobe In Design / Quark Express8 - 14%A general knowledge of HTML / CSS but not enough to build the site themselves18 - 31%A good enough knowledge of HTML / CSS to be able to design in a browser42 - 71%
  21. 21. What technical abilities do you expect a webdesigner to have?Proficiency with image editing software i.e. Adobe Photoshop / Illustrator / Fireworks53 - 90%Proficiency with page layout software i.e. Adobe In Design / Quark Express8 - 14%A general knowledge of HTML / CSS but not enough to build the site themselves18 - 31%A good enough knowledge of HTML / CSS to be able to design in a browser42 - 71%
  22. 22. If you answered "design in browser", howmuch technical knowledge do you expect thedesigner to have?Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focusstates etc.41 - 93%Good use of Media Queries to create fully responsive layouts27 - 61%jQuery / Javascript for advanced animations and interactivity11 - 25%Accessibility features i.e. consideration for people using screen readers and otherassistive technologies24 - 55%
  23. 23. If you answered "design in browser", howmuch technical knowledge do you expect thedesigner to have?Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focusstates etc.41 - 93%Good use of Media Queries to create fully responsive layouts27 - 61%jQuery / Javascript for advanced animations and interactivity11 - 25%Accessibility features i.e. consideration for people using screen readers and otherassistive technologies24 - 55%
  24. 24. If you answered "design in browser", howmuch technical knowledge do you expect thedesigner to have?Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focusstates etc.41 - 93%Good use of Media Queries to create fully responsive layouts27 - 61%jQuery / Javascript for advanced animations and interactivity11 - 25%Accessibility features i.e. consideration for people using screen readers and otherassistive technologies24 - 55%
  25. 25. If you answered "design in browser", howmuch technical knowledge do you expect thedesigner to have?Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focusstates etc.41 - 93%Good use of Media Queries to create fully responsive layouts27 - 61%jQuery / Javascript for advanced animations and interactivity11 - 25%Accessibility features i.e. consideration for people using screen readers and otherassistive technologies24 - 55%
  26. 26. If you answered "design in browser", howmuch technical knowledge do you expect thedesigner to have?Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focusstates etc.41 - 93%Good use of Media Queries to create fully responsive layouts27 - 61%jQuery / Javascript for advanced animations and interactivity11 - 25%Accessibility features i.e. consideration for people using screen readers and otherassistive technologies24 - 55%
  27. 27. What other things do you expect a webdesigner to know about and consider?Design of interactions i.e. hover states, open and closed boxes and how they interact58 - 98%Search Engine Optimisation i.e. inclusion of breadcrumb trails, correct wording inheadings / links etc.33 - 56%Plan the structure and amount of pages for the website32 - 54%Content strategy16 - 27%
  28. 28. What other things do you expect a webdesigner to know about and consider?Design of interactions i.e. hover states, open and closed boxes and how they interact58 - 98%Search Engine Optimisation i.e. inclusion of breadcrumb trails, correct wording inheadings / links etc.33 - 56%Plan the structure and amount of pages for the website32 - 54%Content strategy16 - 27%
  29. 29. What other things do you expect a webdesigner to know about and consider?Design of interactions i.e. hover states, open and closed boxes and how they interact58 - 98%Search Engine Optimisation i.e. inclusion of breadcrumb trails, correct wording inheadings / links etc.33 - 56%Plan the structure and amount of pages for the website32 - 54%Content strategy16 - 27%
  30. 30. What other things do you expect a webdesigner to know about and consider?Design of interactions i.e. hover states, open and closed boxes and how they interact58 - 98%Search Engine Optimisation i.e. inclusion of breadcrumb trails, correct wording inheadings / links etc.33 - 56%Plan the structure and amount of pages for the website32 - 54%Content strategy16 - 27%
  31. 31. What other things do you expect a web designer to know about and consider? Design of interactions i.e. hover states, open and closed boxes and how they interact 58 - 98% Search Engine Optimisation i.e. inclusion of breadcrumb trails, correct wording in headings / links etc. 33 - 56% Plan the structure and amount of pages for the website 32 - 54% Content strategy 16 - 27%audience participation over
  32. 32. Results98% - Design of interactions i.e. hover states, open and closed boxes and how they interact90% - Proficiency with image editing software i.e. Adobe Photoshop / Illustrator / Fireworks93% - Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focus states etc.71% - A good enough knowledge of HTML / CSS to be able to design in a browser61% - Good use of Media Queries to create fully responsive layouts What I didn’t expect ...
  33. 33. Results 56% - Search Engine Optimisation i.e. inclusion of breadcrumb trails, correct wording in headings / links etc. 55% - Accessibility features i.e. consideration for people using screen readers and other assistive technologies 54% - Plan the structure and amount of pages for the website 14% - Proficiency with page layout software i.e. Adobe In Design / Quark ExpressThe last one is quite worrying.Most of these results are pretty much what I expected, but I also had a “catch all” box so that people could leave a further comment
  34. 34. Comments “I think there should be a lot more to being a web designer: A knowledge of where the discipline has come from, e.g. history of the internet, roots of graphic design (typography, layout, grids, colour theory), marketing/advertising basics. Understanding the rudiments of programming in a serverside language. The ability to handcode, i.e. to use a text editor, not a wysiwyg tool. Some understanding of social media (I include email, forums, blogs etc. as much as Twitter/Facebook) and the etiquette involved. A more holistic view of UX/Interface/Interaction design. The ideas of progressive enhancement, content first and similar - that the design might change and can be built upon.” ~ Web DesignerThere were quite a few comments and I will release all of the results.Combined with the results I didn’t expect, I found this comment the most alarming. Surely this is what a team of people should know?Not one designer.And again, the one that sums up my point:
  35. 35. They should learn to communicate with developers: "would this work?" ~ Javascript DeveloperIts all about communication
  36. 36. Example http://bit.ly/HV115a
  37. 37. Polly’s ParlourInvision App : http://invisionapp.com http://bit.ly/HV115a
  38. 38. Polly’s Parlour http://bit.ly/HV115a
  39. 39. Polly’s ParlourCreating clickable wireframes Creating the designsThis immediately got over the first technical Creative Meeting! This allowed us both to discusschallenge of designing responsively our ideas, veto things that were not possible within the budget / timeframeThe client could see exactly how the site wouldfunction and make sure all of the key elements Communication during the design. Is thishad been included. possible? Can you do this? And suggest alternatives if not.It allowed me to plan the best (and quickest) wayto make sure the site was fully content manageable Discussed before sending to the client! http://bit.ly/HV115a
  40. 40. Web designers need to work as part of a team... Do’s Don’ts They DO need to have a good understanding They DON’T need to be able to build the of the medium they are designing for. page themselves. They DO need to understand web typography They DON’T need to know exactly how to and what’s available. create the interaction or responsive layout. They DO need to think about user interaction, They DON’T need to plan the structure of how easy the site is to use, hover effects etc. the site. ... and if you still don’t agree?Having all of the extra knowledge is great, but if they are working with others that specialise in those areas, do they need to know it?
  41. 41. Get in touch, work with meand show me how its done!
  42. 42. Questions?~ @kirstyburgoine~ info@kirstyburgoine.co.uk~ http://bit.ly/RCjnYB

×