Prototype Iteration #5 (including initial visual design direction)

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Mark Boulton's picture

Hi All,

The redesign has made great progress over recent weeks and we would really like to share this with you!

Below is a link to the latest iteration of the redesign prototype. Please take the time to look through the pages and feedback your thoughts and ideas in this thread.

http://drupal.markboultondesign.com/iteration5

We also welcome comments on the initial design and visuals, and as with previous weeks, all posts here will be read and fed back into the redesign process

Don't forget to keep browsing the Flickr group (http://flickr.com/groups/drupalredesign/), and if you aren't doing so already, there is still plenty of time to follow the redesign on Twitter (http://twitter.com/drupalredesign)

Thanks for your continued support and interest in the project!

Mark

(www.markboultondesign.com)

[EDIT - 24 October 2008]

Following some comments on this thread, I've had a quick look at amending the design visuals for this initial direction:

They're at the foot of the latest prototype iteration index: http://drupal.markboultondesign.com/iteration5/

  • The masthead now has a background of gradiated blue. A nod to the history of Drupal, showing a clear evolution. As wmostrey hinted to, the blues are what makes Drupal.org look like Drupal.org. Maybe we should be taking that on board.
  • I've included tabs in the logged in homepage - of course, this would need further refinement

Some small changes. Question is: blue background, or not?

Personally I think it works, but only with the iconless wordmark. It certainly looks a little more Drupal than before.

Comments

Download is hard to find

dmitrig01's picture

On both the pages with a download link, the download link is either below the fold or hard to find (it's on the right). The download link, in my opinion, should be very easy to find.

Download and documentation

SteveBayerIN's picture

Download and documentation links do need to be attention grabbing and above the fold.

I'm not too sure how well an image of a Drupal website would work on the front page. The Read more link on the images would need to lead to a very convincing write up to be worth that much above the fold, front page real estate.

Two home pages!!!

xmacinfo's picture

Hi Mark, I love your work for Drupal and the overall design and stucture...

But please merge the two home pages in a single one. We do not want to log out/log in each time we want to consult the regular home page and later to look at our personalized home page, or vice versa.

With Drupal, you can set blocks that can be visible only once logged in. By merging the logged out, logged in home page in a single screen, you are also taking advantages of all the Drupal theming power.

I guess it's now time to stop doing static HTML mockups with some JavaScript and start actually trying out Drupal with your professional design.

From what I see, I think you are ready to go to the next step.

Mark Boulton's picture

The logged in homepage will be completely customisable. If you have a look in the prototype at the homepage, click 'logged in', then 'default', this will show a proposed idea for a default set of widgets. This pretty much mirrors the content on the not logged in state, but with the advantage of being able to tailor it to the individuals requirements - hopefully negating the need to log in and out.

The two states of the homepage cater to two very distinct user groups, as identified by the research done to date: Outsiders and Insiders. By merging them, we would in fact be muddying those distinctions.

tabs for logged in users

catch's picture

It's my very dear hope that we'll have tabbed home pages for logged in users - one tab could be the logged out home page, one tab could be the default widgets, one tab could be a preset collection of widgets for 'developers' or 'new users' or 'themers' or any other group someone's put together a collection for.

See an early post here http://groups.drupal.org/node/10476 - while we'd be using the logged in version of Drupal.org instead of a separate my.drupal.org subdomain, I hope that technically we'll be able to do much the same thing.

Why tabs?

Mark Boulton's picture

Could you explain a little, catch? If a user logs in for the first time, they are seeing basically the same content as the logged out version, but with that content 'widgetised'. The hope is that could retain what they find useful (not everyone is interested in case studies, or news), and customise the rest from either default stacks of widgets, that could be tailored for different user groups.

Whilst the introduction of tabs is a good idea for maintaining individual different 'states' of the homepage, I'm not so sure about retaining the un-logged in version as a tab when that content would be pored into widgets that would be readily available.

defaults and multiple 'home' pages

catch's picture

I spend a ridculous amount of time on Drupal.org - stuff I want to track includes core issues in various categories, groups posts, planet, my contributed modules, contributed modules I use etc. etc. - some of this might be more than once or twice a day, sometimes once a week. My logged in home page could easily end up with 30-40 widgets in it. So it'd be great to be able to create tabs for different things - like 'my projects', 'core issues and commits', 'community stuff'. If you look at netvibes, then there's also the possibility to publish an individual widget, or page of widgets publically - then people can add these to their own home pages.

So my hope is that some of the mockups we've seen for video.drupal.org, developer.drupal.org and other subsites that aren't in the IA (for good reasons IMO) can be converted into collections of widgets which people could add to their own home page with one click - this would let new users get set up quickly with some 'common things that x type of Drupal user might want to follow' - then they can customise once they get in. It'd also open up the possibility to expose some of these things publically later (so we could showcase some of these pages to public users, like netvibes universes (see http://netvibes.com/drupal for the Drupal.org version).

So - we could have a 'new user default widgets' page that's enabled by default. But the home page itself could be exposed as a 'widget collection' which you can add from somewhere, then 5-6 other things which'd help people narrow down to particular areas of interest early on.

Hope that explains things. The idea isn't to have the logged in homepage as a tab, but to have it available to import into the logged-in homepage nirvana of flexibility in one click (as a tab most likely).

That makes things clearer

Mark Boulton's picture

Thanks catch, that clears up a few things. Tabs are a great idea for this. My issue was really of having the homepage (logged out) as a tab - I don't think that would work. A 'new user default set' would answer that problem.

The logged in version looks bland

xmacinfo's picture

I've seen the logged in version and default version for visitors prototypes.

I love the default version and would like to have this as a starting point for the logged in version. By starting with the same content and layout, we could customize it to our need by adding blocks.

I still don't see why we can't use the power of Drupal to display more information to the logged in user in the same page instead of redirecting him to a new page.

Separating outsider from insider is a black and white thinking. In real life, most Drupal users are lives in gray. Let's start from a home page (default) in white and let users configure it with blocks (default page turning more and more in gray). In fact, insider/outsiders distinction is hard to make since a lot of people who created an account on d.o. can still be considered as novices.

Could the logged in home

Shyamala's picture

Could the logged in home page be called MY dashboard instead? Because, I would definitley want access to the news and homepage on login as well?

Netlink Technologies Ltd
http://shyamala-drupal.blogspot.com/

My Dashboard +1

aaron's picture

I like this idea as well. Even though I'm an 'Insider', I'd like to occasionally see what the site looks like to an 'Outsider' without having to log out. We're already using 'tab's for the primary navigation anyway, this would just make it more prominently displayed.

Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)

Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic

Drupal prototyping with the Drupal.org infrastructure team

Amazon's picture

If you are interested in prototyping these new designs in Drupal, join the http://groups.drupal.org/drupalorg-redesign-infrastructure-team

We can work towards getting a copy of Drupal.org upgraded to Drupal 6, minus project module. Then prototyping can begin.

Kieran

Drupal community adventure guide, Acquia Inc.
Drupal events, Drupal.org redesign

2-cents

kaw3939's picture

Hi,

I just stumbled across this and wanted to add something... I like clean looks but this looks somewhat antiseptic, which I think is contrary to the "fun" / "homey" / "warm" feeling that the current theme has. I don't think the current theme or setup should be kept, it is dated; however, there should be some homage paid to the roots of Drupal. I guess what i'm saying is that if I wanted to go to a "corporate" looking website I would go to acquia, if I wanted a home I want to come to Drupal.org. Don't get me wrong I think the site design is a good looking design, but I don't know if a mostly white and gray layout captures the essence of Drupal. I will say that my designs tend to have mostly white space too and I really think that it is good to have that, but I just think there needs to be something to warm the site up. Maybe the picture of the featured website will warm it up, but I don't know. It really is a challenge to design something like this and you are doing a good job, but I just thought i'd mention my critique of trying to warm up the site.

Thanks for your thoughts

Mark Boulton's picture

Very interesting thoughts. This notion of 'grassroots' is very much in my mind. However, the flip side to introducing that, is that the homepage (not logged in) is tailored to 'outsider' - people who don't know what Drupal is, or does, and want to find out more. Drupal is a serious bit of software, and should be represented as such, BUT with a welcoming community surrounding it. The tricky task is introducing more grassroots the closer you get to the community and away from the 'marketing' to the outsiders.

as far

rogerpfaff's picture

as far as i understand what we see here is just the wireframe and when the places for the contents are fixed there will be much more life brought to the pages. at least i hope that this will be happen because at the moment it's really missing some sex appeal. ;-)


Remember: I compute you!


Remember: I compute you!

That's correct

Mark Boulton's picture

The prototype is, at this stage, a wireframe. We're focussed on the content, usability, and overall user experience. We've made a start on the design concepts (shown at the foot of the iteration index).

Cheers,
Mark

i missed the footer pn the

rogerpfaff's picture

i missed the footer on the index so far. i really like what i see there for the design. looks very clean and is promising for what may be iterated in the next weeks. :-) congratulations.


Remember: I compute you!


Remember: I compute you!

Missing the lower case wordmark

zoo33's picture

I still prefer the lower case version of the wordmark if that is still up for debate.

I'm not sure that the subsite links would be interperated a such. To me they look more like quick links so specific pages. But I guess that might change once you have the full context of things. I don't know.

/ Hannes Lilljequist – SthlmConnection

The visual designs are really bland

wmostrey's picture

To be honest I find the visual designs really lacking. They're so bland there's really nothing that makes them stand out. Previously it was the blue hues, also found in the bluemarine and garland Drupal default themes, that made drupal.org look "Drupal". The current color scheme looks an awful lot like the Acquia Marina theme that ships with the Acquia Drupal distribution by Acquia. There already is enough confusion about Drupal and Acquia and this will only further add to it.

Mark Boulton's picture

Thanks for noting your concerns. If you have a look through the design notes on the index of the prototype, that should put this initial direction into context. At this stage, we're not concerning ourselves with any degree of visual richness - that will come later. At this point in time, it's about creating the building blocks of the design system (built upon the prototype, testing, research, AND community feedback such as this) - that isn't always about making it look glitsy, it's about building strong graphical foundations. The richness will come later.

Think of this initial direction as the concrete foundations and steel frame of a new building. The facade will come later.

Redesign timeline

wmostrey's picture

We're currently here in the redesign timeline:

Friday, October 24th – Sunday, October 26th: prototyping round 3, branding development round 3, IA strategy, design concepts

I thought this meant that by opening up the visual designs that this was the result of the branding development.

An interesting point about the blue

Mark Boulton's picture

Your point about the blue is an interesting one. There is a history of blue with Drupal that perhaps we should be embracing a little more with the design. It also might go some way to address the 'grassroots' issue, and also a nod to the past. I've had a quick look at updating some of the colours - specifically the masthead background (bringing in the blue gradient from the previous design). Whilst it currently looks a little crude, and there is work to do on the logo, it is certainly a clearer evolution of the current design.

I'll post the revisions shortly to the prototype, and a link here.

Mark Boulton's picture

I'm not sure I get your point.

This is initial visual design concepts (round 1), meaning it's our initial look at how the visual design is going to integrate and build upon the research, IA strategy, prototype and branding.

Small revisions posted to prototype

Mark Boulton's picture

Hi all,

Following some comments on this thread, I've had a quick look at amending the design visuals for this initial direction:

They're at the foot of the latest prototype iteration index: http://drupal.markboultondesign.com/iteration5/

  • The masthead now has a background of gradiated blue. A nod to the history of Drupal, showing a clear evolution. As wmostrey hinted to, the blues are what makes Drupal.org look like Drupal.org. Maybe we should be taking that on board.
  • I've included tabs in the logged in homepage - of course, this would need further refinement

Some small changes. Question is: blue background, or not?

Personally I think it works, but only with the iconless wordmark. It certainly looks a little more Drupal than before.

I don't like the blue masthead gradient

xmacinfo's picture

I dont think the goal is to stay in blue forever. I'm tired and sick of seeing blue, gradiated of not, history or not. I prefer the warmed color palette.

Why not put the logo in blue, while the rest uses the color palette of October 23 design? This design already incorporates blues in titles and other elements.

We want to attrack new users with a bold new design. If we are to be stuck in the old blue, let's be stuck with the current logo as well.

So for October 23 design, let's try the logo in blue. For October 24 design, let's try the old logo.

Cheers.

Thoughts on first impression

sun's picture

Overall: Great!

Now trying to get into the details that matter for you:

  • Blue: Definitely needed. I feel home now. =)
  • Font-size (again): The size currently used on the front page mostly works for the blocks, but it feels too large for contents (view) at the bottom, as well as for the content of the page body and blocks on the download and extend page. I think it would be a good idea to have a larger font-size on the front page and front page blocks, but use a slightly smaller size for "regular" content pages, such as handbook pages, forum posts, issues, and also comments. drupal.org is (and would still be) a scrollbar nightmare to my mind - that's why I've created a userstyle for Firefox to make the site's contents more compact.
  • Footer: We most probably also need a footer bar (similar to the current), so maybe repeating the blue from the top at the bottom would provide a framework.
  • Navigation/Primary links: Now that there is some styling, I am a bit lost. Trying hard to grasp how the upper links relate to the lower, whether they are in correlation, or lead me to an external site, due to being in the same visual container. However, that's on the front page only - on the download/extent page, it's obvious that I'm in the highlighted area currently, and the other links will take me away from it.

    Also, the "Log in" link at the top feels a bit lost and is easily overlooked. However, I'm unsure what we could do on this.

    Two minor remarks on the lower (secondary?) links: a) Do we really need "Home"? Isn't the logo sufficient? AFAIK, even novice Internet users expect it this way today. b) "Jobs" is a bit too far on the left - my 1st assumption was that "Drupal" would hire, or even would turn into a HR agency. IMO, this order would work: About, News, Events, Get started, Get involved, Jobs, Association, Shop.

  • Contents: Most probably, we want the author and publishing date on the top for comments, forum posts, issues, and issue follow-ups, so insiders can quickly decide whether they want or have to read a content. If we have this meta-data on the top for those contents, we probably want to make it consistent for other types of content, too.

Also, the wordmark looks more cool & professional without the icon. That doesn't necessarily mean we should not have one at all, but maybe just not those "sparkling" drops. On the font itself: For me the characters look too kittenish and it looks like the stroke width is heavily varying. In particular, the "r" does not fit to the other characters. Aside from that, we definitely need an uppercase "D", but maybe we don't need to make it ovious - I gave it a shot, which is attached.

Daniel F. Kudwien
unleashed mind

Daniel F. Kudwien
netzstrategen

I agree!

demenece's picture

I really like the changes in the header for the new version, and i also think the wordmark looks better without the "sparkling" drops. I'd like to see more work on the navigation, maybe just a little of aesthetics details.
I also think there's too much content for not-logged-in homepage, and would like to see something more simple and eye-catching. IMO, there should be less room for the news and more for "things we made with Drupal" section: this gives a better idea of what drupal can do for new users.

aesthetics changes for the main menus

demenece's picture

I've retouched a little the navigation styles, i feel the black font for the links were too contrasting, and that the search button was really out of the site style, i figure out that was just to indicate there was a search button there and not the final style... i've also added a little detail to show the user where is he, based on the "p" letter from Drupal's new wordmark.
Check the screenshoot i'm attaching here,
Just some ideas to improve and discuss, sorry for my bad english.

Navigation changes screenshot

demenece's picture

as the attached image is not being showed, i've uploaded the screenshot at flickr so you can see it: http://flickr.com/photos/demenece/2969408845/

Blue looks good here

catch's picture

It definitely feels more Drupalish with that blue header, and the wordmark works fine on it's own as white on a blue background IMO.

I agree

wmostrey's picture

I agree, I like both the blue header and the white letter wordmark. As mentioned before I would watch out with the green buttons in order to avoid the Acquia Marina look.

Yes and no

eigentor's picture

Blue should be somewhere for sure. Though the gradient of the last changes look far to Garlandy for me now (Yeek!). But I am sure you will find a balance for this.
What I like very much is the combination with the grass green on http://drupal.markboultondesign.com/iteration5/concepts/revisions/downlo.... Drupal was very monocoloristic before, and establishing green as a second color feels very good. Also the warm grey as a "color" you used in the header before looks nice. This looks like a promising color palette...

As I also like the red accent given by the website screenshot on this, http://drupal.markboultondesign.com/iteration5/concepts/revisions/homepa... maybe a bit of red for extreme highlighting might be nice. But maybe this is already too much.

Thumbs up!

Life is a process
Victims of Garland

Life is a journey, not a destination

There is an awful lot of content on this homepage

chx's picture

And the important bits gets lost. Check Plone or Joomla! homepages, get, learn, contribute is quite prominent on both. We have a download link hidden in the "About section" and also besides the "our stories" section. Learn is nowhere evident -- the "visit the documentation section" is just a link and not prominent and at all. And I do not even see a contribute link.

Edit: I checked the visual design http://drupal.markboultondesign.com/iteration5/concepts/revisions/homepa... now that's a bit better, there is no way you miss the download link. However, I would ditch the second emphasized download link in the Download & Externd section and instead use some strong visual clues in the Community & Support to make the "Join us" link much more evident. Drupal is as much as the community as the software. Also giving the same emphasis on the "onion" and "get help from the community" is a bit strange isnt it? The "awful lot" still stands as a problem but I can see we can get to the point where the more important links are more visible.

Make it go boom

kaw3939's picture

Hi,

I like some of the changes, the garland comment is well taken. Adding the grass green is good, it is a nice balance in color.

This is a much different design than what you have and this example should not be taken as what I think you should do, but it illustrates a point. The point being, when I come to this website it says "boom" look what I can do and what what this company, or in our case organization does. I love the part on the drupal redesign that talks about "Our Stories: Things we Made in Drupal" That would be one of my "Boom" items and another would be "Get Involved" and another might Be "News & Events" or something like that. When people come to DO for the first time they are either coming there for their own interest or they are trying to show someone that may have limited understanding or interest in DO what it can do, who the people are, etc... There needs to be something that "grabs" them and pulls them into the site.

Finally, I think having a simple to the point "boom" on the non-logged in users page and then a site like what you have for the redesign appear, when someone logged in would be great. I think having a simple clean "boom" for the non-logged in users and then an elegant and functional internal website really shows the versatility of Drupal in a way that not many other systems display.

Website example:

http://www.formspring.com/

Another example

kaw3939's picture

http://www.jingproject.com/

This is another example of a site that kinda says "boom" to me, it is a good looking site IMHOP. Not what DO should be but it is nice and has some aspects of the boom.

I have a few comments about

ebeyrent's picture

I have a few comments about this latest iteration, and I hope I don't offend anyone.

  1. This site design looks like any other generic site out there. There's no pop, there's no visual distinction that makes this site as unique as Drupal is.
  2. The most important aspects of the site, IMO, are the community, documentation, and download links above the primary navigation. Displaying them there in the manner that they are displayed treats them, again IMO, as second class citizens. What are the primary reasons people come to DDO?

Again, no offense, but how is Association more important than Community & Support? Maybe it wasn't intended that way, but to me, that's what the presentation implies.

Agree

kaw3939's picture

Hi,

If you read my other comments then you would know that I agree with this.

navigation links

catch's picture

I agree that the links to download, community and support etc. are very very small at the moment. And I also think that the association, events and jobs could be much less prominently positioned - and I agree with whoever said that having 'Jobs' right there makes it look like either 'Drupal' is hiring, or that it's primarily a job site.

I'm also not quite sold on having 'Events' so prominently either - regardless of where I am, the chances are that I have little chance to go to 90% of events that are currently posted on groups.drupal.org - due to either time constraints or location. If we maybe removed events and jobs from the top level navigation, that might balance the other links out a bit more.

i see the disclaimer that

heather's picture

i see the disclaimer that these prototypes just display the functionality, not the final design. so i'm not sure how much of my feedback is useful, as you may have just bunged in dummy content to fill spaces.

(1.) the homepage
i agree with chx on the point about there being alot of content, but it's relevant. i like the plone and joomla links.

the joomla site also has alot of content- but i really like the simple action links at the top. it's interesting to note that those icons link to 'marketing' pages, and these have another banner link on top, which go to another section. e.g., the 'contribute' links to another information page, which has a logo/banner which points to a random link. (visit the page and refresh) http://www.joomla.org/about-joomla/contribute-to-joomla.html

i'm not a typologist and i know you've worked alot on the wordmark... but the pinched 'a' and 'p' look still quite strange to me... does this not rub anyone else the wrong way?

(9.1) Where do the "view | edit | revisions" tabs appear on the handbook pages? Where do you see "add child page" - on the side bar under the list of child pages? How about sibling page navigation? Next/Previous... and Where do comments appear? Sidebar or underneath?
http://drupal.markboultondesign.com/iteration5/community_irc.html

For the Edit and Add options in handbook pages- I like the "'post a job" link on the Jobs page, really clear- and this should be visible whether logged on OR NOT. this way, a visitor can see "oh i could post a child page or i could edit this page... if only i was logged in sigh, oh i'll register!" ;)

(10.) In documentation... I see the issues queue popping up in the sidebar.. I know this is on right sidebar of the regular Drupal site... but I wonder about the wisdom of this? Especially as you're going to a 2 column layout. What do these have to do with Documentation? A list of available handbook start pages would be more relevant/useful there.
http://drupal.markboultondesign.com/iteration5/documentation.html

(11.2.1) I love the modules page. I would love to see more screenshots in module pages- putting it in a section makes this more of a necessity rather than an option.

(12.) Professional services-- again, I know you're working with dummy content... but I'm confused. What are "jobs" versus "professional services"? The Prof Serv pages says... "find a professional with the skills you require." when in fact, it is a place to list tasks which a developer could apply to complete to bid on. Or is it? Some say "wanted" some don't. It seems that Jobs and 'Professional Services' should be in the same place- with two different search controls? I suppose you did alot of work on this difference.... but it is unclear to me.

In professional services I expected to see a list of individuals or companies available to hire or something. With the list of short term contracts, I'd have expected these to be on a list of "available work"- though I'm sure there's a better word for that.

In the prof serv sidebar, the focus is on refining a search. In the Jobs sidebar the focus is on posting a job.

Hmm... I think there's some confusion there... maybe it's just me!

On the one hand, you have people seeking help from developers. It may be a small task, a short term contract or a permanent position. They might like to see a list of developers available from their local area or their needed skills set. On the other hand you have people looking for work. They may be scoping out little nixers, or looking for a full time contract. Anyway, maybe I'm the only one who sees it this way!

First time versus 1000th time

peterx's picture

I like the mention of users changing the content order. I am logging on for perhaps the 2000th time and I would really like to put my Track link at the top of the page. My second preference is to have modules and themes default to Drupal 6 when I visit those pages. Will users get that level of flexibility?

For first time users, the Drupalcon DC site looks exciting but splatters everything all over the user. The Firefox landing page was far better intil they put that confusing tree in the background that leads your eye away from the important bits. I suggest a What’s So Great About Drupal? page similar to the middle bit of the Firefox page. It does not have to be the home page, just one that Google will find, one with a meaningful text path instead of node/1234567897653576785, and a nice simple list.

  1. Visit sites using Drupal
  2. This is what you want before installing Drupal
  3. Install Drupal
  4. Use Drupal
  5. Select a different theme
  6. Extra things you can do with free add on modules
  7. Write your own add on module to bring about world peace, cure cancer, or create a decent espresso

Well, maybe creating a decent espresso is beyond the scope of a first time user.

petermoulding.com/web_architect

Lots of content == :-(

lut4rp's picture

Hmm... I agree with the point that there's too much content on the home page.
One option could be to change the background style of the main part (where it gives the short Drupal intro and download link.)

Home page content grouping

mshaver's picture

I noticed on the home page that the area below the main highlight (for logged out users), which includes the "Our Stories" and the "Getting Started" content, that these are associated with each other. This is definitely the case for the visual design with the gray behind both. These two bits of content don't seem at all related and associating them together distracts from each. The "Getting Started" especially is lost when both have equal value. Although I like the visual break of the page, I wouldn't do this without a valid grouping of content. Just thought I'd point out this one small issue I noticed.

Idea for module detail page (11.2.1)

meba's picture

What about to include an information about module translations at module details page? This information should be available in the time when this new design is implemented, using l10n_server...
My idea in sidebar or somewhere else:

Also available in:
[FLAG] Česky 100 %
[FLAG] Magyar 100 %
[FLAG] English 100 %
[FLAG] Native_name Status_of_translation %

Getting there

Gábor Hojtsy's picture

The framework for the module page layout will surely allow for these kinds of additional bits to be displayed. :)

The Marketing of Drupal

Group categories

Group notifications

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