Hello, everyone. I am sorry I did not post this earlier. I have just been so busy lately returning to the craziness of school after Christmas vacation. But luckily it is finally the weekend and, for the moment at least, I am free!
As you might have noticed, the new website design is online after significant downtime (another result of my busy schedule, I am sorry to say). I have been wanting to write about my process approaching this redesign as well as some thoughts about it. However, this would be incomplete without a brief review of the previous version (Version 3). So here I begin.
Web Prints
I never truly had the right feeling with Version 3. It just seemed like I threw things in and hoped all the elements cohered together. I think the main cause of the awkward mismatches was the fact that I never bothered to first design a concept image or print. I only recently started to this (which, by the way, is quite embarrassing). It was with websites designed only after Version 3 that I created a whole .psd to slice up into respective site elements. With Version 3, I just tried to come up with something that I thought would look cool and then created the isolated element as a separate image.
I think the main source of this sigma is from my previous work with designing forum skins. With skins, all the HTML and PHP is already laid out and coded, and all the designer has to do is edit the CSS for styling. (On a side note, I actually learned CSS by merely designing forum skins. I think the fact that forums [free ones, anyway] restrict to mainly editing style sheets really forces you to know your way around the language. But more on that in a later post.) While some designers create prints for designs before implementing them with code, I did not think it was worth the effort, since you could not totally customize the skin’s design anyway. I guess I just visualized what individual skin elements would look good and just created them. I then carried this technique over to my websites.
I might have gotten by doing that with forum skins, but I truly think it is vital to first design a whole site image before coding (even if it is merely preliminary). It helps to do two things:
- You can better visualize the design as a whole and make necessary changes to it based off of this visualization before you even begin coding, which could prove to be much more efficient. As a result, your coding can be focused on matching your design instead of experimenting on what might look good.
- If you do it correctly, it forces you to be precise with designs. You can use the rulers and guides to fine-tune your design to the exact pixel. As stated in the previous point, you can then match this precise design with precise coding.
In the end, you have a much cleaner, professional, and overall, better web design.
Layout
Another negative aspect of the previous version that stood out to me was the layout of the pages and the organization of the site as a whole. One thing I wanted with the new design was much more simplicity. There were so many pages on the last version, and I kept on adding more. I think I had “Home,” “About,” “Portfolio,” “Blog,” “Music,” “Gallery,” and “Contact” pages. This was way too many, especially for what I am doing. I felt that having that many pages made the site too confusing and perhaps even overwhelming.
As I thought about it more and more, it made even more sense to consolidate. True, I do have many interests, but there had to be a way to present all of them much more simply.
Projects
I decided to condense most of the excess pages (i.e. “Portfolio,” “Music,” and “Gallery”) into a single “Projects” page. It was just a matter of figuring out how best to present this content. I thought about this for a long time before coming upon the result. 
I was aiming for a simple, visual, easy to understand layout. So I decided to go with a large, clickable icon appearance. By utilizing jQuery, I felt that there was a better way to present my work. Instead of having whole blocks dedicated to one web design project (as is popular for professional web designers today), I presented them much like an photo gallery with a description that appears once clicked (soon to come). And instead of presenting music projects on totally separate pages, I, like the web projects, presented them like a gallery with a popup containing the track and lyrics. I decided that since my focus is not necessarily in web design or anything else and since I am still trying to figure out what I want to do with my life, it would be best to present everything equally as “Projects” to show that I have many ventures in different fields.
Homepage
I also figured that having a “Home” page in addition to the “About” page was extraneous, and I could never seem to come up with content for a “Home” page, so I made the “About” page the homepage. All of this condensing really cleaned up the navigation and the site as a whole.
Footer
That last major element I simplified was the footer. Before I had a large footer containing posts from the blog, links to other sites, as well as a bunch of icons to my accounts on social networking websites. I decided to remove the blog elements since I figured the blog was only a click away. (I added a popular posts box to the blog and a related posts box to single posts.) As for the icons, I kept Twitter and the RSS feed. I felt like I should still somehow keep the links to the other ones, so I moved them to the “Contact” page. I think they look nice there.
Technical Stuff
Lastly, I have constantly been learning more and more about code and the proper way to code. So I have been working on cleaning up my code and streamlining my coding techniques. I have moved on to HTML5 and CSS3 (although the CSS does not validate; see this). I cannot say it is perfect, but it is much better than before (and constantly under revision).
Conclusion
I think (and hope) overall you will find my website much simpler and cleaner. My goal was to streamline the content and present it much more efficiently, since this site is supposed to just be a personal website/portfolio. Hopefully, people can visit, check out my projects, read my blog briefly, and maybe send me a comment! Do not get me wrong, there is still a large amount of work to be done on the new layout, so drop me a line if you have any suggestions.
