Categories
Adventures

Fitts Architects Website Design Process

fitts architects office building

Fitts Architects in Tuscaloosa, Alabama hired me to redesign and rebuild their website. Here is the story behind the project and the process we went through to polish their brand on the internet.

Respect at first sight

In college I lived within 100 yards of the Fitts Architects office. Every time I drove by I would think to myself, “I really like the look of that building.”

The simple modern lines resonated with me. The design stands in stark contrast to the Classical, Victorian, and Early 2oth Century Style homes that surround it. I respected their boldness.

Fitts Architects office building front steps

A few years later I drove by and thought it would be awesome to have them as a client. I sent a cold email to the owner of Fitts Architects… Fitts himself.

I simply told him I was a fan of their work and that if they ever needed help with their website or other graphic design services I happened to be skilled in those areas.

Fitts Architects metal sign on brick wall

To my surprise he was very gracious and told me to come by the office. Several meetings later,  we signed a contract and I was officially the web designer for one of my local design heroes!

The Design Process

Here is a look inside the process I used to go from concept to finished product.

Phase 1: Set Goals

The first step involved meeting with the client to figure out the purpose behind the website. What goals were they trying to accomplish with this project?

  1. Basically, they wanted an updated version of their current website that was easy to navigate and elegantly designed.
  2. The design and functionality of the original website lacked the sense of high quality professionalism the Fitts brand stands for.
  3. However, there was a certain simplicity and elegance about the original site that the client wanted to carry through to the new design.

Fitts Architects original website

Considering their goals for the functionality and design of the new site I moved on to the next phase.

Phase 2: Get Exposed

Exposure to as much information about the client’s business, competition and industry at large is critical. I began scouring the internet for the websites of other modern architecture firms, taking note of how they solved similar problems to what my client faced.

Then I collected benchmarks, including  local competitors and global peer, and sent them to Fitts. He reviewed them and sent me valuable feedback and his vision for their new website. I’ve found several benefits of involving the client in the research process:

  1. Helps them compare their current site to others in their industry, reinforcing their need for my services.
  2. Helped answer questions that I never thought to ask by getting their feedback on the design, features, and functionality of other websites.
  3. Keeps the client and I in an ongoing conversation about their website throughout the project.

Phase 3: Find the concept

Phase three is basically visual brainstorming. With information from my research fresh on my mind I take out my sketch book and a mechanical pencil, or an ink pen depending on my mood, and spend at least an hour sketching out everything that comes to mind.

The goal here is not to create perfectly rendered illustrations, but to sift through the ideas that started to form during the first 2 phases. Sometimes I’ll draw random stuff to help kick-start my creative juices.

The Fitts sketches above include random lines, logo ideas, and even a sketch of their building – none of which were part of the website design I was hired to create. You might think this is a waste of time, but while exploring ideas like this I uncover valuable perspective and unexpected inspiration.

Until I have a strong conviction about a specific idea I keep scribbling. I think finding the right idea, or concept, is the most critical step in the design process. I’m a firm believer in pencils before pixels.

Phase 4: Mock it up

With sketches in hand I start bringing my favorite concept to life in Photoshop, or Illustrator. Depending on the project I may show the client some of my sketches to make sure we’re on the same page.

Fitts Architects Website Re-Design: Concept 1

The first concept I created for Fitts Architects strongly resembled their business card at the time. The header section shares the same logo placement and color scheme as their cards. My attempt to create consistency among their existing branding materials was rejected in the end.

After reviewing Concept 1 the client stressed how much they enjoyed the simplicity of the current website and wanted to see something in that direction. Happily trying to please the client, I presented Concept 2:

Fitts Architects Website Re-Design: Concept 2

Another meeting, another concept down. Concept 2 didn’t quite hit the mark either. They offered some more ideas, including the integration of a new gold-ish color into the design. I obliged and presented Concept 3:

Fitts Architects Website Re-Design: Concept 3

When this third concept failed to excite the client I got worried. Were they going to fire me? Not quite. The project continued but with some unexpected twists.

At the meeting to discuss the third concept pictured above, the client had literally built their own concept for what they thought the site should look like using construction paper and previous concepts I sent them. This was a first in my experience as a designer.

Client concept for FittsArchitects.com

They wanted the logo bigger and suggested the use of some decorative colors and shapes in a kind of modern art/abstract way. Architects are fellow creatives, so I understand the urge to just show me what they wanted. Still, this was one of the more awkward moments of my career. Dutifully, I agreed to digitize their mock-up:

Fitts Architects Website Re-Design: Concept 4

While presenting their idea to them, I suggested they give me one more chance to take their design and add my own styling to it. They easily agreed and I breathed.

This time, I wasn’t holding back. I axed the color, and made the shapes more of a subtle accent than a feature. For the logo I recreated their metal sign. The photos are the main feature of the site so I didn’t want random design elements to compete visually. The work is what the client wanted to feature. This design would do that.

I felt good about Concept 5. I sent the email with the concept attached and hoped for the best.

Fitts Architects Website Re-Design: Concept 5

With a simple, “That looks great!” the design was approved.

After building the site with HTML, CSS, Javascript and WordPress, the new site was launched: Fitts Architects Website

Categories
Experiments

Free Desktop Wallpaper Background: Black Boxes

black dark gray boxes grid background

 

My latest free desktop wallpaper design is an arrangement of dark gray blocks on a black background similar in layout to
Piet Mondrian‘s Composition II in Red, Blue, and Yellow, that he painted in 1930. I’m not saying its as revolutionary as his painting, only that it shares the same balance of visual weight. If you like this wallpaper you can download it for free. Love it or hate, feel free to express your opinion in the comments.

Categories
Ideas

Free High Resolution Wallpaper: Black Burst Design

Black Ray Burst Wallpaper

Here is a free wallpaper background I designed. It contains a dark gradient with rays beaming from left to right. I use it on a Mac to highlight my Dock that I’ve positioned on the left of my screen.

Dark Ray Burst Desktop Wallpaper Example

If you download this wallpaper, please donate so that I can create more free desktop wallpaper backgrounds.  🙂

Resolution : 1440 x 900 ( Widescreen )

Resolution: 1024 x 768 ( Fullscreen )

Resolution: 1024 x 768 ( Fullscreen )

Resolution : 800 x 600 ( Full Screen )

Resolution : 800 x 600 ( Full Screen )

Resolution : 320 x 480 ( iPhone )

Resolution : 320 x 480 ( iPhone )