Ever look at where you are and think back as to how you got there? Wondering what pieces came together to produce your current state of being? I was thinking about that in regards to my site, since I finally feel like I came up with something that I really feel comfortable with. What roads did my site take to get to the glorious spot it now resides in? What were things like before? Let’s take a look!
The beginning of my website
It all started around 2005; The first time I had a site that was dedicated to me as a person and creator of graphics. Back then, the site domain was BMGFX.net rather than what you now see. The first design is probably the only one I’m showing that I would look at and say “What was I thinking when I made that?” It didn’t feature the name BMGFX anywhere, and the design was kind of all over the place. Back then all I did was show off graphics I made, therefore the title being “The Art of Brian McDonald”. I used the gallery script to upload and organize all of my images. All other pages were static html. Thankfully this design wasn’t used for very long and soon I upgraded to a new one.
BMGFX.net version 2
The upgrade brought about a more respectable design, this time featuring a new logo, and a new shiny design. The logo started with a base created from the Star Wars font, and I edited it heavily to look the way it came out. I changed around the color scheme with a vibrant blue with some grays and faint browns. Shiny buttons matched the shiny logo, and now the tag line of the site was “The Works of Brian McDonald”, as the site now featured some written submissions, mostly being my dreams.
Unused BMGFX.net
After some time using the static pages with the Gallery script as the sole means for dynamic content, I wanted to change things up a bit. At that point, I started doing up a new design. This one had a slightly brighter scheme, but featured a dark content background. The design was still shiny but was a bit more refined. I completed the design, but wasn’t completely satisfied with it, so I decided not to use it and try something else.
Another unused BMGFX Design
I somewhat went back to the drawing board, keeping some of the design themes from the previously unused design. This one took the dark background and made it the primary background, and was made a lot more low key and spaceous. I also tweaked the logo to feature a much more simple “.net” portion which would better fit the smaller space. I wound up making some physical mock up pages with this design, and it was actually the first time I moved away from table based design in favor of div/css design. However, I still wasn’t completely feeling how the design was turning out and tried some slightly different things with it.
Darker version of unused design
I made a darker version which you can see, but didn’t like it enough. You will also note the first appearance of my potential site mascot named “Apertron”, who was a 3d model robot that transformed into a camera. I ended up liking the darker scheme even less than the original, and once again started thinking of different roads to take in the design of the site.
Minimalist unused design
Did I want something more complex? More simple? Lighter or darker? I wasn’t exactly sure, so I started with something very minimalistic. All there was was a small simply yet slightly shiny header bar and nothing else.
BMGFX.net version 3
Things started to go right for me for a change in the design phase, and I started thinking up some good ideas. I wanted to integrate the mascot of the site into the design itself, so I started to create renders that would allow me to insert Apertron into the design “scene”. Things finally started to flow, and soon I was coming up with something I was satisfied with. Finally, I had a new complete design for BMGFX.net. The other big deal was that I made the switch to wordpress being the backbone of the site, which was a whole slew of new developmental learning. All in all, it was a very fun experience, and it lead to me being satisfied with the design and the site as a whole.
First stages of iamBrian
Even after attaining a design I liked, after time, I wanted to take the site into another direction. I felt like BMGFX.net wasn’t representing all that I did, and I felt limited in the things I could put on it. When you have a robot mascot, you don’t really consider adding literary work on there that isn’t some kind of fan fiction. So a re-brand was in order; Something that represented everything about me. What better title than iamBrian? Seemed like a good fit for me!. I wanted to simplify things a bit, starting at the user experience. I went with a three option navigation, with “Look”, “Read”, and “Hear” being the basis of everything.
iamBrian.net version 1
The initial design base had promise but I felt like the simplicity didn’t quite fill the page the way I wanted. I tweaked the logo a bit to flow a bit better, changed up the splash image (which was a fading image rotation), and added background elements that added a little bit to the originally plain background while not being too overpowering. When I was happy with the design, I used a newspaper-type theme base to have a lot of content linked through three columns to show the latest from the Look/Read/Hear categories. All in all, I was happy with the way it came out. BMGFX.net was hacked during the time I was working on iamBrian, so I used that as an opportunity to start fresh, and the timing kind of worked out in the end, leading to version 1 of iamBrian.net!
Unused iamBrian.net Design
Just like every other design I was once happy with, I began to get a bit tired of what I had. The design was very big, with large images, and large text, and lots of text. The truth of the matter is that the site was just too big for me. I felt, again, like it was misrepresenting me. So it was my mission to scale things back a bit, and better represent the more simpler me. At the same time, I wanted to de-simplify a bit, at least on the navigation end. I felt that the Look/Read/Hear setup was nice, but it lumped together all of my graphical work, and I felt like there needed to be a bit of a separation. I broke it into Graphics/Photos/Words/Music, which was pretty straightforward. I also started things off with a new logo, which I wanted to do mainly to get away from just having a helvetica logo. The design process started to flow a bit for me, but I wasn’t completely there yet.
Unused iamBrian.net Design
I was still getting the feeling that the design was too big for what I wanted, so I went the extreme route and scaled it down even further that I was comfortable with, in hopes that it would let me find a nice middle ground. When I brought the size down a lot, almost to mobile size, I started getting the feeling that while it was too small, I was getting warmer in the design phase. As for potential changes, I wasn’t really feeling the dark background anymore, and I wanted to change up the icons that would categorize the site while keeping a more uniform look in the icons. It was on to the next phase!
iamBrian.net version 2
Thankfully, the revision that followed would prove to be the final one. I redesigned the category icons that would be used for the navigation as well as labeling posts for a lifestream style presentation, and added a few categories to cover all of the content I would want to put on the site. I also brought the size of the design to a happy medium, and I felt comfortable moving on in the design phase. I used @fontface font placement for the first time, took care of all the other wordpress theme stuff, and I was ready to launch version two of the site! Now we just have to see how long it will take for me to get tired of this design, although my next plan is to clean stuff up with this design and get everything current with HTML5.
I hope this glimpse into the development process was worth the vast amount of text!
