Jesse Richards
Home Site map Email me
... to my online portfolio's bonus feature! I figured that since my job now is not as much designing web sites as it is coming up with ideas and helping other people design and build them, well, then the process is just as important as the outcome. So I thought it'd be fun to show my sketches from the past week as I built my online portfolio. This is how a web site is made!
Before
This is what my resume and portfolio looked like before. Pretty boring, the navigation is hard to see, and the portfolio pictures are small and have no descriptions.
So, first I came up with a new design for a main landing page that would incorporate the resume and portfolio together. I sketched the small drawing on the left, which is probably two inches wide, and then thought about it a bit and redrew it larger.
Building
Then I moved to the computer and laid out the boxes in Photoshop, just to figure out the correct sizes. This took me approximately 20 seconds.
Next, I started to piece it together on the actual page, using CSS. This takes longer, though this was a pretty simple design overall. You can see I temporarily made the container box bright blue so I could see it. I also cut out an image from the Photoshop drawing as a placeholder, but then moved to just a blue rectangle as the placeholder, before finally putting up a renovation notice. (Unlike 99% of projects, I was actually working directly on my site live here, because I can and I felt like it. And because the project was quick.)
The last steps were to make the resume graphic, and the five montage graphics, which were a lot of fun. Here's what the final page looks like (which you've already seen, of course):
Portfolio pages
With the landing page done, I needed to create the individual portfolio showcase pages. It was back to the drawing board:
You can see that I had originally envisioned the navigation (between the resume/portfolio sections) to be on top, and a smaller navigation to be on bottom. This bottom navigation would have thumbnails of all the images in each gallery. I made about three thumbnails before I nixed that idea in favor of simple "next"/"previous" buttons. The secondary navigation would have been cool, but was ultimately unnecessary, would have cluttered the page, taken extra time to make, and been harder to update.
Here's one of the pages as I'm in the middle of cooking up the code. You can see I've simply written "bottom nav" where I intend to place the bottom nav:
And here's the old page on the left, side by side with the new page on the right:
The hardest part
Sometimes CSS bugs me, and writing descriptions for all of the pieces in the portfolio was time-consuming, but what was the real hard part? Choosing the items. I'm pretty well-organized, but I still have thousands of old project files that I needed to browse through, in addition to deciding which new pieces to put in. Here's a screenshot of Adobe Bridge, looking at my Illustration portfolio (this was at the end - I was moving the items around to get them in the correct order I wanted.)
My Writing
With this overhaul, I also wanted to bring my Writing page under the umbrella of my portfolio, so I had to go through the process again for that new page, too. Here's the original sketch, and the final page.
All done!
What do you think? If you haven't flipped through my portfolio already, what are you waiting for?
Check out my resume and portfolio!