23

As you may have already noticed, our new design is live! ✧*｡٩(ˊᗜˋ*)و✧*

Thanks for all the input over the years, and particularly in the most recent Meta posts around this (here and here). As was mentioned in last month's update, we commissioned an artist with experience in the style to execute this community's design, and I'm really excited to present y'all with the final work, which I believe addresses most (if not all) of the concerns y'all had raised about our previous attempt.

Here are some screenshots, for posterity:

Main site:

screenshot

Meta site:

screenshot

As mentioned previously, the logo also got some tweaks (feedback), thanks to Lisa! Our chat theme and Twitter account also got a refresh and will be updated soon, and you should also see some changes in the newsletter!

I mentioned in the last update that since the design would be generated outside our usual process, we'll only be doing any styling tweaks, or fixing egregious issues we somehow missed — so if you stumble upon bugs, please post 'em as an answer here! :)

I'd like to once again thank everyone here for their feedback and patience, and hope everyone enjoys this design! :D

Thanks for all the feedback below. I've added to stuff we worked on, and cleared some other doubts around stuff we didn't work on. In addition to that, there were also a few things we spotted we'd missed the first time around:

  • Fixed contrast issues on "site rooms" button in chat;
  • Fixed contrast issues on "help | faq | legal | privacy policy | mobile" links at the bottom of the page in chat;
  • Added the flying hat to the chat bar, to spruce it up a bit (will prolly take a bit longer to build, FYI);
  • Some fixes to the Twitter logo.
3
  • 2
    This is much better than the previous design. Thanks!
    – forest
    Commented Jul 12, 2019 at 6:22
  • So...bug fixes when?
    – Makoto
    Commented Aug 2, 2019 at 0:08
  • 3
    Sorry for the silence, @Makoto: Lisa started lookin' at 'em this week :)
    – JNat StaffMod
    Commented Aug 2, 2019 at 7:54

10 Answers 10

Reset to default
10

We were discussing the design a while ago in chat, I wrote this and the comment received four stars:

@Jnat It's hard to pin style down into precise words. To me the mockup looks like somebody was told to make something look japanese, but rather than using the vibrant colors and thick outlines characteristic of comics and animation, they went for more of a traditional style with soft pastels and thin lines more characteristic of traditional Japanese art, kind of like this:

The image I used to illustrate the point.

Utagawa Hiroshige, 1st Station: Shinagawa from series The Fifty-three Stations of the Tokaido, 183(3/4)

I feel like you folk did a great job listening to that feedback and that the new background design is a good improvement in these regards, and the flatter more vibrant look helps to give it a look much more characteristic of anime. Moreover, I feel like the specific design choices invite a sense of an impending adventure with the way the folliage spreads out and the hat being blown away by the wind, just begging somebody to up between the grassy hills to get to the other side and retrieve it.

I am pleasantly surprised to say that I like the new design overall, and find it more befitting of our particular scope than what we had before. It reminds me of the appearance of a Studio Ghibili film much more-so than I anticipated. I think the only thing left is to make minor tweaks to fix minor errors such as what the others have demonstrated.

Speaking of which, if I may make one comment, I think the C.S.S. colors used in chat still appear to be optimized for the prior background. We may want to make the greens somewhat darker and earthier so that they match the grass better. It applies especially so to the area containing the chatbox.

1
  • 2
    Thanks for the feedback! As for chat: it should be fixed later today, all going well :)
    – JNat StaffMod
    Commented Jul 9, 2019 at 18:29
8

Not sure if this is a bug or not, but the hat on the left doesn't scroll, compared to the kite on the right. Not sure which behavior is the correct one, but currently it feels inconsistent.

Observed on Chrome 75, Windows 10, with & without userscript, and additionally in incognito mode.

1
  • 3
    The behaviors of the kit and hat are different by design :) Even if we change that, marking it as [status-bydesign] for now, just so we can parse the feedback here more easily.
    – JNat StaffMod
    Commented Jul 24, 2019 at 9:09
7

The meta icon has a white artifact:

enter image description here

3
  • 1
    I wonder if there's something odd going on with the template being used... the Code Golf meta logo has the same exact thing. :/
    – Catija Staff
    Commented Jul 9, 2019 at 17:55
  • @Catija Yeah it's quite strange - it didn't have one before which make it more puzzling tho.
    – Peilonrayz
    Commented Jul 9, 2019 at 18:01
  • 4
    Culprit was found! Template is fixed! We'll be adjusting the meta logo in a few weeks after we've got all of the feedback. Thanks!
    – Catija Staff
    Commented Jul 9, 2019 at 18:32
7

On Firefox, Windows 10, with a screen size of 1920x1080, the leaves seem to overlap the word "licensed" on the footer.

enter image description here

As pointed out by Peilonrayz, on higher resolutions, it seems to overlap the footer even more.

enter image description here

1
5

Can the white outlines on the Meta images be removed?
There doesn't seem to be, on the surface, any extra border on the images on main.

enter image description hereenter image description here

These are more easily seen when using something like Dark Reader:

enter image description hereenter image description here

Below shows the difference between the two. It looks like the transformation sets the background to white when metaizing the images, and doesn't accurately handle alpha-transparency because of this. As it seems to only remove pixels that are exactly #ffffff.

enter image description here enter image description here

Note: The meta footer doesn't have these white borders, but main's footer does.

5

https://anime.stackexchange.com/404 is still generic. Can we spruce that up, too?

4
3

As Aki, Dimitri, and Nog have all mentioned: the variety of appearances for different users ought to be amalgamated somehow. I can't reproduce the appearance of Jnat's view by any combination of browser or "Hide Left Navigation" and "Hide Hot Network Questions" checkbox settings.

Instead of seeing this on the bottom (or Jnat's view):

Preferred appearance

I see this (full page, and bottom):

Whole Webpage

Even playing with "Hide Left Navigation" and "Hide Hot Network Questions" checkboxes doesn't bring the kite into view.

Using an unusual browser (TubeMate) produces a slightly better view (though it's unlikely many people use it):

TubeMate Browser View

I believe that the genius and subtlety of the CSS positioning is lost for many.

A fix would be to push everything to the bottom when the user is at the bottom of the webpage and proportionately scroll the kite, hat, and their 'background clouds' upward when the user is at the top of the webpage - thus providing a parallax movement that works for a majority of our users and doesn't leave some elements always hidden.

4
  • 1
    What browser are you using? Also, it looks like you're using a really narrow screen, so you're not seeing any of the "columns" on either side of the actual content, where the hat and kite appear.
    – JNat StaffMod
    Commented Jul 22, 2019 at 11:51
  • @JNat I'm using Firefox Android, in portrait mode. My screen size is 2960x1440 (HxW), so it's fairly wide; it's the way that Stack Exchange uses CSS in webpages served when you choose "Full Site" (link at the bottom, if applicable to the user) and on the browser one selects "Request Desktop Site". Wikipedia reports that 10M phones were sold, of the exact same model that I have (as many phones as we have users), needless to say that other phones were sold too; so many people are affected by this, and see the same view as I do.
    – Rob
    Commented Jul 22, 2019 at 14:25
  • @JNat - Here is an animated screen capture. Notice that when I scroll slowly and gently that the repositioning of the background elements jumps, rather than gliding smoothly and providing a beautiful parallax movement. My phone is fast, I can load and render a page stuffed with MathJax almost instantly. I can play 60FPS videos and online gaming is fast; so it's not that my phone is slower than many laptops or that something is slow or broken (except the CSS, not my fault) on my end.
    – Rob
    Commented Jul 22, 2019 at 15:15
  • While I don't like the way that the front layer covers everything when you scroll to the bottom this 6 layer 3D CSS parallax scrolling background has simple code, many layers, and smooth animation on my phone.
    – Rob
    Commented Jul 24, 2019 at 0:35
2

A nice to have but not necessarily required (and might be controversial?), since the kite is already scrolling, make the whole 5 clouds (top-left, top-right, mid, bottom-left, bottom-right) also scroll very slowly to simulate parallax effect.

... unless the scrolling kite is actually a bug and should be static (then this is all moot)...

2
  • 1
    Kite seems to be static for me.
    – Dimitri mx Mod
    Commented Jul 10, 2019 at 9:03
  • @Dimitrimx looks like that's a bug with your browser. As the CSS definitely has body background-attachment: scroll, rather than fixed.
    – Peilonrayz
    Commented Jul 10, 2019 at 21:34
1

I'm faced with a paradox.

On the one hand, this still doesn't really incorporate the designs we talked about in a few of these sessions. I use that loosely since we still got the panning sky shot.

...and yet, I actually like this. The theme fits well. There are stylistic choices which I feel just click together instead of it feeling awkward or rash.

I kind of wish it were a bit...more, since not every series deals with panning sky shots, and on its face this is actually fairly blank without any real indication that there's anything to do with anime or manga except the look and feel, but this is definitely good work. I'm satisfied!

1

Why is footer taking too much space when compared to other graduated sites with custom design?

Following is Anime main site footer which is leaving empty space

Anime Stack Exchange footer

When I compared with other sites with a custom design, the footer is looking like it is taking more space.

Is this intentional to give space for the picture? Movies & TV site footer

These screenshots are taken on 1024x768 resolution with responsiveness enabled.

5
  • 1
    Is there a reason that you want it to be smaller? Other than "everyone else has a smaller footer".
    – Peilonrayz
    Commented Jul 11, 2019 at 12:19
  • 1
    @Peilonrayz I am just curious whether it is intentional or not. One of the reasons Joe Friend (developer who started this process of design) gave is bringing some similarity and uniformity between all the graduated sites. I am not asking it should be shorter.
    – Nog Shine
    Commented Jul 11, 2019 at 12:21
  • Ok, that makes sense.
    – Peilonrayz
    Commented Jul 11, 2019 at 12:26
  • This is just a guess on my part, but something worth noting is that if you scroll all of the way down, it covers the hat, as if you lost sight of it once you reached the hill. If we go along with the hypothesis that you are chasing down the hat, that'd also explain why the hat is static and the kite isn't: So that you don't lose sight of it prematurely. As for the kite, it's lighter and meant to float so it might actually be further drifting upwards or staying afloat, compared to the heavier hat which would be falling back down to the ground.
    – Tonepoet
    Commented Jul 11, 2019 at 16:41
  • 2
    The extra space is intentional, yes.
    – JNat StaffMod
    Commented Aug 15, 2019 at 15:28

You must log in to answer this question.

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