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.

A little brief introduction about myself. I’m a self-taught graphic designer, but I don’t feel I’m worthy of that title yet. I’m a relatively new designer and only in the past year decided that this is what I want to pursue. I guess it took me around 4 years of college to figure that out, but nonetheless I’m happy and excited to follow this passion of mine. So now I’m going back to school for graphic design at California State University, Sacramento. Due to the current budget crisis, my options were pretty much narrowed down to 3 or 4 public universities in California.

So that now brings you up to date on today’s post. Lately I’ve been looking for an entry level design position or some kind of design internship. I’m getting really tired of writing cover letters and going to interviews, but hopefully it means there’s a better opportunity out there. Just yesterday I had an interesting interview with Lojo Group. The first 30 minutes went pretty well and as expected. The interviewer asked me several questions about my professional life; you know how it goes. I also presented my portfolio and talked about my concept and design process for each piece. After that was done, I was surprised to hear he had one more thing for me. He continued to elaborate that it would be a 1 hour test to come up with a logo and home page design for an artificial company.

First of all I’ve never done anything like this. I’m used to designing in the comforts of my room by myself with music. This time I had 1 hour, people talking on the phone, foot traffic, doors slamming, etc…Anyways, I spent most of my time roughing out the logo. I brainstormed some ideas, sketched out pictures, looked up related imagery and cranked out the logo. Being a perfectionist didn’t help as I found myself wasting way too much time on the minute details. After ~1 hour, I had a decent logo with an okay home page. I learned a few things:

1. Design w/ time limits are tough! Props to people like skilled concept and ISO50 for performing so well in design-offs.
2. With killer deadlines, you really have to manage time so that you don’t spend too much time on just one thing.
3. Must brush up illustrator skills.
4. I have so much still to learn about graphic design.

I also interviewed with some other companies for internships and I’m still waiting to hear back from them. I’ll keep them posted on this blog as soon as I find out. I’ll probably tweet it faster though.

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’ve been working real hard on this portfolio/blog and I think it’s paying off. Today I really fleshed out the look and feel of each post as well as part of the sidebar. I was able to get the date tab to show up next to each new post, which was kind of a fun learning and discovery process. Just to let everyone know where I am in terms of web skill level, this is my second website I will have built myself. That’s why often times I’ll celebrate over something web designers have been doing for years. I’m getting used to reading PHP and knowing what does what, just enough so I can get it to display right. I haven’t started to write my own PHP yet, but hopefully I can find some time to learn later. Sidenote: WordPress is awesome.