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
Adventures Experiments Ideas

How to rip the faces off WordPress hackers… their cheeto-encrusted life-sucking evil faces.

How to deal with website hackers

  1. Find hacker that attacked your site and destroyed the efforts of your labor.
  2. Insert hand grenade into hacker mouth.
  3. Pull pin.
  4. Kick in the nuts.
  5. Run, laughing as their head explodes.

If that doesn’t work, here are some plugins to protect your WordPress site from future hacker evil.

I use all of these plugins on my sites. Each plugin has different settings you can adjust to achieve varying levels of security. Be careful and do plenty of testing as you go. Be especially mindful when you’re restricting access to directories within WordPress. Some directories need to have open access so that other plugins or WordPress functions can work properly.

Here’s more on what to do if your site has been hacked:

Categories
Adventures

Goodbye, office ninjas.

Office Ninjas

I was looking at the asphalt walking slowly to my car, thinking, “This is it. This is the end.”

I’m not dying. But, it’s true. I’m moving to a different company. Starting Monday morning I’ll be sipping coffee, about 15 minutes across town from the people I’ve worked with the last 3 1/2 years.

Good people.

Friends.

Office life is an odd thing. After sitting next to the same group of people for most of your waking hours everyday, you become part of a community. Inside jokes, office enemies, team victories, Internet Explorer bugs; over time these experiences build a micro-culture. Different rooms have different auras. Each personality adds a unique flavor to the mix. No office is exactly the same.

Only those in the region around your desk belong to your tribe.

Outsiders are received with cynical squinted eyes. Sales people are watched with ninja laser beams. Only your eyes move, following them as they stroll gingerly past. Your heart sinks as they pause at your comrades desk.

“Be strong, my friend!”

But it’s too late. You can only watch in horror as they learn how the feature being requested has already been sold to the client.  Your fellow warrior is bleeding from the face.

You quickly send instant messages mocking the situation to ease their pain.

“… yeah, we’re gonna need this by the end of the day. Thanks! See ya later.”

More blood.

You resort to some hilarious tweets.

Your friend smirks.

Its working.

With a screech and a clank the gears of productivity jerk back on task.

Its battles like these that create soldier-like bonds between office mates.

Now I face the challenge of becoming part of a new tribe. Are they ninjas? Robots? Ninja-bots?

Whatever they are… I’m ready to fight.

Categories
Adventures

The Beard of Legend

My beard has been published!!!! This photo was recently included in the book Historical Tweets to represent the Biblical character Goliath. Hilarious.

Thanks Alec for using my bearded mug in your awesome book!

Alec found me here on flickr
Categories
Adventures

5 places freelance designers go to find jobs

5 places to find freelance design jobs

Here are 5 places I visit regularly to find freelance work. Of the sites listed below, only Sortfolio and Coroflot have given me actual projects. I think my prices were too high for most of the jobs I applied for on the other sites. It’s hard to compete with Asia, but for now, there are still plenty of opportunities available for everybody with a solid portfolio and the willingness to work.

Yes, a lot of the jobs on these sites are posted by people shopping for the cheapest price possible without concern for quality. I pass on those jobs. This allows me to focus on jobs that sound cool or pay wads of cash. This strategy is starting to pay off. I recently landed a fun temporary job that pays handsomely for quality work and allows me to do what I enjoy (designing things).

If you’re a seasoned professional or even if you’re just starting out, these job sites are worth a look. Especially since most of them are free.

  1. Sortfolio
  2. Coroflot
  3. Freelance Switch Job Board
  4. Krop
  5. Elance

Have you gotten a job from any of these or other online job boards?

*Updated July 1, 2010

Categories
Adventures Ideas Inspirations

What’s the best computer for graphic design: Mac or PC?

WARNING: This post contains completely biased opinion from a Mac user.  You may experience entertainment and a desire to purchase Apple products. If symptoms persist for more than 30 days, save your money and call your local Apple dealer.
Mac vs PC ad guys

Nick Elam, sent me a controversial question that inspired this post:

What kind of computer do you suggest for graphic design? Mac? PC?
My laptop is too slow to handle my graphic design work lately so I’m looking for a new computer. Lots of people say “go with a Mac”, but I could build a PC with a faster processor and better video card for a lot less. What do you think?

I’ll answer Nick’s question with pure opinion. I don’t feel the need to regurgitate a balanced Mac/PC debate. That’s been done, and that’s what links are for:

Quick summary: I use Macs.

  1. As a graphic designer, the tools you use daily will influence your work on some level.
  2. Apple is able to “design” the entire user experience of their products since they build the hardware and software themselves.
  3. If your budget is an issue, find a refurbished or used Mac. They hold their value extremely well. I bought a 2006 iMac 24″ as a family computer in 2009. After we replaced the video card in 2010,  it functions perfectly, even with the latest Mac OSX installed. It’s definitely not as swift as my 2011 Macbook Pro, but it get’s the job done.

Let me start by saying buy a Mac

Apple Mackbook Pro 15 inch early 2011
My current laptop 2011-2013

And let me follow that up by saying buy a Mac now. I don’t care if you can mine silicon, weld transistors, and engineer the motherboard yourself. Using a Mac is better than using a Windows PC for graphic design, like using a pencil is better than a rock and chisel for drawing portraits.

I’ll explain.

Space defines action

I believe your environment influences your work. As a designer it makes sense to use things that are well designed. Interacting with a well designed product actually teaches you how to design better.

User experience trumps hardware specs

Apple Vs Microsoft Switchboard
Now that Intel Macs can run both Windows and Mac OSX there is no need for other hardware. If you are only interested in comparing hertz and bytes, then there isn’t much difference between a Mac and a Windows PC. However, by only comparing hardware specs you’re missing the bigger picture. As a graphic designer your computer is your business partner. You will spend hours everyday interacting with this machine. Designing your latest masterpiece, communicating with clients, sending out invoices, getting lost in a Twitter/Facebook hole; all of this happens on this one device. That’s why I believe the software on your box is a little more important than the metallic bits inside.

This is where Macs move way ahead of PCs. The Mac operating system is an intuitive streamlined environment. It simplifies basic interactions, and doesn’t get in the way productivity. This efficiency will pay big dividends in the daily grind of being a graphic designer.

Modern Macs can do it all

I use a Mac for all computing purposes, except for the occasional website debugging that I have to do for Internet Explorer. Internet Explorer isn’t made for Macs anymore. This means I must traverse into the nether regions of darkness to find a cheeto-encrusted Windows-based PC to test my website. Even testing Internet Explorer bugs. I simply open Parallels and can swipe between Mac & Windows easily.

The necks of PC fanatics are thick with veins by now. I haven’t given a lot of statistics, references and bar charts to prove my theories. But as I said before, I’m simply voicing the opinion that’s been formed in me after years of working with both Macs and Windows-based computers.

I choose mac. What do you use?

UPDATE! Windows 8 is a game changer and definitely put the Microsoft Windows' UI in a better place. Definitely check it out, use it, learn from it. But as of 2013, I'm still leaning Mac. After a few iterations on some of Microsoft's new concepts in Windows 8, I may be singing a different tune.