TEEM Technologies Gets a Full Makeover

Welcome to the completely re-designed website for TEEM Technologies!  As it turns out, I was able to complete the re-branding and website design sooner than I anticipated.  Something I'm learning about myself is that I don't seem to like leaving design projects in an unfinished state.  I feel compelled to keep working on them (even into the late hours of the night) until they are completed - then I can rest.

A Little Bit About the Process...

I started this process with a desire to make my brand and website better reflect the growth and transformation of TEEM Technologies.  Now in the third year since starting this business, I recently realized that my own website hadn't been updated since I originally designed it.  I preach to people about keeping their online presence updated, but working on client projects had kept me from applying that wisdom to my own site.  Not only had the design of my original website and company brand fallen out of date, but my design skills have improved as I've learned new techniques and become more experienced.  I wanted the face of my business to reflect that talent to potential clients.

I began by sketching out some ideas for a new brand.  I very briefly considered re-naming the company, but decided against it for several reasons.  For one, TEEM Technologies has become somewhat established as a name among my client base.  That's a valuable asset that I didn't really want to lose.  For another, changing the name of the company would've cost time and money in the form of legal paperwork.  So I kept that name and got to work in my trusty logo design tool, Adobe Illustrator.

The Logo

I'm partial to blue, so the color choices weren't too difficult.  I tweaked the shade a bit toward the green spectrum, and later added the burnt orange for accent.  Dark greys are a favorit of mine, as opposed to black.  And I really liked the Steelfish font that I ended up using.  It's tall and condensed, which works well for a long name such as "TEEM Technologies."  Hopefully it also gives the impression of being progressive and sophisticated. 

After trying out some different visual concepts, I finally chose the mark (the image or icon part of the logo) for my logo after I came up with the tagline "FIND YOUR PLACE ON THE WEB."  The mark is meant to resemble a location marker on a map.  The idea being that TEEM Technologies is here to help you develop your online presence and brand.  Every organization needs to claim some digital territory and establish an identity.  Essentially, find their place on the web.  That's what TEEM Technologies does.

The Website

Once I had a good idea about the new brand (logo, colors, font, aesthetic quality) I began searching for inspiration for re-designing the website.  This gave me some good ideas for what style I wanted for my site.  I usually start by building out the home page.  This is normally where most site visitors will land first, and it sets the tone for the rest of the site.  This takes the bulk of my time in designing a website.  Once that is designed, the rest of the site usually flows out of that.  That's how I approached this project, and most of the styles found on the home page are used throughout the site.

One of the elements that I knew I wanted right from the start was a large header with bold images and text.  A trend that began recently, I wanted to use that space to capture the visitor's attention, and immediately make an impression about what I do and how well I do it.  To add a little flare, I spent some time (probably more time than I should have) making the monitor screens somewhat interactive with hover effects and links to my portfolio.  The rest of the home page is fairly standard stuff:  a slider with thumbnails of completed projects, a couple of testimonials, recent blog intros, etc.

One major change that I made was in the presentation of my portfolio.  I decided to move away from thumbnails opening to full size in a lightbox and instead display full-sized screenshots of recent work.  This creates a rather long page, so I only show a handful of projects here.  As my portfolio has grown, I no longer feel the need to display every single project that I've worked on as some sort of validation that I'm worth hiring.  I will let the quality of my recent work speak for itself and provide additional examples upon request.

Wrapping Up

Just a few odds and ends before concluding...
In order to experience the full effect of the various visual styles and elements, you'll need to be using a modern browser such as Firefox 3.6+, Safari 5+, Chrome, or (if absolutely necessary) Internet Explorer 9+.  As much as I try to develop for cross-browser compatibility, IE8 and below just don't follow modern web standards.  For IE8, I simply try to make sure the site is functional without worrying about every rounded corner or CSS shadow being compatible.  But for the best experience, stay away from IE if you can.

One other little note:  I've switched over to using a new email address as my primary.  Going forward, I will use eric@ instead of admin@.  Emails sent to admin@ will still get to me by way of a forwarder, but if you think of it, you can use eric@ from now on, and any emails you receive from me will come from eric@.

So after spending quite a bit of time on this project, I'm pretty pleased with the results.  I may still tweak a few things here and there, but for the most part, I'm happy with how it turned out.  I do still need to optimize the site for mobile devices.  I decided to launch before taking the time to do that, but I hope to complete that soon. 

But it doesn't really matter all that much what I think...what do you think?  I'm open to feedback and suggestions.  I may not act on them, but it's good to hear other people's thoughts about a design.  Feel free to leave a comment in the section below.  If nothing else, it will assure me that someone other than people who share my surname reads this blog!