Notes from Design4Drupal 2010: Designer and Developer Collaboration

 

This talk was given on January 23, 2010 by Jon Skulski at Stanford University. I've written up my notes below. Enjoy!

This talk is about how can designers can focus on making a website easy to build. What reasonable elements can I use on my site to make it easy to launch. I work as a developer in Chapter Three in San Francisco, a design and development firm.

As a Drupal Architect, I'm an interface between designers and development of the site.

Balance Between Designers, Developers and Users

Traditionally there is a kind of tension between designers and developers; designers view developers as compilers, developers see designers and people who draw pictures, and users just want the site to work. If everyone understands each other better, we can make the site better and easier to use.

The designer takes the client requests and turn it into a comp. With complicated projects or demanding clients, the design may not be exactly consistent, as the designer is attempting to match the client's expectations.

We Need Visibility Into Each Other's Work

With visibility comes great power; with great power comes ease. For example, if a designer understands to some extent how the developer does their job, they can design the comp in such a way that it's easy to code.

How Do We Do This?

I use the phrase, "Design with your developer, develop with your designer." Each person should understand how to make the site interesting to the user and something that meets the client's needs, but is still easy to program.

On the flip-side, the developer has to understand the design. It's really bad practice to just take a comp and try to make a website, and knock it off. It's better to understand what the designer was attempting to build and the totality of what the website is trying to accomplish.

Often the client will change their mind or may not have thought of something; if you slap in a new feature, for example, it can detract from the client's goals and the designer's vision.

Your common goal is a great looking & working website that will be built.

Repeatable Patterns

Consistent elements in your site ensure that users will not be confused. It also results in reuse of code, which results in more maintainable code. A strong code base is easy to modify and revise into, for example, a version 2.

You never want to just hack everything together and then when a change request comes in, you don't want to touch the code because you did so many terrible things.

Content

Drupal is really good at storing data, getting data out, and getting dynamic lists of data. Views will give you an ordered, filtered, tagged list that can be searched by keywords. We can use this to our advantage to satisfy client requests.

Forms

Creating a content type with CCK and taxonomy takes perhaps 15 minutes of work, and it comes with its own data-entry form. On this form, changing the wording and the size of things is no problem and moving items around is no problem. Forms can be themed! It's not hard. Talk to your developer and see what's possible.

Bulk operations, Ajax and Exposed Filters

Similar to sorting, exposed filters can filter tables of content to restrict the author or type of content, for example. These widgets are theme-able and configurable. They're automatic to views and views bulk operation.

Drupal is also great at reloading content without reloading the entire page. You won't be able to, for example, make a URL for "page 2" of your list, and Google will not be able to index that list past the first page, but it's a great interface for administrative tools.

Admin dashboard

Putting together all the topics I've talked about, you can create a nice customized Admin dashboard. Chapter Three maintains a module called total_control.

Active Tags

This module allows you to tag content without worrying about the autocomplete nonsense of separating tags by a comma, and remove the tags by clicking the red 'x' to the right of the tag name.

Drag and Drop

You can see this in the taxonomy interface and the menu interface; you can just drag menu items around. It really works out well! There are a number of modules which use this and extend it: DraggableViews, Weight, Nodequeue, in addition to many others.

Drag and drop is in core for us to use. Use it in your designs!

jQuery UI

The whole idea of this project is to standardize reusable elements for others to use. Draggables are used by Drupal; also sliders, carousels, etc, are available by including a file and doing an hour or two of customization.

If you have a developer that knows this library and knows what's available, you can create a really fresh looking website without weeks of development.

Modal Dialogues

Thickbox, shadowbox and colorbox... there's many out there that can do similar things. They're out there for free, and you can use them in your designs.

Edit In Place

This helps admins edit different parts of the website without digging deep into the Drupal admin pages, or views admin pages... your developer can use the jeditable project to integrate edit-in-place capability to different views.

Hard Problems are Worth It!

You just have to be careful about doing them. Always ask how many are there? Can we make them easier? Do we have enough time? Can we reuse the modules that we build in other sites, or contribute them back to the community?

Thanks to Jon Skulski for giving this talk. You can follow Jon on twitter here: http://twitter.com/jonskulski

Did you enjoy this post? Please spread the word.