French Language site design and logo — Draft

Question

Re-bonjour, it’s Katie – the Product Designer who has been working on your custom theme. Merci encore pour votre patience.

As mentioned in our first post – below you'll find the site design I came up with based on your original ideas. (You can click the image thumbnails to view the full-size images.)

Your site design

I know that our goals were to keep this site looking professional and classic, while still giving a nod to the French Language. I did a lot of research and tried out many ideas – the best of which will be shared with you today.

Option 1: I included both palettes here – the main site, and the meta site.

Proposed colour palette for the main French Language Stack Exchange site: navy blue (#002654), dark blue (#294A7D), cobalt blue (#003DA5), light grey (#F8F8F9), and gold (#C99F68).

Proposed colour palette for the meta French Language Stack Exchange site, incorporating 4 colors at 20% opacity: black (#212121), dark grey (#44494D), light grey (#BBC0C4) and the lightest grey (#F8F8F9).

Option 2: I included both palettes here – the main site, and the meta site.

Proposed colour palette for the main French Language Stack Exchange site: light beige (#F4F1EA), black at full and 20% opacity (#212121), dark teal (#395159), light grey (#F8F8F9), and gold (#C99F68).

Proposed colour palette for the meta French Language Stack Exchange site: black at both full and 20% capacity (#212121), and dark grey (#76808A).

Option 3: I included both palettes here – the main site, and the meta site.

Proposed colour palette for the main French Language Stack Exchange site: turquoise (#00A9DD), black (#212121), yellow (#FFD202), light red (#F29999), light green (#C5DB6F) and gold (#C99F68).

Proposed colour palette for the meta French Language Stack Exchange site: black at both full and 20% capacity (#212121), dark grey (#858686), darker grey (#7D7D7D), light grey (#BBC0C4) and a lighter grey (#E4E6E8).

My inspiration

Here are some of the photos I used for inspiration on the various design ideas I tried. I was inspired by educational books on the French language, as well as the logo for the Association des francophones du Nunavut. I also drew inspiration from vintage Yves Saint Laurent runways and the infamous Mondrian dresses.

Logo

Here is the proposed site logo. I was inspired by the book cover above with the leaves, and chose colours that are not specific to any country. The font is Superclarendon. The blue, white, and gold logo is for the main site, while the black, grey, and white logo is for the meta site.

Header typography

The header shown above uses the Libre Bodoni font; however, I also tried out 3 art nouveau fonts as well, as this art style is a nod to French (albeit, France) history. If any of these stand out to you, please let me know which one.

Voting buttons

This portion of the design is fully optional, but is included as it was previously suggested in meta posts around this topic.

Option 1: Guillemets

Option 2: Tour Eiffel

Option 3: Keep standard voting buttons

---

We hope you enjoy one of these designs, but if something doesn’t feel right, now is your chance to share your feedback. We would especially like to hear which options you prefer for the site design, header typography, and voting buttons – as well as any other feedback you have about the proposed designs.

This window for feedback will be open for 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

Before all, I would like to thank you for your work! It is really nice to see that FSE is about to have its own visual identity.

So here is my personal opinion:

Site identity

Personally, my favourite one is the first theme (navy blue, dark blue etc). I think these kinds of blue convey a "studying" vibe, and blue is the colour (with black) that I would naturally associate with reading and writing.

Logo

I love it! Nothing to add, and the original chosen typo is also my favourite one.

Upvotes

I think the guillemets are the option that make the most sense, as it is a specificity of French language. To be honest, the Eiffel Tower comes to me as... kind of kitsch. This is not a website about tourism in Paris, so it really feels out of place.

However, I believe they would look better and also integrate better with the site logo if they were designed to look close to actual guillemets using a book typo, as was suggested in the 2011 discussion:

I find the ones from the proposal too thick, and lacking curves. But that is my humble opinion. :)

Thanks again for your work!

Answer 2

Salut French Language Meta, merci encore pour vos retours.

Unfortunately, I have learned that we are no longer able to modify the voting buttons. You can see more in this post under the Keep theming as it is today section.

The theme that received the highest amount of praise was the 1st theme with the blue palette. The logo and header font will also remain unchanged as they were also well-received.

This theme will now start being implemented into code and will be delivered to you in the near future.

Thank you again for taking the time to share your opinions, and I am so happy to deliver a custom theme to your community.

Belle journée.

Answer 3

Nice theme, thanks!

The Eiffel Tower represent more Paris than the French language but if the idea is kept, I'm afraid the draft shapes do not look that much to the real thing but more to a scandinavian capital A-Ring: "Å".

Here is an attempt to get something closer:

Otherwise, the guillemets would be nicer than the standard buttons.

Answer 4

Beaucoup de travail ! Merci bien.

The blue palette looks calm and studious, not unlike blue washable/bleu effaçable ink in fountain pens. I almost expect to see lined paper like a cahier Clairefontaine ou cahier ligne Seyès. I noticed that you managed to avoid French Blue while keeping that close by. Chapeau.

There is some dramatic irony with the coronne triomphale right as Latin.SE is on the cusp of their own design. For me that invokes something much more Greco Roman, le laurier d'Apollon. Is there an alternative? The color and typography work well.

I did not imagine that the guillemets would look like so much like chevron, which while not not French, does not look quite so much like the punctuation to me but more like a uniform decoration; maybe it is a font or kerning number? I agree with @Reyedy's linked suggestion and prefer that over the Eiffel Tower.

Also reiterating that while Composition with Red, Blue, and Yellow was by a Dutch cubist who did spend some time as a great influence in Paris, it evokes something less academic or linguistics for a French language site to me. I find the site identity more connected to literature and writing related artwork.

As always, just my deux centimes. Thank you for everything you've put into this for us!

---

At the time of this writing not quite 100 views are showing on this meta question. The last information gathering question had more than double the participation. Again to emphasize our stats, according to our 2020 election, we might see 10% participation.

Therefore the site design likely comes down to the very few active users seeing this post within one week this summer* , and this is not something to brag about. If there is any site promotion out there, this month is the time. Let's get more shout outs in chat and make this meta Q a hotter in-network question. The last questionnaire about our site design hit double digits on votes on the question and some answers. The absolute value of negative votes on that surpassed what we have now.

If there is a different way to participate other than discussion, let's figure it out. I for one commented on the first round but then deleted some. There is more than one variable at stake in each answer. Does that merit a separate question or separate answers?

(*your season may vary)

Answer 5

Site design:

I really like the first option, it is clean and welcoming. To me, as a french binational living in france, this theme feels inherently french. In contrast, a beige theme makes me want to close the internet page because it reminds me of cluttered internet pages from quite a few years ago. The third option is not generic enough, it feels as if we're targeting a particular era and excludes the rest.

Logo :

The logo is great, and the "libre bodony" font is a great fit, no need to add serifs.

Upvote buttons :

The idea of guillemets is a perfect fit, please keep them grey or black. I'm against using the eiffel tower, because to me it represents Paris, and Paris is not France (even less the french language). Why not use one of the national symbols instead, like the cockrel, the red béret, marianne, or even a baguette?

Answer 6

[EN]
I think you did a nice job, thank you! I'm not very representative of people in general but I'll provide my first impressions.

I think I prefer the first and last theme; I'm very partial to anything that comes close to periwinkle blue, like me ma. But having something that has that pastel/neon-ish blue/green is a treat for me; would the black lines in the 3rd theme still be visible with the Stack Exchange Dark Mode tampermonkey userscript (I only use dark mode when I can, that white is too much for my eyes).

And I'd really like those Eiffel tower¹ vote buttons, possibly along the lines of the feedback provided in another answer. The vertical guillemets are to me too reminiscent of what I would expect on a military dress (1,2,3), in fact I didn't think there were guillemets until I read they were².

I like Libre Bodoni. I also like the last two art nouveau fonts, but I don't like the fact that in the second one, the curve of the F intersects with the foot of the E, so I prefer the last one. Maybe it evokes Mucha or Grasset for me. These fonts have lots of personality, but not sure they match Superclarendon as well as Libre Bodoni. I'll think about it and may update this comment.

I don't have anything special to say about the logo, it's easy on the eye and is reminiscent of the olive branch, and maybe the book design was inspired by reference to the habit vert; as I'm a native speaker but not from France, I'm curious how French nationals perceive it.

Looking forward to reading the feedback from many other users.

---

_{¹ A concern could be raised about using the Eiffel tower "upside down". It's just a mirror effect to me, I mean if the Eiffel tower makes a shadow in the street or on water and you're afar, that reflection or shadow will be upside down. Furthermore, I would argue this is not the same thing as flying a flag upside down, like Canada's flag with the maple leaf or something like a cross, or the star of David, because those have purported identifiable meanings and associations. Here it's just vertical symmetry. Although I am not from France, the Eiffel tower is a symbol very much associated with Paris (the capital of France) and the French language by association, both for nationals I would expect as well as for foreigners. I very much like the idea of interacting with this symbol and I personally like its visual impact with the theme.}

_{² To each his own, but I prefer a symbol that is part of the visual of the Ville Lumière, and our language comes from France and nowhere else, to the military ranks of sailors or what not, the vertical chevrons simply not being quotation marks. In the end it's just a detail.}

---

[FR]
Je pense que vous avez fait du bon travail, merci ! Je ne suis pas très représentatif des gens en général mais je vais donner mes premières impressions.

Je pense que je préfère le premier et le dernier thème ; je suis très sensible à tout ce qui se rapproche du bleu periwinkle, like me ma. Les lignes noires du troisième thème seraient-elles encore visibles avec le script utilisateur Stack Exchange Dark Mode (je n'utilise que le mode si possible, le blanc est trop pour mes yeux).

Et j'aimerais vraiment ces boutons de vote de la tour Eiffel, peut-être dans le sens des commentaires fournis dans une autre réponse. Les guillemets verticaux me rappellent trop les galons militaires (1,2,3), en fait je ne pensais pas qu'il s'agissait de guillemets jusqu'à ce que je lise qu'ils en étaient².

J'aime le Libre Bodoni. J'aime aussi les deux dernières polices art nouveau, mais je n'aime pas le fait que dans la deuxième, la courbe du F croise le pied du E, donc je préfère la dernière. Elle évoque peut-être pour moi Mucha ou Grasset. Ces polices ont beaucoup de personnalité, mais je ne suis pas sûr qu'elles se marient aussi bien à Superclarendon que Libre Bodoni. Je vais y réfléchir et je mettrai peut-être à jour ce commentaire.

Je n'ai rien à dire de spécial sur le logo, il est agréable et pas fatigant à regarder et rappelle le rameau d'olivier, et peut-être que le design du livre a été inspiré par la référence à l'habit vert ; comme je suis de langue maternelle française mais pas originaire de France, je suis curieux de savoir comment les Français le perçoivent.

J'ai hâte de lire les réactions de nombreux autres utilisateurs.

---

_{¹ On pourrait s'inquiéter de l'utilisation de la tour Eiffel "à l'envers". Pour moi, c'est juste un effet de miroir, je veux dire que si la tour Eiffel fait une ombre dans la rue ou sur l'eau et qu'on est éloigné, ce reflet ou cette ombre sera à l'envers. De plus, je dirais que ce n'est pas la même chose que de brandir un drapeau à l'envers, comme le drapeau canadien avec la feuille d'érable ou quelque chose comme une croix, ou l'étoile de David, parce que ceux-ci ont des significations et des associations identifiables présumées. Ici, il s'agit simplement de symétrie verticale. Bien que je ne sois pas Français, la tour Eiffel est un symbole très fortement associé à Paris (la capitale de la France) et à la langue française par association, tant pour les citoyens de la République que pour les étrangers. J'aime beaucoup l'idée d'interagir avec ce symbole et j'aime personnellement son impact visuel sur le thème.}

_{² À chacun son opinion mais je préfère un symbole qui fait partie du visuel de la Ville Lumière, et notre langue vient de France et pas d'ailleurs, aux grades militaires de matelots, les chevrons verticaux n'étant tout simplement pas des guillemets. Ça reste un détail.}

---

I've created a mock-up to help me think along the lines of my preferences and from my understanding of your explanation of how the pieces would fit together. I truly apologize for the lack of professional quality here as I'm not a graphic designer. Still, I find it really nice!/ J'ai créé une maquette pour m'aider à réfléchir en fonction de mes préférences et de ce que j'ai compris des explications sur la façon dont les composantes s'intègrent. Je m'excuse sincèrement pour le manque de qualité professionnelle, je ne suis pas infographiste. Je trouve que c'est quand même bien beau !

Après réflexion, je préfère l'option 3 (à gauche ici) ; c'est pour moi l'option la plus moderne, qui a le plus de personalité et d'identité, avec un variété de couleurs et des composantes géométriques. En prime l'approche diffère diamétralement de ce qu'on trouve sur ELU. Avec le logo et le bleu en bannière, la police au final n'est pas déterminante pour moi./ After thinking about it, I prefer option 3 (on the left here); it is for me the most modern option, which has the most personality and identity, with a variety of colors and geometric components. As a bonus it greatly differs from ELU. With the logo and the blue color in the top banner, the font won't be a major factor for me.