53

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.

Thanks for the brainstorming session you had a while back. It helped me a great deal.

As I said in the other thread:

To me, science fiction and fantasy novels rely on readers' own imaginations to fill in the gap when it comes to visuals. For that reason, I don't want to use graphics that are too explicit.

During my design process, I've looked at many science fiction and fantasy book cover designs. I want our site design to reflect both genres. At the same time, I don't want the design to be overly cliché. So no LCARS UI or dragons :)

For the sci-fi aspect, I believe a planet-scape imagery works well, and for the fantasy side a rune circle will provide a magical feel.

As with all the Stack Exchange site designs, my three goals are:

  • The Design should reflect the site topic, and is relatable by the target audience.

  • The Design shouldn't get in the way of content, it should serve as pleasant background noise.

  • The design should provide the SE community a unique branding.

Here are the mockups for the homepage and the single question view page. You can click on to view the full resolution versions. They do not have all the site elements, but they should give you a good idea of the overall look and feel.

Sci-Fi Fantasy Homepage

Sci-Fi Fantasy Question

The logo for the site is the rune circle around the female warrior's silhouette. It's not actually in the logo type "Science Fiction + Fantasy." I feel this placement sets the mood better in the header image. Its design is inspired by a promotional t-shirt I created for the NYC Comiccon couple of months ago:

Sci-Fi Fantasy NYCC 2011 shirt

I believe this design works well for our site. It makes this community stand out from the rest of the Sci-fi/Fantasy sites out there, but at the same time it still resembles the Stack Exchange branding.

Please let me know what you think. If there are no major design changes, I'm aiming to launch the new design next week. An early congrats from me!

14
  • 16
    I think the design looks pretty cool.
    – Mark Rogers
    Commented Dec 8, 2011 at 1:11
  • 5
    one only thing, like tony mayer said "I can barely see the StackExchange menu".
    – DavRob60
    Commented Dec 8, 2011 at 17:28
  • @DavRob60 I'll be sure to tweak all the contrast issues when I'm doing the css conversion.
    – Jin
    Commented Dec 8, 2011 at 17:37
  • 5
    Will all questions have 42 upvotes under the new design? :)
    – Bill the Lizard
    Commented Dec 9, 2011 at 3:12
  • 2
    Honestly, the only thing I don't like is the skulls in the logo. I think it makes it too depressing. I like the Runes and the half moons, but the skulls just make me think of Resistance 3 or something.
    – OghmaOsiris
    Commented Dec 9, 2011 at 5:04
  • Initial reaction is that it looks good. But one question: what is the text font being used?
    – Richard
    Commented Dec 9, 2011 at 7:44
  • I see the Twitter avatar has changed already!
    – Tony Meyer
    Commented Dec 9, 2011 at 10:16
  • @Richard The "scifi" font is Oribtron and the Question title/body text is Varela Round
    – Jin
    Commented Dec 9, 2011 at 14:02
  • @BilltheLizard yes.
    – Jin
    Commented Dec 9, 2011 at 15:56
  • @Jim Thanks – that explains my non-recognition :-)
    – Richard
    Commented Dec 10, 2011 at 7:54
  • 2
    Does anyone else feel like the word Fantasy doesn't really fit in the header stylistically? To me the typeface does not denote the same type of fantasy as the header image, so the word just feels sort of... like it's been plunked in there to appease the Fantasy People, as opposed to being truly integrated into the design.
    – hairboat
    Commented Dec 13, 2011 at 14:51
  • Love the design! Kudos! +1
    – Mufasa
    Commented Dec 13, 2011 at 20:23
  • I've been a member for 2 1/2 years and the background just struck me today. Great design!
    – Jay Cummins
    Commented Aug 10, 2013 at 23:47
  • @Jin What about the font of "Fantasy" in the site title at the top?
    – Rand al'Thor Mod
    Commented May 13, 2016 at 22:22

6 Answers 6

Reset to default
13

Comments:

  • The background (half my screen since the width is fixed) is really dark.
  • I can barely see the StackExchange menu.
  • "Ask Question" looks like "AsK Question". Is this a typo? The k in "asked" looks better.
  • Those are Tolkien's Dwarf runes, yes? If I'm remembering them correctly they are spelling I?Teegeadfatass?ig? (I don't recall a < rune). Is this meant to be significant? It is perhaps not Tolkien's runes but a different set? The users of this site will look for hidden things like that. (I'm using the ComicCon image since the runes are easier to see; I didn't check if they differ from the other design).
  • The symbols in the atmosphere - are they Aquarius and an Ankh? Significance?

What's the plan for meta? IIUC it's often a 'reversed' version of the site - would that be a white background and a dark inner? I really like the sites where you have an in-theme different meta (e.g. bicycles.se).

IMO if you took away the "+ Fantasy", this would still fit excellently as a solely Science Fiction design. The silhouette girl is holding blade weapons I think, and there's the runes, but those are very small. Given that the "Fantasy" font isn't reused elsewhere, but the "Science Fiction" font is, this looks to me like a Science Fiction design with a Fantasy stamp on it.

Fantasy was added here after the site started, but it's really an equal part now. It suffers by being excluded from the domain (we asked for an alias a long time ago, but it seems like the SE powers that be are not keen on that idea).

I would love to see a bit more balance between the sci-fi and the fantasy aspects. Of course, genre classification is very subjective, so maybe others see more balance in the images above.

4
  • what width is your screen? The background(starfield) is supposed to be dar by design. I'll adjust the contrast when I convert to CSS. I think the cursive works well in the logo type, it's definitely not an after thought. However, it's hard to use it for anything else due to readability. I think the header, as it stands now is slightly more "fantasy" than "scifi," so I thought it's quite balanced.
    – Jin
    Commented Dec 8, 2011 at 6:56
  • The rune letters I used are from this page. I picked letters from the Gothic and Anglo-Saxon Futhoric sets. I wanted to spell something clever, but due to lack of modern-day English letters, I decided just to pick the ones that I think look good aesthetically. If you have any suggestions, I'd love to hear it. The symbols are from alchemy. They're antimony and aqua. Again, they're picked for aesthetic reasons. I'm open for something that's more meaningful. As for Meta, I actually want to do a total dark theme... Meta = The Dark Side? :)
    – Jin
    Commented Dec 8, 2011 at 7:06
  • @Jin generally 1,920 (full-screen) so nearly 1k pixels of border. Sometimes 1,680 which is still 43% border or 1,024 (iPad) where it's a good amount of border. I try not to use the site while working, but if I do, then 2,560, so 62% border. None of the other SE sites I use (I haven't looked at them all) have such a significant contrast between the border and the content (bicycles is the closest I can think of, and it's nowhere near black & white).
    – Tony Meyer
    Commented Dec 8, 2011 at 7:12
  • @Jin I 100% think that the runes should say something. It's the sort of thing that this site's users would particularly appreciate. I'll try to think of something clever and translate it.
    – Tony Meyer
    Commented Dec 8, 2011 at 7:14
10

I love the Rebel Alliance-esque logos being used for badges - this appeals to my inner geek.

I don't speak runic, so I have no opinion on the runes.

I like the overall design, it's sleek and simple. The font is appropriate without getting in the way (or standing out too much).

The biggest issue I have is with the 'Accepted Answer' color - it's a seafoam green that doesn't really seem to jibe with the rest of the site. On my monitor it seems to be the color #75BA9B. My recommendation would be more of a earth-tone green (hunter or forest) such as #228B22 or #006400. This might just be a 'me' thing, though, as I'm partial to dark greens (and detest seafoam).

That said, if this went in as the final design my only tears would be ones of joy.

4
  • I'm not crazy about the light blues, either, but I can't think of a better color (other than gray, which would just drain too much life from the page).
    – Jeff
    Commented Dec 8, 2011 at 16:17
  • I can certainly tweak that green some. I'm glad you noticed the Rebel-ish badge icon!
    – Jin
    Commented Dec 8, 2011 at 17:20
  • @Jin I think the blue used on the question titles (or the corresponding shade of green) would work well for the accepted answer color.
    – Bill the Lizard
    Commented Dec 9, 2011 at 3:05
  • @BilltheLizard green is the convention we use for accepted answers background color for all of the SE sites. I'd like to stick with that.
    – Jin
    Commented Dec 9, 2011 at 15:56
7

Suggestions for hidden-meaning runes (I prefer the latter, although I don't know if it could fit nicely):

short

or

long

4
  • I agree that runes should say something. but we should get a separated question for this.
    – DavRob60
    Commented Dec 8, 2011 at 14:22
  • I like the "Forty Two" one a lot. I think the Elder Futhark runes may look better for it.
    – Jin
    Commented Dec 8, 2011 at 17:38
  • 6
    Since Jin gave away one of them: these are "fortytwo" and "indistinguishable from magic" (as in "any significantly advanced technology is ..."). 42 is a sci-fi number hidden in fantasy runes, and I like that the hidden message is the answer to the question hidden in the Earth. I like the latter because of the sci-fi/fantasy bridging.
    – Tony Meyer
    Commented Dec 9, 2011 at 7:27
  • 11
    Why not use runes in spoiler tags? Instead of empty space the spoiler would be translated into runes.
    – Till B
    Commented Dec 13, 2011 at 20:20
5

I like that design, and I really really like the background picture. Thank you!

I have one objection, and it's on a detail, but I feel strongly about the issue. The + in “Science Fiction + Fantasy” should not be a +. It makes the name look like there's science fiction on one side and fantasy on the other side. That's not the case at all: there's a whole continuum that covers both. “Science Fiction & Fantasy” is ok. (I'd prefer “Speculative Fiction” but I know it's not well-known enough.)

2
  • 2
    The reason I used "+" instead of "and" or "&" is a styling issue. As you can see, "Science Fiction" is written in a display type, and "Fantasy" in cursive. I didn't want the "AND" to be either one of those types. So I went with the more netural "+" instead.
    – Jin
    Commented Dec 8, 2011 at 21:44
  • 1
    @Jin (and Gilles) can I suggest using a slash instead? Science Fiction / Fantasy might look a little bit more natural than using a + (it doesn't draw the eye as much) and still gets around the styling issue of balancing fonts.
    – Bill the Lizard
    Commented Dec 9, 2011 at 3:03
3

I think we should do something a bit different for the up/down votes. I'm in favor of either swords or rocket ships, but something besides the arrows would look cool.

5
  • 3
    I'm for rocket ships. Or dragons
    – DVK-on-Ahch-To
    Commented Dec 10, 2011 at 1:22
  • Dragons or wizards.
    – OghmaOsiris
    Commented Dec 10, 2011 at 18:46
  • 2
    @OghmaOsiris - wizards aren't very directionally looking in small scale IMHO
    – DVK-on-Ahch-To
    Commented Dec 11, 2011 at 22:42
  • 1
    @DVK it wasn't serious lol
    – OghmaOsiris
    Commented Dec 12, 2011 at 8:18
  • Definitely Unicorn horns.
    – Zelda
    Commented Dec 30, 2011 at 15:59
3

There seems to be huge demand to change the answer selected icon, generating it's own question.

1
  • 1
    I have provided an answer/solution to that thread.
    – Jin
    Commented Dec 30, 2011 at 5:08

You must log in to answer this question.

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