Planning Modern Edge

I’ve decided to blog my design and development process for the WordPress theme I call Modern Edge which will also be used for IsaacLean.com’s first revamp. I’m considering to sell it in the future too which is why it isn’t blatantly named IsaacLean.com like the current theme, but I think it will be exclusive for this website for a while. Instead of blogging about everything once the theme is done, I thought it would be more interesting to blog during the theme’s creation so it could more accurately reflect my thought process. Chances are I’m going to cut things out if I just post everything afterwards which will probably leave out some extra detail that I might be able to reflect on to improve myself afterwards.

Feeling

So the first thing I thought about was the feeling. Since this was a theme that was going to be on my personal website, I wanted it to reflect about myself some how. Immediately I thought about colors. Being that blue is my favorite color, I decided to design around it. (It’s also why the current website is blue actually.) The next thing I started thinking about was space. Originally as a child I wanted to be an astronaut since space intrigued me, so to reflect that childhood dream I started thinking about space and techy things.

The Cool Idea That Just Didn’t Work

My first impulse was to make a dark layout because… well space is dark. To contrast with the darkness, there would be a lot of glowing blue. Now to make it feel techy, being a gamer I immediately thought of taking inspiration from the interfaces used in the Dead Space game franchise. What interested me wasn’t just the futuristic theme of the game. It was really its creative use of futuristic user interfaces. For example, in Dead Space 2, there is no HUD. The interface is actually integrated with the in-game environment. So when you go through a menu on Dead Space 2, you aren’t just scrolling through it with your joystick. You actually see your character interact with the interface in the world. This technique is a lot easier to pull off in futuristic games since the creative interfaces used in the game are very believable with a futuristic setting. Check out some gameplay footage of the game shown in the following video:

Warning: The following video may content some mature and disturbing content.
Dead Space 2

The next thing that came to mind was the movie Minority Report. The interfaces used are similar to those found in the Dead Space franchise. The main thing I noticed in the video clip though was the way Tom Cruise interacted with the interface. It reminded me of how we use many modern Apple devices today (which is interesting because the iPhone wasn’t released until 2007). Immediately I thought that perhaps I could code some interesting interactions as well as give a sleek feeling by using JavaScript/jQuery.

Warning: The following video may content some mature and disturbing content.
Minority Report

For more specific color choices and experiences, I started looking at many websites. These webpages in particular interested me:
Namaste
Screenshot of Namaste's website

Bungie – About Us
Screenshot of Bungie's About Us page

Dead Space 2
Screenshot of Dead Space 2's website

So I began thinking about what technologies I wanted to use. While I could easily use Flash, I wanted to use JavaScript/jQuery/Ajax instead. That way the website would be more search engine friendly and it would be a bit more challenging to code. Also, seeing Flash-like affects simulated in jQuery is very rewarding since it’s cool to say, “That isn’t Flash! It’s generated without the use of 3rd party plugins!” even though jQuery has been around for ages. (Well when you think about it, jQuery’s only been around for 5 years. But in technology time that’s the equivalent to 5 centuries.)

With the colors, inspiration, and technologies ready, I whipped out my pencil and sketchbook and started drafting. This is the first draft I ended up with:
First draft of Modern Edge
The basic idea was that the content area (the panels in the center) would change without refreshing the page as the user interacted with navigational elements. Each time a new page is loaded, the header (the top bar) and the footer (the bottom bar) would remain on the page while the content areas would fade and slide off the screen, only to be replaced with the newly requested content panels. Since the entire page doesn’t reload like most websites, the experience would feel more persistent. This technology combined with the overall feeling the website would make it feel like you’re going through a computer system instead of a series of webpages.

The more and more I thought about it though, the more I was thinking about really dark, techy interfaces that would appeal mainly to techy nerds. While the whole concept was cool, perhaps it was too bizarre for the average visitor. Remember, this site isn’t just for those techy people, but it’s also a way for potential clients to evaluate my work and contact me too so I need to make sure it’s accessible and appealing to them. Sure I want to give a techy-vibe, but at the same time I don’t want to deter my source of income. The last thing I want is to scare away a potential client just because he/she thinks the website is a computer game or something like that. Not only that, but I have to build this theme as soon as possible so I can submit it along with my resume to potential employers for this upcoming school year. Doing something as experimental as this idea would take a lot of research and iteration to get it right. The whole concept intrigues me though, so I’m considering to give it a go as a side-experiment when I have spare time (which probably won’t be for a long while).

A Total 180

After sadly scrapping that very cool idea, I decided to do a total 180 and create a light layout. To appeal to both techy and potential client visitors, I decided to go for a more modern and clean feel. The colors would center around blue, grey, and white, and I wanted the background to feel textured with grain/noise so it wouldn’t feel to bland. Here’s one example of a similar look I wanted for the background:
Yoast – The anatomy of a WordPress theme
Screenshot of The anatomy of a WordPress theme article on Yoast

Then I came across the portfolio of Nick Jones on his website called Narrow Design. What interested me the most was the way the visitors interacted with the website. I definitely liked the sleek feeling it gave. The way the elements slid into their places was interesting and even fun. While it didn’t have a futuristic theme, the interface reminded me of the sleekness shown in the interfaces in Dead Space 2 and Minority Report. Another thing that caught my eye was that the website was left-aligned. Most websites these days are centered on the screen. Off the top of my head, A List Apart was the only other left-aligned website I could think of. It would be cool to do something a bit more unique like left-alignment to make my website stand out.
Narrow Design
Screenshot of Narrow Design's website

Immediately after seeing the website, I started the second draft.
Second draft of Modern Edge
As you can see, the inspiration was heavily taken from Narrow Design, however there are many design considerations I took that make it a lot different. For one, instead of using Flash, like the first idea I wanted to use JavaScript/jQuery/Ajax instead to simulate that cool, sleek feeling. Second, the design has to handle both a blog and a portfolio while integrating many of WordPress’s dynamic features like the search and categories instead of just a showcase for portfolio items.

Now to explain the draft’s intended functionality. So basically the website is split into 3 columns. Column 1 which is on the far left acts as as the “header” of the page and functions as the main navigation and search. The interactions on this column determines what appears in column 2. Column 2 is essentially a list that changes depending on what’s selected in column one. For example, if blog is selected in column 1, column 2 will list all the posts in the blog that you can read. If portfolio is selected in column 1, instead of a list of blog posts, a list of portfolio items will show up instead in column 2. Now if you select on a particular post/portfolio item in column 2, column 3, otherwise known as the content area, will show the actual content the user requests. Note that this is all done without a single page refresh to keep the experience persistent thanks to Ajax. To prevent the visitors from getting confused when screen space is replaced with new content, as each column changes the visitor will obtain visual feedback due to the jQuery animations clearly showing when a column’s content is swapped out for new content.

As I thought about it more and more, I realized that the color scheme/overall feel I was thinking of would be very fit for Project Katacom, a project that I’m planning to (hopefully) announce later this year. So then I decided to scrap the colors/feel for this project and once again I started looking at different color schemes. The good thing was that this time around I was sure about the functionality of the site as shown in the second draft, so at least a few things were staying.

Going Back to the Dark Side

So off I went to look for more inspiration and shortly I found Blitz. I really liked the color scheme they chose. While it was centered around blue and black, its tone was a bit lighter in feeling compared to the dark tecy black and blue I was thinking about with the first design. This really inspired me to return back to a dark layout again, except this time I would consider the accessibility and appeal more instead of being lost in the whole “doing something totally new and savvy” deal.
Blitz – Featured Work
Screenshot of Blitz's Featured Work page

Another website I particularly liked was Sidebar Creative. Their color choice was nice, but what caught my attention was their use of the grainy, textured background. While I planned to use a grainy/textured background for the light layout, this website made me consider to bring that idea over to the darker layout.
Sidebar Creative
Screenshot of Sidebar Creative's website

So now that I had a general idea on what I wanted, it was time to get down and dirty. While planning can help prevent some problems, nothing beats actually confronting unexpected problems during the implementation process. Honestly, I would normally put more time into the planning process, but I want to finish this before September 6th when my school’s job board goes up, so I have a pretty tight deadline coming next week! The post about coding Modern Edge comes next!