19
$\begingroup$

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. alt text

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) alt text

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.

alt 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.

$\endgroup$
4
  • 2
    $\begingroup$ 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". $\endgroup$
    – Robin Kothari
    Nov 30, 2010 at 14:32
  • 1
    $\begingroup$ 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? $\endgroup$
    – Janne H. Korhonen
    Nov 30, 2010 at 18:30
  • 1
    $\begingroup$ 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... $\endgroup$
    – jcolebrand
    Dec 1, 2010 at 1:21
  • $\begingroup$ 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") $\endgroup$
    – jcolebrand
    Dec 1, 2010 at 1:29

8 Answers 8

Reset to default
10
$\begingroup$

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?

$\endgroup$
5
  • 2
    $\begingroup$ Or something related to an interactive proof? $\endgroup$
    – Hsien-Chih Chang 張顯之
    Nov 29, 2010 at 10:47
  • 1
    $\begingroup$ 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? $\endgroup$
    – Anthony Labarre
    Nov 29, 2010 at 12:55
  • $\begingroup$ The ones from Wikipedia are great. $\endgroup$
    – Jin
    Nov 29, 2010 at 17:37
  • $\begingroup$ 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? ;-) $\endgroup$
    – Giorgio Camerani
    Nov 29, 2010 at 19:01
  • $\begingroup$ Yes it should ;-) $\endgroup$
    – Anthony Labarre
    Nov 30, 2010 at 8:41
6
$\begingroup$

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
$\endgroup$
6
  • $\begingroup$ @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. $\endgroup$
    – Jin
    Nov 29, 2010 at 7:19
  • $\begingroup$ yes. we did some publicity at a conference back in october: here's the discussion: meta.cstheory.stackexchange.com/questions/457/… $\endgroup$
    – Suresh Venkat
    Nov 29, 2010 at 7:34
  • 2
    $\begingroup$ 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. $\endgroup$
    – Jukka Suomela
    Nov 29, 2010 at 9:42
  • $\begingroup$ @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. $\endgroup$
    – Jin
    Nov 29, 2010 at 16:33
  • 2
    $\begingroup$ @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. $\endgroup$
    – András Salamon
    Nov 29, 2010 at 22:21
  • $\begingroup$ @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. $\endgroup$
    – Jin
    Nov 30, 2010 at 2:48
5
$\begingroup$

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:

$\endgroup$
9
  • 4
    $\begingroup$ Yes, Title-Case looks nicer than UPPER-CASE. $\endgroup$
    – Kaveh
    Nov 29, 2010 at 10:30
  • $\begingroup$ 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. $\endgroup$
    – Sadeq Dousti
    Nov 29, 2010 at 15:46
  • 2
    $\begingroup$ @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? $\endgroup$
    – Jin
    Nov 29, 2010 at 17:40
  • 3
    $\begingroup$ I never noticed it before, but the normal distribution for stats was a cool idea ! $\endgroup$
    – Suresh Venkat
    Nov 29, 2010 at 17:49
  • $\begingroup$ @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. $\endgroup$
    – Suresh Venkat
    Nov 29, 2010 at 17:51
  • 2
    $\begingroup$ 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? $\endgroup$
    – Karolina Sołtys
    Nov 29, 2010 at 19:55
  • $\begingroup$ By the nonexistent symbol \upsquigarrow I mean $\rightsquigarrow$ but poining upwards (I couldn't find the appropriate tex symbol). $\endgroup$
    – Karolina Sołtys
    Nov 29, 2010 at 20:01
  • $\begingroup$ 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. $\endgroup$
    – Janne H. Korhonen
    Nov 30, 2010 at 18:32
  • $\begingroup$ @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. $\endgroup$
    – Sadeq Dousti
    Nov 30, 2010 at 19:46
5
$\begingroup$

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:

alt text

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:

alt text

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$).

$\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$

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

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

NTM

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.

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

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.

Here are a few comments:

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.

$\endgroup$
4
  • 1
    $\begingroup$ 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? $\endgroup$
    – Jin
    Nov 29, 2010 at 17:45
  • $\begingroup$ @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. $\endgroup$
    – Tsuyoshi Ito
    Nov 30, 2010 at 3:47
  • 2
    $\begingroup$ For the size of a favicon, we could put only the state with "!" sign in, represent the problem-solving concept. $\endgroup$
    – Hsien-Chih Chang 張顯之
    Nov 30, 2010 at 5:36
  • $\begingroup$ @Hsien-Chih: Thanks, and I like your favicon idea. $\endgroup$
    – Tsuyoshi Ito
    Nov 30, 2010 at 12:10
3
$\begingroup$

What about this proposal for the captcha?

Are you a human being?

Sorry, I couldn't resist... ;-)

$\endgroup$
1
  • $\begingroup$ Maybe we can remove the right part of the picture and add a balloon to the robot saying "Hey, I'm a human being". $\endgroup$
    – Giorgio Camerani
    Nov 30, 2010 at 10:27
2
$\begingroup$

I like the look of the hand-drawn icons, of the slightly faded fonts used in links and the "yellow highlighter" effect when you hover on a link. I hope these features can be kept in the final design of the site.

Have we considered "theory of computing" instead of "theoretical computer science" as a title? It's shorter and so it would be more readable.

$\endgroup$
4
  • 2
    $\begingroup$ I guess "theory of computing" is far too narrow. $\endgroup$
    – Jukka Suomela
    Nov 29, 2010 at 23:05
  • $\begingroup$ I'm afraid the hand-drawn style is for Beta theme only, and it won't blend well with the new design. $\endgroup$
    – Jin
    Nov 30, 2010 at 7:31
  • $\begingroup$ @Jin: Will the "yellow highlighter" effect remain? It makes links very readable. $\endgroup$
    – Robin Kothari
    Nov 30, 2010 at 14:33
  • $\begingroup$ @Robin there will be highlight background color on menu item hover, and selected state. $\endgroup$
    – Jin
    Nov 30, 2010 at 15:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .