Should Designers Be Able to Code?

This seems to be a bit of a hot topic on Twitter right now so here’s my take.

The definitions of designer and developer and where you draw the line between the roles is a bit of a nonsense. In reality you can’t box things like this. It’s about the individuals and what skills they have and what fits your team. Overlaps in skills are not a problem, gaps are. So, the handover points will naturally surface out of what works for the team. That said, I do have some more specific thoughts about what might kinds of coding might empower a designer.

I’m assuming we’re talking about designers who already write HTML and CSS and what level of JavaScript they should know or learn. A designer who works in a graphics editor or prototyping environment clearly has a different skill set.

Knowing some basic DOM manipulation techniques can really help to add some life and interaction to designs – “Interaction Design”.

  1. Being able to select a DOM element with document.querySelector() is a good starting point.
  2. Basic event handling with .addEventListener('click', handler) is useful as it allows you to add actions.
  3. Handling events means learning how to write a very basic named function.
  4. Finally being able to toggle properties like hidden and disabled or add/remove/toggle items fromĀ classList enables you to design for lots of different states within the same document.

I think just these few basic steps will enable a designer to achieve a lot more in their designs.

Most beginner’s JavaScript courses I’ve seen seem to start with constructing objects but this is far less useful for UI work. Designers probably don’t need to worry about objects, arrays, classes and the whole data side. Static data is generally sufficient for communicating the design and interactions.

My Firefox Add-ons

I use Mozilla Firefox as my prefered web browser. Firefox allows you to expand its functionality by adding on mini programs. These are called add-ons. I thought I’d share some of my favourite add-ons.

AdBlock PlusAdBlock Plus
This add-on blocks adverts in web pages. It collapses any content being imported from ad servers. You should see how small the Yahoo! home page becomes without its advertising. There are no more sponsored results on search engine pages, only organic results. It allows you to manually create exceptions, pages where ads are allowed. Where it detects any Flash content it displays a tiny button so that you can manually block this content.

XmarksXmarks (formerly Foxmarks)
This is a Bookmark or Favourites synchronisation tool. Put simply, if you use more than one computer it keeps your bookmarks or favourites consitent. I use three different PCs and find this tool invaluable.

If you use Twitter this is very useful. You can stay connected to your Twitter account without the need for having the site open. Any new tweets are popped up in a bubble at the bottom of your browser window. Clicking on the status bar icon allows you to read tweets or tweet yourself quickly and easily.

FacebookFacebook Toolbar
Similar to the Twitter tool this keeps you up to date with happenings on Facebook via small pop up messages in your web browser. The toolbar allows you to update your status in the browser, see how many items in your inbox, view your friends in a sidebar as well as share the content of the page you are currently browsing.

DiggDigg Toolbar
This makes it quick and easy to share the content of the page you are browsing on Digg. With one click (“Digg This”) you can submit a new URL to Digg to share with the online community.

DeliciousDelicious Toolbar
Like Digg this allows you to add and share online bookmarks to Delicious with a single click.

For web designers, developers or anyone working with graphics this is an eyedropper tool for picking colours. By clicking the tiny icon in the status bar you geta crosshair which when clicked on any pixel on screen gives the colour references in both Hexadecimal and RGB 0-255 values. This is incredibly useful if you see a colour you want to use. It also has the option to copy the various colour values straight to the clipboard.

Web DeveloperWeb Developer Toolbar
Quite specifically for the web designer or web developer this toolbar has buttons which strip down the web page in the browser window to its various elements. You can view just CSS (styling), just images, identitfy different layers (div tags) – just about anyhting you might want to know about a page is there.

If anyone reading knows of any other useful add-ons please feel free to share.