German Language site design and logo — Draft

Question

Hallo again, it’s Katie – the Product Designer who has been working on your custom theme. Thank you all for your patience.

As mentioned in our first post – below you'll find the site design I came up with based on your original ideas.

Your site design

I know that our goals were to keep this site looking professional and clean, while still giving a nod to the German Language. I did a lot of research and tried out many ideas; I hope that you like the one I am sharing today.

I am very grateful for the extensive feedback provided by your community and made sure to take note of every comment you left. In addition to the feedback provided in the information-gathering post, here are two additional images that I was inspired by:

Colour scheme

I've included both palettes here – the main site, and the meta site.

For the main site, I wanted to focus on the colors that the 6 country flags have in common: red, gold, white and blue. I chose these colours while keeping in mind that we did not want to specifically reference Germany or any other individual country.

• Red is present in the flag of every country where German is a spoken language.
• Gold is in the German and Belgian flags, as well as the stars of the EU flag (while understanding that not all 6 countries are EU members).
• White is in the flags of Austria, Switzerland, and Luxembourg, plus Italy and Poland (where there are quite a few speakers).
• And multiple blues, in reference to the flags of Luxembourg and Liechtenstein.

Below, I have included one version with strong colours, and another version that is more muted; please let me know your preference on these options. I would also like to thank one of our awesome Community Managers for this palette idea and the reasoning behind it.

For the meta site, we will be using a greyscale version, of course. 😄 Note that there are two options – one version has filled-in letters, while the other has outlined letters. Please let me know your preference. Here is the colour palette I used there:

Page design

Here are two versions of the proposed page design for the main site; the first version uses a muted colour palette for the "Deutsche Sprache" text at the bottom of the page, while the second version uses bolder versions of that colour palette. (Click each thumbnail to view the full-size image.)

Also, here are two versions of the proposed page design for the meta site; in the first version, the "Deutsche Sprache" text at the bottom of the page is filled in, while it's outlined instead in the second version.

This is how the site's Questions page would look:

Logo

For the logo, I used the design made by Wrzlprmft (danke!):

I also included the translated German heading in the site banner, as requested in the information-gathering post:

404s, Errors, and Captchas

The first image here with Witwe Bolte will be used for the 404 page, while the remaining 3 images shown here are all contenders for the error page.

I like all of the options provided by Wrzlprmft (danke again), so please let me know which, if any, preference you may have. PMF’s comment mentions that these images are also available in colour, so that is an option as well.

The same thing applies to our captcha page, so please let me know which image you prefer we use there:

We hope you enjoy this design, but if something doesn’t feel right, now is your chance to share your feedback. This window for feedback will be open one week. We will then work to incorporate feedback as best as we can, finalize things on our end, and lastly, deliver the design to your site.

Answer 1

Logo

All of this comes with the caveat that I suggested the idea of the logo and have spent quite some time looking at a similar logo already.

• I think the logo works generally well without playing with colour (like my last suggestions).

• Some variants of the logo feel a bit crammed. Specifically the marked gap in the following is thinner than the lines of the logo:

  

  This will probably be particularly relevant for the favicon.

• The logo’s typography contrasts with the rest’s (site title and background letters), in particular:

  • rounded vs. square line caps
  • lowercase vs. all caps
  • “handdrawn” imperfections vs. strictly geometric

  I am leaning towards this being a good thing, as it creates just the right balance of formal and playful and creates a distinction between logo and text. However, I would really have to see the alternative(s) to form a more thorough opinion. I guess this all boils down to: Have you considered this? (And if the answer is, e.g.: “Yes, it didn’t work.”, I will trust you and say no more.)

Answer 2

Thank you everyone for the feedback provided thus far. Here are 3 more design proposals based on what we have discussed in this post.

1. Meta site design with all outlined letters, and none filled with colour.
2. Main site design with all outlined letters, and in a more muted state.
3. Main site design with the filled letters but also in a more muted state.

Please let me know your thoughts on these follow-up proposals. :)

Answer 3

Background letters

• I generally like them. They say language and not much more than that (which is good) while avoiding an overly minimal design.

• I am somewhat concerned that they distract once you scroll down sufficiently, but I would really need to see that in action to properly judge it. For this reason only, I would choose for the muted colour scheme. However, if distraction is indeed a problem, a much stronger muting may be required to fix it.

  I consulted somebody with an attention disorder and they said that the letters were extremely distracting because they are coloured, large, and text (as opposed to an image like Worldbuilding’s robot). The letters would scream for attention. They suggested some things that might help:

  • The outline version used for meta without any fill.
  • Muting the colours. (Coloured outlines without fill?)
  • Scrambling the position of the letters even more such that they overlap, such that the brain does not mistake the letters for text, i.e., information.

• Meta: I prefer the outline variant because it is more distinctive and fits the nature of meta, i.e., outlining the main site (also works in German: “umreißen”). However, I would go all the way and use outlines only (i.e., no grey fill), maybe even for the logo.

Answer 4

Here are the final 3 options for the logo, please let me know which one you feel best represents this community. As always, colours can be modified if you believe there is a better choice.

Once we have decided on a logo, this theme will begin to be implemented into code. I look forward to getting that out to you very soon!

Danke!

Answer 5

ist ein Herz 😘