21

In late 2017 we were asked if a design for this site was being worked on or not, and at the time the design team was stretched pretty thin, to the point where I wasn't able to provide this community with a reasonable and realistic ETA for when they'd be able to work on it.

But now I'm back with some good news! One of our newest designers, Lisa, has reached out to me saying that the DAG team is starting to work on new site theme implementations again — and that Anime & Manga's on the top of the list! \o/

We know some of you were working on an unofficial site design, and we've also had idea collection posts back in 2012 and again in 2015, but we're here to get some new feedback and ideas thrown around!

As other previous discussions noted, we're prolly gonna wanna stay clear of design ideas and concepts that put us into a niche-y kinda place, as we wanna try to make something that's "Anime & Manga" as a whole, and not just representative of a particular subgenre — so as much as some of you may love (for instance) Naruto, let's try to avoid shuriken :P

So, yeah: leave your thoughts, ideas, and suggestions below as answers.

  • 14
    I feel like "avoid shuriken" is just generally good advice. – Shog9 Mar 13 at 18:13
  • 1
    Don't forget what's available in site themes changed. IIRC this image lists everything up for change, except you can have custom badges too! – Peilonrayz Mar 13 at 19:21
  • @Peilonrayz Question titles on posts can't be colored, they're all black, as far as I'm aware. Minor difference. Also, the placement of the site logo/name can't be changed. It's fixed. The header banner can include either a pattern or solid color with an optional image/artwork but an image has to be narrow enough so that it won't interfere with the site logo at narrower widths (there are some exceptions, like on Movies & TV but that's specifically designed that way). Footer artwork is possible, too, as long as it doesn't impede legibility of the footer links. – Catija Mar 13 at 20:15
  • 2
    For more general info, see my MSE post here: meta.stackexchange.com/questions/319274/… Feel free to ping me here or there if you have specific questions. – Catija Mar 13 at 20:16
15

Something simple and seasonal would be idea. One of the hallmarks of anime is it's seasonal nature. Many series are short-lived. But every season fans look forward to a new menu of anime programs, sometimes for the better or for the worse. A static layout that accents the seasons and changes by the season would be nice.

Each season could outline a popular genre of anime and manga. The badges could be something that fit the season -- like a leaf for fall, droplet for spring, snowflake for winter, and a sun for summer.

One of the biggest challenges with making a banner about anime is being able to capture the essence of the subculture without using and specific IPs. Sure we can loosely imply parodies though commissions, the results will likely skew towards popular mainstream tastes. The anime and manga industry is the way it is through the diversity of talents of the content and tastes creators.

While I initially proposed a os-tan style mascot/idol type poster character, I such a meme would be of any help to promote. This SE site. Character design guidelines, branding guidelines take too much time and effort. A simple picturesque seasonal vector landscape shot with the silhouette of a few more well known characters in the background might suffice.

Maybe it can be a bench at a trains station or storefront with anime and manga in the background (on a bill board or station sign billboard) a tree to on each side, or in the background. Make be something like a cross between:

long the country side

and/or

a horizon in the middle of nowhere

But not with as much detail.

The scene:

One single location, as the seasons pass. The only real color palette, might be the primary/secondary color for a season plus the badge icons.

Nothing too tall or wide. Naturally with not as much detail. Shorter and narrower to keep up with the standard banner sizes.

The overall look and feel can be simple caricatures or veil/full silhouettes like these:

tamako

woody

ricky

Simple and flat looking, with layers like the above.

In general, something low-key yet recognizable by fans like this background:

eva

your lie

howl

ghibli

cerulean cave

of mana

The Theme: Subtle, simple, yet picturesque.

If the concept of changing seasons is too complicated, then it's probably best to pick the ONE season you like best (I would summer or winter) and run with that.

The meta site can be just the line art of the main site to accent a conceptual nature motif or something, like a behind the scenes making of banner.

  • Some variation of our community logo in the style of a clan emblem would be nice to have. – кяαzєя Mar 13 at 19:31
  • I messed with the CSS a little bit, and found the bus stop to be very nice. – Peilonrayz Mar 13 at 20:55
  • 3
    I'm really sorry to kill what's an amazing idea we'd love to implement but... it's a single theme. Having it change throughout the year isn't going to happen. We've already got a immense backlog and I know you've been waiting forever... but that's a non-starter. It's got to be one design. – Catija Mar 13 at 21:37
  • 1
    As I mentioned at the very end, if it's too much effort just pick a season and commission an artist (as Jin mentioned before for RPG.SE) to do a small banner based on the color and examples as stylized motif. The examples provided are samples of a look and feel. Blue is fine, as a summer colors. Just not red like TV&M.SE. It's too harsh on the eyes. – кяαzєя Mar 13 at 21:50
  • Yep. I saw that. My comment was for the benefit of others. For example, Makoto's answer draws on yours so I felt it was important to put it out there that "we can't do it, so please don't start making amazing plans around that idea that we just can't implement." :) I was pointing out the M&TV design for how it works, not because I think the palette is great for y'all. :) I'm an avid consumer of anime, for all that I haven't participated much here. – Catija Mar 13 at 22:07
  • It's fine @Catija, your shooting down of this idea provided me with the inspiration I so sorely lacked during an inland blizzard-cyclone bomb whatever thing. Thanks! – Makoto Mar 14 at 3:29
  • Going off the season idea, would spring (i.e. cherry blossom-season) be appropriate? Given its importance in Japan, that might be appropriate for a site about media originating fromt hat country. – Thunderforge Mar 20 at 20:02
  • 1
    Summer and winter have more of the big impact shows, while Japanese culture is related to anime and manga, it is not the topic of our site. Regardless on topic you are welcome to share your ideas in this meta as an answer. It might prove to be just the inspiration that is needed. – кяαzєя Mar 21 at 15:46
8

I like кяαzєя's ideas and wanted to see what they'd look like in on an SE page, and so I edited the HTML and CSS. I now know how SE have done their site design. And I think it's pretty basic, but looks very nice. I focused on the navbar and the background, as picking colours is beyond me.

  1. Navigation bar

    • The height is always 70px.
    • The width can be any size. (Images here have to support 4k and UW screen resolutions, and whatever the future has instore.)
    • It can be an opaque colour or image, or transparent.
  2. Middle navigation bar

    • The height is always 70px.
    • The width is can be any size to a maximum 1264px.
    • The top-left is where the site logo and name are located.
    • The bottom-right is where a custom image can go. (Meta and Arqade)
  3. Custom image

    • The height is at most 70px.
    • The width can be any size up to 1264px. (Arqade has this.)
    • You can have multiple images, but they all align with the bottom-right corner. (Arqade has 3 different ones here.)
  4. Background

    • The height and width can be anything.
    • Most sites have repeating images or a solid colour.
    • It looks like you can get extravagant backgrounds, but these are repeating patterns. (Worldbuilding)

Shop custom image and sky navigation

For the first image I:

  • Kept the background a solid colour.
  • Made the navigation bar an image.
  • Added the shop as a custom image.

Shop custom image and sky navigation

Bus stop custom image and sky background

For the second image I:

  • Made the background an image that fades into a solid colour.
  • Made the navigation bar transparent.
  • Added the bus stop as a custom image.

Bus stop custom image and sky background


If you want to mess around and see what you can come up with editing the page is really easy, and mostly comes down to changing the styles on three elements.

Changing the logo is the hardest part. Inspect the "Anime & Manga" element and add the following inside the <a> tag. (replace the icon with yours)

<img class="h-auto wmx100" src="https://i.stack.imgur.com/IY07y.png" alt="Anime & Manga">

After this you can replace the CSS styles. The following are what I used to get the above images:

// Store Front

.site-header {
  background-image: url(https://wallpapercave.com/wp/lhngQ0o.jpg);
}

.site-header .site-header--container {
  background-image: url("https://i.stack.imgur.com/kZrMD.png");
  background-size: 180px 64px;
}

// Bus stop

body {
  background-color: #09515D;
  background-image: url("https://i.stack.imgur.com/wM5xg.png");
  background-repeat: no-repeat;
  background-position: 0 50px;
}

.site-header {
  background-color: transparent;
}

.site-header .site-header--container {
  background-image: url("https://i.stack.imgur.com/9jS3B.png");
  background-size: 252px 64px;
}
  • 2
    If this was not a meta, I'd bounty for the second proposal. The design is sweeeeeeet – Journeyman Geek Mar 14 at 4:07
  • @JourneymanGeek Thanks! I thought it'd look sick from the other answer and just wanted to be able to visualize it for everyone else :) – Peilonrayz Mar 14 at 13:56
3

Just a short idea for the header, I imagine a left-to-right sequence of manga & anime production:

  1. a rough sketch of a character*
  2. expanded to a storyboard (name)
  3. inking/toning/finishing (traditional B&W manga - done)
  4. adding color (digitally-colored manga - done)
  5. animating/color-coding/tweening/layering
  6. a single-frame, finished scene of an anime (anime - done)

Reference: What are the steps involved in making a professional manga?, What are the steps involved in producing an anime?

Super-duper simple representation:

-------------------------------------------------------------------------------------------
                 |            |           |           |           |           |           |
Anime & Manga    |     1      |     2     |     3     |     4     |     5     |     6     |
                 |            |           |           |           |           |           |
-------------------------------------------------------------------------------------------

As for the object of this process, since we certainly don't want to infringe copyright, and since I missed What should our "unofficial" community name and logo or mascot be?, I just wanted to propose a mascot ala OS-tan as Stack-ko (スタッこ, sutakko), comprising of Stack (as in, "Stack Exchange"), and ko (子/娘, child/daughter)... but any other idea is welcomed...

  • Come to think of it, I think this might have the problem on narrower width, compared to the one on Movies & TV... – Aki Tanaka Mar 14 at 15:10
  • If you went off of RPG's size, then each box could be a little bit over 5:8 (h:w - 70px:112px) so I do think this would be doable. – Peilonrayz Mar 14 at 18:18
  • about our mascot, we discussed that and there's a separated meta about it but we never reach a mutual agreement about our mascot and the idea becomes neglected – Darjeeling Mar 15 at 1:24
  • Not really a fan of the mascot. Given how diverse and broad Anime and Manga are, picking a single entity (a-la OS-tan) to represent it doesn't quite feel as nice to me. – Makoto Mar 15 at 5:13
  • @Makoto fair point. If there's any better idea for the object of the scene that generic enough to capture the essence of anime & manga, then I really welcome it. On the other hand, I prefer not to represent particular series like the one on Movie.SE. – Aki Tanaka Mar 15 at 6:38
  • @AkiTanaka: I've cleaned up my answer to this question to make it less of a ramble and more of a coherent suggestion; I welcome your perusal. – Makoto Mar 15 at 15:03
  • @AkiTanaka For what it's worth, Movies & TV's header already has Goku as one of its images, so one of the iconic anime characters is already there. – Thunderforge Mar 20 at 20:03
  • @Thunderforge: I'd argue that's a sub-genre of TV chosen explicitly to represent Anime as a whole. There's no one character in all of Anime which would be suitable to represent Anime, since not everyone likes Shonen-style anime. – Makoto Mar 21 at 21:13
2

Manga and anime as a whole...

That's tough. This is a very diverse subject. To illustrate this point, my four favorite series are:

  • Outlaw Star (space punk, cyberpunk)
  • Cowboy Bebop (space)
  • Last Exile (fantasy, steampunk)
  • Samurai Champloo (fiction based in non-fiction, samurai/ninja/shogunate)

...and there aren't many similarities between those themes, except for maybe the panning sky shots we get.

Instead of looking in-universe to tie these themes together, why not look outside of the universe to?

(I can't draw so please use your imagination.)

Let the setting be a manga cafe. I haven't had an opportunity to set foot in one myself, but the idea here is that we want to capture all of the possibilities of Anime. At the top we have what looks like a fairly rudimentary-looking cafe, with someone tending the shops and a handful of patrons looking at either anime or manga, but when you scroll down to the bottom, you see one or more people reading manga or watching anime evoking some or all of the different genres mentioned above.

Why a manga cafe?

  • It's not just one thing - cafes often support multiple formats and multiple different genres.
  • It gives us some liberty to illustrate to casual passers-by that this site is about all anime and manga, and not just the most popular handful out there.
  • It allows us to design our icons and look and feel off of a unified and common theme as opposed to picking some sub-genre of anime or manga itself.

Everyone likes something specific about anime and manga. This design should reflect how inclusive we want to be of it.

  • @Peilonrayz: I was thinking that could qualify as "artwork in the footer", honestly. – Makoto Mar 14 at 14:47
  • @Peilonrayz: I'll be explicit then; I only ever intended the picture to show up at the bottom. – Makoto Mar 14 at 14:54
  • For footers with images, check Arqade, The Workplace and Movies & TV for examples. – Catija Mar 14 at 14:57
  • I'm not sure if what I'm proposing is too complex then @Catija; I was thinking along the dimensions of Worldbuilding along with something simple analogous to The Workplace. Let me know if I need to rein it in, though. – Makoto Mar 14 at 14:59
  • The Worldbuilding one is fine, too. I'm not the person actually doing the design, so I don't have much of a say, so (with some exceptions) feel free to dream big-ish and we'll see what she can do. :) – Catija Mar 14 at 15:05
1

I think having the badges as a cherry blossom leaf would be inclusive to most anime/manga. (Not too sure how they'd look in bronze, silver and gold)


Here's an article that lists quite a few animes that have them. I've seen them in various animes and mangas ranging from Shōnen (Byakuya Kuchiki - Bleach & Kirsch Vermillion - Black Clover), Shōjo and Seinen (Elfhelm - Bezerk).

  • 2
    Wouldn't cherry blossoms be more of a Japanese culture trope more than an Anime trope? – Makoto Mar 22 at 19:38
  • 1
    @Makoto It originates from Japanese culture, but that doesn't mean that it's not part of anime/manga culture too. – Peilonrayz Mar 22 at 19:43

You must log in to answer this question.

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