I haven’t been writing a lot lately due to the fact that I have been working on Yumestate’s third layout, titled “Midori”, or Green in Japanese. Instead of blogging on anime this time around, I wanted to share a little about the thought process that went into building Yumestate:Midori. Feel free to scroll through the screenshots if developer blogs don’t really interest you or is not your type of thing.
After coming back from a hiatus, I wanted to give Yumestate a fresh start for the year, and that meant choosing a colour theme that matches the current season of anime: winter/spring. In most places Spring has officially arrived (even if there’s still lots of snow), so naturally Green would be the choice of colour to base the palette and overall design. Here’s where it gets interesting:
Many people do not know that I’m colourblind, and nor should they as it’s not something you would bring up in an everyday conversation. I have a Green deficiency, meaning there are certain shades of green that appear grey or colourless in my eyes. For example, we may be looking at a tree’s leaves thinking “wow that’s a nice green.” We both see green in its leaves, but in reality I’m likely not seeing the same shade of green as you are.
So how exactly does that translate into graphic design? Well obviously I may be thinking that this green looks very nice on this background, but everyone else could be thinking that it’s too strong or too bright of a green to match everything else. It causes complications when I’m working alone and choosing colours for fonts, images, and the overall design of the website. Long story short, it takes extra time for me to get the colour theme just right.
In regards to anime, I wanted to choose a background that reflects what Yumestate:Midori is all about. I remember watching an anime movie titled Hoshi wo ou Kodomo, or loosely translated as “Children who chase lost voices”. The art was absolutely stunning and immediately reminds me of the art style in 5 Centimeters Per Second (I believe they’re the same production studio). Coincidentally Yumestate’s second layout had a background from 5CM Per Second, so it was a nice transition to Yumestate:Midori.
Next I would like to talk about the few changes I made from the previous layout:
You may have noticed some of the borders around the text fields are circular and smoother. I wanted to try out the new CSS-border-radius property, and not to get too techy on you, it’s basically just a simple setting in the code. I think it looks great and adds a warmer element to the website. There are parts that I kept more square, and I feel that adds to the simplistic look that I still want to be part of Yumestate.
The footer has been removed and replaced with a banner-isque-like layout. I felt the old footer was largely disconnect from the second layout, and having this now feels like the overall website flows better and is more aesthetically pleasing. There are 5 different images that cycle randomly; they are all screenshots that I’ve taken while watching anime. In no particular order they are: Highschool of the Dead, Sankarea, Denpa teki na Kanojo, K-ON!!, and Hoshi wo ou Kodomo.
The Layout Switcher has been removed. I felt that while the choice of switching between a dark and light contrast to the website was a nifty little feature, it wasn’t really necessary and all that important to the content that Yumestate offers. In the end, it was more work keeping it up and maintaining it, so I just decided to stick with one layout and one choice.
Lastly, I’ve added new banners to the top as well as kept some older ones. You can view all our banners with the link at the top navigation bar or just click here.
As always, thanks for reading and visiting Yumestate.com. In the next week, you will see some changes around the website as I begin to phase in the new layout. I apologize if the website goes down at all during the changes as I’m adding and removing code in between website designs. Stay tuned!