Site Design Ideas (updated with mockup)

Question

Hi all. I'm Jin, and I'll be working on the designs for the Stack Exchange sites as they graduate from the beta phase. Each site will have its own unique theme that will reflect its topic. However, all sites will share quite a bit of common elements so they feel like they're part of the Stack Exchange family.

I've started brainstorming about the design for the TeX/LaTex site. I thought about going with a minimalist design like I did with the statistics site, but as I research deeper on the subject of TeX/LaTex, I feel a different design may be more appropriate.

According to Wiki entry

When the first volume of Knuth's The Art of Computer Programming was published in 1969, it was typeset using hot metal type set by a Monotype Corporation typecaster with a hot metal typesetting machine from the 19th century which produced a "good classic style" appreciated by Knuth.

The letters of the name are meant to represent the capital Greek letters tau, epsilon, and chi, as TeX is an abbreviation of τέχνη (ΤΕΧΝΗ – technē), Greek for both "art" and "craft", which is also the root word of technical.

I think that the overall design should give a "Good Classic Style" feel, while the content area is clean and easily readable. The more visually heavy sections would be in the header to offset the text heavy content section. Some visual elements I think that will convey the feel:

• Vintage paper texture
• Letter-pressed effects
• Serif typeface

I believe this look works well because it pays homage to ancient typesetting techniques that paved the way, and make this site stands out from the rest of the TeX/LaTex sites design wise.

As for the logo, I'm thinking about using curly brackets around the logo type, for example:

{TeX/LaTex}, and the favicon/Appple-touch icons would simply be a stylized "{ }".

Please let me know if you have any thoughts on the design direction I'm going with. I'm hoping to launch the final site very soon, so early grats!

Update: Design

Thank you for all the helpful suggestions. Here's the initial design. While it doesn't have all the site element and details, it should give you an idea of the over all look and feel.

click on image to see full resolution version.

For the logo typeface, I used Hoelfer Text. Charles was right about my original choice of Trajan being too thin for the "E." The serif for the main navigation links, section header text and question titles is Palatino(Georgia for fallback in CSS).

The header background image is a montage of various shapes and equations produced by TeX. (Fourier Transform, Euler's Identity to name a few). I'm using them very very faintly. I want people to know they're there, but not get in the way. I also think the faint coloring works well against the paper texture. The serif typefaces and white space provide the beauty, and the subtle geometric shapes signify precision.

The overall color palette is a warm one. I feel it works well with classic look.

The rest of the page design is pretty straight forward. It has much familiarity from the Beta Sketchy theme, so existing users don't have to relearn the UI.

What's not shown is the Question page. It will have the same "shell" as the homepage. The Question/Answer/Comment body text will be a sans-serif font. I'm thinking about Helvetica Neue with Tahoma for fall back.

Update 2: Question Page Design

I decided to go with Lucida for the sans-serif typeface choice instead of Helvetica in the previous Homepage mockup, with Tohama for fallback. As @lockstep pointed out, Helvetica is a bit overused, plus I feel Lucida mixes better with Palatino. I made the lines in the badge icons fainter, as Charles suggested. The goal for the Question page is to be clean and readable.

Please let me know what you think.

Answer 1

Jin, a very good design! I'm happy to see that. The letter-pressed effects are great and I like the warm colors. I'm just not so much happy seeing the red, yellow and blue colors on the left of a question. For instance, the yellow favourite symbol could be a bit warmer fitting to the paper-like background. The highlighted voting triangle could be filled with a darker color from the warm paper-like palette. It doesn't need to be red to be distinguishable from the not-filled voting symbol.

The rectangle badges look a bit boring to me. Some fancy ideas could be

• a lying book with the badge name on its spine, like a leather bound book with gold, silver or bronze decoration

• a calligraphy pen with the badge name, the tip color gold, silver or bronze

Or the upvoting and downvoting buttons could be a calligraphic pen tip pointing up or down. TeX deals also with beauty of fonts, so why not use a pen tip like seen in Charles' answer regarding Zapfino Ink.

Curly braces around the tags are a nice idea since they are for grouping in TeX. Similar with the logo, thus the logo {TeX} looks like a general tag for the complete site.

Regarding the header: I think there's too much math in the header. Perhaps it could indicate other uses like a nice scientific table (bootabs), a letter beginning (Dear ...) or a stock phrase hinting a book text like Once upon a time or ... and they all lived happily ever after.

Answer 2

Collection of possible header images

This post is CW, so feel free to add more.

• General resources
  • “Showcase of beautiful typography done in LaTeX?”
  • The TeX showcase
  • TeXample
• Chemistry
  • adapted from TeXample. Here is a pdf.
• Math
  • The Snake Lemma
• Physics
  • Something form the Maxwell equations, e.g. . Here is a pdf
• Philosophy
  • from here
• Text and fonts:
  • Once upon a time ... and they all lived happily ever after. (Maybe in Zapfino or a fraktur font?)
  • Tengwar: from the TeX showcase
  • Ligatures
  • Glyph metrics, boxes (not free, but for the idea: Utopia, Boxes

Answer 3

Hi Jin,

Good to meet you! I think we're all quite excited at the prospect of "graduating". I'm equally sure that you'll get lots of opinions on design since, as you saw, good design goes right to the heart of what TeX is about.

The first thing that springs to mind is the name and logo. We're down-playing the "LaTeX" in the title a bit. In brief, although the majority of the questions tend to be LaTeX-oriented, we definitely don't want to give the impression that LaTeX is the only TeX-extension allowed. So since LaTeX is the de facto default, it's important not to make it the de jure default as well as that could easily lead to this site being LaTeX-only and that is definitely not what we want.

So I would go for just {TeX} for the Logo (could the "TeX" be typeset correctly as well?).

I'd also like to say that I do like the idea of using the "special characters" as part of the design.

Anyway, just my first thoughts. I'm sure others will have more to say.

Answer 4

Collecting some ideas from an earlier thread, some of the key points that the look of the site should convey are: precision, quality and beauty.

I think we all would appreciate a style that, as you suggested, is clean and easily readable, with lots of white. People also suggested TikZ as a source of inspiration, in particular I would recommend to have a look at the TikZ Manual and the TeXample.net website.

A serif font for the logo, title, headings, etc. is a very good idea. But for the particular font used in the body of the site, people seemed to be keen on having a sans-serif font because it does tend to look better on screen, while serif fonts usually look better when printed on paper. I think that the “classic” think about TeX is not necessarily the use of serif fonts, but its obsession about the correct use of typography for clarity and ease of reading. There were suggestions about using Helvetica, but also concerns about the font (or decent alternatives) being available on most web browsers.

Finally, about the logo, most people seemed to like TeXnique, or something along those lines, to identify the site. What about having something like {TeX}nique or {TeXnique}? And indeed, please don't use LaTeX in the logo/title because we want the site to be open and welcoming to people using any format and not just LaTeX.

Personally, I also like the idea of letter-pressed effects in the title, headings.

Answer 5

For the curious with screens that fail to resolve the subtle color difference, here is what the header currently looks like after moving some sliders in Gimp to make things more visible. (Click for full size view.)

Most of the formulas seem to be typeset with Euler Math fonts.

Answer 6

Restricting my thoughts to fonts; I agree with Juan's remarks about logo and that the theme should reflect "precision, quality and beauty." Sorry for all the scrolling that the following requires.

I like the idea of "good classic style", and raced off to look at some of Hermann Zapf's efforts (Zapf worked with Knuth for a patch, on Knuth's maths fonts). Something like Zapfino Ink (rom http://www.stepinsidedesign.com/STEP/Article/28799/):

is attractive, and the swashes and flourishes are showy, but it makes me wonder if there is a danger that this kind of thing would make the site look somewhat antique and not being all that focussed on precision? This seems to be a danger with any of the more flowery fonts. Fitting the serif theme is the very modern Linotype Didot (from http://www.linotype.com/13354/linotypedidotroman-font.html):

Linotype Didot is somewhat reminiscent, to me at least, of Knuth's Computer Modern, but with the decorative elements being more bold where CM can be a bit fussy.

I think serif is probably alright, but might Zapf's not-very-serif Optima work? (From http://www.linotype.com/12540/optimaroman-font.html)

The other two points: "vintage paper texture" - it's a great idea, but I wonder about the antique association again. Maybe just paper texture would work with a more up-to-date look? I'm very happy with "letter pressed effects" - this emphasises that we care about text that are held in the hand.

Answer 7

I’m loving the sound of this. It seems to capture the essence of TeX very well indeed.

A few points:

• I think most people agree that the standard TeX fonts (Computer Modern …) aren’t the most elegant. On the other hand, the Showcase of beautiful typography done in LaTeX thread refers to some beautiful LaTeX documents that could be used for inspiration.

• About the title. There was a pretty strong consensus against “TeX, LaTeX and Friends” since that puts a special emphasis on LaTeX while unduly de-emphasizing similar tool sets that play an equal role.

• I think the tag line (if any) should be placed prominently, in particular if the site name is going to be a bit oblique. For example, I really love the site design of CrossValidated – but there’s no indication that this is a site about statistics! I had to look at the URL to see that.

• I really like Charles’ first suggestion of using the Zapfino font in the design, e.g. the logo (even though Charles himself has doubts). I believe using a Zapf font would be very fitting; not only is Hermann Zapf kind of the ultimate font designer, he also worked very closely with Knuth.

  The perceived danger that this would make the site look too antique, and not enough focused on precision could be mitigated by “resolving” the strokes into vector outlines or guide lines, like in this picture:

  

  Of course this is rather too specific and I’m not a designer. I just wanted to mention that I think a font like Zapfino could be made to work.

All in all, I’m very excited to see the final layout!

Answer 8

Comments on the current mockup:

1. I didn't know I'd gotten the Enthusiast badge!

2. I find the geometric shapes behind the {TeX} a bit crowded. It looks as though that triangle from texample is in there, but as it gets truncated and hidden behind the logo then I feel it gets a bit lost.

3. There's a little bit of inconsistency in the faint equations on that banner. The Fourier Series one uses italics but the others are typeset in upright shape. Most TeX output puts the mathematics in italic.

4. I'm definitely unhappy with the statement of the Fourier Series! Where did that come from?

But those are very minor quibbles. Overall, it looks very nice.