2. Who am I ?
~ Kirsty Burgoine
~ @kirstyburgoine
~ info@kirstyburgoine.co.uk
~ http://bit.ly/RCjnYB
I “~ grin!” alot
Web 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 others
I’m going to start with a pretty bold statement
3. I don’t think web designers NEED to know how to code
Many 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 code
During 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. 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. This isn’t actually what I said.
I get why they did it but at no point did I actually say that.
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 communication
I 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 project
So it went live
What actually happened was quite a surprise! Yes, I did get quite a lot of negative comments including:
7. “You prefer designers who can't code? Me too. And bus drivers who
can't drive. And pilots who can't fly.”
“How can one be called a *web* designer if s/he
doesn't 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 don't create unfeasible designs.”
“I don’t agree with anything you wrote in this article.”
* Comments came from the article, twitter and facebook
But, 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 the
title .Net Mag put on Facebook and Twitter.
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. “I just came across your article on .net - to be frank, a lot of the designs
on your portfolio are just bad. I'd be willing to work with you - if you're
interested.
For an idea of some recent work I've done:”
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 interpreted
their 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. “Again and again, I think this topic falls over because many people can't make
the distinction between "knowing" and "understanding".
For the web, designers need to understand the medium, but they don't necessarily
need to know how it works. Designers who don't code often learn through
communication with those who can. They don't 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 to
make!
12. Its all about team work and communication
The 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. Its all about team work and communication
The 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. I asked Twitter 3 questions about what skills they expect web designers to have
There were 59 responses and all were allowed to choose more than one answer
15. I asked Twitter 3 questions about what skills they expect web designers to have
There were 59 responses and all were allowed to choose more than one answer
16. I asked Twitter 3 questions about what skills they expect web designers to have
There were 59 responses and all were allowed to choose more than one answer
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. 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%
19. 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%
20. 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%
21. 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%
22. If you answered "design in browser", how
much technical knowledge do you expect the
designer to have?
Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focus
states etc.
41 - 93%
Good use of Media Queries to create fully responsive layouts
27 - 61%
jQuery / Javascript for advanced animations and interactivity
11 - 25%
Accessibility features i.e. consideration for people using screen readers and other
assistive technologies
24 - 55%
23. If you answered "design in browser", how
much technical knowledge do you expect the
designer to have?
Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focus
states etc.
41 - 93%
Good use of Media Queries to create fully responsive layouts
27 - 61%
jQuery / Javascript for advanced animations and interactivity
11 - 25%
Accessibility features i.e. consideration for people using screen readers and other
assistive technologies
24 - 55%
24. If you answered "design in browser", how
much technical knowledge do you expect the
designer to have?
Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focus
states etc.
41 - 93%
Good use of Media Queries to create fully responsive layouts
27 - 61%
jQuery / Javascript for advanced animations and interactivity
11 - 25%
Accessibility features i.e. consideration for people using screen readers and other
assistive technologies
24 - 55%
25. If you answered "design in browser", how
much technical knowledge do you expect the
designer to have?
Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focus
states etc.
41 - 93%
Good use of Media Queries to create fully responsive layouts
27 - 61%
jQuery / Javascript for advanced animations and interactivity
11 - 25%
Accessibility features i.e. consideration for people using screen readers and other
assistive technologies
24 - 55%
26. If you answered "design in browser", how
much technical knowledge do you expect the
designer to have?
Enough HTML / CSS to create a standard page with basic interactivity i.e. CSS hover / focus
states etc.
41 - 93%
Good use of Media Queries to create fully responsive layouts
27 - 61%
jQuery / Javascript for advanced animations and interactivity
11 - 25%
Accessibility features i.e. consideration for people using screen readers and other
assistive technologies
24 - 55%
27. 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%
28. 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%
29. 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%
30. 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%
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. Results
98% - Design of interactions i.e. hover states, open and closed boxes and how they interact
90% - Proficiency with image editing software i.e. Adobe Photoshop / Illustrator / Fireworks
93% - 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 browser
61% - Good use of Media Queries to create fully responsive layouts
What I didn’t expect ...
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 Express
The 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. 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 Designer
There 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. They should learn to communicate with developers:
"would this work?"
~ Javascript Developer
Its all about communication
39. Polly’s Parlour
Creating clickable wireframes Creating the designs
This immediately got over the first technical Creative Meeting! This allowed us both to discuss
challenge of designing responsively our ideas, veto things that were not possible
within the budget / timeframe
The client could see exactly how the site would
function and make sure all of the key elements Communication during the design. Is this
had been included. possible? Can you do this? And suggest
alternatives if not.
It allowed me to plan the best (and quickest) way
to make sure the site was fully content manageable Discussed before sending to the client!
http://bit.ly/HV115a
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. Get in touch, work with me
and show me how its done!