Wednesday, March 28, 2012

Web & Graphic Design: Favorite "Go To" Books

I've always been one of those students that buys every book for every class. The only book renting I have done is for classes that don't really deal with design. Some books the professors pick are outdated and irrelevant in 6 months. My favorite books aren't necessarily timeless, but they will be helpful for many years to come.

Below I have listed my favorite books and why I keep going back to them time after time.

Usability for the Web: Designing Web Sites That Work

by Tom Brinck, Darren Gergle and Scott D. Wood

This book is by far my favorite book from my undergraduate classes. I took a usability class because I felt it was necessary for the industry.  Sure, other classes had touched on usability, but this class was all about it.

This book was written in 2002 and it is still relevant to today's usability issues. Usability for the Web takes you from start to finish for web design usability: mockups and prototypes, production, launch, and evaluation. It also discusses pervasive usability, requirements analysis, and conceptual design.

There are several forms, checklists, and examples in this book. I always turn to those pages to make sure I haven't overlooked anything while working on usability. The entire spectrum of usability issues are covered as well: architecture, navigation, graphical presentation, and page structure.

Where can you get this book? Amazon and Barnes & Noble have a few (new and used).

The Web Designer's Idea Book

by Patrick McNeil

This book is very helpful when I'm "stuck" on what to do for a website design. It's my inspiration book. They include design and color scheme ideas based on subject, color, type, style, element, and structure. Obviously, a church design will have a completely different look than a personal website.

For me, one idea usually sparks another. This book is very easy to flip through for some quick inspiration.

They also came out with a second version. I have not bought it yet, but I can assure you it is packed with just as much inspiration as this one.

Where can you get this book? Amazon and Barnes & Noble both have it.

Design Evolution: Theory Into Practice & Design Elements: A Graphic Style Manual

by Timothy Samara

There are actually two books in this series: Design Evolution: Theory Into Practice and Design Elements: A Graphic Style Manual. I have had these books since freshman year. I don't use them as often as the first two, but they are definitely helpful when I need a little inspiration. When I get tired of my ideas and need something dramatically different? This is the book.

There are several design aspects covered in these books: form and space, color fundamentals, choosing and using type, the world of image, and putting theory into practice (examples).

I think the main thing I love about these books is the typography examples, to be honest. Each page is filled with beautiful typography. They have a few sections that specifically discuss typography.

As a freshman, I thought I would never open these books after the class ended. Wrong. I use them more often than I thought. If I had to choose one over the other, I would probably choose Design Elements: A Graphic Style Manual. It touches on very important aspects of design that should not be overlooked.

Where can you buy these books? Amazon and Barnes & Noble

Learning ActionScript 3.0: A Beginner's Guide

by Rich Shupe and Zevan Rosser

Oh, Flash. My arch enemy. This book came to my rescue when working on my final senior project. For some crazy reason, I decided to create a Flash website. After taking three Flash and ActionScript 3.0 classes and hating them all, I knew I was crazy for taking on that project. Long story short, I was victorious and totally dominated the "Flash monster". ActionScript 3.0 was the most confusing language for me. This book really helped me during those few months.

ActionScript really wasn't as scary as I thought. Most self-taught help books are terrible in my opinion. This is the best one I've come across. I honestly used it more than Google during my project. This book takes you step by step for certain tools in Flash. You don't have to follow this book cover to cover. I skipped around and looked for the needs of my project. I learned so much from this book. If you're interested in learning some ActionScript 3.0, I highly recommend this book.

Where can you buy this book? Amazon and Barnes & Noble have a few (new and used).

.Net Magazine: Top 25 books for web designers and developers

.Net Magazine came out with a list of helpful books for web designers and developers in November.

The list contains several recommendations. Most of them are based on up and coming trends: mobile design, CSS3, bad strategy and good strategy. They even recommend Steve Jobs by Walter Isaacson. They recommend it because “as web professionals, we need to remember to keep doing the work we love and never settle”.

After going through the list, there are some on there I know I've been meaning to read. A few of them have been on my Amazon Wish List for a while now. Maybe it's time to add some other awesome design books to my collection?




About the Author
Ashleigh Finley has been with TBH Creative as a Web Designer & Developer since September 2011. She will be starting graduate school in the Fall of 2012 at the Indiana University School of Informatics in Indianapolis. She will be working towards her Masters in Media Arts and Science.

Ashleigh focuses on web design and development, but has recently been trying to absorb more information about mobile web and application development.



Wednesday, March 21, 2012

Browser Wars: Which browser is better?

Illustration by Galit Weisberg.
There will always be battling on the Internet. Facebook vs. Twitter, your local news channel vs. The Weather Channel, Chrome vs. Firefox. Most people use what they are used to, or what they grew up with. This is why Internet Explorer, Firefox, and Chrome are the most widely used browsers. Internet Explorer was #1 until it was passed by Firefox in 2009. W3 Schools has put together a very nice graph to illustrate browser use throughout the last decade.

I decided to do a little research on three of the most widely used browsers (Internet Explorer, Mozilla Firefox, and Google Chrome). Below you will find positives (as well as negatives) about each browser.

Internet Explorer

Internet Explorer has been around since 1995. Internet Explorer 9 was released by Microsoft on March 14, 2011. Last April, Microsoft announced they woud be releasing Internet Explorer 10 (no release date yet). They were three months into development when they made the announcement.


What are the negatives of IE?
For web developers everywhere, IE6 has always been an issue. The website can look beautiful in every browser except IE6. The good news? Microsoft announced in DATE they will no longer be supporting IE6. Perhaps they got tired of all the hate mail from frustrated developers.

Internet Explorer is also known to get a lot of viruses. The IE team at Microsoft fixes bugs on a fixed schedule. They may know about a virus issue and take six months before they actually fix it. Hackers know the system, and know it very well. Another reason why you need to make sure your computer is protected with antivirus programs. Also, don't click on any links you shouldn't be clicking on (e.g. You just won a million dollars! Claim your prize now!").

What are the positives of IE?
It's good for browser testing. It may look good on every browser, but it will most likely look different in Internet Explorer. Some websites look okay and won't need any coding changes. Others will need some IE exceptions in their coding.

Internet Explorer also has an Automatic Crash Recovery that prevents the loss of work and productivity in the event of the browser crashing.

Mozilla Firefox

Firefox has been around since 2004. Version 11.0 of Firefox was released on March 13, 2012. Mozilla is already planning the details for versions 12.0, 13.0, and 14.0.

What are the negatives of Firefox?
Firefox has crashed on me the most out of every browser. I go to the same sites, do the same things, and for some reason, Firefox hates them. Luckily, it saves my tabs when it crashes, but it is still a hassle.

What are the positives of Firefox?
My personal favorite feature of Firefox is the wide variety of add-ons. I can add items to my Amazon Wish List with a click of a button (even if the item is on a different website). Firebug, Firefogg, and Flashfirebug have also been extremely useful to me throughout the past few years. Customization is a huge plus.

Firefox has also been said to be safer from hackers and viruses than Internet Explorer.

Google Chrome

Google Chrome was released in 2008. It has really taken off since the first release (see the W3 Schools article).

What are the negatives of Chrome?
Chrome still does not work correctly with certain websites. For some people, privacy is a major issue with Google Chrome. Google knows what you search, what you read, what people visit a site, what sites you visit etc. With a Google browser you can’t hide anything anymore. (For me, this isn't a bad thing. It makes my web searching easier and quicker because it knows my style, interests, etc.)

What are the positives of Chrome?
Personally, my favorite feature about Chrome is the user interface. It is very clean and I definitely get more screen space on this browser. Google Chrome has several cool add-ons, but they don't clutter up your tool bar. They also have a "Developer Tools" section in the menu bar. It acts just like Firebug (which makes me not have to switch back and forth between browsers).

Some users don't know that Chrome really does have add-ons. Ad blockers, Angry Birds, etc.

This is also the fastest browser I have used. Firefox always takes forever to open. Chrome opens in about 2 seconds for me. I'm on a Macintosh, so it may be different for other PC users. Google Chrome is definitely my browser of choice.




Which browser is your favorite and why? Let us know in the comments below! Was your favorite browser not listed? Let us know that too! We are always interested in hearing who is using which browser.


Friday, March 16, 2012

Captivate your Audience with Video

Guest blog by Lisa Whitman of Digital Stories Productions

True confession:  On the afternoon of the Academy Awards, I spent nearly 2 hours on my computer watching trailers for all of the nominations.  
I know. Don't judge me.

I didn't set out to waste so much time.  I had unanswered emails and phone calls to make.  Deadlines and Dinner.  And yet, because of an innocent looking tweet that linked me to the official Oscar website, I spent the afternoon at the 'movies'.

When you go to a website that has a video button, what do you do?
Most of us, obviously, click 'play'.
If it's an interesting video, we watch it.
If it's REALLY interesting, we share it.

Why do we do that?  Most websites have an 'About Us' page, a 'Learn More' page...other ways to get to know a company or product.  And yet, predictably, Pavlovianly (I made that up), the first place we go...is to the video.


Why? Because video does what few things can:
  • It shows us.  
  • It teaches us.  
  • Entertains and engages us.  
  • All in a matter of minutes.

Want some stats?

  • Online video habits are increasing at a staggering rate.
  • YouTube is the second largest search engine in the world.
  • 24 hours of video uploaded every minute. Yes. Minute.
  • 500,000,000 unique visitors that generate 92,000,000,000,000 (that's billion) page views each month.
  • (Digital Buzz Blog, November 2011)
  • Interestingly, 80% of online video viewers say that they use the Internet while they are ALSO watching television. (Burst Media November 2011)
We, as a society, are media and video watchers.

The question is:  Are we also 'doers'? Do we ACT on what we see?
Answer: Yep.

Compared to seeing standard media displayed on the web (photos, graphics, etc.) a viewer is much more likely to engage and take action after watching an online video ad.  (Burst Media November 2011)

What does this mean for your business?

  • Consumer usage of video is increasing rapidly.
  • In 2010, 30% of Internet Traffic was video related.
  • By 2013, that rate will climb to 90%. (Cisco 2011)

Which means, if you don't have video on your site, you are quickly going to be in the minority.

Okay. Enough Analytics. You get the idea.

Bottom line?

Consumers are a savvy bunch of media hungry connoisseurs.
They expect online video as a central element of a company's communication strategy.
No matter what your business, incorporating video is essential.
Video is how consumers prefer to take in information.

(In fact, if I practiced what I preach, this entire blog should have been a video.)

Video will encourage your visitors and clients to engage, dwell, click through and use your business.
 And if you throw a couple of movie trailers on your site, they just might pop some popcorn and hang out with you for the entire afternoon.

Lisa Whitman
About the Guest Author, Lisa Whitman
Prior to starting Digital Stories Productions in 2007, Lisa Whitman (along with Travis Hartman) had careers that were a launchpad for sharing stories through video.

Lisa has been in advertising, marketing and has traveled extensively through the former Soviet Union where she served as a correspondent and video journalist. She has spent the past 20 years exploring and telling the stories of people, businesses and organizations. Lisa has spent the last thirty years of her life exploring the stories of others. It is her passion. Learn more about Digital Stories


Thursday, March 15, 2012

The Best (and Not So Great) Hospital Website Designs

Check out a newer version of this post! For more recent examples, head over to our latest hospital web design showcase.

Sometimes it is hard to distinguish what makes a website the "best" because much of it is subjective. Other aspects are more fair to judge such as usability, use of space, site architecture, and content. After searching the Internet for hospital websites, I quickly was able to find some that did all of the above well. Some of it may still be personal preference and even colors.

Last year, we created a post on the Best Healthcare Websites and Must Haves. It's interesting to see what similarities and differences there are within a year.

Below, I have reviewed three of my favorite hospital websites as well as two of my least favorite.

Best Hospital Websites

IU Health
IU Health's website has good organization and use of space. Indiana University's colors are red and white. They softened up these colors with a neutral tan and gray. The slideshow on top gives a nice preview of recent news, honors, and events. I also like how they do not overload you with information on the homepage.

The brand to integrate all hospitals under one umbrella is very well thought. They are clearly a combined group of healthcare providers and facilities. When you navigate at the main/corporate level, you can easily jump into a particular facility near you and get more detailed information; at the same time you can jump back to the main corporate level without confusion.

The navigation experience is nice. The main choices are straight-forward to 'to the point'. The left navigation offers a very nice option to open/close additional 'sub-level' pages. It is clear to see the big picture and find what you need with ease.

IU Health also offers a very clean and organized mobile version of their website for finding a facility/location, find a physician, and medical services. In my mind, perfect and exactly what a user would want from a mobile device. One negative thing about the mobile site: it doesn't automatically redirect the user to the mobile version from a mobile device. The "mobile site" link is at the bottom in the footer which is how we know it is nice, but they really need to make it automatic for mobile devices. See our post on mobile web design tips and tricks.

What needs improvement?
  • The design elements are "boxy" and in my opinion harsh/masculine. Compassion and caring emotions around desired healthcare might be better communicated by softening some of the elements (e.g. softer color tones, rounded corners). On some pages (such as patients), the boxes and graphics are overwhelming and do not help the user experience. Simpler might be better.
  • One small design suggestion is to make the "Jump to a location" section at the top easier to read. Italics for an entire phrase makes it difficult to read at such a small font.
View IU Health's homepage.

Seattle Children's Hospital
Seattle Children's Hospital's website has a lot of color, which is expected from a children's hospital. The colors are not overpowering and add a bit of character to the website. The white background color makes the website look very clean and also brings your attention to the content rather than the background.

Navigation is easy to navigate and find what you're looking for. If you can't find it, you can search for it with their search widget. Their navigation is very unique; I'm not sure I've seen anything like it before. When you hover over a button, it shows the entire menu. This makes it even easier to find what you are looking for. The menu also has a little interactivity. It is just enough to look professional and informative, yet not enough to distract the user.

I also like how they have their address and phone number very clear at the top. They make it very easy to pick up the phone and give them a call. They have other locations besides the main campus, so they have included a Locations page just for that.

What needs improvement?
  • Mobile optimization is essential, and their navigation doesn't work properly on a mobile device. There is no way to hover on a mobile device, so clicking on the menu item takes you to that specific page. It doesn't show you the other options on the main menu.
  • Maybe a smaller, shorter homepage? Without the mobile optimization, it makes scrolling and finding things on a mobile device much harder. The homepage seems to go on forever on a mobile browser.


View Seattle Children's Hospital's homepage.

Massachusetts General Hospital
Massachusetts General Hospital's website also has great organization. They have the main navigation at the top, quick links on the side, and tabs near the bottom. There are plenty of shortcuts and easy ways to get around the website.

The yellow-orange color goes very well with the blue. It calls for your attention, but doesn't demand it.

They also have mega drop down menus that work very well. They have a lot of information on the site and have organized it well. If you can't find what you are looking for, they also have a search widget.

What needs improvement?
  • Again, mobile optimization is essential. (Can you tell mobile optimization is necessary yet?) They made a few small changes to help their site be a little more mobile friendly (getting rid of Flash animations and making the website width a little smaller, but it still isn't 100% there yet).
  • On internal pages, the darker blue background (where the large images are) turns black. It is very harsh compared to the white background and lighter blue navigation. They should have had the same theme throughout. The homepage obviously needs to be a a little different from the interior pages, but it's almost too much of a dramatic change. The black might work if they made the "large image" area smaller for internal pages.
View Massachusetts General Hospital's homepage.

Not So Great Hospital Websites

Cottage Hospital
Cottage Hospital's website isn't too terrible visually, but it just isn't organized very well hindering the usability. The header includes a slideshow with various images. Most of the images have the logo on the right side. The screenshot below has the logo in the middle of the picture. Your business' logo should be in one spot and one spot only.

The navigation is also confusing. The links in the main navigation match some of the links in the side navigation. Two main sections of navigation seems very repetitive. They could have highlighted the extra side links on the homepage or even in the main navigation. The services page could have been organized a little better too.

This website's main issue is lack or organization. Revising the site architecture would greatly improve the end-users response and the site's overall effectiveness.

What can we learn from this website?
  • To many non-strategic duplicates in navigation take up extra room and confuse the user.
  • Make your logo easy to find. A general web design rule is that your business' logo be in the top left corner of the website.
View Cottage Hospital's homepage.

Aiseikei Hospital
Aiseikei Hospital's website is very interesting comparison to the above examples. Their hospital is located in Japan (hence why you can't understand most of the text on the website). I usually try to stay within the United States when comparing websites, but this one came in search results and was worth showing as a bad example. I first thought, "Oh, they must have made it in 1998 and forgot it was still on the Internet." But then it hit me, someone is actually paying for the domain and hosting.

I don't know where to begin on improvements for this website. A lighter, softer background and less intense graphics would definitely help, but it is probably best to start over from the beginning with discovery and research.

What can we learn from this website?
  • GIFs are so 1990s. Obnoxious GIFs should not be used on any website. If you absolutely need to include an animated GIF on your website, make sure it is appropriate for your business' message.
  • Bright colors on top of a dark background are hard to read.
  • If you use too many colors, the user can get confused and not know where to look first.
Visit Aiseikei Hospital's homepage.

TBH Creative Examples

We have worked on many healthcare websites over the years and are continually gaining new insights from statistics and visitor trends to help further increase effectiveness. Below are a few recent projects we helped with in the healthcare industry. We also work with Northpoint Pediatrics and are currently updating Internal Medicine Associates in Merrillville, Indiana.

Franciscan St. Margaret Health by TBH Creative
Visit Franciscan St. Margaret Health's homepage.

Johnson Memorial Hospital by TBH Creative via subcontract with Williams Randall Marketing

Lindner Research Center of The Christ Hospital by TBH Creative
Visit Lindner Research Center of The Christ Hospital's homepage.


Tuesday, March 13, 2012

Meet our Video Partner, Digital Stories

Prior to starting Digital Stories Productions in 2007, Travis Hartman and Lisa Whitman each had careers that were a launchpad for sharing stories through video.

Travis
In addition to being a writer and artist, Travis worked in IT and has a deep knowledge of blending technology and art to convey a message. (He's also a whip-smart bicycle mechanic, avid ski and snowboard instructor and has a bent toward perfectionism in everything he does.)

Lisa
Lisa has been in advertising, marketing and has traveled extensively through the former Soviet Union where she served as a correspondent and video journalist. She has spent the past 20 years exploring and telling the stories of people, businesses and organizations. Recently, she hosted a program on Fox 59 called 'Indy's Marketplace' and has her own article each month on the back page of Indianapolis Woman Magazine. She is on the advisory board of Women Empowering Women Network, a mentoring program for women coming into the marketplace. In addition to writing scripts, crafting a company's message and creating videos, Lisa is also a content writer for web copy, blogs and other information for her clients. Lisa has spent the last thirty years of her life exploring the stories of others. It is her passion. (But her favorite role is mother to her 5 children; 3 boys and 2 girls, from toddler to high schooler.)
Tell stories well. This is our motto and business goal.

Their Process for creating videos

(In their words....)
Time is precious. It seems that no one has very much of it anymore. In order to get your message out, you need to be concise, interesting, informative and, dare we say, pretty. We approach every video with an artist’s eye, a storyteller’s voice and a marketing director’s understanding of conveying your unique message . We are technology nerds, and we spend hours finding just the right equipment to help us tell our clients’ stories. Plus, we really enjoy working together; a good thing since we are together most of the time. We’d love the opportunity to bring our passion, abilities, and what we think are our strengths, to create great videos for our clients.

Example work from Digital Stories

(see video carousel near bottom of home page, click to open videos)


Digital Stories created the videos for Northpoint Pediatrics. View the site.

On The Air Stream videos by Digital Stories

Digital Stories created the videos for On The Air Stream. View the site.

Green Job Interview videos by Digital Stories

Digital Stories created the "Two Minute Tour" video for Green JobInterview.
View the site. To watch the video click the button in the upper right.

10,000 Jobs Challenge videos by Digital Stories

Digital Stories created the videos for the 10,000 Jobs Challenge. View the site.

Digital Stories is honored to work with companies like:

  • Franciscan St. Francis Health (formerly St. Francis Hospitals)
  • Direct Employers Association
  • IMAVEX
  • Northpoint Pediatrics
  • IDC
  • Community Hospital Network
  • Indy Visitor's Channel

Tuesday, March 6, 2012

Web Design: 2012 Republican Candidate Websites

With the 2012 Presidential Primaries right around the corner, I thought it would be a perfect time to talk about the Republican candidate websites. Some states have already had their primaries. Mark your calendars folks, Indiana primaries are May 8!

Below is my review of the Presidential Republican Candidate websites of 2012:

Newt Gingrich

When I first went to Newt Gingrich's website, I liked how organized and clear the splash page was. He had an image showing which states were voting for primaries today, as well as information about each primary. He has a "skip to website" button, which makes it less confusing to users on how to get into his website. I also liked how the website was easy to navigate. Gingrich doesn't have a large rotating image slider on the homepage either. This is a plus for me, because the user isn't distracted easily. He is also collecting names front and center--a very good tactic to communicate with interested follower via email marketing.

Newt Gingrich's splash page.

Newt Gingrich's homepage. View the site.

Ron Paul

I actually applaud Ron Paul for not having a splash page. For most people, nothing is more annoying than going to a website and having to click on another link to get to the actual website. If I had to pick at anything on the website for improvement, it would be that the content below the fold could be organized little better. It seems that the map and store advertisement are just kind of thrown in there. Maybe this would have been a good time to add a "big" footer?

Ron Paul's homepage. View the site.

Mitt Romney

If you are not too Internet savvy, you may think you have to enter your information to get into Mitt Romney's website. The "sign up" button is significantly more noticeable than the "continue" text. Once you get into the website, it is really nice. One thing that really bothered me was the buttons. The "donate" button at the top is very sleek. However, when you get down to the content, the buttons were compressed too much and look pixelated. I know, I know; the average person won't notice that, but a designer will, and it seems sloppy.

Mitt Romney's splash page.
Mitt Romney's homepage. View the site.

Rick Santorum

I'm just going to give my honest opinion: the splash page for Rick Santorum is terrible. There is too much text. I did not know where to look first. I have no idea why they even decided to add this splash page because it seems repetitive. They could have included this information on another page. The interior homepage is so much nicer, and the user should not feel as distracted. He has nice call to actions in the lower right quadrant.

Rick Santorum's splash page.
Rick Santorum's homepage. View the site.

Mobile Web Design Observation
Regardless of the growing trend in mobile usage and mobile web design options; after checking all of these websites on my Android, I was disappointed to find that only one candidate had a mobile friendly website. Mitt Romney's mobile website is very user friendly. Nice work, Mr. Romney.

Which website is your favorite?

Would the look of their website make you want to vote for them? It sounds silly, but in this world, a lot of visitors and voters are learning about candidates from their websites. Beyond the information provided, how easy it is to find / follow and how appealing the graphics makes a huge difference in forming an opinion.


 

Subscribe to this blog