Yes, after spending my day time, but mostly night time working on this site, it’s finally up and running on the Justhost server. So far I’ve been impressed with the service, especially the wordpress integration. Looking back now, I just realized I had bought my domain on February 17th. So it’s been about 4 months and it’s been an awesome learning experience. This would be the second website I’ve ever made and I’m happy with the result. My first site was for a Sacramento Driving School, some pro bono work I did. When I made that site, it was also my final project for my Intro to Dreamweaver class. I remember it was the first time learning what CSS was and the power of it to style ugly looking HTML.

Anyways, compared to the process of that site, this one went way smoother. I really couldn’t believe how fast I picked up the coding and do things that just stumped me the first time around. I think it was really after learning how to hand code my CSS that I really began to become better. For the first site, I was doing everything WYSIWYG. Not to bash on ones who do use that, but I will say that everyone should learn some coding on some level. The more the better I think. It will really improve your understanding and workflow of building a website. And besides, you’ll be able to do the cool javascript stuff you see on my site.

So I came up with the idea to brand myself because I wanted to start marketing myself. I began sketching ideas for my logo way before I did anything related to the website. Designing something for yourself is probably one of the toughest things. I know being a perfectionist always leaves me with the feeling that I could do better. Well after some long grueling sessions of sitting, tapping my pencil, sketching, erasing, and repeating, I came up with a few ideas I liked. Some of the words I wrote down were minimalistic, technical, geometric, futuristic, Futura (I have an obsession with this typeface btw), angular, etc…I love this kind of design and you can get an even better idea from this guy, Design Primitive. His work really amazes me and I want to be able to do that kind of art one day.

After coming up with an identity, I go back to the sketchbook and draw out a simple sitemap of all my pages and links. I knew I’d make it small, your standard 5 navigation pages. Next I sketch out a number of rough layouts, all of which align to the same look and feel as my identity. This sketching part is really the meat of my final outcome design. Even though my sketches themselves might not look very good, it is what sets the basic layout down. As you can see in the pictures, my website follows pretty closely to some of the sketches. I changed the home page because I didn’t like how there were two big rectangular shapes at top. Instead I made the featured artwork smaller to free up some negative space and broke it up with type. The bottom three blocks are shown on the sketch, but the actual execution of how it’ll look comes from ideas in my head. Using the logo to reverse out of the green bar was my solution to help the user easily identify each headline in a minimalistic yet interesting way. This was an I idea that came from experimenting with different ideas and seeing what worked and didn’t work. The information flows from general to specific as the users’ eye travels down the page.

The featured artwork section uses the awesome jQuery Cycle All script. I looked at many javascripts, and this is probably one of the most flexible and easy ones I’ve found. It has all the instructions you need to install on your website and there are plenty of demos. What I do is go to the demo page and in Firefox or Chrome, right click background, view source. This way you can see the code and how it’s installed on that demo page. If you’re having trouble, leave a comment and I’d be happy to show you how I did it.

The most challenging part of the entire website and probably the most rewarding was probably integrating the blog page, which is powered by wordpress.org, into the rest of my website. I had started building my site in Dreamweaver seperate from WordPress’ CMS. (I heard it’s easier and better to use WordPress as the foundation for the rest of your site.) Anyways since I didn’t know a lick of PHP to begin with, I thought it was impossible for me to take a pre-existing template and modify it to look as if it was just another page of my website. If you’re in the same boat, you want to use wordpress with your site, but you’re building the rest of your site outside of wordpress, then don’t worry. You don’t need to know how to write PHP to do it…But you do need to know how to read it. All WordPress pages are written in PHP, but you can integrate your own HTML in it.

Basically what I did was pick a free minimal theme like Infimum that has the essentials such as tags, comments, date, headline, 1 column fixed, 1 sidebar, etc…whatever you like. Then I open the folder where that theme was installed, usually under wordpress/wp-content/themes/name-of-theme. At first, it looks like a bunch of random files, but if you take a closer look, you’ll see how each file fits together to make a whole. You’ll commonly see Header.php, footer.php, search.php, and so on. These are all elements of a page, but just split up. The header.php only carries information you’d put in your header for example. What I recommend next is just stare at it, like for a long time. Try to take it apart and understand what does what and where. How does each file relate to each other? A tool I used a lot is the Apple (Ctrl) + F to help me relate what I see visually to what is in the code. It’s actually quite fun when you start to solve this puzzle and begin to figure out how they all work together to form this powerful content managment system (CMS). Each theme includes 1 or more CSS files, so this is where knowing how to hand code your own CSS is absolutely necessary. You don’t get the WYSIWYG preview with php files so you have to work in code mode.

The other pages in the rest of my website took some research online, especially for the contact page. I had trouble finding a simple contact form script and for some reason it wasn’t working visually the way it was suppose to. Eventually I got one to work that’s very straight forward with form validation. Everything else such as styling the search bar or adding a twitter update feed to your sidebar can be done through more reasearch. The codex is a great resource for anything wordpress related.

All photographs were taken by me with a Nikon D80 + Nikon 1.8 50mm lens. Here’s a picture of my desktop setup. I have in the picture dual 17″ monitors running on my 5+ years Dell Dimension 8400. The dual monitors is really crucial and makes it so much easier when working in Dreamweaver. I put the preview browser in the left and all my breakout panels and code view on the right. It also gives me the flexibility to test my website on a widescreen monitor. The reason I haven’t upgraded my desktop to a Mac Pro or something is because this machine is still running good enough and I don’t have the money. You can also see design books, Canon MP610, 1st gen Macbook, Wacom tablet, ipod touch, and logitech Z- 5300e. So this is what I use for all my digital stuff. I need to utilize my tablet more though.

I’m happy and excited at how much I learned from this project and really hope to continue learning more. There’s still so much I can’t do yet that I would love to do. Flash is something I am looking forward to learning next and integrating into this site or future sites. For now the majority of the site will stay the way it is. I am thinking about redesigning the portfolio page, but that’ll probably happen when I change out my portfolio. That covers the major parts of designing this website. There’s much more to cover that I didn’t cover. Let me know if you want me to include something you wanted to know about and I can update this post or add a new post.