13

As some of you probably know SFF is losing it's lovely star field and practically all elements that make SFF so recognisable when the new theme launches out of beta. After a bit of discussion with @Catija I found out that we can have a custom image back again. So, after asking if this is what we want and with most people saying yes here we are.

What should the new background/theme look like?

Things to consider:

  • The background is all one colour and/or image and text on the left nav must be black so any background colour or image needs to account for that.
  • The background image can be one of the following options:

    Yeah, we have a few options. We can fade the image, have it repeat indefinitely, or have it appear a single time like on WB. - @Catija, chat message

What is customisable (per my understanding, correct as needed):

  • Background colour and image
  • Link colour
  • Tag colour
  • UV/DV button colours
  • Ask button colour

Important note

I asked Catija in chat what would be done with our design ideas and this was the response:

TheLethalCarrot: If/when we decide on a theme idea for SFF what will be done with it? Designers take it and use it as is, they make changes, they only use it as inspiration, etc.

Catija: That's really going to depend on... things. So, I'm guessing that what's probably going to be the best is a general idea that the designers can adapt into the theme... the chances of a submitted design being perfect for what we need is pretty low, so I'd focus on finding a concept with some general rough sketches to be implemented by us... this saves y'all time and gives us some flexibility to make it fit the layout.

Catija: What I'd hate to have happen is for someone to come up with something really polished and beautiful that... we can't use... and then y'all won't actually like our version of it any more. A rough concept is going to avoid this issue.

  • After looking at the code on other sites, the restriction will probably be more on file size than tile size. The tile will likely just be repeating from the top left corner, so we can make an image 1920+px across and it'll just look like a full-width background. – amflare Oct 2 '18 at 14:32
  • The list at the end almost makes it sound like this it about an entirely new theme altogether rather than just a background image. If that really is the case, you might want to point that out further as this would be quite a bigger deal altogether (if even coherently tacklable in a single meta post). – TARS Oct 2 '18 at 15:19
  • @TARS So does the title: "new background/theme". No point designing a background image without thinking what colours other elements should be to match it. – TheLethalCarrot Oct 2 '18 at 15:20
  • So is this proposing a new colour theme to go with the background image? Have the SE designers been approached about this? You're basically redesigning the entire site. Not that this isn't a noble endeavour, but it goes way beyond choosing a new background image. If anything this meta post should make this a little clearer. – TARS Oct 2 '18 at 15:22
  • @TARS And the other elements I mention aren't exactly anything major. They're simple colour changes to elements already there. And I've spoken to Catija about it in a few places. She's said a new image is fine to go ahead, though 6-8 weeks, and mentioned what elements are also customisable without prompting. You say it like changing the colour of link text is a lot of work compared to adding a new background image. – TheLethalCarrot Oct 2 '18 at 15:23
  • I'm not talking about a lot of actual technological man-power here, rather than about completely redesigning the site, no matter if it amounts to 10 characters in the CSS diff. It's all well and good if SE and the community are willing to do that, but at least everyone should be aware of the intricacies of redesigning the entire site. The majority of the question makes it sound as if this is just about a background image rather than also designing an appropriate colour palette and all the other things that go into a coherent site design. – TARS Oct 2 '18 at 15:27
  • Comments are not for extended discussion; this conversation has been moved to chat. – Null Oct 2 '18 at 17:26
  • 1
    I know you might not be able to answer it but I think it is an important question, is this effort 100% community driven or will there be help from professional designers? If it's community driven... maybe we should just stick with a solid color background – Kapler Oct 3 '18 at 18:56
  • @Kapler See the update – TheLethalCarrot Oct 4 '18 at 8:35
  • Is there actually still a plan to give this site a proper design at any point? It may sound silly, but I actually find myself spending hardly any time here anymore, as it feels so much bleaker and completely un-fantastic since the design change last year. Seems to have lost 90% of the fun. — On other websites, I would just hack together an alternative style sheet for myself and be done with it, but here it actually seems to have been the consensus that the new design sucks and it should have something actually artistic-topical, yet no move in that direction seems to have happened. – leftaroundabout Jul 21 at 11:06
  • @leftaroundabout Apparently still on the roadmap but my guess is it is way back on it. – TheLethalCarrot Jul 21 at 11:21
8

Disclaimer: I'm no artist, as you'll see later on, so this will mainly be a post of ideas rather than any proof of concept.


The theme should keep as close to the old one as possible. This means make the side bars black and have the star field back again. However, to satisfy the need for the left nav to have black text and so a lighter theme I have three possible options.

Option 1: Extend the planet image

Use the rays coming out of the planet from the banner and extend them so that the blue and red parts extend onto the side bars. An actual version would probably have rays similar to those in this answer, however, as mentioned I am not an artist so you'll have to make do with this:

Option 1 "mock up"

This could also have something on the right side too but the plain star field is probably fine there.

Option 2: Use the nebula clouds from the footer in the sides more

For those unfamiliar this means more of these things.

Footer nebula

So now time for my amazing mock up again:

Option 2 "mock up"

Again with this option the nebula can be present on the right side too.

Option 3: Use a bigger planet

The planet in the top right corner is already quite detailed and light in places. This can be made bigger, optionally combined with options 1 and 2, so that light parts are now over the left nav. The Angel of Death can then also be placed in the bottom left of the screen similar to how the robot is placed on Worldbuilding.

Worldbuilding theme


For reference the whole planet image looks like this.

SFF planet image

  • Do we know who created the original planet image and if they would be willing to extend it into a background? – Kapler Oct 3 '18 at 17:54
  • 3
    @Kapler per Design for Science Fiction & Fantasy, it was designer Jin, who according to his Twitter bio might not work at SE anymore. Still worth trying to reach out to him, though. – Jenayah Oct 3 '18 at 20:15
  • +1 for nebula blobs – DCOPTimDowd Oct 9 '18 at 18:14
  • The different options really need to be separate answers so they can be voted on separately. – Anthony Grist Oct 10 '18 at 13:23
  • @AnthonyGrist They're all of the same idea... extend the old theme in a way that works with the new design. Is there one you thought was better or worse than the others? If so I can move one out or improve it but they're so similar I don't think they really call for being separated. After all a decent use of these ideas would probably incorporate a couple of the ideas I use here rather than just one. – TheLethalCarrot Oct 10 '18 at 13:25
  • Given that the final design will be provided by a professional designer, I like this idea the best. – Kapler Oct 10 '18 at 16:41
6

tldr; Keep the star field but add a bright element like a star/sun that will act as the background for the left nav.


How about just using a star-field that has a gradient where it is lighter in the center and fades to stars near the edges? I found one image that is free "No attribution required" and looks ok. There might be other ones out there that would be better.

Maybe not use this exact image but I think it shows the idea of an image that is light in the center but fades to dark at the edges could work.

My favorite out of all my attempts (earlier attempts shown below):

4K:

4k rotated black and white

Laptop (1440):

laptop rotated black and white

Tablet:

tablet rotated black and white

If you want to try it out and know your way around the developer tools of your browser; use the following settings as the css for the body tag:

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #E8E8E8;
    background-image: url(https://i.lensdump.com/i/AZloPx.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-width: 1279px;
}

Original image. It looks ok centered and fixed:

full size

And it also looks ok when scaled to ipad (I don't think the background is shown on smaller devices):

ipad

body{
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #000000;
    background-image: url(https://i.lensdump.com/i/AZH3D1.jpg);
    background-position: center;
    background-repeat: repeat;
    background-size: auto;
    background-attachment: fixed;
    min-width: 1279px;
}

Edit: I think I like it better actually with black & white filter and cropped so the "star" would be behind the left nav. Still not perfect but I don't hate it.

4K:

4k black and white

Laptop (1440):

Laptop black and white

Tablet:

tablet black and white

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #E8E8E8;
    background-image: url(https://i.lensdump.com/i/AZlK4F.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-width: 1279px;
}
  • I don’t think the extra effects you’ve added would be possible. This is a decent idea but I’m not sure I totally like it. – TheLethalCarrot Oct 2 '18 at 20:45
  • I'm sorry if I'm a bit startled. But I think I've just been staring at the sun for a bit too long. – Edlothiad Oct 2 '18 at 20:54
  • 3
    I am looking in my phone though so shall see tomorrow. It just looks bright. – TheLethalCarrot Oct 2 '18 at 20:54
  • The only extra effect here is the box-shadow - which I agree is probably not possible, but it looks fine without it. The center fixed image is almost exactly what they do on WorldBuilding (except WB has it top 90% left as opposed to center here). – Kapler Oct 2 '18 at 20:56
  • The example still makes it a little difficult to see the navigation elements. But the general idea is pretty good. Maybe actual sunrays could work, too. – TARS Oct 2 '18 at 21:14
  • 1
    @TARS except now every time I log in I’m going to have to scream “The Beacons are lit! Gondor calls for aid” and go sprinting into Meduseld... – Edlothiad Oct 2 '18 at 21:42
  • "Edlothiad, what do you see?!" – TARS Oct 2 '18 at 22:11
  • The black and white one is better though too bright on extra wide screen and “too left”. – TheLethalCarrot Oct 2 '18 at 22:27
0

Here is my idea from the linked post with some updates.

Split SF and F maps. Here is a rough concept to give a general idea.

enter image description here

Pros:

  • Reflects both sides of our community
  • We can make it light enough to make SO happy
  • More personality than a simple 50x50 repeating tile.

Cons:

  • We have to find or a make non-copyrighted maps
  • 2
    There's (currently) no way (and possibly won't ever be one) to add a opacity layer to the sidebar section, so the map content would have to be subtle enough to be sure that the sidebar text is easy to read on its own... just want to make that clear. :D – Catija Oct 2 '18 at 20:06
  • Good to know. Thanks. – amflare Oct 2 '18 at 20:42
  • 2
    I'm downvoting this because, although it's a nice idea, it's fairly useless unless we know that we can actually get some maps which are (a) clearly SFF-relevant, (b) non-copyrighted, (c) nice-looking (i.e. not just a crappy MS Paint job). Also because of what Catija said making this less easy to do. – Rand al'Thor Oct 3 '18 at 8:26
  • 1
    @Catija SE may accept a request for opacity on the bar it makes sense for many sites. but we'd still be waiting on them and they have got a lot on :D – Dreamwalker Dec 12 '18 at 12:40
-9

Just Keep it!

I like the simplicity of how it is. If it isn't broken, don't touch it. Just adjust it to the new size needed.

  • 6
    It looks awful at the moment. A custom border might improve things (slightly). – Valorum Oct 3 '18 at 16:07
  • You may want to visit the meta where I asked what to do with the background, this would be more appropriate there. Though with as brief as this is and how much people dislike the theme I doubt it would be any better received. – TheLethalCarrot Oct 4 '18 at 10:15
  • no way it's horrible :D – Dreamwalker Dec 12 '18 at 12:41

You must log in to answer this question.

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