# Design Ideas for TCS Site

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.

For my research on the design, I've been going through the type of questions asked on the site and your design ideas in the logo post.

I like the Turing Machine and DFA suggestions. I think they represent the concept of TCS very well. For the logo, I normally make its shape to fit within a square dimension; this way it can be easily made into a favicon/apple touch icon.

For the overall design, I believe a clean look would work well, with a few details that have a hint of "computery stuff."

Below is the design for the homepage. While it doesn't have all the site elements, it should give you a good idea of the overall look and feel.

(click to see full resolution version)

Update: Below is the modified version based on your feedback from the original. I changed the logo to the DFA concept Suresh suggested. I've also updated the question title text from Courier to Palatino. I do think it will look good with the math formula text.

As you can see, for the title header I'm using the Turing Machine concept, and "Σ" as the logo. I'm using a faint water mark of a FSM in the background for pure decorative purpose.

The body section is basically the same as the Beta Sketchy theme structure-wise. The focus here is on readability.

Let me know your thoughts. I'm aiming to get the site launched early this week. So early congrats from me!

P.S. I need ideas for site's 404/captcha/error page images. Feel free to post or link any images you think that'd be appropriate.

• Love the fonts in version 2. Now that the logo takes up the width of 2 letters, it does look a bit odd in the middle of the words "Theoretical" and "Computer". – Robin Kothari Nov 30 '10 at 14:32
• The DFA logo in the second version sort of looks out of place, with it being two characters wide and visually quite different from the rest of the theme. I'd actually prefer the theme without the current DFA symbol. Possibly have it as a part of the background watermark or something? – Janne H. Korhonen Nov 30 '10 at 18:30
• I prefer the use of the sigma, but like it as the scanning port somehow on the Turing tape ... almost like a pointer mixed with a clip? Additionally, on the votes, I think a fixed-width font would be better there, but that's just me... – jcolebrand Dec 1 '10 at 1:21
• here's something like what I mean, but I'm not anything like as good as you are, I just was showcasing the concept of the Sigma as a encapsulating or pointing component. If you can do something with it, great, I would love to see it, and if not, well ... i.imgur.com/9eHKv.png ... (I'm working on the principle of "If one person is thinking it, odds are pretty good more than one person is, just nobody is brave enough to speak up") – jcolebrand Dec 1 '10 at 1:29

For captcha, I think it would be natural to try to add a reference to the Turing test.

But how to do it in a visual manner?

Could we perhaps use a part of the title page of Turing's 1950 article?

• Or something related to an interactive proof? – Hsien-Chih Chang 張顯之 Nov 29 '10 at 10:47
• Jukka: Great idea, and I think the pictures in the Wikipedia article are quite appropriate. Or maybe a computer whose screen displays/contains a human brain? – Anthony Labarre Nov 29 '10 at 12:55
• The ones from Wikipedia are great. – Jin Nov 29 '10 at 17:37
• Cool idea, I totally agree. @Anthony: Those pictures from Wikipedia are good, but maybe too stylized IMHO. Also, in our case shouldn't C be a computer rather than a human? ;-) – Giorgio Camerani Nov 29 '10 at 19:01
• Yes it should ;-) – Anthony Labarre Nov 30 '10 at 8:41

First of all, thanks ! It's a nice design and it takes a heck of a lot of work to design. Some suggestions (and I'm a lousy graphic designer, so ...:))

• We've used the DFA with two states in other publicity material, and here's an example of what we used. People quite liked the logo, and I'm wondering if there's any way of weaving it into the site design.
• I was wondering about the choice of font (courier) for the body text. We often have math in the post titles, and it might clash. In that respect, I like the font used for math.stackexchange.com as well as for tex.stackexchange.com
• @suresh I wasn't aware the DFA concept has been used for publicity material already. I'll tweak the design to work it in. Good point about the question title font. I can change it to a serif font. – Jin Nov 29 '10 at 7:19
• yes. we did some publicity at a conference back in october: here's the discussion: meta.cstheory.stackexchange.com/questions/457/… – Suresh Venkat Nov 29 '10 at 7:34
• Yes, it would be good to check that the design looks good when you apply it to posts that have some inline math in question title, body, and comments. – Jukka Suomela Nov 29 '10 at 9:42
• @Jukka I originally planned to use Courier for the question title only. I used Firebug to test it out on the live site. But I don't think the front page questions at the time had any LaTex code in it. But as Suresh suggested, I can go with a serif font like the one used on Math/Tex site. – Jin Nov 29 '10 at 16:33
• @Jin: I agree with Suresh, Courier with formulas is not a good match. Many of us would see Don Knuth as an archetype of a theoretical computer scientist, so perhaps a Computer Modern-like typeface would work, as was originally requested by the TeX folks? Otherwise I really like Linux Biolinum, Linux Libertine, or DejaVu (which is what I am personally going to continue to override page-specified fonts with). If we really, really must adhere to 1994-era font restrictions, then I like the TeX site choice of Lucida. – András Salamon Nov 29 '10 at 22:21
• @András I can use the same font combo as Tex's site. It's one of my favorites. Palatino for question header and Lucida for body text. They both are web safe fonts too. I try not to use @font-face too much right now because due to hinting support on different OSes, the results may not good for non default fonts. – Jin Nov 30 '10 at 2:48

## 404 page

For the 404 page, how about a DFA whose final state is a state that doesn't exist. Or maybe a tree (like a search tree), where the node we have reached is non-existent.

What I mean is something like this:

The idea being that the state marked "??" is where the user is right now, and it's not a valid state somehow.

## Up and down arrows

For the up and down arrows for voting, instead of using the usual upward facing triangle and downward facing triangle, we could use a Boolean AND and OR gate. An AND gate is usually depicted as a circle with the wedge ($\wedge$) sign inside it, and an OR gate is usually a circle with a vee ($\vee$) inside. A rough drawing of what I'm suggesting:

The left side shows the arrows by default. The right shows how they would appear after being clicked.

## Logo

As pointed out by Tsuyoshi, while $\Sigma$ does appear very frequently in TCS, it's not restricted to TCS alone. However, a small modification of $\Sigma$ is $\Sigma^*$, (Sigma with a star in the exponent). I have only seen this used in TCS (to denote the set of all finite strings over the alphabet $\Sigma$).

## Miscellaneous

These are some miscellaneous symbols/images I associate with theoretical computer science. If you need a small image of something related to TCS, you could use one of these.

$\{0,1\}$

$\Sigma^*$

$F_2$

$3SAT$

$O(n \log n)$

$P \stackrel{?}{=} NP$

• Nice job, Robin !! – Suresh Venkat Nov 30 '10 at 4:52
• I like the arrows. – Jin Nov 30 '10 at 5:40
• The arrows are a great idea! – Anthony Labarre Nov 30 '10 at 8:42
• +1 on the arrows – jcolebrand Dec 1 '10 at 1:17

Thanks a lot Jin! I really appreciate the design. I wanted to make one aesthetic suggestion, though: I think the title "THEORETICAL COMPUTER SCIENCE" can be made more appealing by using the Title-Case instead of UPPER-CASE: "Theoretical Computer Science". A Turing tape does not necessarily hold upper-case symbols, right?

One more suggestion: In computer science, there's a notion of oracles. Informally, they are functions that "know" the answer to some specified question, and can compute and return it in one step. I think this concept can be used in the design; specifically when an expert (the oracle) answers a question. Specifically, I like the idea with up-voting/down-voting a question/answer. One can imagine the oracle concept replacing the "pen tips" in the TeX design:

• Yes, Title-Case looks nicer than UPPER-CASE. – Kaveh Nov 29 '10 at 10:30
• Some idea which I didn't dare to put in the answer (since it seems too funny). I'm dreaming of two different oracles for up-vote and down-vote symbols: An angel oracle with a ring above her head (for up-vote), and a devil oracle with a trident (for down-vote). The oracles can be drawn over the right and left shoulders of a computer (or Turing machine), respectively. – M.S. Dousti Nov 29 '10 at 15:46
• @Sadeq for common graphical elements on SE sites such as voting arrows, favorite stars, comment arrows etc I tend to keep them simple. I find overly elaborated treatment can be confusing. For TeX and Stats sites, I used pen tip and normal dist curves so they fit the theme of the site, and still simple enough to keep their meaning. Is there something I can do for TCS? – Jin Nov 29 '10 at 17:40
• I never noticed it before, but the normal distribution for stats was a cool idea ! – Suresh Venkat Nov 29 '10 at 17:49
• @Jin one idea (admittedly not very good) would to have a circle with an arrow that either points up or down, to capture the picture of a node in a directed graph. – Suresh Venkat Nov 29 '10 at 17:51
• Maybe we could use symbols that are sometimes used for denoting that a Turing machine loops ($\nearrow$ or $\upsquigarrow$) and halts ($\underline{\downarrow}$) for up- and down-voting? – Karolina Sołtys Nov 29 '10 at 19:55
• By the nonexistent symbol \upsquigarrow I mean $\rightsquigarrow$ but poining upwards (I couldn't find the appropriate tex symbol). – Karolina Sołtys Nov 29 '10 at 20:01
• I actually feel that UPPER-CASE title captures the idea of Turing Machine tape better than the Title-Case one, though the latter is maybe a bit nicer to read. – Janne H. Korhonen Nov 30 '10 at 18:32
• @Janne: Most textbooks chose to use UPPER-CASE letters as the alphabet of Turing machines. In that regard, you are right. However, this is a matter of convenience, and as I said, "A Turing tape does not necessarily hold upper-case symbols." So, I offered not to sacrifice the readability of the title for the convenience adopted by some textbooks. – M.S. Dousti Nov 30 '10 at 19:46

For 404/error message, could we try something involve a nondeterministic search:

In fact the page is founded/the command is succeed. Unfortunately, this is a nondeterministic search/operation and you're in a rejecting branch.

I'm not a native English speaker, so please modify the sentence and/or the concept to make it better.

• I like the figure, but I am afraid that the text is too difficult to understand, not because of English. – Tsuyoshi Ito Nov 30 '10 at 11:52
• Or just simply "Rejected. Try another path."? – Hsien-Chih Chang 張顯之 Nov 30 '10 at 12:04

Update: I like the design revision 2 very much. Thank you, Jin!

Edit: Below is my comments on revision 1.

Thank you for the interesting design. I like this modern look.

### Logo

To be honest, I do not think the uppercase sigma is ideal as a logo. The uppercase sigma is strongly related to discrete mathematics (because the symbol is used for summation), and it is true that theoretical computer science uses discrete mathematics a lot, but theoretical computer science is not the same as discrete mathematics.

However, without a better alternative, the uppercase sigma is an acceptable compromise.

I like the DFA idea as is used in Suresh’s publicity materials, but it will not be recognizable in a 16×16-pixel favicon.

### Typewriter font

I like the use of typewriter font in the website title written on a tape of a Turing machine. On the other hand, as Suresh said, I am worried about the use of typewriter font in question titles, too, but for a different reason. Some of the question titles are long, and typewriter font takes too much width.

I do not think that a mix of two fonts is bad by itself. I am not sure if we want to use the same roman font in both question titles and question bodies just because they can contain MathJax math. In my (uneducated) opinion, question bodies are probably better in a roman font but question titles can be sans-serif. Edit: I removed the last sentence; see my reply to Jin in a comment.

• I like to fix serif/sans-serif fonts. For example on tex.stackexchange.com the question titles are in Palatino while the body text is Lucida. For the TCS site, my idea was to give it a more modern look than the Math/Tex sites. Serif heavy usage doesn't contribute to that look. Maybe we can go with all sans-serif font? – Jin Nov 29 '10 at 17:45
• @Jin: Thank you for the reply. Looking at the TeX site, I do not see anything wrong about using sans-serif in question bodies. And I agree that heavy use of serif font will not give modern look. Therefore let me take back my words. I guess that I was simply biased toward the existing design of math.stackexchange.com. – Tsuyoshi Ito Nov 30 '10 at 3:47
• For the size of a favicon, we could put only the state with "!" sign in, represent the problem-solving concept. – Hsien-Chih Chang 張顯之 Nov 30 '10 at 5:36
• @Hsien-Chih: Thanks, and I like your favicon idea. – Tsuyoshi Ito Nov 30 '10 at 12:10