Anime & Manga Site Design

Question

Some quick notes based on the feedback provided here and in chat:

On the original feedback gathering post Catija left a really relevant link that I failed to put in a more conspicuous location, which coulda helped in managing expectations for this — I'm sorry about that, really! The comments links to this MSE post, in which it's made clear that future site designs are not gonna have the level of detail that sites like Worldbuilding have, but instead more in the lines of the Blender, Travel, or Puzzling sites' designs. Having said that: this design actually probably has way more elements than any of the upcoming site designs will.

It's obvious not everyone will be happy with what we come up with, but given the feedback we gathered in the idea gathering post and the constraints the above puts in place, I feel like our designer did a good job trying to incorporate most of the thoughts y'all put into that post: the design is simple, yes, but its atmosphere feels anime-esque to me. Again, not everyone will be happy, but if there are small tweaks that could make it look better, they're welcome, and we'll try to incorporate 'em into the final design!

And if you have any questions, feel free to ask 'em too :)

---

Earlier last month, we collected some new ideas for the site design. You suggested that the design be simple, picturesque, and representative of the anime and manga culture.

It's been a long time coming and I’m excited to share what the design team came up with for our community! \o/ You can see it live in the site now (along with updated reputation thresholds), but here are some screenshots too:

Design Concept

Home Page:

Question Page:

Meta Home Page:

As it was brought up in the previous meta post, our designer also created a variation of the community logo with the original sources of inspiration in mind.

We know, again, that coming up with a design that represents the Anime & Manga community as a whole is not an easy task, but we hope this design is reflective of the community without focusing on any specific niches.

We hope that you love the design we build in this phase but we expect some minor adjustments may be necessary. So you have have any feedback, please let us know.

Answer 1

feature-request

Can the favicon have an easy to tell difference between meta and main.
Such as make one gray and the other black.

Currently they're the same making it harder to tell at a glance which tab is on which site.

Answer 2

Badges It would be nice to use a cherry blossom petal instead of a peach blossom. As the cherry blossom is most synonymous with spring overall, which I assume is the theme by the header.

Petals from right to left: Plum, peach, cherry.

Answer 3

Firstly it looks like my suggestion, may have heavily influenced the outcome. Sorry everyone :(

tl;dr:

• The colour pallet, bus stop and bus are cool.
• Only having bus and nature as the theme makes this look like a design for Travel.SE.

• Having a hyper-realistic clouds, flat design and a travel theme knocks the anime aspects down a couple of pegs.

  Whilst these by-themselves in an anime theme would work, having the entire theme be somewhat tangentially related makes it look like it's not an anime theme.

• The clouds look like CGI not anime.

Something similar has been said in chat. ^[1]

---

Pros:

• Despite what some others say, I really like the the bus stop. (I may be biased) And some people have said it has a Monogatari feel.^{[1] [2]}

  IMO, except a little contrast issue, it perfectly fits my second design.

• I think the lime/green background is quite nice, and reminds me of this suggestion.

  IMO it'd be cool if there were chunks/segments in the gradient, like the linked image. However it doesn't look like you can do that with radial-gradient. :(

Neutral:

• I think having a bus and a bus stop is pretty cool. However, if the bus wasn't there I wouldn't mind. I also don't get a 'that's cool' vibe from it alone.

  However, given that the core of our theme seems to be a bus driving into the sunset, it seems more like a theme that is intended for Travel.SE, or more specifically 'Bus Travel.SE'.

Cons:

• This is related to a previous answer, they're too blurry. To me they look like clouds that were designed to be a quarter, or smaller, than the size they're meant to be and so were blown up and had the blur turned to 80% to remove the pixelated edges.

  I also don't like how they look 'hyper-realistic'. This may be because inspiration was taken from these pictures: 1, 2 or 3.

  I like the style of cloud shown in 1 and 2 the most. However whilst I don't like the artistic styling as much, I think the clouds in 1, 2, 3 and 4 also exhibit an anime style.

• The sun at the bottom of the screen does nothing for me.

  • It kinda explains why there's a gradient from green to lime in the center of the page.

  • To me a sunset is orange and red, and so makes me question the colour pallet.
    I don't think an orange/red colour pallet would look nice for a background.

  • Is this an obscure reference to the flag of Japan?

  • Since the sun and the bus are in the same image I can't see what it would look like without the sun, so can't say if it makes the bottom of the page not look barren. (Which would turn this into a neutral/pro)

---

What do I think would fix this?

1. Animeify the clouds.
   They're going to be seen by 100% of people that visit the site, are part of the first thing most people will see and are the largest, size wise, part of the design.

   If they don't scream anime, then the first impression won't be that this is an anime site.

2. Add some people.

   They more often use a X amount of characters across the page to visualise it
   - Dimitri mx in chat

   Whilst this was suggested in this answer, there seems to be a lot of conflict over this idea.

   1. It seems like people want to have the characters based on ones they like from animes. And so could lead to licensing issues.

   2. People want diversity.

      I have a bit of a problem with this argument, as there's only a finite amount of characters we can have, but an infinite variate of characters. So some are going to be missed.

   
   Overall to me it seems making at least two generic anime characters would fix this.

   From here you can do cool stuff like have them waiting in the bus-stop, and then have them in the bus.

   If resources were infinite you could also do:

   Maybe a girl chasing the bus with toast in her mouth. :P
   - forest in chat

Answer 4

feature-request

Can the body background-image have less blur. To me it makes the entire page look like one big blur, making the content harder to read.

Answer 5

For me, the lack of a distinct edge here bothers me. It feels like the questions pane is bleeding into the background, and it's making me want to squint for some reason.

Answer 6

bug

The meta body background image doesn't support ultra-wide screen resolutions, where main does.

Answer 7

One small detail that I do appreciate: The bus at the bottom of the page is going in the right direction! Good.

Because in Japan, vehicles drive on the left side of the road.

Answer 8

I confess - I have failed you.

No matter how many times I tried to come to this post and actually put together some reasonably scoped (i.e. "tweakable") criticism about this theme, my tendency to conflate this with some existing Stack Exchange-level communication breakdown keeps getting in the way.

So, I'll repeat what I said in the comment I left on this post and hope that this actually keeps me on the straight-and-narrow. No promises though; I'm not on a tightrope.

I'm not a fan of this design and I wish it had incorporated other elements from other suggestions.

By that, I mean:

• Something recognizable about Anime or Manga should be in the theme. In my mind, a Japanese bus stop and a Japanese bus are more artifacts of the culture. Left-side drive nations have buses which can look similar to this, so I don't find this to be particularly striking.
• The color scheme is unique and calming, but...there's nothing to tie it together to anything specific to either Anime or Manga. Maybe the color was meant to evoke a reference to matcha, but that's a Japanese culture thing, and not an anime/manga culture thing.
• I'm not left with a sense of wonder. I'm left with a sense of bewilderment. To try to mitigate my unconscious and conscious biases, I showed the site to a few friends of mine whom I trust with UI/UX opinions, and they didn't really see the "anime" in it. Admittedly they have their own biases about anime in general which I won't repeat here, but the consensus was fairly universal - didn't seem like enough.

...but none of that can be taken back to a designer to "fix", because the end result is "change it", which isn't the kind of feedback I wanted to give, nor is the kind of feedback that gets attention. It's basically me just saying, "I don't really like it and I want it all changed," which is hardly a good way to get constructive criticism going here.

But in an effort to remain as optimistic as I normally am once was, I decided to look around at prior art to regain some positivity and look at this from a different perspective. I wanted to see what the feedback loop has been in the past for sites who have changed who weren't the larger, more prominently themed sites.

...

I'm making a conscious observation about the feedback loop we've got going on here. Just referencing the Meta post that was meant to be more obvious, the two main sites mentioned who stated that there was some kind of deficiency in their layout have had radio silence on their feedback, even if it's been prominently stated or displayed as something that's looked at or into.

DBA.se hasn't had an official response to it since it was created.

SciFi.se received one comment on one answer in regards to constructive criticism towards a suggestion for improvement. Beyond that...nothing really concrete in the lines of what I would want to see as "progress" since it was created.

There's also a discrepancy here. At least it seems that SciFi had a chance to trial the theme out before it went live. Had we had the chance to do that there, I think there wouldn't be quite as much angst with it. Kinda feels like this is what we're getting and we can tweak it slightly from here, and the team is then "off to the next one".

To hammer home the point of the reason why this matters at all:

This site is tiny. A theming change will either entice or repel people from our community. An unsuitable theme won't entice anyone to stay around.

We want to be putting the best foot forward, and I don't think we are right now.

But again, I've failed to put this in terms which I feel like are actionable. Sorry.

Answer 9

I got bored of waiting for some of the easier changes.

• Changes badges to look more like more like cherry blossoms.
• Change logo to look more like cherry blossoms.
  This only changes the main A&M logo, favicon and featured on meta are the same.
• Add borders to the site.
• Fix background on meta.
• (Disabled by default) Remove bus-stop and bus&sun.

To enable disabled ones delete the space between this * / on the ones you want to enable.

/* Bus stop * /

To

/* Bus stop */

To disable others do the inverse, add a space there.

Tested on FF 67.0 + Tamper Monkey.

// ==UserScript==
// @name     A&M changes
// @grant    GM_addStyle
// @run-at   document-startc
// @include /^https:\/\/anime.stackexchange.com\//
// @include /^https:\/\/anime.meta.stackexchange.com\//
// ==/UserScript==

let url = window.location.href;

if (url.match(/^https:\/\/anime.stackexchange.com\//)) {
  GM_addStyle(`
    /* https://anime.meta.stackexchange.com/a/4254 */
    /**/
    .site-header--link img {
      clip-path: polygon(
        0% 0%,
        0% 100%,
        calc(26.864 / 353 * 100%) 100%,
        calc(26.864 / 353 * 100%) calc(26.552 / 60 * 100%),
        calc(32.825 / 353 * 100%) calc(26.552 / 60 * 100%),
        calc(32.825 / 353 * 100%) calc(32.519 / 60 * 100%),
        calc(26.864 / 353 * 100%) calc(32.519 / 60 * 100%),
        calc(26.864 / 353 * 100%) 100%,
        100% 100%,
        100% 0%
      );
    }
    /**/
  `);
} else {
  GM_addStyle(`
    /* https://anime.meta.stackexchange.com/a/4248 */
    body {
      background-size: 2880px 1008px;
    }
    /**/

    /* https://anime.meta.stackexchange.com/a/4254 */
    /**/
    .site-header--link img {
      clip-path: polygon(
        0% 0%,
        0% 100%,
        calc(26.864 / 389 * 100%) 100%,
        calc(26.864 / 389 * 100%) calc(26.552 / 60 * 100%),
        calc(32.825 / 389 * 100%) calc(26.552 / 60 * 100%),
        calc(32.825 / 389 * 100%) calc(32.519 / 60 * 100%),
        calc(26.864 / 389 * 100%) calc(32.519 / 60 * 100%),
        calc(26.864 / 389 * 100%) 100%,
        100% 100%,
        100% 0%
      );
    }
    /**/
  `);
}

GM_addStyle(`
  /* https://anime.meta.stackexchange.com/a/4250 */
  #content {
    border-left-width: 1px;
    border-right-width: 1px;
  }
  /**/

  /* https://anime.meta.stackexchange.com/a/4254 */
  .badge1, .badge2, .badge3 {
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 30%, 35% 35%);
  }
  /**/

  /* https://anime.meta.stackexchange.com/a/4255 */
  /* bus stop * /
  .site-header--container {
    background-image: unset!important;
  }
  /**/

  /* bus and sun * /
  .site-footer {
    background-image: unset;
  }
  /**/
`);

Answer 10

Remove the bus shelter at the top and the bus at the bottom. While it's apparently too late to come up with a design that would actually represent anime and manga, removing these elements would be a significant improvement. As it stands, the current design can only confuse the visitors as to the purpose of the site.

I can't say I've watched a huge amount of anime, but I like to think I've watched a broad range of it. From the 70's to the present, across various genres and target audiences, I don't see this "public transportation" theme representative of the anime I've seen or heard of, either broadly or narrowly. A generic transit bus that could be seen anywhere in a the world. A bus shelter that maybe kinda looks like a broken tori gate if you squint your eyes but wouldn't look out place in North America or Europe. Even limiting yourself to public transportation you can find better things to represent Japan, if not anime and manga.

As a result, I can't see why anyone would think these bus elements represent anime and/or manga. It doesn't help that you just simply asserted that the design "feels anime-esque" to you, without explaining why. Absent any reason to believe otherwise, I think these elements would only suggest something different to people visiting the site and so should be removed to prevent confusion. While the resulting, simpler, design wouldn't be any more anime-esque than it is now, it a least won't be giving the impression the site is supposed to be about public transportation.

Answer 11

Note: Based off this Code Golf answer.

Could you change the error and 404 text to be inline with the sites colour scheme.
The blue, IMO, looks out of place.