Behind the Design Behind the Design


I’ve been doing web design for a number of years now, since I was in high school in fact. I can’t say I was creating anything extravagant at the time. I fell into the usual category of bright, shiny backgrounds and way too many gifs that hurt the eyes on a page hosted by Yahoo Geocities (yes, I’m that old). But, I was 16 at the time. It’s all that could be expected from a 16 year old. However horrible those first few pages were they did inspire me to continue learning and growing until I could create pages that didn’t suck so bad (or even gain the ability to recognize how badly they sucked).

My journey into learning PHP began when I wished to host an art and graphics site and didn’t want to keep editing static html pages in order to update or add new content. Unfortunately, Geocities just wasn’t cutting it anymore. I could have used some sort of free CMS like joomla but no… I was pretty stubborn and insisted on doing my own thing. So I bought my first really cheap and crappy hosting plan along with my very first domain: Since that time, DS has been a host for a number of many things I’ve experimented with throughout the past decade. It’s been a fantastic, though unstable play ground for learning. It was never meant to be any one thing, always as sort of an experiment for myself and others to learn from. Almost 10 years since I bought DS it’s been decided to give the site more direction, though also allow it to consistently remain an experiment. What do I mean by experiment?

DS was the first site I ever built a login page for, with encrypted passwords and everything! The first site that needed a MySQL database, allowed user sign-up, allowed staffing and forums. Anything I wished to learn I implemented on DS, fit it in somehow even if it wasn’t altogether relevant. Today DS has been settled into place as a music database for Japanese visual kei and indies music, much more of a direction than it’s ever had before. It’s still far from perfect. It needs more love, more updating and the backend still doesn’t allow for all the features that were initially planned. I now manage it with Kai who handles back-end development while I’ve taken over front-end development only. It’s still and experiment for both of us and our primary learning platform. I don’t think that aspect will ever change. Home Screen Shot Main Page


When I designed DS I really had no idea where to start. It seems much more difficult to design when you’re given free range of everything. I started with color scheme since that’s usually a good foundation towards establishing a feel to everything. Oddly enough I started with a deep turquoise color though it didn’t fit quite right. To keep with the Visual Kei aspect of things I knew I wanted something dark without going full on flat black. Cool grays felt very fitting; not too dark, not too much contrast but still deep and easier on the eyes for browsing content. Because this is a music site I allowed the music to be my inspiration. This design is titled “Negai” (meaning “wish”) after the 9GOATS BLACK OUT song of the same name. This also gave me the idea of doing the animated header, something that felt ethereal.

I’ve fallen in love with the idea of simple and clean web layouts so that’s more of what I was going for, I didn’t want to bog things up too much with a lot of content on the front page or make navigation difficult/confusing. I generally like to avoid sidebars unless a site has a vast amount of content to display, I feel they only add clutter and really impact the idea of clean negative space. This has been carried throughout the whole design of the page where even profile pages are kept without sidebar information. I imagine this may change in the future as we add individual band member profiles, discographies, events calendars and subscription options. In that case it admittedly may be more difficult to navigation profiles with too vast an amount of content in a single column. Band Profile Screen Shot band profile page.


The animated header was my first experiment with CSS3 animation. User settings allow for the header animation to be turned on or off, though I think I’ll end up adding a Java script button in at some point to any visitor can control this feature. This was also my first time doing lazy load images since this promised to be a rather image heavy site, loading times are always a concern. There is some discussion on doing a pre-loader since this is, even with the lazy load images, a rather heavy site to load. That would likely not happen until we have a more stable mobile/responsive version sorted first. Social media sharing is not something pre-built into Pyro, nor a free add-on, so I developed a PHP function to handle necessary aspects of making social media sharing possible.

DS is no longer a read-only site with static information. User login only served the purpose of allowing access to hidden band profile information or use the forum. Now user accounts have much more function behind them, including interacting with other users and site content. We’re being a bit ambitious in pushing DS towards being not just a database but also a social community. Lots of other user functions will be underway but it really all depends on our CMS.

DS has almost always worked off it’s own custom CMS. I believe Kai is on his 4th one at the moment, we end up occasionally starting over for something better. Our current version is built off of Pyro CMS which still has a few issues we’re not too pleased about. More importantly for me as a front-end developer, PyroCMS severely lacks thorough and accurate documentation. They have their own system of calling partials for site information instead of using straight php that simply does not have detailed enough documentation to make it easy to learn or implement. I like complete control of the content that displays, including how forms and user information is printed as well as collected, Pyro really makes it difficult to control certain fine details. PyroCMS is based off of CodeIgniter as well which seems to be on it’s way out as a stable and well supported PHP framework. Pyro’s 3.0 development is in it’s alpha stages. Supposedly this will be taking the CMS in a new direction and sounds fairly hopeful. Until they release version 3.0 we’re reluctant to completely dump it and start over again with a new CMS. Until that time we’ve put building other modules and features on hold until we know if there’s a possible re-build in the future or not.


DS has become a very community oriented site. With this latest version it’s the first time we’ve allowed staff members to directly access the admin panel to add and edit database information. We’d like to open it up to the public and allow any user to sign in and edit/add profiles and other information about bands. It’s a bit of a quality control issue though. The CMS must be very stable first and we will need more staff to monitor what information is being submitted to the database to avoid double posts, plagiarism, and completely unrelated content or spam.

As far as future design, I had an idea to do more of a parallax scrolling page though I felt I’d hold off on that for this time around. This was also my first time fully implementing bootstrap on a live site. The only unfortunate thing is once I was done coding the layout a new version of bootstrap came out! Just my luck. So I expect I’ll be doing a new version of this Negai theme in the future with the newer version of Bootstrap and likely some sort of parallax scrolling effect in place. article and user profile screen shot article and user profile page.

IKA Theme 1.0

IKA theme preview

Wanting to start my own portfolio site, I found myself delving back into the world of wordpress themes. With all the CMS options available I still find wordpress to be a dynamic, customizable and well documented open source choice for building user friendly sites.

Its been a few years since I’ve made a theme from scratch and I was pleasantly surprised with all the new features added over the years, particularly with the customizer. WordPress’ 4.0 update added more emphasis on coding themes to take advantage of the customizer for changing a site’s appearance and functionality, getting rid of the need to build a custom theme settings page. This leaves the site admin free to change practically anything about their site, even re-design it in real time, without having to touch a single line of code.

With that said, I give you IKA theme version 1.0! I plan on releasing a public version for download soon. I feel there are still a few more features I’d like to add before then.

IKA Theme 1.0 Features

Built using bootstrap, HTML5 and CSS3; IKA features a full assortment of theme settings including text and background colors, font families and sizes, site widths and layouts, navigation and menu styles. Arrange your page the way you want with custom widgets to control content on the main page. Has two built in custom post types for creating a portfolio gallery ( with separate category/tag taxonomy ) and building a slider. IKA Theme is automatically responsive to a variety of browser sizes for tablets and mobile phones.

I look forward to posting more details once it’s ready for download!