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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s