Gathering ideas for the site design — 2019 edition!

Question

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.

Answer 1

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:

and/or

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:

Simple and flat looking, with layers like the above.

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

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.

Answer 2

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.

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.

---

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.sstatic.net/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.sstatic.net/kZrMD.png");
  background-size: 180px 64px;
}

// Bus stop

body {
  background-color: #09515D;
  background-image: url("https://i.sstatic.net/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.sstatic.net/9jS3B.png");
  background-size: 252px 64px;
}

Answer 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...

Answer 4

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.

Answer 5

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).