A few months ago, the NBC Industry Group contacted us inquiring about a redesign of their existing website.  While functional and informative, it needed a redesign to catch-up with contemporary design trends and best practices.  The navigation needed to be streamlined, the scrolling flash marquis needed to be removed, the design needed to be widened to utilize more of the page and the design needed to be updated to allow the NBC Industry Group to maximize their potential to recruit new members and better disseminate information to its existing members.

Our solution for the redesign:

• Improved the website navigation categories to be more intuitive and user-friendly. In the previous version of the website, there were several navigation category that needed to be improved; for example, “NBC Industry Group” and “Group Members”.  In each case, we renamed them using a more effective and intuitive title.
• Removed distracting animation from the homepage. Previously, there was a flash header that had animated slogans flying in from the left side of the screen, an animated logo containing an electron in orbit, and a vertically scrolling marquis promoting upcoming meetings.  Needless to say, it caused distraction and confusion among users.  We removed the animation from each of the three elements.  To address the flash header, we added a scrolling homepage frame consisting of five slides with background images and text overlaid on top to speak to the various groups NBC Industry Group serves.  We removed the animation from the logo and added an upcoming meetings callout dynamically pulling from the content management system (CMS) to replace the scrolling marquis.
• Promoted membership for prospective members. One of the major goals of the redesign was to attract new members.  To address, we renamed the former “Group Members” in the global navigation to “Membership” to be clearer.  Additionally, we added a “Join Us” callout on the homepage and every subpage for those that come to the website and those that look browse the site.  Lastly, we added pages to speak to the benefits of membership.
• Enlarged the amount of space being used for body content on each page.
• Improved the user interface of each form and implemented form validations. The website consists of three primary forms: membership application, membership renewal, and contact.  We improved the interface of each form and set-up form validations to prevent users from becoming members without providing accurate information and payment.  (In the previous version, a user was able to pass through each form by leaving all of the fields blank).
• Implemented a scalable CMS to manage all of the content. By working with our great friends at Vim Interactive, a team of skilled Baltimore ExpressionEngine Developers, the ExpressionEngine CMS was implemented to allow NBC Industry Group administrators to edit content, add new meetings — all very quickly and easily without any programming knowledge.

Overall, it was an incredible honor working with the NBC Industry Group.  They are committed to such an extraordinary mission and possess the most brilliant minds from all of the most respected companies and organizations in their industry.  Being Reef Light’s first non-profit web design project made it extra special.

Enjoy this before vs. after view of the homepage. 

View the redesigned website at www.nbcindustrygroup.com

About the NBC Industry Group:

The Nuclear, Biological, and Chemical (NBC) Industry Group is a non-profit association composed of 150+ companies, not-for-profit organizations, and consultants who support national and international chemical, biological, radiological, nuclear, and explosive (CBRNe) defense activities.  In addition to military defense against CBRNe weapons of mass destruction (WMD), the NBC Industry Group interests encompass domestic preparedness against WMDs, the Chemical Weapons Convention and other treaties. Member organizations also are actively involved in CBRNe programs that include destruction of WMDs around the world.

The server requirements for ExpressionEngine are fairly standard and revolve around Linux, Apache, MySQL and PHP.   Most companies will run Linux based servers which are capable of ExpressionEngine hosting, but you should consider the following tips before choosing a hosting company for your ExpressionEngine website:

• Don’t run ExpressionEngine on Windows.  Although possible, you can run into numerous issues and problems.  Running on Windows may save you money but you will most likely spend more money troubleshooting the configuration.
• Cheap hosting, although very attractive should also be avoided.  Hosts such as GoDaddy and 1&1 offer very cheap ExpressionEngine hosting, but their packages tend to lack key tools and the support needed to manage your EE installation.
• Ask any potential host to run the ExpressionEngine server wizard to establish if their product meets ExpressionEngine’s requirements.
• If you want to manage multiple sites for clients consider how you will do this.  Some ExpressionEngine hosting packages offer up a master admin panel like cPanel where you can manage multiple sites and domains from one account.  Other companies prefer you to set up separate accounts.

To help you find the right ExpressionEngine hosting package for you here are a few choices to consider:

• EngineHosting.com is our recommendation.  They are affiliated with Ellis Lab who created ExpressionEngine and offer hosting packages starting at just $10 per month for shared hosting.  They offer excellent support and will even install EE for you.  If you purchase ExpressionEngine at the same time as the hosting package you will receive a 20% discount.
• MediaTemple.com has hosting packages from $20 per month and offers a user control panel which will allow you to configure sites on your account yourself.  Their support is good, although there is one disadvantage for those who wish to replace index.php in their URLs as this can be tricky with Media Temple servers.

Other ExpressionEngine hosting companies exist but be sure to do your research before embarking on a twelve month (or longer) hosting commitment.

What sets Drupal apart is its ability to provide powerful frameworks for sites, from a basic level static site to a community based site and beyond.  Consider it as a constructor, providing you with only the essential elements needed to create a basic website from which you can enhance and develop to create a site which meets your needs.  Some may be put off by this, particularly beginners who may choose to abandon Drupal in favor of another CMS, simply because of the time it can take to build a site which meets their requirements. However, it is worth nothing that the core code is simple but powerful, modification of the core functions is relatively easy and it is very easy to write your own modules.

While other CMS platforms may be more specific in their attributes, Wordpress for instance is great for blogging, Drupal has been heralded as akin to the holy grail in developers eyes simply because of its flexibility and ease in which powerful websites can be built and configured.  Drupal also offers very robust eCommerce modules to create powerful shopping portals.

Check out just a few of the names who have built websites with Drupal:

• The White House
• FedEx
• Fast Company
• Forbes
• The Onion
• Grammy

Over the past ten years Drupal has evolved to become a leader in CMS programs and a favorite not just with us but many others as well!  There is a great API and a large resource of tutorials available to users on just about everything you could ever want to know. Added to this is the fact that since its inception Drupal has always had a focus on security and is regarded as one of the most secure CMS programs available. This powerful software is definitely our first choice for building websites large or small.

The last few days, we took a look at over 30 404 pages hosted by local DC website firms.  The research was quite startling:

• Nearly 1/3 of the DC website firms didn’t have their own 404 page;
• Roughly 1/2 of the firms had very dull and plain pages; and,
• Only a very small handful had ones that reeled back in their users and added a creative twist at the same time.  (Another reason, I’m a big fan of creative 404 pages is because they are rarely seen and thus design agencies, or any company for that matter, can be more creative with this page.)

Here are a few great examples:

Cohenspire, http://www.cohenspire.com/404/
Text: Oh no you broke something! Ok well…let’s be honest I probably messed something up. Find your way home or let me know what broke.

nclud, http://www.nclud.com/404
Text: Whoops! We’ve slipped! If you think a page should be here, then there probably should be one. We’ve slipped-up and apologize; but rest assured that someone somewhere just got an email about this, we’re sort of fanatics about that whole user-experience thing.  Don’t let one bad banana hold you back. Learn more about us, our work and our process, read a bit from our sketchbook or contact us. If you’re one of our many awesome clients looking for our client login, you can always login at http://clients.nclud.com

TK Designs, http://www.tkdesigns.tv/404
Text: OMG! I think I’m lost. ?#$! Looks like the file you are looking for is not available. This may be because we just added our new page and it is still missing a few files.  You may contact us or go back home.

And of course, our very own 404 page…
Text: 404 Oops, the bulb burned out.  You must have entered in a wrong URL, or the page is down… or maybe we should build a new page because you thought there would be one here. We’re not blaming anyone… let’s get through this together.  Here’s the way back, browse through our work, learn about our expertise, read our story, view our awards, or get in touch with us.

PSN wanted to make their website more user-friendly showcasing each of their three unique services: jobs for nurses, staffing solutions, and healthcare consulting. In addition to the top level navigation, links were added on the left and in the body. To maximize the staffing company angle, we suggested that three featured positions be displayed on the homepage for easy access.  Below is a before and after snapshot…

PSN is ecstatic about the new website and is looking towards the future. Feel free to browse around and tell us what you think!

–

Reef Light Interactive, a Washington DC web design company, makes brands shine! We had a pleasure working with PSN; feel free to contact us to learn more about our web design and/or SEO services.

A couple days ago, Reef Light was featured in [Re]Encoded’s “40 Beautiful Uses of Typogragphy in Web Design” article. Please feel free to check it out here. (For those that aren’t familiar with [Re]Encoded, they are a very popular (150,000 page views/month) resource for web designers and developers, alike. )

We all (designers) are aware of the changing trends in web design industry and have something new and creative to see every day. I think we discussed enough regarding Typography in web and print design industry in our earlier articles and very well know the importance of Typography in web and print designs, so today we are here with  a round-up of beautiful web designs showing creative use of typography. (From Reencoded.com article)

Overall, it’s a great collection of beautiful websites. It’s an honor to be among them.

–

Reef Light Interactive is an award-winning agency specializing in web design, search engine optimization and more! Like anyone else, Reef Light enjoys being featured, given a “high 5″, or receiving compliments.  Feel free to browse through some of our work and/or contact us to learn more about our services.

The Re-Branding

There comes a time in every small business where they reach a cross-road.  What began as a hobby or passion has really started to take off, and your business vision is starting to materialize.  New customers/clients are contacting you every day, and it’s at that point that you need to decide how to take your business to that next level.

It’s with that in my mind that we approached our re-branding.  We’ve kept the same name – Reef Light Interactive – but that’s about it.  Our color scheme, logo, business cards, letterhead, and most importantly, our website, have all undergone a dramatic change.  These elements are all representative of what we now value:

• Exceptionally unique, quality, work
• Complex messages delivered simply

Keep these values in mind as you peruse the new site, or any of our client work.  As you’ll see, we took them seriously as we overhauled the site.

The Website Redesign

Imagery — The first thing you probably noticed was the 3D lighthouse.  We take pride in our 3D talent – rendering objects as realistically as possible, with articulate detail, and accurate lighting effects, so we wanted this to be front and center.  It not only captures a visitor’s attention, but gives a clear indication of what our specialty is.

What’s with the cubes?  Well, that’s for you to figure out.  In our first draft of the redesign, we included the red and white cubes at the base of the lighthouse, to add a twist to the image.  We showed family and friends, and without question the cube designs were polarizing.  People thought they were visually interesting, if confusing, vs. outright disliking them.  We could have easily removed them from our next iterations, but instead we’ve decided that this is a perfect representation of what we value – something exceptionally unique while visually arresting.  They were perfect.  Go ahead and explore them a bit more – - you may learn something about “the cubes”.

While we’re on lighthouses, the 2 other images that have been redesigned are our logo, and our watermark.  With these images, we wanted to carry through the look and feel of our main lighthouse, but more simply.  Be on the lookout for our watermark, which lives in the bottom right hand corner of any website we design!

Color Scheme

It’s been described as Where’s Waldo meets plastic pills…either way you look at it, the red and white jump out! With our new color scheme, we wanted to help our site really jump off the page, while still maintaining a professional look and feel.  The combination of the red and white is a perfect metaphor for our values; the red being unique and eye-catching, with the white symbolizing clarity and simplicity of our designs.

Layout

With the imagery and the colors selected for the site, we got down to the business of site architecture.  Although we had several pieces of content we wanted to communicate via our site, including our portfolio, about our company, our credentials, etc., we didn’t want to over complicate things.

With that in mind we decided on a simple top level navigation, with clear titles beginning with “Our..”, making it simple to read and understand what each site section contains.

Our sub-pages follow simple, self explanatory layouts.  Our Expertise, Story, and Awards page layout relevant information with large visuals and easy to read fonts, and Get in Touch provides an easy to use contact form.

We reserved the footer for information outside the scope of our main site navigation; including business contact information, our newsroom, recent Lightbox blog posts, and our corporate partners.

Finally, the “Our Work” page stands apart from the rest.  We encountered a challenge when designing our portfolio, as we wanted to display examples of multiple services without creating a messy user experience.  How would we display web design, flash, SEO, 3d, online strategy, print, and logo services on our site – with some clients falling into 2 if not several categories?  The solution soon appeared to us – AJAX!  Using this technology, we were able to shuffle around thumbnails all on one page, with users able to filter by service to see what we did for which clients.  A simple, yet effective technique!  Beyond that, we enabled each thumbnail to provide more information upon roll over and click, so we’ve been able to build a robust gallery in a simple to use format.

That’s all folks…

As you can see, we put a lot of thought into this redesign, as we do with all of our work.  I’ve always thought that a web design agency’s website is all you need to see to make a judgment of their quality of work.  If they don’t take their own work seriously, how can they take a clients work? In this case, it’s okay to judge a book by its cover.  We feel confident that our cover in this sense is an accurate representation of what’s inside; an agency dedicated to helping you stand apart online.