Web Design

Digital Food Photography: 30 Images and Tips for Effective Shooting

Posted on May 31, 2013 at 3:56 pm

Food photography, while being a specialized type of still life art form, has already formed its own following. From amateurs taking pictures of what they had for lunch to award-winning photographers celebrating a collection of cultures, food photography has us engaged.

The art of food photography is a precise one as well, requiring understanding of spacing, distance, color, and focus. Today we’ll take a look at tips and tricks to make your food appear to be the best that money can buy.

Food Photography Techniques

1. Equipment

Professional photographers use expensive digital backs on equally expensive cameras, but the barrier for entry isn’t that high. All you’ll need is a DSLR or an advanced point-and-shoot that will let you make adjustments to your shots.

Image Source: Photography Icons via Shutterstock.

The most important characteristic of your camera is the ability to tweak is settings, instead of relying on automatic modes. For DSLRs, interchangeable lenses are a must for taking photographs of different subjects. Tripods are also essential, to keep your shots steady.

Optional tools include lamp stands for external lighting, as well as lens shades to control the light. Don’t forget the accessories to complement your food, like bowls, napkins, silverware, and flowers.

2. Camera Settings

We touched upon this in the last section, but for food photography it’s essential that your camera has the ability to manually change the settings. It’s the only way you can focus on the minute details of the food, and highlight the features that you want to emphasize.

Image Source: Photography Icons via Shutterstock.

Take note of your aperture, which controls how much light will hit your sensor. A low aperture setting will let in more light, generally resulting in brighter photographs. Its partner, shutter speed, controls how long the shutter is open. You usually adjust both these settings in conjunction to compensate for changes in one setting with the other.

The third important setting is ISO, which controls your camera’s sensitivity to light. A higher ISO is used in darker scenes, but will result in a grainier photograph.

3. Composition

Having the right equipment and understanding the camera settings is nothing if you don’t know how to compose your shot. Food photographs are usually crisp and well lit, bringing out the texture of the food. Your goal is to feed your readers through their eyes, making them want to reach out to the photo and nab the food.

Image Source: Photography Icons via Shutterstock.

When composing, remember that the food itself shouldn’t be the only thing in the shot. The bowl or plate that holds the food (or even a napkin or a spoon) frames the subject in such a way that the accessories emphasize its presence. Avoid blank spaces and create a sense of movement in the image—crumbs, flakes, all in a natural position.

4. Lighting

Natural lighting is always recommended for food shots. While your eyes (and brain) can adapt to any sort of light and reconcile what the food is supposed to look like, cameras aren’t at the same level and need all the help they can get.

Image Source: Photography Icons via Shutterstock.

Ample light source is one of the most critical elements of food photography—find your light source and compose around it. Do you use the light shafts streaming through the window or the increased light available coming in the doorway? Lighting brings out the natural color of the food, and this is very important in keeping your subjects appetizing and appealing.

5. Angle

Like in any mode of photography, angle is critical in bringing out the best in your subjects. This is particularly important in food photography, because the shots are so close up. Some foods are best shot from above, like grains and cereal (with bits outside the bowl to create dynamism). Others, meanwhile, are best shot from an angle, such as cakes with layers.

Angle comes after composition—you don’t want to be thinking about the silverware and the napkins when the food is ready to be shot.

6. Focus

Focus changes the primary elements of your shot. You wouldn’t want the fork to be the subject that is highlighted in your picture of a cake, after all.

Image Source: Photography Icons via Shutterstock.

Focus is a result of the different settings and techniques working together, and is also influenced by the camera’s distance to the subject. However, if your camera’s autofocus isn’t cutting it, you can also manually adjust this setting to focus on the subject you want. How deep or short will the depth of field be? Because food photography relies so much on macro, having an understanding of focus is important.

Of course, these tips all lead up to the shot itself. If you want to do more with the photo, you can always edit them after the fact. But if your photo isn’t good in the first place, there won’t be anything to touch up.

Food Photography Inspiration

Here are some amazing examples of food photography for your inspiration:

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

Image Source

How have these techniques helped your food photography? Are there other tips you use in creating that perfect shot of food? Let us know in the comments below!

Comments and Reactions

Posted in Web Design

Weekly Web & Mobile Creativity n.03

Posted on May 31, 2013 at 12:00 pm

Topics]Web & Mobile CreativityAuthor]Speckyboy Editors

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week. And of course, don’t forget to click the ‘Change Viewport’ button to explore each site in detail.

Ola Kvernberg (Responsive)

Ola KvernbergChange Viewport

Erik Ford (Responsive)

Erik FordChange Viewport

Vanderson Arruda (Responsive)

Vanderson ArrudaChange Viewport

Tinybigstudio (Responsive)

TinybigstudioChange Viewport

Luke Bott (Responsive)

Luke BottChange Viewport

Clément Zezuka (Responsive)

Clément ZezukaChange Viewport

Black In History (Responsive)

Black In HistoryChange Viewport

Sun – Simple Weather App (iOS)

Sun – Simple Weather App

WWF Together (iOS App)

WWF Together

Proper Cut (iOS App)

Proper Cut

Ubuntu on Tablets


Ubuntu on Tablets

Swing (iOS App)




This post has been written by the team here at Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook, on Google+, Pinterest, or you can subscribe to our RSS feed.

Comments and Reactions

Posted in Web Design

Weekly Web & Mobile Creativity n.14

Posted on May 29, 2013 at 3:56 pm

Topics]Web & Mobile CreativityAuthor]Speckyboy Editors

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week. And of course, don’t forget to click the ‘Change Viewport’ button to explore each site in detail.


Roynel.co- Web & Mobile Creativity


Posted in Web Design

New Flavors: Design and the Unique

Posted on May 29, 2013 at 12:00 pm

Quick, how many flavors are there in food We’ve all probably heard that there are four: sweet, salty, sour, and bitter. But what would you say if I told you that someone had discovered a fifth basic flavor not too long ago In 1908, Japanese scientist Dr. Kikunae Ikeda did just that, when he managed to isolate the exact component that makes up the flavor of umami, or, as it’s commonly known in the West: savoriness. What is umami Well, um… that’s a tricky question. It’s a totally unique flavor experience, unlike any of the other four basic flavors. Parmesan cheese is loaded with umami, as is Asian fish sauce, aged beef, and perfectly ripened tomatoes.

Image Source

Since umami is so unique and was discovered so recently, most people have a hard time describing exactly what it is. That weird, indescribable uniqueness is what I’m going to talk about today – how to handle it when it comes up in design, and whether or not it’s necessarily a good thing.

Too Unique For Its Own Good

We all think we want to come up with that totally unique idea, one that no other designer has ever thought of before or that no one would be able to easily copy or steal. But is that really what we want as designers Is it even something we should want Most of the time, when people talk about ‘innovation’ in the design industry, what they’re really talking about is improving on an idea that already exists. Don’t get me wrong, that definitely takes skill and creativity. But it usually isn’t a genuinely unique, original idea you’re striving for. It’s mostly a combination of what you’ve already seen before, and what you’re influenced by. Why Because it’s easier to work that way.

If we all attempted to come up with the next design equivalent of umami, our brains would short-circuit and we’d never get any work done. It’s just not practical, nor is it commercial, to strive for true uniqueness and originality. When it happens, as was and continues to be the case with umami, people are at a loss to explain it. It becomes something of a curiosity – a conversation starter at a party, perhaps, or a cautionary tale of woe among other creative professionals. Anyone who’s been in the industry for any length of time has a story or two about one of their peers who tried to get too creative and found themselves out of a job. Yes, perhaps they were “ahead of their time.” That’s perfectly valid, but it does you no good when you’re trying to scrape together this month’s rent money. There’s something to be said about following trends and learning how to reinterpret them.

Making Adjustments

When you stop to think about it, we’ve developed some surprisingly sophisticated methods for adjusting the taste of our food. Our taste buds can detect changes in flavor down to extremely minute quantities. You know, for example, when something is just slightly too salty, too sweet, too sour, or too bitter. And conversely, you know when something doesn’t quite have enough of any of these flavors. But how do you tell when something is “too umami,” or not “umami enough” There are a range of opinions ranging from the mundane (“when you find yourself reaching for the salt shaker”) to the weird (“when your appetite becomes ‘fatigued’” – huh). The truth is, since umami is such a newly discovered flavor, we haven’t really come to a consensus on how to tell when it’s too prominent or too lacking in our food.

Image Source: Big Idea via Shutterstock

Completely original designs are the same way. Sometimes we can’t tell when something is too original and when it needs to be more relatable, precisely because it’s so original. Many designers love to rave about their completely obscure discoveries, myself included. In addition to design, I also studied fine art painting in school. I have plenty of abstract personal projects that I absolutely love, but that are completely unmarketable to anyone except other weirdos like me. Since there aren’t too many of us out there, I’d have a hard time making ends meet by producing projects like that. But sometimes we just don’t have the perspective to know if something is appropriate for our target market. In that case, I always find it helpful to call in other people from that market.

Sneaking It In

So, does this mean you should throw in the towel on ever being unique or original Absolutely not. There are ways you as a designer can “sneak in” some truly creative, original elements into your designs that won’t detract from their marketability, and that won’t leave people feeling like they’re simply getting a rehash of something they’ve already seen before. This is the ideal you want to strive for as a designer – that perfect balance between what’s new and what’s familiar to your users.

There’s a common trick used in the culinary world by chefs who like to experiment with umami. Asian fish sauce is typically considered to be the ultimate umami flavor. On its own, it can be rather unpleasant, but when used in small amounts in other dishes, Asian or not, it can add a special burst of umami that diners won’t be able to quite put their finger on, but that they’ll definitely recognize when they taste it. When you design something that’s an alternate take on a previous idea, and you sneak in your special “fish sauce” of pure originality, you create something that’s completely relatable and marketable to your target audience, but that also has that strange, wonderful element that people won’t be able to describe, but that they’ll definitely love.


Just as umami is not an earth-shattering element in the culinary world, complete and total originality isn’t the ultimate holy grail we should be reaching for as designers. It’s an important element, which can add a lot to the attempt to balance the different “flavors” of marketability, quality, and relevance which are the backbone of design.

What Do You Think

Do you have an opinion on uniqueness in the design world How unique do you think is too unique Have you developed a way to balance your originality with the need to create something marketable

You might also like…

The Remote Designer – Jumping into the Cloud

Posted in Web Design

Handling Ethical Disagreements With Clients

Posted on May 27, 2013 at 3:56 pm

Sometimes, you may get a client who wants you to do something that you’re just not comfortable with. We all want to please our clients, but how do you please a client who, say, really wants you to directly copy another company’s logo design or sales copy? Or who wants you to do something malicious to a competitor’s online reputation, Google ranking, et cetera?

Image Source: Shoulder Devil and Angel via Shutterstock

It doesn’t matter what the unethical thing is or your reason for not wanting to do it – it’s always a pain to deal with and handle in a professional and courteous manner. Luckily, there is a reliable process many freelancers can use to stop these types of clients from getting out of control, and often prevent ethical issues from coming up in the first place.

Opting Out

First, it’s important to remember that the best option in situations like these is to simply have more options and avoid these types of projects altogether. Clients who are shady are almost always more trouble than they’re worth, and if the unethical activity can be traced back to you in any way, you’ll find yourself with more trouble on your hands than you ever wanted.

Image Source: Modern David vs Goliath via Shutterstock

If you have other potential clients you can work with, you can simply fire these bad apples and send them (politely) on their way things start to get moldy. But how do you determine who’s on the level before you take on a project?

Spotting The Red Flags

Many times, you can use your natural intuition to determine whether or not a client will present ethical dilemmas before you begin working with them. It can be as simple as a “vibe” – just a weird feeling you get when talking to them, or the dodgy way in which they answer your questions. I’ve turned down work from clients before who just had an oddness about them that I couldn’t explain. I didn’t know why they made me uncomfortable; simply that they did and I wanted nothing to do with their project. In more than one case, I found out later that they were, in fact, up to no good. Freelancer: 1, disaster: 0.

Image Source: Hacker via Shutterstock

Other times, it can be the type of work a client asks you to do that sets off the alarm bells. Reputation management, radical brand redesigns, or conflict de-escalation with third parties like angry customers or threatening competitors, while not unethical by themselves, can be signs that your client might want to handle these problems in ways that aren’t entirely above board.

Use your judgement and listen to your gut when deciding which projects to take on. It might seem silly to turn away a client just from a feeling, but it can save you potentially years of headaches and legal problems. Plus, word to the wise: it’s often these kinds of clients who provide the biggest issues when it comes to payment as well.

Remember You’re The Expert

Sometimes, a request for something unethical can truly come out of nowhere. Everything is going fine, then suddenly your client springs a rotten request on you that you’re not sure how to handle. In these situations, it’s likely that your client is less likely to be a crook, and more likely to simply be misguided on the direction they should be taking with the project. They see what’s working for their competitors, and they decide it’s not worth tampering with what’s clearly a winning formula. In other words, they have the right general idea, but need some help executing it in an original way.

Image Source: Wearing Lab Coat via Shutterstock

It’s important to remind these types of clients – and yourself – that you were hired to apply your professional expertise to solve their business problems. Don’t be afraid to challenge your client’s assumptions as to what will be truly effective and why. Point them to results you’ve achieved in the past that will show them that there are many ways to approach the dilemma that won’t violate anyone else’s intellectual property rights. Don’t just send them a new round of comps or revisions – take the time to explain what works, what doesn’t, and what will help them avoid a lawsuit.

Saying ‘I Told You So’

Ah, yes. Gloating. It’s not just for schoolchildren anymore. If you’ve done everything you can to convince a client to do the right thing, and they still refuse to see reason, it’s essential to be able to release yourself from liability if and when something goes horribly wrong. Here’s where having a record of all communication comes in handy. Even if most of your exchange with the client happens in person and over the phone, always make transcribed copies of your recommendations, requests, and warnings, and ask the client to sign off or verify them via email.

Image Source: Breaking Free via Shutterstock

Keep records of all the advice you provide and send a copy to your client, even if they end up completely ignoring you. That way, when their idea fails miserably, you can whip out your notes and show them that you warned them. Besides being satisfying to get a little revenge on a stubborn client, it makes it impossible for the client to hold you responsible for their poor behavior. Hopefully, this will convince them that it’s always better to do things the right way rather than treading on someone else’s rights, but if not, at least you can walk away with a clean conscience and warn other freelancers you know to avoid that client at all costs.

What Do You Think?

Have you ever dealt with an unethical request from a client? What strategies worked for you when dealing with the outcome? Comment and let us know!

You might also like…

Comments and Reactions

Posted in Web Design

User Experience Trends for Admin Dashboards

Posted on May 25, 2013 at 3:56 pm

The design techniques for administration panels are not as openly shared as website layouts. This is because you do not always find examples of admin designs open on the web. To gain access you would need a user/password combo, so designers are often left building with trends found in other examples. But the dashboard interface has grown very quickly as a popular layout style for administrators.

In this article I want to look into various styles and ideas for creating administration dashboard pages. These are typical website layouts built using HTML5/CSS3/JS. Except users will not ever see these designs because the admin CP is only needed for website settings, templates, or updating posts/pages. But there are still lots of exceptional designs for admin dashboards and I hope to showcase a number of trends in this article.

Tabbed Navigation

Utilizing tab buttons for page navigation has been a common trend for years. The reason it works so well in dashboard pages is because you often need to organize a lot of similar tools under the same umbrella. Using both horizontal and vertical tab menus can offer related sub-menu positions for including tons of links.

top dashboard tab navigation ui interface design

Any form of tabbed link design can work for a navbar. You do not need to handle the typical rounded corners and button interface design. More often it helps to make very simple tabs which behave as links, also using background images for icon artwork. This helps users to determine which links go to which section of the administration panel. Tabbed designs also offer a very flashy interface, using big text and bold letters will help the links stand out among other text.

top grey tabs user interface design tabbed icons

I can’t make the claim that every control panel navigation should be using tabs. If we look at WordPress’ dashboard it certainly looks more like blocks of list items compared to a tabbed navbar. And WordPress is an extremely popular CMS which goes to show any navigation can work. A good strategy is to plan out a sitemap of links and then follow those ideas to a core group of link items.

Toolbar Icons

I had briefly mentioned icons earlier but I think this design trend is important even outside of navigation. Icons are a picture symbolising the content of a link or some page information. Text requires more time for the brain to read and process what it all means, but pictures are clear and concise. I think icons should be included as interface elements on buttons, tables, headers, input fields, and really any potentially confusing areas on the page.

dashboard dark ui interface designs website admin panel

Modern designers have a much easier time building these interfaces because of the many freebie icon releases to be found online. There are so many collections built using various themes, techniques, and design styles, that you should have no problem locating a set for your admin interface. You can determine good icon placements by scanning the page for content which seems overbearing and might benefit from visual graphics.

Popover Hover Menus

There will not always be enough space on the page to include all the inputs and details you need. Sometimes a good way of handling this problem is to initially hide some features, and then display them later using a popup menu. This could be triggered on hover or by clicking a button/link on the page.

caldenar admin date popover menu jquery

You may also include popover menus for hidden input fields related to some data on the page. Administrators are often busy editing pages or adding new content into the website. This requires a lot of work and patience to put everything together. Obviously a popup block may contain a lot of data – even including modal windows using a lightbox or shadowbox effect.

mango dashboard responsive website template theme

I really like the example above labeled Mango Admin. You can hover the messages link block and it’ll display some of the messages within the inbox. This trend could be expanded for new posts, drafts, user comments, and tons of other queue systems. Any typical CMS generally requires some content management to keep everything running smoothly. By reorganizing some of this content to appear hidden on the page, it can alleviate room for a more relaxed interface.

Content Display Styles

All the various administration panels do share one thing in common – their purpose is to display information. We may also use the word “content” which can include tables, lists, buttons, graphs, really anything. The entire layout is generally focused to encapsulate this content where is it easy to read and easy to edit.

admin dashboard website layout graphics charts data

I like the small icons you can see in the table which would appear to be quick access buttons. You may quickly add, edit, or delete content from within a row of the table. And the icons are colored so you will be able to tell from a distance what they do. Of course, this is just one simple example but trends like these are hard to find. Always keep thinking of new ideas or techniques which would make your administration powers easier and simplified.

charts shopgate admin dashboard icon dribbble shit layout

It is notable that not all administration interfaces will have graphs and charts and statistics. Sometimes you will just be dealing with straight information. And even though this may seem boring, you have to think about how you will be interacting with all this data. Then you will be looking at the challenge from a user’s perception. No matter how many ideas you try out they are all worth it, because nobody has the perfect design UI and there are always new trends on the horizon.

Showcase Gallery

All of the trends listed in this article provide a nice starting point for designers. But I think you can learn a lot by studying other common examples for admin dashboards. I have put together a small collection of screenshot pages from Dribbble shots. I hope you will notice some of the trends I have listed, plus some fresh ideas to use in your own designs. And if you have questions or resources in relation to admin dashboards feel free to share with us in the discussion area.

Device Dashboard

mobile ipad device admin dashboard photo

Admin Tools

dashboard icons photo user profile designs

Admin Charts

red toolbar title webpage admin charts information

Wood Control Panel

top grey tabs user interface design tabbed icons0

Responsive Dashboard

top grey tabs user interface design tabbed icons1

Datatable Content

top grey tabs user interface design tabbed icons2

Ultramarine Admin

top grey tabs user interface design tabbed icons3

Flyout Menu

top grey tabs user interface design tabbed icons4

Administration Panel

top grey tabs user interface design tabbed icons5

Minimalist Admin

top grey tabs user interface design tabbed icons6

Dashboard Charts

top grey tabs user interface design tabbed icons7

Sidebar Navigation

top grey tabs user interface design tabbed icons8

Dashboard Link Icons

top grey tabs user interface design tabbed icons9

Dark Admin Tabs

dashboard dark ui interface designs website admin panel0

Dashboard Management

dashboard dark ui interface designs website admin panel1

Flat Admin Design

dashboard dark ui interface designs website admin panel2

A New Project

dashboard dark ui interface designs website admin panel3

Data Tables Admin

dashboard dark ui interface designs website admin panel4

Admin Panel Layout

dashboard dark ui interface designs website admin panel5

Dashboard UI

dashboard dark ui interface designs website admin panel6

Contacts Listing

dashboard dark ui interface designs website admin panel7

A Web Service

dashboard dark ui interface designs website admin panel8

Analytics Dashboard

dashboard dark ui interface designs website admin panel9

Colorful Admin Dashboard

caldenar admin date popover menu jquery0

Analytics Traffic Charts

caldenar admin date popover menu jquery1

MyPage Dashboard

caldenar admin date popover menu jquery2

You might also like…

Our 50 Favorite Web Designs from 2012

Posted in Web Design

What Marketing Can Teach Us about UX

Posted on May 25, 2013 at 12:00 pm

The key to successful marketing is advertising a solution, and selling the tool that provides it. Put another way, by looking at the jobs people are trying to accomplish, marketers can better interact with their prospects. Now imagine we think about UX in the same way: the key to a successful product is creating a solution (a better way to make a hole), and not just a tool (the drill).

“People don’t want to buy a quarter-inch drill. They want a quarter-inch hole!” – Theodore Levitt, Harvard Business School.

What Does Marketing Have to Do With Anything

Sales and marketing teams often spend more in-person time with customers than the engineers or product developers do. As a result, the best information about what the user needs may be coming from the people who know those users best: the marketers.

Clayton Christensen, a Harvard Business School professor and author of many books on business and marketing, has studied many successful businesses, and the solutions that made their marketing successful. He theorizes that Theodore Levitt was right: people want to buy a solution.

Fedex and their “jobs-to-be-done” philosophy

Imagine how hard it was starting FedEx. The US Postal Service was the main competitor, millions of dollars of startup capital were required and, as with any new business, there was a pretty big risk that it would fail. Imagine yourself in this situation, starting a new company like FedEx with these huge risks. How would you discover what your customers really wanted

Start by looking at things from the ‘jobs-to-be-done’ perspective. What are people who use postal service trying to get done

One thing only: Get their package from one place to another as quickly as possible. The traditional mail service in 1973 was highly unreliable and many packages were lost or damaged in transit. The founder of FedEx provided customers with a solution: FedEx focused on getting a package from one place to another in days, instead of weeks or months.

This illustrates an essential point. What customers do is more important than who they are. Regardless of age, social status, or gender, when you buy a drill, what you want is a hole, and marketers know this.

What does this mean for UX

Selling a solution works well in marketing, but user experience designers aren’t marketers or salespeople. We don’t want to sell a solution – we want to build solutions.

Eric Schmidt, the CEO of Google describes Google as more than just a tool. In his 2011 speech at D: All Things Digital, he says, “we’re trying to move from answers that are link-based to answers that are algorithmically based, where we can actually compute the right answer.”

A search engine is a tool that responds with links. Google is a solution – a way to provide people with answers. Back in 1999, the best way to do this was providing links to relevant sources, and Google did so. Now, as algorithms make it possible to provide answers directly, Google is moving toward that.

Try typing “London temperature” directly in Google. Before the search results, you’ll see a box where you’re shown the most recent temperature for the city and the temperature predictions for future dates.

Or type “Berlin flights.” Before any results show up, you are shown a summary of flights to Berlin. Better yet, if you turn on location, you’ll be shown flights from your location to that specific city.

In other words, you are being provided a direct answer to what you’re looking for. Google’s ultimate goal is to give you answers to even more complex queries, for example, “the best way to lose weight”. One thing they could possibly do is to intelligently compile the most popular advice on losing weight, compare that against scientific research on what works and display the summary at the top.

How is it that Google understands exactly what visitors are trying to get done, and provide such a successful product to solve visitor’s needs It all comes down to user research.

Start with User Research

Earlier, I said that what customers do is more important than who they are. Ask yourself a few questions to see if it’s true in your case:

  1. Do you identify more according to your ancestry, or your occupation
  2. How do you introduce yourself to others
  3. Are you more likely to ask someone about their activities, or their looks

User research is about how users spend their time, what they care about, and what actions they take. By learning about your prospective customers before beginning any product development, you can create a truly successful product.

Observe what your visitors already do

Use tools like CrazyEgg and ClickTale to get a good understanding of how people interact with your site or application. These are so-called “behavioral tools” which allow you to observe the actual way your users behave.

One particular feature that distinguishes them from Google Analytics is the visual overview they provide. For example, Google Analytics has a very primitive heatmap tool while ClickTale can go as deep as recording each individual visitor actions and mouse move heatmaps and Crazy Egg has a confetti report. I’m guessing that the reason why Google doesn’t still have such features is the processing power they take, their severs would probably collapse if they have given you an option to record each individual user session!

There are many successful stories of companies that used those tools, and one common theme in the testimonials is the unexpected results they’ve got which helped them make a better re-design of their overall sites/landing/sign-up pages and so on.

Before using these tools, write down your own predictions. How do you believe users interact with your site or application

I cannot emphasize enough how important this is because of the handsight bias which is basically looking at past events and interpreting them as being predictable. Every time you tell yourself “I knew it all along” after an event occurs, you’re probably a “victim” of this bias. Here are some examples:

  • After some unexpected event occurs (like the 9/11 attacks or the 1986 space shuttle disaster), there were many people that cited Nostradamus and some verse as a “proof” he predicted it was bound to happen.
  • The “analysis” part on news networks after some event occurs. When the Madoff ponzi scheme was busted, you saw all sorts of experts saying “if only this and this was in place, this would not happen”.
  • In one study, several students were asked if a particular person nominated for the Supreme court would be confirmed. 58% said yes. After he was confirmed, the same students were again asked if they thought he would be confirmed. This time, 78% said yes.

That’s why it’s important to try and write your predictions first to stop this bias from occurring and realize the unexpected interactions of your users with whatever it is you’re testing. Stop the “I knew it all along” thought before it’s too late.

Ask users what are they trying to do after you observe them

You can do this after observing what they do using various tools. Specifically, ask them what they are trying to get done by clicking on x and then on y and then on z. There are many usability testing and survey tools to accomplish this, but after all, they’re just tools. What you’re trying to get done here is ask the right questions and come up with answers that will improve your prospects understanding.

It’s simple: First observe what they do and then try to find why they do what they’re doing by asking questions. What were you trying to accomplish while clicking on x and then on y Why did you click y after clicking on z etc.

To give you a good idea about how to get started with this, I recommend you first:

a) Install behavior analysis tool(s) (Clicktale, CrazyEgg and KISSMetircs are all good for a start) and run it for at least 7 days and make predictions how they’re going to behave before you start running the heatmap tools, as mentioned above.

b) Get at least 10 users and ask them what they are trying to get done with your tool

If your prospects are close to you, you might consider making in-live interviews. If your prospects are all around the world, then get their contact info and conduct an online survey. I recommend you talk to them directly and not just sending them a generic survey via email.

c) After the heatmap study, see any unexpected occurrences and ask your users what they were trying to get done by clicking on y and then on z.

It’s simple to get started

User testing provides UX designers with the information they need to create successful products. Just as marketing teams learn from speaking with users, so can we. And in doing so, you can come away with new insights and lessons that will help you create the perfect solution.

You might also like…

Comments and Reactions

Posted in Web Design

Dealing With Overly Opinionated Clients

Posted on May 23, 2013 at 3:56 pm

Do you know what a shoemaker is? Well… it’s a person who makes shoes. But it also has another meaning. In the culinary world, a shoemaker is a hack – someone who is typically ill-informed and incompetent, and who uses shortcuts to get around their lack of skill. The term comes from the oddity of having a person who makes shoes running around in a kitchen. To be fair to shoemakers, I’m pretty sure most cooks (or designers, for that matter) would be completely lost as to what to do in a shoe factory.

Of course, the equivalent of a shoemaker in the design world is the overly-opinionated client, who insists on bringing in a team of non-designers to muck up your smooth workflow. Better known as design-by-committee, it’s something that has been discussed and re-discussed by designers probably since the dawn of time. Or least since the dawn of design.

Believe it or not, there is a way to nip most design by committee in the bud, and we’re going to explore how you as the designer can tap into this rarely used power and use it to your advantage when working with clients.

Authority Vs. Hierarchy

Designers hate design-by-committee because it undermines the years of dedication they put into perfecting their craft. You’ve heard the expression ‘too many cooks in the kitchen,’ and plenty of people outside the culinary industry use the analogy on a daily basis. Non-designers butting their heads in where they don’t belong and all but ruining any creative effort with their ill-informed decision making is enough to make any designer want to quit and go work in sales.

Non-creative people tend to see design as something subjective, much like art. However, design and art are very different. Whereas art is created mainly to please the artist, design has to please the people who use it. Seth Godin has said that design should be a “dictatorship” rather than a consensus. If there isn’t one single person making the important decisions as to a design’s direction, you’ll most likely end up with a mess. It’s very rare to find the design team that has completely done away with hierarchy and is still capable of producing a clear, solid vision.

Building The Boundaries

Every designer in the world would leap at the chance to solve the design-by-committee problem once and for all. The constant changing of minds and cropping up of doubts is often the death of any real vision or creativity in a design project.

I hate to break it to you, but design-by-committee is never going to go away completely. As long as designs have to pass through a funnel of more than one person, you will always have design ‘shoemakers’ in your kitchen, telling you what they think is best. What can change, however, is whether or not you let them completely take over your job as the designer.

Most of the time, clients get too involved in the work they hired you to do because you didn’t set clear enough boundaries in the beginning. The solution involves bringing the client back to a familiar pain point: money.

Show Them The Money

Why are your ideas automatically superior to your client’s? Well, they hired you for a reason; you’re the professional designer, after all. By taking the opportunity to gently remind your client what it is that you’re there for, you not only gain more respect, you also help them realize that they’re paying you for a service they’re not allowing you to perform.

By reminding the client how much money they’re wasting by forcing you to contend with their bad ideas, you can turn any client from an overbearing burden to a respectful and efficient employer in no time. No client likes to see how their own actions are costing them money, so this is something all designers should be constantly using to their advantage in order to maintain control of the projects they were hired to do in the first place.

Of course, you shouldn’t be trying to manipulate anyone, but then again, neither should you be okay with being pushed around like a puppet on stage either. You aren’t a dancing monkey – you’re a professional service provider who (hopefully) commands a professional rate. Remind the shoemakers that time – yours and theirs – is money, so that they can go back to making shoes (or whatever they actually do), and you can get on with making design magic happen.

When In Doubt, Ask

Don’t be afraid to ask questions and find out exactly why your client is going against your better judgement. As a part of the problem-solving team, you have a right to know, and your client has a vested interest in making sure you’re contributing to the process (they are paying you, after all). Remember that if things go wrong because of a bad design decision, the blame will fall to you, not the client or the committee. It’s important to get as much of your client communication in writing as possible. Why? Because when things predictably go wrong and your client wants to scream at you, you’ll have hard proof that you tried to warn them.

Sometimes, however, the client has a legitimate reason for making changes that seem insane – this is where knowing your client’s market and understanding the needs of their customers comes in handy. If you make an arbitrary design choice that actually contradicts your client’s customer data, they have every right to question you on it.


It’s important to pick your battles and know when it’s not worth it to fight with a client. But it’s equally important to remember your place as the designer. If you trust your decisions and stand by them, your clients will too.

What Do You Think?

Got any design-by-committee horror stories to share? Of course you do! Let us know in the comments how you handle this common problem that every freelancer has.

You might also like…

Comments and Reactions

Posted in Web Design

Getting Smarter: How Changing Your Mindset Can Help Your Web Design Goals

Posted on May 21, 2013 at 3:56 pm

Topics]DesignAuthor]Darren G

Imagine you had a child who just finished learning addition and subtraction. You gave him a math task at home to test his skills and he solved the task successfully! “Wow, you must be really smart”, is what you would probably say to him.

Congratulations, you’ve just made the first “mindset” mistake. But wait, what’s wrong about praising a child? Nothing, really. The thing most people get wrong is not the praising, but the way they’re praising him.

Image Source: Forefinger with the Thumb via Shutterstock.

Fixed vs. Growth Mindset

Carol Dweck, a psychologist at Stanford University, coined the term “growth mindset”. I think the concept is best illustrated with the following example:

  • Fixed mindset – Telling to your child “Wow, you must be really smart” after they’ve solved the math task successfully.
  • Growth mindset – Instead of telling them they’re smart, you tell them “Wow, you must have worked hard at this“.

Can you notice the subtle difference? In the first example, you are praising the child’s abilities, while in the second, you’re appreciating their hard work. Here’s the problem with the fixed mindset: Now that you’ve given your child an identity that he’s smart, the next time he’ll struggle with a concept to solve a task, what would they think? I must be dumb.

Whether with the growth mindset (“You must have worked hard”), what the child would probably think is “I’m not working hard enough on this”. And this is what you want them to actually think! To work harder! This isn’t just a motivational mumbo-jumbo, there’s actual research to support the notion that as you work harder on a problem, the brain actually adapts to it (various brain areas become more active depending on the type of skill you’re learning, read about brain plasticity for a more technical explanation). The brain is like a muscle

Students who were taught the growth mindset got far better grades afterward compared to students with a fixed mindset. My goal in this article is to teach you how the growth mindset applies to web design and help you accelerate your career success by learning new skills more rapidly.

The Fixed Mindset in Web Design

Learning web design may seem easy at first, but as you get to more advanced topics things can get pretty hard. You may not understand some things at first and need to struggle for a few days to grasp them. Eventually, that’ll happen, you’ll understand the concept. It’s the ‘struggling’ days that will really uncover whether you have a fixed or a growth mindset.

Can you identify with the child who was told ‘you’re smart’ every time he completed something? Tell me, if someone told you’re smart every time you complete a task, what does it mean when you won’t be able to complete it? Well, it means you’re dumb. Complete it = smart, not complete it = dumb.

In reality, you’re not dumb. You’ve just been conditioned to think this way.

The Growth Mindset to the Rescue!

Now, imagine you’re trying to learn a difficult web design concept but this time you’re the child who was praised for working hard if they completed something successfully. You got the growth mindset instilling in you.

Let’s follow the same logic as above; if you were praised for working hard after doing something successfully, then if you fail to do something, it must be because…

You were not working that hard?

Can you see the profound difference this mindset can have on your overall web design career?

In case you still think there’s any evidence to support the fixed mindset, then you’re up against a myriad of evidence for brain plasticity. As we learn, certain parts of our brain become more active, depending on the task. If you’re learning a design concept that has to do with analyzing things, then the part of your brain responsible for those types of tasks will become more active, thus helping you learn subsequent things that have to do with analysis faster.

My Personal Example of Learning Web Design

At that time I had never touched a programming language before. I was told that JavaScript would be a good way to get started in front-end programming and a useful skill for web design. So I said: Let’s go for it! But deep inside me, I was afraid…really afraid of not making it.

I admit it…I’ve been conditioned to have a fixed mindset, and I couldn’t see many people around me who didn’t have this mindset. If you gave me a difficult task or told me to solve a difficult concept, if I was struggling with it for more than 2 days, I’d give up on it and go to the “lower level” details where I felt comfortable.

Image Source: Rocket-Head Man via Shutterstock.

It was a vicious cycle, learning the same things over and over again, not for the sake of learning, but for the sake of feeling comfortable while doing that. Eventually I gave up because I got bored.

Can you identify yourself with this? Have you ever had a time where you wanted to learn something new, got to a certain level, but eventually gave up and told yourself the rationalization “Hey, since I cannot quite grasp this immediately, it’s probably because I didn’t learn the previous concepts good enough”. But some part of your brain was screaming “You’re fooling yourself, you crave the emotion of feeling comfortable and that’s why you’re doing this”.

I was personally struggling with this vicious cycle for years. And it wasn’t until I’ve learned about the fixed vs. growth mindset theory where I actually became aware of what I was doing.

Boy, did it make a difference. Now, when I encounter a difficult concept, I always try to persist learning it for at least 10 days until re-evaluate what to do next. One thing that often happens after getting to the 5th day of learning, for example, is that I suddenly ‘get it’ and often surprise myself of how I got something I thought was impossible to learn few days ago.

Fixing the Fixed Mindset

Mindsets are simply beliefs are about something, and beliefs can be changed. Instilling the growth mindset into your mind can have many positive effects over the long run.

The crucial thing to do here is to talk back when your growth mindset ‘appears’. So when you’re thinking (often automatically): “I can’t do this, I’m not smart enough”, now is the time for the growth-mindset thoughts to come into play. Counter that with “I’m not working hard enough, I can do this with enough work”.

Some other examples: “Why can’t I do this? I probably don’t have the talent?” Counter that with: “Maybe I need more time and effort to achieve this, I’ll give myself 5 more days and work hard and see if I get it.”

Dedicate a week for recognizing your fixed mindset thoughts. Try to catch yourself when you talk to yourself in that manner. Thoughts connected with not trying something, being a failure, or having to do with people laughing at you for trying something.

The reality is that most people mind their own business. What’s the last time you thought long and hard about someone else’s problems? Well, same case with other people!

Remember, the brain is like a muscle, and muscles can grow.

Looking forward to your comments on how you plan overcoming the fixed mindset in some areas of your life.

Posted in Web Design

Protecting Your Content from Theft

Posted on May 21, 2013 at 12:00 pm

If there is a war that is as hard to win as the wars on drugs and terrorism, it must be the war against content theft. Content theft is so widespread that calling it an epidemic isn’t an exaggeration. Unfortunately, there aren’t many ways to protect your content against theft in one form or another, but if you just sit and do nothing when theft occurs, this only encourages thieves. While the methods of protecting your content are far from perfect, you still need to apply them – simply to make it that little harder for thieves to steal from you.

Fair Use and Protection of Ideas

First, without going into legalese definitions, let me say briefly that not everything that looks like content theft is. For instance, the so called ‘fair use‘ allows you to freely use portions of work for commentary and criticism. With parody you can legally go even further in ‘borrowing’ and creatively twisting ideas from other authors.

Image Source: Criminal Thief Activity via Shutterstock

Another case that is not classified as content theft is when you present an idea, not a finished piece of work. Ideas can’t be copyrighted, though some manufacturers gladly file suits against competitors for, let’s say ’rounded rectangles used for displays in smaller devices’, as if they were the ones to discover the rounded rectangle as a shape. So, if you write on your blog about what designs, videos, ebooks, or other stuff you plan to release and see that somebody else releases the same titles, this is cannot be theft. If you had designs, videos, ebooks, etc. to a completed project and find that somebody uses parts or whole items of them elsewhere, now this is theft.

Put Notices that Your Content Is Copyrighted

In addition to fair use and ideas in a non-physical form that can be used and this isn’t theft, there is one more case where users might be confused if a particular item is copyrighted or not. With so many quality in the public domain, it’s possible to get misled that everything you find online and offline is free to use.

Anybody who knows at least a bit about intellectual property (IP) will presume that if an item is not explicitly listed as belonging to the public domain then it isn’t. But in order to avoid even the slightest confusion about your content, always put notices that it is copyrighted. These notices won’t stop real thieves, but if you don’t have any copyrighted notices, even unintentional thieves might get encouraged.

Image Source: Criminal Thief Activity via Shutterstock

Protect Your Content by Making It Harder to Get and/or Reuse

If you make it harder for thieves to get a hold of your content/work, this will stop at least those of them that are after the low hanging fruit. Measures, such as watermarks, disabled ‘Save As’ and copying, or using low resolution images can provide some protection. But to be honest, their effect is far from comprehensive. Still, they will make it a bit harder to get your content in a split second and reuse it right away. Unfortunately, these are the best options we have at our disposal, if we are to protect our assets.


For images and videos, watermarks are the most serious way to make it harder to reuse a stolen image. While a watermark is not stopping thieves from obtaining your work, when your URL/logo is splattered across the image/video, you are at least getting some exposure. Sure, this doesn’t compensate for the theft but some free publicity is better than nothing.

Watermarks are easy to create. You can make a separate image file with your URL or company name and add it as a layer to your images or videos.

Watermarks might be the most reliable of all the methods for protecting your images/videos but unfortunately it’s not rocket science to remove them, if you really want to. Some watermarks are simple to clean, while others might require a little bit more work. If a thief is determined, they will succeed. This is why, when you design your watermark, think how to make it harder to clean – this will provide more protection.

Good watermarks have to be unobtrusive but they also have to cover the important aspects of the image/video. If these two conditions are met, you can rest assured that you’ve done your best to protect your images/videos without irritating viewers.

Disable Save As and Copying

The next best protection you can use for articles and images/videos, is to disable ‘Save As’ and ‘Copy’ from the context menu of a browser. Usually you do this by deploying some script to disable the right click. Disabled ‘Save As/Copy’ works if your thieves are not technically savvy because if they are, there are ways to bypass this protection.

For instance, if a thief uses a not so popular browser, the script might not work and the protection will be broken. Even if this doesn’t happen, if somebody is desperate to get your article, for example, he or she can easily make a screenshot and type it from there.

Of course, this is a lot of effort for a thief and this is why I’m saying this measure will chase away only the thieves who are after the quick thefts, or the low hanging fruit. Still, if you manage to eliminate the quick thefts at least this is more or less a success.

Image Source: Criminal Thief Activity via Shutterstock

Submit Low Resolution Images

If you sell high-resolution photos and designs, you might want to show publicly only their low resolution versions. You can use this strategy to protect offline content as well.

For instance, a friend of mine got burned once when she submitted some designs to a competition (or when applying for a job – I don’t remember exactly), only to see them reused by some unscrupulous company. Since then, she submits only low resolution stuff – this is good enough to show her abilities and isn’t easy to reuse for quality projects.

For photos, 72 dpi, 600

Posted in Web Design

Next Page »