Problem/Motivation

The Druplicon used to be prominently included in the installer, but is not anymore:

Proposed resolution

A new software logo was introduced with Drupal 9, see https://www.drupal.org/blog/new-drupal-brand-ready-for-drupal-9-launch. This is possible to include in Drupal core and would be the one to use as per the current logo usage guidelines at https://www.drupal.org/about/media-kit/logo-wordmark-guidelines.

Remaining tasks

Add patch. Do screenshots. Discuss.

User interface changes

Drupal logo used in installer.

API changes

None.

Data model changes

None.

Release notes snippet

N/A.

CommentFileSizeAuthor
#237 Screenshot 2020-10-21 at 14.47.59.png418.97 KBGábor Hojtsy
#220 Screen Shot 2014-10-03 at 9.48.45 AM.png839 KBmgifford
#219 druplicon-219.patch3.73 KBRisse
#217 druplicon-install-217.patch1.48 KBRisse
#217 druplicon-217-1920.png174.83 KBRisse
#217 druplicon-217-1280.png106.29 KBRisse
#200 Screenshot from 2013-08-31 20:29:15.png138.28 KBjbrown
#200 Screenshot from 2013-08-31 20:29:54.png126.11 KBjbrown
#200 druplicon-watermark.svg_.gz1.52 KBjbrown
#200 druplicon-installer-background.patch2.09 KBjbrown
#191 druplicon-installer-succes.jpg30.84 KByoroy
#161 Screenshot from 2013-08-02 18:53:49.png40.85 KBjbrown
#161 Screenshot from 2013-08-02 18:53:57.png82.81 KBjbrown
#161 Screenshot from 2013-08-02 18:54:03.png90 KBjbrown
#161 Screenshot from 2013-08-02 18:54:12.png105.53 KBjbrown
#161 Screenshot from 2013-08-02 18:52:50.png192.98 KBjbrown
#158 installer-version-12.png26.45 KBstarchild
#149 3.text-field.png30.5 KBstarchild
#147 a.psd.zip934.91 KBBojhan
#145 seven_theme-cache_dropdown_menu.png5.73 KBklonos
#146 8.dropdown-and-popover.png26.87 KBklonos
#137 setup-db-a.png659.27 KBBojhan
#137 setup-db-b.png658.98 KBBojhan
#137 setup-db-c.png658.49 KBBojhan
#136 setup-db-a.png659.27 KBBojhan
#136 setup-db-b.png658.98 KBBojhan
#136 setup-db-c.png658.49 KBBojhan
#136 a.psd2.09 MBBojhan
#135 drupal_8_installer.tar_.gz1 MBsphism
#129 drupal_8_installer_12.jpg79.4 KBsphism
#129 drupal_8_installer_13.jpg78.78 KBsphism
#127 installer-v11a-burlap-solid_droplets.png18.33 KBklonos
#127 installer-v11b-burlap-border_droplets.png19.12 KBklonos
#127 installer-v11c-eggshell-solid_droplets.png18.25 KBklonos
#127 installer-v11d-eggshell-border_droplets.png18.98 KBklonos
#126 installer-version-11.png25.71 KBstarchild
#125 installer.svg_.tar_.gz11.18 KBstarchild
#123 installer-version-9.png26.15 KBstarchild
#123 installer-version-10.png26.14 KBstarchild
#117 installer-version-8.png25.37 KBstarchild
#114 installer-version-6.png25.47 KBstarchild
#114 installer-version-7.png25.44 KBstarchild
#112 installer-version-5.png26.22 KBstarchild
#109 installer-version-0.png27.51 KBstarchild
#109 instaler-version-1.png27.88 KBstarchild
#109 installer-version-2.png28.74 KBstarchild
#109 installer-version-3.png26.17 KBstarchild
#109 installer-version-4.png26.17 KBstarchild
#104 drupal_8_installer_11.jpg77.31 KBsphism
#68 install-sample4.jpg39.91 KBdcrocks
#70 install-sample4.png87.84 KBdcrocks
#69 install-sample4.png68.14 KBdcrocks
#69 install-sample5.png85.4 KBdcrocks
#61 install-sample3.jpg41.64 KBdcrocks
#57 install-sample1.jpg47.03 KBdcrocks
#57 install-sample2.jpg64.66 KBdcrocks
#94 druplicon_logo_2013_2.jpg71.19 KBsphism
#93 drupal_8_installer_10.jpg78.52 KBsphism
#91 druplicon_logo_2013.jpg85.48 KBsphism
#89 drupal_8_installer_9.jpg66.82 KBsphism
#80 drupal_8_installer_1.jpg55.08 KBsphism
#80 drupal_8_installer_2.jpg60.71 KBsphism
#80 drupal_8_installer_3.jpg58.95 KBsphism
#80 drupal_8_installer_4.jpg58.27 KBsphism
#80 drupal_8_installer_5.jpg59.64 KBsphism
#80 drupal_8_installer_6.jpg60.08 KBsphism
#80 drupal_8_installer_7.jpg60.77 KBsphism
#71 installer-druplicon-stalks-you.png83.9 KBstarchild
#71 installer-druplicon-stalks-you-problem.png84.57 KBstarchild
#71 installer-druplicon-congrats-you.png45.21 KBstarchild
#71 installer-one-drop-at-a-time.png53.94 KBstarchild
#62 installer-druplicon.png128 KBtstoeckler
#47 04_s04.jpg__1200×1500_.png263.35 KBGábor Hojtsy
#47 druplicon.png22.97 KBGábor Hojtsy
#44 installer-druplicon-overlay.jpg101.51 KBLewisNyman
#43 Drupal_installer_with_druplicon.png166.08 KBklonos
#41 installer-druplicon.jpg101.85 KBLewisNyman
#1 test.png37.79 KBchx
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

chx’s picture

FileSize
37.79 KB

This is how I imagine this, of course with appropriate colors and execution. This is just my vision.

chx’s picture

Title: Add a Druplicon watermark background » Add a Druplicon watermark background to the installer
tkoleary’s picture

@chx

While I appreciate your emotional attachment to the druplicon I think this effort is misguided. Should we leave a chunk of PHP in the codebase from Drupal v1 just for old times sake? Design is not window dressing, it has a functional purpose and that purpose is not to nostalgia of the community. The purpose of branding is to project an image to potential users that is current and compelling so as to drive adoption. No possible argument could be made that the druplicon accomplishes that goal.

What is the druplicon? It's a mascot. It's part of Drupal's history and culture. Great for a sticker or a t-shirt or an inflatible or a big suit but not for the installer screen of a world-class piece of software.

chx’s picture

That's not how this is supposed to work? We got the new installer in because I was told this followup will happen?

Gábor Hojtsy’s picture

@chx: are people still allowed to have different opinions and therefore have a conversation?

chx’s picture

If you want reasons, it's part of Drupal's identity. Surely it's not tarnishing the design to put the silhouette of it into the background?

moshe weitzman’s picture

@tkoleary - please don't masquerade your opinion as fact. One can favor this watermark and not be "nostalgic". What is "current and compelling" is very much in the eye of the beholder.

plach’s picture

@tkoleary:

While your argument appear to be technically very valid to my eyes (I'm a developer not a designer, hence I'm not in a position to judge your feedback), I think you are not taking into account the fact that part of the appeal Drupal has on its user base is due its amazing community. If the community, or at least some of its prominent members, feels represented by the Druplicon I think this should be taken in serious consideration.

I'm not saying that @chx's proposal is something that can seriously be shown on the installer, or even the best official Druplicon we have available (the first time I saw it I just wanted to run out of my office screaming), but I saw dozens of cool revisitations of the Druplicon (for instance the DrupalCon Chicago one) that prove that it is possibile to do something good with it.

If even @Dries left this possibility open, I don't think this discussion should be closed at comment #3. It should be seriously evaluated and if we have to dismiss it, we should have more solid arguments than "the Druplicon is not something the average user would consider appealing without a massive dose of beer in his stomach" ;)

Obviously then we must find someone available to work on it, and given that this is Drupal, it will happen, as usual, only if people will make it happen.

chx’s picture

If this issue is closed I will reopen the parent for a rollback. That simple.

patrickd’s picture

Druplicon++

The installer just looks so damn empty without it!

chx’s picture

Re #5 no. That window was closed when the parent was committed.

Gábor Hojtsy’s picture

Quoting @Dries from the patch that was committed in #1337554-175: Develop and use separate branding for the installer for posterity:

I think this installer is a big step forward. Great work!

I'm fine with removing the Druplicon from the installer. I'm not emotionally attached to it. I think adding the word 'Drupal' is actually a UX improvement as it shows people what they are installing.

If we want to keep the Druplicon, one way to accomplish that could be to have a welcome screen in the installer; i.e. a step or screen prior to the language selection screen. It could say 'Welcome to Drupal' along with the Druplicon. Another option could be to change the blue background to have a "Druplicon watermark". Any of these can be done as follow-up issues.

chx’s picture

Title: Add a Druplicon watermark background to the installer » Add back the Druplicon in the installer

Based on (the first sane) discussion here in dublin, retitling / will rewrite the issue as well.

chx’s picture

Issue summary: View changes

Updated issue summary.

thedavidmeister’s picture

Title: Add back the Druplicon in the installer » Add a Druplicon watermark background to the installer

the original post is #1337554: Develop and use separate branding for the installer.

Can we make the druplicon more subtle?

Like, white on the blue and in the corner, rather than a grey watermark?

plach’s picture

Can we leave actual proposals to designers?

chx’s picture

I am very very strongly attached to this issue as visible but https://drupal.org/node/1337554#comment-7573663:

But, I am just one voice and countless other issues made it into Drupal 8 that I fundamentally disagreed with. This is just one more and I have no doubt it'll get in.

So again, I guess this will be closed, and I will be again vilified for raising a voice for trying to keep Drupal what it is. Oh well. That's just how it is.

chx’s picture

And to make sure there will be no more dissent from me, I am unfollowing.

dcrocks’s picture

How do you propose to size and position the background element? As the content area changes size during various install steps it will be more or less obscured. It should be recognizable, at least on the 1st page.

dcrocks’s picture

And since the margins depend on screen size, there may not be any visible margin on small screens. In fact, on small screens even the content area won't have any usable margins.

Gábor Hojtsy’s picture

I am sure designers are capable of creating something that looks great as long as they agree with @chx, @plach, etc. Dries already provided some options that he thought may be interesting, and his list reads to be open-ended for me in terms of possibilities to move forward.

neclimdul’s picture

I don't have strong feelings one way or even read the other issue but I agree this is up to people marketing and designing our look and feel.

I think the general consensus from one side is "it'd be nice if our mascot where still here in some form" We developers like eggs like that and its a nice homage to our past installer and look and feel.

At this point it seems like the path forward is we(the developers) hand it to the designers and say "Do you have any ideas on? Is this reasonable and can we fit it in somehow?" Then we can get back to the last two days before freeze and accept what ever they choose?

yeah what gabor said.

rteijeiro’s picture

Agree with @Gábor about considering the "Wellcome" page proposed by @Dries.

Also we must consider to add a animated gif as background like this: http://uppix.net/1/9/f/27e9a12220761b85a47a0dae0d5de.gif

Could be nice to see something funny while Drupal is installing.

LewisNyman’s picture

Title: Add a Druplicon watermark background to the installer » Add back the Druplicon in the installer

Let's keep the scope of this issue open. I have a few ideas already, I don't want this to be "watermark or not" conversation.

tkoleary’s picture

Title: Add back the Druplicon in the installer » Add a Druplicon watermark background to the installer

@chx

If you want reasons, it's part of Drupal's identity. Surely it's not tarnishing the design to put the silhouette of it into the background?

I think one of the issues here is the suggestion of a solution rather than the presentation of a problem. A designer needs to understand what they are solving for before they begin to design. A pre-conceived solution leaves no room for creativity. I suggest we define the problem space in the form of couple of user stories:

As an existing Drupal community member I would value some visual reference to the Druplicon in the Drupal 8 installer screen to maintain consistency with Drupal's history and culture.

And

Given that A potential new user's confidence in Drupal as stable, well-supported, best-of-breed and up-to-date will be heavily influenced by the visual design of the installer, as a community member who wants to increase Drupal adoption I want the installer to project those values.

If we can agree on those as guiding principles I would let Lewis, as the new maintainer of Seven, design a solution which may or may not be a watermark in the background.

Gábor Hojtsy’s picture

Title: Add a Druplicon watermark background to the installer » Add back the Druplicon in the installer

@tkoleary: yeah, changing the issue title was part of making the general statement :) Looks like you cross-posted.

timmillwood’s picture

Title: Add back the Druplicon in the installer » Add a Druplicon watermark background to the installer

If we are targeting Drupal at site builders and the enterprise I be in the "kill druplicon" camp, although if targeting developers, I can't see an issue with keeping druplicon.

Gábor Hojtsy’s picture

Title: Add a Druplicon watermark background to the installer » Add back the Druplicon in the installer

Cross-post party.

dcrocks’s picture

The drupal icon doesn't appear in many drupal.org pages now and when it does it isn't in a primary or important position. Why not put a small drupal icon in the footer of some or all install pages with either some relevant fact or link? Like at drupal.org. Make sure it doesn't distract from the drupal trademark but at the same time make the page more attractive or helpful to new users while easily ignored by experienced users.

Gábor Hojtsy’s picture

Just two notes to put some technology and language perspectives into play:

1. MUTLILINGUAL: In terms of Drupal to support languages, having a welcome screen *before* the language is selected being in English may not be internationally friendly. So from the perspective of the multilingual interface, I think a separate welcome screen before the language selector may be counter-intuitive. (This was one of Dries' ideas above).

2. SWAPPABILITY: A definite source of frustration may be that the installer theme is impossible to override at least before the profile step is reached. Distributions of Drupal may or may not want to use Druplicon independent of whether core ships or does not ship with Druplicon in the installer (which I *personally* have *no preference* about btw). So at least the initial language step is not possible to theme differently. Swapping themes later would be disconcerting. Once the profile is selected, it could swap out the theme with hacks. Anyway, proper solutions should be put into place for this. #1351352: Distribution installation profiles are no longer able to override the early installer screens is the issue for that, and I'm honestly very surprised distro maintainers are not all over it. They will feel the pain later I guess.

chx’s picture

Bump (i will bump this every day until it is resolved).

cweagans’s picture

@chx, I think this is important too, but I don't think bumping it every day is the solution.

@tkoleary, I disagree with this statement and its implications:

What is the druplicon? It's a mascot. It's part of Drupal's history and culture. Great for a sticker or a t-shirt or an inflatible or a big suit but not for the installer screen of a world-class piece of software.

First off, one could argue that Linux is a world-class piece of software, right? Well... http://distro.ibiblio.org/vectorlinux/docs/vl50/images/vl5dyn/vd5-boot.png

Secondly, just because something is "world-class" doesn't make it somehow less human. Druplicon is our mascot - "our" being the Drupal community. Drupal is built by volunteers, and having Druplicon be one of the first things that new users of Drupal will see has always been, at least in my mind, a sort of tribute to the people that created it.

Thirdly, and perhaps most importantly, is that we didn't have a reason for removing Druplicon. As far as I know, there were no UX tests that resulted in "I have no idea how to get through this screen because there's this weird blue alien thing staring at me". It did not add significant additional weight to our already hefty download package. There aren't any cases that I can think of that we just removed something from Drupal for no reason at all, and I'd hate to break that track record.

chx’s picture

Priority: Normal » Critical

This is another way to make sure it does not fall off the radar.

Kristen Pol’s picture

I like the idea of having a subtle and clean Druplicon in the installer but I'm not a designer so don't have any strong opinions of what/where. I think the "footer" idea or watermark idea could work well if done by the right person. The "welcome"/splash might not work well due to issues in #29.

I think having the icon is useful for branding reasons but, like mentioned in #28, Druplicon isn't shown on the drupal.org home page. I would like to see it there too but that would be another issue!

timmillwood’s picture

I am starting to fall into the mindset that there shouldn't be a druplicon on the Drupal installer.

The main reason it to align it with drupal.org, and not scare away non-community / non-developer users who may be unfamiliar with druplicon and it's history.

chx’s picture

Status: Active » Closed (works as designed)

But, I am just one voice and countless other issues made it into Drupal 8 that I fundamentally disagreed with. This is just one more.

Gábor Hojtsy’s picture

Status: Closed (works as designed) » Active

For the record there is Druplicon on drupal.org's front page, it is right at where the community is showcased above the map on the front page.

timmillwood’s picture

I feel Druplicon is transitioning to be the community mascot, and not the software mascot or logo. Therefore works well in the community section of d.o and works well at Drupalcon, but I'm not sure it's best placed anywhere in the software.

There are all my personal opinions I am not trying to say this is the correct option, or this is what needs to happen. I just expressing views, feel free to disagree or do the opposite of what I say.

tim.plunkett’s picture

It's also the favicon on d.o.

@tkoleary has once again tries to make absurd comparisons between visual design and code development. No, clinging to "Drupal v1" (what?) code is not something we would do. But continuing to use the image which identifies Drupal itself, yes, we will do that.

Pancho’s picture

I really hope @chx is still folowing this queue.

While it's true that Drupal needs to move on, removing the druplicon (and finally all branding) from the installer has the potential of alienating long-term users and contributors. It's not just that they're emotionally attached to it (even though that's absolutely respectable, re #3) - it is part of finding oneself in "their community project", of identification with the final product people have been working on for countless hours and years. And especially after the whole codebase has been revamped and changed (many say for the better, some say for the worse, but it's not like the ones are right and the wrongs are diehards.
So no, we can't care only about the customers, otherwise we'll become a company. And a company that doesn't pay its "employees", won't work.

Apart from that, I also believe this is a poor branding decision. While I can confirm the druplicon tends to irritate people getting into contact with Drupal, the proposal was (and still is) to implement a more subtle representation of it.
Also, I don't understand why we don't even use the Drupal signet (as it's displayed here on d.o) on the installer. IMHO that's the absolute minimum to being careful with the Drupal branding and showing respect to the Drupal project.

Gábor Hojtsy’s picture

Pancho: see #605710: Decide on if and if so, how to implement the Drupal wordmark in core, it is not possible to include the Drupal wordmark in our downloadable package under GPL and still protect it being intact. The Druplicon is made to be tinkered with, unlike the wordmark.

LewisNyman’s picture

FileSize
101.85 KB

Here is a mock up of Dries' watermark idea. I started in photoshop because there are a few technical implementation issues that need to be considered due to the way we've implemented the current installer background, how photoshop handles blend modes, and multiple screen sizes.

@chx - I want to produce a "bare minimum" patch of the watermark concept, that could be committed to core at any time if we feel we aren't making any progress coming up with better concepts. I hope this would put your mind at ease of this issue getting forgotten and never solved.

I still think it's important that designers are given room to explore solutions. I've got at three concepts, I'd need to produce a patch to fully communicate them.

installer-druplicon.jpg

Bojhan’s picture

Back from vacation, all this emotion isn't productive at all. I personally don't feel like its needed, but I see others do - so lets explore ways to make this happen.

@lewis Couple of ideas:

1) http://dribbble.com/shots/1076169-DB-Photography-1 - white druplicon in the right corner (transparent 60%).
2) What about making Druplicon a pattern, and having it diagonally across the background.
3) http://dribbble.com/shots/692616-Watermark - gray druplicon in the right corner (transparent 75%).

klonos’s picture

I was thinking something like this (opacity of druplicon TBD):

Drupal_installer_with_druplicon.png

It's like your friendly neighborhood Druplicon overseeing the installation procedure ;)

LewisNyman’s picture

@Bojhan I did give it a go with a combination of blend modes and transparency. It's tricky though because the Druplicon has a lot of contrast. Here's the best I got to.

installer-druplicon-overlay.jpg

Pancho’s picture

#40: Thanks for pointing me the other issue. If using the wordmark is no option, then even more we need to make sure, the installer doesn't look like a random, cheap imitation or an unofficial clone. Currently this is quite much the case, IMHO, so I filed #2035489: Replace imitated "Drupal" wordmark.

OTOH, it would be nice if at least something reminds people of the official Drupal project, so re-adding the Druplicon seems like the best option we have. If we don't like the Druplicon anymore, or other people don't, we could redesign it making it look less like an alien. IMHO that would be the better option than hiding it altogether.

#41: Probably too subtle at first sight, and too dominating at second sight. You simply don't see it, but as soon as you do, it's huge.

#42/2: The background pattern idea seems to be an option. We'd need to figure out a few different patterns and choose from them.

#43: Should certainly be a bit smaller, but then it would be another option.

Pancho’s picture

Priority: Critical » Major

Demoting this one to major, even though I'm favoring it.
Might be postponed on #2035489: Replace imitated "Drupal" wordmark to avoid working on a moving target.
Also this one might become critical again, if the other one is committed and it is decided that at least something needs to remind people of the Drupal project, apart from the Drupal blue background color.

Gábor Hojtsy’s picture

FileSize
22.97 KB
263.35 KB

To maybe help spark more brainstorming, I'd also like to point out that @tkoleary's original mocks (update: link at #1260716-74: Improve language onboarding user experience) for the installer did contain at least a homage to the Druplicon in the form of how the 8 is shaped out of two water drops (with the lower one in the exact outline of Druplicon):

04_s04.jpg__1200×1500_.png

I'm not sure all of the suggestions above have the Druplicon in mind with all of its 3d-ness and all ornaments. There has been many versions of Druplicon through the years, and the current 3d one has been with us for a long time, but it has not been exclusive:

druplicon.png

(see more at http://kristjanjansen.ee/node/456/ although not all images are properly linked anymore). Druplicon is especially made to not be sacred to touch, so different applications of it are used for camps, cons, etc. We can (IMHO should) adapt it to its environment in the installer much as everybody else adapts it to fit perfectly :)

klonos’s picture

Just a note: If it ends up in the bottom right corner, then it at the very least needs to be vertically flipped because it makes no sense for it to be staring away from the content of the page. Even then it still looks downward. So I guess the best place for it should be the top right corner with the druplicon flipped to look at its left.

chx’s picture

That homage in the 8 is brilliant!

Kristen Pol’s picture

Lots of good ideas here! Thanks!

Love the 8 with the drops.

I also don't like Druplicon looking away from the page. Lower left corner? Flipped like mentioned?

I don't like it quite so prominent like in #43 but maybe if it was more subtle.

I like the tiling of #47... the wall of plain blue looks a little boring IMO ;) But, adding the Druplicon makes it less boring so I think tiling+Druplicon in background would be not good.

Dries’s picture

I agree that this issue isn't critical, and most likely not even major. I wouldn't mind a Druplicon though so it would be nice to continue to explore this.

chx’s picture

Priority: Major » Critical

I might not have expressed this clearly enough but I considered an agreement was made in #175 of the parent (that the new installer gets in and this followup also gets in but only as a followup so as not to block the parent) and I feel betrayed that this is not happening. So, while the parent might not have been clear enough but I hope this followup is.

joachim’s picture

> That homage in the 8 is brilliant!

It's nice, agreed. But we should bear in mind that it will only last us another three versions at least: I don't know how it would work with a 10, and it won't be doable with an 11!

Bojhan’s picture

@chx This is still on my radar, we just have a lot on our plate. This issue has been open a couple of weeks now, its normal for visual issues like this to first go through an idea phase of a couple weeks before we settle on a direction. I will take the time to work on this later this week, but frankly I think its fair to give us some time to handle this. There is no point in rushing a bad design, we want to make this look good.

chx’s picture

@Bojhan, thanks! That's good news.

dcrocks’s picture

Priority: Normal » Critical
FileSize
64.66 KB
47.03 KB

It seems hard to me to add the icon back and still keep it unobtrusive. I have the idea of adding it to the highlighted task in the side bar. It is unobtrusive while further emphasizing the current task. It would then show up on every normal page but only on the current task. The idea could be further improved, perhaps putting it on the point instead of the left, though it probably would be better to get someone better at this than me. See the sampe images.

files/install-sample1.jpg

files/install-sample2.jpg

edit: Just wanted to see if I could do this.

Pancho’s picture

Like, the drop is always moving...
I'm looking forward to what @Bojhan would bring up, but from what we have now, your idea really @dcrocks! :)

could be further improved, perhaps putting it on the point instead of the left

No, I think on the point it would be more distracting. Just a little more of a margin would be nice.

dcrocks’s picture

Does anyone have a RTL drupalicon?

dcrocks’s picture

Just noticed that the sidebar is dropped on small devices, so the icon is lost. So this might not be best solution.

dcrocks’s picture

FileSize
41.64 KB

The margins seem tighter on RTL. There are other inconsistencies. This css looks like it needs more work for RTL display.

files/install-sample3.jpg

edit: here too.

tstoeckler’s picture

FileSize
128 KB

I think we should strive for something more subtle. Here's something I had in mind.
installer-druplicon.png
This is just a proof-of-concept that I cooked up with Firebug, so don't mind fussing about any details, but how do you like the general approach?

Kristen Pol’s picture

@dcrocks - I like the Druplicon next to the step you are on. Nice work :)

Kristen Pol’s picture

@tstoeckler - I like the general approach but don't like that the Druplicon is covered up with the form.

klonos’s picture

I'd prefer the druplicon with a bit less opacity in #62. You can barely see it and though some might say that that's exactly the point, I'm pretty sure that certain people might feel betrayed or tricked again (understandably).

Pancho’s picture

Agree it should be subtle, but opacity is not everything. The eyes adapt to the contrast, and if focussed, the Druplicon in #62 is huge (!) and rather scary than subtle. #57 is much more subtle and IMHO strongly preferable.

tstoeckler’s picture

Well, one is more subtle in size and one is more subtle in colors. :-)
Can we have some input from @yoroy / @Bojhan / etc. if either of the two is something they could endorse (at least in principle)? That would be awesome.

dcrocks’s picture

FileSize
39.91 KB

A good designer could do many things with the drupalicon in #57. See the attached image for another variation, for example. The main reason I was attracted to this design is that the drupalicon sort of participates in the install process by always moving to the current active task.
I had difficulty finding the icon in #62, and I think it would be rather too large if the opacity ws reduced. But the size could be adjusted as well of course

install-sample4.png

dcrocks’s picture

FileSize
85.4 KB
68.14 KB

Here is another with a larger icon but reduced opacity. Both the blue and the black icon. Oops, disregard #4 here.

install-sample5.png

dcrocks’s picture

FileSize
87.84 KB

Sorry, wrong image. Just trying to say that there can be a lot of variations.

install-sample4_0.png

starchild’s picture

I have been playing around with a bunch of ideas for this. Here are the results.

Idea 0

This is quite similar to the idea proposed in #62. But instead of having the Druplicon at the middle of the page I have it hanging at top-right corner:

installer-druplicon-stalks-you.png

This could address the concern made in #64 but it may still pose problems on some pages if the size and positioning is not carefully thought out:

installer-druplicon-stalks-you-problem.png

Idea 1

The Druplicon doesn't appear until the last page where it congratulates you for the successful install:

installer-druplicon-congrats-you.png

Idea 2

We can use a subtle droplet silhouette in place of the green check-marks to indicate steps completed. Installing Drupal "one drop at a time (TM)":

installer-one-drop-at-a-time.png

cweagans’s picture

-1 to a solution that involves mirroring Druplicon so that it's looking left. What if you did something like Idea 0, but bottom left aligned (below the install tasks), and Druplicon is facing right?

klonos’s picture

I like the one drop at a time idea! Perhaps we could do that + the druplicon congratulations at the end of the installer.

Tor Arne Thune’s picture

Yes, the vertical one drop at a time really made me go "Yes !" and the Druplicon at the end of the install would probably be the best solution, in my opinion. It's not too obtrusive and doesn't mess with the great new clean look of the installer.

rootwork’s picture

#74 is exactly what I was thinking. Subtle but not garish (personally I found all of the Druplicons-as-bullet-items a little ugly). Having the drops as bullets references the design, and then on the final page you get Druplicon itself. Seems perfect to me.

plach’s picture

#74 is exactly the kind of solution I was referring to in #8.

FWIW +1 :)

Kiphaas7’s picture

#71 Idea 1 and 2, awesome! :)

Bojhan’s picture

I love idea #2, putting the drops on the completed steps. That's a nice detail - I'm totally up for getting that in. I am trying out some designs for it to also blend nicely with the blue background, but its a bit hard to make it look right.

sphism’s picture

CHX - I'm totally with you on this, the idea of dropping the primary graphic icon for a brand seems totally insane to me.

Granted the icon looks out dated, blah blah blah, but to drop it completely is a bad idea imo, and to replace it with the word Drupal, not in the Drupal font... erm... wtf?

Do we actually have a branding guidelines document? Are there any plans to make one?

I'm gonna spend some time today seeing if I can please all the different points of view here, I've not been following this issue for a while now. I was quite excited with the original installer ideas, but my initial thoughts about the new installer... are... it looks pretty boring - which is fine, except Drupal is one of the least boring CMS's so the style isn't really reinforcing the brand.

I'm not really talking about whether there should or shouldn't be a Druplicon on the installer, I'm talking about that first impression someone gets when they install for the first time, or when a seasoned pro is starting a new site, or whatever....

Meh, whatever, I'll post some graphics later and you can all slag them off :)

sphism’s picture

Here we go, 7 options taken directly from the current installer, in an attempt to satisfy as many opinions as possible.

I'm happy to do more of these if anyone wants them. I was just looking at the layout of the content itself and thinking it could also have a bit of work done on it too.

option 1:

drupal_8_installer_1.jpg

option 2:

drupal_8_installer_2.jpg

option 3:

drupal_8_installer_3.jpg

option 4:

drupal_8_installer_4.jpg

option 5:

drupal_8_installer_5.jpg

option 6:

drupal_8_installer_6.jpg

option 7:

drupal_8_installer_7.jpg

tim.plunkett’s picture

Option 3 and 5 are amazing.

I like 2, but not the shape of the white background over the installer step. If that was symmetrical, it'd be much better.

6 and 7 it blends in too much.

chx’s picture

You do not necessarily need to add the full Druplicon; I understand the concerns (somewhat) over what some perceive as a strange alien head. There are really nice homages to it -- like that 8, the install task dot being Druplicon-shaped... I am sure you guys will arrive to something nice at the end. Thanks!

dcrocks’s picture

Remember that the side bar containing the task list is not displayed on small devices. Probably a small concern but not an argument for the giant transparent druplicon. The druplicon on the 'install finished' page would probably suffice.

I prefer the options that provide better contrast(black type on light blue or whiteish background) because of my eyesight.

klonos’s picture

I like option 3 better and I agree that if the task list has a darkish blue color it blends too much with the background of the page. Perhaps the druplicon and the background color of the task list could be the same.

neclimdul’s picture

I like 4 better then 3. The shadowed Druplicon on the right creeps me out. Are there branding rules around the Drupal logo (white on blue, color choices etc) we should make sure we're using?

dcrocks’s picture

#4 also has a shadowed druplicon, only on the left. I would prefer #3 without the druplicon as it is simpler than #4. Perhaps a lighter blue in the side bar to increase contrast.

sphism’s picture

i'm dong some more work on this now, so if you have any thoughts let me know.

I've been looking at the content of the actual install steps, and i think we can make some improvements there also.

Overall I really like the installer, gives a good first impression.

One thing I have noticed is that after installation is complete there's no real instruction on what to do next, like a post-installation wizard i guess. I think as a completely new user I would be very confused what to do next... But that's probably for a different issue.

... I'll upload some things in a bit...

webchick’s picture

Wow, sphism! Those designs are really tight!

sphism’s picture

FileSize
66.82 KB

Ha, thanks Webchick, and thanks for all the other kind words...

So I took in the feedback and hopefully this next version is an improvement.

Bear in mind there are a lot of changes in this one, so if you don't like some part of it please be specific.

The logo: That's a new version of the logo, I'm hoping that the lack of mouth or nose will make it less like a weird alien staring at newbies but still toally recognisable as the druplicon. It's actually an update of the 3d Blender druplicon I made a while back but it has gradient's overlayed on top since that's the fashion atm.

The Drupal wordmark: Yes I've used the drupal.org wordmark, which I think won't be allowed, so here's the argument, either a) we use the drupal wordmark in the drupal product or b) I make a slightly different versin of the wordmark and we have 2 different one. I don't mind either way, but I think displaying the product name in a default web font would be a mistake.

The sub header: Drupal install v8.14 - I noticed that you get to this page without really intending to, so for a newbie I think it would be good to say something like Install Drupal, or whatever... Sometimes you get the installation page when something goes majorly wrong, like a settings.php file doesn't copy somewhere... so maybe a link to some help... or something -also as a developer I may have just downloaded the latest version but accidentally install an older one, or whatever so i thought a version number was good...

The left sidebar: I've kept this very much like options 3 and 4 above which people seemed to like, I prefer option 7 BUT accessibility trumps anyhting graphical so that's that. (Is it ok to have the highlighted task as white text on dark background? Hope so otherwise it's very hard to get a nice balanced graphical contrast)

The drupal bullet point: I really like that idea, I added the 'tick' to show which ones you've done, but just a thought.

[off topic below this point but still important and probably discussed elsewhere]

The content of the right side: I've not touched it, but some thoughts are to replace the grey button with something that pops out a bit more, and to alter the fieldsets a little, and the error message div and icon

The names of the steps sometimes match the 'page' title, and other times they don't... eg 'Choose Language' and 'Choose Language' match but 'Choose Profile' and 'Select an installation profile' do not...

Also the verify requirements step is completely missed out, I assume if a requirement is not met then there's an error on that page... from a dev point of view i'd quick like to see what that step is doing and have a quick review of php version, memory limit etc

And the finished step isn't highlighted with the pointer background

drupal_8_installer_9.jpg

LewisNyman’s picture

Great work going on here! I can't help but wonder if we are going too far beyond the scope of the issue and redesigning the installation page again? The current design was tweaked to it conforms to the visual principles in the Seven style guide - #1986434: New visual style for Seven

sphism’s picture

FileSize
85.48 KB

I just made a larger version of the logo so you can all see it a little better.

A lot of graphic styles seem to be heading this way, simple gradients etc

druplicon_logo_2013.jpg

sphism’s picture

@LewisNyman: Yeah quite possibly outside the scope of the installer, personally I think the look and feel of the installer has a huge role to play in giving a great first impression for Drupal 8, and it's fun to fiddle with :)

With regards to the grey button, I was wondering if the newer square blue button style in the Seven theme might work better

sphism’s picture

FileSize
78.52 KB

I've just been reading up on the issues with using the Drupal wordmark in core, so here's a version with helvetica bold instead of the drupal.org logo

option 10:

drupal_8_installer_10.jpg

sphism’s picture

FileSize
71.19 KB

Here's that logo with the Helvetica bold font:

druplicon_logo_2013_2.jpg

LewisNyman’s picture

@sphism The blue buttons would definitely look better, there's an issue open against that #2030631: Make "Save and Continue" buttons primary buttons.

dcrocks’s picture

1ST thought, is this version 8.14 of drupal or the installer. Perhaps 'drupal v8.14 install'? Like the task bar, but think the check mark detracts from the simplicity of the design. Think the large druplicon dominates the 'not-a-wordmark' and should be more subdued if it stays. Always thought the new D8 installer looked clean and professional, actually as simple as it is, somehow more modern. The install pages, as they are, tell you that you are 'in' Drupal, and the original issue was to return the drupal talisman, but I think that most of the comments indicate a desire to keep it unobtrusive.

Just my thoughts, but think this is going the right way.

ps. how does this look on small devices?

sphism’s picture

@LewisNyman Thanks for pointing me to that issue, I've not been around the Drupal 8 issue Q for a while, trying to get back into it...

starchild’s picture

Awesome work there @sphism! I happen to love option 7 as well. I think it looks gorgeous.

Interestingly the changes you have done to Druplicon (removing the nose and mouth) is exactly what I was thinking, but never actually got around to try it :)

But I can see where others are coming from. Being minimalist and simple was the original design idea if I'm not mistaken, which is why I didn't introduce anything beside the raw idea in #71.

Having said that I have also worked further on this based on the seven style guide as well as inspired by @sphism's great work here. Will post shortly.

xjm’s picture

Priority: Critical » Normal

Thanks everyone, great discussion here.

Fixing the priority -- see the post from @Dries in #51:

I agree that this issue isn't critical, and most likely not even major. I wouldn't mind a Druplicon though so it would be nice to continue to explore this.

Bojhan’s picture

Damm, I really don't have time to work on this the next few days. I am happy to see all the explorations. I agree with lewis though, that we might want to limit the scope a little as to what we are changing. We don't have to reinvent how the whole installer looks, we are adding a element. I'd encourage trying variations for it to blend with the background, instead of the foreground (the white area of the installer).

cweagans’s picture

We should really reel in the scope here. The design of the installer was discussed ad nauseam in the other issue. The only addition/change that we should be making here is to add Druplicon somewhere.

I particularly like #41 or any option that's just a semitransparent Druplicon in the background of the white area. Let's just do something subtle, get it in, and close this.

starchild’s picture

The least disruptive is probably #71: idea 1.

chx’s picture

#71: idea 2 is the least disruptive for sure? It's almost invisible.

sphism’s picture

Priority: Critical » Normal
FileSize
77.31 KB

Here's option 11, reigning it in - Last night I read thru ALL the conversations in various threads, I've mulled it all over, digested it, and here's the result:

(note that the content of the right hand content will be a bit different, but that's up to the Seven theme, eg the Save and continue button will be a primary button ad so on)

option 11:

drupal_8_installer_11.jpg

rootwork’s picture

I continue to think #71 idea 1 + idea 2 would be both effective and minimal.

I ALSO really like some of the designs above (and the hard work that went into them), and I think it could be worth opening a new issue once this one is closed to incorporate some of those ideas.

But ideas 1+2 from 71 would be straightforward to get in and commit quickly, and then additional ideas could be debated.

rootwork’s picture

Sorry, #104 was posted while I was writing that.

I love #104. If that still seems too much beyond the scope of this issue, I'd go back to #71 1+2.

sphism’s picture

@rootwork, I just read #105 and thought, ah crap... Then read #106, that's what I was hoping for. I read thru all the comments from everyone surrounding this and related issues... I think this is a pretty close fit to keeping the most people happy, and IMO looks pretty freakin badass.

I should be able to implement a lot of this and supply patches, not just make pretty pictures ;)

mallezie’s picture

Perhaps it's even better to limit this patch, only to the druplicon shade in the install options, and the druplicon in the upper right corner. (And if necessary even split those, but that's perhaps overkill).
I would think about adding the 'Drupal v.8.14 installer'-text in another issue, to be sure not to derail this issue because of somewhat too large scope.

Thinking about the text, it comes to mind, there's now two times the word Drupal. I'm not sure we should add the specific version there. So i would postpone this discussion to another issue, and first get the druplicon back in, in this issue.
From which i love the 'new flat discussion' and the drop-marks in the installation steps. I like the last steps-marker in #104 most. The blue color, and the darker blue for the current-step. I'm not quite fond of the versions with the checkmark through the druplicon as in #93

Just my two cents.

starchild’s picture

Sorry for the delay. Here are some further work I did on this refining the ideas above based on the feedback and incorporating the colors from the Seven Style Guide:

Version 0

installer-version-0.png

Version 1

instaler-version-1.png

Version 2

installer-version-2.png

Version 3

installer-version-3.png

Version 4

installer-version-4.png

LewisNyman’s picture

As well as there being a set colour palette, there are also graphic principles defined in the style guide:

  • A primarily light tone to appear bright and open
  • A neutral, desaturated color palette, both friendly and calming.
  • Legible, readable typography. Employs a typeface with some humanist characteristics in a few weights and styles.
  • Crisp lines and sufficient contrast, but not jarring. No large areas of bold colour.
  • Bold shapes reserved for headings and action elements.
  • Some rounded forms to communicate friendliness and naturalness.
  • Little or no ornamentation: no patterns, textures, gradients or shadow/emboss effects – except to communicate affordances.
  • Borders and background tone as grouping devices only: to clarify relationships and emphasize important elements.
  • Generous and consistent use of whitespace.
  • Aesthetically appealing, though minimal graphic style; should appeal simple but not sterile; gracious rather than opinionated; confident without overspeaking.

Hope this helps

sphism’s picture

Those graphic principles are good, that's generally how I like to work, I don't think #104 contradicts any of those.

starchild’s picture

FileSize
26.22 KB

@LewisNyman, hmm I guess that could make versions 0, 1 and 2 problematic. Here's a quick fix maybe:

  • Swapped "selection" blue with the tint version (exactly the shade used in focused drop down menus)
  • Current task arrow uses "selection" blue instead of "drupal blue"
  • Text colors adjusted accordingly
  • Got rid of all the drop shadows

Version 5

installer-version-5.png

sphism’s picture

Just had a good read thru the graphic principles for Seven, some really great work in there.

I'll use that typeface for Drupal, remove the installer text for now, although there is meant to be space for a slogan, and I'll make sure all the colors match the guidelines.

Any thoughts on the Drupalicon? I'd say it fits the style guide better than Drupalicon 2004.

starchild’s picture

Ok I'm warming up to #104. I haven't been too fond of adding the droplet to the current task arrow because I figured the arrow is already indicating the current task so there was no need to add another embellishment. So as you can see I didn't incorporate it in any of my designs. But I can see myself warming up to it especially given the fact that with that particular implementation one can regard done tasks as "grayed out" versions of the current task including the droplet bullets.

So here's a version of the same idea but without the changes made to the header section in #104 and done with colors from the Seven Style Guide palette.

  • The "done task" droplets have the tint version of the "selection" color
  • The "current task" bullet droplet has the "drupal blue" color

Version 6

installer-version-6.png

And another variation with "current task" arrow in "selection" blue color:

Version 7

installer-version-7.png

mallezie’s picture

@#114
I would go with version 6, it adds the druplicon in an very nice way. And follow's closes to the redesigned installer.
I think perhaps only discussion left is to include the task arrow checkmark or not. (i prefer not).

I think it's best to limit this issue to that version. (Adding the new flat mouthless (which i like)) druplicon, should best be a follow-up issue.
If this seems the right way, i'll update the issue summary, and open the follow-up issues.

Edited: Meant version 6 instead of 7

dcrocks’s picture

+1 version 6. The blue task arrow in 7 reduces text contrast.

starchild’s picture

FileSize
25.37 KB

To address the concern in #116 as well as fix my own sloppy implementation in #114 here's another version.

  • Changed the "current task" background to the tint version of "selection" blue from Seven Style Guide
  • Made the droplets a tad smaller to not be so overbearing
  • Fixed the distance from left edge (to match the distance from right edge)

Version 8

installer-version-8.png

klonos’s picture

- The current task looks better with a droplet in it (versions 6 & 7). It gives the sense of it dropping as tasks are completed, which is nice and I take it that that's what most people like in this thread.

- The completed tasks can have either droplets with lighter color or with the same color but only a border instead of a fill (like version 1). I would like to see versions of both please. The checkmark on the completed droplets really puts me off - the whole sense of them being droplet trails is gone.

When it comes to colors being used, my interpretation of the Seven Style Guide is this:

- The tasks column should use 'burlap' (#ebeae4) "used for content header ... & all UI shading". Alternatively, if burlap turns to seem too dark, use eggshell #2 (#f5f5f2) "light variant of burlap".

- The Drupal wordmark, the droplet in the current task stripe and the border of the droplets in completed tasks (if we go with that version of droplets) should use the Drupal Blue (#0074bd).

- The current task stripe should use the Selection color (#40b6ff). Use the same color for the droplets of completed tasks (if we go with the solid color versions of them).

- The text of completed tasks should be light text (#595959) (here's where we'll decide if burlap is too dark for the background and whether we should go with eggshell #2 instead)

- The text of the current task as well as remaining tasks should be #1a1a1a.

Thoughts.

klonos’s picture

...cross-post. Basically, what I said in #118 more or less is version 8. Perfect!

Can we please try to put the 'burlap' (#ebeae4) or eggshell #2 (#f5f5f2) as a background color for the tasks column.

Also, if it's not much trouble, can you put together a border-only version of droplets (for the completed tasks) using Drupal Blue (#0074bd)? Thanx in advance.

PS: lets do this first iteration of adding the subtle droplets here and add the druplicon once they're in place (though NOT on a different issue please - this one is about the Druplicon)?

starchild’s picture

Can we please try to put the 'burlap' (#ebeae4) or eggshell #2 (#f5f5f2) as a background color for the tasks column.

Do you mean the current task arrow? If so then that would be Version 6.

Also, if it's not much trouble, can you put together a border-only version of droplets (for the completed tasks) using Drupal Blue (#0074bd)? Thanx in advance.

Sure thing :)

sphism’s picture

#118: Sounds good to me, I'll do this first thing tomorrow.

So should I take out the separate header? The reason I like it is that it groups like with like, and makes for bery easy rebranding for other distros, also with the Drupal.org redesign the Drupal branding became light text on bold background. Which I really like. Blue text on white just looks bad IMO.

Apologies for high jacking this thread with so many different topics, the main issue I have with adding Drupalicon directly in to the design is that I think our logo is in need major need of a reboot, which I've been pushing for for a while.

LewisNyman’s picture

@sphism in my experience it's best to try and try and restrain yourself when tempted to improve things beyond scope of the issue. These things always spark a lot of debate and usually goes on for long time without anything being improved. I've had more success trying to get smaller, incremental improvements in one at a time, despite this being counter intuitive to the usual design process.

Redesigning the Druplicon is definitely another issue ;-)

starchild’s picture

By popular demand :)

re: #119

Version 9

installer-version-9.png

Version 10

installer-version-10.png

klonos’s picture

Can we please try to put the 'burlap' (#ebeae4) or eggshell #2 (#f5f5f2) as a background color for the tasks column.

Do you mean the current task arrow? If so then that would be Version 6.

Nope, I meant the background of the whole left-side column/list of tasks (the left part that is light blue in version 5 in #112 and with the Selection color (#40b6ff) in versions 0, 1 and 2 in #109).

I don't have a specific preference with regards to the droplets of the completed tasks. I really like both the solid ones with the Selection (#40b6ff) color as much as I like the ones with the Drupal Blue border. I guess we can check them against the burlap or eggshell background and see which ones look better. I imagine that if the background is darker, then perhaps the solid-color ones with the Selection color (#40b6ff) (like in version 8) might blend a bit too much with the background - that's why I requested a version with a more prominent color like the Drupal Blue. Since we chose the Drupal Blue for the droplet of the current task and in order to differentiate from the completed tasks, having them with a border only seemed like a nice idea.

Anyways, I think that the current task ribbon/arrow is better with the Selection (#40b6ff) color (instead of any gray-ish) and that by the way is in tandem with the Seven Style Guide (that color is used as the name suggests for currently selected elements).

What software are you people using for the mockups btw? Can we have the source files so we can post our ideas instead of constantly asking you people to do things for us? ...and to that end: I really appreciate the time and energy you spend on this. Thanx.

starchild’s picture

FileSize
11.18 KB

I use Inkscape. I have attached the source SVG file so people can iterate upon it further.

Note: This is the version with all the "elements" on (minus the drop shadow effects etc.).

Edit: No .svg extension allowed? Why no love for SVG? :(

starchild’s picture

FileSize
25.71 KB

Nope, I meant the background of the whole left-side column/list of tasks (the left part that is light blue in version 5 in #112 and with the Selection color (#40b6ff) in versions 0, 1 and 2 in #109).

You mean like this? (using "eggshell #2" color)

Version 11

installer-version-11.png

klonos’s picture

...here are the variations I was talking about in #118:

Version 11a

(burlap task background & solid droplets):

burlap & solid droplets

Version 11b

(burlap & border droplets):

burlap & border droplets

Version 11c

(eggshell & solid droplets):

eggshell & solid droplets

Version 11d

(eggshell & border droplets):

eggshell & border droplets

klonos’s picture

...I personally like the 11d version because burlap is indeed too dark and I simply like the border droplets more than the solid ones without any specific reason.

PS: I cross-posted with @starchild. Good thing I named my variations 11something instead of 11, 12, 13 and 14 ;)

Version 11 from #126 is basically the same as my 11c without the 50% opacity for the droplets and the ribbon/arrow. So, yes that's what I meant ...more or less.

We can bikeshed over the final opacity and the size of the droplets, but I suggest that we get first come to an agreement over the colors and whether they are in compliance with the Seven Style Guide.

sphism’s picture

These next two follow the seven style guide to the letter, i think... All colours are taken directly from the style guide

There are 5 things we are considering here:

  • Colouring the task list: "Borders and background tone as grouping devices only: to clarify relationships and emphasize important elements."
  • Adding the druplicon: Nothing in the style guide really relates to this
  • Adding the droplet bullet point: Nothing in the style guide really relates to this
  • Separating the header: "Bold shapes reserved for headings and action elements.", "Aesthetically appealing, though minimal graphic style; should appeal simple but not sterile; gracious rather than opinionated; confident without overspeaking."
  • Adding a title to the page to say what you're doing, eg you could potentially be updating drupal, etc

sphism option 12:
drupal_8_installer_12.jpg

sphism option 13:
drupal_8_installer_13.jpg

rootwork’s picture

I really like option 13, but option 12 is fine if 13 is too much of a change for this issue.

Thanks for all your excellent work on this sphism!

sphism’s picture

@rootwork: I agree, I think 12 is more in line with the style guide than the current installer, I would prefer to break the header out of the task list like option 13 because it shouldn't really be 'grouped' with it, OR if it is in the same div I think it should be visually ungrounded from it somehow... But it's tricky.

I think sphism option 13 should go in a separate issue, actually I think most of this discussion should :) whoops.

I like the outline Drupal droplet but it reminds me way too much of those prison tear tattoos. Also I don't really like that the water droplet serves little purpose, which would kinda be against the style guidelines... Anyway, I'd just like to work on a really slick Drupalicon for 2013 and have it on the installer.

oriol_e9g’s picture

IMO the Idea 1 in comment #71 is the easiest and fastest solution. Maybe we can do a quick patch/commit to ensure that Drupal 8 will not ship without druplicon and then followup with other solutions.

chx’s picture

I doubt there's any rush.

sphism’s picture

I'm not sure easiest and fastest really apply, I'd rather spend time implementing something well thought through that fits the style guide, personally I think polishing the very first page every user sees is very important to the initial impressions.

I just need to get it 'signed off' and I can start making patches

sphism’s picture

Here are the psd's for option 12 + 13, for some reason the upload keeps failing for psd's so have tarballed them

I also created and exported a photoshop swatch file and attached it to the Seven Style Guide (you can load it into the swatches panel in photoshop to get all the exact colors)

Bojhan’s picture

FileSize
2.09 MB
658.49 KB
658.98 KB
659.27 KB

A small side note, for those who don't know - I worked extensively with r5yn over the course of several months working on the style guide. I helped write the guidelines, so hopefully I can provide insight where needed.

Ok, I managed to do a few explorations. I really like the Druplicons as bullets. So I incorporated that. The druplicon clearly doesn't fully match the style guide, but there are ways to atleast make it work. I like the idea of changing the druplicon slightly for it to be slightly more soft (this is also more in overall style with the style guide). But I want to make sure this doesn't conflict with the original idea of this issue.

What do you think about just including the logo in the bottom corner? Its pretty common for software installers to do this, and it doesn't look bad persee. I am not 100% pleased with this yet.

I am not sure why the version number got into this exploration, that seems like a functional addition. If you would like this I'd advise to open a separate issue. It can be a little tricky as some installation profiles, don't have clear numbers and it will end up like Drupal Commerce Kickstart 1.2-dev-23, which doesn't quite fit. Given those problems, a separate issue is easier.

#131, the current druplicon as bullet is maybe a tweak too much away from the real druplicon. But only a tad bit, then again its all in the details :)

A

setup-db-a.png

B

setup-db-b.png

C

setup-db-c.png

Bojhan’s picture

FileSize
658.49 KB
658.98 KB
659.27 KB

A small side note, for those who don't know - I worked extensively with r5yn over the course of several months working on the style guide. I helped write the guidelines and worked on the designs, so hopefully I can provide insight where needed.

Ok, I managed to do a few explorations. I really like the Druplicons as bullets. So I incorporated that. The druplicon clearly doesn't fully match the style guide, but there are ways to atleast make it work. I like the idea of changing the druplicon slightly for it to be slightly more soft (this is also more in overall style with the style guide). But I want to make sure this doesn't conflict with the original idea of this issue.

What do you think about just including the logo in the bottom corner? Its pretty common for software installers to do this, and it doesn't look bad persee. I am not 100% pleased with this yet.

I am not sure why the version number got into this exploration, that seems like a functional addition. If you would like this I'd advise to open a separate issue. It can be a little tricky as some installation profiles, don't have clear numbers and it will end up like Drupal Commerce Kickstart 1.2-dev-23, which doesn't quite fit. Given those problems, a separate issue is easier.

#131, the current druplicon as bullet is maybe a tweak too much away from the real druplicon. But only a tad bit, then again its all in the details :)

A

setup-db-a.png

B

This one stands out the most, but the gradient scheme doesn't quite match the background, and neither does the noise level.
setup-db-b.png

C

Hiding in the corner :') Maybe a little too scary.
setup-db-c.png

rootwork’s picture

Could we put the Druplicon in the lower right corner (or lower left corner on RTL) of the white box? Even at full opacity I think it's going to be missed entirely.

At the very least, I think the Druplicon should be in the white area on the final "success" step.

Bojhan’s picture

@rootwork I think your intent is different than mine. I explicitly did not put in the white area, because it will be obtrusive there. I don't think it has to be super noticeable, the whole point of the seven style redesign is not have large and hard visual elements, instead we introduce soft details. This screen is often rather empty, so it will be in view. If you are worried about people missing it, you should show it before the installer even shows :P and have it blink, people are relentlessly task focused they will ignore everything about this screen but the forms anyway.

rootwork’s picture

Heh, well I'm not saying it should blink :)

OK, then -- what about having it in the white area on the "installation complete" screen as in #71 idea 1?

Other than that I LOVE the rest of the design here, so I'm not trying to take away from that. The colors, fonts, layout and the droplets as things get completed are brilliant.

sphism’s picture

@Bojhan: regarding https://drupal.org/node/2030027#comment-7710957

Everything looks fine, the task list highlight color isn't in the style guide but we'll let you off ;)

I also tried the druplicon bottom right. It's ok, I'd be satisfied with that as being the compromise, not too much in the face of scared little newbies, but still present as reassurance to the old dogs.

A) I'm not keen on this, you could argue that a water drop would look like this lit from above BUT I think it looks more like it's lit from below which generates tension with any other top lit drop shadows. Also whenever I try the eye's at anything but full opacity it just doesn't sit well.

B) The lighting on this looks better imo, definitely my preferred choice.

C) Either too small, or too transparent, probably both, not into it.

I'd be happy with B, possibly with a little fiddling (I'm quite fond of a lighter outline stroke) possibly a little bigger - that size was intended for the header, I think in the footer we could go to 150% that size.

I'm just going to focus on druplicon

klonos’s picture

A few questions just to make sure we're all on the same page and in order to set some basic ground rules on the mockups:

1. The task list area color: should it be left white or should it be burlap/eggshell? I think it should be visually divided from the right side main area. If you think it should stay white, care to explain the reasons?

2. The active/current task arrow highlight: some people use gray-ish colors in their mockups instead of blue-ish. Is there a specific reason? According to the Seven Style Guide, we have the "Select" color (#40b6ff) for focused/selected elements. Some people do use the "Select" color but with 50% opacity. Again any specific reason for toning it down?

3. The completed tasks text color: again according to the Seven Style Guide, we should use the "Light text" color (#595959). Do we all agree on that? If not, again why?

Lets settle on these for a start.

PS: if we decide to place the druplicon outside the main area, then in order to not blend with the blue background we could use a white border around it. Sort of like a badge like in option 13 in #129. Just an idea.

sphism’s picture

@klonos:

1) I think separating the task list area up with the eggshell hues makes it more user friendly, but if people are intent on white then it doesn't bother me (imo minimalism != 100% pure white, but some people think it does)

2) Personally I don't love the select color, however, if we do use the select color then what color would the text be? white-ish or black-ish both make it hard to read, which leads me to think the select color is not a great one, or perhaps wasn't intended for this purpose, I think bojhan saw this and toned the select color down so that black text was legible.

3) Yep agree, light text color should be for completed tasks, as I did in #129 - i'd imagine this is just an honest mistake by bojhan

PS: I agree, a lighter stroke around druplicon is a sound graphical decision - which is why i did it ;)

starchild’s picture

1. The task list area color: should it be left white or should it be burlap/eggshell? I think it should be visually divided from the right side main area. If you think it should stay white, care to explain the reasons?

I'm fine either way. Both look good but the style guide does mention "Generous and consistent use of whitespace". On the other hand using a light gray there introduces a similarity to the newly designed content creation page. Personally I'm leaning a bit towards the white.

Everything looks fine, the task list highlight color isn't in the style guide but we'll let you off ;)

2. The active/current task arrow highlight: some people use gray-ish colors in their mockups instead of blue-ish. Is there a specific reason? According to the Seven Style Guide, we have the "Select" color (#40b6ff) for focused/selected elements. Some people do use the "Select" color but with 50% opacity. Again any specific reason for toning it down?

That highlight color *is* in the style guide. It is the "tint" version of the "selection" blue. The exact color used in focused drop menu items.

In #116 a valid concern was raised that using "selection" blue would reduce text contrast and suffer legibility so I fixed it in #117 (Version 8) by using the tint version.

I think our choice is either this color or the "burlap" color (which is the current one).

3. The completed tasks text color: again according to the Seven Style Guide, we should use the "Light text" color (#595959). Do we all agree on that? If not, again why?

Yes the completed tasks should be grayed out. The exact shade of gray depends on the background of course.

klonos’s picture

I really liked the "Select" color the way it is, but I just saw that it is in fact toned down in other places used. For example in the Dropdowns and Popovers mockups of the Seven Style Guide:

Popdowns and Popovers from the Seven Style Guide

The color used there is #b8e6ff while the mockups in #137 use #bfe8ff. The actual theme as it is now uses #3399ff with white text:

seven theme select color

We should chose one and stick to it.

This is great feedback and exactly the kind I was looking for! Thanx. Let's see what others have to say too and then we can move to the other parts of the design.

klonos’s picture

FileSize
26.87 KB

...why aren't files from g.d.o allowed?

Bojhan’s picture

FileSize
934.91 KB

@sphism I uploaded the source. Thanks a lot!

1) I am not sure what you mean. Putting a background on the task list, I am not sure, it does add something - but it also kinda completely changes the look and feel. I liked the white, because it makes it a tiny bit less standard.

2) Yhea, this has to do with legibility. Keep in mind that the style guide can't take account of all deviations.

3) Actually, I changed it because I am not actually sure using the light text color will pass WCAG.

starchild’s picture

@klonos #145

The color used there is #b8e6ff while the mockups in #137 use #bfe8ff. The actual theme as it is now uses #3399ff with white text

My color picker is reading #bae1fe for the style guide "selection" tint color.

starchild’s picture

FileSize
30.5 KB

Interestingly the tags dropdown in the style guide uses #c1e3fe (which is what I have been using in all my mockups above):

3.text-field.png

sphism’s picture

@klonos: dark text on light blue background, or light text on bright blue background, whichever is the current style lets stick with it.

@bojhan: that's an interesting point, I think we should still use the light text color, if that color doesn't pass accessibility then that color should change.

@starchild: a tint of a color is a different color, if you could use any tint then there's not much point in having the style guide ;) now it may well be that a new lighter 'tint' of the select color gets added to the style guide (especially if that color is already being used) but that's another issue.

I've been playing around with Blender today and managed to get it to render out the stylised logo, which is pretty neat and makes it really easy to do interesting things with it.

starchild’s picture

@sphism: Where did I say it was OK to use "any" tint? Of course it needs to be consistent.

Having said that the tint *is* already in the style guide. It is mentioned specifically. Please look at the explanation text for the "selection" blue: Seven Style Guide Color Palette. The addition of a separate swatch is probably pending accessibility review.

The actual use of the tint in the style guide appears to be inconsistent though, which must have been a simple oversight. Thankfully this issue made us aware of it so it can be fixed :)

sphism’s picture

@starchild, yep you're right it is, I was only looking at the palette, I guess that other tint will be added to the swatches

Bojhan’s picture

So what are the action items?

starchild’s picture

@Bojhan:

So what are the action items?

I think:

  • Decide on the color for "current step" arrow ("burlap" or "selection" blue tint)
  • Decide on the color of the "completed steps" droplet ("burlap" or "selection" blue tint)
  • Decide on the color of the steps sidebar background (white or "eggshell #2")
  • Decide on the exact shape and size of the droplet
  • Decide whether the "current step" needs a droplet bullet (probably "drupal blue" or maybe white)
  • Decide where the actual Druplicon should be placed (final "success" page a la #71 Idea 1, in the blue background a la #137 or somewhere in content area a la #129)
  • Decide on the renovation of the Druplicon itself
sphism’s picture

I'll have a set of druplicon variations for everyone to see on Monday

Bojhan’s picture

Decide on the color for "current step" arrow ("burlap" or "selection" blue tint)
-> I'd say selection tint, that was the original idea of the installer too. I was origionally against it, because there is little blue else on the page. Now that we are introducing these elements I'd say using the selection is much nicer.

Decide on the color of the "completed steps" droplet ("burlap" or "selection" blue tint)
-> I personally like using the burlap here, because it is in the past - thus decreased in visual importance. The other examples I saw, except #126, drew more attention to it.

Decide on the color of the steps sidebar background (white or "eggshell #2")
-> I am on the fence about this, although eggshell makes it look much more like a traditional installer. The white allows for items to be a little more out there/minimalistic. @sphism what do you think?

Decide on the exact shape and size of the droplet
-> @sphism will this be part of your varations for monday?

Decide whether the "current step" needs a droplet bullet (probably "drupal blue" or maybe white)
-> I like using Drupal Blue here because it matches nicely with the selection color. We can use white here, but that looks a little inverted - which is nowhere to be found in the style guide.

Decide where the actual Druplicon should be placed (final "success" page a la #71 Idea 1, in the blue background a la #137 or somewhere in content area a la #129)
-> Ok, I will ask r5yn or lewis to chime in too.

Decide on the renovation of the Druplicon itself
-> We can go ahead with this, as long as its not too radical.

starchild’s picture

FileSize
26.45 KB

@Bojhan:

I'm in agreement with you on pretty much all those points. I also prefer the all white look. But I wouldn't object if eggshell background turns out to be more popular.

As for the "current step" droplet bullet being white that idea probably jumped to my mind because of a variation I made but didn't get to post. Just for the sake completeness here it is:

Version 12

installer-version-12.png

The idea is that the steps are empty droplets until they get completed/filled.

The reason my mind went into this direction was because I was thinking of how we can introduce this "steps as droplets" idea in the mobile version. My thinking was that maybe we could use an "empty" droplet as the initial step and then have it be filled up little by little as the steps progress.

jbrown’s picture

The Druplicon without a mouth makes me feel like I can't breathe.

eaton’s picture

The Druplicon without a mouth makes me feel like I can't breathe.

This is my shameful secret: I've always thought Druplicon looked a bit ominous, even malevolent depending on the circumstances. A mouthless druplicon feels a little more logo-like, a little less dark-watcher-who-will-steal-my-soul.

jbrown’s picture

I tried blowing up the Druplicon really large with 25% opacity on top of the radial gradient. Think it creates a nice Drupally effect.

jbrown’s picture

The Druplicon bullets in #137 are awesome!

cweagans’s picture

I have no words to describe how much I LOVE #161. I think we should just do that and call this done!

starchild’s picture

#161 is awesome! Love it.

nod_’s picture

I'm just worried about the size (dimensions and weight) of that background image, hopefully you guys don't agree too much on it and we can do without.

jbrown’s picture

nod_’s picture

Don't mind me then :)

cweagans’s picture

I think 3.66 kB is acceptable :P

jbrown, can you roll a patch for that?

webchick’s picture

#161, plus the drops next to the steps, looks amazing to me.

jbrown’s picture

I'll make a patch tomorrow.

Bojhan’s picture

Hmmpf, I am worried about the design exploration here. We are jumping from one idea to a completely other one, every few comments.

A background like that is incredibly busy, if we do decide to push forth with it - we should reduce the opacity. Nowhere in Drupal will you find big ass swirly vectors. I know that many like big ornamentation, but in overall that doesn't quite fit the brand. However it is much better than all the small representations of druplicon before, so I am fine with pushing forth with it (we just need to tweak it some more).

But the design has to incorporate the already agreed upon druplicons in the steps, with a reduced overall opacity of the background I think it will balance out, perhaps we can also remove the white area, in the top left - that is also quite distracting. We shouldn't go from a very soft balanced look, to a crazy druplicon all over look.

LewisNyman’s picture

I'm liking the direction in #161 and I agree with Bojhan that it just needs a bit of tweaking, I think it can work.

I like the druplicon in the steps, I think the solid icons are much better though, the stroked ones add too much noise.

sphism’s picture

*Facepalm* I give up

Lets take the style guide and throw it in the bin, and lets definitely not revamp the logo from 9 years ago, lets whack it in the background as big as possible,

Awesome stuff :(

dcrocks’s picture

There has been a look of tweaking going on. Why not just get a version with the improved task list and set a base for further work. Everyone seems to like the drops in the task list, and many like the selection tint for the arrow. Get a patch for that to set the new base. Accept those design changes and then the focus can go back to adding a druplicon somewhere.

cweagans’s picture

Re #173: I totally respect the work you've done here, but it is/was way beyond scope of this issue. This issue is not about redesigning the installer or Druplicon or any of the "action items" that were mentioned in #154. This issue is to put our current Druplicon somewhere in the current design of the installer. No more. No less.

#161 did that in a way that will look nice with a couple of minor tweaks. If you want to redesign the installer (again) or change Druplicon, that'd be the point where you need to open another issue or two.

I'd like to note that the original installer comps had more of a graphical thing going in the background. #161 does it in a way that, if you don't know what Druplicon is, just looks like tasteful blue wavey things in the background (especially if we reduce the opacity).

Re #174: This issue is about adding Druplicon. Why would we commit something that doesn't do that?

klonos’s picture

The background idea from #161 will satisfy old-dogs without disturbing newbies. Still the main area needs to incorporate all changes discussed so far ("Select" color for current task ribbon, droplets, perhaps eggshell background etc.) in order to be as compliant as possible with the Seven Style Guide.

I really like the idea of the filling droplets from #158 and the thought of having a single droplet gradually filling on mobile. Nobody (including myself) seemed to like the idea of checkmarks over the droplets in order to signify completion. This nails it IMO. Great thinking!

klonos’s picture

We all realize that this issue here is about adding the druplicon in the installer (as the issue title clearly suggests), but be it for better or worse, compliance to the Seven Style Guide came into play and a lot of discussion and mockup work has been made in this issue. It would be unfair to simply dismiss it (and frankly a lot of tedious work to copy/paste all these comments to a separate issue for that matter). So, lets compromise and try to do both tasks by working in iterations. Shall we?

jbrown’s picture

When I post a patch for #161 tomorrow I will be creating a new issue specifically for it as this one is too long already.

Bojhan’s picture

I think we might be overreacting a bit. Its fine to explore designs, this might be a little scary - but we are now at the point where we move between diverging (exploring) and converging (choosing). This might feel a little scary, but crazy ideas are needed to find the best design - which often is a merger of several ideas. We have done this many times before, it is always a bit of a scary moment when we are choosing and something radical ideas drop by.

As I currently see it:

  1. We are on track for the small druplicon at the wizard steps. And we can get that moving into a patch.
  2. We are still exploring on where Druplicon might show up elsewhere, and lets just give it a few more tweaks before we decide (e.g. designing some of the ideas in #171, and some tweaks on #137-B as suggested in that discussion).

There is no reason to rush this, or to find a good compromise. We are working to make this installer beautiful, that is our goal.

If it takes a bit more discussion to get there, that should be fine (The UX-team will also discuss it in our UX-hour upcoming monday). With visual designs like this its often that there are a number of good ideas, and various people will like different ideas.

@jbrown Feel free to put up a patch, I advise it to do it in this issue. So we can slowly move towards implementation. The worst thing that can happen to good exploration and discussion, is for it to fragment.

chx’s picture

There seems to be a compromise forming especially with #169 the background and the little drops have committer approval.

rootwork’s picture

Agreed with #179, thanks Bojhan for summarizing this well.

I do agree with some of the comments above that it probably makes sense to keep this issue in scope -- which would mean converging on the Druplicon here, and creating a new issue for the rest of the Style Guide modifications (including the "drops") -- which I love and hope that it gets in -- to converge on the latter there.

I'm not a huge fan of the giant swirly Druplicon being the *only* manifestation of the Druplicon in the installer. But if there's push back against the other changes just because they're out of scope of this issue, then by all means let's create a new issue and hash it out there.

Also I just want to say thanks again to the excellent work being done by sphism, Bojhan, starchild, jbrown and others above. You all are doing the creative work that lets us all carp about it :)

chx’s picture

#181 in fact the small drops are agreed in and the Druplicon is being hashed out. That's what webchick endorsed and what Bojhan said too.

jbrown’s picture

Title: Add back the Druplicon in the installer » [META] Add back the Druplicon in the installer

I created a separate issue for adding the Druplicon as massive background: #2057383: Set the background on the installer to be a massive Druplicon watermark.

A separate issue should be created for the drop bullets also.

This page is far to long and heavy!

xjm’s picture

I actually find #2057383: Set the background on the installer to be a massive Druplicon watermark more consistent with the styleguide than the droplet bullet icons, which are a bit cutesy and clutter up the clean look IMO. But, I'm not a designer. :)

My practical concern would be the image size and mobile performance... but then I take time to read the comments above and see that's already been covered. :) 4K is not bad.

sphism’s picture

If anyone is interested in revising the druplicon logo and discussing it's place in drupal in 2013 and beyond, I'd love to hear your thoughts:

#2057767: [policy, no patch] Revise the Druplicon logo

chx’s picture

So after close to 200 comments we have managed to get a solution which is the least recognizable Druplicon possible (at least the droplets had a recognizable shape) and also it spawned another which wants to change the Druplicon. Well, the code is not Drupal anymore either so why would be the looks?

sphism’s picture

sphism’s picture

Issue summary: View changes

Updated issue summary.

dcrocks’s picture

While this overweight issue is still open, I would like to put forth my own #68 as addressing the original issue here. It adds a recognizable but unobtrusive druplicon to the install page. My view is that the droplets are not likely to be intuited by new or inexperienced users and adding them to every completed task overloads the simplicity of the install page.

Though the the giant head has gotten impetus behind it, I would simply ask who outside of the participants in this issue are going to recognize it for what it is.

starchild’s picture

The droplets are a conscious effort to introduce an unobtrusive and sleek reference to the Druplicon in the same vein the DrupalCon logos are sometimes designed. They don't just slap the Druplicon somewhere beside the name of the event and call it a day. They actually get creative with it and design around the idea of a droplet which nicely references the roots of the community (which is the whole point of having a mascot and consequently this very issue).

Therefore I wouldn't be so quick to dismiss a solution that has been explored the longest and has had the most favorable responses thus far.

As far as I can see most of the details have been agreed upon (#156). What remains is to decide on the actual shape of the droplet and a patch can be produced.

rootwork’s picture

Yeah, I'm not a big fan of having Druplicon as the bullet points themselves (the suggestion in #68), I think the water droplets are much nicer.

I *am* in favor of putting a recognizable Druplicon on the final "installation complete" screen, whether or not the water droplets happen and whether or not the giant Druplicon background happens. I think having a Druplicon on the final step wouldn't detract from the professionalism of the process, and would address both chx's original issue (have a Druplicon that people recognize) and give a nod to the Drupal community represented by the Druplicon.

For the record, having Druplicon on the final install step is in comment #71, idea 1, above.

yoroy’s picture

Some solid design explorations in here. Good to see some more designers in here trying to help us out solving this issue. As frustrating as these kinds of discussions at times can be, your design input is greatly appreciated. I think we can still elegantly design our way out of this.

I think the big background treatment looks promising.

But the drops as bullets look crappy and are a bad idea:

- It doesn't really fulfill the issue at hand as it doesn't add Druplicon back to these screens. That's the core of this issue and in that sense this idea is out of scope here.
- They add visual noise (=attention) to the wrong part of the screen
- They introduce another progress bar metaphor where we already have one, so that makes them redundant
- This kind of application of a identity element is the kind of treatment that every decent style guide forbids in its first pages. Sure, Druplicon is not a registered trademark so we're free to do it, but it's amateurish,
- As a design tactic it's similar to dotting your i's with little hearts. I think we can and should do better than that.

I think rootwork puts it well in #190.

The sequence of installer steps already add up to a cohesive design. As you can see from all the proposals, adding more elements breaks the clarity of the design. That's why the big background works well, it doesn't add anything to the white box in the middle.

Adding Druplicon to the final success screen is a very promising direction though.

"Congratulations, you've installed Drupal!" What better place for Druplicon to shine?

- It will get more attention as we can then put it center stage
- It's a little visual reward for succesfully installing Drupal
- It brightens up an otherwise bland (but psychologically important as you've made it to the end of this journy) screen.
- It relates Druplicon to success :-)

Adding a quick mockup to get the idea across. Would need fine tuning to balance things out of course.

sphism’s picture

+1 for having an actual Druplicon in the installer

Personally I wouldn't go for the 2004 Druplicon, but that's another issue ;)

ry5n’s picture

#191 Is a great idea. If we must have the Druplicon somewhere in the installer, this is the way to do it.

David_Rothstein’s picture

That makes a lot of sense to me also, but note the mockup in #70 [EDIT: #71] ("Idea 1") does the same thing with a smaller Druplicon.

We just have to make sure not to implement #318975: Remove confirmation page after installation also - otherwise we're back to square one :)

David_Rothstein’s picture

Oops, I meant #71, not #70.

sphism’s picture

#318975: Remove confirmation page after installation seems like a pretty good idea to me

joachim’s picture

+1 to 191.

> Personally I wouldn't go for the 2004 Druplicon, but that's another issue ;)

I can't help but feel that redesigning Druplicon itself should be a separate discussion. They're two separate questions: how do we put Druplicon in the installer? then: how do we redesign Druplicon (if at all)?

sphism’s picture

@joachim: yes, it's another issue, sorry, it was late last night when I posted that comment and didn't link to it, here you go

#2057767: [policy, no patch] Revise the Druplicon logo

jbrown’s picture

Issue summary: View changes

Add link to sub-issue.

jbrown’s picture

Issue summary: View changes

clarification

Dries’s picture

Assigned: Unassigned » LewisNyman

Lots of great ideas in this issue but it looks like it lost steam. In another issue, I put LewisNyman in charge of the style guide for Seven (in Drupal 8). The installer uses the Seven theme, so it makes sense for LewisNyman to make a decision on what direction to take. I'd love to see us make a decision as soon as possible so we can move on. Time is of the essence. :)

jbrown’s picture

@Dries has requested that #2057383: Set the background on the installer to be a massive Druplicon watermark should not be a separate issue.

There was a problem where if the web browser was too zoomed out / too large then too much of the Druplicon would be seen and this would spoil the effect. I have added a media query to the patch so the Druplicon is made even larger if the window is too big.

Some previous patches for this idea had included binary file addition / removal. This proved troublesome when the codebase changes as only Git could apply these and git apply (unlike patch) only works completely or not at all.

With the attached patch applied, druplicon-watermark.svg_.gz needs to be core/themes/seven/images/druplicon-watermark.svgz

core/themes/seven/images/noise-low.png can be deleted as it is not used anywhere else.

Note on my earlier screenshots from Firefox, the dialog box was at a fixed distance from the top. I think this looked much better. Also it now jumps around to a different position for each step as the dialog box changes height, which is distracting. A patch must have gone in to change this.

Regular zooming
Zoomed out

jbrown’s picture

Issue summary: View changes

typo

jbrown’s picture

Title: [META] Add back the Druplicon in the installer » Add back the Druplicon in the installer
klonos’s picture

...A patch must have gone in to change this.

Yep, it was #2032895: Follow-up use better technique for vertical centering

LewisNyman’s picture

Ok, it's important we get this issue moving again.

In my mind, here are the gates a proposed solution has to pass:

  • It must be recognisable as the Druplicon, anything that becomes so abstracted that it no longer resembles the Druplicon fails to solve this issue.
  • It has to stay within the scope of the issue, so we shouldn't be redesigning the installer or the Druplicon, at least not in this issue.
  • It can't be placed only in the confirmation page, because #318975: Remove confirmation page after installation will revert it.

I think we should continue exploring the background introduced in #161. The background gives us more room to experiment without affecting the rest of the UI and I think, with some more tweaking, we can make it pretty recognisable to current Drupal users without confusing new users.

rteijeiro’s picture

Assigned: LewisNyman » Unassigned

@Lewis I guess you mean #161 instead #191. Curiously the link points to the right place :)

BTW: +1 to #161

Homotechsual’s picture

Well this is a relatively simple issue which got very "Drupalled" out of proportion. One of the many reasons I LOVE this community, it's an example of people giving absolutely everything to an issue. Whilst it does, admittedly, complicate issues somewhat it's a beautiful manifestation of the passion and dedication of Drupal's designers, coders, implementers and advocates.

To stay on topic I like the idea of the background (#161) but I also agree with the points raised in #203 and other comments which remind us that the issue is about incorporating the Drupalicon into the installer. If the result isn't recognisable as the Drupalicon it's not solving this issue.

For those open to modifying the Drupalicon I agree that it's a logical step to bring the Drupal Community's branding icon into 2013 and keep it relevant in future years it's a separate issue and one which may impact this issue at a later stage, once the method of including the Drupalicon is determined it should be simple enough to swap it out for a new drupalicon assuming the new icon is a rework of the Drupalicon and not a complete redesign.

Just my $0.02

jbrown’s picture

@LewisNyman What do you need from the community to make a decision?

In #176 klonos says:

The background idea from #161 will satisfy old-dogs without disturbing newbies.

I think the background works well because it isn't entirely obvious it is the Druplicon. Making it "recognisable as the Druplicon" would spoil the effect.

I really like Bojan's bullet drops on the left hand side in #136.

Would these two style elements together be satisfactory?

Whenever you have successfully installed Drupal 8 and view the site for the first time you see the Druplicon as part of the Bartik theme. This would be similar to placing it on the (soon to be removed?) confirmation page.

LewisNyman’s picture

@Lewis I guess you mean #161 instead #191

Yep, it was a busy week last week! Corrected.

I think the background works well because it isn't entirely obvious it is the Druplicon. Making it "recognisable as the Druplicon" would spoil the effect.

I don't think they are exclusive, I think it's already pretty recognisable in #161. Let's go down that route.

jbrown’s picture

Okay - so we need a review of #200.

rootwork’s picture

#200 and #136, right? (Per @jbrown in #206) Or are we just confining this to the background now?

Also I hate to be the voice of dissent, but I think having a "recognizable Druplicon" was part of the original issue. Personally I think the background + droplets would look great, but I'm not sure it would be satisfactory to everyone who was a part of the discussion about having Druplicon visible in the installer.

dcrocks’s picture

I still think recognition of the background pattern as the druplicon is marginal at best except to those who have plowed thru this issue. If you know it is supposed to be there, then you will recognize it right away. If you don't, I don't know that anybody would actually pay any attention to it.

sphism’s picture

My 2 cents.

I'm not quite sure how we got to this position but we are planning to bring a product to market without the recognisable drupal 'icon', and without the branded Drupal wordmark.

That's no branding at all.

LewisNyman’s picture

That's no branding at all.

Branding is more than just icons and logos. Also #605710: Decide on if and if so, how to implement the Drupal wordmark in core

I still think recognition of the background pattern as the druplicon is marginal at best except to those who have plowed thru this issue.

Let's see if we can tweak #200 and see if that is still the case.

sphism’s picture

Deleted because it wasn't helpful and I'd only just woken up </grumpy>

sphism’s picture

Issue summary: View changes

Remove references to sub-issues.

LewisNyman’s picture

Status: Needs review » Needs work

The last submitted patch, 200: druplicon-installer-background.patch, failed testing.

mgifford’s picture

Risse’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll +Amsterdam2014
FileSize
106.29 KB
174.83 KB
1.48 KB

Rerolled the patch from #200. Looks good, I'd say!

Note that you need to download the SVG-file from #200, and rename it to core/themes/seven/images/druplicon-watermark.svgz

Small thing I noticed is that the Druplicon is not really that recognizable in smaller resolutions, like the 1280-version I uploaded.

mgifford’s picture

@Risse that can be incorporated into the patch, right? Usually images are brought in through git too.

Risse’s picture

FileSize
3.73 KB

Oh, sure, didn't know you could do that! Here's the revised patch.

mgifford’s picture

Makes it way easier to test somewhere like:
http://simplytest.me/project/drupal/8.0.x?patch[]=https://www.drupal.org...

Now I wonder if the background blue & the blue of the svg file can be the same. Or maybe make the background transparent? Just thinking because when I zoom out I can see the box.

Rare situation for sure, but..

alansaviolobo’s picture

tkoleary’s picture

Issue summary: View changes
tkoleary’s picture

rootwork’s picture

I'm sad that we lost the bullet-item drops from #136. @jbrown in #206 suggested having both (the revised background and the droplets) and I agree.

I don't have any argument against the background, I think it's nice. But on its own I think it's pretty subtle, and I didn't hear many voices against the idea of the droplets, so I agree with jbrown's proposal to have both. The droplets are subtle too, but a little less so -- it actually looks like pretty professional branding to me.

Also, I'm no longer able to apply the patch from #219 on simplytest.me against dev so it may need to be rerolled anyway.

LewisNyman’s picture

For clarity, I definitely discussed the bullet point droplets with Roy and Bojhan a long time ago. We agreed that they are the kind of distracting ornamentation that we try avoid in the Seven theme. We don't have bullet points in the current design, so we would only be adding them to find a way to insert the Druplicon. This doesn't fit with the Seven design principles.

We already have a strong background, that's why adding the Druplicon there makes sense.

markhalliwell’s picture

Status: Needs review » Postponed

This should probably be postponed until #2057767: [policy, no patch] Revise the Druplicon logo is finalized.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

apaderno’s picture

Version: 8.6.x-dev » 8.9.x-dev

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

saschaeggi’s picture

Gábor Hojtsy’s picture

Title: Add back the Druplicon in the installer » Use the Drupal software logo in the installer
Issue summary: View changes
Status: Postponed » Needs work
Parent issue: » #3134326: Adopt the 2020 (evergreen) Drupal logo in Drupal core
FileSize
418.97 KB

Since the 2014 postponement of this issue, a new Drupal software logo was introduced. See https://www.drupal.org/blog/new-drupal-brand-ready-for-drupal-9-launch

As per the logo usage guidelines formed alongside that, the Drupal software logo would be the appropriate item to include in the software. It is already included in the status report page, replacing the Drupal 8 specific drop: #3137414: Remove D8 branding from D9 status report. It is being applied to the favicon as well in #3178135: Change favicon to new Drupal logo. There was a policy drafted for the usage of the software logo in #3134326: Adopt the 2020 (evergreen) Drupal logo in Drupal core and it's inclusion in core despite it not being GPL licensed itself. This would align under that flow as well by adopting the Drupal software logo.

Updated issue summary and title.

quietone’s picture

Gábor Hojtsy’s picture

Claro redesign for the installer is being handled in #3085219: Installer is not very usable in Claro, I asked there if this would be in scope there or should stay as its own issue. Also closing #2035489: Replace imitated "Drupal" wordmark as duplicate of this.

Gábor Hojtsy’s picture

Also transferring credits from #2035489: Replace imitated "Drupal" wordmark.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.