SlideShare a Scribd company logo
1 of 42
Download to read offline
Working with designers that don't code
                     ~ The Digital Barn - September 2012
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
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!
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:
This isn’t actually what I said.
I get why they did it but at no point did I actually say that.
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:
“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.
“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:
“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:”
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.
“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!
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 ...
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 ...
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
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
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
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
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%
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%
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%
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%
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%
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%
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%
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%
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%
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%
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%
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%
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%
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
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 ...
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
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:
They should learn to communicate with developers:
                  "would this work?"
                                                    ~ Javascript Developer




Its all about communication
Example




          http://bit.ly/HV115a
Polly’s Parlour




Invision App : http://invisionapp.com


                                        http://bit.ly/HV115a
Polly’s Parlour




                  http://bit.ly/HV115a
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
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?
Get in touch, work with me
and show me how its done!
Questions?




~ @kirstyburgoine

~ info@kirstyburgoine.co.uk

~ http://bit.ly/RCjnYB

More Related Content

Similar to Working with designers that dont code

Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfacesJohan Ronsse
 
The future is modulair - new approach to web design
The future is modulair - new approach to web designThe future is modulair - new approach to web design
The future is modulair - new approach to web designMariken de Ruiter
 
Justin French Web Directions07
Justin French Web Directions07Justin French Web Directions07
Justin French Web Directions07justinfrench
 
Unleash Your Inner Unicorn
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner UnicornMatt Baxter
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersBootstrap Creative
 
Web Desiner vs web Developer
Web Desiner vs web DeveloperWeb Desiner vs web Developer
Web Desiner vs web DeveloperAliAhmad604
 
Reasons to be cheerful - Fronteers 2010
Reasons to be cheerful - Fronteers 2010Reasons to be cheerful - Fronteers 2010
Reasons to be cheerful - Fronteers 2010Christian Heilmann
 
Print production research, experiments, planning
Print production research, experiments, planningPrint production research, experiments, planning
Print production research, experiments, planningJoshEastham2
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative
 
We design orientation class
We design orientation classWe design orientation class
We design orientation classMunirMahmud3
 
Responsive Web Design Process
Responsive Web Design ProcessResponsive Web Design Process
Responsive Web Design ProcessSteve Fisher
 
Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectationsFrancesco Improta
 
Opportunities handout
Opportunities handoutOpportunities handout
Opportunities handoutJonah Adshead
 
AD - Developer communication and Technology
AD - Developer communication and TechnologyAD - Developer communication and Technology
AD - Developer communication and TechnologyEnplore AB
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
 

Similar to Working with designers that dont code (20)

Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Evaluation Q6
Evaluation Q6Evaluation Q6
Evaluation Q6
 
The future is modulair - new approach to web design
The future is modulair - new approach to web designThe future is modulair - new approach to web design
The future is modulair - new approach to web design
 
Justin French Web Directions07
Justin French Web Directions07Justin French Web Directions07
Justin French Web Directions07
 
Unleash Your Inner Unicorn
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner Unicorn
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
 
Web Desiner vs web Developer
Web Desiner vs web DeveloperWeb Desiner vs web Developer
Web Desiner vs web Developer
 
Webdesign
WebdesignWebdesign
Webdesign
 
Reasons to be cheerful - Fronteers 2010
Reasons to be cheerful - Fronteers 2010Reasons to be cheerful - Fronteers 2010
Reasons to be cheerful - Fronteers 2010
 
Print production research, experiments, planning
Print production research, experiments, planningPrint production research, experiments, planning
Print production research, experiments, planning
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
We design orientation class
We design orientation classWe design orientation class
We design orientation class
 
Question 6
Question 6Question 6
Question 6
 
Sweating the UX Details
Sweating the UX DetailsSweating the UX Details
Sweating the UX Details
 
Responsive Web Design Process
Responsive Web Design ProcessResponsive Web Design Process
Responsive Web Design Process
 
Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectations
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Opportunities handout
Opportunities handoutOpportunities handout
Opportunities handout
 
AD - Developer communication and Technology
AD - Developer communication and TechnologyAD - Developer communication and Technology
AD - Developer communication and Technology
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 

More from Kirsty Burgoine

Smile - Its never that bad! Mastering the sales meeting without turning to th...
Smile - Its never that bad! Mastering the sales meeting without turning to th...Smile - Its never that bad! Mastering the sales meeting without turning to th...
Smile - Its never that bad! Mastering the sales meeting without turning to th...Kirsty Burgoine
 
The dark art of sales meetings - WordCamp Bournemouth Version
The dark art of sales meetings - WordCamp Bournemouth VersionThe dark art of sales meetings - WordCamp Bournemouth Version
The dark art of sales meetings - WordCamp Bournemouth VersionKirsty Burgoine
 
Question of deliverables and other such stuff
Question of deliverables and other such stuffQuestion of deliverables and other such stuff
Question of deliverables and other such stuffKirsty Burgoine
 
WP London Meetup - August 2013
WP London Meetup - August 2013WP London Meetup - August 2013
WP London Meetup - August 2013Kirsty Burgoine
 
Speak the Web - Liverpool 24.07.13
Speak the Web - Liverpool 24.07.13Speak the Web - Liverpool 24.07.13
Speak the Web - Liverpool 24.07.13Kirsty Burgoine
 
WCUK2013 - ACF Flexible Content and other cool stuff
WCUK2013 - ACF Flexible Content and other cool stuffWCUK2013 - ACF Flexible Content and other cool stuff
WCUK2013 - ACF Flexible Content and other cool stuffKirsty Burgoine
 

More from Kirsty Burgoine (9)

Wpldn july2015 usb
Wpldn july2015 usbWpldn july2015 usb
Wpldn july2015 usb
 
WC Birmingham 2015
WC Birmingham 2015WC Birmingham 2015
WC Birmingham 2015
 
Smile - Its never that bad! Mastering the sales meeting without turning to th...
Smile - Its never that bad! Mastering the sales meeting without turning to th...Smile - Its never that bad! Mastering the sales meeting without turning to th...
Smile - Its never that bad! Mastering the sales meeting without turning to th...
 
The dark art of sales meetings - WordCamp Bournemouth Version
The dark art of sales meetings - WordCamp Bournemouth VersionThe dark art of sales meetings - WordCamp Bournemouth Version
The dark art of sales meetings - WordCamp Bournemouth Version
 
Question of deliverables and other such stuff
Question of deliverables and other such stuffQuestion of deliverables and other such stuff
Question of deliverables and other such stuff
 
WP London Meetup - August 2013
WP London Meetup - August 2013WP London Meetup - August 2013
WP London Meetup - August 2013
 
Speak the Web - Liverpool 24.07.13
Speak the Web - Liverpool 24.07.13Speak the Web - Liverpool 24.07.13
Speak the Web - Liverpool 24.07.13
 
WCUK2013 - ACF Flexible Content and other cool stuff
WCUK2013 - ACF Flexible Content and other cool stuffWCUK2013 - ACF Flexible Content and other cool stuff
WCUK2013 - ACF Flexible Content and other cool stuff
 
Extending word press
Extending word pressExtending word press
Extending word press
 

Working with designers that dont code

  • 1. Working with designers that don't code ~ The Digital Barn - September 2012
  • 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
  • 36. Example http://bit.ly/HV115a
  • 37. Polly’s Parlour Invision App : http://invisionapp.com http://bit.ly/HV115a
  • 38. Polly’s Parlour http://bit.ly/HV115a
  • 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!