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.

It’s the end of the school year and it’s that time students to show off their best work. Fortunately I found out about them before it was too late and even submitted some work I did for community classes I took in Fall ’08. Overall, it was such a fun, exciting, and inspiring two day event. (I went to both Sac City College and CSU Sacramento shows.)

I’ll start off with the first show.  This was an all day event with design-offs, CPK for dinner, awards, animation reel, and a surprisingly impressive gallery considering this was only a community college. This was my first time going to a design show since I’m not a graphic design student yet. I loved the environment because everybody shared a passion for design. Also being a smaller college, it was very easy to just approach people. I met some cool people there and caught up with some old instructors. One person I met in particular, Slavic, had a really unique portfolio because all his stuff looked like professional projects that a designer would do, not a student.

The website I submitted  took home a silver award. It was my final project in Beginning Dreamweaver for a Sacramento Driving School. Also much to my surprise a 3D model of a mountain bike I did for Intro to 3D modeling took home a gold! I will have to post some pics of that model, but after reformatting my computer, I lost the renders of that. Anyways I got this awesome prize package for the gold award. The wrapping paper from Sol Design Group is going to be my new posters because they look way too nice to be ripped up by some unappreciative person.

The second show at CSU Sacramento was even more impressive and just what you’d expect from an impacted program. Sacramento doesn’t seem like the most exciting place for design, but this huge room certainly contradicted that. It was much larger in terms of scale so meeting people was much harder, but there was so much cool stuff to look at. There were maybe 2 or 3 people that really stood out in my opinion. I enjoyed the dedication, sweat and countless sleepless nights students poured into these final projects.

This really re-energized my motivation to keep working at it. If these people are my competition, then I have so much to work on still. For the people reading this, you get to experience the next 2-3 years with me as I go through the same rigorous program. It’d be very interesting to see how my work will improve in the next few years when looking back on these posts.

Yesterday I spent a good part of the day taking photos of my printed portfolio pieces. It was quite a tedious task as I had to use whatever light was coming in from the outside. I took several shots of each piece, usually a wide low angle, paired with a few close-ups. By the way, I was using my semi-new Nikon D80 with a 50mm 1.8 lens. This lens is great for achieving the depth of field you want, whether it’s super shallow where only a small range is in sharp focus, or a deep DOF, where everything is in focus. Also it’s really fast lens so it’s excellent under low light.

After I finished taking all the photos I needed, I imported them into Photoshop as RAW images, and slightly tweaked them to improve colors and contrast. Then I had to re-size them, one for the full screen preview, and one for the regular smaller preview. Next I optimized them for web and linked them to their corresponding html pages. Also I continued to flesh out the page so that now there’s a shortcut navigation sidebar on the left.

Keep checking back as I will continue to update this blog frequently about the process of creating my website as well as other design related topics. Leave a comment too so I can get to know you and get some feedback.

I just watched this today and thought it was a brief, but interesting talk about how graphic design fits into the world of web. The part I related most to was when Mike talked about being bogged down by the technical coding aspect of web. We shouldn’t let the choice of “paintbrush” get in the way of our design. Technology also shouldn’t play a role in determining the final outcome of your design. What I mean by that is don’t just use the gradient tool just because it happens to be there, but use the gradient tool because it helps you accomplish what you planned out already. A good way to practice this is to start off with only paper and pencil or I guess if you prefer, your Wacom tablet, if it doesn’t get in the way.

(Hit the magnifying glass to watch it full screen.)