UPDATED: Site design for English Language Learners community

Question

UPDATE 22 Feb. 2016

Looking at your comments, it seems like we need to tweak a few things:

• Capitalize the word "Learners"
• The bookmark should start "inside" the books and not below
• A colored bookmark will be better

I chose red for the bookmark as it's widely used for those and it goes well with the color scheme.

---

UPDATE 15 Feb. 2016

First, thank you for your feedback. I really appreciate your involvement and hope we'll build something together that will work for this community.

A few people had concerns about the logo:

• "Language" should be fully spelled out
• The bookmark is a too big

Here is an updated version, I had to change the typography to be able to write "Language learners" without breaking the balance of the logo.

I believe this one works pretty well, better than the previous one. I'd like to keep the bookmark shape as it is: it's easily recognisable and balances the overall shape.

---

I'm Stéphane, a senior product designer at Stack Exchange. First, I wanted to announce that this site is now starting the process of moving out of beta to become a fully-graduated site!

Congratulations!

---

Graduation and Your Site Design

Graduation comes with a few perks. I have already begun work on your site's design, which will give you your own unique theme that reflects your topic and culture. This will help brand your site as unique, even while you share common elements with other sites that show you are part of a bigger Stack Exchange family.

Once the design goes up, you will receive a link in the footer of other sites in the network, along with the ability to migrate content to and from other sites — and the acclaim of a public launch that says, Congratulations, you finally made it!

---

Design Concept

As it has been brought in this meta post by the community, the visual identity should convey meaning and learning.

To me, when it comes to "meaning" and "learning", all comes down to the dictionary. That's one thing you have to read at some point (or refer to) when you learn a foreign language (and that's what I'm always doing since I'm not a native speaker :) ). There's simply no other way, that's the one thing everyone who's learning a new language has in common.

As a result, I wanted the visual design to:

• use a dictionary shape for the logo as long as it's not too simple/obvious
• use a repetitive pattern to reproduce how repetitive books look like when they're stored in a library (a globe and a chalkboard here)
• use light colors (like a book's paper)

---

Logo, Identity and home page

User interface elements

Favorite, vote arrows, accepted answer and badges

Page captcha

Concept: definition/meaning of "bot"

Page not found (error 404)

Concept: missing dictionary on a bookshelf

Error page (error 500)

Concept: No meaning / nonsense

---

We believe the design and branding will work very well for this community, it’s unique and capture the right mood. We’d love to hear your feedback, and if there are no major design changes, we’ll launch the new site design and graduate the site from Beta soon.

Thank you for for making this such a great community!

Answer 1

Answer 2

I really liked J.R.'s suggestion to make the bookmark lines thinner, so I mangled the logo a little to see what that might look like. Disclaimer: I'm an Engineer, not an artist.

(click for full size)

Regarding the bookmark - I think it might just be a matter of proportion. The book mark is too wide, or the dictionaries are too thin. If the books continue on outside the frame, they're far too thin to be dictionaries. If they don't, the bookmark covers almost the entire page, which is odd looking.

Maybe if it were a different proportion, and it went over the bottom edge of the dictionary it would be better. I added a color from the palette because it looked weird to me as an empty notch in the book. It needs someone to tweak it to add some style so it doesn't look like an Engineer drew it though :)

Answer 3

Let me start off with my favorite part: I really like the way the E looks like two books atop each other. Very clever! Very appropriate, too. I fell in love with that E as soon as I saw it.

That said, wasn't so keen on that sigma/W-looking thing dangling down underneath it. (Am I the only one having trouble figuring out what that is? It looks like a reptile tongue to me.)

I also agree with several comments left so far; I, too, hope we can find a way to spell out the word language, rather than using the shortened form lang.

The good news is, fixing the first problem can make room to fix the other!

One other alteration I'd like to propose is changing color of the globes and computers in the home page from that charcoal black to something closer to the blue background, to give it a more "subdued" look. (I think those globes can be a little distracting to the eye, and the overall design could be improved if they were a bit more subtle.)

Here's a proof-of-concept depiction of the design with my proposed changes incorporated:

I've left the globes in their original colors on the right, and in a more subdued color on the left. The final design would have them all the same color, of course.

The one other change I made was changing the font in the word learners. If you look carefully at the original, the space between the l and the e is noticeably smaller than the space between the e and the a, giving it an unpolished look. I'd like to see that fixed, especially since people from all over the world will be looking at it!

Overall, I think it's an excellent first cut, and I appreciate you soliciting feedback from the community. Thanks for your hard work on this!

Answer 4

This is the version @J.R. appended to my earlier one, in that they both use the book-E as the opening letter. I've moved it here so its merits can be discussed separately.

Answer 5

Here is my revised second draft. The changes I've made include:

• Making the outline of the bookmark a little thinner than the outline of dictionary binders
• Making the bookmark just a little bit narrower
• Raising the bookmark so that it's in (rather than under) the dictionaries
• Coloring the bookmark (following ColleenV's lead)
• Capitalizing the word "Learners"

I think this answers most of the concerns repeated by the community, yet retains the bulk of Stéphane's original design concepts.

Answer 6

All righty, so here are my personal thoughts on the updated version of the design :)

1. I love the E = stacked dictionaries. Super clever, and just subtle enough.
2. I much prefer the blue chalkboards/globes to the black ones. The blue looks very nice; the black is just to dark/busy in my opinion.
3. I actually like the W shaped bookmark, but it took me a second to figure out what it was. I don't know how this will actually look in the design, but I'd be interested in seeing what it looked like if the bookmark was either lined more thinly than the books, or solid gray. When I look at it, I see it as a part of the books, not as something "coming out" of it. Maybe this is just me?
4. Not super crazy about the shade of orange. I'd go with something redder (not christmassy, just less WOW, that sure is bright orange.)
5. LOVE the design overall! Even if no changes are made, I think we got a super classy design that is going to make our site even more amazing :) You are the best, thank you so much for working on this for us!!

P.S. I adore how the design looks on the notebook and the T-shirt!! If you take a look at the patches/stickers though, I think you'll see what I meant in #3 above. The E is centered, because it's the main focal point. And the bookmark is toward the bottom. But it still looks a bit off-centered to the eye, because the lining of the bookmark is just as thick as the E. It feels like part of the letter itself, not an accent. Hope that helps explain my thought a little better :)

Again, thank you so much for this! And I'll need about a zillion of those notebooks to pass out at book clubs to get people excited about ELL! I think that's one of the things the design is making me the most excited about: we're going to have a tangible way to show people how awesome our site is, and further convince to get them to come here. I definitely intend to start upping my recruiting once the swag gets in!!

Answer 7

Here's a coarse shrunken/thickened mash-up with the Letter-Based logos (throwing in "academics" because it's supposed to be book profiles):

The proposed logo could be drawn more cleanly than that, but I guess my question would be about how well it communicates. To me it doesn't look like books or a bookmark.

It's also a bit "rigid" for a site that's supposed to be more inviting than English Language and Usage. Seeing the two together like that would make me think they were the friendly site. :-P

Going on the obvious side I'd pull inspiration from perhaps the lined paper you learn to write on, stuff like this (image from Wikimedia Commons):

There are a lot of possible variations in terms of color and medium:

• with a white chalk E on a green chalkboard with yellow lines (or black chalkboard)
• straight-lined non-cursive E or more cursive-ish
• with basically any pen/paper/line colors (even the current grays)

But for the sake of conversation, while avoiding any downstream legal complications of deriving from non-free source imagery, here is the clip from the Wikimedia Commons lazily sized down. Added a sepia color scheme to set up some contrast with English SE's E and make it a little "heavier":

That's hacked clip art, not a "design". :-) Yet I'd say it starts making the juxtaposition tell a story. It would really be a more successful graphic if it can sit in that spot and visually communicate to reduce confusion between the site identities. So that's a train of thought I'd suggest.

But if the current design is pursued...then figuring out the small would probably be a good idea. Since a lot of people are going to see that. So if there are questions about the bookmark's position, or whether it should be orange or not, working in 64x64 or below might be a good place to answer that.

Answer 8

Here's my riff on JR's version. The line simulates the sliver of space the bookmark would create between the pages.

and here's J.R.'s reduction of the line length:

Answer 9

The letter E is the stumbling block on an otherwise nice layout and design. The two books logo with or without the bookmark doesn't work for me. How about something like this?

Looks modern, it reminds me of the letter e on a computer keyboard. Discard the white background, draw just the outline of the key with a little shading to give it some three dimensionality, and it could work. Unfortunately, I do not have an image software programme to try this out at home. But... the proposed E logo doesn't thrill me to bits. This "icon" might just work.

Remember, once the design/layout for ELL has been launched it will be very difficult to modify it in the future.

OR...

Why not play around with the unique letter E that bears a strong resemblance with the letter L?

Answer 10

I am probably tooooo late! But I think the logo with transparent background would look more appealing.

Here(rough work):

Answer 11

Another latecomer to the dance (as J.R. has put it in comments), but perhaps there is still time to update the tabs: "questions" "tags" "users" "badges" "unanswered" and "ask question" and the upvote/downvote arrows. I've noticed that some SE sites have pretty cool stuff in this area:

• Travel SE has a symbol of luggage tags for "tags"; two people, one with a hat for "users" etc. and upvote/downvote arrows are like direction signs

• Academia SE has a fountain pen tip for upvote/downvote

• Chemistry SE has a ball-and-stick molecule model for upvote/downvote

• Electrical engineering SE - tabs are wired together to resemble a part of the electrical circuit, and upvote/downvote arrows also have little wires coming out of them

• Arqade SE has the coolest thing of all - "ask question" is in the form of a spaceship and when you hover over it, jets actually flesh out of the ship

There are other examples, but you get the idea.

My question is: could we have something like this? I have to admit that I don't have the necessary skills to design it, nor do I have any enlighting ideas at the moment - except maybe, that the upvote/downvote arrows might somehow represent a book (dictionary) opened at a, say, 30 degrees angle. This is just a thought to be worked on...