Perspective, tips, and insight

Articles to help you improve your digital marketing

Web Design Case Study: Resista-Temps, Inc.

We launched a new website for Resista-Temps, Inc. today, and it can be viewed at http://www.resista-temps.com/.

Resista-Temps came to TBH Creative with the need to add a new product line with equal emphasis to their existing temps products.

Our first step was to revisit the site organization and assist with the wording for the new pages while enhancing a few of the older pages. Once that was established, we redesigned the homepage and template elements including the banner and footer. We recoded all page elements for the newest and cleanest coding and also removed the Flash elements with JQuery code for a better mobile experience and easier future updates. The site architecture and new wording increased the site usability and was created to help the user find the information they need faster. The finished product was a cleaner, easier to navigate website that looked fresh, up-to-date and professional.

Resista-Temps' new homepage. Check out the new design!

An interior page from the Resista-Temps redesign.

Homepage Before Redesign:
The Resista-Temps homepage prior to the redesign. We kept the same brand with subtle enhancements and removed the outdated Flash technology with JQuery. The new focus was both Temps and Prothetics

About Resista-Temps

Resista-Temps provides a complete line of dental replacement products for every stage of the process. They are a custom dental laboratory that specializes in the diagnostics, design and fabrication of provisionals, implants, prosthetic restorations and crown and bridgework for dental professionals. Established in 1977, Resista-Temps, Inc. was the first – and still only – lab in the country to specialize in the fabrication of acrylic provisional crown and bridgework. They help dental professionals start with a solid diagnosis and high quality provisional providing long-term case management flexibility.

Five ways to take better website photos

No photo budget? No problem. We have five easy-to-learn tricks to help make your pictures better.

Yesterday, in an attempt to start a conversation about their lenses, Nikon's social media team posted a status message to its Facebook page and created a controversy among its amateur and professional photographers followers. The post read:

"A photographer is only as good as the equipment he uses, and a good lens is essential to taking good pictures!"

I've been following the fallout with great interest. Good equipment in the hands of someone who knows what they're doing is definitely a plus. Not everyone has the luxury to spend money on an expensive camera and other equipment, but that doesn't mean they're not going to be able to take a good picture with the tools they do have.

One response to the controversy stood out as a key takeaway for anyone looking to improve their photos: "eye > lens."

If your web development project's art budget is limited, you can still snap good photography for use on your website, with the camera you already have, if you adhere to these guidelines when taking photos.

Trick #1: Composition, composition, composition.

Follow the rule of thirds. Picture a tic-tac-toe grid over your photo. The areas where the lines intersect are your key points. Try to align your image's most important details along the lines or at the intersections.

Trick #2: Simplify the scene.

If possible, try to make sure your background is not distracting. If your taking a photo at any event, ask guests to tuck their name tags into their pockets for the photo and put their glasses down on a table. Taking photos at a conference event? Remove the water bottles littering the tables and pile up shuffled papers neatly. The more steps that you can take to add less visual noise to the scene the better.

Trick #3: Take horizontal and vertical pictures. Take different angles.

One of the great things about shooting digital is that you can take a bunch of different angles and poses of each picture. Remember to do your photo editing on the computer. You can't tell exactly how good a photo is until you have it actually downloaded to your computer.

Having a landscape and portrait version of your photo gives your web design team more options for your website.

Trick #4: Cloudy days are your friend.

Forget the flash and shoot outside. A bright afternoon that's hidden by clouds is perfect for taking portraits. Avoid extra sunny days. Grey days will soften hard shadows.

Trick #5: Get ready for your close-up.

Photographing is no time to get shy. Come in close to your subject. By doing so, most times you'll end up with a more interesting result.
"The best photographer will take better photos from the worst camera than the worst amateur can take with the best camera."—Karen Nakamura, photo-ethnographer

Android’s Ice Cream Sandwich Update

What does this mean for developers? More headaches now, less later? Maybe.

Google is set to release the latest Android update in October or November. This update has been named Ice Cream Sandwich. Wait. Hold on. Didn’t Android mobile devices just get the Gingerbread update this summer? Technology never slows down.
There are so many different Android devices out there. The Honeycomb update was tablet-only and the Gingerbread update was mobile-only. Ice Cream Sandwich will support both big and small screens. The same version will finally be able to run on different sizes. This means no more developing for two different Android devices! The Ice Cream Sandwich update will cause some headaches in the next few months as developers will have to switch their applications over to the new software development kit (or prevent people from buying them).

The SDK is not available yet, but Google has posted some articles on their blog to try to prevent future headaches for developers. This will help developers get a jump start on the Ice Cream Sandwich update. Here is one of the helpful sketches from Google regarding the newest update:


Even though the Ice Cream Sandwich update may be causing some headaches in the next few months, it is preventing future headaches. Technology will continue to grow. Android devices will continue to multiply. It is better to create a uniform SDK now than later on. Do you think this is a wise move for Google?


Web Design Case Study: Franciscan Alliance Community Benefits Report 2010

Services Provided Include:
We launched a Community Benefits website for Franciscan Alliance today, and it can be viewed at http://www.franciscanalliance.org/CommunityBenefit/2010/
 
In 2008, the Franciscan Alliance came to TBH Creative with the need to display their community giving total through a website. The website serves as a report of annual community giving. We prepared the website in  and 2009. For 2010, we wanted to add some new elements and stronger impact. Part of the enhancements were JQuery pie charts to add a little interactivity. We also redesigned the home page to emphasize and show off the amount they give to the community over years.
In 2010 they gave a total of $444,756,036. 

Last Year's Website (2009):
CBISA's 2009 website homepage.

2010 Website:
CBISA's 2010 website homepage.


CBISA's 2010 website.


About Franciscan Alliance Community Benefit 2010

Franciscan Alliance has endeavored to stay true to its founding mission of caring for everyone who comes through our doors.  As they have for over 130 years, Franciscan Alliance continues to look for opportunities to serve communities through the very best in medical care and service to the less fortunate among us.

The following report reflects their mission of, “Continuing Christ’s Ministry in our Franciscan Tradition.”  Although it is not all inclusive of the many benefits provided, it does portray the significant benefits that reflect the organization’s commitment to healthcare and the communities they serve.


Why wireframing matters

Proper planning in web development includes wireframing

Architects wouldn't build a new house without a blueprint, and likewise web designers rely on wireframes to create websites. An essential, time-saving part of the web development process, detailed wireframes communicate the bigger goals of the website project, focusing specifically on information, interface, navigation, prioritization, and functionality. Through the wireframing process, web developers work with clients to plan and document the website project's objectives and requirements.

It requires knowledge of information architecture, user experience design, and user interface design to develop relevant and useful wireframes. During the planning process, web developers use wireframes to present clear mockups, removing the need for costly back-and-forth and making it possible to deliver precisely what clients want.

Thoughtful, rich wireframes reduce interactive project rework while increasing profits because they lead to greater understanding and allow for better feedback during brainstorming and planning. Wireframes, unlike fully flushed out designs, are easy to update because of their simple, straight-forward nature. Wireframes make it easier to iterate changes quickly, saving both time and money and they give web developers an opportunity to figure out which details might have been overlooked and what features had not been considered.

Adobe Edge: Is it the end of Flash?

Animation on the web is easier than ever!


Adobe has always been on top of new emerging technology. HTML5 and CSS3 are still new programming languages. They are both currently under development. Not all browsers support every aspect of HTML5 and CSS3 yet.

Adobe Edge makes it easier for designers (and even non-designers) to create interactive websites without the use of Adobe Flash. Some professionals believe Edge will be the end of Flash. Personally, I do not think that is an accurate assumption. HTML5 makes animating items on the web a lot easier, but it does not do everything Flash can do. Flash is such a complex program; I believe it would be impossible to include everything in HTML5. Or is it?

Below is a screenshot of what the interface for Edge looks like:


For those of you who have created things in Flash, the interface looks similar doesn’t it? Adobe always does such a great job making the interfaces of their programs look similar. This makes it easier for developers to move from one program to another with very little training.
Here are some of the features of Adobe Edge (from Adobe):
  • intuitive user interface
  • visually author animated content
  • add motion to existing HTML content
  • import web graphics files
  • standards-based output
  • reliable content on desktops and devices
If you are more of a visual person, you can watch this video to get a better idea of some things you can do with Edge:




You can also download the most recent Adobe Edge Preview via Adobe.

As stated before, HTML5 and CSS3 are still in the development stage. This also means that Edge is still not 100% complete. Who knows how advanced it will become in the next year. Do you think Edge will be the end of Flash?

Ready to add some motion to your next project? Let TBH Creative do the job for you!

To use stock or not to use stock

Should you use stock photography and illustration for web design projects when you're on a budget?

When your web design project has a tight budget, the line item associated with imagery can be the first one cut, or drastically trimmed. When chosen carefully, compelling illustration and photography paired with great copy are the key to successful content. If a man from Mars can't figure out what your website is about in five seconds, you're failing. Great, non-generic imagery can help you communicate your brand and goals faster, which is why it's important to invest in your website's imagery and choose it wisely.

Shannon shared tips before for how to enhance stock photography. It's a great guide if you've already made the decision to use stock imagery, but what if you aren't sure which way to go with your web design project? Here are some questions to ask yourself when deciding whether to use stock:

How long will it take you to find the perfect image?

"90% of the time I opt for a more expensive stockhouse over iStockphoto," says Chicago-area art director Sharlene King. "It's the sloppiness of keyword loading. Time equals money."

Because users submit their own tags, inexpensive stock photography websites are notoriously awful when it comes to tagging. If you're looking for a straight-forward image, like a red ball, you should find relatively accurate results; however, if you search for something even slightly subjective, get ready to spend some time digging through ridiculous results.

"Average woman"

Why does a search for an "average woman" display
a lady posing with a huge gun?
(Screengrab courtesy of Sharlene King)

"Vegetarian food"

Why does a search for "vegetarian food" include a photo
of meat fondue? (Screengrab courtesy of Sharlene King)

How long will it take you to make a not-quite-right image work?

Ask yourself: If you made the budgetary decision to save money by paying for an inexpensive stock image but ended up spending a few hours in Photoshop to make it work, was it really worth the initial savings?

How many other people might be using this image?

Is the stock image you're thinking about using popular? If it's been downloaded many times, does the risk that other websites—including your competition—make a difference to you?

Is this a prominent image or a tiny spot?

Is the stock image front and center as a key communicator of your brand? How important is authenticity in your project?

Strategically Social: The British Monarchy & Flickr


Launched in early 2004, Flickr is one of the earliest—and most successful—social networks. Focused on being the best destination online for simple sharing of videos and pictures, Flickr continues to grow its core services by integrating new features for its free and paid users. Some of the more popular features Flickr offers include easy-to-understand image licensing with Getty Images and user-friendly online editing tools available via Picnik.

Flickr users set-up accounts to share photos and network with other photographers, both professional and amateur. Photos are stored in high-resolution formats (uploads of images in size up to 20MB are allowed), and these images are rendered by Flickr on the fly and made available in a wide array of sizes for easy downloading and reuse. This functionality allows many Flickr users take advantage of the website to host images for reuse on their blogs.

Photosharing meets royalty

Some businesses, organizations, and public figures make use of Flickr as a marketing and public relations tool. The British Monarchy uses Flickr to expand its online reach. They regularly post photo updates to their photostream, sharing exclusive images of the Royal Family at work promoting their causes. Many of these pictures give a behind-the-scenes look at their charitable activities, providing additional positive publicity.

The British Monarchy also use their Flickr account to create sets specific to different events and other themes. Sets are Flickr's term for online photo albums. Sets can be clustered together to form what Flickr calls collections, allowing for greater organization possibilities. Sets can be embedded on other websites as slideshows, too. See below for an example of an embedded slideshow from the British Monarchy's Flickr account. It's their set of images called, "The Prince of Wales rides an electric bicycle at the START festival."


In addition to having your own stream of photos like the British Monarchy, some businesses use Flickr to create networking groups for certain themes. Flickr groups provide another interactive way for businesses to engage their core audiences by giving them a place to submit their own images. Small business owner Elsie Larsen, a vintage resale shop owner and dress designer, created the Flickr group "Project ReStyle" to promote upcycling. She encourages followers on her blog and other fans to submit their restyled fashions and projects, as inspired by her designs. Since "Project ReStyle" launched on Flickr at the beginning of 2011, over 1,500 participants have joined the group and submitted over 2,800 photos of their creations.

Enhance your website design with picture perfect backgrounds

When it comes to designing modern-looking websites, one of the latest trends is to focus—literally—on the big picture. Tiled texture backgrounds, once a standard for website background imagery, are becoming rare as more and more designers incorporate relevant photography as part of their website interfaces. Faster download speeds and the flexibility provided by cascading style sheets have allowed this technique to thrive.

Here are some examples of sharply executed big picture backgrounds in action:

NASA

NASA goes the traditional route and uses a huge photo as a background for its
straight-forward, more traditional based design. Using an outer space image
for the the background extends their brand and adds more pop
to their layout than a simple color or texture.

WeTransfer

WeTransfer sets itself apart from the competition, like YouSendIt and SendSpace,
by giving its users a clean,easy-to-use interface on top of a single, full-screen
image-based advertisement.

Yahoo! Mail

Yahoo! Mail, like WeTransfer, uses the background area of its interface for logging into
its mail service to present attention-getting full screen advertisements.

Ford

Ford takes advantage of a big picture background image to show-off its line of cars
through an eye-catching poster-like presentation.

MIT

MIT displays captivating news photos as the canvas for their interface
directing its visitors to stories and information about the university.

HBO

HBO promotes it programming by making stills from the movies and shows
airing on its premium cable channel fullscreen big picture backgrounds.

Coach

Coach presents an attractive carousel of product imagery
as background images to promote their products.

SNEAK PREVIEW:
Laurel Hall

TBH Creative is in the process of launching a redesign for Laurel Hall
that integrates a fullscreen big picture motif. Laurel Hall's elegant new look
will go live online soon. Watch for our announcement.

Receive articles in your inbox