There’s no doubt about it: finding good stock photography can be tough. And when it isn’t tough, it’s expensive. When I scroll through images on the popular stock house websites looking for images for our blog posts or newsletters and see how much they’re charging for their stuffy, posed, man-in-suit photos I am always aghast. And annoyed. Very, very annoyed.
Thankfully, I’ve come across a few great stock photography websites recently that are completely free. While we still use many of the resources that Andi shared a few years back, the sites below have become my new go-tos. Most, if not all, of these sites are full of royalty and attribution-free photography, meaning you can use, copy, modify, and distribute these photos without the permission of, or reference to, the photographer. Yes, even for commercial use!
Pexels – Built to help designers, bloggers, and just about everyone else find high-quality, free images, Pexels is one of our absolute favorites. They recently launched a free stock video collection as well.
Unsplash – Started as a Tumblr blog where a photographer shared 10 photographs that were leftover from a photo shoot, Unsplash has grown to a collection of over 300,000 photos contributed from over 50,000 photographers. They are all simply stunning (and all free)!
Burst– Powered by Shopify, this free stock site was built to “empower designers, developers, bloggers and entrepreneurs to create stunning websites and marketing campaigns.” There are thousands of stunning stock photos, ripe for the choosing!
Pic Jumbo – When the large stock houses turned down freelance photographer Viktor Hanacek’s photos, he decided to use his coding skills to start his own free stock website. Almost all of the images were shot by him, and while he always welcomes attribution, it’s not required. The only thing you can’t do is redistribute the photos, but if you’d like to, there’s a paid plan available for that purpose.
Foodiesfeed – While this stock site may only be of interest to a limited audience, there are lots of high-res and drool-worthy free food photos on this site.
Remember that over time licensing agreements on these sites may change, so be sure to always, always read the fine print and abide by the rules!
Have you found any other great royalty-free stock photography websites? Please share!
What should we know about autistic users, and how can we design websites and apps to give them the best user experience? Here are the considerations and solutions that Cohen shared:
Contextual misunderstanding: Whether presented in words or in imagery, idioms and metaphors can be confusing to some people with autism.
Use more intuitive, less symbolic icons. Include descriptive text, which helps improve SEO, too.
When you’re writing for your website, keep the language simple. This might include shorter sentences or a conversational tone.
Visual processing: When looking at a lot of information all on one screen, some with autism become confused or distracted. So they simply focus on one specific item and ignore the rest of the page.
More white space, more visuals. Too much stuff crammed onto a screen distracts users and can add unnecessary steps to an otherwise simple task.
Fewer words, more bulleted lists. Large blocks of text make it difficult to find and focus on what is most important on a page.
Does your website feature rapid animation only viewable by Flash player? Get rid of it. It’s hard to look at and process fast-moving visuals.
Auditory processing: From voices to machines to their environment, some people with autism focus equally on multiple sound sources.
Sound quality matters. If your audio content or videos feature muddy or distorted sound, someone with autism will have a harder time discerning voices.
Captions improve comprehension. Mentally matching the sound they’re hearing with the images they’re seeing can be more difficult for a person with autism. Add captions to your videos and images as often as possible.
Different way of mentally organizing items: Inconsistencies can make it challenging for a person with autism to use web interfaces, especially if that person has trouble getting past mistakes or exceptions within a website.
Watch how you design forms. In Cohen’s research, she found that teens with autism had a hard time filling out web-based forms. The biggest culprit? Inconsistent spacing between labels and input boxes.
The teens she interviewed and observed will, perhaps, grow up to become members of our clients’ organizations — but at the very least, they will be, or already are, consumers and users of other online content and resources. Improving accessibility for these users improves the digital experience for all users, so why not always design with these user needs in mind?
Search drives almost everything online. While lots of us bookmark pages or click on links that take us from one website to another, typing keywords into a search engine and hitting ‘Return’ is how most web users, most of the time, try to find what we’re looking for.
When using search on a specific website (versus a search engine), we want an input box that allows us to see most, if not all, of the words we type in for our search. Yet you’ve probably had the experience of typing search terms into a too-small input box. Maybe the box is too short, so the text shows up looking tiny. Or just as frustrating, your query runs too long and scrolls out of sight.
Better to design a search-input box — or really, any kind of box where the user types in text — to be too wide than too short. And on the taller side, as well, so that there’s some white space around the words.
Don’t box in your users; give them the space they need to quickly review and revise their query before they submit it.
While 2016 was an exciting year for design – there was a shift toward mobile-first design, video and rich imagery were hotter than ever, and animations became the norm – I’m even more excited about what we can expect to see in 2017.
A few weeks ago, Creative Director Alex Pineda and I held a webinar with CEO Joanna Pineda to talk about the trends that are emerging in 2017, and how you can give your members the best user experience possible by incorporating them into your web presence.
Curious about what’s in store for 2017? Check out our recap video:
Whether your plans for 2017 include a large-scale website redesign, building a brand new website from scratch, launching an app, or simply refreshing a few of your key pages, we’d love to help you incorporate some of these trends!
Which design trends are you most excited about for 2017?
Sometimes designers will get imaginative and create what I call an “infinite sidebar”. This is when you have a column of content on a webpage with a background color that extends to the edge of your screen (while still maintaining a fixed width for the wrapping element of the pages content – for centering purposes).
This sort of thing may initially seem like it wouldn’t really work but thankfully implementing this on a web layout is simple thanks to CSS gradients.
CSS gradients can be a headache to keep up with – the syntax is not the same across the board for browsers. We at matrix use Compass to make our lives easier. The relevant SASS that generates the gradient in this example:
The basic idea is you have two columns, one white and one blue. To create the illusion of an “infinite sidebar” a CSS gradient (left half white – right half blue) is applied to a “wrap” element, which the layout elements are contained within.
The color stop of the CSS gradient is hidden by an “inner” element (the container with a fixed or max-width). The “inner” element has a white background color, is centered on the page and is positioned on top of the wrap element.
If you then apply the same color from the gradient to the second column within the “inner” element you’ll have the “infinite sidebar” effect:
Of course the best way to understand what’s going on is to inspect the demo I’ve set up and then try it for your self!
This also gracefully degrades in browsers that don’t support CSS gradients (check it out on IE9 or less – it looks like a standard sidebar with a background color)