Working with designers that dont code

Working with designers that don't code

~ !e Digital Barn - September 2012

~ Kirsty Burgoine

~ @kirstyburgoine

~ [email protected]

~ h!p://bit.ly/RCjnYB

I “~ grin!” alot

Who am I ?

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

mailto:[email protected]


http://www.kirstyburgoine.co.uk


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!

h"p://bit.ly/S1Ek2l

Cue Shameless plug ...

~ 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:

http://www.netmagazine.com/opinions/i-working-web-designers-who-can-t-code


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 designing for but they don’t need to be able to actually write the HTML / CSS.

"em not knowing how to code makes me think about new ways to do things.

Pushes me to do more and do it be!er.

I compared it to a car manufacturer.

No one person would design and manufacture that car.

"ere would be a *team* of people with specialist knowledge.

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 liveWhat 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 $y.”

“How can one be called a *web* designer if s/he doesn't know HTML?”

“I don’t agree with anything you wrote in this article.”

* Comments came %om the article, twi"er and facebook

“Car designers may not need to know the exact speci&cation of how the cooling system works, but they ought to know what is feasible to create with the technologies available (materials, processes etc).

!is applies to the web too, designers *should* have a fundamental understanding of the box model at least so they don't create unfeasible designs.”

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 %ank, 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 o'en learn through communication with those who can. !ey 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 ...

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%

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%

audience participation over

98% - Design of interactions i.e. hover states, open and closed boxes and how they interact

90% - Pro#ciency with image editing so$ware 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

Results

What I didn’t expect ...

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% - Pro#ciency with page layout so$ware i.e. Adobe In Design / Quark Express

Results

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 %om, 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.

!e 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 Twi"er/Facebook) and the etique"e involved.

A more holistic view of UX/Interface/Interaction design.

!e ideas of progressive enhancement, content &rst 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:

!ey should learn to communicate with developers: "would this work?"

~ Javascript Developer

Its all about communication

Example

h"p://bit.ly/HV115a

http://bit.ly/HV115a


Polly’s Parlour

h"p://bit.ly/HV115a

Invision App : h!p://invisionapp.com



http://invisionapp.com

http://invisionapp.com

Polly’s Parlour

h"p://bit.ly/HV115a



Polly’s Parlour

h"p://bit.ly/HV115a

"is immediately got over the #rst technical challenge of designing responsively

"e client could see exactly how the site would function and make sure all of the key elements had been included.

It allowed me to plan the best (and quickest) way to make sure the site was fully content manageable

Creative Meeting! "is allowed us both to discuss our ideas, veto things that were not possible within the budget / timeframe

Communication during the design. Is this possible? Can you do this? And suggest alternatives if not.

Discussed before sending to the client!

Creating clickable wireframes Creating the designs



"ey DO need to have a good understanding of the medium they are designing for.

"ey DO need to understand web typography and what’s available.

"ey DO need to think about user interaction, how easy the site is to use, hover effects etc.

"ey DON’T need to be able to build the page themselves.

"ey DON’T need to know exactly how to create the interaction or responsive layout.

"ey DON’T need to plan the structure of the site.

Web designers need to work as part of a team...

Do’s Don’ts

... 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

~ [email protected]

~ h!p://bit.ly/RCjnYB





Working with designers that dont code

Documents

Transcript of Working with designers that dont code