Blog /  Tagged: the piass

Visual-kei has been a passion of mine since 2007. Like many of our users, I found out about its existence through the web. As a result, I became very interested in web design and technology and have modeled my career goals as means of combining those two passions. I’ve recently graduated college with a degree in New Media Interactive Development. While the phrase “new media” is vague, sweeping, and has absolutely no convention from place to place, it is typically used to describe anything dealing with UI (user interface) be it design, advertising, development, or marketing. In short, I take someone’s designs for a web page and I make the part you as a user sees work. While I’m still very new to the field in a professional sense, I am exposed to cutting edge industry standards on a daily basis (quite literally daily: I’ve had to work the past 3 weekends). While I’m not killing myself over client demands, I do spend quite a bit of time stalking indie bandmen on the internet and try to keep up to date on the happenings of the irrelevant bands I follow. As a result, I cannot help but notice one unfortunate, glaring, reality: Japanese band sites are absolutely horrid.

Now I’ll be the first to tell you that I’m not the best designer. I’ll even take it step further to state that I’m not even a good designer--everything I put together either comes out tacky, trite, an eyesore, or some hodgepodge in between. But that’s perfectly okay: my job is to make it work, not make it look good. However, whomever is making these band sites seems to follow completely different conventions than we do here in the US. Here are some examples for you:
 

Example Number 1



































 

What’s wrong?


So the first issue that really sticks out is that this is a splash page. Splash pages are essentially just a page the user lands on when getting to a site: it gives very little info about what is contained elsewhere and in the olden days it was used to direct them to a mobile or PC site. That’s what is going on here: the two links under the image are for a computer’s display and for a mobile phone’s display.

Why is this bad?

There is technology out there that takes care of this for us. It is called ~*~​Responsive Design~*~. What that means is that the design of a web page is supposed to be responsive to the viewer’s screen size or, more recently, their device (iPad vs. Nexus tablet vs. Android phone vs. Blackberry vs. Nintendo 3DS etc). This lets causes designers to take into consideration device use, but it will save time by having to prevent complete site redesign and redevelopment for two versions of the same thing.
 

Example Number 2


 

What’s wrong?

This example can warrant it’s own article, honestly. I’ll try to be brief. Firstly, the font colors: they’re all over the place and way too loud. Secondly, the layout of the desktop version is a mess. I don’t know where to look since there are pictures of people in several places. In art, there was a study done for where people’s eyes go to first when looking at a picture. The first target is always something shaped like a person, second are animals, third are human-made object, fourth are shapes, and so on and so forth. When there are several points that have people everywhere, especially when there really aren’t many reasons to have people everywhere, it causes tension for the viewer. Do I look at their main picture? Do I look at their upcoming concert picture? Do I look at the video on the bottom right? Do I look at the bright red text???? I don’t know! I’m not going to knock the Photoshop 4 silver and white gradient background because instead I’m going to mention on very very important flaw that could have been applied to the first example: the mobile site has different content than the pc site.
 

Why is that bad?

If a font color is distracting, you’re going to spend more time either squinting, highlighting the text you want to read, or, most likely, you’ll say “wow no” and just go somewhere else. Visual-kei sites are a unique niche in the sense that the user is only there because they absolutely have to be to get certain information, so we put up with a lot of crap that really would not fly at all here in the US (or occidental culture as a whole). Your content is supposed to make you want to read it, and if everything is obnoxious or stands out as “important!!!,” then nothing stands out and everything is a loud mess. With that being said, font should never be that bright of a lime green unless you’re trying to purposely harm people (the hex is probably #00FF00...not that I’ve, you know, done that).

My second point I kind of alluded to. A site needs barriers for content, else everything gets blended together and it doesn’t make much sense. By how the PC page is structured, have the band image front and center, then again on the side, coupled with a carousel of advertisements, topped with other flyers...everything just gets lost. To add to it, everything sits within the same grey container, so there are no additional visual dividers as well aside from the column structure.

The last point is the biggest thing I’d like to mention about this example. According to this article, one of the largest mistakes with mobile design is that sometimes to compensate for less screen real estate, less content gets added. Essentially, this indirectly punishes the user for viewing your site on a certain device. God knows looking at this site felt like divine punishment for me.

Check it: the navigation at the top in the PC version isn’t even really, well, a thing. Additionally, there’s an arrow button interface that I assume is intended to be used to navigate through content. However, they don’t do anything. Additionally, the PC site doesn’t even have 3 out of the 5 pages the mobile site has. To even see the band’s discography or profile, I have quite literally leave the site and go back in through the mobile version. Had I not been a Yuuga stan, I would have just given up.

Example 3


​What’s wrong?


1998 GeoCities Realness, just in time for FebRUary.
[[war flashbacks]]

Well, first of all: the lime font, again. Seriously, why you do dis? Second of all, there’s no theme to the font colors either. Colors that look like the guy who made this site puked Nerds candy on the screen is never a proper design decision (industry way of saying “your site looks awful”). Additionally, clicking on the navigation at the top makes the site layout change depending on which section you’re in, making it feel like a whole different site. At some points, there’s even two levels of page navigation going on.
Also, their name is the “The Jolly Pickles,” yet their background images are of chili peppers. When I sent this site to another friend, she asked me the same thing.
Her: If they’re supposed to be pickles, why are they using peppers??
Me: English is a hard language.
 

Why is this bad?


Because peppers are not pickles. In their defense, they do change their image on a different pages and give an assortment of chili peppers. Variety is the spice of life.
For real though: it’s super confusing if you have two sets of navigation that aren’t intrinsically related, especially when the 2nd set is basically like a second website within another website. Each different section also has different style conventions too, to add to the confusion.
 

But why??

This question has always been a concern of mine once I started data mining for information the web to write descriptive posts about bands when I became a BlogSpot uploader. Amidst the characters I didn’t understand, I also couldn’t figure out how people really got used to being exposed to this kind of web design on a daily basis. The inspiration for this article came from another article that my pickled friend linked to me, here. What I found there was incredibly interesting and informative.

Essentially, Japanese web sites are like this because that’s how they like them. Many other popular sites are cluttered, jumbled, and are information overload. Take a look at Yahoo.jp, CdJapan.co.jp (Japanese site that’s in English, but the clutter still remains), Mbok, or even compare the US and Japanese versions of Coca-Cola. There is definitely a distinct cultural difference in terms of content, design, and presentation. I cannot speak for many European countries, but in the US design has definitely taken a turn towards much much cleaner presentation, using bright colors with clear contrast and a somewhat recent phobia of ever having to scroll vertically (???). In Japan, however, it has become commonplace to try to cram as much information into as little space as possible. While it is generally considered poor user experience to do this, if you are culturally conditioned to expect this then you will not consider this to be a problem.

Another issue the article addresses is the choice of browser: IE 6.


IE 7 is the oldest browsers in the US that web standards support, but even then developers absolutely abhor it. Without getting into why that browser is awful and bad and you should feel worse than bad if you still use it, IE 6 is even older. That means they can’t use anything fancy in terms of CSS and some limitations in Javascript. As a society, we are slowly trying to evolve beyond IE7 (but can’t due to businesses not being able to afford upgrading their computer infrastructure due to highly strategic planning by Microsoft) and move on to more modern browsers.

A second cultural difference mentioned in this article is the use of mobile phones. Japan was very receptive to mobile phones and actually only really started caring about laptops and personal computers very recently. That’s probably why anime characters are more likely to be shown with cell phones instead of a laptop. When I said “mobile phones,” I meant like the tall, skinny, flip phones (not smartphones until more recently). That is why some mobile sites are just a single skinny column all the way to the left of the screen. While this is not how you are supposed to handle mobile designs, it saves money to make a one-size-kind-of-fits-nothing-at-all site. A last interesting point this article pointed out was that they are very prone to using small images to speed up page load times. That’s why Ameblo blog images are 3 x 3 pixels!



​All in all, Japanese websites from a Western perspective are atrocious. There’s really no way to sugar coat it and say that in a nicer fashion, and I am not going to bother to attempt to. This is due to a number of cultural differences in technology, aesthetics, and expectations. Maybe one day websites will be more universally palatable, but as it stands, it looks like I’m going to have to dig through awful and confusing blog sites to figure out the album art of an upcoming single.
 
January 24, 2014 09:08EST