Category Archives: My Portfolio Site

Redesigning my Portfolio (sort of a tutorial)

So, as I posted previously, my domain got deleted.

This is actually sort of ok with me because I’m already in the habit of doing a visual redesign of my portfolio website every few months. New designs keep popping themselves into my head and I can’t resist!

Web design is pretty simple if you follow these steps:

1. Clarify the goals and user needs for the website (don’t forget that the people using the site and the people managing the site often have different goals). This step is important because it saves a lot of confusion and hassle later on, and it reallllly helps in the design process too. I won’t go into a ton of detail here.

2. Do wireframes. It’s very helpful to do these separately from the rest of the visual design. That way you can focus on basic interaction and layout before visual hierarchy and overall “atmosphere” and feel.

I’m using Adobe Illustrator and Adobe Photoshop.

portfolio-wireframe-home

Each of the small boxes here is a portfolio item. I chose to prominently display them on the home page like this for maximum viability. I also chose to include my email address in the header so that contacting me is an easy, one-click process.

portfolio-wireframe-text

Another reason I really like doing wireframes before the rest of the visual design is that I can lay out and visualize how I am going all my margins and paddings when I do CSS. This helps me avoid mistakes later.

3. Do visual designs. This is pretty easy after doing wireframeing. I (loosely sometimes) follow the wireframe as a guide, and overlay my design.

portfolio-wireframe-home-v1 portfolio-wireframe-text-v1

It’s a good idea to do more than one design iteration.

portfolio-wireframe

portfolio-wireframe

Personally I like my second design better, but I think I will implement the first design since it will be easier to code up, and I need my portfolio back ASAP since I am looking for a job.

So, that’s it for design. Next I’m going to use this and whip up a WordPress Theme.

Advertisements

Developing for WordPress

Right now I am developing a WordPress theme for my portfolio website. Originally I had been trying to instal Drupal, but that didn’t go very well. After multiple bugs I finally gave up in frustration and switched to WordPress. In this post I will be writing about what I’ve done since I gave up on Drupal.

First, I installed WordPress (WP) on my server. Yes I know, I am developing live which is bad practice… I’m pretty sure though that not many people visit my portfolio site very much at present. I hardly have it linked anywhere. Anyway, pretty much the only thing I had to do to install WP was to download the latest version, and then upload the files via FTP to my root directory. After that all I had to do was navigate to my root url and follow the WP set-up prompts.

Next came the interesting part. I wanted to develop my own theme, but I no idea where to start. So, I found a pretty basic looking free theme called “Responsive,” and started playing around with it. After some surfing of the web, this led me to create a child theme for Responsive. A child theme will inherent the functionality of  its parent theme, unless it has it has code of it’s own. In the cases where code can be found in the child theme, that code is used. For details on creating a child theme, see the WordPress Codex. At first basing my own child theme off of Responsive worked quite well, but navigating and trying to make all of Responsive’s behaviors do what I want them to do is getting a bit complicated. Switching to a theme like Boilerplate would be a good idea, but I figured that I would mess around with Responsive enough to become savvy at working with WP, get a sort of hacky solution up and running, and then clean up my code a lot by switching to Boilerplate.

Developing a basic WP theme is actually not very complicated. Each type of page is controlled by a specifically named php file. For example, page.php controls page behavior, and index.php controls the front page behavior. Style.css is your overall styling file. (One thing I found that I thought was pretty weird was that you have to include a specially formatted comment at the top of each of your files.)  Below is a useful info graphic:

anatomy of a WordPress site.

Back to fiddling with php files…

My First Responsive Site

If you’ve been to my portfolio recently, you will have notice that I am redoing it. Before I had whipped up a quick design using Adobe Muse, which generates code for you. When I’m finished with it however, it will be completely hand coded by me. So far I have the basic structure, which is now responsive to different devices! Not that this is particularly amazing in itself, since it is almost a necessity for web pages now, but it’s the first time I’ve ever made a site responsive.

Screen Shot 2013-07-15 at 4.43.08 PM

Figure 1. My portfolio from a laptop computer.

photo

Figure 2. My portfolio from an iPhone device.

To help me, I referenced this useful tutorial, also by my coworker Mr. Sinkula.

Now it’s time to give myself a high-five and take a break. Maybe… this is pretty fun.