As part of the Designers Toolkit we are producing a set of wireframes to help guide designers - since many will not be familiar with Drupal and we need to provide some direction with regards to what they will submit.

We ran some workshops at the two Drupal design camps in June (Berlin and Boston), some of the results of those sessions can be seen here: http://groups.drupal.org/node/158069.

You will notice I have included things not normally in a wireframe - such as the Regions Overlays, I was thinking about a "Blocks Overlay" as well - let me know if you think this is helpful or a hindrance.

PSD Wireframe

Download the PSD here: http://db.tt/PViQU6C (this will likely get too big to attach here, its already nearly 3mb). The attached image below is a flat png of just the homepage group in the wireframe (+ the global header and footer). Please do not embed this image, its just here for a quick reference and to show the direction I am going in with this wireframe - the real meat is in the PSD so take a look at that.

PLAN

- Discuss and iterate the attached PSD wireframe
- Produce these in a number of formats (psd, ai, xcf, svg, png)
- Produce a pdf with annotations (help text)

CommentFileSizeAuthor
#11 d8di-gallery.png47.13 KBjacine
d8di_wireframe_1.png174.9 KBJeff Burnz

Comments

drupaltronic’s picture

subscribing

Noyz’s picture

FWIW, the best set of Drupal wireframes I've seen is Chapter 3's http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_appr...

tlattimore’s picture

Sub.

Jeff Burnz’s picture

@2 - I looked at them ages ago and to be frank they don't really suit our purpose, however I think the list of elements they put together is spot on. What I do like about C3's wires is that they're kind of simple, and what I have been working on is probably overly complex - need to find some middle ground.

izmeez’s picture

subscribing

bryancasler’s picture

super subscribe

Jeff what do you use to do your wireframes?

Jeff Burnz’s picture

@animelion - this one is done in Photoshop, actually normally I would use Fireworks, but for some crazy reason I just decided to use PS. I'm updating this all the time and mortendk is working on some stuff also. I think we'll end up having multiple wireframes and designers will be able to choose which one they want to use (if anything at all, they're only guides so if you choose not to use them thats up to you).

We'll be discussing these wireframes in next weeks IRC meeting: http://groups.drupal.org/node/159124 so that would be a good place to fire around questions.

lewisnyman’s picture

Subscribed

jacine’s picture

Hey, just checked out the wireframes. They are looking good so far.

One thing I'd really like to see here is the more neglected pages, like:

  • Aggregator listings
  • Aggregator page
  • Book pages
  • Book navigation
  • Forum nodes
  • User profiles

I think it'd also be worthwhile to try and tame the tabs and action links, and try to work in the "add to shortcuts" link. These are things that are as much for the end users as they are for admins on many sites, yet they are sorely neglected from a design standpoint.

As far as the HTML5 Initiative goes, these are the really hard aspects of "cleaning up" these templates. We can change some tags around and clean up markup a bit, but that wont do much to change the sorry state of how these pages actually look. I think actually designing for these pages/components will go a long way to helping their markup too.

Also, a general question about the wireframes — How set in stone is all of this? Like, is it possible to change certain things, like post links, and pagers etc? Just wondering how much freedom designers will have to get creative with it.

Jeff Burnz’s picture

@Jacine, under the articles group there is a book page, but I have not yet added a user profile or those other important things like aggregator stuff.

I actually deliberately left out the shortcuts link because it might be going away in D8 #1164782: The icon to add something to shortcuts wasn't clearly discoverable., that said I think we should add it in regardless, since its currently part of the UI atm.

There are some tabs in there but they are badly done, on the search results page, I need to clean these up (any help appreciated!).

There's an action link on the Forums page, this is the sort of thing we need to explain a bit more about - which is why I want to send an annotated PDF or use Notable to give more information about these UI elements.

Regarding flexibility - unrestricted IMO. Total freedom - I personally want to see where designers take Drupal. I think if we start placing restrictions we might limit outside-the-drupal-square thinking, which is what i want to avoid.

jacine’s picture

StatusFileSize
new47.13 KB

Oh, I totally missed the stuff under article. Oops. I wasn't expecting others pages there. It'd probably make sense to make a PDF print out of these so that we don't miss any discussion points and those without photoshop can see all the juicy bits without issue.

As far as the tabs go, I'm looking to see both primary, secondary and action links on the same page. That does happen and it looks like a royal mess outside of the Seven theme. At the moment, I can only think of admin pages where it's like this, but they do make their way to end users in practice, so just having it on the radar for designers would be good. Maybe your portfolio gallery would be a good place to do this? I've attached a possibility. If you all think that example sucks, that's cool... LOL. Just trying to show an example of all 3 on one page.

Totally agree about the flexibility part. It just wasn't immediately clear looking at the wireframes that this was the case. Of course that's probably because I am used to building and theming off of wireframes, so it's just something I'm conditioned to think. I'm probably not the only one though. I'm glad designers will be able to take the initiative to do what they want. :D

Jeff Burnz’s picture

I am used to building and theming off of wireframes, so it's just something I'm conditioned to think. I'm probably not the only one though.

Yes, totally agree with that sentiment - we have to be shouting loud and hard that designers do not have to follow these wireframes and they are merely a guide to Drupal output. Maybe we need to think up a better name than "wireframes" since that name carries the connotations you speak of.

The amendments to the portfolio are good, I can roll that in.

What I really want to do is get rid of about the half the screens (if possible) so start to combine stuff and cut down on the bloat in the PSD, its getting massive and quite complicated - and clearly easy to miss stuff, which I was worried about.

dodorama’s picture

Instead of providing a wireframe can we provide actual HTML of the main pages?

Jeff Burnz’s picture

@dodazzi - we could provide HTML wireframes in addition to the graphical wireframes. What do you think would be the main purpose of having HTML wireframes (I ask because I hardly ever use them - I tend to go strait from PSD to Drupal).

lewisnyman’s picture

I second the idea of a HTML wire frame. Some people prefer designing in the browser, myself included. It also gets people thinking about semantics and accessibility.

We also need a decent way to handle a html/css/js design submission on d.d.o

Jeff Burnz’s picture

Should be easy to submit - just add as a zip archive + a some screen shots. I can't say that I'm terribly excited about this option - main reason is that an HTML wireframe should ideally be very close to what the theme will actually be like under the hood i.e. responsive/adaptive framework, mobile first (maybe) and so on - and we haven't really even started on those conversations with any depth. So my main question is - can we get that done by mid August?

c4rl’s picture

Sub-to-the-scribe

karschsp’s picture

subscribe

drupa11y’s picture

Subscribe.

tkoleary’s picture

Status: Active » Closed (won't fix)

Closed since the assets no longer reflect the state of core and the approach no longer matches our current process