The new year brought a more polished look for Focus Lab. Since 2011 was so great for us, we were excited and anxious to rework our website to spotlight new team members, refined service offerings and our latest portfolio of work. Although the the overall aesthetic is similar, the site is quite different in the details. In this post I will explain the new design changes and the reasoning behind them.

How it started

A wonderful, yet crippling aspect of being a designer is an insatiable appetite to constantly perfect your personal brand. This results in a burning need to constantly redesign your own website. One late night in the office, while getting distracted by amazing dribbble shots, I decided we were ready for the next iteration of our website. The current site had done its job, but it was now time to take it up a notch. The following weekend consisted of design-a-thon with myself and Matt Yow. Loads of whiteboard artwork, some Jimmy Johns’ sandwiches and a few Sam Adams later, we had the overall direction for what you are looking at today.

Goals for the new site

Any proper web design project needs goals and we certainly had a couple in mind. The most obvious was to polish the overall look. The primary design goal was to continue to keep the site simple, while adding subtle interactions to enhance the user experience. The next goal was to create a portfolio section with greater depth that truly showcased our work and was easily scalable for future growth. Finally, we set conversion goals, focusing on clear calls-to-action and supporting data to track those conversions.

Side by Side

The first big change was to the home page. The previous home page was a modified, single-page scroller that covered a lot of territory. On it, we discussed what we do, who we are, work examples and the contact form. The new home page had a single goal: clearly identify what Focus Lab does. With the use of white space and a large typeface, we leave no question for the visitor that our expertise lies in branding and ExpressionEngine. To compliment the opening text we detail some services, feature some photos of the team and highlight some of our clients.

The portfolio is completely reworked. The old portfolio was also a grid, but that’s where the similarities end. The new look allows us to showcase a featured project, detail the work that was completed, capture client quotes and display a virtually unlimited number images per project.

The ExpressionEngine page is an extremely important page for us, and it was crucial that we focused a lot of attention on it. Since our growing development team is so fluent in EE there was a lot of ground to cover on this service page. I chose to create a long, scrolling page with clearly defined sections and an anchored navigational element. We also chose to keep a contact form on the EE page because the direct traffic it receives from our EE marketing tactics. Essentially, the page currently serves as landing page for our EE targeted traffic, with a full service synopsis and a contact form so they don’t have to go elsewhere on the site.

Team & Culture

Another big addition was the creation of our team and culture page. Our previous coverage of the team was on the home page and featured three small thumbnail photos. Needless to say, that style was not scalable and we outgrew it in 2011. The new team page features short bios for all team members, social links and a great collection of culture shots from around our office. We also reworked the individual bio pages for each team member with a full bio, latest dribbble shots and some personal fun facts.

Blog / Comments

When we launched our first site back January 2011, we had no idea that our blog would turn out to be a such a great resource for our peers and ourselves. We quickly learned that we really enjoy posting articles detailing things like our branding processes and business experiences. We also saw that other design and EE professionals were enjoying the posts. This convinced us that we needed to not to overlook the value of our blog in the new design. I was quite happy with the overall structure of the blog, so I focused my attention on small details and one significant change. The biggest obstacle to participation on our old blog was the hidden comment form. It required users to click on a button located at the top of all the comments in order to chime in. This was not ideal. Our new approach is much clearer and more user-friendly. After the post, there is a “Share your thoughts” link that takes the user to bottom of the comment feed and places them on the form. Users no longer have to search for the form, nor do they have to scroll back to the top after reading all the comments in order to participate.

Since our blog is where many people first come to our site, we also identified the need create a clear call-to-action for contacting us. We did this by incorporating the anchored ribbon on the right side on the page that is clear but not intrusive to the reader.

Contact Page

Since our old site was a modified one-page solution, the contact form was located on the home page. Although that had worked on the previous site, I opted for a more traditional solution on the new site. It looks nearly the same, but it has some nice new additions. Upon submission of the form, users get a friendly, personalized response. They also get some navigation options to drive them back into the site, in case they missed anything.

Some other notable changes were the rollover effect we created for our portfolio (you can use the keyboard for navigation as well), the customizable quote bubble for each portfolio piece, a sample of client logos on the home page, some great photography of our office and an in-house EE Plugin utilizing the Dribbble API.

What's next?

The list of new additions has already begun. We love our new site and are already planning how to make it even better. The most common question we have heard so far is “why did you choose not to make the site responsive?” The simple answer is data; a whopping 7% of our traffic is on a mobile device of any kind. That wasn't enough for us to throw in the latest buzz-word in tech. That said, we do plan to roll out some mobile-friendly changes over the next 6-8 months as we continue to tweak and oil this new machine.

Also, in the next week or two Erik will be writing a technology-focused post comparing the old site to the new. We look forward to hearing your thoughts on the new look and the changes that we made.

Thanksgiving just got a whole lot better! We have 2 dribbble invites to give away and we are calling all turkeys to spread the word & wow us with your work.

How to Enter

Entering is simple. Just tweet (or) retweet this post (Tweet button is below) and drop us a link to your portfolio in the comment form below. We will spend the day stuffing our face with food and crawling your work to decide on the winners. Follow us on twitter for potential shout outs of the awesomeness we come across in the judging and for the winners announcement.

Winners will be announced on Tuesday morning. Happy thanksgiving!

At what point did design take a turn from the clear and effective treatments that we saw in the modernist movement and turn into a mass-production of technology-reliant solutions full of gradients, bevels and unlimited fluff? Attention to detail has become attention to 35 different layer effects, and such reliance on software tricks is not good for our industry. As designers, it is our duty to create unique and effective visual solutions for our clients. To accomplish this we must constantly remind ourselves of the key framework within which we create, and carefully add new skills and thought processes upon that foundation.

Recently, I have seen signs that design is getting back to this more effective and pure form. As the minimal design aesthetic becomes more and more popular again, it is important to realize that it’s more than just a personal preference. Striving for simplicity and clarity should be an essential mindset for creating successful designs. In design, now more than ever, less truly is more. As designers we hear this term daily, but we don’t always incorporate it in our work. With the expansion of digital platforms and countless touch points to share our work, consumers are absorbing and digesting design more then ever.

“In design, now more than ever, less truly is more.”

With our society’s design saturation, it seems as though the audience is responding less and less to the “bells and whistles” type of design. Weekly stories of major corporations undergoing major re-branding initiatives seems to bear this out. Many corporations have bought in to the premise of simplification and are positioning themselves with an instant and memorable logo and/or message.These companies are transitioning from their older, more complicated marks to reduced, cleaner solutions. They understand the value in a design that is clear in its intent, target and message. Most importantly, they have realized this can be accomplished without every trick in a designer’s arsenal. An effective design cannot and will not be everything to everyone. An effective design simply needs the power to capture the viewer for a split second and deliver the message.

I have adopted this minimalist mentality in my work. For me simplicity has evolved beyond personal style, and is now a pillar in my design philosophy. As creatives, we always feel the need to explore every idea - and we should, it is essential to the process. The danger is when we we try to combine the best parts of many ideas in a single design, and we end up jamming multiple techniques together. I have been guilty of this myself many times, and the results are rarely effective. During the creative process we need to be conscious not to incorporate all of our ideas and or skills into one solution and keep in line with a single application that stays within the goals of the project. Jacob Cass said it best in his recent article “Be Creative, But Please Don’t Overdo It”

“What should have been a blank piece of letterhead someone would be able to type a letter on looked more like a TV screen of a news network broadcast with a stock ticker along the bottom, a news ticker at the top, a weather map on the side, and a bullet-point graphic seemingly growing out of the news anchor’s head.

“The approach of throwing everything up and seeing what sticks is great if you’re talking about a brainstorming session and a whiteboard. It’s not a great approach if you’re talking about a thousand printed sheets of 28-lb linen paper.”

This simplistic and minimal mind set is even more important when discussing a new logo treatment and how that logo will transition throughout the extensions of the brand. Fluff has no place in the branding world. Branding is meant to be unique, versatile, memorable and often, timeless. All things that are nearly impossible to achieve with a cluttered solution.

The true power of a successful design only starts to show when you pull away the unnecessary treatments and expose the hidden solution that lies beneath. Like the proverbial “Man Behind the Curtain,” it’s when you remove the fluff that you will start to reveal the beauty of the final solution that lies behind it all. It is only when we can become comfortable with breaking down our own designs and parting ways with our personal interjections that the design will begin to shine.

As previously stated, this idea is evident in the recent rebranding of many large corporations. Starbucks, for example, was able to reduce their branding down to the single mermaid head image. They realized this iconic image was all they needed to represent the power of the Starbucks brand. They even chose to lose the name in some executions, as ultimately, it was just wasted ink.

Always remember the goal

Having said all this about personal and industry-wide styles, it is also very important to remember who you are designing for. In most cases (hopefully), your designs are for clients who have very specific goals for those designs. We need to be very careful not to inject our personal taste into a project at the expense of their goals. Granted, there is a fine line here, because your design style is likely a large reason why you were hired for the project in the first place. So, I’m not suggesting you eliminate that or even mute it. What I’m suggesting is Photoshop effects are not a style - they are a tool. Use your instincts, skills and talent to make a design that will work for your client.

David Bushell wrote a great article called “Design for Clients” covering this idea. In it he says:

“Designers should take pride in the purpose & effectiveness of their design, not the skill in which they can apply Photoshop effects.”

With the growth of social design sites like Dribbble, Forrst and LoveDsgn we can see the trends that start to overtake us. We need to focus on reducing the clutter along with keeping in mind what is best suited for a particular project / client.

We need to be conscious to stop and ask ourselves:

• Why are we choosing to add that outer glow and is it necessary?
• Is the slight texture in the background adding anything to the overall design or is it actually taking away from what could be a better reduced solution?
• Does the styling I chose to add serve a purpose, or am I just adding fluff?

Sometimes it is nice to get perspective from someone who is not a designer. I often lean on my business partner @ErikReagan, who is a developer, for what I call “pruning advice” (a process of reduction). As a developer, he processes things in a completely different way than I do. He can easily address the over-designed elements in my work because his mind is geared for function and purpose, as opposed to the aesthetic approach I bring. He has no issue calling me out for graphic applications that are unnecessary in early stages of my designs, and that input proves invaluable as the design moves forward.

In the end clarity is key. Always keep in mind that your client has goals they want to accomplish, and your design needs to help them achieve those goals. Also remember that less is almost always more when communicating visually, so don’t be afraid to prune your work.

What are your thoughts?

Please let me know what your thoughts are on this topic. It is always nice to get insight from other designers on personal feelings and or work processes in regards to our industry.