Design for Drupal: The Wiki

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

At the recent & awesome DrupalCon Copenhagen we had two Birds of a Feather meetings regarding what can be done to involve more designers in the Drupal project.
Discussion can be found here: http://groups.drupal.org/node/90274

Four user personas

Sarah Mason, web designer

Only local images are allowed.

Personal information

Age:
23
Job:
Freelance Web Designer, with three clients in wildly different industries
Location:
London, England
Description:
Sarah had an internship after university, with a company which used Drupal. She is now freelancing for three clients, two of which use Drupal. She has a basic understanding of Drupal themeing but her primary skills are in design and HTML/CSS.

Other websites they like

Goals & motivations

Experience goals:
* Wants to see examples and inspiration, through e.g. showcases and graphically browsable repositories of content.
* Likes to have a smooth, uncluttered, quick experience; easily frustrated by poor or inconsistent UI.
* She likes Textmate but she's used to more graphical experiences: Illustrator, Adobe Flash etc.
* Full packages - themes which are easy to build on, icon- and image-rich themes
* Easy-to-find howtos and documentation: contextual, usable, a good experience, findable.

End goals:
* Sarah wants to build up a portfolio of good design work...
* ... but she also has to pay bills, and wants to keep the current clients happy.
* So she has to work with Drupal. Maybe she'd design brochureware sites and Flash otherwise.
* She wants to be able to set up Drupal for a new client without thinking about it.
* She also wants to theme with the least amount of fuss.

Life goals:
* Still starting out and learning.
* Itching to do "fun" design - exciting, nice to look at.
* To feel inspired by, and on the same wavelength with, her peers
* Wants her work and contributions generally to feel appreciated

Frustrations

  • Drupal has a steep learning curve.
  • Installing Drupal is hard; editing on a remote site almost as hard!
  • Drupal.org isn't written from a designer's perspective. It looks ugly.
  • She finds it difficult to control Drupal's markup and html output.
  • It feels like trial and error.
  • Drupal help is hard to find and navigate. Best practice is rarely obvious.
  • Acres of text put her off.
  • She hates programming jargon.

Current involvement with Drupal

  • She has a drupal.org account but couldn't tell you the password.
  • She has an install of Drupal on her Mac, and lots of scrappy half-installs she'd never find again.
  • A friend set up the one that works, and she rarely dares to touch it.

Potential roles in Drupal ecosystem

  • Logging onto d.o more often.
  • Building on base themes and a user of childable themes and theme frameworks
  • Contributing theming documentation and pointing designers at it.
  • Contributing theme patches.
  • Commenting on g.d.o communities.
  • Skinr user & contributor (but it would be a tough sell.)

Eric Parker, print designer

Only local images are allowed.

Personal information

Age:
35
Job:
Graphic Designer, at a Drupal agency employing 50 people, developing in the entertainment industry
Location:
San Francisco
Description:
Eric is part of a team using Drupal to power several projects. He is currently working on a specific site in its planning stages. He has no knowledge of web design (HTML, CSS, etc). His design vision will be basis of the site's design and layout.

Other websites they like

Goals & motivations

Experience goals:
* Eric does not want to mess about
* He works most productively in native Mac applications
* Photoshop, Illustrator and Keynote. Hardly ever Microsoft Office and never NeoOffice.

End goals:
* Beautiful design and typography.
* Rich, detailed layouts with neat and attentive iconography and style
* Having this design "just work" in Drupal
* Knowing how to do that without compromising the design
* Surprising the client, but in the right way.
* Adding depth without drawing attention to it.

Life goals:
* Creating designs which are admired.
* Being respected and considered an opinion-former.
* Being knowledgeable about the state of the art.
* Eric is a perfectionist.

Frustrations

  • Submitting designs and finding that they are implemented poorly.
  • Fighting with developers all the time.
  • Restrictions on what he can and can't do.
  • Developers are unhappy with his difficult to implement designs. Team moral is suffering.
  • Drupal seems to be all about code.
  • drupal.org is awful: where are the design showcases?
  • It's all so blue and clumsy-looking.
  • Theming seems a million miles from the design.
  • Why is a single link in a PSD often harder than everything else put together?

Current involvement with Drupal

  • Eric tends to talk about Drupal in pretty mocking tones.

Potential roles in Drupal ecosystem

  • Occasional contributor
  • Drupal evangelist
  • Evangelist of good design, in Drupal!
  • Writer of design articles to a Drupal audience
  • Trusted "Drupal designer"
  • Opinion-former
  • Sandboxed contributions e.g. part of a larger d.o team, with someone else presenting it on g.d.o and handling the flak.

Jessica Peeters, themer

Only local images are allowed.

Personal information

Age:
28
Job:
Drupal themer & front-end developer, sole site producer for small Drupal agency (14 people)
Location:
Brussels, Belgium
Description:
Jessica has worked with Drupal for three years, and has extensive knowledge about the theming layer. She likes digging around in it, but finds it occasionally infuriating. She does advanced theming and alterations of markup, content and contexts.

Other websites they like

Goals & motivations

Experience goals:
* Solve fun problems and see really powerful results
* Implement designs faithfully and take care of the user
* Get feedback from other d.o community users and discuss things
* Textmate, Quicksilver, Illustrator, Keynote, can rough it with GIMP and some command-line.

End goals:
* Be as involved in the Drupal project as their module maintainer friends.
* Create usable, polished websites.
* Work fluidly and powerfully with themes and the Drupal themeing engine, not against them.
* Help out other themers.
* Feel part of the Drupal community.

Life goals:
* Become competent and trusted in end-to-end site production.
* Get involved with year-long million-page site reviews and also hour-long usability reviews, and everything in between.
* Be a part of, and a motivator of, something bigger than just her own area of work.
* Ripples.

Frustrations

  • Themeing is often not powerful or specific enough
  • Modules like Panels are as much a problem as a solution
  • Starter themes are often hard to work with
  • Child themes are not intuitive and there are lots of little hacks
  • Every theme does something completely different, and often has a lot of programming in it
  • Drupal's HTML isn't always that great, and deep-core HTML like Forms API is almost always inflexible
  • Best practice isn't obvious, and sometimes feels laborious anyway.
  • Drupal isn't visual. Modules aren't visual.
  • Sometimes it feels like nobody cares about UX.
  • "This module could be fantastic if only the interface was like this...."

Current involvement with Drupal

  • Co-maintainer of a contributed theme
  • Has submitted patches to core themes
  • Helps out on issue queues
  • Tries Patch Bingo occasionally but doesn't accomplish much
  • Picks her way over documentation
  • Is never quite sure how much she can rewrite docs

Potential roles in Drupal ecosystem

  • Core themeing engine developer or advisor
  • Contributing themes and frameworks/childable themes
  • Co-maintaining the UX for modules
  • Reviewing and comparing themes
  • Writing documentation
  • Mentoring designers and themers
  • Helping to resolve designer/developer dilemmas
  • Speaker at DrupalCamp and maybe a DrupalCon
  • Producing brilliant Drupal themes which everyone raves about
  • Themes as features?
  • Contributing icons and nice graphics to d.o

Zach Donald, module developer

Only local images are allowed.

Personal information

Age:
31
Job:
Web Developer
Location:
Denver, Colorado, USA
Description:
Zach maintains a number of Drupal modules, and uses tools like drush with ease. He wants his modules to be used, and although he doesn't know much about good UIs, he wants them to be designer-friendly and follow UI best practices.

Other websites they like

Goals & motivations

Experience goals:
* Command lines, configurability, tweaking
* drush make, .vimrc
* Wants things to be logical and explicable
* Graphical apps take too long to start up. Browsers too, sometimes.

End goals:
* Have his module used more often
* "Nail" good user interfaces so they're not always such a drawn-out problem
* Be free to work on bigger projects, maybe features or distributions
* Produce clever code for a given task and be happy that it's spot-on
* Attend DrupalCon and plan big projects

Life goals:
* Use interesting technologies and build cool stuff
* Be l33t
* Work fast

Frustrations

  • Users report his module is hard to use. They clog up his module's issue cue with questions about how to use the module.
  • His module does not look as good as he would like, but he can't work out why
  • People do download his module, but other similar projects are much more popular
  • He has a lot of functionality and good ideas going to waste
  • Theming is boring. It's just a load of HTML.
  • Getting an interface that's different from the data storage format is hard
  • The core theme engine makes programmatic sense but it doesn't always seem to result in good-looking modules or code.
  • Themes like Rubik and Bartik look nice, but I'm always a million miles away from that.
  • Wants to use more iconography without it looking sucky.

Current involvement with Drupal

  • Module maintainer
  • On IRC
  • Attends local Drupal meetups
  • Argues on other issue queues
  • Contributes patches regularly to other modules

Potential roles in Drupal ecosystem

  • Theme as feature
  • Partnering with a designer and making excellent modules
  • Leveraging smart PHP tricks to produce examples of classy UI
  • Translator of good UI into Drupal
  • Arguing cogently for why the user experience is so important
  • Review UI-related coding issues and contribute relevant patches
  • Bring in designers onto design-clueless discussions
  • Downloader of an icon library

Other user data (to be assigned where appropriate)

  • Zach is a module developer who wants his module's UI to look good, have designer-friendly markup, and follow UI best practices.
  • Eric is a print designer with no interest in the web. He is obliged to work with a new CMS for his upcoming project.
  • Jessica is a themer. She has extensive knowledge about the theming layer and does advanced theming and alterations of markup, content and contexts.
  • Sarah is a Web designer. She has been working in Drupal for a little while. She has a basic understanding of Drupal theming, but her primary skills are design and HTML/CSS skills. We want:
    • to get her included in the Drupal community (paves the way for interesting and experimental design from a non-Web experience in terms of design).
    • to not scare her off by jargon and code-y language.

Goals for Drupal

Drupal needs to enable these four user personas to reach their full potential. Here's a list of things it might want to do, based on the discussions at DrupalCon Copenhagen.

"Help me learn how to theme"

  • Get Drupal up and running
    • Sarah
  • Modifying a theme
    • Sarah
  • Building on a base theme
    • Sarah, Jessica
  • Build a theme from scratch
    • Jessica, Zach
  • Guidelines for Core and Contrib contributions: html and css standards
    • Sarah, Jessica, Zach

"Show me what can be done"

  • Site showcases
    • Sarah, Eric
  • Contrib theme reviews
    • Sarah, Eric, Jessica
  • Base theme comparisons
    • Jessica
  • Theme system docs
    • Jessica, Zach

"How can I help/contribute?"

  • Why you should contribute
    • Sarah, Jessica
  • Docs
    • All
  • Review issues
    • Jessica, Zach
  • Themes as Features
    • Jessica, Zach
  • Skinr snippets
    • Sarah, Eric?
  • Icon library?
    • Eric (I reckon, being bold), Sarah, Jessica, Zach (but all for different reasons)

"Our studio is (considering) switching over to Drupal for our online projects. Now…"

  • Which user would be likely to be in that position? Do we want a fifth user persona? Might be useful. A sympathetic non-Drupal... designer? web dev? Do non-Drupal designers tend to get stuck into PHP

Further goals

All:

  • Show me examples of well-done design implementations, success stories.
    • All, but maybe for different reasons. Why does Eric care?

Beginner:

  • What is the easiest way to test-drive this Drupal thing?
    • Sarah, Jessica
  • What is the recommended approach for getting my PSD turned into a working theme?
    • Sarah, Eric, Jessica
  • What are the good themes to learn from? Where do I find these?
    • Sarah, Jessica

Intermediate:

  • Ok, great. Now how do I build a theme from scratch?
    • Sarah (maybe), Jessica, Zach for reference
  • OMG! Ugly HTML! Can I change the output? How? Where?
    • Sarah, Jessica
  • How does theming work, and why does it work that way
    • Jessica, Zach

Advanced:

  • This Drupal thing rocks after all! Amazing that this is all volunteer work. I'd like to help and give something back as well. Why and how do I do that?
    • Sarah (not so advanced a thing to want to do - I think her enthusiasm could be tapped), Eric, if he were asked for his input, Jessica and Zach already contributing

Online contributors

  • jp.stacey
  • eoriordan
  • Cliff
  • yoroy
  • tkeenoy
  • smiro2000

Full list in node revisions.

Photo credits

Photos under Creative Commons licences:

Aegir example

AttachmentSize
druplicon.small_.jpg5.3 KB

Comments

Wireframe stencils for Drupal

kampmann's picture

Hi all,

Do anyone know of any wireframe stencils or other IA library for Drupal 6/7 ?

I have been searching but haven't had the luck of finding any.

Simon

Kinda

edward_or's picture

There are some fireworks templates available at http://www.chapterthree.com/greyboxing.

I am not sure if I would term them IA but they might be useful.

As a general point I think an expanded version of Chapter Three's wire-frames would make a great resource for Eric Parker (print designer). If you would be interested in getting a start on something like that please feel free!


Also I can't say that I am totally familiar with the ins and outs of where-stuff-should-be on groups but maybe this is not the best place (the wiki) to have this discussion.

Usability

Group organizers

Group categories

UX topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: