Hey! Listen! Let's have a talk about our site design! (The Idea Gathering 2015 Edition)

Question

Time flies while we're having fun, did you know? We almost two and a half years old.

We had a discussion in late 2013 on the topic, but I think now is a good time for us to ponder again about our site design, now that we finally started to settle in a bit more users. What would you like to see in our site design?

For now let's try to keep things simple.

If we were to graduate, we would have at least something (but not limited) like the following:

• A super cool new banner (it's been mentioned that we can get an artist do a commision for our banner)
• A fabulous new custom site design
• Awesome icons for our badges
• A super exclusive icon for our community

But let's not stop there! Let's try to do something interesting and unique with our design. While the final decision is up to the folks at Stack Exchange, it doesn't hurt to try to dream a little bigger now does it?

What would be something interesting and unique you ask?

• Maybe a css style that changes with the season or just with the times of day (UTC time). It bit like Gmail's "Tea House", but we needn't get as complicated (maybe just 3 different states, and not sun/moon tracking).
• Maybe a Google Doodle type interactive banner for our main site?
• Maybe a special gimmick for our "Ask a Question" button
• Maybe a special mascot character we can "replace" the community bot with?

Whatever ideas you have in mind, not matter how krazy (or trivial) it may seem, we'd like to hear it.

As some of you may or may not know, on the site we have a small social media (unofficial, i.e., unaffliated with ) community for promoting our site on Facebook and Google+. For that community we adopted a logo that we used to cross promote our site.

Before you go off on your own trying to make things, note that this is simply an information gathering session to get a better idea of what you'd like to see our site as once it's graduated. Try to keep things simple, but not too abstract. Any concept art and sketches are welcome nonetheless.

Some points (all optional) to consider writing about are:

• What is the first thing you want users to see when they visit out site?
  • What should the color scheme be like?
  • What subject do you want the cool banner to be of?
• What do you want our badge icons to look like? (Try to keep the design simple something too detailed might not transfer over well when shrunken down)
• What about other icons and element? (E.g., for our answered question element theme, we can have it looks like a stamped signature, like how Yahoo Japan Chiebukuro does for their Q&A site)
• Notes or comments on a logo design or color scheme
• Should we have a mascot? If so, if not, why?
• Any other points you wish to discuss (e.g., special theme for our chat room)

Let us know what you'd like to see when we graduate! Remember! Only with our combined efforts as a community can we truly grow. I look forward to hearing about what you guys have in mind for our site and community.

Some Personal Remarks: I don't think we should stick with a particular anime or manga as part of the theme, unless we can get a well-known (or decently renowned) manga/anime artist or illustrator to do a comission centerpiece for our site. Something like that would be a nice to have, but we'd probably need to get in contact with them to see if they are willing and have availability. It's something I'd like to do if possible, but that ultimately is a discussion for another time. Maybe we can find someone on Pixiv if we can't get a real pro to do it?

Answer 1

Woo! Party time!

---

Maybe a css style that changes with the season or just with the times of day (UTC time). It bit like Gmail's "Tea House", but we needn't get as complicated (maybe just 3 different states, and not sun/moon tracking).

I absolutely love this idea. I think it would be really cool to have a banner with trees on it that would show the Sakura blooming in April, and the leaves turning yellow and red in fall. It would definitely show that our site is unique and just how awesome of a community we are! (You know, very colorful. Seewutididthar?)

At the same time, I wouldn't want to see it change daily or by time of day. I think that would just be too distracting.

---

As for some specifics:

• What is the first thing you want users to see when they visit our site? - Anime. Our banner and site should reflect our chosen media. They should know they're on an anime site.
• What should the color scheme be like? - See below.
• What subject do you want the cool banner to be of? - This is where I'm not sure. Personally I'd like to see a detailed anime background, something like this, with characters in the foreground, both male and female. And of course, our mascot should be the most noticeable if we have one.
• What do you want our badge icons to look like? - I like the idea of using candies for this. It's not anime-exclusive, but I think it goes well with the atmosphere we want to convey. (These are seen in designs below.)
• What about other icons and element? - See below.
• Notes or comments on a logo design or color scheme - I like the icon we've been using for the community sites, because it is very much like the stylized kanji that Japanese prefectures use on their flags, and uses a very fitting kanji at that. For more beyond the logo, see below.
• Should we have a mascot? If so, if not, why? - Yes. What better way to represent an anime community than with an anime character?

---

With all this in mind, I put together a few designs last week. They're all pretty similar, but make varying degrees of changes. They use the site name "Ayama", which is one I came up with earlier. I think it fits better than trying to cram "Anime & Manga" into the banner.

Note that in the below designs, artwork from DeviantArt was used ({1} {2}). These would be replaced with commissioned art in the final design.

Design 1

Color scheme:

This was my first attempt. I attempted to use elements of anime in the banner, and manga for the main page, as sort of a complement to the (respective) visual, and textual components of the site. Some icons are close to, or identical to, the vanilla site, but notably there is the accepted stamp (similar to what Krazer suggested), the candy badges, and the site logo. It uses very muted tones to contrast elements like the anime characters as well as suit the tone of black-and-white manga without actually being monochromatic.

Design 2

Color scheme:

This design is very similar to #1, but tries to somewhat mimic the minimalist approach that Stack Exchange has been taking with their recent sites. 3D elements are reduced in z-distance and fonts and effects are simplified.

Design 3

Color scheme:

In the vein of #2, I wanted to try seeing what our site would look like with more color (to reflect anime moreso than manga, but still represent both cultures). This uses a brighter color scheme and does away with the manga pages (though they could be re-added if we decided we wanted them with this scheme). It very much touches on Stack Exchange's latest design ideas, trying to use flat colors while still creating contrast between them (such as the brown-blue of the logo and title).

Answer 2

How about we do it ourselves again and write a userscript that overrides whatever site design we get if we think we can do better?

I'm not sure any site is getting a theme that changes several times a day or even with each of 4 seasons. But we could totally stick some pics together and make it happen with a custom style.

Not saying we should abandon this post, on the contrary, whatever SE team won't implement, we could do add on to their design. Or just ditch it and make our own if we don't like it!

Answer 3

I agree with much of what's been mentioned so far, especially the posts by キルア, seijitsu, and Toshinou-san. In particular, I agree with seijitsu that we should try to stay away from specific recent series and make the site inviting to everyone, and both seijitsu and Toshinou-san cautioned against lapsing into purely Japanese imagery which is only associated with anime and manga in Western minds.

Otherwise, I have a few random suggestions:

Mascot

I like the idea of a mascot, either an animal mascot or a cute girl mascot. I like a cute girl mascot, but I can see why that might be less than inviting to some users. Maybe something that resembles Madoka's Kyuubei (but without the evil).

Color Scheme

I like the idea of an azure and white color scheme, like Aria's predominant color scheme:

To me, it feels relaxing (like readers should feel when they're browsing a fun site about anime), but it can also look fairly solid and official. It's low-key, but not boring.

Original Art

Gao and seijitsu both mentioned getting someone from Pixiv to do some art for us. I think that would be amazing.

Badges

One of the older threads had a suggestion to use shuriken as badges, and it seems that suggestion won't die. I don't really like it. Although I did like Toshinou Kyouko's suggestion of cherry blossoms, seijitsu is right that this is more Japanese than particularly anime.

What about using a stylized quill pen, like the ones mangaka draw with?

It has a distinctive shape (especially in side-view), it's easy to color gold/silver/bronze, and it's specific to manga. Movies and TV uses a film reel for badges; this is similar to that.

Accepted Answers

This might be too purely Japanese, but what about a maru (circle) sign for our accepted answers instead of a check? Reason: see this question.

Answer 4

Basics

The name of the site should be written in a clear, easy-to-read font in English: “Anime and Manga” or “Anime & Manga.” The font used should always be the same (in site design, on facebook, etc.): Think like famous, successful logos such as ESPN, FedEx, ebay, Star Wars, etc.

The logo should generally be a square or round shape (think like the McDonald’s “M”, the Apple apple, the Pepsi circle, the Starbucks mermaid, the AT&T “Death Star,” the Nike checkmark, the Superman “S,” logos of TV channels and car manufacturers) so that it can be shown stand-alone in a compact space OR paired next to the name of the site. Notice how the main SE logo does this: there is a square logo to the left of the easy-to-read words “StackExchange.”

The logo should be as simple as possible so that it becomes easily recognizable (McDonalds and Apple’s logos are easier to conjure up in your mind than the Starbucks mermaid or KFC’s Colonel Sanders). Helpful advice is available at the Graphic Design SE: the most useful ones are What are the key principles that effective designs share? and What technical/objective qualities do good logos have?, but there are more here, here, here, here, and here.

I advise no Japanese syllabary (“lettering” such as kanji, hiragana, katakana) in images such as logo, banner, buttons, and mascot design. For those who cannot read it, including it in the logo or on a button could be off-putting and they feel like they are in the dark, like this site is too esoteric. There are other cases in the site where it makes sense to provide Japanese, but not in the site design.

Any illustration needs to accurately reflect standard, recognizable anime/manga art style even if it is illustrated by someone who is not a pro in Japan. Of course real mangaka bear different art styles, but I can almost always detect whether an illustration is professional manga or high-quality doujinshi, versus drawn by a non-Japanese outside of Japan in basic imitation of the general art style (for example, OEL "manga", anime/manga-inspired comics and web-comics, and anime-influenced animation). To convey a sense of authority, the illustration must not look non-anime/manga style (like Avatar: The Last Air-Bender character design) and it must not look like amateur fanart. There are many talented fanart artists on Pixiv, so someone who can pull off authentic-looking anime painted cel (or computer animated) art and/or manga art should be commissioned or recruited if original illustration is desired.

... “Ayama” is counter-intuitive because 1) it is not at all clear to a first-time visitor what the word is supposed to mean, 2) it is not even clear to many of us otaku as to what it is supposed to mean, and 3) Japanese contractions are in the format of the first two syllables of the first word + the first two syllables of the second word, which would be “Ani” (アニ) + “Man” (漫＝まん) = “AniMan.” “AniMan” is not a good name to choose because it sounds male-centric (given that “man” is a gendered English word).

Specifics

Logo Yes.

The Logo and Buttons need to be anime/manga specific (something that originated in anime/manga, not something generally about Japanese culture that could just as easily be adopted for the logo/buttons of the Japanese Language SE or the Japanese Culture SE). Furthermore, something like a cherry blossom is associated by Japanese people with Japanese culture, but it is not a tree exclusive to Japan. The Science Fiction & Fantasy SE uses the Rebel Alliance logo from Star Wars for its buttons, which fits the theme well because it is an image that is specific to sci-fi and is never found outside of sci-fi (it would not fit as a button for any other SE).

An example could be an adaption of an item that was featured in a classic manga or anime, such as an iconic item in Testuwan Atom (Astro Boy) since Osamu Tezuka is generally regarded as the “God of Manga” in Japan and outside of Japan. Oda Eiichiro (who created ONE PIECE) may be the most well-known mangaka alive in Japan today, but adopting something more timeless than current series might be preferable.

... I advise a logo design other than ʞɹɐzǝɹ’s mon (family crest) logo style because, while a mon is recognizable within Japanese culture and among some anime/manga fans, 1) many will not register what it is supposed to be, and 2) according to Japanese cultural convention (as far as I know), new mon cannot be invented, in the same way that certain kanji cannot be combined to create a new name that is considered culturally "proper." It could be viewed as awkward, or at worst, disrespectful, by Japanese visitors to the site.

Banner Yes.

It should feature the Logo and the name of the site in easy-to-read font.

Google Doodle-style Changing Banner No.

Google can do it because almost every internet user in the world instantly recognizes the Google logo, so they can make adaptions to it and people will still know they’re at the Google website. Any logo that is not on the level of McDonald’s or Coca-Cola cannot change up their logo or visitors can get confused.

Google Doodles already feature Japanese holidays and occasions such as Setsubun, Hina Matsuri, Tanabata, etc. so it would not be unique to do this at SE.

Mascot Yes.

Anime/manga tend to have mascots, so it is fitting.

The mascot can be the logo, or it can be used elsewhere. Like a logo, it should be simple (not require a lot of lines to draw).

Preferably a cute chibi (square-ish) mascot (think like magical girls' animal guides, or cell phone charms carried by anime characters), since those are more common in anime/manga than human-sized or non-cute mascots.

Button Icons and "Ask a Question" Button Gimmick Yes — but only if these are originated in anime/manga and not too series-specific.

This site should ideally feel inviting to fans of shounen, shoujo, children’s anime, etc. Choosing buttons or a gimmick that some demographics would not recognize would not help broaden the user base, and could send an unintentional message that a certain series or genre is more important than others.

Again, something from an established and renowned classic like Tezuka’s work might be better than something contemporary.

An alternate theme for buttons could be a small illustration of a tool of the trade used in manga illustration or in anime production (before some artists have switched over to computer), such as the feather sweeper which is iconic in Bakuman. and can be see in Gekkan Shoujo Nozaki-kun and Mangaka-san to Assistant-san to, or the curve ruler or the chunky black ink bottle.

Badge Icons Yes.

Again, something that originated in anime/manga yet not too specific that some people feel left out. The Arqade SE uses coins, so it would not necessarily overlap to think up something that connotes leveling up in a game.

Although it is specific to one anime title, if it could be somehow accomplished without committing copyright infringement, how about a "poké ball" (known as a "monster ball" in the original Japanese version)? 1) Pokemon is not strongly associated with a particular genre such as moe or shoujo and the series has been running non-stop from 1997 to the present without signs of running out of steam even though it has spawned a bunch of copycats, 2) the series became well-known around the world beyond the otaku demographic (from little kids up through their parents) via the video game and customizable card game (and the infamous news story about seizures) and the animated part of the franchise is generally understood to be Japanese animation by non-otaku, and 3) it's a "gotta catch 'em all" item which fits the idea of collecting badges. How did the Science Fiction & Fantasy SE get permission to use a Star Wars logo for their buttons?

... I advise badges that do not reflect the imperial regalia, since that is political, historical, and cultural rather than anime/manga specific.

Site Design Yes, if it is clean.

The best site design is simple (think of Wikipedia, Anime News Network, etc.) and primarily white in background color, so visitors can easily find things quickly. A simple, clean layout connotes authority, which helps visitors and users trust that the answers are reputable and trustworthy (for example, see StackOverflow SE, the English Language & Usage SE, the Mathematics SE, etc.).

Even though the Arqade SE uses bright colors, the artwork is very simple (retro) rather than in-your-face excitement bursting at the viewer.

See What are some common mistakes that a designer can make when designing for web, and how can they be avoided?, What makes a design professional?, and How to direct users eyes on a website at the Graphic Design SE.

Color Scheme

One idea: Bold color on the left side margin to represent anime, and black and white on the right side margin to represent manga.

This could be done with キルア’s idea of the manga sheets hanging out from each side: it could be the edge of anime cells on the left and the edge of manga pages on the right. This would have color, fit the theme of the SE, but not be intrusive.

See How can I improve my color selection skill? at the Graphic Design SE.

CSS Style No.

I second Ankit Sharma's concern about season-based design (unless it were optional in account settings, so some users could opt to see a simple/clean layout similar to the current one, some could choose summer, and some could choose winter, based on their location on the globe). Ideally, SE would be frequented by people from many nations, and they ought not be off-put by a northern hemisphere-centric design just because Japan is north of the equator.

What is the first thing you want users to see when they visit the site?

Name of the SE in clear font, links to “About” and “FAQ” for first-time visitors, and a list of Questions.

Answer 5

Banner and custom site design

What Eric came up with: iconic characters in a marching line like that in the ED of Carnival Phantasm. If not, then some character who is a combination of many from different series.

Icons for badges

Since the badges are divided into three categories: bronze, silver and gold, we may match icons of the three imperial regalia of Japan that appears everywhere in anime to the three class badges. It doesn't have to be the imperial regalia, anything that comes in threes and is representative of the anime & manga culture could work.

Site icon

I really like the look of the mon of 画 and feel that it should appear somewhere on our community site. However, I can't tell by looking at the mon what subject it is supposed to represent. On the other hand, the current site icon with its kanji character 画 is pretty clear to me that it is about manga and anime^†.

Mascot

I don't think we should have a mascot, but I'm not opposed to having one if the mascot is overwhelmingly accepted by the community.

Tour page

If we ever get our customized Tour page, I wish we could have Chiyuki from Death Parade as our guide to familiarize new users to the SE Q&A model and go over the rules and functionality of our site in her own unique *-tsu ways. But, because of licensing issues, we probably can't have any visual or audio of the real Chiyuki.

Re some personal remarks

I put forward a candidate: VL, the creator of Arancia. I also think えむかみ's art style is compatible with our needs for the site design.

---

^† In Chinese, anime is written as 动画.

Answer 6

Okay, this is the 4th time I've written this answer and made these images because something kept going wrong, so I'm keeping it minimal and I'm not focussing on making it look pretty.

Overall Site Design:

• I like @キルア's example of the manga panels running down the side.

Some suggestions though.

• I think we should stick with 'Anime & Manga' for our site name. There is definitely room for it and it's much easier to understand than Ayama - our user base is primarily English-speaking - Even I had to look up what the kanji was and what Ayama meant. I do like the petals inside the stylized version though - which is why I chose the flowered yahoo stamp

• Black & White is pretty dull. I think it could work as a silhouette background on Meta, but not on the main site. By adding Yahoo's stamp and saturating it a bit, look how much more it pops out.

• The images that were included were nice, but they won't be the final version as they're someone else's characters. If we do go this route - and have a mascot - I think they should be featured up there instead.

Smaller Features

• Sweets don't instantly scream Anime & Manga to the user. I would prefer something relatable - take for example @iklsr's shuriken on the previous suggestion:

I'm not saying it has to be shuriken, It could be cherry blossom leaves or something else featured in anime a lot (and on a side note, they don't have to be gold-silver-bronze either - maybe the leaves could be gold,deep red,pink?

• Again, I like @キルア's example of this (in the previous question) - not those exact icons, but I can see this concept working, I just don't have enough artistic skills to demonstrate it :P

Mascot

I think most people support the idea of a mascot (although, choosing one is a different matter >_> ). I still think the mascot should have a surrounding theme of investigation - rather than one with some silly quirks, As it will integrate into the site smoother. I like @Gao's suggestion of having them explain the tour page (although I'm not sure how willing SE would be to do that :P). It doesn't necessarily have to be the mascot I proposed in the meta question, but I think they fit the theme & the site well.

Things to bear in mind

• I think we should be careful of overlapping into purely Japanese imagery in case Japanese Language / Japanese Culture graduate.
• I think we should be careful not to over-use the Manga Temple font.

Answer 7

Few of my suggestions:

• Season based design will not look global, as you might know all of us are not from same region. Different region different weather and season and applying UTC means ignoring most of all users.
• I think we should use few elements from famous anime/manga Like pokeball for badges or some Naruto clan symbol for badges.
• I think it will look good if we do fusion of black and white with colour to represent manga and anime both.
• Mascot, why not. It will looks cool and I don't thing anime and manga site should be dull at all. It should be cheerful.
• Some made for site manga comic page for bottom with our own mascot.

Answer 8

pink theme

(just a quick meme theme where everything is a shade of pink)

.container {box-shadow: #FFFAFE 0 120px 0 inset}
#hlogo a {color: #F27FE0}
.question-hyperlink:hover, .answer-hyperlink:hover, .question-hyperlink:active, .answer-hyperlink:active {color:#e0aadf}
.question-hyperlink, .answer-hyperlink {color:#FB66E9}

.owner {background-color:#FEEEFC}
.user-info {color:#907292}
a {color:#C24EC1}
#sidebar .module.community-bulletin a {color:#C24EC1 !important;}

blockquote {background-color:#FEEDFF; border-left: 2px solid #f48eff}

.post-tag, .geo-tag, .container .chosen-choices .search-choice, .container .chosen-container-multi .chosen-choices li.search-choice {
    color: #865983;
    background-color: #FEF7FF;
    border-color: #DBC0DB;
}

feel free to edit to improve the tones or something

Answer 9

How about a new position for our stack logo?

All the SE (graduated) sites have their logo on top, either on the left side or in the middle.

But ours should be on the right side. Why? Because mainly, it would give a manga-vibe and also, it will be certainly different.