5 Top Sources for Free Stock Photos

Stock photography, when used properly, can be a real visual asset to your site. However, there is a lot of garbage to sift through to get to the good stuff and the process can be down right tedious and expensive. If you have a website or blog, there is a solid chance Professional photographer takes posed photoyou’ve run into the problem of finding quality images at an affordable price.

The major problem with stock houses is that their overly posed, stiff images tend to be severely dated, but yet they still want you to pay a premium for them. That doesn’t always seem like a good deal to me, so when I have time—and a small budget—as a designer, I tend to look at these top five free stock photography sites first.

1. Wikimedia Commons

All of the images on this site are uploaded with Creative Commons licensing, and are owned by the individual users, not Wikimedia. Creative Commons licensing basically means the photographer is graciously letting you use their image for free, but be sure to read the terms, sometimes there are conditions.

2. Compfight

This site is great because it allows you to filter Flickr images though Creative Commons, making the process much easier. The images are all uploaded by real users, and therefore appear much less stocky.

3. Stock.xchng

This is a more traditional stock house, just without stock house pricing.

4. morgueFile –  The word “morgue” is taken from the name of the room from the publishing world in which all clippings and image files were kept. Probably not what most people think of when they hear “morgue.”

5. Wylio

This site was set up with the blogger in mind. They make it easy to search, resize, download and imbed images into your blog all at once. 5 free images per month, with reasonably priced upgrades. You just have to grant access to your Google picasa web album.

Bonus! 6. Unsplash

This is technically a Tumblr page, not a searchable stock site. It’s full of beautiful, artistic, completely free, do whatever you want to them, images created by the people at ooomf. If you subscribe to their page, they’ll send ten new images to your inbox every ten days. And who doesn’t want eye candy sent to their inbox?

Knowing when you can and cannot legally use an image can be challenging, so make sure you read—and follow— the licensing info that accompanies the image. You don’t always have to “get what you paid for,” you just have to know where to look.

What’s your favorite free or low-cost resource for stock imagery?

Summer Intern

The Psychology of Web Response Times

Hi!  I’m David Reich, and I’ve been interning at Matrix Group for the summer. I’ll be writing a post summarizing my experience here before I leave, but I’ve still got a bit more time, so today I’m posting some slightly more technical content. clock close up

One of the most interesting things I did for my internship was research. A few times, I was assigned to study and summarize certain aspects of web development.  This meant I got to learn about both my research topics and, just as usefully, how to write professionally.

Recently, I did some research about design and psychology of response times in application development. Not just web app development, either – the principles that apply to Matrix Group’s products are just as applicable to other types of interaction between humans and systems like games, telephones, or even conversations.

Temporal Cognition: how long is too long?

When interacting with a well-designed piece of software, the user enters into a ‘conversational’ mode with it. Users receive useful responses just as quickly as in a verbal interaction, and feel just powerful as when manipulating physical tools. The application moves at the same speed they do, and never interrupts their thought processes, so they can reach a productive state of ‘flow’.

That’s for a well-designed application. What, then, is the quantitative difference between software that works with the user and software that breaks their concentration? In 1993, Jakob Nielsen described three boundaries that separate the two. George Miller, 25 years before, went into greater detail with a similar conclusion. In the context of user-interface design, that research might seem ancient, but in psychology it isn’t. People today have the same temporal cognition that they did forty years ago. Miller’s research isn’t outdated; it’s categorical.

First Boundary

Nielsen’s first boundary lies at 0.1 seconds.

A tenth of a second: this is time that it should take for a character to appear on the screen after being typed, for a checkbox to become selected, or for a short table to sort itself at the user’s request.  When it takes less than a tenth of a second for the user’s command to be executed, the user feels like they’re in direct control of the software – as direct as flipping a light switch or turning a doorknob.  People won’t even register waiting times of less than 0.1 seconds.  If an application takes half a second to run a JavaScript function, though, users will perceive the computer taking control.

Second Boundary

The second boundary is at 1 second according to Nielsen, but 2 seconds by Miller. In either case, it’s the point at which the user is in danger of losing their productive sense of flow. When the user is forced to wait for less than 2 seconds, they’ll notice a delay, but it probably won’t feel unnecessary or distracting. For delays between 0.1 and 2 seconds, a progress indicator is unnecessary, and might even be distracting.

Third Boundary

Neilsen and Miller also disagree over the time of the third boundary. Nielsen puts it at 10 seconds, and Miller at 15. This third boundary is the point when the user loses focus on the application and shifts their attention to something else. It should be avoided whenever possible. Times in between the second and third boundaries – between 2 and 10 seconds – should have some sort of progress indicator.  A spinning cursor is appropriate for times in the lower end of that range. For times above 10 seconds, assume that the user’s focus on their task has been lost, and that they’ll need to reorient themselves when they return to the application. A progress bar that either estimates the percentage of completed processing or provides some feedback about the current task is vital. Waiting times of longer than 10 seconds should only be used when the user has just completed some task, and the user should be allowed to return at their own convenience.

Key Landmarks

Those three boundaries – 0.1, 1, and 10 seconds – are the key landmarks of responsiveness for web applications. I would attribute Nielsen and Miller’s disagreement over precise numbers to the vagueness and context-dependency of the entire question. Nielsen’s numbers, powers of ten, are prettier and easier to remember, but Miller’s may be more psychologically accurate.

A lot of this sounds very academic and theoretical, but it could be meaningful for success of a web-based business: according to WebPerformanceToday.com, 57% of consumers say that they’re likely to abandon a page if it takes more than three seconds to load.

Sources:

Do you agree with these studies? How long do you wait for a task/web page to complete or load?

James Wood

Programmer

Responsive page development

Here at Matrix Group, most of the design work we’ve been doing is responsive. Being a developer and not a Front End Developer (FED) or designer, I didn’t really have as much exposure to it.

Recently, I had the opportunity to redo a page where I wanted 3 columns on my wide screen monitor, but knowing that other people have smaller laptop monitors, that would mean some very squished data.

So along came responsive to my rescue.

Because I wanted to learn how this worked, I did some research which helped me out. Here’s how to solve this issue:

Add this line in to the head of the page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then in your CSS, assign styles to the appropriate page widths using @media, which acts like an if/else statement.

So for example if your screen size is greater than 768px but less than 1120px you would have the following line
@media only screen and (min-width: 768px) and (max-width: 1120px) {
/*You would put in your styles here*/
}

You can put any style in including only showing certain things like a “close” link so that you can collapse a div.

For a super simple example take the following code and play around with it. I put inline styles so that you can just see the outline of the divs.

Have fun :)

Responsive.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Responsive Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="responsiveStyles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
	<div id="leftContent" style="border: solid 1px #000; height:300px; margin-right:5px;">
		<div id="closeLeftDivLink" style="float:right;">Close</div>
		This is the left content
	</div>

	<div id="middleContent" style="border: solid 1px #c0c0c0; height:200px; margin-right:5px;">
		<div id="closeMiddleDivLink" style="float:right;">Close</div>
		This is the middle content
	</div>

	<div id="rightContent" style="border: solid 1px #cc0000; height:200px; margin-right:5px;">
		This is the right content
	</div>
</div>

<div style="clear:both;">

</body>
</html>

responsiveStyles.css


/* anything larger than 1120 */
#leftContent {
float:left;
width:30%;
}

#middleContent {
width:40%;
float:left;
}

#rightContent {
width:28%;
float:left;
}
#closeLeftDivLink {display:none;}
#closeMiddleDivLink {display:none;}

/* if your widow display width is between 768px and 1120px */
@media only screen and (min-width: 768px) and (max-width: 1120px) {
#leftContent {
float:left;
width:35%;
}

#middleContent {
float:right;
width:62%;
margin-bottom:20px;
}

#rightContent {
float:right;
width:62%;
}
#closeLeftDivLink {display:none;}
#closeMiddleDivLink {display:block;}
}

/* if your widow display width is between 480px and 767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#leftContent {
float:none;
width:auto;
margin-bottom:20px;
}

#middleContent {
float:none;
width:auto;
margin-bottom:20px;
}

#rightContent {
float:none;
width:auto;
}
#closeLeftDivLink {display:block;}
#closeMiddleDivLink {display:block;}
}

/* if your widow display width is less than 479px */
@media only screen and (max-width: 479px) {
#leftContent {
float:none;
width:auto;
}

#middleContent {
float:none;
width:auto;
}

#rightContent {
float:none;
width:auto;
}
#closeLeftDivLink {display:block;}
#closeMiddleDivLink {display:block;}
}
Kelly Browning

Director of Strategy

Big British Breadcrumbs: A New Look at Website Navigation

When content hierarchies get deep and complex, traditional navigation models can turn into a confusing mess.  Some large content websites from the UK are working the problem by adapting breadcrumbs to play a more significant role in navigation. Here are three examples, starting with the most subtle and progressing to the most bold, of British breadcrumb tweaks in action.

The Crumb Stands Alone – GOV.UK

This is by far one of the most subtle tweaks in the lineup but I still felt it was of note.

gov.uk screenshot

  • These big breadcrumbs are the only primary navigation system at gov.uk;
  • Their large size gives them more visual prominence and makes them easier to click;
  • The current page title isn’t included in the breadcrumb trail.  This makes them cleaner and more inviting.

A breadcrumb-only approach has its downsides, as Paul Boag writes in his Smashing Magazine article, Navigation for Mega-Sites. I agree that the biggest weaknesses of is the difficulty of lateral movement through the site.  The next two sites avoid that limitation by including traditional primary navigation menu, as well as prominent breadcrumb navigation.

Crumb Tease – BBC Sport

Next in the lineup, we have BBC Sport, where a single breadcrumb element is given lots of visual punch and helps to provide a sense of place within subsections that aren’t visible in the primary navigation menu.

screenshot bbc sport

  • A single crumb is followed by tabs.
  • This approach is used only when the parent topic is so specific that there wasn’t room for it in the traditional navigation bars.
  • The initial breadcrumb functions as a section label.
  • The breadcrumb-style arrow visual relates the section label to the items that live within the section.

Exploding Breadcrumbs – The Guardian

Now for the most extreme breadcrumb navigation in the trio, The Guardian.

screenshot guardian

  • Breadcrumbs are used as local sub-navigation.
  • The breadcrumbs are color-coded based on parent topics (for instance, red = news).
  • The initial breadcrumb acts as a section label, and subsequent crumbs indicate subsections.
  • Like BBC Sport, the crumbs are followed with additional navigation.  But instead of tabs, the Guardian presents the links in a gray navigation bar.

Bonus part:  Usually there is no left navigation, but when a user reaches “the end” of the breadcrumb path, voila!  A big list of related links appears, inviting more browsing.

Fresh Bread

Web designers across the pond have shown how breadcrumbs can be reconsidered in their relationship to an entire navigation system.  No longer just a trail of tiny, stale links to be ignored unless you’re lost, breadcrumbs can be made fresh and appealing, and perhaps more useful than before.

I’ll be considering new uses for breadcrumbs in my own design efforts, doing usability testing, and adding updates to this post as I learn more.

In the meantime, pass the crumpets!

Have you seen other sites with nifty breadcrumb/navigation treatments? Please share!