The Focus Blog | Focus Lab, LLC

Focus Lab: Old vs New: Design

2012-02-07T14:40:00+00:00

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 for, 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.

Monocle Man Challenge Winners

2012-01-26T15:23:00+00:00

Well, it seems that our challenge, although tricky, was not hard enough to outwork the super sleuth team of Nick Benson and Than Thibbetts. They were the first person / team to successfully locate all 7 Monocle Men and provide the visual proof. A big hat-tip to them for their determination.

We figured we would do some detective work of our own and learn how they chose to go about the challenge, what threw them for a loop and how they plan to spend their winnings. With that we give you an interview with our winning team.

Q. Did you have a strategy?

Nick:

I caught wind of the contest a few minutes before closing time at the office, and clicked around the site a little bit using developer tools, and quickly located a hidden Monocle Man in the source code of each page, as well as in the sprite graphic used in your header logo. I hadn't a clue at that point where it was actually used on the site, but, I took note of it so I could continue the hunt when I got home that evening.

After feeding the kid, I setup the playpen in the office, and got back to looking for easter eggs. I thought about how my team's hidden easter eggs in previous projects - Konami code, background textures, stock art, etc., but none of those proved to be useful here. After reviewing the CSS, I was able to figure out where the sprite graphic was being used, but, that only accounted for a couple of them.

A Google search for "site:focuslabllc.com monocle" quickly located the fourth monocle, which was included on your blog post about the new brand.

After clicking around a little bit, I gave up on the inefficiencies of manually looking for the Monocle Men and downloaded Site Sucker, which scarfed up all of the HTML, CSS, JS, and images on your site, and allowed me to view, search, and edit all of the source on my computer. I reviewed each image, and discovered an avatar file that contained a Monocle Man. Using the file name, I did a search on the whole site's source, and discovered it was used on Matt Yow's profile, which brought me up to five.

Than:

Before I even finished reading the post I had to try the Konami code, of course. The first place I looked, like most folks, I imagine, was the HTML source. Immediately after that I went straight to the crawler. I've had this little piece of shareware called — very imaginatively — SiteCrawler laying around for years for just these types of situations.

1) Located in the source code of every page on the site

Q. When did you decide to team up?

Nick:

It was getting late, so I went to bed. As I was doing my final round of pre-sleep Twitter checking on my iPhone, I got a direct message from Than at 12:30 AM; at 12:40 I suggested we team up and split the winnings.

We discussed strategy and tried to figure out other ways things could be concealed if they weren't in the JS, CSS, or HTML, which we had already scrubbed pretty thoroughly. We bounced ideas back and fourth over Twitter until 1:25, when Than found the one hidden in the 404 page. Since we were now up to 6, I crawled out of bed and got a laptop to continue the search on something with a larger screen.

After groggily clicking about the site, I discovered the final Monocle Man, hidden in the photo outside of the Focus Lab office. It was roughly 2:00 AM.

Than:

I didn't start looking until late at night after Nick took your suggestion and tweeted think link to the challenge. It was pretty funny as Nick said he was nearly asleep until I found the 404 Monocle Man. His next message was ":: fires up laptop ::"

Q. What was your first/easiest and last/hardest find?

Than:

The tiny Man in the black and white image was definitely the hardest. Nick and I were both out of code-based ideas at that point and started rechecking the images just to be sure.

2) The favicon on Matt Yow's page;
3) Logo mark change when browser is shorter than 200px;
4) Hover state of comment bubble on single-entry blog pages (like this one)

Q. Did you fall into any booby traps?

Nick:

We considered canvas tags, inline CSS and JS, disabling JS, changing browser agents, making the browser wide, making the browser narrow, using IE6, submitting forms (with and without errors), checking robots.txt, humans.txt, sitemap.xml, etc.

Than:

Nice try on the empty focus.monocle.js script.

I spent way too much time rooting around in the source code. No joke, after crawling the site, I took the site into BBEdit and batch replaced every <script> tag and <link rel="stylesheet"> I could find thinking you might have slipped one in quietly on one of the pages.

The 404 page Monocle man was easy to overlook. My first try was popping open the Web Inspector and looking at the image in the browser. However, the only way you're going to see the image is over a non-white background or in an image editor. Luckily, I'd opened all of the images in Preview to quickly flip through them, and Mr. Monocle was staring right at me over a plush #929292 background.

5) Located in an old blog post;
6) Located in the 404 page background image

Q. Total time to find all seven?

Nick:

Four hours on my end, I think, 1.5 of which were in bed.

Than:

I probably hunted for an hour and a half or so, then hurriedly putting the screenshots together in an email.

Q. What are you going to do with the 300 big ones?

Nick:

It'll either go towards some fantastical electronic gizmo, or be squandered on supplies for baby #2, who's due on April 15.

Than:

My wife and I are taking a trip to Ireland this spring, so it will probably be put to good use on a few travel gadgets.

7) Placed in a window of the Avia hotel on our team page

Q. Any final thoughts?

Nick:

You have a lovely website; I hope to look at it again sometime.

Than:

I wouldn't have gotten to know Nick without the Twin Cities ExpressionEngine User Group

It's just like they say: ExpressionEngine, bringing people together for money since 2005.*

It's been a fun group to hang out with over pizza every month, and getting to learn from the really talented developers there, like Reactor team member Brian Litzinger, has been a real boon to my EE site-building skills.

And, of course, congratulations on the new site. It's really well made. I know, I've seen the source code. All of it.

*They don't really say that.

A big thanks to all who played and don’t worry, we will have more challenges later this year!

The Monocle Man Challenge

2012-01-24T19:57:00+00:00

We’re almost a month into 2012, and what a start this year is off to! We couldn't be more excited to show off our new team and revamped portfolio on our brand-new website. Last year was amazing in so many ways- we worked on some awesome projects, we added a few rock stars to our team and focused a lot of effort on refining our skills and focusing on our areas of expertise. But, we aren’t resting on our laurels. Onward and upward! Since encouragement and positive feedback from our peers has played a huge role in our success, we decided to launch the new site with a nerdy challenge, just for you!

The Challenge

Since we are crazy bunch of chaps who like to make everything we do spectacular, we decided to kick-off our site launch with a challenge filled with mystery, suspense and rewards. What’s not to like?

The premise is simple, there are 7 Monocle Man graphics buried in the site. Be the first to find all 7, and you win! You do know who Monocle Man is, don’t you? (Hint, check out the poster below.)

The graphics are be numbered from 1-7 for to guide you on your quest. The numbers indicate how hard we think the image is to find. 1 is the easiest. 7 is terribly hard.

The Rules

Once you locate all 7 Monocle Men you will need to send us an email to iFoundThem@focuslabllc.com containing screenshots of each. The first to accomplish this death-defying feat will be crowned king and reap the rewards. We are looking for a specific 7 answers so if you submit a Monocle Man (like the one in the poster above — but that one doesn't count) that isn't on our list, we will let you know and you can keep hunting for the remaining one(s). (We’re not responsible for technological failure, and proof of a sent email will not be proof of our receipt.)

The Prize

Although street-cred goes along way in our industry, we decided to spice it up a little more.

The winner will receive a $300 Amazon gift card! For real! No, seriously!

Get started!

If I were you, I just might tweet the challenge, and I would certainly comment on this blog post to say you are in. It will get you on our good side, and might even result in clues when you hit a dead end. Happy hunting!

2011 Recap

2011-12-14T13:00:27+00:00

Here we are the end of 2011, and it has been an amazing year. It was great for us both in things that we learned as well as company growth. We wanted to take a minute to breathe and reflect on how it all went down, what we learned, and to share some insight and show some love.

First thing's first.

Thank You! - to all of our clients and peers.

It is because of you that we are able to live our dream and do what we love on a daily basis. We are blessed to have great clients and peers that share thoughts and push us to become better at what we do. We cannot thank you enough.

How the year started

The short story is we finally made a website for ourselves. If you’ve been following us for a while, you may remember we started the year with a re-branding and the launch of our new website. This was truly the jumping-off point for our business. Our year would not have been the same without it. We created a brand that was simple, yet powerful and a site that embodied our work and personalities. Within weeks we were quoting projects that were unattainable just last year. We had no idea the impact the new site would have.

Having said that, and not to be outdone, we are very excited to be launching a more polished and content rich version of the current site this January. With the amount of growth experienced, accomplishments achieved and clients gained this year, we are excited to deliver our next installment that will showcase Focus Lab even more clearly.

Refining our skills

2011 was a year of refining and enhancing our skills. When Focus Lab started, we tried to be a full-service, everything-to-everyone kind of firm. That’s a real challenge with a small team. It makes refining specific skills difficult and perfection of those skills out of the question.

At the beginning of the year, we were designing print work, so we chose to handle the printing orders as well. We were designing and developing robust websites so, in turn, we offered a range of hosting solutions to those we were developing for. Good design often requires powerful photography, so we were taking pictures too. While the work was steady and often rewarding, we realized all of these additional tasks, tasks that could be outsourced, were overwhelming our true passions for branding and web development, and were keeping us from truly advancing our skills in these areas.

We have now more clearly defined business goals, and have begun eliminating and/or outsourcing some of the additional things we did in the past. Moving forward we want our future clients to know that we do a small set of things and we do them extremely well. Those things will ultimately be Branding & ExpressionEngine Development.

Speaking Events

We were humbled to be selected to speak at two great conferences in 2011. Our mastermind Erik Reagan was selected to speak at the international ExpressionEngine conference called EECI held in Brooklyn, New York this year. He dropped knowledge on the nerdy topic of Version Control and Multi-Environment development and was also invited to lead the only workshop at the conference. If you are interested in learning more about his talk make sure to check out his presentation notes on our blog.

We were also selected to speak at a great interactive conference called Geekend. Our topic “Knowing is Half the Battle” discussed the challenges inherent in starting your own business. We shined the light on our personal experiences in starting and running Focus Lab with topics such as: when to take the leap, pricing your work, creating and using contracts, how to say “no” and keeping your sanity. Check out our blog post detailing the full presentation.

Projects from 2011

As I talked about earlier in refining our skills, we have really started to put an emphasis on our branding services. We were always passionate about branding, but this year we were able to focus on this as one of our primary and more sought-after services. We were able to create some powerful brands for some great companies this year. Check out examples of work below.

To balance out the branding side, our larger and more recognized niche is creating beautifully designed and feature-rich ExpressionEngine websites. We value both the user experience on the front end and the ability for the client to manage their content on a dynamic CMS backend. We have had the pleasure of developing a wide variety of sites this year, check out some examples of work below.

Accolades

One of six selected to the ExpressionEngine Reactor Team: Erik Reagan was one of only six developers to join a community-based "Reactor Team" that was formed by EllisLab. This team is in the unique position to influence the core code of a commercial product. You can read more about what this means in EllisLab’s blog post, ExpressionEngine Reactor, For Developers by Developers.
Selected for LogoLounge 7: Bill Kenney’s branding work for client Fitzhugh was selected to be featured in the Rockport publication Logo Lounge 7 coming out in July 2012. It was one of only 2000 images selected from a field of 36,000 entries.
Mentioned in .Net Magazine: We are in the summer 2011 issue (218) of .Net magazine regarding our use of ExpressionEngine. Small, but fun.

Blogging & Community engagement

Although we knew we wanted to have a blog on our site we had no idea how important it would actually be. The reactions from our readers have been great, and have inspired us to make the blog a key focal point moving forward in 2012. We love sharing our work and experiences with our peers, as well as showcasing our services and our in-depth processes for prospective clients. By being completely transparent on how we work through projects and what we are learning as business owners, our blog has been a great resource for our readers and our team. There will be plenty of good reading to come in 2012.

Building our A-Team

One of the biggest changes for us this year was the growth of our team. We are proud to have grown to a team of six talented chaps that all bring their own skills to Focus Lab. The mix of personalities and skills is making us even more excited about kicking off the new year. The new members will be officially announced with the launch of the updated site in January.

All that to say...

We had an amazing year and look forward to building upon it in 2012. Thank you again to all our clients and peers who continue to inspire us and help us grow. We have some fun things planned from 2012 and look forward to sharing and experiencing it with all of you. Happy Holidays and...

Turkey Day Dribbble Giveaway

2011-11-23T19:06:52+00:00

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!

Knowing is Half the Battle

2011-11-10T14:00:43+00:00

We recently prepared a presentation for Geekend, a conference geared toward the young creative, technical and entrepreneurial demographics. The presentation entitled “Knowing is Half the Battle,” discussed what we feel are a few of the essential points to starting and maintaining a successful business. Over the past three years, we have learned countless lessons - both good and bad - and wanted to share part of our story and detail some of those lessons. Keep in mind this is told through the eyes of a designer and developer, neither of us considered ourselves “businessmen” when we started. Since we entered this venture with numerous blind spots, we now want to shine some light on what we have learned to help others who are going through the process.

Context & Perspective

I have had the good fortune of a strong business partner through all these trials and tribulations; it has been an amazing learning experience for us. We’ve watched ourselves grow from two passionate young chaps freelancing from home, to a team of six talented maestros. The basis of our success is a direct reflection of our work ethic, complementary skills and effective identification of market placement (niche). Natural born talent and competitive drive are not sufficient to keep you afloat, those are merely fuel for the engine. Running your own business will require you to wear a variety hats (especially in the beginning), and you will need a plethora of tools to make your business a well-oiled machine. Below, we touch on some of these elements and use our experiences as examples.

Lesson 1: Taking the leap

This is undoubtedly one of the hardest decisions to make. After all, there is no secret recipe for success, and there’s no safety net. The leap to start your business is you taking a gamble on yourself. It is you putting forth your passion and skills and telling the world you are ready to take it on. You should not and will not make this decision lightly, instead contemplating countless factors and outcomes and repeatedly weigh the pros and cons of all aspects of your decision. While we had no doubt that we wanted to start our own business, we still had countless questions, worries and doubts. Deciding when to pull the trigger and leap was not easy.

In the beginning, our main concern was strictly financial. Erik, an analytical thinker, focused on crunching numbers and determining if the math was right: what revenue we needed to collect monthly, what we needed to stay above water and even what we would need in order to grow.

I on the other hand, being the eternal optimist, had faith that we had the skills and drive to make it out of the gate, and could then tackle the unknowns as they presented themselves.

You will have your own factors to account for when making the decision but in the end you will likely be looking at the same two questions we faced:

Can I afford to make this transition while keeping the lights on and food on the table?
Do I have enough faith in myself/my product to take the leap?

In the end we presented the numbers to our accountant with the hopes of some guidance, and perhaps a head nod to endorse our decision. The answer we received was unexpected, and changed the course of our year drastically:

“You can and should be financially responsible. But in the end only you can decide if you are ready to make it happen. Just because the numbers add up doesn’t mean you will enjoy it and make it a successful venture.”

This statement could not have been more instrumental in our decision to take the leap. We never once questioned our personal drive to succeed, so at that moment our decision was clear as day. We moved into our new office a month later.

In short:

There is no secret recipe to the decision.
Trust your gut.

Lesson 2: Understanding your value

Great, so you finally jumped. Now what? Beyond all the boring, yet important talk about structuring your business - Do I file as an LLC, C Corp, S Corp etc.?, who will be my accountant? - you also need to define your market value. This is a business and you need to make money, but how much do you charge?

As if starting your business wasn’t a big enough hurdle, now you need to sell yourself, acquire work and get paid. Early on this will mean that you will routinely accept work at just about any price on the principle that “money is money” and the idea that you are building your company’s portfolio. You might even trade services. I would strongly discourage barter in most cases, because trades are rarely equitable. Often, they come down to a person offering you something you do not need for something they do need, which isn’t much of a trade of in my opinion. We all climb through the crazy ranks of pricing in our own way, but I can tell you from experience that you are likely worth more than you think, and you are probably working against yourself.

There are a variety of tools to help estimate what your hourly rate should be which use things such as business expenses, personal expenses and profit margin to generate those estimates. But those calculators miss some very important factors including:

Depth of knowledge
Years of training
Confidence and skill to deliver

A standard set hourly price does not capture your true value, and does not reward efficiency.

The story goes that Picasso was sitting in a Paris café when an admirer approached and asked if he would do a quick sketch on a paper napkin. Picasso politely agreed, swiftly executed the work, and handed back the napkin — but not before asking for a rather significant amount of money. The admirer was shocked: “How can you ask for so much? It took you a minute to draw this!” “No”, Picasso replied, “It took me 40 years”

Be wary of selling yourself short and devaluing yourself just to get work. If you work very quickly within your skill-set, you should be charging more per hour to account for this efficiency. Because of this risk, some people choose not to charge by the hour.

A battle you will face often is pricing work based on what you think the client will pay. When in fact you would need to assess the job and it’s value to you and the client. Then take that value and using your confidence to deliver a quote that is more appropriate to you and understood & respected by the client. When you begin to get comfortable in this mindset you will open up a whole new door. A note of warning though: not all clients will like this approach to pricing, so you may need to be flexible on this and accept you might miss out on some jobs because of it.

In short:

Don’t work against yourself
Remember, you are valuable
Have the confidence to capture your value

Lesson 3: Contracts

The importance of a solid contract cannot be overstated. This is the shield that defines and protects the expectations of both parties. Without it, both you and the client are treading on a slippery slope.

Creating your first contract can be daunting, and if you are anything like us then your first contract will be a terrible compilation of online templates mashed together in an attempt to create the appearance of business responsibility. But even that first shabby contract offers markedly more protection than handshake-style agreements. Those inevitably turn into overwhelming and troublesome transactions, leaving both parties frustrated and trying to figure out who is to blame. Without a document that states the roles of each party and clearly defines the scope of work, you are leaving the door open for a dangerous thing called scope creep.

Scope creep is a sneaky little monster that looks for profit margin and eats as much of it as possible. To avoid this beast you need a solid contract that includes the project’s scope, sometimes called a Statement of Work (or SOW).

A contract will also define the border between a friendship based project and a real business transaction. If you don’t already have a contract for use we recommend you find a local lawyer who can help you find and/or assemble one that is appropriate to your needs.

In short:

Contracts are a must
Contracts protect both parties
Contracts define the scope of work
Contracts define a payment schedule
Contracts cover your tail

Lesson 4: Managing expectations & communication

Under promise and over deliver.

It’s a common phrase that’s very simple in theory, but is not always easy to pull off in real life. Of all points in this article, this is one we are still learning in new ways as we grow. Managing expectations is all about discussing what should happen and what could happen with the client. The simplest example of this is saying something like “I’ll have that to you by Monday” to a client. That clearly states that you’ll be sending something to the client on a specific day.

This example illustrates one of the easiest pits to fall in. What if you get sick Sunday night and cannot work at all on Monday? You might just wait and send things over on Tuesday. But if you do that, you have officially started letting down your client. You said you would do one thing, but did another. A simple solution would be sending a quick note Sunday or Monday stating you are out sick and will need an additional business day. Simple and effective. An even better route is to over estimate when you can deliver something. Confidently tell your client you’ll have something to them Thursday and deliver it Wednesday. Under promise and over deliver.

On a grander scale you will want to set expectations about your long-term availability, work process and more. Never assume your client knows what’s on your mind or on your schedule. When in doubt, tell them what they might already know.

In short:

Clear communication is essential
Over communicate when in doubt
Learn from your communication mistakes

Lesson 5: Learning to say “No”

As a business owner it is your mission to make money, deliver great services or products and satisfy client needs while being profitable. In this process you can become programed to take every opportunity that comes your way, over promise on deliverables and slowly transform into a “YES-man,” saying “yes” to everything that comes your way. While I understand that it may go against everything in your soul to turn away paying work, you will find that not every job is a good fit for both you and or the client, and that those are the jobs to avoid.

You will find yourself saying yes to certain requests and then, in retrospect, asking “Why?” Likely it was because you did not want to offend a current client or friend. Or maybe you really needed a paying gig at the time. But you need to think about which is worse, telling them “No” or saying “Yes” and then dropping the ball. I can assure you that the client would rather you said “No” upfront.

When to say no:

The project doesn’t fit your business goals
It is not beneficial to the business revenue / image / portfolio
Clients that seem unorganized / unprofessional
Something goes against your business ethics

What is interesting is that you will find yourself landing new opportunities by choosing to forgo others. For example, earlier this year we decided to pass on what would have been our biggest single project to date due to the simple fact that we were just not ready as a company to handle all the moving parts. It was a gut-wrenching decision to make, and at the time we were hoping we would not come to regret it. Long story short, we were actually able to land multiple projects of the same value over the next couple months that were a better fit for our team. We would not have been able to take on these new projects had we been entrenched in the first project.

In short:

Do not feel obligated to say “Yes”
Stick to your guns / business goals
Wait for (or seek out) the right opportunities

Lesson 6: Slow and steady growth

So now you are protected by your detailed contracts and landing clients that understand and respect the value you bring to the table. You are getting used to the project management roles and power of good communication. You are also finally making money so you can begin to filter incoming projects and pass on work that doesn’t fit your goals. The next dilemma you will face is:

I have more work then I can handle. Should I hire someone?

Obviously growth is great, but be sure to understand the amount of growth you can truly handle. Taking on a new project that is going to make your pockets fat but drown your resources can be a very dangerous path. With growth comes added stress and the potential to compromise key areas such as:

Quality of work
Communication
Time management
Responsibilities
Peace of mind

When you get to the point where you are ready to hire someone the biggest thing to remember is to hire a person that is complementary to the team. You may be great at what you do and think, “I just need another me,” but that is incorrect. You can look for someone with some of the same skills but they should also carry a set of skills that adds something new and fills needs in the business. Before diving into the idea of hiring what would legally be considered staff, consider working with sub-contractors on a project basis. This will give you a solid idea of who is a good fit for the team.

This is even more true if you decide to create a partnership. The most valuable aspect of the business relationship between Erik and I is that our skill-sets and the work that we enjoy is completely different. This creates a nice harmony and balance within the services we offer and daily business tasks that need to be handled.

In short:

Slow and steady wins the race
Don’t compromise your core values
Build a complementary team

Lesson 7: Self preservation

Let’s face it, you cannot work every waking hour of every day, whether you love your job or not. It is not healthy for you, your family or the overall quality of your work. You need to set limitations for yourself and define availability for your clients as well.

In the beginning you will gladly answer emails, phone calls and work requests on and off business hours. You will actually forgo the idea of there even being such things as business hours because, after all, you run the business and you are always on the clock. This may be a commendable example of your work ethic in the beginning, but you will actually be doing is creating expectations for your clients that you will not be able to meet forever.

Do yourself a favor early on and set some clear working terms and general guides for what working with you will entail. Setting these expectations and framework will again separate you from the loose nature of a friendship style transaction, and remove a potential roadblock to growth for the future.

It is important to step away and enjoy time outside your business. Whether it’s spending quality time with your spouse and family, a day basking in the sun or devoting time to a personal hobby, this free time will allow you to enjoy other aspects of your life. It will also recharge your brain so that upon return, you are eager to work and hitting on all cylinders.

A great example is those days where you seem to be hitting a wall trying to find a solution or idea. You could spend the entire day spinning wheels making no progress. As your own boss you have the freedom, and perhaps the responsibility to walk away from such situations. I cannot tell you how many times I have solved such a block by walking away and returning a day later with a fresh mind. Often, the answer just jumps out at you.

In short:

Don’t kill yourself
Set personal limitations
Set client and business based limitations
Create a balance of work and life

Conclusion

It was hard to limit our Geekend presentation, and by result this article, to only seven lessons. We felt these were the ones that helped us most in getting to where we are right now. They aren’t unique to our company, or even the creative services industry.

There will be lessons to learn the hard way and the easy way. We’ve by no means conquered them all, but hope that the ones we’ve shared will be helpful to those of you getting started. One of the best ways to learn these lessons is from the experiences of others. Dive into your community and learn from your peers. Share your work and experiences with others as well. Make a strong effort to continue learning.

At the end of the day it’s your passion and love of life that should be driving you to do what you do. Find something you enjoy that can fund your enjoyment of life and own it.

Go forth and conquer.

References

Knowing is Half the Battle Slides, our slides from the presentation at Geekend
Letters to J, a series from Mitchell Kimbrough, Owner of Solspace, Inc.
Don’t Call Me A Freelancer, a presentation from Paul Burton, Owner of 16Toads Design
F*uck You. Pay Me, a video presentation on the importance of contracts by Mike Monteiro
The Dark art of Pricing, a detailed article by letterer and designer Jessica Hische
Design Professionalism, by Andy Rutledge, Co-Owner of Unit Interactive

Win 1 of 3 tickets to Geekend

2011-10-31T18:01:08+00:00

We are happy to announce that we have 3 badges to this year's Geekend conference in Savannah and we are giving them away for FREE! We love to give back to our peeps while creating a fun “geeky” contest. In the end there will be 3 happy geeks going to a great event.

What’s up for Grabs?

Each winner will receive a single badge to this year's Geekend in Savannah. ( Value $165.00 ) To learn more about the event check out the official Geekend Website. This contest is for the event badge only and does not account for housing, food and any other costs you may incur to attend this conference.

The Challenge!

The challenge is quite easy. We got the idea from the clever folks at .net Magazine. All you need to do is come up with your geekiest movie title. In our geeky branding and development world, some examples might be “Monty Python and the Holy Gradient”, “The MacBook” or “Back to the Futura.” Show your geek skills and post your awesomeness to the comments below. Best 3 titles win!

How to Enter

Entering is simple. Just comment below with your clever title(s) and your name is officially in the hat. You can post as many titles as you would like. Follow us on twitter for potential shout outs on some of the awesome creativity and also announcing the 3 winners.

The Details

Each winner will receive a single badge for the event
The deadline to enter is 5 p.m. EST on ~~November 7th, 2011~~ November 6th, 2011
Winners will be selected and notified on ~~November 8th, 2011~~ November 7th, 2011
We will notify you via the email address you use in our comment form below
You must respond to us with 24 hours to claim your prize

The ABC’s of EE Add-on Development: Part 2

2011-10-27T13:00:02+00:00

Today we continue our ABC’s of Add-on Development series. If you recall from the first post, this will be a 6-part series covering various aspects of ExpressionEngine add-on development in which we will cover one topic for each letter of the alphabet. My friend and fellow developer Tom Jaeger is assisting along the way. He and I will cover the next set of letters today, B-F.

B: Bug Tracker

By: Erik Reagan

I know what you’re thinking. “Bug tracker? Seriously?” Well, yes. Seriously.

One of the least glorious parts of using any software is searching and contributing to the official bug tracker. In the case of ExpressionEngine, there are actually two bug trackers you may end up using. There is an ExpressionEngine bug tracker and a separate one for CodeIgniter on GitHub (recently moved from BitBucket).

Should you encounter an issue during add-on development, immediately assume that the issue is yours. Do everything you can to eliminate your own code as the source of the error. Then, if you’ve found an issue with ExpressionEngine’s (or CI’s) core code, first search the Bug Tracker(s) to see if someone else has reported it. If no one has, take some time to poke around in the code to see if you can fix it in a small amount of time. Ultimately it’s your responsibility to report a bug that you find. This is a simple way to have a positive impact on the software you use and love.

Before moving on, a quick warning. Not every bug you file will be officially recognized as a “bug”. Sometimes what you call a “bug,” is simply a feature that doesn’t exist (which would lead to a Feature Request, hopefully). Other times, the EllisLab staff may not internally acknowledge what you have identified as a bug. Either way, don’t expect a 100% success rate at filing bug reports.

C: CodeIgniter

By: Erik Reagan

No add-on lesson is complete without a reference to CodeIgniter (CI). The thing that drew me to ExpressionEngine for the first time was knowing that the 2.0 release would be built on CI. We were already using CI and favored it among other PHP frameworks. I had even considered rolling out my own CMS with CI prior to trying EE. I’m glad I didn’t go down that road.

CodeIgniter is packed with numerous, handy tools ready to be used in your EE add-ons. Before diving into add-on development consider spending time reading the CI docs and other CI tutorials. In the past couple of years a number of great CI resources have cropped up. Here are a few:

Official User Guide
CodeIgniter From Scratch - series on NetTuts
CodeIgniter Articles on gotphp.com
learn-codeigniter.com - Only 2 videos so far, but they're quite good
A Gentle Introduction to CodeIgniter
CodeIgniter Directory

I say this often, so I can’t leave it out here. Your EE add-on development will only be as strong as your CodeIgniter, PHP and MySQL knowledge will allow.

D: Database

By: Erik Reagan

Similar to the “C” in our series (CodeIgniter), your EE add-on abilities will depend on your understanding of EE’s database schema and data placement. You won’t need to know anything about the database if you’re simply writing a Plugin to process input and return simple output. However, if you want to work with Extensions, Modules, etc., you’ll need to understand how data is stored in EE.

Using the common Channel Entry as an example, did you know that a given entry could involve the following tables:

exp_category_posts
exp_channel_data
exp_channel_entries_autosave
exp_channel_titles
exp_comment_subscriptions
exp_comments
exp_entry_ping_status
exp_entry_versioning
exp_relationships
exp_sites

Not every entry will involve each of these tables, but if you use any 3rd party add-ons such as Structure, Playa or Matrix, your Channel Entries may be referenced in a 3rd party database table. For this reason it’s very important to understand how the data is stored when using EE. It can take some time to truly understand it since there are so many tables at play. Ultimately, it’s worth the time it takes though.

Database Prefix

If you've ever installed ExpressionEngine you may be familiar with the database prefix setting. Out of the box ExpressionEngine uses "exp_" as a prefix to all database tables. You can, however, change that during the installation process. This is important to add-on developers because sometimes a user may change that prefix. If you're writing queries manually you need to be aware of this setting and pull in the prefix from the config object. (If you stick to using CodeIgniter's Active Record methods you don't need to worry about the prefix. Active Record will detect that automatically for you.) If you need to use the prefix in your code you can access it like this:

$dbprefix = $this->EE->db->dbprefix;

GUIs

Something else worth considering is the use of a desktop database application. We use a combination of Sequel Pro (seen below) and Navicat for MySQL in our development. Using such an application makes working with and exploring a database much simpler.

Screenshot of Sequel Pro in use on an EE project

E: Extension

By: Tom Jaeger

In ExpressionEngine, there are a few fundamental ways to expand native functionality. One of which is Extensions, the “E” entry on our list. Extensions utilize little snippets of code within ExpressionEngine known as hooks. There are currently over 100 hooks in ExpressionEngine, strategically placed to allow third party developers to “hook” into the applications’ flow and insert code to be executed. The code that is executed is known as an Extension, because it “extends” the default behavior of the application.

Within ExpressionEngine I generally like to think of hooks as being in one of two flavors (or variations there of).

Hooks that allow you to modify or extend the application flow of ExpressionEngine
Example of this type of hook in the core:
$this->EE->extensions->call('entry_submission_absolute_end', $this->entry_id, $this->meta, $this->data, $orig_var);
Hooks, that in addition to above, allow a third party developer to modify existing data within the ExpressionEngine flow - They do so by passing variables from the EE core into an Extension, allowing a third party developer to modify the data and return it back to the EE core for continued execution with the modified variable.
Example of this type of hook in the core. Please note that the output from an extension that is called by this hook will be assigned to the $str variable for continued execution, with a possibly changed $str variable
$str = $this->extensions->call('typography_parse_type_start', $str, $this, $prefs);

Extensions have a few required variables and methods which need to be taken into account when developing to ensure they are usable within ExpressionEngine. For more on these requirements take a peak at the official extensions documentation and the hooks library.

F: Fieldtype

By: Tom Jaeger

Another fundamental way to expand native functionality in ExpressionEngine is through the use of Fieldtypes. Fieldtypes allow a developer to create new content via form input fields, or “field types”, to be used within channels for the publishing of data in ExpressionEngine. Fieldtypes can handle all kinds of content in a variety of ways and forms, including video content, user polls, WYSIWYG’s and data matrixes.

In addition to creating new channel fields within ExpressionEngine, Fieldtypes also allow you to create template tags through the use of the replace_tag method and support the use of both a single template tag and a tag pair for the rendering of content.

All field types inherit the EE_Fieldtype class which provides you with a base on which to start development.

For more information on Fieldtypes and Fieldtype development please take a look at the official fieldtype documentation.

EECI2011: Environments and Version Control in ExpressionEngine

2011-10-25T20:05:18+00:00

Marcus Neto" class="border" />

Photo courtesy of Marcus Neto

Last week I had the honor of presenting at EECI 2011 in Brooklyn, NY. In the time that I've been using ExpressionEngine I had only met (in person) about ten people from the community. Attending such an event was long overdue and I was thrilled to be there. The content and speaker lineup was fantastic and it only solidified the fact that we use awesome software. My presentation was a lot to soak in, so I'm following up with some additional resources, my slides and most importantly - our EE config setup (as promised).

Version Control / Git Resources

In my presentation I discussed a lot of why you should be using a VCS in your workflow, but I didn't touch on how due to time restraints. Here is a list of resources you may find helpful:

Pragmatic Version Control using Git - Great book on learning Git
Git for Designers
Beanstalk Guides - "Articles, tips and best practices to help you make the most of your design and development workflow." - by the Beanstalk / Wildbit team
16Toads Git resources - Resources collected by Paul Burton while diving into Git
Developing ExpressionEngine sites with MAMP, Git (Tower) and Beanstalk Part 1 & Part 2 - by John Faulds
PeepCode Git learning - Excellent resources for learning Git from PeepCode
A web-focused Git workflow
A successful Git branching model - The "git flow" model I mentioned being good for software / add-ons
Version Control for ExpressionEngine Using Git - by Ryan Masuga (of Masuga Design & Devot:ee)
Using Git to Manage an ExpressionEngine website - Part 1, Part 2, Part 3, - by Stephen Lewis (of Experience Internet)

Environment Config Setup

Another part of my presentation showed some code samples from our EE config setup. We've extracted the core of this setup into a GitHub repository for all to check out. I'll spare the technical details and just say you should check out Focus Lab's Master EE Config repository. If you would like to contribute to the code, there are notes in the repo regarding how.

Take a look and let me know if you have questions (below in the comments).

Slides!

Lastly, you can view the slides below or download them here.

Thanks again for the great feedback after the presentation. Feel free to drop me a line in the comments below or on our contact form if you would like to discuss my topic any further.

Branding an Attorney

2011-10-12T18:00:28+00:00

Editor's note: Matt Yow is the newest member of the Focus Lab team. He lives for design and is constantly expanding on his knowledge and design skills. He loves his morning Coffee, tweeting what's on his mind, and sharing his work on dribbble. Stay tuned for more interesting articles by Mr. Yow and the Focus Lab team.

Since I am the newest member of the Focus Lab team, let me introduce myself by saying I love branding. I love the process and the possibility of extensions of the final product. So, I was pretty excited when my first assignment with Focus Lab was a branding project for an attorney. While I try not to be awed or intimidated by the work, I would be lying if I said that a project of this stature wasn’t a little daunting. I knew it would be a departure from projects like a friend's coffee shop logo or branding a hipster clothing line, but I was ready for the challenge. Thankfully the Focus Lab atmosphere set the tone nicely.

Concept & Direction

Since I am the new guy, I embraced the typical Focus Lab process for a branding project, and had the client fill out a simple questionnaire. The questionnaire contains 15 questions that enables us to get a clear understanding of the client, their company, target market and other matters that can affect the brand. As designers, it helps us drill down to the overall aesthetic and direction the client may have in mind.

Questions include: “What is the desired persona of your company?” and “What three words do you want people to associate with your business when seeing the new identity?” This quick form is essential to us starting out on the right path toward creating a successful final product.

The initial concept was simple: create a mark that represented a young, unconventional lawyer suitable for use in an industry know for its dry and corporate aesthetic. Strangely, many of the early obstacles didn’t come from expected places, and instead I found myself deciding whether or not to use all three of the client’s initials in the mark, and how her title would be represented. I didn't plan on using the the middle initial "G" at all, but it wound up fitting nicely in the arrow lockups. Results like this demonstrate the benefit of the Focus Lab process. By not dismissing an idea that we weren’t sure about immediately, we discovered an element that ultimately became a significant part of the design.

With a plethora of visual opportunities and rabbit trails to follow, I chose to focus on crests or some form of heraldic display to provide a traditional, professional base for the design. Early explorations ranged from clean monograms and nameplates, to banners and other animal forms. While we were happy with many of the directions, we had to make sure the direction we headed in was the best fit for the client. We narrowed the choices down to three main concepts and the rest were left in the sketchbook.

The Mark

After exploring any number of elemental permutations, the final mark chosen was a crest form that utilizes the dove, olive branch and client name/initials. Ultimately, we felt the images represented our client’s personality perfectly, while still providing the professional look that the industry demands. The fact that the final mark allows for a great deal of flexibility in creating extensions of the brand played a big role in its selection as well. Since most extensions will be print, the flexibility to transform this mark into patterns and iconic peripheral layouts will serve the client well in the future.

Typography

The typography chosen sets the mood for neutrality and trustworthiness. Laura's name is set in Brandon Grotesque (Black). The low x-height and mean line create a sensible typeface for her name without losing a sense of authority and assurance.

The title, Attorney At Law, is set in Feijoa (Medium). The warm, curvaceous nature of the individual letter-forms adds a touch of femininity and individualism, while maintaining necessary professionalism. Feijoa is also a great workhorse font for the future applications that will come in print and on the web.

Color

Based on our initial questionnaire and in speaking further to the client, it was clear the color purple was a client favorite. We didn't want to limit our design by heading straight to purples though, so we explored all the archetypal palettes relating to trust and sincerity. Blues were a comforting go-to with a few oranges to highlight. Greens were explored for their naturalist qualities and growth. One of my favorite palettes was a subtly patriotic collection of colors: light peaches, maroons & deep blues.

In the end, the client’s wish synced nicely with our design. A healthy spectrum of purples, blues and a complimentary peach was chosen. This helped reinforce the formidable and sincere visual aesthetic.

Final Product

The final solution successfully captured the client’s needs for a new professional identity delivered with a personal touch. Working with Laura was a pleasure and I am very excited to continue to produce great work with my new team at Focus Lab.

“By not dismissing an idea that we weren’t sure about immediately, we discovered an element that ultimately became a significant part of the design.”

Client Testimonial

“Working with Focus Lab is a breath of fresh air. All of the team members are smart, creative and fun to work with, as well as dedicated, hard-working and passionate. The guys' great qualities really come through during the collaborative process: Focus Lab strikes the perfect balance of seeking client input and knowing how to run with it. I am truly as excited about my logo as the potential for working together again in the future. After the positive experience I had working with Focus Lab on my logo, I wouldn't dream of using anyone else for the future projects. I'll pursue in both digital and print formats as my business grows and evolves.”