A common theme that has been discussed on this site over the past couple of weeks is how design can tell a story and yet so often websites don’t do a good job of conveying that. I try to do a decent job of showcasing designs here that are more than a pretty design, but it is still hard to tell a great story when you have other stakeholders involved. Continue reading
Category Archives: Tips & Tutorials
The Difference Between Web Reporting And Web Analysis
Someone asked me this very simple question today. What’s the difference between web reporting and web analysis?
My instinct was to use the wry observation uttered by US Supreme Court Justice Potter Stewart in trying to define
po rn: “I know it when I see it.”
That applies to what is analysis. I know it when I see it. : )
That, of course, would have been an unhelpful answer.
So here I what I actually said:
If you see a data puke then you know you are looking at the result of web reporting, even if it is called a dashboard.
If you see words in English outlining actions that need to be taken, and below the fold you see relevant supporting data, then you are looking at the result of web data analysis.
Would you agree? Got an alternative, please submit via comments.
I always find pictures help me learn, so here are some helpful pictures for you. . .
This is web reporting: Continue reading
55 Inspiring and Clever Online Portfolios
If you’re a designer/creative, you probably already know that having an online portfolio is very important. Not only do you need to have something to show your potential clients, but these days it’s important to be present online for many reasons. If you leave the address of your portfolio when you’re communicating in social media, through blog comments, contests and so on, you’ll see that you can even get work from that alone.
Inspiring and Clever Portfolios
A portfolio can make or break you. It’s important to show your best work, your variety and stand out. In this showcase we’ve put together a collection of 55 portfolios we’ve found online that we think stand out as clever, creative and inspiring. We hope these can inspire you when you’re making your own portfolio, when creating web designs and in other projects. We find these pleasant to look at and invite the visitors to want to learn more about the people behind them.
Web Analytics 101: Definitions: Goals, Metrics, KPIs, Dimensions, Targets
It is surprising how often these “simple” things come up.
“What is the difference between a metric and a key performance indicator (KPI)?”
“What is a dimension in analytics?”
“What is segmentation?”
“Are goals metrics?”
And many more.
There seems to be genuine confusion about the simplest, most foundational, parts of web metrics / analytics. So in this short post let’s try and see if we can fix this really basic problem.
Definitions and standard perspectives on these terms will be covered in this post:
- Business Objectives
- Goals
- Metrics
- Key Performance Indicators
- Targets
- Dimensions
- Segments Continue reading
Optimizing Emotional Engagement In Web Design Through Metrics
Think about what keeps you coming back to your favorite store, your favorite person or even your favorite website. It’s not just a mindless buy-go, hug-go or click-go relationship. It is a complicated, emotional connection. It is what makes relationships with people and brands intoxicating. User engagement must have an equally complex emotional connection. It must affect the user in mind, body and spirit. Anything less is a 1990s brochure website.
You can create strong storytelling strategies based on user personalities and segmentation. However, it seems almost impossible to measure those efforts, let alone know how to optimize them, without access to a neuroscience laboratory. In fact, emotional engagement can be optimized, and quite effectively, using something already at your disposal: performance metrics.
Emotional-Behavioral Response Relationship
Let’s start with the basics: an emotion is a psychophysiological response in your body to a stimulus. It’s an internal process that in turn triggers an external behavioral response. Behavioral responses help you decipher the emotional responses of others. Things like facial expressions and body language give you clues to whether the chef wielding the knife is angry and going to attack you or happy and going to make you dinner.
50 Free and Exclusive Twitter Icons
Today we bring you a set of 50 free and exclusive Twitter icons that you can use for your websites.
The icons are provided in both raster and vector formats: The transparent PNG versions are 256×256, and we have also included Illustrator files so that you can resize the icons as needed.
The icons are completely free for personal and commercial use and they’re being released exclusively to all our readers.
If you’d like to share these icons, please refer your friends to this page so that they can download their copy from here.
Below you’ll find a full preview of all icons included in this set. The download link appears at the bottom. Enjoy! Continue reading
99 Sites All Designers Must Know About
Below is a list of 99+ graphic design resources, in English and (and a few other languages), that all designers must know about.
It is sorted by category (click to go to category):
- General Design
- Web Design
- Resources
- Show Cases
- Development
- Flash and Flex
- Typography
- Video and Motion
- Personal Design Blogs
- Web 2.0
- Relaxation
- Various
For more resources you can check out the 101 Places To Get Design Inspiration. Also don’t forget to subscribe for more graphic design resources.
General Design
1 Spunk United
An excellent magazine with a selection of the worlds best artists providing inspiration, interviews, articles and more.
2011 Logo Design Trends
Logo Lounge, for the past nine years, has posted annual logo design trend reports and they have just released the 2011 logo design trends report. I would love to hear your thoughts on the showcased trends.
Do these identity / branding trends effect you or your process? Do you agree with these suggestions? Have you noticed any other trends?
- Logo Lounge: 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003
- Disucssion on JCD: 2011 | 2010 | 2009
Disclaimer
On this topic of trends, one should not follow trends for the sake of following them. As Bill Gardner points out:
Every year, it’s worth noting that this is a report on trends, not a recipe book of styles. It is also not a finite list: There are other valid trends out there that are not mentioned here.
The report should serve you as an ongoing view of where logo design is headed. The word “trends†in itself can have a very negative cast, but in truth, trends aren’t bad. They reveal our growth. It’s our take on them that allows us to move even further forward.
2011 Logo Design Trends
Gradients
Innovative Techniques To Simplify Sign-Ups and Log-Ins
There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. But understanding and applying a few innovative techniques could make your forms simpler and more efficient to fill out. In this article, we’d like to present a couple of new ideas that might be useful for your next designs. Please notice that before using these techniques, you should make sure that they make sense in the context in which you are going to use them. We’d love to hear about your case-studies and usability tests that affirm or dismiss the suggestions proposed below.
Simplifying Sign-Ups
The purpose of every sign-up form is for users to complete it successfully and send it in. However, if the form is long and complicated, then the user’s excitement for your website could turn to displeasure. Here are a few innovative techniques that will make your forms faster and easier to fill out.
Ask for a User Name After The User Has Signed Up
Sign-up forms typically ask users to create a name that is unique to the website. However, coming up with a unique user name that’s not taken could take trial and error and, thus, time. Instead of hassling people for a user name when they sign up, you might want to consider asking afterwards. This way, you won’t lose sign-ups from frustrated users, and you’ll prevent users from creating random and forgettable names just to satisfy the form’s requirements.
5 Cool CSS Hover Effects You Can Copy and Paste
Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration.
If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy.
Bring Your Boring Site to Life
Hover effects can make your site feel much more dynamic and alive. It used to be the case that JavaScript was required to do anything really interesting with a hover effect but these days CSS3 is capable of doing a ton of really cool stuff if you’re creating enough.
The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. IE support is spotty at best across various versions so be sure to test thoroughly in your own implementation. Fancy hover effects are one of those things that you can usually degrade fairly gracefully so that older browsers still see some change.