Design

Tips, tutorials, and resources about design including web design, branding, graphic design, typography, image sharing and any other crafted visual media.

  • Copyright Free Images: 20+ Resources You Need to Know

    Looking to find copyright free images to use in your blogs, websites or social media posts? The following sites are the best on the internet.

    Do you frequently share images online? If so, it’s essential to have a virtual Rolodex of go-to websites to quickly find images. It’s also important that you have websites in which the legal restrictions are clear and concise.

    Below you will find my go-to list of the best sources, hand-picked and vetted to a strict set of standards. I’ve included some of my favorite paid resources as well.

    I update this post regularly with new resources. If you want to be notified when something new is added, be sure to subscribe to my Insiders list by adding your email below.

    Join the Insiders List

    My Insiders get first access to new and updated resources as soon as they’re available. They also are the first to hear about any new projects I’m working on. Add your email below to join!

    Copyright Free Images Galore

    The following sites are the best places I’ve found online to get royalty free images. I have sorted through dozens of sites to bring you the best of the best. This will save you time and potential frustration.

    You shouldn’t have to spend an hour and a half looking for the perfect image for your next epic blog post. These sites I’ve listed had to pass a certain number of criteria:

    1. Great selection of images
    2. High-quality photography
    3. Copyright free or CC0 licensed
    4. Great search functionality
    5. Easy to navigate quickly
    6. Safe for work (and kids)

    Each site I list below will pass all of these criteria with flying colors.

    About Copyright Free and CC0 Images

    It’s important to note that the most important aspect is the copyright free or CC0 criteria. In case you’re not familiar with these terms, I wanted to explain them a bit.

    When photographers upload their images to the internet, they are the copyright owner. They have certain enforceable rights that protect people from using their photos without their permission. If you are found using their copyrighted photography without permission, they can take legal action against you or your business.

    A photo that is labeld “CC0” (Creative Commons Zero) means that the original photographer has willingly waived their copyright to it. That image is free to use for personal and commercial use. You don’t need to pay royalties, give attribution, or get permission.

    Just because an image is marked “copyright free” doesn’t necessarily mean it’s 100% free to use. Some may require you to give attribution or pay a small fee.

    Without further ado, here is my go-to list of copyright free image sites.

    Unsplash

    This was a small free photo project that turned into an absolute behemoth of a website. It is now one of the most popular sites on the internet. Unsplash is home to more copyright free photos than you could even know what to do with.

    Unsplash started as a simple Tumblr site posting 10 new photos every 10 days. It has turned into a place where you could spend hours and never need to go elsewhere for your image hunting.

    Photographers upload their work to Unsplash where a team of editors review each submission. If the photo passes their high standards, the photo is made available. Photographers also can have profiles on Unsplash, which is a great incentive for them to upload their best work.

    Attribution is not required for using Unsplash images, but they do encourage it.

    Image restrictions: CC0

    Burst (by Shopify)

    The site is laid out beautifully. Burst give you the ability to sort through new photos, popular collections, or perform a search for specific image keywords.

    Shopify claims they are uploading new photos to the site every week. A big improvement from when they first launched with new photos every couple of weeks.

    It is targeted at entrepreneurs and business owners looking for stock photography, but certainly, anyone can use them.

    Image restrictions: CC0

    Pexels

    Pexels began as an aggregator of copyright free photos from other sites. They abandoned that model and instead created their own library of images like Unsplash.

    They are now my second favorite place to find images. The majority of the photography on Pexels is very high-quality. They have a similar approval process for photography submitted on the site.

    It’s easy to search, updates with new photos daily and has a very large library.

    Image restrictions: CC0

    Reshot

    Simple and elegant looking website, with a good search function that points to well tagged images.

    What’s interesting though, is their “Quick Image Packs” where you can download a set number of images that revolve around a certain theme.

    All they require for you to download these image packs is to Tweet about the site. This action is made easy by a “Tweet to Download” button on the pack you want to get.

    Current packs available are:

    • Diversity Matters Pack
    • Active Lifestyle Pack
    • Everyday Technology Pack
    • Flat Lay Pack

    I hope they add to their packs as this is a really great concept, and something I find myself needing more and more.

    Image restrictions: CC0

    Libre Stock

    If you’d like a centralized place, much like Pexels, to search all the best free image sites using an intelligent tagging system.

    The search engine is powerful. When you click on an image in the search results you are taken to the photo on the site it originated from.

    Image restrictions: CC0 (but be sure to check the site you’re downloading from)

    PicJumbo

    A project of Viktor Hanacek, designer, who understands the importance of high quality images in a designer’s life. New photos are uploaded daily.

    Fantastic work, and completely copyright free. There is a paid membership for $6/month if you want even more from Viktor.

    Image restrictions: CC0

    Barn Images

    A relatively new resource, this site is owned and operated by two photographers who set out “with the hope of redefining traditional stock imagery.” They publish new, free photos every weekday and are dedicated to high quality, non-stock images.

    Despite the name, the site is not dedicated to images of barns. It has a vast diversity of fresh, high-quality images that are great for use with your website, blog or social media projects.

    Images restrictions: None

    Gratisography

    A personal project of Ryan McGuire of Bells Design. Very beautiful high-resolution images added weekly, completely free of copyright.

    What I like most about this site is the personality and uniqueness of the photographer’s style. Very fun and a tad bit quirky.

    Image restrictions: CC0

    Pixabay

    A collection of images that are personally uploaded by contributors under Creative Commons Public Domain. The site functions beautifully and has great navigation, sorting, and searching functions.

    One of the features I like about Pixabay is the ability to filter your searches by landscape or portrait images. This is helpful when you’re looking for a very specific image orientation.

    Image restrictions: CC0

    Compfight

    Compfight allows you to search through Flickr’s Creative Commons listed photos. It’s pretty simple to use and will automatically generate the HTML code to insert photo credit.

    It can be a bit buggy sometimes, so you may be better off going straight to Flickr.com. Once there you can do an advanced search for Creative Commons photos.

    Image restrictions: Depends

    Morguefile

    This is a big searchable database of free images. It also has some great filtering options to really find the photos you’re looking for.

    Image restrictions: CC0

    New Old Stock

    Another Tumblr powered site, New Old Stock features “vintage photos from public archives”. A great place to find authentically vintage looking imagery.

    Image restrictions: Public Domain

    Death to the Stock Photo

    Their mission is to “make the internet more beautiful”. This is an email subscription that sends you free curated photo packs every month.

    They also do the occasional paid pack that is usually from a trip they are taking. Their photography is always top notch.

    Image restrictions: Limited (but more than fair)

    Jay Mantri

    Yet another Tumblr based photo archive. I recently discovered this site and love the creator’s style.

    No notes about how often he updates it but his only request is that you “make magic” with them.

    Image restrictions: CC0

    Kaboompics

    Also newly discovered, I found this site to be easy to search and photos are well tagged, much like on Pexels.

    Image restrictions: CC0

    Albumarium

    Now here’s a site with a very interesting take on the world of free images. All images are organized into albums (hence the name Albumarium). Instead of searching for photos, you search for albums.

    This is very helpful for when you’re looking for more than one image under the same theme. Let’s say you need 3-4 photos that need to look like they were taken by the same person. Or maybe you want them to look like they were taken in the same setting. Albumarium is exactly what you need.

    Other sites offer a similar “packs” model, but most of those are paid only.

    Image restrictions: CC2.0

    Life of Pix

    Very simple site, updated regularly with new high-resolution images that are free to use and share. The search function works well, but I’d love to see the search function work with the grid layout. As of now, when you search you only get one-column results and that can be a bit tedious.

    Image restrictions: CC0

    Paid Stock Images

    If you really want to ensure your image hunting is legal and time-efficient, you can always utilize one of the many stock image sites. These are sites that offer royalty free stock photos for purchase.

    This is the best solution if you have a professional blog and you want the highest quality selection without any potential legal issues.

    Shutterstock

    Shutterstock boasts an insane amount of royalty free images that you can purchase for a good price. They also have a wide variety of illustrations, graphics, and icons you can choose from as well.

    A noteworthy feature is their Shutterstock Editor Pro image editor. It is perfect for those who want to create quick image edits for various purposes. You can make the edits right inside the web app before downloading.

    Super convenient.

    The good folks of Shutterstock have also partnered with me here at Dustn.tv, allowing me to have generous access to 25 downloads per day. This partnership had no effect on their placement in this article. (They didn’t even ask to be mentioned.)

    iStockPhoto

    iStockPhoto is the leading stock image site on the internet. They have a huge selection of royalty free images for purchase. But don’t let that intimidate you because their search filtering options make it pretty easy to narrow down your searches.

    Their downside is that they use a credit system as opposed to a straight dollar amount. This makes calculating costs a bit more difficult.

    Photo Dune

    Not quite as big of a selection as iStockPhoto but they are my personal preference. I prefer them because the payment system is in dollars rather than credits, so you know exactly how much you’re paying for each photo.

    Social Media Images + Graphics: SoVisual.co

    If you’re a social media manager, you’ll want to take a look at SoVisual.co. It is not a library of individual photos like all the other sites. Instead it offers bundles of social media graphics for purchase.

    Because let’s face it–most of you reading this blog post are sourcing images to use on social media. And what do you have to do once you find them? You have to pull them into a graphic design app and take the time to design something.

    SoVisual.co saves you tons of time in that aspect.

    Each bundle or “Social Pack” comes with 30 days of social media images and content. Each day has one graphic in four different sizes. Additionally, each size has both a version with text, and without text so you can truly get the most out of every post.

    This makes creating a consistent content calendar as easy as possible. And I must say (as a completely biased founder) I think these packs are pretty stellar.

    Lightstock

    Some of the highest quality Christian photography you will find on the internet. Period.

    The prices aren’t cheap, but neither is the quality of the photos. If you’re looking for the best premium quality Christian-oriented photography, this is the place to go.

    Enough free photo sites?

    This list is constantly updated, and I only add the best of the best copyright free image sites to this list.

    So if you have something that isn’t mentioned in this list, let me know in the comments below. I will review and consider your suggestion, but I don’t promise all of them will make it.

    Do you have any free image resources that you would add to the list? You can leave a comment by clicking here.

  • How to: Typography for Visual Content That Doesn’t Suck

    Choosing the right typography (or fonts) for your visual content can be difficult if you’re not a seasoned designer, but it doesn’t have to be.

    The good news is that all you need are a handful of helpful tips to start improving your visual content typography today!

    In this post, I cover some basic principals of choosing the right fonts, pairing fonts and a handful of typography do’s and don’ts. These are things that anybody can begin implementing.

    Message is First and Foremost

    When choosing your fonts for visual content keep in mind the message you want to communicate. I’ve said this a thousand times in blog posts and speaking engagements:

    The purpose of good design is to effectively communicate a message.

    Making things look good is a worthless feat if it’s not helping you communicate your primary message.

    You must have a singular objective of what you want to communicate to the viewer/reader. What is the one thing you want them to interpret?

    Solidify it in your mind and let that message be the filter for everything you add to or takeaway from your visual content piece.

    You might think, “what does that have to do with just picking a font?”

    I’m so glad you asked.

    Typography Has Personality

    Just like different styles of clothing can communicate and accentuate different personality types the fonts you choose can completely change the mood of your content.

    There’s even a quiz you can take to discover what typeface you are.

    To help explain this concept, Sarah Hyndman does a fantastic job in her TEDx talk:

    “To the child in me, fonts are like multi-sensory imagination grenades.”

    In her talk she explores the parallel between how the clothes you wear make an immediate impression as does the type you choose for a graphical piece.

    So the first question you need to ask when choosing a font is: what kind of impression do I want to make?

    Do you want to look sophisticated or whimsical? Do you want to come off as elegant or practical? Do you want to be seen as exciting or calm, cool, and collected?

    Here are some basic ideas of how each typographic classification is often perceived:

    • Serif: smart, traditional, sophisticated, sturdy
    • Sans Serif: casual, easy-going, personable
    • Script: fancy, high-class, expensive
    • Monospace: plain, technical, utilitarian


    Pin This!

    These are, of course, very generalized as there are many styles within each type classification. I highly recommend this article which dives deeper on the classifications and styles.

    Key Takeaway: your font choice will have a personality trait (or traits) that will affect how your content is perceived.

    For example:

    In the above image, you can see that the seriousness of the content is undermined by the comical nature of the font used.

    This is not what you want.

    You want your font choice to compliment your underlying message. Here’s what a better font choice looks like:

    Notice how it feels a bit more connected to the message.

    Being Consistent vs Being “Creative”

    If you’re building a personal brand or a business brand, I highly recommend deciding on a typographic style that you stick with consistently.

    Pick 1-2 fonts that you use for everything. This is something I’ve also mentioned in my article on designing a stunning reading experience on your blog.

    The same rules can be applied to visual content.

    Notice how in the above image there are two fonts used. This makes it easy for the viewer to process what they’re seeing because their brain is not having to process and decode too many different fonts at once.

    Not only is limiting your fonts easier on the viewer, but it’s better for branding.

    You’ll notice that all big brands have a specific set of types (or fonts) that they use on everything. This not only makes for a consistent and highly professional looking impression but also makes the creation of new visuals easier because your fonts are already chosen.

    Now, are there plenty of examples where many different fonts are used to create a great typographic piece? Of course!

    However, these types of pieces are often created by professionals. People who have been pairing and matching fonts for a long time.

    They’re also extremely time-consuming to create. So my biggest piece of advice is: leave the complicated stuff to the pros and focus on being simple and effective.

    Where to Find Great Fonts

    If you’re working with design apps such as Canva, Adobe Spark, PicMonkey or other web-based design apps then your font selections will be limited to the ones they make available. This is also true of mobile design apps.

    However, if you’re using a desktop application such as Photoshop, Pixelmator, or Gimp then you can use fonts you’ve downloaded onto your computer.

    If you have this ability, I’ve found there are a handful of sites that I use for reliable font downloads:

    I use DaFont as a last resort, because it can be hit or miss with quality. Since it’s such a high-volume site, there is bound to be lots of low-quality (or even straight up broken) files throughout the site.

    Between Google Fonts and Lost Type though, I rarely need to go elsewhere.

    Typographic Inspiration

    Sometimes it just helps to observe what other great artists are doing to help shape and inspire your own design. So, below are a list of places where I go frequently to find inspiration.

    Apps like Adobe Spark and Canva also make it super easy to get inspired with their designer templates.

    Typography No-nos

    Now, as one last effort to give you some good, practical and actionable (or non-actionable depending on how you look at it) advice, here is a list of things you definitely do not want to do when it comes to typography:

    Never use Comic Sans. Ever.

    Every time you do, a Unicorn dies.

    Seriously, there has been no other font in the history of fonts that will make a piece of content look more amateur.

    Comic sans is one of the most reviled fonts on the internet. Unless your visual is meant for pre-schoolers, you will only be doing yourself a disservice by using it.

    Just. Don’t. Use. It. Ever.

    Never use Papyrus. Ever.

    [This image was too good not to use. Source.]

    Every time you do, a baby Unicorn dies.

    If any font can dethrone Comic Sans as the worst and most hated font in existence, it’s Papyrus.

    Its gross overuse by amateur designers should now be considered a public nuisance. In fact, at one point there was even a digital equivalent to a Papyrus “neighborhood watch” blog.

    It was cool that one time in 4th grade when you used it for a report on Egypt. But that was the only time.

    Avoid it at all costs.

    Only Use Impact for Memes

    Only use Impact if you’re making a meme that is supposed to be funny. Otherwise, it won’t be taken seriously.

    Since the internet adopted it as the go-to font for all memes it can no longer be taken seriously.

    Mind the Medium

    Be sure that wherever your intended audience is going to consume your visual that it will be legible.

    What does that mean?

    For example, if you’re going to be sharing this visual on Pinterest you need to know that the majority of Pinterest users are viewing on their phones.

    This means that your font needs to be big enough to read on a smaller screen that what you’re likely creating it on.

    Legibility needs to more important that style.

    Make sense? Good, let’s close this thing out.

    Onward to Better Visual Content!

    With these typography tips, you can be confident that the visual content you’re creating will be seen as professional, and deliver the kinds of messages you want.

    Which of the above tips was most helpful to you? You can leave a comment by clicking here.

  • How to Create Optimized Social Media Images Like A Boss

    Everyone is doing visual content these days. Follow these image creation tips and leave them in the dust.

    Smart bloggers, social media stars and marketers alike have caught on to the visual content trend. Have you?

    It’s clear that visual content allows you to grab more eyeballs, yields more engagement and performs better long-term for your digital marketing efforts. But the longer this trend is around, the harder it will become to stand out.

    And for most bloggers and social media pros, creating images or social media graphics is time consuming and tedious work.

    With this post, I hope to help you create a workflow and give you some tips to help you create and optimize your social media images.

    You can almost call this a minimum viable workflow for social media images. And I’m telling you first-hand, it works!

    Step 1: Choose Your Tools

    Every good artist or craftsman needs to have good tools. And there are different tools for different jobs. Furthermore, there are different tools for different people for different jobs.

    You may not feel as comfortable with some tools, but thrive with others. That’s okay. The key is to find the tools that work best for you.

    For the sake of time, I’m going to stick to the three tools that I believe are the most effective for different reasons and use cases.

    • SoVisual.co: Simplest to use.
    • Canva: Moderate ease of use, moderate control.
    • Photoshop: Hardest to use (if you’re not experienced), maximum control.

    For more tools take a look at my list of desktop tools and mobile tools for image creation.

    The above-mentioned tools will work for the majority of people’s needs, so I recommend giving them all a try and seeing which one you feel most comfortable with.

    Step 2: Decide the Content


    What are you going to put on the social media image? Will it be quote? Will it be the title of a blog post?

    Or in other words, what is the message you’re trying to get across?

    You need to know what your content is going to be first and foremost because the point of a good visual, above all else, is to communicate a message.

    But knowing the content isn’t the only thing you should have in mind. You also want to know and understand the emotional tone behind it.

    Understanding the emotional tone will help you sort more quickly through some of the elements that will go into creating the visual such as:

    • Typography: Certain fonts will communicate different emotional tones
    • Color: Colors communicate to our brain and can instantly put the viewer in an emotional state
    • Imagery: The photos or dominant graphic(s) you use can have a significant effect on the tone

    Know your message, know the tone you want to set, and then proceed to the next step.

    Step 3: Source the Images

    If you are going to add imagery as a background or visual accompaniment to the message, you will want to have a handful of go-to resources to find and discover images.

    You can of course use one of my top sites to find free images post. I also recommend using your browser’s Favorites or Bookmarks feature to save your preferred places to sources images.

    A few tips to keep in mind when sourcing your images:

    • Remember the tone of your message (as I said above) and make sure the image you use connects in some way.
    • Always make sure the image you’re using is legal to use— don’t just use any old image you find on Google search.
    • Make sure the image you source is a minimum of 2000px wide and 1080px tall. More on this later.

    It’s really easy to find yourself spending an hour just looking for the “perfect” image. This can be a huge time-suck. And the next time you need to create an image, you’ll dread it because you’ll remember how time-consuming this part can be.

    So set that time limit (10 minutes) and decide that you will find an image in that amount of time.

    Step 4: Put it Together


    Using the basic rules of visual content creation, it’s time to make your graphic piece. This is where the real work begins.

    To get the most bang for your buck (so-to-speak) you need to create a minimum of 3 sizes for this image:

    • Landscape (1200×630)
    • Portrait (1080×1350)
    • Square (1080×1080)

    But if you have the extra time and energy, I also recommend making a 1920×1080 version. This is the perfect 16:9 ratio image that has the most universal visual appeal. The only places it can’t be used are as a Facebook Open Graph image and on Instagram. Everywhere else online, it works like a charm.

    Now, it also helps if you have already gotten your hands on some social media image templates to make this process more streamlined. While 2/3 of the tools I will talk about below will have templates for you, it’s still good to have your needed sizes in mind.

    Using SoVisual.co

    SoVisual.co is the newest visual content creation tool on the market. It offers the simplest (and fastest) process for creating images. However, it also offers the least amount of control over the creation process.

    That’s not necessarily a bad thing.

    SoVisual.co gives you access to a huge library of professionally made design templates. You browse through the feed, select the design you like, and then you can customize the content. You can customize:

    Once you’ve done that, you can instantly have the app crank out 3-5 different sizes made to cover all your bases in social media. That is where this tool really shines.

    By automatically taking care of the primary design elements and resizing for each network for you, you save a ton of time.

    The drawback is you have less control over modifying the size of text, spacing, positioning and other design elements. If you’re just looking to get the job done and not fiddle with tiny details, this is probably the best tool for you.

    Using Canva


    This is like the best of both worlds tool. Canva gives you all the tools you need to customize your image without being overwhelming.

    You can start with one of their size templates and then chose from their professionally designed layouts. Once you pick a layout, you can customize pretty much everything about it.

    Now, you don’t have as many fine-tuning design controls as you would with Photoshop, but that is both a strength and a weakness of the tool. Enough to do what you want, but not enough to suck you into a black hole of options exploring and tweaking.

    However, unless you have Canva for Work, you will not have the ability to automatically resize images for all your social media needs. The free Canva user will need to create each size image separately.

    This can be a lot more work. If you’re going to be creating a lot of images for social media, then Canva for Work is definitely worth the cost.

    Using Photoshop

    If you’re using Photoshop, you have a full suite of design tools to fine-tune and customize your images to every last detail. It is the most popular design standard software used by professional designers for decades.

    However, unless you have been using Photoshop for a while, you may get overwhelmed by how many options. The learning curve is quite steep and it could take you a year or so working with it to get comfortable and quick.

    Now, using Photoshop there is a trick you can use when creating your social media images.

    A while back I discovered the glorious world of Photoshop scripts. Basically, if you’re familiar with javascript you can create scripts that will automate certain things in Photoshop.

    One particularly helpful script I discovered is called Duplicate to All and it allows you to select a layer and have it duplicated (pasted) to every open file.

    So here’s how this workflow works:

    • Open 4 separate photoshop templates (mentioned above).
    • Create the image on the biggest template (1920×1080).
    • Once finished with that one, put all layers into a group and use the Duplicate to All script to place that group on all templates.
    • Tweak the layers on each file to make it line up correctly for each different template.
    • Save each template separately (JPEG and PSD versions).

    This might actually seem like more work, but I’ve found it to be a much better workflow. You not only get better results, but you have a PSD for each version so you can always reopen if you need to make changes.

    Step 5: Optimizing Images

    There are two things that we need to talk about when optimizing your images. The first is pretty obvious to some, but the second may not be.

    • File size optimization
    • Search engine optimization

    Both of these steps are a crucial part in making sure your images are giving you the greatest return on investment.

    Image File Size Optimization

    Everyone knows that a slow loading page is not ideal for user experience. It’s also bad for SEO. So when adding images to a blog post or page, you want them to be as lightweight as possible without losing image quality.

    Even if you’re only planning on sharing these images on social media, you still want to optimize them to be as lightweight as possible. Why?

    When you upload an image to a social network, they are going to optimize it themselves. If your image file size is massive and unoptimized, the more the network will have to do in order to reduce its size and loading time. And you can’t always trust them to preserve the image quality that you’ve worked so hard on.

    Facebook is especially brutal when it comes to image quality loss.

    So do some of the work up front and you’ll save as much quality loss as possible.

    Reducing File Size with Photoshop

    If you’re using Photoshop, you have a bit of control in reducing the file size when you “Save for Web and Devices”.

    Your first step is to choose between saving as a JPEG or PNG. Depending on the image, one may be better than the other. So first select PNG and take a look at how big the file size will be. Then switch to JPEG and see what the file size will be.

    With JPEG selected you can also tweak the quality settings to reduce the file size further. I don’t recommend going below 70% or else you will likely see a visible degrading of quality.

    After looking at these settings, choose the file type that has the lowest file size.

    Other Tools to Reduce File Size

    There are plenty of apps, plugins and web services that will help you reduce your file sizes even further. Here are some recommended tools:

    Personally, I use JPEGmini and that’s all I need. If you’re not a Mac user though, this will not be an option for you.

    Image Search Engine Optimization

    Many people overlook this step because they simply aren’t aware of how powerful it can be. They also don’t realize just how big a problem it is to have poor image seo.

    Trust me, optimizing your images for search can not only improve your overall search ranking, but can drive traffic as well.

    This, of course, only applies if you’re loading them on your blog, but it’s a good habit nonetheless.

    Optimize Your Filename

    First, be sure that your filename contains a descriptive keyword or phrase that summarizes the image. So if your image is a meme of Yoda, name it something like yoda-choose-meme.jpg.

    Don’t make it super long, just enough to get the job done.

    Add the Alt Tag

    The Alt tag is primarily used by screen readers for the visually impaired. This is is meant to describe the image in a useful way to someone (or something) that can’t actually see the image.

    In WordPress it’s very easy to set an Alt tag when you upload an image. Do this every single time. No exceptions.

    This is not only good for the visually imaired and search engines but if anyone happens to pin this image, that Alt tag is what Pinterest will automatically fill the Pin description with.

    Keep your alt tag to 125 characters or less. This can be a bit more descriptive than the filename but not a full-on description.

    If you’re not using WordPress, you can use HTML in your editor of choice, here’s what that would look like:

    <img src="IMAGE URL" alt="YOUR ALT TAG HERE" />

    And no, it should not be in all caps. I did that just so you can easily see where it goes.

    Write Your Title tag

    Just like the alt tag, the Title tag is easily overlooked. This is what will show up when someone hovers their mouse over your image and they get that little popover bubble.

    Again, WordPress makes this very easy to add, but if you’re using something else or doing this manually through HTML, here’s what it would look like:

    <img src="IMAGE URL" alt="YOUR ALT TAG HERE" title="YOUR TITLE TAG HERE" />

    Your title tag should also be in title case— first letter of each word Capitalized, just like the title of a blog post. And also, just like a good blog post title, try to keep it to 60 characters or less.

    For a more in-depth look at Alt tags and Title tags, Yoast has a fantastic article that I highly recommend.

    Conclusion

    Getting your content to stand out in today’s dizzying overload of content doesn’t take much. You just need to have a little more insight and be willing to do a little more work than the next guy or gal.

    Knowing these simple social media image optimization and workflow tips will help you begin cranking these things out with greater effectiveness and the highest possible efficiency.

    As a recap, here’s what you need:

    • Pick the image creation tool that works for you
    • Decide on the content
    • Source the images or primary visual aids
    • Put it all together (using your tool of choice)
    • Optimize the file name
    • Optimize the file size
    • Upload the image
    • Add alt tag (if applicable)
    • Add title tag (if applicable)

    Once you’ve done this a handful of times, it will be like second nature. Done consistently over time, this can be a highly impactful strategy for getting your content discovered by a much wider audience.

    So which image creation tool is your favorite? Is there anything you read above that was completely new to you? You can leave a comment by clicking here.

  • Method to My Madness: Redesign 2016

    Instead of an all-out redesign, this year I decided to spend time refining. The results are delightful.

    Every year since the inception of this blog I’ve done a complete redesign, generally launched at the beginning of the year. Until this year.

    This year, instead of doing a complete overhaul I’ve decided to think big… about the smallest things. I’ve spent more time thinking through the tiniest details of my site design than I spent redesigning the whole thing last year.

    And I think it’s really made a difference.

    I’ll let you decide though as I walk you through all the details in this years blog redesign.

    You may want to consider going back and reading my thought process on last year’s redesign first to add a bit more context to what you’re about to read.

    Just FYI, if you want to create a beautiful website with minimal effort I highly recommend starting with a theme from Studio Press [aff link]. It’s the framework that powers this website and the only one I recommend for clients.

    Typography

    The most important part of any website design is the typography.

    Unless of course your website doesn’t have anything to read and it’s just a bunch of photos. In that case, typography doesn’t matter.

    In most cases though, typography (or the fonts, typefaces and their specifications) should be the top priority.

    Last year I was very specific about the typefaces I would be using on this site, and I’ve been quite happy with them. However, I felt they could use some fine-tuning to assist with even better readability and visual rhythm.

    Girl, look at that body

    Body text is the foundation of an entire websites typographic structure. So this is where I began my fontastic refinements.

    Previously my body text was set at a base of 24px and a font-weight of 300. This resulted in an optimal characters per line (referenced here) at the full-width content area. The lighter weight also had a sleek, elegant feel to it that looked very smooth on retina displays.

    But the problem is— not everyone is reading on retina displays. Yet.

    The lighter weight also had a greater contrast with bold text in the older version, making the bolded text a bit more distracting than it should have been. (Hats off to David Kutcher for planting that bug in my ear last year.)

    So after much consideration, I decided the best reading experience for my readers would be to thicken the font to a 400 weight to ensure readability on lower resolution devices.

    But this also prompted me to reconsider the optimal characters per line. At 24px tall and 400 weight, it felt too heavy. So I ended up bringing it down to only 20px and thus ended up with what you see here.

    Seeing this in action gave me a realization. The text actually felt like it held more weight— like it was somehow stronger, giving the words more authority.

    As I’m a bit of a typography nerd, I took a look at some of my favorite high-authority sites with excellent typography, and I realized that they all had a similar average of characters per line. And comparing with my newly refined body text styling, they were quite similar.

    Maybe this is more of a subconscious thing that I’ve psychologically associated with high-authority, beautiful sites. But I suspect if I feel that way, others might too.

    That’s my story, and I’m sticking to it.

    Aside from the font size and weight, I’ve also done some tweaking of the line height (the amount of vertical space that a line of text takes up) and paragraph breaks.

    I was recently browsing Brian Gardner’s blog and took notice of his typographic style. His line-height really stood out to me, giving me the exact ease of reading that I was wanting to incorporate.

    So I stole it.

    The result is a line height of 2. The easiest way to explain this for the non-designer is that it’s very similar to when you make a document double-spaced. Every college student probably can relate to that trick.

    In this case though, it’s not for the purpose of filling up more space because your teacher told you the research paper needed to be 15 pages long. This is actually a way of giving the reader plenty of visual breathing room to take in each word without the previous or next line encroaching on the current line.

    Additionally, I increased the distance between paragraph breaks to a comfortable 34px. This gives a distinct enough break to make it clearly distinct but not too much as to break the visual rhythm.

    Headings

    Ah, the glorious hierarchy of typographic layout. Headings are a way for readers to decipher sections and sub-sections within your blog posts and pages.

    Smart bloggers use sub-headings to increase a blog post’s “scanability”. Intelligent writers use them to keep their thoughts more organized and ensure the story they’re telling stays on course.

    It’s important to make it so that these sub-headings stand out visually, so I’ve taken some time to think through my own.

    The first change I made was to create a very subtle negative indent for heading text.

    A subtle -10px margin on headings makes them pop out to the left just enough to make them stand out without being obvious or distracting.

    This will only happen, though, on screens larger than 1200px. But that’s a topic for another section below.

    Next, since sub-headings signified a significant shift in the storyline or thought process of a post, I wanted to give them a bit of extra white space above to communicate a more significant shift than going from one paragraph to another.

    I liken it to the kind of rest a musician might place inside of a musical score.

    The result is a slightly taller gap between the end of a paragraph and a sub-heading.

    Iconography

    Throughout my past designs, I’ve often borrowed from several different sets of highly popular, free icon fonts to accomplish my icon needs.

    The reason I used these is because they were both free, open-source fonts, not just .pngs or .jpegs of icons. This is important because using a font instead of an image ensures that the icon will look good on all screen resolutions and they will likely load faster.

    This past year, Studio Press (affiliate link) began using an icon font in some of its Genesis Child Themes (affiliate link) I hadn’t seen previously called Ionicons.

    It’s another free, open-source icon font that is very well put together. And for a detail-obsessed designer like myself, they’re drop-dead gorgeous icons.

    So I took some time to replace every instance of an icon inside my theme with an Ionicon version. This ensures a consistent look and feel of every icon throughout the site.

    Buttons

    Why, oh why, do I love buttons so much? Is it just me? Does anyone else out there just find buttons to be fascinating?

    Maybe I’m just weird, but I find it a lot of fun to play with and create buttons. I guess that worked out really well for Social Warfare users, though— so maybe it’s not a bad thing.

    Buttons are an important part of any website owner’s design because they are usually the devices used as calls to action.

    • Click here!
    • Buy now!
    • Subscribe!
    • Register!
    • Submit!

    Buttons are the universal symbols for performing an action.

    So when I wanted to re-think my own buttons, I wanted to revisit my idea from last year about Action Inspires Action and apply it more aggressively to my site buttons.

    I started by wanting to add an action icon to my buttons to help the visual communication of “clicking this will do something”.

    So based on inspiration from the buttons I saw on the That Church Conference website (see my interview with the founder here) and a few other sites that incorporated icons in their buttons, I decided to add an arrow (or “chevron” to be accurate) to my buttons when you hover over them.

    Give it a try below:

    Red Button

    Clear Button

    See, isn’t that fun? When you hover your mouse over the button you feel like you’re about to go somewhere.

    But Dustin, why did you put the arrow on the front/left of the button rather than the right? Doesn’t the right make more sense?

    I’m glad you asked… and don’t call me butt Dustin.

    Initially, I placed the chevron (or arrow) on the right side of the button. But that can be kind of confusing when you place another button beside it— like on my home page.

    If the button on the left has an arrow that points to the button on the right, it can be a little confusing– like the left button is telling you to click the right button. For anyone who has decision anxiety, this is the stuff of nightmares.

    So, I decided it is best to place the chevron on the left side of the button, before the action text. Not only does this eliminate the dueling buttons problem, it actually makes more sense. The chevron is now pointing to the action you’re about to take!

    If this is getting just a tad bit OCD for you, I won’t be offended if you stop reading now. It doesn’t get any better, I promise. The good news is my company is ready for hire to bring this level of detail obsession to your next web project.

    I also wanted to have some pre-made styles for when I wanted to quickly add a “download” or “buy” button.

    Now, the reason for the more static (not moving) version is that these buttons represent a more sensitive action. In the case of a download, the click of the button would begin the file transfer immediately. In the case of a purchase, the checkout process would begin.

    I consider both of these to be sensitive actions since you don’t want to just trust any download link and any buy link. You want to feel secure in that action. So I decided I wanted these buttons to feel less “shifty” and more stable instead.

    And lastly, I’ve created one more variation of a button that I will use for one, very specific and highly important call-to-action:

    Pin This!

    I’ve created a “pin” class that, when added to a button will replace the chevron with a Pinterest icon. This is for when I have a great graphic that I want people to be able to pin easily.

    Inputs

    The first thing I wanted to change about the inputs throughout the blog was the color. Since the background color throughout the site is white, having inputs with the same background color felt washed out.

    So I decided to give them a low-contrast grey to make them clearly stand out on a white background.

    Additionally, when an input is active (when you click inside it) there is a 2px border that fades in so you can clearly know where you’re cursor is if you happen to scroll away and come back.

    Mobile Responsive

    The previous iteration of this design had numerous flaws when it came to smaller screens. Even though I had started with a mobile-first philosophy, I ended up trying some different things that didn’t work as well on mobile devices. And then I just didn’t have the time to go back and rework them.

    Well, I’ve gone through and looked for all the problem areas on mobile screens and adjusted them accordingly.

    Font sizes across the board have specific adjustments that are made at the tablet/mobile level. Margins and spacing are also slightly adjusted to keep the visual rhythm consistent.

    This site has never been more attractive on mobile devices.

    Insider Downloads

    For those of you who are lucky enough to call yourself Insiders, you would have gotten my email notifying you about a significant upgrade to your private downloads page. Since that email, I’ve made a few more tweaks to increase that page’s aesthetic and layout.

    I wanted to first update the page by organizing the downloadable content into categories. Then I also wanted to make the download boxes a bit more modular and have a small description for each download just in case you weren’t familiar with what the item does.

    This page will continue to get upgraded throughout this year as I decide on a better way to organize and distribute the downloads I give away to my Insiders.

    You’ll notice I’ve also added a contact form on that page so that you can send me feedback or requests right from there.

    Consistency in Every Single Pixel

    Overall, the major theme of my meticulous refinement has been to establish consistency in every detail.

    One example of this attention to detail is that I’ve gone through and made sure that anywhere that a border is added (like when an input is active) the border is 2px.

    Notice the navigation bar at the top of the page as it follows you down— 2px border at the bottom.

    Buttons, when they have a border, always have a 2px border (as opposed to 3px previously).

    Everything that has a border is consistently a thickness of 2px. A small detail that subconsciously communicates that this is not some hacked-together, disconnected quilt of a website. It’s a unified, coordinated and intelligently built entity.

    That’s what every website owner should strive for.

    One Last Thing

    If you’ve made it through this entire article, I applaud you. If you’re fascinated with this sort of thing, you’ll probably like taking a look at the ever-evolving Style Guide page I’ve created.

    It will be constantly evolving just as this site does and might be a good way for any aspiring designers (or digital do-it-yourselfers) to find inspiration or learn how I approach things.

    Now, go build something beautiful yourself.

  • Method to My Madness: Redesign 2015

    Web design is more than making things look good. It’s a series of thoughtful choices that yield a beautiful and functional end result.

    This is the start of the 4th year that this blog has been in existence. Every year I have done a redesign and every year I grow because of it.

    This year was no exception.

    In fact, this year was the most fruitful redesign I’ve ever done as far as process, performance, and design choices. For a web designer, that is a huge deal.

    Much like the shoemakers children, it can be difficult for us web designers to find time for our own projects. With more than enough work serving clients, I had to make this process quick and efficient.

    Some Quick Stats

    I thought it would be fun to show you some of the statisticals that went into this redesign process.

    • Design time (Photoshop): 2hrs
    • Feedback given: 12 critical suggestions
    • Design time (code): 12hrs
    • Lines of code: 3,454
    • Timeframe: 72hrs

    Given that last year’s redesign was a six-month process, the fact that I managed to tackle this in under three days was a miracle. I felt a little bit like John Wick during this process.

    People to Thank

    This process wouldn’t have been nearly as fun, educational or effective without a handful of friends.

    To make sure I could fully wrap my head around the Genesis framework (which is what this site is built upon) I commissioned the lead designer, Rafal Tomal. I met with him for an hour to teach me about some of the aspects that I hadn’t fully grasped. It was an incredible session and I’m super grateful for his help!

    My good friend Danny Caudillo was instrumental in helping me to become a professional designer. The guy has taught me more about Photoshop than I’ll ever be able to write about. He’s also one heck of a web designer.

    And whenever there is something that I can’t figure out, the first person I bug ask is Nicholas Cardot. He is the genius developer behind our Social Warfare plugin.

    And lastly, I got some last-minute critical-assistance from David Kutcher who made me aware that my typography wasn’t loading properly. You’ll see just how ironic that is as you read the rest of this post. Thanks David!

    A Series of Thoughtful Choices

    Whenever you begin a design process you have to start with the message. What are you trying to communicate and who are you trying to communicate it to?

    This is the most difficult part, and often one people either skip or don’t dive deep enough on. Thankfully I’ve been growing my audience and building my brand with this in mind for the last 4 years. I only needed to spend a little time refining the message.

    I kept it simple— dustinstout.com is a place where people come to get advice, tips, resources and creative inspiration for their online efforts. So any design choices I made had to be content-focused, clutter free, and visually engaging.

    By the way: The biggest reason I was able to accomplish this redesign so quickly is mostly due to the fact I’m using a Studio Press [aff link] theme as my starting point. This saves me hours of design and development time and they even look great right out of the box.

    Typography

    One of the most important design choices you will make for your website is the typography. I recently heard one of my design idols say,

    “Web design is 90% typography.” -Chase Reeves, Fizzle.co

    I agree with him. In fact hearing him say that took me on a journey to look into what other people had thought about that philosophy and I ended up finding a great blog post from iA titled Web Design is 95% Typography. Well worth the read, and still relevant even 9 years after it was written.

    With that in mind I knew there were some shortcomings with last year’s redesign and my typographic choices that I wanted to rectify this year.

    The typefaces I decided on are:

    • Open Sans
    • Playfair Display

    Both of these typefaces are provided by Google Web Fonts completely free. I highly recommend using Google Web Fonts in your own designs.

    The primary driving typeface that you will see is Open Sans. Its smooth, crisp lines make for a great general reading type. This font will be used for body, paragraph, calls-to-action, and most headline text.

    To compliment the primary font I’ve chosen Playfair Display to add a bit of flare to specific text such as quotes, certain headlines, and the occasional important text. I really loved the curved lines and the motion that the type creates in contrast to Open Sans straight lines.

    Staying true to my article about Creating a Stunning Reading Experience I have taken great care to make sure my paragraph text doesn’t exceed 75 characters per line and has a minimum of 1.5 line height. I still have a bit of tweaking to do on smaller screens, but it’s about 98% complete as I write this.

    Action Inspires Action

    One of the theories I wanted to put to the test with this redesign was this idea that action inspires action. Meaning,

    When an actionable item shows interactivity, it’s more likely to be acted upon.

    Or in other words— make it obvious that your calls to action are interactive. If they look static, it’s easy for a user to miss that it’s actionable.

    So when I crafted the buttons, the blog post featured images (on the blog page) as well as popular post links there is a consistent subtle hover effect. When you place your mouse over certain elements that are clickable, they change subtly, showing you that they’re interactive.

    While this theory isn’t backed by loads of research, I know for me (and a handful of others) this much is true; when I hover over something and it interacts with my mouse, it catches my attention and I’m much more inclined to take further action.

    So I hope you enjoy my delightful little hover effects. I guess only time will tell if action inspires action the way that I see it.

    The Home Page

    The home page has evolved drastically since I started dustinstout.com. When I began this blogging journey the home page was simply where the blog posts began. No featured content areas. No hero images. Just the blog.

    Last year I decided that the home page was going to be more than just the first page of the blog. The home page was going to be the place where I gave people context about where they’ve landed.

    The large majority of people visiting dustinstout.com were landing on a blog post. The odds are they’ve gotten a bit of context before clicking through either on a social link, Google search result or an email. They then get to read the blog post and get a feel for what the site is about.

    For those who land on the home page as their first touch point, I felt that they needed a bit more context, a bit more of a story. But even in last year’s redesign I still included the latest blog posts as the second element on the page when a visitor scrolled.

    In this new version, I’ve made the home page entirely about context and the story of what dustinstout.com is. I’ve also included a few pieces of Social Proof to help show some degree of credibility/authority.

    This will be a constant work in progress as I test what works and what doesn’t.

    The Blog

    One of my biggest shortcomings in the last iteration of dustinstout.com was the actual blog archive. Not individual blog posts, but the chronological list of blog posts, otherwise know to web developers as the ‘loop’.

    I’ve taken great care to ensure a reader’s experience is both delightful and as frictionless as possible.

    Blog posts are displayed with only their featured image and title, in a chronological list. You’ll notice (on desktop) hovering over a featured image displays that interaction I was talking about above.

    I decided to leave out the content, only using the featured image as a way of cutting clutter and keeping things simple.

    What you’ll also notice about the blog archive is the return of the sidebar!

    Sidebar

    Last year I abandoned the sidebar altogether. A traditional pillar of blog design was no longer an important part of my strategy.

    I was inspired to do this by Medium, which also inspired me to include the full-screen featured images on every blog post. For me, it was about making sure that the primary content was distraction-free.

    While most pro-bloggers gasp and cringe at such a decision, I found it to be a relief. My sentiment was confirmed as I got countless compliments from people who loved reading my blog posts because it was easy and clutter-free.

    Well I decided to bring the sidebar back in, but only on the blog archives. I figured that if people are scrolling through blog posts chronologically, maybe they could benefit from some helpful items or suggestions in a sidebar.

    I’ve made sure though that individual posts and pages maintain their full-width, no sidebar layout though to ensure the main content remains the focus.

    Category Archives

    Another sore spot in my last design was the poor state of individual category archive pages.

    When you want to read through a specific category of posts you can use the navigation links at the top of the page and go to the archive list for that exact category.

    Blog posts are displayed chronologically with a description of the category at the top of the page. Additionally, I decided to keep the sidebar off of this page and give a small preview of each blog post.

    I made this choice based on the fact that I feel a reader must have a very specific purpose if they have navigated to a category archive. They likely won’t need extra context or suggestions that a sidebar would likely give.

    General Page Template

    In this version, pages are no longer given the full-screen featured image rule. I felt is was a bit much in the last design and decided to keep pages simple with clear purpose.

    Simple enough? Good.

    Search, Glorious Search!

    When I launched last year’s design I had great feedback from Debi Stangeland about the lack of a search function. I knew it was an issue, I just didn’t have the time to tackle it.

    I’m happy to say that not only have I tackled that issue with the new design, but I was able to do it in a way that is beautiful and seamless to the user experience.

    I cannot take any credit for it though because it was all thanks to a great (and timely) tutorial written by Sridhar Katakam. His post on How to Add an Animated Search Form in Genesis was exactly what I followed, with a few small styling tweaks. I was so excited when I saw that post, and am extremely happy with the result.

    Refining Your Brand and Voice

    Outlining this process, my thoughts and choices is as much for me as it is for you. By no means do my choices make sense for everybody, but I hope you can pick up on the intentionality of these choices.

    Don’t just do things because they look good.

    I got the shirt you see above from my friends at Impact Shirts. The owner, Don, gave it to me as a Christmas present this past year knowing I’d get a kick out of it!

    Even as an opinionated, slightly OCD designer myself, I don’t assume anybody is right without a good explanation.

    The choices you make in your web design and in your writing are all part of your story. How you’re telling that story is crucial in creating the brand you want people to perceive.

    From choosing the right colors to ensuring that people can read your words with clarity to the visual content you produce, be thoughtful and intentional.

    And don’t forget to have a little fun while you’re at it.

  • How to Make Visual Content That Doesn’t Suck: 3 Easy Principles

    Three basic design principles to help you create stunning visual content.

    So you want to create awesome images that get attention and, more importantly, get shared?

    You’re not a designer though? Is that right?

    Well strap in, because you’re going to get a crash course in visual design without any fluff. Plain, simple, practical design principles to get you creating fast.

    I recently was the guest for #BufferChat where I was asked what the most important “design rules” to follow were. My answer was balance, framing, and contrast.

    If you understand these three fundamental concepts you can create stunning visual content that people will love.

    Balance is Beauty

    Our brains are programmed to see symmetry as beauty. But when it comes to visual design both traditional symmetry and asymmetry can both be beautiful as long as a balance exists.

    Let’s apply this concept to creating social visual content.

    When creating a piece of visual content you usually have a combination of the following elements:

    • background image/photo
    • text/title/tagline
    • logo/watermark/branding

    Assuming your background image/photo was obtained from a high-quality source (like the ones mentioned in my Best Places to Find Free Images), the photographer has probably already taken the time to balance out the shot. All you need to do is position your text and/or branding in a way that doesn’t unbalance the visual aesthetic.

    Start by imagining (or use a visual creation tool to impose) guidelines marking out where the center of the image is.

    Then you’ll be able to see where the subject or focal point of the image is and add your text in such a way as to balance it out.

    Example:

    Okay, that one is pretty easy because the image is already perfectly symmetrical. So all you need to do is put your text in the center and call it a day.

    But what happens if your background image isn’t perfectly symmetrical?

    I’m glad you asked!

    Asymmetry can be just as beautiful as symmetry as long as you balance it all out. Think of it like a set of scales. If the subject or focal point in the background photo are on the left side, then when you add your text you’ll want to put it on the right side.

    In the example above, you see that the car is the subject of this background photo. The subject covers the top-left portion of the image so to balance it out with our elements we put them in the bottom right.

    Here’s a few more examples to help you get the hang of it:

    It doesn’t always have to be an exact science, but just remember to try and maintain the illusion of visual balance.

    If the image isn’t balanced it can give the impression of instability making the on-looker feel like something is wrong. If you’re trying to evoke a feeling of instability or something similar, then go ahead and throw balance out the window.

    But if you want your image to communicate beautifully, create visual balance between the photo/background and the text/logo elements.

    [clickToTweet tweet=”#VisualContent #ProTip: Create visual balance between background & text elements.” quote=”#VisualContent #ProTip: Create visual balance between background & text elements.”]

    Make sense? Good, let’s move on.

    Framing the Photo

    What I call framing is essentially creating an invisible frame around the outer most part of your image in which no elements are touching. Think of this as your non-negotiable white-space.

    In the image above I’ve made my framing area red so you can see how I’ve applied it to the templates you’ve already seen.

    Framing is especially important when you’re placing elements close to the edge of an image. If everything is in the middle you usually don’t need to worry.

    In order to process imagery, our brain immediately looks for structure— something we can grasp on to. If our brains can instantaneously identify the structure we can interpret what we’re seeing quicker and with more ease.

    This also ties back into balance.

    Consistent spacing of elements (or in other words, framing) displays a set structure.

    Notice how when you first see the image without the frame, your brain has already identified where the frame is.

    When you place text or watermarks too close to the edge (or right against the edge) of an image it feels constricting. For people who are claustrophobic (or overly OCD designers like myself), it can cause tension.

    When the framing is inconsistent it can also throw off the balance which takes us back to square one.

    [clickToTweet tweet=”#VisualContent #ProTip: Frame your images & text, giving clear, consistent spacing for all text elements.” quote=”#VisualContent #ProTip: Frame your images and text, giving clear-cut and consistent spacing for all text elements.”]

    If you’ve already downloaded my social media image templates then you’ll notice I’ve included the guidelines for the framing area for you. You’re welcome. 😉

    Contrast is Key

    Contrast is probably the hardest concept to explain. So let me start with a visual:

    Contrast is most easily explained as the difference between two or more things. When it comes to visuals, we’re talking about the visual distinction between the background and the subject matter. The closer the two elements are to blending in, the lower the contrast. The lower the contrast, the harder they are to distinguish.

    In the context of visual content and social media images your goal is to communicate a message. If that message is difficult to read, you’re shooting yourself in the foot.

    When working with photo backgrounds though, it can sometimes be easy to accidentally position your text in a way that makes it difficult to read.

    Before finalizing your images always be sure that they’re fully readable. You may need to play with the text color a bit or even move the text around to ensure it doesn’t disappear into the background.

    [clickToTweet tweet=”#VisualContent #ProTip: Make sure your message has enough contrast to be clearly understood without eye strain.” quote=”#VisualContent #ProTip: Make sure your message has enough contrast to be clearly understood without eye strain.”]

    Bonus tip: One of the easiest ways to create good contrast is to add a semi-transparent layer of black (or any dark color) between the background image and text.

    Conclusion

    If you manage to create an image with balance, framing and good contrast then your message will not only be effective, but beautiful as well.

    As always, practice makes perfect so give it a go. Have some fun. Use one of my recommended mobile apps for visual content or one of the desktop apps that I’ve recommended as well.

    In the comments below, share some visual content pieces you’ve created! You can leave a comment by clicking here.

  • The Best Tools to Create Amazing Visual Content

    Creating visual content that grabs people by the eyeballs doesn’t require a degree in design as long as you have the right tools.

    You need to create great visuals in order to hook your audience by their eyeballs and draw them into your content. Their brains will connect with your image 60,000 times faster than your brilliantly crafted headline.

    So how can you create these beautiful, eyeball grabbing images without spending a fortune? Well I’ve come up with a small list of the best desktop tools to create visual content.

    This is part of my Essential Guide to Sharing Images Online series. Be sure to catch the rest of the series as well!

    All of the following apps have been tested to the max by myself and some of my audience, clients and friends. If an app or software did not make it into this mix it’s either because it did not pass my quality standards or I flat out wasn’t able to research it. 

    The Best Online Apps

    The apps in this category are web apps. This means that you can only access them through your internet browser and cannot be accessed offline.

    SoVisual.co

    For the fastest, easiest, and most non-designer-friendly way to create stunning social media graphics, look no further than SoVisual.co.

    This free web app focuses on simplicity and speed. With a huge (and growing) library of more than 1,000+ social media templates, your work is cut out for you. On top of that, each template you customize is automagically sized for every platform. Some other automagical features include:

    • Auto-sized text (so you never have to tinker with sizing toggles)
    • Auto-colored to your brand settings
    • Auto-cropped and auto-positioning for uploaded photos
    • Auto-inserts brand logos, social handles, names, and website links

    SoVisual.co also does one thing better than any other app out there. With most design apps, what you have is an overwhelming amount of individually crafted templates. Which is great in that you have a lot of variety. However, when you’re creating a brand on social media, you want your designs to look consistent and coordinated, right?

    The designers at SoVisual.co are focused on creating “Collections” of designs. These highly-coordinated sets of designs allow you to create a consistent brand style that sets you apart from the rest of the disjointed social media designs. This builds brand recognition and gives off a much more professional impression.

    If you’re looking for a faster, easier way to crank out some quick social media graphics, SoVisual.co is your new best friend.

    Creating a beautiful graphic is as easy as filling out a form.

    No need to tinker with resizing text, repositioning elements, or sorting through a thousand different buttons, levers, and toggles.

    Pick a template, type your text, hit “Create.”

    And as the creator of SoVisual.co, I’m obviously biased. But it’s honestly the app I have been wishing someone had created sooner.

    Because lots of times you just don’t need a full suite of graphic design tools to get a job done. Sometimes you just want to create a quick quote graphic. Or maybe turn a tweet into an image.

    You don’t need to bring out your entire toolbox when a hammer will suffice. That’s what SoVisual.co is among all these other great visual content tools.

    Canva

    At this point, Canva is a household name. It is easy to use, has a boat load of professional grade templates and is loved by many.

    Canva greets you with a number of options for your canvas based on what you are going to create. From a general social media image to a Podcast cover, presentation, blog graphic, social media covers, and more.

    This really makes it easy to get started quickly without having to memorize lots of image sizes. (Then again, you really only need these three image sizes.)

    Once you pick your canvas size, it’s off to the editor where you can add color effects, text, crop, and add all sorts of things to create the perfect visual.

    You can use all of Canva’s features completely free of charge. There is also a large database of free stock images and designer templates that you can use in your designs. However, some of the design templates and stock imagery have a price.

    Once you’re finished, Canva then makes it easy to save to your computer or share it straight out to Twitter or Facebook.

    Crello

    Vista Create is a very popular and simple graphics editor. It has a comfortable and simple interface, a large library of ready-made templates for advertising and promotional materials.

    Another advantage of this design tool is the possibility to create animated images. With a collection of over 30,000 free templates, 29 different print and web-based image formats, 10,000 vectors and over 60 million images you can create anything from social media posts to posters.

    Creating content with Crello is a lot of fun and would be a piece of cake to everyone.

    PicMonkey

    screenshot of picmonkey.com

    PicMonkey is very similar to Canva in that it’s free to use, has a large number of templates, images, and graphic design features that are either free or paid. The difference is PicMonkey offers a monthly subscription plan to unlock the premium features whereas you only pay for each premium item you want with Canva.

    I’ve also found that the user interface is a bit clunkier with PicMonkey and it took me longer to get used to than Canva. This may be due to my personal style though, so do give it a try and see if the workflow vibes with you.

    Once you’re done with your image on PicMonkey, you also have the ability to share it to your social networks (more options that Canva), which is quite convenient.

    Photoshop Express

    screenshot of photoshop express website

    Adobe, in all their generosity, have made a free version of Photoshop available to all called Photoshop Express. In it you have many of the professional grade features that professional graphic designers use on a daily basis.

    In all honesty, most people could get by using only this software for basic graphic design and visual content creation. Although it doesn’t offer a lot of the power that the full version of Photoshop has (such as working with layers), it’s still quite powerful.

    What makes it different from Canva and PicMonkey is that it doesn’t have any sort of marketplace where you have access to designer templates and stock images. You will have to find all that on your own and upload it into Photoshop Express.

    Pixlr Editor

    screenshot of Pixlr website

    Pixlr Editor is very much like Photoshop Express but far less features and a tad more clunky on the user interface. However I have been told that it’s pretty intuitive if you’ve never worked with Photoshop before.

    What it definitely has over the previous options is that it’s the first (and only) web app that allows you to work with layers in a similar fashion as with Photoshop. This comes in handy when you are working with a lot of different elements and want to select one of them quickly without disturbing the other elements.

    If you find yourself working with a lot of elements, Pixlr Express is probably the way to go for you. (It’s also has a mobile app.)

    Best Desktop Apps

    These apps are available for download so that you can use them offline.

    Gimp

    Gimp is probably one of the oldest free graphic design softwares out there. It is very similar to Photoshop and for anyone who has experience with Photoshop, it’s a rather easy transition.

    Gimp works with pretty much any operating system and has a wide variety of features. It’s also got extensive documentation and guides. Being that it’s been around for a while also means that there’s probably more than enough tutorials and tips written about it to help you shorten your learning curve.

    Paint.net

    Although I’m not too fond of Paint.Net myself (it feels like it was built in 1990 and never got updated), many people have found it’s minimal toolset and ease of use to be very helpful.

    You’re able to work with a variety of image formats and has a similar feel and function to  Pixlr Editor and Gimp. I know of a few people who do graphic design work professionally that use it on a regular basis.

    The Best Paid Apps

    Now if you want to get a professional grade editing software and don’t mid paying a small premium (compared to Photoshop), my two recommendations are Sketch and Pixelmator (Mac only).

    Pixelmator

    If you’re wanting to get into serious graphic design power and don’t want to spend more than $30, boy are you in luck! Pixelmator packs a ton of power for a very small price. There’s not much that you can’t do with Pixelmator.

    It also has a companion iPad app that could come in handy if you create visual content on the go.

    Sketch

    Sketch is gaining a lot of ground with web designers and user interface designers. It has a very powerful set of features for designing complex projects. It is all vector based and employs cutting edge workflow to make the process of designing super efficient.

    Go Grab Some Eyeballs!

    Now it’s time for you to go test out some of these tools and see which one fits. Not everyone will take to the same types of workflows or features. Find the one that works for you and use it regularly.

    The more comfortable you get with the tools you use, the better your visual content will get.

    Are there any apps or software you would add to the list? Have a question about how to use a specific piece?

  • 7 of the Best Mobile Apps to Create Visual Content

    Creating visual content on mobile can be fast and easy with the right apps.

    Visual content is a powerful way to share a message that catches people’s eye. But you don’t always have access to a desktop computer when inspiration strikes.

    Whether you just want to share a great quote you just heard, or you want your photos to look like they were shot by a pro, I’ve put together this list of the best mobile apps to create visual content.

    This is part of the Essential Guide to Sharing Images Online. Don’t forget to catch all the posts in the series!

    The Apps

    There are tons of apps out there that will allow you to create visual content. I’ve focused this article on only the best of the best because the last thing you need is a list of 101 mobile apps that all do the same exact thing.

    Since I only own Apple products three of the apps listed are iOS only. I’ve done the work though to find those apps that are on Android as well and I’m sure you can find alternatives if need be.

    SoVisual.co (New)

    For those of us creating social media content daily, this is the fastest and easiest way to create beautiful social media graphics. Creating a graphic is as simple as filling out a form.

    The “no-fluff” approach to creating quick graphics doesn’t even require you to sign-up or login if you don’t want to. Use the search / filter or just scroll through and find the template you want. Fill out the text fields, upload images (if necessary) and click “Create.”

    The app also generates multiple sizes for each graphic, so you don’t have to waste time resizing, cropping, or reworking fore each platform.

    This is definitely and app for the efficiency nerds who hate spending too much time tinkering with complex graphic design tools.

    Price: Free (Paid options)
    Platforms: Mobile-friendly Web app

    VSCOcam

    By far my favorite app for taking and editing photos. The camera allows you to select separate focus and exposure spots– which is really helpful when you have a tricky lighting when trying to shoot.

    But the best part about the app is it’s professional grade filters. Their photo filters put every other app to shame (sorry Snapseed). It also allows you to go in and fine tune the images with a number of adjustment tools.

    Nearly every single photo I take goes through VSCOcam.

    Price: FREE
    Platforms: iOS + Android

    Phonto

    A fairly extensive set of editing tools. It’s both easy to use and quick without a whole lot of fuss. Despite having a wide variety of options the user interface is not difficult to navigate and get to the things you really need.

    The thing I love most about it is the wide variety of fonts available. Some of the other apps on this list have a very limited amount of available fonts without upgrading to a paid version.

    Price: FREE
    Platforms: iOS + Android

    Pixlr

    This app probably has the most comprehensive set of tools and features. Text, filters, effects, overlays, themes, clip art… lots and lots of stuff. You can even choose the resolution at which the final image is saved. Very handy for situations where you want to limit the image size.

    So if you’re looking for the widest variety of options, this is the app you want.

    It’s greatest strength though is also it’s greatest weakness in that it’s overly complex. I have only found myself going back to this app a handful of times when I really needed some in-depth customizations.

    Price: FREE
    Platforms: iOS + Android

    Over / GoDaddy Studio

    One of the oldest apps I’ve used, Over is now owned by GoDaddy. Like Canva, this app provides a giant library of customizable templates with dozens of bells and whistles to assist you in making every piece exactly what you want it to be.

    The big difference for this app is the ability to create a “Social Site” from within the app.

    Price: FREE
    Platforms: iOS + Android

    Mextures

    Add some serious drama to your images with professional grade overlays, light leaks and gradients using this app. You can also combine effects and create formulas that you can use over and over again to create a consistent style.

    The app also features collaborative editing and sharing of formulas which can be a lot of fun if you want to have multiple people contribute to your creations.

    Price: $1.99
    iOS

    Hyperlapse

    Instagram’s newest app that allows you to create time-lapse videos. Now, it’s unfortunate that this app came out only a few weeks before iOS 8, which adds this feature into the native camera app. However, the Hyperlapse app adds a level of control that the native iOS function does not— the ability to adjust the speed of the time-lapse after you capture it.

    These can make for an interesting variant to just a plain old video.

    Price: FREE
    Platforms: iOS + Android

    Sponsored: Desygner is a graphic design tool for non-designers that helps simplify content creation on your phone, tablet or laptop.

    Last word

    When sorting through all these apps, you’ll want to find the ones that work best for you. Not every app will work best for you and how you approach creating visual content.

    My best advice is find a few that you like the best and stick with them. Develop a style that is consistent and that people will begin to expect from you. When you develop a style that you and your audience loves, your brand will become all the more recognizable, distinguishable, and powerful.

    Any apps you would add to the list? You can leave a comment by clicking here

  • Method to My Madness: Blog Redesign 2013

    There’s more to web design than just making things look pretty. There’s a method to the madness and in this post I want to share some of my redesign madness with you.

    It’s been one full month now since I released my new blog design into the wild. By the grace of God, I have got nothing but positive feedback! In fact, I’ve had several requests from people to have me build them something similar (if not exactly the same).

    My hope is that through reading this you may understand not only what has changed, but why. This is so you can take these same concepts and philosophies and incorporate them into your own blog design.


    Why the redesign?


    You may have been around about 6-7 months ago for my last redesign. This was right when [st] 3 was released. The old design served me well and even brought me a great deal of business.

    As a web designer though, my personal site is my greatest showcase. Therefore, I decided that it was vital for me that my blog showcased my skills as well as my values as a designer and consultant in the most up-to-date way possible.

    I’ve decided that every year, at the beginning of the new year I will unveil a new design for dustinstout.com. I think this is infrequent enough to not be overbearing on my readers and just frequent enough to keep up with the latest web trends.


    What all has changed?


    I’ve broken this down section by section. While I don’t list every single little detail, it should give you a general idea of the major modifications and the reasons for them.

    Bigger Everything

    The first thing you probably noticed is that everything is bigger. As opposed to being a standard 960px wide, I decided to go with a 1200px wide presentation for the desktop version.

    Optimal reading experience is the goal. Making things as readable for you as possible. I don’t want you feeling like this when you visit my site…

    Instead, I want you to feel like this…

    I want you to be able to comfortably sit back and not have to hunch over your computer screen to read through my posts and pages. Hooray for good posture!

    This bigger-ness is further enforced by the other changes that follow.

    No More Containers!

    I got rid of the content containers. I found that the blogs that didn’t have containers around their content felt more open, more free, more solid and yet more soft and inviting at the same time.

    This idea was solidified by 37 Signals’ blog redesign. They did a great job of explaining it, and I agree with them 100%. They propose that content that is held within a container feels more “temporary”, whereas placing it openly on the background of the site seems to give it a sense of worth.

    Crafting for Social

    My previous design incorporated a floating share bar (courtesy of Digg Digg) that remained on the left side of the blog post and floated along with you down the screen. While it was functional, and a very popular implementation among socially savvy sites, it felt like it was imposing on the reader’s experience.

    On mobile devices, the bar was just off-screen and completely un-usable. Not very practical.

    So instead, I added the social sharers at the top of each blog post and below each blog post. This solved the mobile issue and also got out of the reader’s way while scrolling through the blog post.

    You’ll also notice that the first set of share buttons are directly in the title of each blog post. I had this revelation thanks to my friend Peg Fitzpatrick who kindly tested out my new design before I released it publicly.

    She brought to light the fact that if a reader is on the home page and doesn’t know to click-through to the full post, they have no easy way of sharing a post. I had never thought of that before. If someone wanted to, for instance, add it to their Buffer for later, they would have to click-through the post, wait for it to load then share it. Not exactly seamless.

    So having the sharers directly in the title of the post allowed people to be able to share from the home page, should they so desire. More seamless sharing.

    More Visual

    Imagery helps readers to connect on a different level with your content. It engages a different part of the brain making the connection to the content stronger.

    Thanks to the rise of Pinterest, Google+ and other social networks that emphasize imagery, the web has got a lot more visual. I’ve always added a feature image to my blog posts, but I believed it was time to take it to the next level.

    Since the site is bigger it allows for bigger images. Bigger images make for better sharing on sites like Pinterest and Google+. And as research (and recent viral success) shows, images get more attention and are shared more than just plain text.

    As a graphic artist, it is yet another opportunity to showcase my work and the power of visual communication.

    Even Better Typography

    I was intentional before about typography, but I’ve now made some significant tweaks to make reading text even more pleasant. Obviously the bigger site allows for bigger font, but that’s not all I did.

    Now, if you’re on a Windows device, you may not be getting as much of an improvement as those on Apple devices, but you should still notice a change.

    My titles are bigger and bolder than ever, along with my sub-headings. This allows for easier scanning for those in a hurry, and helps break things up a bit.

    The paragraph font is my good friend Helvetica (or Arial for Windows users) but noticeably thinner. I dropped the font weight a bit to give it a crisper, lighter feel.

    De-clutterification

    In an attempt to make things less cluttered, I looked for every opportunity to get rid of unnecessary visual elements. The first thing I got rid of was my header.

    Instead of having a big header image taking up space between the navigation bar and the content, I decided to free up that space and just nix the big header. Then I moved my logo into the navigation bar, making sure that my brand was still prominent.

    The next thing I started chopping away at was my sidebar.

    I reduced the number of ad spots I offer in my sidebar. This makes the few spots that I do offer more valuable and gives me less to manage. Both of those things are good for business.

    I also decided to nix my “Recent Posts/Comments” widget. While it was a very pretty widget, I realized it just wasn’t necessary.

    Meticulous (borderline obsessive) Responsive Engineering

    Mobile continues to rise. With smartphones overtaking the marketplace, more people are spending their browsing time on their mobile devices. For this reason, it is vital that your blog design caters to this crowd.

    Mashable talks about this in the explanation of their recent redesign. Taking their brilliant advice for “mobile first” I’ve also made sure to design for the best possible experience on every screen size.

    This is made possible through [st]’s responsive framework and a lot of testing. I have specific styles, sizing, and optimized settings for each possible screen size. This wasn’t easy, but it was well worth it.


    Sites That Inspired Me


    To make sure credit is given where it’s due, here are the primary sites that served as inspiration for my redesign:


    Final Thoughts


    Now as a designer it’s always tempting for me to tinker and make continuous changes. However, everything I’ve outlined above, from a design perspective, is pretty set in stone for the next year. I may make some minute changes here and there (that most people won’t notice), but nothing major.

    There are a few functional features that I’m working on developing that will enhance some of the things I’ve talked about above, and as soon as I am able to roll those out I’ll be sure to update you again.

    I hope you have enjoyed the changes.

    Bonus: Free Child Theme for subscribers!

    Now that my new design is fully integrated, I’m now going to be giving away my old child theme to my subscribers. I will be sending out the download link in the next week so if you haven’t subscribed yet, now would be a good time. The child theme does require that you already have [st] installed in order to use it, in case you aren’t familiar with what a Child Theme is.

    What is your favorite part of the dustinstout.com redesign?

  • Social Media And Blog Design

    Have you ever thought about social media as being a key part in your blog design? If not, then let me be the first to tell you, it’s an essential piece of your blog design.

    There are some experts who will tell you that making your social media links prominent in your web design is a bad idea. They’ll tell you that you don’t want to place anything in a users path that will lead them away from your site. This thinking is archaic, and out dated. It is also exceptionally irrelevant for a blogger. Let me explain:

    (more…)