Posted in | 0 comments

Client: Myself


Role: Interactive designer and developer

Primary goal: Use an established open source back-end for easy project updates

Tertiary goals: Improve search engine optimization, site analytics, and accessibility

The portfolio website

The portfolio website

Technology used: XHTML, CSS, MySQL, PHP, WordPress, Adobe Flash, Actionscript 3.0, sIFR, Javascript

Note, for the following description, I am assuming a different primary audience than other pages on my site. For this page, I will speak more to other web designers and use web jargon. If you get lost, just shoot me an email and I’ll see if I can answer the questions. OK. Let’s get started.

Step 1: Goals

The first step of any project is identifying goals. Without them, the project may head in side directions without a means of returning back on track. My goals were:

  • Showcase projects to potential clients
  • Redesign the site with a fresh but simple look
  • Use a back-end content management system to allow for easy updates
  • Improve search engine optimization (SEO)
  • Improve accessibility
  • Implement site analytics

Step 2: Audience

The second step was identifying who is my audience, especially who is primary. Knowing whom my audience is and what they want will also inform design decisions. I assumed my audience was:

  • Primary: Potential clients who want to get a taste of my work to see what I could do for them
  • Secondary: Other interactive designers who are interested in my work and in the how and why I made design decisions
  • Tertiary: anyone else, including friends, family, search engine spiders, etc whose wants are varied

Step 3: Inspiration

I always begin projects looking for a spark of imagination and creativity. I might find it walking outside or at a museum. I might find it online, looking at other websites. Whatever the case, I look. In this case, I looked at a lot of portfolio websites of fellow designers to see what I liked and what I didn’t like. Basically, I liked the more straightforward sites that gave you a taste of a project, maybe some behind the scenes tips, but then linked on to the actual project. Less is more.

Step 4: Site Architecture

With the spark of inspiration and goals, I then start thinking about how the users’ experience will unfold. Then, I lay out the flow of the site. Sometimes this will be a flow chart or wire frames. In this case, because I was the client, I simply made a text file with a hierarchy of pages.

Step 5: Sketches

After initial inspiration, I started with pen and paper to sketch out the ideas

After initial inspiration, I started with pen and paper to sketch out the ideas

Then I begin on paper. I get out as many ideas that are rattling around in my head as I can. In this stage, some of them work and some of them don’t. But it saves a lot of time and energy to get as many of the bad ones out now, on paper.

Step 6: Mockups

Then, I move to Photoshop with my favorite sketches. Ideas tend to morph as pixels are finally created. Designs tighten over the mockup development. I’ll normally show 3-5 mockups to a client for review and then make a final design after feedback. Since I was the client, I just picked my favorite.

A few notes:

  • Color: The previous portfolio design used a burnt orange color (my favorite color). However, I chose the color on my Mac (which has a gamma 1.8). Viewing the same site on Windows (gamma 2.2) resulted in an almost neon orange. This time I chose a color in-between that looks good on both Mac and Windows even though neither is my favorite burnt orange.
  • Design Grid: I used a 960-pixel design grid for the framework of the site. Most desktop web browsers are now at least 1024 pixels wide, so I could use more horizontal space than the previous template. Later, I’ll plan on making a mobile version on a smaller width.

Step 7: Choosing the right tools

I needed to make some choices of what to pull out of the interactive toolbox before I started with any code. Here were my thoughts:

  • HTML5 and CSS3: The ink is still wet on these tools and there are some pretty cutting edge parts within HTML5 and CSS3. As an interactive designer, I’m excited about these tools and have started playing with their possibilities. My personal site is a prime target on using the new tools, instead of on a client’s site. But, I decided against these tools due to my primary audience: potential clients. They want a to see a working site that does its job. Not a site that works in some browsers and not in others.
  • XHTML1 Strict: For the underlying semantic markup, I decided to use XHTML because it just makes more sense that if you open a <tag> then you need to close the </tag>. In the past I’ve used the transitional form of the language to allow for clients to change their own text, make a minor mistake, and still hopefully pass validation. But this is my site and I control the content. So, strict it is.  I can be good.
  • Web Typography: I’ve been watching the interactive design landscape at the powers of real web typography with @font-face. But not all modern web browsers support the wonders of web type. And again, for my primary audience, I want it to work 99% of the time. That knocked out @font-face for this project. I also looked at TypeKit, which I will certainly be using in future projects. But for know I wanted to use type choices that web designers have used for a decade, except some fun with headers using sIFR3.
  • Flash: The previous design version used Flash to contain all of the content, while creating a non-flash version with PHP. It worked, but it was not as accessible as a XHTML/CSS site is. So, I decided to use a minimal amount of Flash, but only as an element, not a framework. This also allowed me to say a few more words about a project than just the one paragraph model in the previous design.
  • WordPress: I chose WordPress as my content management system because it uses web standards based technology and is smaller scope than Joomla or Drupal. In the future I’ll certainly try out Drupal, for scalability reasons.

Step 8: Prototypes

The XHTMl prototype skeleton

The XHTMl prototype skeleton

Now it’s time for some code, but starting in fast sketch mindset. In this case I went through a few iterations:

  • First, I used no special type treatments.
  • Then, I tested a new technique to me, sIFR3.
  • Next, I applied the sIFR technique to my prototype. The result used Univers type on the web, but I was not able to control the placement or underline with CSS in the header and universal navigation (I stuck a second navigation bar in the footer to see the problems in action). So, I changed my mind about using sIFR in the header and navigation. I was able to use it to replace text for headers, which is what the technique was invented for. Yet, I could not have the replaced text be a link, for fear that Flash would change the color to standard link blue and underline the text.
  • Then, I developed a working raw (X)HTML/CSS layout. I was starting to get there.
  • With the basic template created, I then developed a WordPress theme from scratch.
  • The result was a skeleton framework to build my content. It was much more accessible and SEO friendly than my previous portfolio design. I also made sure to add Google Analytics to the site, in order to see where visitors where going.

Step 9: Justify

I learned this step from Hillman Curtis’s book MTIV: Process, Inspiration and Practice for the New Media Designer. I review my design and need to justify all that I did. If I didn’t fit, then try it without. Often the simplest of designs are the best, and the most difficult to achieve.

Of course, I also took this time to do some ad hoc usability testing, recommended by Steve Krug’s Don’t Make Me Think.

Step 10: Content

Fill ‘er up. Then it comes time to populate the skeleton site with real content and use a review process to find any errors. I always use a second (or more) set of eyes on my material. Someone else always sees something that I don’t.

When the content is done, it’s time to make the site live.

Step 11: Results

Let’s review the goals and make sure that I met them:

  • Showcase projects to potential clients
    Check. The site focuses on projects. Project images are high on the visual hierarchy promoting the work in the photos, and thus the projects.
  • Redesign the site with a fresh but simple look
    Check. Simple was the goal, and simple was achieved.
  • Use a back-end content management system to allow for easy updates
    Wordpress did the trick.
  • Improve search engine optimization (SEO)
    Choosing a XHTML/CSS based model (instead of a pure Flash site) allows the content to be easily found by the search engines. If I were really trying to push top results in search engine results pages, then I would probably work with a professional copywriter to improve my text and use important keywords. However, in such a competitive market for interactive design, my business model uses word of mouth more than search engines for new clients. At least the new design does not hide the content from the search engines.
  • Improve accessibility
    Check. I could do more with better alt tags, but again the web standards based model of XHMTL/CSS allows for much improved accessibility.
  • Implement site analytics
    Check. Now I can finally see where my visitors are going.

All in all, I’m happy with the results. The site will continue to morph and grow, as all web sites have the ability to do. But this site is good start.