, ,

4 Ways Small Digital Firms Can Have Big-time Creative Power

DBurns is proud to have been awarded two Davy Awards – a reflection of our constant strive to remain creative.

Before getting to the premise of this blog post, I want to give a bit of the back story behind it. It starts with three words: We won, again.

We will be popping the cork on a bottle of Beckmen’s wine again this month. Why? Last month the awards honored our firm with three creative design nods for www.beckmenvineyards.com. This month it was two Davey Awards for the same site: a Gold in the Web Graphics category and a Silver for Visual Appeal.

Awards matter to us at DBurns Digital, but not for the reasons you might think. This is not about plaques on a wall and puffing our chests — these awards acknowledge that even small firms can build big-time creative concepts. It made us wonder about the formula behind our recent wins.  And it turns out that the ways small firms like ours maneuver around roadblocks — like limited resources — are the same ones we use to come up with winning creative.

We boiled it down to these ways small digital firms can build big-time concepts:

1 – The First Step is Preparation

When you see the end result of months of creative collaboration, the instinct might be to imagine food and alcohol-soaked sessions stretching into the wee morning hours. Then “Aha!”  — someone on the team comes up with a winning concept. Actually, that’s not how it happens.

The secret to delivering stunning creative is — first and foremost — preparation. You must know both your client and its target audience as intimately as possible. Their likes, dislikes, what they do for fun — every bit of information that is possible to mine, you should know. Creativity is a beautiful process that most people errantly think is simply spontaneous — like an epiphany you see in the movies.  It actually stems, first and foremost, from rigorous research and preparation — and from there blooms into something special.

2 – Next Comes Breaks and Stepping Away from the Project

Ever think too hard about something? It stunts your creative process, right? 

One way to keep that from happening is to force your team to step away from the project for a little while. This might mean taking a few days off and switching focus to another client — or taking a few hours off and doing something fun to divert your attention. When you do this, you prime your team to have those amazing epiphanies from  out of the movies.

3 – Balance Out Your Team

Make sure teams are composed of both your creatives and your analytical thinkers;  both your big talkers and your quiet folks.

At DBurns the programmers, marketers, interns, designers, front desk staff — everyone has input into the creative process if they want to contribute. There is no one type of person who makes biggest creative contribution. Everyone has potential.

4 – Don’t Keep Creative Discussions Confined to the Office

Staring at the same four walls every time you are trying to jumpstart a creative process is, well, boring.

We try and mix it up and do creative sessions outside the office. It depends on your staff and their interests, but those environments could be restaurants or coffee shops. Maybe the park, a bowling alley or even a yoga studio. For us, future creative sessions will likely involve all those steps — oh, and that bottle of Beckmen’s.

Looking for an award winning website for your company? Contact us!

, ,

DBurns Design Wins 3 W³ Awards

DBurns Design won three W³ Awards last month for our work designing the website for Beckmen Vineyards

We have been so busy churning out content and strategizing and building that we’ve barely had time to register something huge that happened a few weeks ago. DBurns Design won three W³ Awards last month for our work designing the website for Beckmen Vineyards, based in Los Olivos, California.

What a thrill it was when we got the news!

Nowadays it sounds cliché when a person or agency says they infuse every project with “passion” – or that their goal for every client is “greatness.”

Sound disingenuous? Cheesy, even?

Well, at our agency we live and breathe those ideals; and the bit of recognition we got from the W³ Awards panel validated us.

We were awarded the Gold in the Food and Beverage and Visual Appeal categories and a Silver for User Experience.

We are able to pour energy into Beckmen and other projects by upholding a certain set of principles at our firm:

  1. We don’t take projects unless they are aligned with our agency’s passions and interests. (Wine, for sure, is one of them)

  1. For projects that reside on the fringe of our passions, we figure out an angle that will bring out our team’s creativity.

  1. Our design philosophy involves attention to beauty and visual appeal but we are just as – if not more – interested in functionality and results.

There are a few more principles I could spout about, but I’ll leave that for another blog.

For now, we celebrate.

, ,

Designing Based on User Personas: The UX Goldenrule

Designs based on User Personas leads to a better UX.

User research is the “golden weapon” of website owners. Creating user personas, customizes the user experience also known as ux, you reach site visitors on a level that competitors might not. User personas are a tool that allows site owners to cater the experience to individual personality types. A user persona represents a group of people and how they behave; it will delve into what type of content they like, what products they purchase and even the types of experiences that engage that group of people. In an age when fast food franchises offer food the way the customer wants it, online shopping experiences offer suggestions based on the user’s past purchases and people are looking for a personal connection with the companies they do business with, using personas to help design your website only makes sense.

According to Pew Internet Research, over 74% of adults who are online use social networking. Social networks have refined their user (UX) experience, especially in recent years. When a member signs onto Facebook, for example, the system pulls up the top feeds it thinks that particular user will be interested in from friends. In addition, advertising is targeted on Facebook based on Internet browsing, age, history, gender and many other personal details.

It seems nearly every business is beginning to grasp the importance of a personalized experience and if you don’t embrace the concept, you could find your business falling behind competitors who do use user persona based design.

Even the Department of Defense has gotten in on the concept of user personas, spending millions of dollars researching how people use social media, which messages go viral and why some interaction is more successful than other types of interaction. In an article on ARS Technica, writer Sean Gallagher reports that mathematical principals can be applied to figure out what groups of users want and how they will react to a set of given online social interactions.

a/b tests

photo credit: Daniel Eizans via photopin cc

Interviews & A/B Testing of Personas

Your first step to classifying your users into types is conducting testing to see what types of people are visiting your website and how they are behaving. Not only do you want to test your customers, but you want to be sure you’ve grouped them correctly. If you create a user persona for a 20-year-old woman named Katie, she is probably more likely to want products geared to a 20-something than products for senior citizens. First, however, you have to figure out the details of Katie’s life.

First, you’ll want to conduct interviews of a portion of your customers. It isn’t necessary to interview each and every customer, but you want a good sampling, so aim for five or six customers in each persona type. Simply ask your current customers or site visitors if they’d be willing to answer a few questions. The questions should be based on the experience you want the user to have. If your main goal is to engage that type of user, then you need to ask questions about what makes them stay on your site, what would make them stay longer, etc.

You will want to focus your questions on:

  • Who your users are
  • Why they want to use your site
  • What are their daily, weekly, monthly, annual behaviors as related to your site?
  • Do they have any expectations that affect the way they see your site?

Once you’ve completed the interview process, you are going to create a user persona for that age group or demographic based on the average responses. It is usually best to throw out any extremes. For example, if you want to know how many times a day the persona visits shopping websites and one person answers once, another person answers fifteen and the middle four or five answer three, you will want to stick closer to three than one or fifteen. This is your baseline user. Yes, there are going to be extreme personalities in any user persona, but for our sampling, you simply want an average to aim at. This will satisfy the majority of your customers.

According to Usability.gov, it is best to stick to no more than three or four personas per site. This will help you target the user experience more effectively. You’ll want to watch for themes across the interviews. Is anything in particular trending? Do all users, regardless of age or background, want an easier checkout process? Once you’ve analyzed all the research, create your personas. Give each one a name and classify the average age, career, behaviors, etc. This part of the process can actually be a lot of fun for website owners as they create imaginary people that represent their target customers. What are the characteristics of each persona?

Now, decide which persona is your primary audience, secondary and so on. Starting with the primary group, create A/B Testing modules to see what types of tweaks make that user respond most often. You’ll need to set up landing pages so that all users in that primary group go to one of the landing pages (50/50) and measure the results after they land on that page. This will tell you a lot about what colors, wording and features this persona is looking for. Repeat with your other personas until you have a solid model of conversion behavior for each type.

Once you’ve completed all research, develop your persona by charting pertinent information. An example is below of things you might include:

  • Persona Grouping – age or other defining factor
  • Name of the Persona – such as Katie or Mary
  • Career – what type of career this personality type typically has
  • Detailed Demographics – family, age, religion, education
  • Why – what does the person hope to accomplish on your site
  • Picture that indicates that persona – Katie would be a young 20-something professional woman, for example.
UX Methods Infographic

When to Use Which UX Methods – Infographic

Designing by Customer Types

Personas will help with professional web design right down to the keywords you use. Because you know the way the persona behaves, you’ll have an understanding about the types of keywords that persona might search for.

Now that you’ve developed user personas, as you create different pages and features on your site, you can ask:

  • What will make this person want to stay on my site?
  • Does this feature speak to the core values of the persona?
  • What pages on my site is this persona most likely to view?
  • What call to action would work best with this persona?
  • What would make this person want to share the content?

In addition, you’re going to want to filter your site visitors to the experience that is best for him her. You’ve probably visited a clothing retailer site where the initial landing page asks if you are male or female and then subsequent questions. This is an example of a site using personas to direct you to the content best for you. Of course, you’ll also want good navigation for the rare person who doesn’t really fit well into a particular persona. For most people, filtering them through a series of simple questions will quickly take them to the content they most want.

Mistakes to Avoid

Not enough socialization: Social media has been embraced from teens on up to senior citizens. In a highly technological world, where you scan your groceries yourself, go through an automated bank teller and interact with machines rather than humans, people crave social moments with others, even if they are online and even if they are not as personal as face-to-face relationships. What social interactions can you provide for each persona that enhances the overall message or goal of your site?

Taking shortcuts because of small budgets: Creating a user persona can take time and money. Whether you hire a research company or a web designer to implement your ideas, costs can add up quickly. A company on a tight budget may be tempted to take shortcuts around the process or use the general personas from another site. This is a big mistake, because your customers are unique to your company and behave uniquely based on their experience on your site. If you have a small budget, then you’ll need to invest more time into researching your site visitors and what persona groups they fall into.

Getting too detailed: As mentioned above, creating personas can be fun, especially for creative types. It is easy to get so involved in the process of creating a user-character that you get too detailed. While you want a general idea of career, income, family, and values, getting too specific may hurt your efforts to create content that reaches a wide range of people in a particular demographic. Be detailed but not too specific and you’ll hit the right balance. Focus on ranges, such as that the persona makes between $60-75K a year.

Not updating the personas: Your business is fluid and your website should be, too. As your business grows and the industry you’re in changes, the persons who visit your site and are your patrons will also change. People also grow up, change careers, enhance their education and gain new interests. From time to time, you’ll want to update your personas to reflect this. Simply repeat the process of interviewing and A/B testing your customers to create new personas. You probably don’t need to repeat this process every year unless you’ve noticed a significant decrease in site traffic and/or sales. Every three to five years is a good time to review your personas and if they are still working for you. This can help your company determine if new personas should be created.

User Persona Example

Photo Credit: calliope_Muse via Compfight cc

Developing Personas

Development leaders need to be careful how they pose questions. As Linda Bustos wrote over on Get Elastic, Walmart learned this lesson the hard way when they asked customers if they wanted the aisles in Walmart stores “less cluttered”. Of course customers said yes because who wouldn’t want less clutter. Walmart lost billions of dollars in sales as a result of cutting inventory based on this one questions.

The question had one major problem. First, it asked something that most people would automatically say yes to without considering the consequences (i.e. less inventory means some items are not available and thus customers will purchase those items elsewhere). Second, customers may want an ideal shopping experience, but their behavior may not follow what they say they want.

This is why testing is so vital and why developers must carefully think through how they respond to the interview process and the A/B testing. Creating a site that is responsive to user personas and still increases sales takes creativity and common sense.

Yes companies should offer products and services based on user personas, but not to the tune of sacrificing the stability of the company. Introduce new services and products carefully and test any changes thoroughly. With a little foresight, good business sense and understanding of your customers, your company will stand out from competitors and see an increase in conversions.

,

10 Steps to Improve UX by Using Simple UI Animations

Animations on the Internet have come a long way. Instead of the in-your-face, gratuitous sort, smart designers and developers have opted for a more subtle approach to animation.

Subtle animations enhance user experience on the subconscious level. It’s less gimmicky and less “see what I can do” and more intuitive and focused on the user. Introducing simple animations on your site will undoubtedly improve user experience.

Why Animate?

I know that animations carry a nasty reputation that’s two-fold. Animations are difficult to do, and they’re difficult to do correctly, right? Well, not exactly. Although animations do require skill, they are not as difficult to make as they were before. Sticking to certain guidelines, like the ones I share in this article, will help you create animations that work effectively within the constructs of your design.

Animation has greatly benefited from the CSS3 evolution. You don’t need to worry about learning Javascript in order to create beautiful animations. These days, having a comfortable competency in CSS will afford you the ability to animate easily and successfully. And, it doesn’t hurt that there’s a huge community of front end coders who willingly share their codes with everyone.

Think of animation as another opportunity to communicate with your visitors. Let’s look at a few ways that animation can enhance this communication.

1. Provides Guidance

When visitors come to your site, they bring preconceived notions of how a website should act. For example, experience has trained us to look at the top right for the search bar.

If your design is less familiar, you need to add prompts to guide the visitor along. I’ve noticed a trend recently where designers use animated navigation tools to gently nudge the visitor in the right direction. It’s not a jarring, big, red arrow that shouts, “click here!” Instead, it’s a softly blinking animation that catches the eye, such as this:

Or this:

2. To Inform

Guidance and information go hand-in-hand. You can use animation to guide users, but you also need animation to inform them when something is needed, or something isn’t right.

You may be aware of the infamous WordPress Login Shake. Although it’s done with Javascript, you can do a similar animation with CSS3. This type of animation automatically arrests attention and notifies the user that something’s wrong.

A popular use of CSS animation is with responsive hover descriptions, like this one:

A good practice for UI is to implement a loading animation, like this:

Remember, the end goal of animation is to communicate with the user. Not all communication is textual, much of it is through professional web design. Animation can be a helpful buddy that informs your users and guides them through your website.

3. For Delight

Let’s face it, sometimes animation is just there to be cute. And there’s nothing wrong with that–provided you don’t get carried away. Less is more is most applicable with web animation. If you have too many moving parts, it will distract the viewer and cheapen the experience.

Although animations can be eye candy, they should also contribute to your overall web design. Take a look at these examples:

Here, animation can be a part of your logo.

Or, you can animate your text. I’d personally go for colors with less contrast, but a more subdued animation.

You can also animate your social media icons upon hover…

…Or click.

Don’t be afraid to include whimsy in your design. Web design shouldn’t be so serious. It should be playful and imaginative. Afterall, I’m not visiting your site for a root canal–I’m coming to be entertained and informed.

10 Simple Animations that Improve UX and Why

Let’s take a look at some simple animations you can incorporate into your design right now that will positively affect user experience.

1. Hover

1

view demo | download the source file

Hover is a delightful animation choice. Users are often likely to hover over images that interest them. Capitalize on this by providing an animation that gives more information, such as a blog link or an add to cart button.

2. Shake for empty fields

2

view demo | download the source file

Animate.css allows you to gently inspire action. It goes from the subtle fade, to the definite attention-grabbing wobble. This type of animation suite is best used sparingly, and only when you need immediate attention. It shouldn’t go unchecked in the background, because it can be too distracting.

3. Toggle

3

view demo | download the source file
Allow your visitors to personalize their experience on your website with toggle. This animation enhances usability on web forms, and is especially delightful on mobile designs.

4. Flat Menu

4

view demo | download the source file
The old faithful drop down menu gets a new lease on life with this CSS animation. This navigation animation shows you how quick and seamless CSS3 can be.

5. Animated buttons

5

view demo | download the source file
Activate subtle animations on these buttons during hover. Some buttons provide additional information and calls-to-action. This is especially useful for providing extra encouragement to action.

6. Thumbnail grids

6

view demo | download the source file
Use this animation suite as a delightful transition. Transitions such as Rotate Scale and Bring Back can surprise visitors with a soft but whimsical animation.

7. Timed notifications

7

view demo | download the source file
This animation can confirm information for your users, such as “saved settings” or “message sent.” Use timed notifications as a way to communicate with your users, without them having to guess or double check.

8. Google Play Store Navigation

8

view demo | download the source file
If you are a fan of the Google Play store navigation, you should check out this pen. It provides a simple animation for menu items that feel responsive and intuitive.

9. Animated checkboxes

9

view demo | download the source file
Use CSS3 to made checkbox style animations. Most of these styles provide a hover over effect that increases the likelihood of a click.

10. Hint animation

10

view demo | download the source file
No Javascript here. Use these hover hints over text (or any other object, like images) to provide additional information. The animation is very subtle, but you can turn off animation if you’d like.

Best Practices

Animations are a wonderful way to infuse personality and helpfulness into your web design. However, there are a few best practices you should strive to keep in your animation implementation.

1. Keep It Simple

Nothing’s worse than a page full of animations. Your eyes get confused and don’t know where to focus. Animations should add but never distract.

2. Keep it Sensible

Animations must make sense. With the exception of an animated logo, every animation on your website should serve a purpose. Even if it’s only there for aesthetic purposes, the animation should blend into the the feel and design of your site, and not be a random after-thought.

3. Keep it Short

A protracted animation is not on anyone’s agenda. The most effective animation are often the shortest ones because they attract attention but don’t annoy users by lasting too long.

Keep these practices in mind when you start animating. And do come back and share your animations here. I’d love to check them out.

Which of the above animations do you like the best?

50 High Performing Blog Designs

The last thing you want is for your blog to look just like every other blog out there. At the same time, each blog owner has unique features that are personalized just to that blog. Whether you take a design that is already packaged and tweak it to make it your own or you have a design custom-made for your blog platform and blog’s needs, there are some features that push blogs into the “high performing” range while others lag behind.

Some key things you’ll want to make sure a good blog design has include:

  • Easy navigational structure – According to Business Insider, the average person stays on a website for just under a minute. That means that once a person lands on your page, you have mere seconds to capture his attention and get him to stay longer. If he can’t find the page or info he is looking for, he will move on and you may lose him forever.
  • Integration with social media – Pew Internet’s Social Networking Fact Sheet shows that 73% of adults now use social networking. In addition, the average person spends about 37 minutes a day on social media. With those kinds of numbers, being able to easily integrate your site with social media sites is a must.
  • Directional Indicators – It sounds simple, but using an arrow or highlighting certain elements can help turn your landing page into a page that has a strong conversion rate. A good design allows you to strategically place arrows to bring attention to the most important information on the page.
  • Contrast and Color – The design should have a focal point that draws visitors’ eyes to what you want them to focus on. Strong shapes are used to highlight points of interest. The goal is for the reader to only be able to focus on specific elements and will thus want to click on that object.
  • White Space – White space is not just unused space. It can be placed around important text to draw attention to it. This can be helpful when you want your call to action to stand out from the rest of the text.

Rob Sheridan’s SketchBlog

http://www.rob-sheridan.com/sketchblog/

Rob Sheridan’s SketchBlog provides a unique balance of contrast and custom design. The monster’s tentacles hold important information, serving as directional indicators for the reader. Social media links are wrapped in one of the tentacles, making them easy to find.

rob sheridan blog

Mark Forrester

http://www.markforrester.co.za/

Mark Forrester’s blog puts the emphasis on content. It uses elements of design, such as white space around each separate post excerpt and larger text to make headlines stand out.  The eye is drawn to the one image on the page, which in turn draws the reader’s attention to more information about Forrester or how to contact him. It is a simple, but effective design.

mark forrester blog

Webtrends

http://blogs.webtrends.com/

This blog is high performing because it puts the focus on featured content in a variety of ways. First, the content is top center. The darker background creates contrast and draws the eye to that content and the “white space” around the text also points the reader to the fact that this is important information on the blog. Further down the page, where the background is solid white, there is a box in black with a call to action to “get more information”. The goal of getting readers to sign up for the newsletter is achieved nicely with this strong contrast.

web trends blog

Shutterstock

http://www.shutterstock.com/blog/

Shutterstock’s blog features a dynamic design with bold, beautiful images that capture the reader’s attention. There is a psychology to design and that includes imagery. Images of cute babies, animals, attractive people and designs draw the eye and help the reader make a connection to the blog. This blog features a nice variety of attractive images. In addition, the navigation is located at the top of the page and is kept to four simple areas. Signing up for social media and the newsletter is also located at the top and easy to find.

shutterstock blog

Freakonomics

http://freakonomics.com/blog/

Love pop-ups or hate them, this blog uses them to push readers to check out a latest book, donate to the site or push other important news. The overall design of the blog also puts featured material near the top with big bold images and highlights an add with a graphic that draws the eye in order to garner more donations.

freakonomics blog

The New Yorker

http://www.newyorker.com/online/blogs/tny#slide_ss_0=1

The blog for this famous literary magazine uses arrows to direct the reader to subscribe for free. The arrow is red and thus draws the eye and the call to action located at the top of the page. Then, another ad is located in the right sidebar a bit further down the page with that same blue box to offset the ad and that same red arrow to call attention to it.

new yorker blog

Tech Crunch

http://techcrunch.com/

This blog uses the concept of encapsulation to offset important articles and information. The top of the page is divided into three distinct sections that cover branding, contacting Tech Crunch with tips and an important ad. Just under that is the navigation and social media buttons. Content is divided up into capsules with large, visually pleasing images.

tech crunch blog

Chez Pim

http://chezpim.com/

The design of this blog works well to convert site visitors into customers. The top of the page is divided into three sections. One is for the shop and features an image with delicious looking jam, one features yummy treats and one is an attractive young woman, the owner “Pim”. In the right sidebar is a large cover of “The Foodie Handbook” and a call to action button that draws the eye and encouraged visitors to buy the book.

chez pim blog

Students for a Free Tibet

https://www.studentsforafreetibet.org/

The call to action on this site draws the eye because it is bright yellow. The only other yellow thing on the page is in the upper left corner and part of the logo, so the matching yellow Donate button with a  red arrow draws the eye as a matching color.

students for a free tibet blog

The Sartorialist

http://www.thesartorialist.com/

This blog has a unique design that features very large images instead of excerpts to highlight featured content. Larger images usually equate with higher conversion rates. The goal of this site is to get readers to click on featured content and the design accomplishes just that. In addition, the site uses attractive people and unique images to further draw the eye.

sartorialist blog

Entrepreneur

http://www.entrepreneur.com/blog/index.html

This magazine-style blog places the top story front and center. The design is very simple and keeps the eye drawn to only a few items. One interesting thing done on this blog is a matching horizontal banner and just below a larger, vertical banner. The banners are both a bright color, encapsulated and surrounded by white space. This all draws the site visitor’s attention.

entrepreneur blog

Boss New York Times

http://boss.blogs.nytimes.com/

This New York Times small business blog has a high powered design because it uses white space and encapsulated ads to draw the reader’s attention. A subscribe now button in blue with white letters adds a call to action that draws the eye and the banner ads are bold against the simple white background and empty space surrounding them.

new york times boss blog

Biola

http://undergrad.biola.edu/

Biola University uses large images of people to add personality and help the reader make a personal connection. Simply click on a student to read more about that student’s story and what Biola U. offered them.

biola blog

The Dish

http://dish.andrewsullivan.com/

The goal of this blog is obviously to convert visitors into subscribers and the design does its job well in achieving that. At the top is a red subscribe button with an arrow to direct the reader to that information. Then, on the white background is a bright red box that draws the eye and again calls the reader to subscribe. This pop of color on a page that has neutral colors is attention grabbing.

the dish blog

Chocolate and Zucchini

http://chocolateandzucchini.com/

This design works well because it is ordered into like-sized boxes, which is visually pleasing. However, there is one box that is set off in solid green and is smaller. That box draws the eye and invites the reader to subscribe.

chocolate and zucchini blog

10 Words

http://10words.richpurple.com/

Cluttered pages tend to confuse site visitors. However, a page like this is very simplistic and offers clear actions for the reader to take with simple navigation and limited items on the page. Unbounce conducted an experimented where they took a landing page from four options to three and saw a 78% increase in conversion rates.

10 words blog

A Beach Cottage

http://abeachcottage.com/

This site uses white space. There is emptiness all around the all-important welcome message that tells what the site is about. Across the top of the page is easy navigation, social media connections and a subscribe button. The design is simple but the welcome text draws the eye and encourages the reader to learn more.

a beach cottage blog

Hello Giggles

http://hellogiggles.com/

The site shows off its feminine slant with soft pastels. Those who visit the site immediately know that this is a site aimed at women. The “shop” is set off with a bright green shopping bag with a red heart on it. That pop of red draws the eye. Other areas are encapsulated, which makes the site easy to navigate. Top stories are featured with big, visually pleasing photographs.

hello giggles blog

Band Back Together

http://bandbacktogether.com/

This site is a good example of excellent use of directional clues. Arrows point to three separate areas of the site. The reader gets to “choose your adventure”. Each choice is represented with a large graphic and the choices are limited to only three to improve conversion rates.

band back together blog

Frieze

http://www.frieze.com/

This site uses an interesting design to draw browsers’ attention to items for sale. There are four vertical columns. The two outside columns are smaller than the inside columns. The inside columns have product info at the very top. This serves as a simple way to draw the reader in and get her to click on those sections of the site.

frieze blog

Three Fat Chicks

http://www.3fatchicks.com/

This diet site does several things right. First, the number of choices are limited, which will improve conversion. There are four separate areas the reader can click on. It also uses an image of an attractive woman for the feature article. Finally, social media is brightly colored and easy to spot at the top of the page.

3 fat chicks blog

Goop

http://goop.com/

This site uses a light gray background with a bold white contrasting box. That box scrolls the featured articles, which grabs the reader’s attention. All surrounding text is simply and understated so that the focus stays on the features.

goop blog

Pretty Shiny Sparkly

http://prettyshinysparkly.com/

Social media interaction is an important design element.  With 73% of online browsers using social media, buttons need to be easy to spot and top social media sites included. This site has brightly colored buttons on the top left side of the page. The featured article is highlighted with a large photo. The page has a simply white background but the banner brands the site with makeup and beauty items.

pretty shiny sparkly blog

Everybody Likes Sandwiches

http://everybodylikessandwiches.com/

The overall design of this blog uses color and simple images to draw the reader in. The featured content is surrounded by whitespace to set it off. The call to action to subscribe draws the eye because it is the only element on the page that is gray and it is further set up by being a unique scroll surrounded by whitespace.

everybody likes sandwiches blog

The Pioneer Woman

http://thepioneerwoman.com/

This site features bold, bright images at the top that draw the reader in. However, they do not distract from the featured content because the remainder of the page features a soft background that contrasts with the highlighted content.

the pioneer woman blog

Soul Pancake

http://soulpancake.com/

The design of this blog is a bit unusual but still worth mentioning because it defies some rules, yet still works well. The background is busy, which is typically a no-no for good blog design. However, it works well with this blog, because the design uses boxes to separate the background from the content. The title of the site is bold and simple. It is prominent but does not distract from the navigation. Something that is pretty interesting about this design is that each of the topics covered is highlighted in a different color to capture the reader’s interest. Who could help but read on?

soul pancake blog

Zen Habits

http://zenhabits.net/

The idea of scarcity forcing one to choose is proven with this site design. The choice is up top and in large letters and an image. Zen Habits wants you to try the free ebook. This is a good tactic for anyone wanting readers to focus on a specific offering on a site.

zen habits blog

Mark’s Daily Apple

http://www.marksdailyapple.com

This health and wellness blog finds success with an engaging design. The color green has the psychological effect of making the reader think of organic things, growth, and think positively. Mark’s Daily Apple utilizes the color green to bring out these feelings. They also use a solid green box in the top right sidebar to encourage readers to subscribe. Within that box, they use an old-time advertising tactic of jumping on the bandwagon by telling readers there are already 400,000 subscribers. This makes readers want to join in. After all, if that mean people are subscribed, it must a good thing.

mark's daily apple blog

Dirt in Your Skirt

http://dirtinyourskirt.com/

This site has a very effective design. The important areas of the site are featured with boxes and bold letters across the top. They have been shrank down to just three choices. In addition, there are featured items encapsulated in front of a series of strong that capture the reader’s attention. However, the photos are black and white, so the eye is still drawn to the text, which has a call to action.

dirt in your skirt blog

Unbrave Girl

http://www.unbravegirl.com/

The colors on this page flow well together. You’ll find black, white and an orange-red. The background is a simple white, but then sections of the page are set off with blocks of color. The top banner is a black box with white text and a cartoon image of the site owner. The right sidebar is the bright orange-red and is another, vertical box that also features white text. Other text on the page is black. The page is made up of circles and blocks. It works nicely and is easy to navigate.

unbrave girl blog

Canvas of Light

http://www.canvas-of-light.com/

The largest feature of this blog is the background image, which slides from one photograph into another. Since the purpose of the blog is to show off photography, this design draws the attention to exactly what the blog owner wants the visitor’s attention drawn to. On the right is a box that draws the eye because it is set off from the background in black and white. It calls the reader to action and asks her to subscribe to the newsletter. Navigation is on the left, simple and brightly colored to catch the eye, including social media icons.

canvas of light blog

Chart Girl

http://chartgirl.com/blog/

Keep the choices simple and your conversion rates will rise. That is exactly what this site does by offering two distinct areas – charts and blog. The overall design is a simple black and white concept with lots of white space and very few graphics to distract. The page loads fast, which means readers won’t leave because they are frustrated with slow loading graphics. The navigation is right at the top and is represented with two simple boxes. They are the only boxes in sight, which makes them stand out.

chart girl blog

The Moment Junkie

http://www.momentjunkie.com/

This design draws attention to the featured photograph by making it take up two-thirds of the page and giving it a bold caption in an H1 heading. Navigation is laid out to the left in simple text and limited to four simple choices. The site draws the visitor to the action of submitting a photo to the site by placing it at the top. A bold, bright-red called to action button is placed under the navigation to encourage readers to sign up for the newsletter.

the moment junkie blog

The Fox is Black

http://www.thefoxisblack.com/

This blog design highlights the call to action items by putting them right at the top of the page as featured elements. The background is blue, which brings emotions such as trust and the black text and logo give the site a serious, mature feel.

the fox is black blog

Dollar Store Crafts

http://dollarstorecrafts.com/

This site design has a nice balance between what customers expect from a site about crafts and calls to action. For example, content is featured with images, catchy headlines and short excerpts, but you’ll also find a button to advertise on the site and a banner ad at the top of the page, which brings the blog revenue.

dollar store crafts blog

Dog Shaming

http://www.dogshaming.com/

This amusing blog focuses on images of dogs wearing signs about bad deeds they’ve done. However, what is most interesting about this site is the overall design and why it is high performing. Dog Shaming uses simple colors, such as white and pale gray, but then sets off certain CTAs with brightly colored boxes, such as the “Submit Your Dog” button.

dog shaming blog

Urban Daddy

http://urbandaddy.wordpress.com/

What is it about black and white that draws us in? The contrast is about as bold as you can get and that is visually pleasing to the eye. However, the psychology behind how black and white makes us feel is even more important. White represents clean, honest, and forthright. Black represents darkness, seriousness, and boldness. These two colors together capture a reader’s attention and create the perfect design balance. Any color you add to a black and white page is going to draw the eye.

urban daddy blog

Cute Overload

http://cuteoverload.com/

What better way to get your site in front of a lot of people than to add cute images and enable social media sharing? Since the focus of this site is on encouraging people to share the photos, the social media buttons are to the left and are a bright and sunny yellow that draws the eye. These are the simple CTA on the site and they work quite effectively.

cute overload blog

Getting Stamped

http://www.gettingstamped.com/

Getting Stamped is a travel blog with a high powered design.  One of the features of this site that works well is the CTA to “Get Social with Us”. The section draws the eye because of the brightly colored icons, each set apart on a white background. A slideshow of images sets apart featured articles and makes the reader want to click and read more.

getting stamped blog

Sleepless Nights

http://somedaywewillsleep.com/

Sleepless Nights Blog takes a basic, two column web design with horizontal header and takes it up a notch with large call to action buttons. On the right is a bright orange “Subcribe via RSS” and a blocked out “Subscribe via Email” set of buttons. This uses design effectively to get the reader to subscribe.


someday we will sleep blog
Matter

https://medium.com/matter

Matter presents a single focus when the page first loads. The entire page has a photographic background that is whitewashed. The title of the blog is in simple, white letters. Just under that is a button to follow them on Twitter and a number of the current followers. Al l of the focus is on that follow button and it is almost irresistible.

matter blog

Atlas Sliced

http://atlassliced.com/

This site uses the color red to present a CTA at the top right of the page. “Join the E-mail List!” This is effective because the eye is draw to that bold text on a muted page with black text all around. The overall design is visually pleasing and also incorporates an encapsulated features section and an attractive women that readers can relate to.

atlas sliced blog

The Spicy Stilleto

http://thespicystiletto.com/

The navigation is white text on a thin, black horizontal bar. Under that is a huge featured image with the article headline front and center. The action that this design encourages is for the reader to click on the featured content and read more.

the spicy stiletto blog

The Art of Manliness

http://www.artofmanliness.com/

A simple, two-column design. The subscribe button is set off by being encapsulated and given a solid black background. Text is bold and in a different font than other text around it. This draws the reader’s eye and encouraged him to subscribe to the newsletter.

the art of manliness blog

The Atlantic

http://www.theatlantic.com/infocus/

The design is a simple, magazine-style layout with featured articles having large pictures that readers can relate to and bold, engaging headlines. This site also uses a directional error and call to action button to subscribe right at the top of the page. In addition, the button is red, which further draws the eye.

the atlantic blog

Conference Bites

http://www.conferencebites.com/

The design features a dark blue design that gives the site a sense of maturity and professionalism. This encourages the business reader to trust what is here. A slideshow of images, bold headlines and short excerpts encourages readers to view top content. In a bold, blue box, the reader is encouraged to connect with Conference Bites by subscribing via social media.

conference bites blog

Good

http://www.good.is/

This site is for those wanting to do social good, however, the design is also good for this site. The banner is a wide, green box that has the philosophy of the organization in bold, white letters. Just under that it encourages readers to “discover the most creative solutions” for their world.  How? By offering easy, free membership, of course. A blue button says “Get Started”, which serves as a bold CTA.

good blog

Bored Panda

http://www.boredpanda.com/

The squared lines of this blog encourage the reader to move in a directional manner from one story to the next. The site accepts posts and a bold red button sets itself apart from the rest of the navigation by encouraging readers to submit. In addition, social media icons are brightly colored and encapsulated inside gray boxes and the subscribe button is bold and orange to draw the visitor’s attention.

bored panda blog

Unhistorical

http://unhistorical.tumblr.com/

A picture is worth a thousand words, so this blog must be worth at least a million. You won’t find a lot of excerpt material or text on this page. Instead, you’ll find large images of historical moments that are quite compelling. The only text is the navigation for the site, which is easy to find and so simple that even the word “Archive” serves as a call to action.

unhistorical blog

Pando Daily

http://pando.com/

The design of this site takes the site owner and offers up a cartoonized, brightly colored version that draws the reader in and encouraged him to relate to this writer. Everything is set apart in capsules against a white background. Social media icons are easily spotted. On the right side of the page, a brightly colored blue and yellow box offers a CTA to become a member now, which creates a sense of urgency.

pando blog

 

A great blog design is made up of many different elements. In addition to functionality, the blog must be visually pleasing. Even truly unique designs follow a form of some sort. They share the commonality of having simple navigation, important info in the forefront, and the ability to convert visitors into customers.

WordPress alone reports more than 14.7 billion blog pages are published each month. In late 2011, there were about 181 million worldwide blogs tracked by NM Incite. With those kinds of numbers, standing out from the crowd can be a real challenge. However, with a  great blog design that meets standards of excellence and a little ingenuity, you too can create a blog that will have readers clamoring for more.

4 Reasons Why Your Website Needs to be Responsive

It’s been four years since web designer, Ethan Marcotte, first coined the term Responsive Web Design (RWD) a concept that not only dramatically changed the direction of web design but has become a buzzword of sorts. To this day, many designers are still squabbling about what we mean when we say “responsive” and how responsiveness should be defined.

It’s easy to get distracted and hung-up with terminology. We’ve seen It happen with many terms, Cloud, Web 2.0, HTML 5, to name a few. Designers have been well-versed in the concepts of responsive web design—three technical requirements, fluid grids, flexible images and media queries—but when it gets right down to it, what does responsive mean for designers and business websites?

Sometimes we need to back-up a minute and take a good hard look, where we can see the forest through the trees. In other words, perhaps we should be asking ourselves, what are the goals of responsive web design? Why should we be doing it in the first place?

And, should we be disappointed or encouraged when we read statistics like the recent ones presented by Guy Podjarny—in 2014, only 12 percent of the top 10,000 sites are responsively designed.

In this article, we’ll take a look at four goals of responsive web design:

1. Anticipate and respond to users’ needs as they view websites on multiple devices—regardless of whether they’re looking at their PC/laptop, tablet or smartphone.

Google’s study on the multi-screen world a few years back explained cross-platform behavior— whereby the device a person chooses is often driven by context: the amount of time they have or need, the goal they want to accomplish, their location, their attitude and state of mind.

Image credit: Google

Image credit: Google

In the last few years, mobile devices have out-performed PC/laptops taking their place as Google suggests as the “backbone of daily media interactions, serving as the most common starting point for activities across multiple screens.” The range of users’ activities includes searching for info, browsing the Internet, shopping online, planning a trip, social networking, and watching an online video.

While web designers can’t be mind-readers about where or what a user is doing at any given time, responsive design makes it possible for users to move seamlessly from one device to the next—on their schedule. As great as that is, it’s likely that still may not be enough.

Fluid grids, flexible images and media queries may be the three technical ingredients for responsive web design, but ultimately it will also require a different way of thinking.

2. Create websites that provide positive user experiences.

Image Credit: John Polacek

Image Credit: John Polacek

Websites should provide positive experiences for the end user. Some important things to keep in mind:

Users’ Time

While there are many ways to look at what constitutes positive user experiences, web designer, Paul Boag puts it simply, “websites shouldn’t waste users’ time.” Time wasters according to Boag include: poor website performance, not paying close enough attention to the details of the design, and content that isn’t optimized for fast consumption.

Focus on What Users are There to View

Shaw, a commenter on Boag’s article nicely sums up positive experiences via responsive design this way:

A responsive view of the website tailored to make it easier to read that article on a small screen and hiding content that isn’t the primary purpose of my visit (navigation, search box, sidebar ads, basically anything that’s NOT the article) provide a better experience for me. Having that extra content available via a toggle or link keeps the page focused on what most users are there to view.

At the risk of throwing another buzzword into the ring, we need to consider adopting amobile first strategy that keeps the focus on:  Accessibility, speed, context, clarity, simplicity, video, readability, action-ability, thumb-friendly, local, conversion-simple, and objectivity.

As Ethan Marcotte stated last year:

When we’re forced to work with a screen that’s 80% smaller than our usual canvas, nonessential content and craft quickly fall away, allowing us to focus on the truly critical aspects of our designs. In other words, designing for mobile devices first can enrich the experience for all users by providing the element often missing from modern web design: focus.

 

3. Reap the Benefits that Responsive Design Provides to Designers and Businesses

 

Image Credit: Thinkstock

Image Credit: Thinkstock

A responsive direction provides benefits to both designers and businesses alike.  Five benefits of responsive websites identified by Peter Saunders provide a compelling case for responsive design:

·      Retain existing site traffic

·      Increase your mobile visitors and desktop visitors

·      Save time, effort and money by creating a single version of your website

·      Increase conversions rates leading to an increase in business profits

·      Widen your competitive advantage

 

4. Keep Up with the Ever-Changing Trends in Technology

Reminiscent of the ways that it was difficult for many print designers years back to make the transition from a print-only design world to creating pages for online audiences, designers today will need to continue to adapt to the rapidly growing mobile landscape.

 

Key Take-Aways
Ethan Marcotte’s concept of responsive web design revolutionized a whole new generation of websites when he encouraged designers to think beyond the desktop, and showed designers how to craft beautiful site layouts that anticipate and respond to your users’ needs.

If you’ve never seen“A Dao of Flexibility,” Marcotte’s game-changing presentation, the video will be well worth your time.

Ethan Marcotte: A Dao of Flexibility – An Event Apart from Jeffrey Zeldman on Vimeo.

End users have become multi-screeners with mobile devices serving as the backbone of daily media interactions, and the most common starting point for online activities.

In addition to fluid grids, flexible images and media queries, websites should provide positive user experiences with attention to respecting users’ time, keeping the focus of what they’ve come to view.

Responsive web sites are a win-win-win for designers, end users and businesses.

As impressive as 12 percent of the top 10,000 sites being designed responsively in under four years, we still have 88 percent to go. So, keep designing, responsively!

Designers shouldn’t get complacent. Responsive design may meet today’s objectives but if we’ve learned anything over time it’s this—the only constant is change. As designers we need to keep our skill sets up-to-date and be ready to embrace new design directions as they unfold.

Tell us about your experiences. If you’re a designer, what have your experiences been like with responsive web design? Business owners, does your company have a site that is responsibly designed?

How to Keep Your Logo Trendy Without Losing Your Brand Identity

When you have a logo, sometimes it may not be ready for all situations as new medias rise and new ways of application are needed. That doesn’t necessarily mean you have to start from scratch: a Logo Refresh may be just what your identity needs.

Changing your company’s visual identity can be a hard decision, many objections come to mind keeping your from taking the step forward.

  • Maybe you have stayed with the same logo for a long time.
  • Maybe your clients already know you from your symbol.
  • Maybe you already have lots of stationery printed with your old identity.
  • Maybe you are simply reluctant to let go of something that became familiar to you.

It’s totally understandable – it’s common for us to hold on to the familiar and resist change, but that doesn’t mean that change isn’t necessary from time to time – specially when new application needs appear and the logo that is available doesn’t work so well.

As the medias and applications evolve, it’s important to evaluate how your logo performs. Maybe at the time that it was created, it wasn’t meant for screens; Now, we have a plethora of different ones, different resolutions and sizes: computer monitors, phones, tablets, e-readers, and the list goes on.

Maybe your logo will stand alone on its own. Maybe it will be a signature on your magazine ad, or on the corner of a photo you are publishing in your social media page. Maybe it will be an icon on a Mobile App, or at the top of your Website – whatever the need is, your logo must be ready to be applied and coexist with other elements around it, while looking modern and fresh.

That’s when a Logo Refresh may be a good decision – a rework of your identity’s best features, going through a shape simplification and color pallet reduction, making sure that just the essential information about your company is stored in your most basic graphic element: your logo.

Shape Simplification

The goal is to remove everything that is unnecessary and keep the most basic elements, the ones that are the most defining for the message you want to communicate. The font style, the most expressive shapes, the core concepts – keeping whatever is relevant and making it very simple and quick to digest when we look at it.

logo-progress-cropped

The Nokia logo is probably one of the most interesting cases from the examples above. While Shell kept the original essence in its symbol until today, seeing a fish symbol for Nokia is rather unexpected – but it did make sense back in 1865.

The company got its name from the city where it was founded – the city of Nokia, in Finland. In this city, there is a very important river – the Nokiavirta – so that’s where the fish in the symbol came from. Now, from a paper manufacturer, to rubber, to cables, Nokia is known for their mobile phone technology – on a global awareness level, rather than just a localised, Finish awareness level.

The fish got dropped in the process – even though it had character and ties with the company’s history, it wasn’t relevant enough or reflective of the company’s current products and had little to do with the idea of technology. So, a simplification process over the years took place, and now we are left with a simple, yet highly recognizable logo – the name of the company rendered in a unique shape and a unique color – our next topic.

Color Reduction

The consistent use of color can increase your brand recognition by 80%, according to a Xerox research. Color is one of the fastest pieces of information our brain can process. We all know the correct shades of color our favorite brands use, mostly because we have a consistent relationship with those brands on tvs, websites, apps or in physical places around the real world where we live in – and they always present themselves in the same way. For instance, take a look at this Ad for Lego:

lego-imagine-extended

If I tell you that each block group represents a cartoon show, you will probably be capable of naming each one of them:

  • Ducktails
  • Smurfs
  • The Daltons
  • Teenage Mutant Ninja Turtles
  • The Simpsons
  • South Park

This happens because you have been exposed over and over and over to the same colors on those shows. Have you have wondered why Marge Simpson always wears the same green dress every episode instead of a different one every time, like most real humans do? The answer: branding.

The character designer wants you to remember the character, and being consistent with color is one of the most important tools they will use to achieve that. The same effect can be achieved with brands. Try to guess which company is behind each of the color groups below:

brand-colors
01. Coca Cola    02. Pepsi    03. Shell    04. Facebook    05. McDonalds    06. Starbucks    07. Windows/Microsoft    08. Twitter    09. Google    10. Yahoo    11. Ferrari    12. Linkedin

Color is so strong in communication that just a hint of it is enough for us to recognize what brand it belongs to. This is also the reason why there is usually a limit for the amount of colors a brand uses – the more colors, the more pieces of information needs to be remembered. So, many brands stick to one or two leading colors, while some may go up to five.

The leading color can get so strong that you are capable of recognizing a slight difference. Take a look at the social network column: if you use those services, you can easily recognize each of them, even though they are all, well, blue. But they are different shades of blue and have been consistent enough through the years so you recognize them.

The proportion of color also influences how your brand is recognized. Notice how Shell, McDonalds and Ferrari share the same colors, red and yellow – but shell uses more yellow while McDonalds uses more red and ferrari adds a few more colors to the mix, but is largely known by red.

Either way, if you see the three colors combinations side by side, you will need some context in order to recognize them. Saying that the yellow and red combo is related to hamburgers will lead you to think of McDonalds, while saying that the same combo symbolizes a luxury car company will make you think of Ferrari.

Also important to note is that every logo needs a monochromatic version, for applications where color isn’t available (like documents that are going to be copied, or when the logo needs to be embossed/debossed on a surface).

Symbol and Type:
The different configurations of a logo

logo-configurationA logo can be comprised of 2 elements: the symbol (the graphic portion) and the type (the written portion), and from here different variations may happen. When a company is new or still not vastly recognized, it will display the type portion, together with a symbol or by itself. Only companies that are already exposed enough can make the leap to use symbol only – such as Apple, Shell and Starbucks, for example.

Another important thing to keep in mind is versatility: the ability to use your logo with your symbol or without, depending on what the situation calls for.

How will people remember you?

Your logo is the first and most important piece of identity. It’s the first thing people see on your business card, your website, your brochure, your signage. It’s your company’s first name, your company’s face, and it can make or break a first impression – and we all know the Will Rogers saying: “You never get a second chance to make a good first impression”. So it’s very important to keep it current, ready to impress, simple enough to be remember yet memorable enough to not be forgotten.

It’s the right concept, represented by the right shape and the right colors, optimized for the current moment your company/product is in and the current time the world/your target audience is in. And the good news is that you may not have to start over – you may just need a logo refresh.