Past Website Designs



This page is really more than just an archive for the basic layouts of all my previous website designs. It's more like a little window into all my thought processes behind web design--at least, web design as it relates to the history of my own work and my own identity. I hope you find the insight interesting.


JonBro.com v. 1 (2005)
JonBro.com v. 2 (2006)
JonBro.com v. 3 (2007)
JonBro.com v. 4 (2007)
JonBro.com v. 5 (2007)
JonBro.com v. 6 (2008)
JonBro.com v. 7 (2008)
JonBro.com v. 8 (2010)
JonBro.com v. 9 (2012)
Jonochrome.com (2013)

2005

JonBro.com v. 1

For a long time, the main name people knew me by on the Internet was "JonBro". The story behind this name began on a particularly curious morning. I had been making mediocre Flash movies for maybe a month, when I woke up one day, and one of my older brothers told me he had just made a website for my work. The name "Jonbro" (the B wasn't capitalized at first) was thought up by one of my sisters, and I began to refer to myself as Jonbro online because I really liked the name.



Pictured above is the site my brother designed. The logo was made by him alone, and he had three placeholder images on the right which served as buttons leading to stickfigure animations, video game parodies, and other random movies. What you see in this screenshot aren't his placeholder drawings, but small animated buttons that I made later on when he showed me how to edit his design. The layout was very minimalistic, probably because my brother likes minimalistic web layouts more than I do, but it got the job done, and every animation was readily available at the click of a link with nothing more than the title of the movie and the date it was put up.


2006

Version 2

Much later, I had this idea in my mind to redesign my website and make it look high-tech and futuristic. When I did this, I changed my name to "JonBro", with the B capitalized, mostly because that's what 'looks right' in my mind.


The site had these big metal doors that opened and closed every time you entered a new page, which was really the same page because I had the whole site layout in one Flash file. It wasn't drawn especially well, but I thought (and still think) the concept of the design was awesome. The Awards section, as you would guess, had all of my different Newgrounds awards in one place, so it was basically a trophy case page. I forgot the "Upcoming" section existed, so it was updated very rarely.


2007

Version 3

In July 2007, Newgrounds underwent a spectacular redesign with a very sharp, bulky, bold look to it, which inspired me to do something similar with my own site because I thought my old design seemed slightly outdated.


The different sections of the site now had their own webpages, but in all other regards, the structure was practically the same as it was before. There was a newly-added Art section, which I'm pretty sure I never updated a single time, and it really only consisted of art that's on my Newgrounds page. The Movies and Games pages were sort of a pain to edit, too.

Somewhere late in Version 3's lifespan, I came up with a plan to make these personalized 'user page' things for everyone who visits the site, but it was really stupid. It wasn't like a public profile or anything, because I didn't know how to do that, so it was essentially a page where someone could leave a memo for themselves about which one of my movies they liked best. When I'd already gone through with the idea and realized how dumb this was, I think that's what triggered my urge to redesign the site again.


Version 4


Still inspired by the Newgrounds redesign, I made a much simpler-looking website with the intent of having it be incredibly easy to update. As you can see, Riddle School 2 is the only game visible in the Games section, and that's because you had to use the arrows to cycle through all the different options with the left and right arrows, which wasn't too efficient, especially not with the Movies section that had way more options.

I'm not sure if I actually intended for this to be a permanent design, because it looks temporary by nature, almost like a template. As indicated in the picture above, I also didn't know much about how to align objects with HTML, so I just didn't, and this was also the case with my future designs.

One thing I did like about this design, though, was the History section. If you want to know what that was, it was basically the History of JonBro.com page you're viewing right now, only much less in-depth with its description.


Version 5


Version 5, made in September, was my most ambitious design of 2007. I loosely based it on The-Swain's website, putting all my different Flash movies and games into a long list and giving each of them buttons to be viewed on JonBro.com or Newgrounds, a feature I've continued to use. The site also had a splash page with my logo on it, which led to a second index page where I had news posts typed out in HTML rather than in Flash, which looked somewhat unnatural because almost the entire rest of the site still consisted of Flash objects.

I also added a Hit Counter to my site that didn't work too well because it increased every time you refreshed the page. The hit count in the screenshot above isn't accurate to 2007, because I took that screenshot in 2012.


2008

Version 6

As my animation skills slowly improved, so did my distaste for my previous website designs, thus I started trying to make JonBro.com look more professional. I'd recently 'modernized' my logo and decided to base the whole design of the site around that logo.


Although I put a lot of effort into aligning everything on the site perfectly using Macromedia Dreamweaver 8, the alignment didn't look so great on Firefox (as seen above). In addition to that, someone on Newgrounds gave me some extremely constructive criticism about this particular design, and one of his points was that the color scheme for the site looked dark and depressing, which wasn't the first impression I wanted to give newcomers to the site.

You might notice that there's a "Webcomics" and "Downloads" section in this design. Those both ended up being mundane ideas. The downloads were just wallpapers for some of my least impressive animations, and the three little comics I'd made were subpar at best. (Here are those three abandoned webcomics, if you're curious: 1 2 3).


Version 7


There's not much to say about this design, except for that it was made out of laziness and lack of interest. I didn't change the dreary mood of Version 6 or add anything of note to the design. All I did was stick every section of the site--Movies, Games, Art, everything--onto one page, so it would take no effort to edit. In actuality, the page was way more difficult to edit, as the structure of all the different Flash objects was just horribly inefficient, so I just flat-out didn't want to update my website, and it stayed looking like this for roughly a year and a half.


2010

Version 8

With the release of Riddle School 5, I thought it seemed appropriate to make my website look like the game's menu screen, since the Riddle School games were what most people recognized me by.


The light blue sidebars in the screenshot weren't there at first; the whole background was black, which I think looked better, but I changed it so that the pages didn't look as dark and sad as they did in past versions of site. My site didn't feel like a website anymore, at this point; I had begun to focus too much on how refined my site looked, and it didn't feel so personal anymore. This layout remained until sometime after Riddle Transfer 2's cancellation when I decided that it wasn't appropriate for everything to look like Riddle School anymore, and I set out to create a redesign reaffirming my intent to start fresh and work on newer, better things.


2012

Version 9


The concept of this design popped into my head while I was taking a shower. If it looks familiar, that's because it is a total reimagining of the Flash site I made back in 2006 (Version 2), which was the first design I could call "my own". If you put Versions 2 and 9 next to each other, you'd find quite a few distinct similarities between them.

A lot went through my mind with the idea of recreating the first web layout I'd ever made on my own. Over the years, I felt like I'd lost most of my creativity and imagination. When I came up with the idea for a futuristic site with constantly-moving cogs and gears, that idea came from my head, and nowhere else. I didn't feel bound by the standards of the rest of the Internet, and my only limitation was my lack of experience with computer-based artistic resources. The Flash site I ended up making in 2006 wasn't how it looked in my head at the time, but six years later, I realized that I had become capable of making the design that was in my mind back then.

I treat this design less like a generic portfolio and more like a window into my thoughts, and as a result, I was very pleased with it, more pleased than I had been with the look and feel of my site in a long time. It even managed to give me the same feeling I got when my brother made my website for me in the first place.

About one year passed before I chose to take another ambitious leap, at least by my standards.


2013

Jonochrome.com


I felt as though I needed to increase my level of professionalism and finally "graduate" from my rather unsophisticated JonBro moniker. I created a new name for myself and felt it was worth creating a new clean, modern-looking website to reflect upon this transormation of sorts. I wanted to change my image, and this website became my identity. It bears many similarities to the final JonBro.com design as far as layout goes, but with an aesthetic I'd never considered before.

One thing that had always dissatisfied me with previous designs is that they often felt very contained, which I wanted to change by designing Jonochrome.com to feel more 'open'. Additionally, I wanted this site to be 1) easy to change, and 2) compatible for Android, which is how I learned the importance of PHP and the problems with certain kinds of 'div' alignments. That's all technical mumbo-jumbo I didn't care about a year before, but Jonochrome.com became much easier to manage than JonBro.com had ever been in the past.

When I came up with the name "Jonochrome", it only made sense to give the site a monochromatic color scheme, and I think this aspect of the design is what makes it stand out the most. Generally speaking, Jonochrome.com has the same heart and personality that JonBro.com always had, but with a new foundation upon which to build new things. I'm not sure if moving out of the constantly-remodeled JonBro.com to make a new home for myself elsewhere was the biggest change I've made regarding my site, but I do think it might be the most "important" change. It is my hope that this domain and its unique tone will serve as a personal motivator for me to develop truly polished pieces of artistic work.


-Jonathan