16.3

the blog on design

Ads by Yoggrt

[Portfolio] Brandon Wang, version 4

Version 4, the main page

I’ve done it. I have finally done it. The fourth reiteration of my website has finally been completed. It was a hard two days of work, but that I am done with it, I am very proud of the result.

The new website, I am glad to say, is 99% completely my own imagination, and completely my own work. I am also glad to say that the one percent extra is purely inspiration.

Screenshots of the New Design

[above, at beginning of article] the version 4 version of the home page, as of writing.

Version 4, all the other pages

[above] the version 4 version of the portfolio, as of writing.

Why a new version anyway?

The old design was all-together a bit rough. I at first had envisioned a complete new design with crisp grayscale designs with only a splash of color to accompany it, which would stay with the user as they scrolled down the page.

Version 3, the main pageThat was what I dreamed of. Of course, to supplement this dream, I came up with at least what must have been twenty pictures, each serving as a link. This architecture was made so that even people without Myriad Pro could access the website in its full glory.

Five hours later, I looked at the site and I saw what it looked like. Everything was aligned against the left, and it didn’t look exactly the best. Later while I was searching around for dark WordPress themes, I came across Vostok.

Vostok is what I saw as a miracle. The crisp designs as seen in the picture made me extremely happy. I loved it. I quickly implemented it, stole some CSS from it, and quickly mocked the rest of the website to match the theme.

My first mistake. I now warn everyone out in the designing world to always model your blog theme off your website design, and not the other way around.

I was quickly landlocked in what I could do and what I could not do. Everything was locked. I couldn’t change much. The only thing I ended up adding was a light fluff, the same I used in my first iteration of version 3.

Thus this website design. I have completely coded this 100% by myself, and I have coded the theme for WordPress 80% by myself (more on this later).

Technical details, please.

Very well. The website is coded using only HTML, PHP, CSS, and WordPress, which is really the best blogging platform out there. Period.

I originally planned on having WordPress power the entire site, because it certainly is powerful enough to do so, but I also planned on implementing other things as well, so I finally decided that WordPress would power my blog, and my blog only.

HTML and CSS stand for no explanation, they are the building blocks for any web design. PHP wasn’t really required, but later on I modified the site so that the headers and footers were served dynamically to speed up coding time and decrease the amount of repeat work I had to do.

WordPress runs on PHP, but I really only use it for the blog, and to serve it because coding that would be a huge hassle. I am also familiar with WordPress, so using it makes it so I don’t have to fiddle with new things.

The new website is 100% XHTML valid as well. I raise myself to stringent coding procedures.

Inspiration?

Much of this website has its inspirational roots in the excellent website design by Simon Clayson.
Simon Clayton, Reportage Brandon Wang, Portfolio

I am, however, happy to say that I did not copy a single line of his code. I did research on his website, looked through his code, and learned from him. I would be very privileged if I could ever meet him in person; he is a wonderful website designer.

I do have some big differences with his design and my design. The internal color codes are completely different, and although the colors may seem very similar, they are actually completely different. I picked colors from my own palette, he picked colors from his.

The space between the content and the sidebar area is also considerably smaller with my website design, my logo is larger and exhibits more larger changes when hovered, and if you take a look at my stylesheet and his, they are completely different.

So what’s next?

I don’t know at this point. It’s a lovely website design and I plan on using it for at least a bit more time. The design was a present to myself; I am now twelve. Maybe I will choose to redesign it next year. Who knows?

Your email address is never shared with anyone, and basic XHTML is allowed.