Perspective, tips, and insight

Articles to help you improve your digital marketing

Web Design Trends for 2012: Social Media Integration

We are doing a series of 2012 web design trends, and our sixth prediction for web design trends in 2012 is social media integration.

Social media is everywhere. It's on our computers, phones, televisions and even in our cars. Social media integration will not be going away any time soon (at least not in the next few years).

My favorite websites with social media integration are from local designers (located in central Indiana). When I began this blog topic, I knew exactly which three websites I would showcase:

Our website (TBH Creative) puts an emphasis on social media integration linked from the bottom of each page as well as the left sidebar on interior pages. We link to our client's social media pages as well under our portfolio. Custom social media icons that match your website design are an excellent option. They blend in well with the design and don't look like they were just thrown in there.

TBH Creative's home page. Visit the site for the full experience.

Kevin Thornbloom's website has very unique social media integration. You will need to visit the site to get the full experience. When you click on the buttons, it changes the title accordingly. Kevin uses kthornbloom as his username on every social media site, so it makes it very easy to use this technique!

Kevin Thornbloom's home page. Visit the site for the full experience.

The Basement's contact page is very entertaining. The social media birds hop around on the telephone wire as you're on the contact page. They also have custom social media icons, which makes the website flow together very well.

The Basement's home page. Visit the site for the full experience.

Social media integration is key in web development this year. Now, more than ever, people are spending more time on social media sites than any other site on the web. For example, four out of the seven tabs on my browser are social media sites. News stories, friend updates, funny pictures: you name it, you can probably find it on a social media site.

Web Design Trends for 2012: Large High Quality Photograph Backgrounds

We are doing a series of 2012 web design trends, and our fifth prediction for web design trends in 2012 is large high quality photograph backgrounds.

Large, high quality photograph backgrounds can add a lot to a company's website. It is important that they are high quality images. You do not want a large, pixelated background; it is not enjoyable for the user. Just a tip from graphic and web designers everywhere: never enlarge a photograph. Be sure to only size images down. If your picture is not large enough to use as a background for a webpage, then don't use it. Below are a few websites that use the large, high quality photograph technique for their backgrounds:

Smoking Takes Lives features a story of Mick Roberts (who's life was changed by smoking). This large photograph will help to grab the user and have them watch the video before accessing any other part of the website.

Smoking Takes Lives' homepage. Visit the site.

Simon & Comet's website features his motorsport photography. After translating the webpage to English, I noticed that he also is a web designer. He has a passion for motorsports. It is a great way to combine the two things he is passionate about.

Simon & Comet's homepage. Visit the site.

Poco People's homepage has a very nice "pop" of color. Your eyes are immediately drawn to Travis and Kelly (the owners) in the middle. Just a simple red scarf and red jacket are all they needed to attract the user.

Poco People's homepage. Visit the site.

Just remember, not every website will look great with a large photograph background. When in doubt, ask a web or graphic designer. A company that sells kitchen knives will probably lose customers if there is a very large butcher knife pictured on their homepage. What looks great to you might not look great to the user.

Indianapolis Graphic Design Review: Super Bowl 2012 Host Committee Poster

Super Bowl Host Committee 2012 Poster - Indianapolis
As some of you may know, the Super Bowl is being hosted in Indianapolis, Indiana this year. It is an honor for our city to be the home of such a large event! The city's plans are starting to come together now that the Super Bowl is only a few months away.

This week, an official poster was released. The Superbowl Host Committee's poster was created by Indiana artist Walter Knabe. An article by the Indianapolis Star states "His work is represented in galleries and museums around the world." After seeing the poster and reading the article, I was very curious and decided to find Knabe's portfolio website.

While browsing through his website, I noticed he specializes in fabric and wall covering design. Yes, fabric and wall covering. Not graphic design.

I was disappointed in the graphic design and originality of the poster. It seemed elementary. For examle, I found this file of identical Photoshop star brushes via Google in about two seconds. The ink splatter brushes could be found just as easily. The logo was already created and the other images could probably be found on Google Images. To be honest, any graphic designer in the industry could replicate this poster in about thirty minutes to an hour.

Just to clear things up, this poster was not done by the National Football League (NFL). It was created for the Super Bowl Host Committee. So, why couldn't Indianapolis do better? There are several graphic design firms in Indianapolis that would have loved the opportunity to make a poster for the Host Committee.

What do you think about this poster representing the Super Bowl Host Committee of Indianapolis?
As you can tell, I am not a fan of the Host Committee's poster. Please leave comments; don't be a stranger! I am very interested in hearing other responses on this poster.

Web Design Case Study: Franciscan Alliance Foundation

We launched a new website for the Franciscan Alliance Foundation today and it can be viewed at http://www.franciscanalliance.org/foundation/.

TBH Creative worked with the Franciscan Alliance Foundation this Fall to help with their new website. The purpose of the website is to serve a 'home' for all Franciscan Alliance Foundations and receive support through donations.
We proposed a clean design that was very similar to the new Franciscan Alliance brand and complimentary to the Ceommunity Benefits website graphics and arrangement. We build the HTML framework to work with their Content management system and including some custom JQuery for rotation of stories, main ideas, and pop up window for donations. The application work was completed by their IS department with our support for graphics and arrangement.

The Franciscan Alliance Foundation's homepage. View the site.

An interior page from the Franciscan Alliance Foundation's website. View the site.

About the Franciscan Alliance Foundation

The foundress, Mother Maria Theresia Bonzel, was drawn to the ideals of St. Francis of Assisi, who left a legacy of faith characterized by selfless giving and the spirit of love; he loved every person without measure or discrimination. The care and compassion of St. Francis was continued in this country when Mother Maria Theresia sent six Sisters from Olpe, Germany to Lafayette, Indiana in 1875 to begin a ministry of healthcare and education for the poor and neglected.

St. Francis continues to be a source of inspiration for Franciscan Alliance as they “Continue Christ’s ministry in [their] Franciscan tradition” by loving and caring for the "least" among us—the unloved, the poor, the uncared for, the person who has no health insurance, the person who is shunned by society today. The Franciscan Alliance turns no one away.

Web Design Trends for 2012: Typography

We are doing a series of 2012 web design trends, and our fourth prediction for web design trends in 2012 is typography.

Typography is probably my favorite trend in web design (if I had to choose just one). I could spend hours looking at beautiful typography on the Internet. There are several examples out there; Google gave me 31,200,000 results for "typography web design". I found it incredibly difficult to only pick three websites to showcase.

Polecat has a very playful theme for their website. The whimsical typography works well with the design.

Polecat's homepage. View the site.
Indubitablee has custom and beautiful typography on her website. While I was clicking around through her site, I noticed there are no "common" fonts to be found. She used unique fonts throughout her website and it all blends together perfectly!

Indubitablee's homepage. View the site.
Typography doesn't necessarily have to be fancy, custom fonts. Ben Lind's website is an example of very simple, elegant typography. He used a common san serif font and made it his own.

Ben Lind's homepage. View the site.

How can I include typography on my website?

Six Revisions posted a wonderful article called "A Basic Look at Typography in Web Design". They explain the different aspects of typography as well as common mistakes web designers make. One important thing is to make sure the typography "matches" your website theme. If you have a very professional theme with a whimsical font, it could confuse the user and/or your potential customers.

Web Design Case Study: Anne Reese Photography

We launched a new website for Anne Reese Photography today and it can be viewed at http://www.annereesephotos.com/.

TBH Creative worked with Anne Reese Photography this Fall to help with her new website.

Anne hired TBH Creative after consulting with another firm for 1 1/2 years and not seeing results. We were able to reuse the basic design ideas as a starting point. From there, we coded and paid special attention to browser compatiblity which was very important to Anne. We included some JQuery to re-scale photos based on screen size, allow for scrolling and pop up window for a larger view. We also developed a custom application to help her manage her photos into categories and random display. With her software, she can upload photos that will resize and arrange as she specifies into the front-end design.

Anne Reese Photography's homepage. View the site.

Here is an interior page from Anne Reese Photography's website. View the site.

About the Anne Reese Photography

After receiving a Bachelor's Degree in Photography from The Columbus College of Art & Design, Anne moved to New York to master the techniques used by the very best in the field. For a few years she assisted, prop styled, and retouched her way around New York City working for high-end photographers and food stylists. Ultimately, she realized that just taking a great photo would not be enough to set her apart from the rest of the food shooters.

Anne spent the next three years working full-time as the Digital Asset Manager and Photographer for The Culinary Institute of America (CIA) in Hyde Park, New York. Along the way, Anne was fortunate enough to have met and photographed some of the best chefs in the world. She took full advantage of her opportunities at the CIA and left New York with greater understanding and mastery of her two true passions-food and photography.

Web Design Case Study: Indy Connect

We launched a website for Indy Connect today, and it can be viewed at http://www.indyconnect.org/.
 
TBH Creative worked with Indy Connect this December to help build their new website.

Phase 1 of this project was completed very quickly and included recoding for up-to-date markup (removing a lot of tables, image maps and OLD coding techniques that made maintenance very difficult) and applying with our Content Management System software for easy future changes and additions. In the old static version of their website, changes had to be made on every page of the website and all text titles were graphics. We added font replace technology to eliminate the need for so many graphics.

We did not make any major design changes during this integration, although we did expand the page to remove the outdated scrollbars that restricted the content previously. We also updated the site architecture in a few logical places and for future mini-sites. We will continue to work with Indy Connect over the next few months for additional upgrades of the website.

Indy Connect's homepage. View the site.

An interior page from Indy Connect's new website. View the site.

About Indy Connect

Indy Connect, Central Indiana's Transportation Initiative, is a partnership of the Indianapolis Metropolitan Planning Organization (MPO), Central Indiana Regional Transportation Authority (CIRTA), and IndyGo that is dedicated to providing Central Indiana residents with transportation options in support of the future development of our region.

Web Design Trends for 2012: Responsive Web Design/Fluid Grids

We are doing a series of 2012 web design trends, and our third prediction for web design trends in 2012 is responsive web design/fluid grids.

Responsive web design and fluid grids are important in this mobile world. There are more tablets and smart phones in the hands of consumers (New Study Predicts that Mobile Web will Rule by 2015). Unlimited data packages have made smart phones even more appealing. As a business owner, it is very important to make sure your website is up to date and looks great on any platform.

Below are a few examples of responsive web design and fluid grids.

Touchtech has a beautiful website. When you look at the website from your mobile device, it automatically resizes and rearranges everything to fit your screen. You can get the same effect on a desktop or laptop computer by resizing the browser window to a smaller size.


Touchtech's homepage. Visit it here.

Touchtech's mobile site.

Owltastic also has a great view for use on mobile devices.

Owltastic's homepage. Visit it here.
Owltastic's mobile site.

How do I tell if my current website is mobile friendly?

If you open your website in a web browser, you can do a very simple test. Resize the browser window until it is significantly smaller in width. If the items do not move and there is a scroll bar at the bottom of your browser, your website is not fluid and possibly may require some adjustments for optimal mobile viewing.

Web Design Trends for 2012: Design Below the Fold

Our first prediction for web design trends in 2012 is design below the fold. We are doing a series of 2012 web design trends.

Designs below the fold, also known as large footers, are becoming a very common trend in web design. Footers are no longer a boring place at the bottom of a website. Just the copyright and a handful of links are not cutting it anymore. There are several ways to spruce up your footers: beautiful graphics, extra navigation (sometimes the entire sitemap), contact forms, videos, social media icons and more!

Below are a few examples of great footers.

Yodiv has a very simple, but beautiful, footer.

Yodiv's homepage. Visit their site.

Web Designer Depot has a very beautiful footer with stunning graphics that match the header design.

Web Designer Depot's homepage. Visit their site.

Orca Bay Seafoods, Inc. has a very organized and simple footer that blends very well with the rest of the website.

Orca Bay Seafoods, Inc.'s homepage. Visit their site.
Large footers should not be overpowering, but accent the rest of the website. Beautiful footers give the user something nice to look at once they get to the bottom of the page. Besides, who wants to look at just a boring copyright? You should still have the copyright in the footer, but don't be afraid to add even more content down there!

Here are a few big web design footers that TBH Creative applied for clients this past year:

CareerXroads - Emphasizing the social media and contact information.

Circle Tail -- Pulling out social media, email newsletter sign up, and address information.

Northpoint Pediatrics -- Adding/repeating important links, emphasis address and phone information, and adding some visual illustration appeal.

Looking for some more inspirational designs below the fold?

Vandelay design posted a fantastic list of 25 Impressive Blog Footers. Google (or any other search engine) is always a great resource if you're looking for some design inspiration.

2012's best Web-focused conferences

Training recommendations for learning the latest news and information about interactive design, online content strategy, and web development

C.R. Lawton once said, "Unless you try to do something beyond what you have mastered, you will never grow." Growth is easy to talk about as a goal, but it's much harder to actually make a priority to work toward as a goal when deadlines and other day-to-day demands occupy your thoughts. To make sure you make time for you next year, why not plan ahead and get your 2012 professional development scheduled now? To help get you started, here's a round-up—sorted by focus—of options to consider:


INTERACTIVE DESIGN

HOW Interactive Design Conference

What is it? From their website: "The HOW Interactive Design Conference is a not-to-be-missed event presented by HOW magazine in partnership with today’s leading digital design experts. This 2-1/2 day conference will provide you with the information you need to transfer your current skills into interactive design for the web, tablets and mobile devices. HOW Interactive Design Conference highlights the technology, design and inspiration you need to understand the changing role of the designer in digital media, whether you want to create websites and apps yourself, or whether you want to learn how to communicate more clearly with your development team and your clients."

When is it? Dates have not been announced, but last year's conference was in November.

What is the cost? 2012 prices are not online yet, but last year it cost $995 for an individual ($1095 after Sept 30).

Where is it held? 2012's location has not been announced yet.


ONLINE CONTENT STRATEGY

Confab

What is it? From their website: "As the leading conference of its kind, Confab plays a major role in driving the content strategy conversation forward.... Our extraordinarily successful debut in 2011 has already had an incredible impact on how people around the world are talking and thinking about content strategy. Confab attendees have posted recaps, held “redux” sessions, and shared success stories of career changes, new budgets, and increased influence in the workplace—all as a result of what they learned at Confab."

When is it? The three-day conference runs from Monday, May 14–Wednesday, May 16.

What is the cost? 2012 prices are as low as $950 and go as high as $1,600, depending on what you choose to attend..

Where is it held? The conference is being held in Minneapolis.


WEB DEVELOPMENT

An Event Apart

What is it? From their website: "An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for. "

When is it? Currently there are four announced conferences in 2012: February 6–8, April 2–4, June 18–20, and July 9–11.

What is the cost? 2012 prices are as low as $449 and go as high as $1,240, depending on what you choose to attend.

Where is it held? 2012's announced locations include Atlanta, Seattle, Boston, and Austin.

Receive articles in your inbox