Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 20 2014

04:46

40 Placeholder Content Generators for Testing Project Layouts

Advertise here with BSA


Both websites and mobile projects often benefit from demoing content. But instead of spending your time slavishly copywriting, why not incorporate Lorem Ipsum as a method to generate filler text? Over the years many websites have popped up to offer variations on this filler content. Even static images can be embedded on-the-fly with these webapps.

I’ve scoured the Internet putting together a collection of 40 intriguing solutions for content generation. There are plenty of text-based solutions along with some image placeholders as well. Most people end up sticking with 2-3 they like the most. But it never hurts to keep a variety of resources in your designer toolbox.

Cupcake Ipsum

cupcake ipsum freebie generator website

Cheese Ipsum

cheese ipsum lorem generator website

Wikipsum

wiki ipsum yellow flashy website design

Ipsum.me

ipsum me webapp generator filler text

Metaphorpsum

metaphorpsum metaphors filler text ipsum

Lebowski Ipsum

big lebowski lorem ipsum generator

IT Crowd Ipsum

british tv show it crowd lorem ipsum generator

Bluth Ipsum

bluth ipsum arrested development generator

Coffee Ipsum

coffee ipsum website generator text

Legal Ipsum

legal policy text lorem ipsum generator

PokéIpsum

Pokémon lorem ipsum generator webapp

Designer Ipsum

designer terms filler text lorem ipsum

Cat Ipsum

cat ipsum feline text generator

Pirate Ipsum

lorem ipsum generator pirate speech terms

Hipster Ipsum

hipster ipsum terms lorem design generator

Fashion Ipsum

fashion ipsum lorem generator webapp

Startup Ipsum

startup text context design generator

HTML Ipsum

html ipsum design homepage writing ui inspiration

SEO Ipsum

seo ipsum lorem text generator webapp website

Space Ipsum

dark space ipsum text context generator

Hairy Lipsum

hairy lip mustache generator text lorem ipum

Corporate Ipsum

corporate ipsum design generator website

Lorizzle

lorem ipsum gangsta text generator webapp

Quote Ipsum

quotes ipsum webapp generator website

Robot Ipsum

robot ipsum generator webapp website

Samuel L. Ipsum

pulp fiction movie text generator lorem ipsum

Fillerati

fillerati faux latin website generator lorem ipum

Hacker Ipsum

hacker ipsum text generator website

Cambelt

cambelt placeholder image generator

Fake Images Please

fake images please website generator placeholder

Flickholdr

flickr holder flickholdr webapp generator images

Lorem Pixel

lorem pixel generator text images webapp

Placehold.it

placeholder quick simple filler image generator

Imageholdr

image holder images generator placeholder webapp

Nice Nice JPG

nice nice jpg generator images webapp

Dummy Image Generator

dummy text image generator webapp ui screenshot 2014

hhhhold

hhhhold image hhhold generator webapp filler content

FPOImg

fpo image generator content placeholder webapp

Placebox.es

placeboxes image generator simple webapp

Pipsum

text generator lorem ipsum webapp homepage


Advertise here with BSA

December 02 2013

04:43

How To Code an Image Zoom Hover Display with jQuery

Advertise here with BSA


For typical e-commerce websites you will often notice a detailed photo display when hovering an image. The zoom effect helps prospective buyers to see more of the product when deciding if it’s worth purchasing. This familiar image zoom effect can be applied to many other websites just to provide a better user experience.

In this tutorial I want to introduce a very simple jQuery plugin called EasyZoom. It’s all free and open source to download right from Github. The tool makes it super easy to create your own image zoom panel, which can appear on mouseover or be tied onto another event handler. Check out my live sample demo to get an idea of the final product.

jquery easyzoom plugin hover images tutorial preview

Live DemoDownload Source Code

Getting Started

First you’ll want to download the jQuery plugin codes directly from Github. I’ve created 2 separate folders in my working directory for css and js files. You specifically need to copy over easyzoom.js and easyzoom.css. Also download or link to a CDN with the latest version of jQuery and include all these files into the document head.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Image Hover Zoom Effect - DesignMag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/easyzoom.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/easyzoom.js"></script>
</head>

My own custom styles.css stylesheet is used to create the page layout. EasyZoom does have its own features and classes which are targeted inside the other stylesheet. You can obviously choose to overwrite them if you need the design in a slightly different manner.

  <div id="w">
    <h1>Image Zoom Magnifying Effect</h1>
    <p><em><a href="http://www.flickr.com/photos/rykneethling/5679896974/">featured image source</a></em></p>
    
    <h2>@2x Zoom</h2>
    <div class="easyzoom easyzoom--adjacent">
      <a href="images/autumn@2x.jpg"><img src="images/autumn.jpg" alt="autumn road" width="480" height="320"></a>
    </div>
    
    <h2>@3x Zoom</h2>
    <div class="easyzoom easyzoom--adjacent">
      <a href="images/autumn@3x.jpg"><img src="images/autumn.jpg" alt="autumn road" width="480" height="320"></a>
    </div>
  </div><!-- @end #w -->

In the HTML code you will notice the container object uses a class .easyzoom. By including a secondary class for .easyzoom–adjacent it will force the image zoom to appear next to the image. Everything is self-contained inside the HTML where the larger image URL will be inside a containing anchor link.

There are some extra classes for displaying image zoom effects off to the side, or right within the photo itself. Both of these samples are available in the Github archive if you want to see the code examples.

Common CSS Styles

There isn’t a whole lot of detail worth explaining within the EasyZoom stylesheet that can’t be understood with a quick glance. Container divs are positioned absolutely with relativity to the outer container. This way it’s simpler to ensure the hover image will appear off to the side, and you can adjust these coordinates using properties such as top: 15px.

.easyzoom-flyout {
	position:absolute;
	z-index: 100;
	overflow: hidden;
	background: #fff;
}

/**
 * EasyZoom layout variations
 */
.easyzoom--overlay .easyzoom-flyout {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.easyzoom--adjacent .easyzoom-flyout {
	top: 0;
	left: 100%;
	width: 70%;
	height: 70%;
	margin-left: 15px;
}

In my stylesheet the first line includes a relative web font named Balthazar. I’m only using this in the page title for a bit of extra design spice. Everything else follows typical page resets along with a wrapper div using the ID #w.

@import url('http://fonts.googleapis.com/css?family=Balthazar');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body { 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 62.5%; 
  line-height: 1;
  color: #414141;
  padding: 25px 0;
  background: #f3f3f3 url('bg.png'); /* http://subtlepatterns.com/straws/ */
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; }

h1 {
  font-family: 'Balthazar', 'Trebuchet MS', Tahoma, sans-serif;
  color: #515151;
  font-size: 4.4em;
  line-height: 1.4em;
  margin-bottom: 10px;
  letter-spacing: -0.05em;
  text-align: center;
}

h2 {
  font-family: Arial, Tahoma, sans-serif;
  color: #676767;
  font-size: 2.6em;
  line-height: 1.3em;
  margin-bottom: 6px;
  letter-spacing: -.075em;
}

p {
  font-size: 1.4em;
  line-height: 1.1em;
  margin-bottom: 15px;
}


a { color: #85aed1; }
a:hover { color: #91bbde; }

/** page structure **/
#w {
  display: block;
  width: 860px;
  margin: 0 auto;
  background: #fff;
  padding: 5px 11px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
  box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}

My resets are based off the template by Eric Meyers and has been adapted as such. I find that some people prefer using content-specific resets rather than global ones. It all comes down to how you build websites and your own personal preferences. Customizing or editing the default EasyZoom classes will require most of your attention.

EasyZoom JS

This last bit of code should be held within <script></script> tags at the bottom of the page, before you close the body. We only need to call a single line of code in reference to the EasyZoom plugin.

$(function(){
  var $easyzoom = $('.easyzoom').easyZoom();
});

The reason for picking .easyzoom as the class selector just follows typical naming conventions. You could update this to follow another class or even a single element ID. Basically you should target an element which contains the regular image, and that tag should be wrapped around a link pointing towards the bigger image.

You might also notice in my code that I’ve setup 2 different examples. The larger images follow a naming scheme of autumn@2x.jpg and autumn@3x.jpg for being double and triple in size, respectively. You might prefer to include the largest sample image you can find, making for a better overall user experience.

Please check out the plugin’s live demo page which also includes function options and API calls at the bottom. Documentation is sparse because there isn’t a whole lot that needs customization. Using the .show() API method you can pass an individual mouse event which only displays the image zoom under certain conditions.

Overall this is a pretty simple configuration and it’s great for any website. Many other plugins also run on jQuery which makes this plugin another powerful resource for developers.

jquery easyzoom plugin hover images tutorial preview

Live DemoDownload Source Code

Closing

These code samples are not too difficult even for a beginner who has never touched jQuery. There are some alternative options that you can supply, but they’re only needed within more advanced layouts. Writing the most basic JS code will allow you to create a simple interface that works great in almost any website layout. Feel free to download a copy of my tutorial codes and see what else you can build with this plugin.


Advertise here with BSA

November 19 2013

08:00

25 Beautifully Colorful Websites

When designing a website, one of the most common challenges is to develop an effective color scheme. In many cases the sites color scheme will be determined, or at least influenced, by the existing branding of the company. However, when you’re facing decisions on color there are plenty of options. While it is always an important part of the design, color can be used to make a website stand out and attract attention.

Here you’ll find 25 examples of web designs that use a lot of color.

Clique

25 Beautifully Colorful Websites

MintTwist

Cyclemon

25 Beautifully Colorful Websites

svkariburnu

25 Beautifully Colorful Websites

PandoraBox

25 Beautifully Colorful Websites

Toasted Digital

25 Beautifully Colorful Websites

White Rhino

25 Beautifully Colorful Websites

Actualizala

25 Beautifully Colorful Websites

Inova-Ria Games

25 Beautifully Colorful Websites

Edwin Eddie Diaz

25 Beautifully Colorful Websites

Activate Media

25 Beautifully Colorful Websites

Milkable

25 Beautifully Colorful Websites

Diplomatic-Cover

25 Beautifully Colorful Websites

Draftfcb

25 Beautifully Colorful Websites

RVLT

25 Beautifully Colorful Websites

Greyp Bikes

25 Beautifully Colorful Websites

Polecat

25 Beautifully Colorful Websites

Brand Village

25 Beautifully Colorful Websites

Studio MPLS

25 Beautifully Colorful Websites

Macaw

25 Beautifully Colorful Websites

Made by Joyce

25 Beautifully Colorful Websites

Taasky

25 Beautifully Colorful Websites

Fostr

25 Beautifully Colorful Websites

ProcessWire

25 Beautifully Colorful Websites

TriplAgent

25 Beautifully Colorful Websites

For more design inspiration please see:

March 04 2013

13:30

How to Use Images Successfully – Web Design Usability Guide

They say a picture is worth a thousand words. True or not, images are an important part of any website we create. Since it is so easy to embed an image in a website (even the process of creating your own images is very easy), most websites are filled with them. There are some very good examples out there on how to deal with images in a website from different points of view, but most of the websites do not showcase positive examples. And while this is not entirely dangerous for a design, it might decrease your chances to sell, in case you have a call-to-action page, or the chances to create good reading flow. It is more a matter of details than a matter of important principles, but dealing with images should be something designers understand and apply better.

Jakob Nielsen, the expert in webpage usability, together with his company NN/g, did an eye tracking study and concluded it with an article posted on their site, titled Photos as Web Content. Their conclusions amazed the design industry and came with great answers to questions experts weren’t able to answer before this study was done.

“Users pay close attention to photos and other images that contain relevant information, but ignore fluffy pictures used to “jazz up” webpages.” - Jakob Nielsen.

Web Design Usability Guide – Dealing with Images

Indeed, users want to see photos on websites, but they want them to be relevant. They would prefer a webpage that doesn’t have visual images rather than a webpage that has lots of photos that just make it heavy and cluttered. The key in using images on websites, according to the study, is based on a few basic ideas:

  • Image fundamentals - size, composition, quality and exposure are four important things to look for in a good image. People actually look for quality in images, even the contrast makes a huge difference.
  • Effectiveness – if the picture creates excitement or interest, then it works. It is down to three characteristics:
    • Emotional appeal – does the product in the picture look good and make the user want it?
    • Rational appeal – does the image show the benefits of the product?
    • and Brand appeal – does the picture fit your brand?
  • Transmitted message – this is about the image sending the right message to the website readers.
  • Anticipated user response – this is a bit more difficult to put into practice, but the basic idea behind it is that the picture should help decision-making and create a desire for the product. We will talk about this a bit later.

Purely decorative images tend to be ignored unconsciously by our brain. Like a radar, if the images are there only as a filler, the brain will ignore them. The study concluded that pictures and images of real people or real products are automatically categorized as important and are to be studied in detail by the human brain. If you have a personal blog, people would rather see your face than a drawing or a caricature. They want to see the face of the person communicating with them, it is a matter of trust and bonding.

If you own a company, it is a very good idea to take some time talking about the people behind it – using images. It gives a personal touch to an otherwise faceless company and people dig that. People actually want to know (or at least see) who the people are behind a company. If you can afford it, invest in a good photographer and try to stay away from stock pictures (especially from stock pictures that aren’t relevant to your content). It might cost a few bucks, but it will add a lot of value to your company website.

Several eye-tracking study show that the more detail your product images have, the better the results you will have. Yes, studio pictures of a big flat screen TV work just fine, but is just fine good enough for you? People want to see details, show them!

Quality and relevance

Below I will show you some results of different studies. You will see several websites marked with heat zones. The red areas indicate where the users’ eyes were mostly focused, while the blue areas show the exact opposite, indicating what is ignored or a turn-off for visitors.

Adelphia eye-tracking

Eye-tracking study on Adelphia’s website

Besides the fact that it is an incredibly outdated design, you can clearly see that none of the heat zones are on images. It is because all the images embedded in their webpage are purely fillers. Had they been using relevant pictures, the heat zones might have been a bit different, but for now it shows how much of a waste of space images are on their site.

Another good example can be seen below. New York Magazine’s restaurant section has also been part of the eye-tracking study and it shows that even if worldwide known chefs are featured in images, the quality is still important. So even if the pictures are somewhat relevant, low-contrast and small size images are simply ignored. Image quality is as important is the relevance of the image being used. There has to be a balance, where quality and relevance are the two guiding principles.

NYMag, retaurant section

Eye-tracking on NY Mag’s website

Jakob Nielsen and Kara Pernice wrote an article entitled “Images as Obstacles” some years ago. The images above are courtesy of Peachpit and the amazing heads who published the study. Thank you for your tremendous work!

Guiding the user

Not many designers have a degree in psychology, therefore few of us know how the human brain works. The same eye-tracking studies show that our focus can easily be influenced and changed by images. We are obviously talking about high-quality, relevant images, not fillers. In a study called “You look where they look,” James Breeze showed how relevant images can be to the flow of a website.

He made an eye-tracking study on 106 people by using a baby diaper manufacturer’s website as an example. As you can see in the two images below, when the baby faces the visitor, most of the people tend to look at his face. Remarks including “adorable, cute, sweet and little pumpkin” were probably quite popular.

eye-tracking study

Study on a diaper website

However, when the same ad, with the same text, with the same baby, but in a different position is presented to a 106 people, the results are clearly better. Not only do the people focus mostly on the text, but you can also see increased attention to the brand and even to the small text underneath, which is a money-back guarantee disclaimer (quite important for a business, probably one of their selling points – a bummer to miss that).

baby-2

This shows how much influence a picture can have.

JCDecaux and THiNK worked together a few years ago and came up with this research which confirms the results above: the eyes of the users can indeed be guided towards key messages or elements in the presentation or the ad.

Because many ads feature beautiful models, they tend to be the focus instead of the product. Models, instead of drawing attention towards the product, steal the attention and draw it towards themselves. The study below shows how this can be fixed.

Sunsilk eye tracking

Eye-tracking on Sunsilk product.

In numbers, this research shows even clearer results. On the initial ad (left), there is very little focus on the brand and the product – actually only 6% of the people looked at it. However after the ad was manipulated and tested again, more people looked at it. No less than 84% of the people looked at the product and the brand (even the logo at the bottom) after it was modified. This is a 14X viewer increase, which, in my opinion, is a huge difference.

The right images can help designers guide user’s eyes. If models are used, make them look towards the product image, the logo (brand) or the text. This will increase the product awareness and have the desired effect.

Images Need a Purpose

Images can not only guide the user’s focus, but also explain a lot about the product in just few seconds – better than words could describe it. An extremely well-known example is Square, a smartphone application that allows you to accept credit card payments through your mobile phone or tablet by using a small device.

square

The product is described in so many ways by a simple image

As you can see in the image above, the visitors understand many things about the product in just a few seconds. After looking at this picture they already know how the card reader attaches to the device, how big it is, what devices it works with (it also works with Android, but it is quite difficult to show that too), how to swipe the credit card and what appears on the screen of the device when the card is swiped. Lots of long, boring paragraphs would have to be written (and obviously read by the visitors) in order to understand this information. Instead, a picture says it all. This is a classic, brilliant example of effective use of images!

Another good example is showed below, how Apple sometimes advertises their MacBook Air product. We all know it’s small, light and beautiful. Well if you didn’t know it, you’ll get the idea in a millisecond by looking at the minimalistic ad below.

macbook air ad

Macbook Air simple, yet effective image advertising

Trust is Key

In case you have an online shop, keep in mind that trust is crucial. Nobody will buy a needle on the internet if they do not trust the seller. The reason why Amazon and eBay are popular is because, besides the fact that they are huge worldwide brands and offer different money-back guarantees, they also have many different security features. Shoppers trust them and they know that if the seller is not going to deliver the product, the company will take care of it. If you own an online shop, make sure clients trust you.

What does this have to do with images? Well it’s simple. Trust can be achieved through images according to a study on landing pages conversion rates made by Paras Chopra.

building trust

Building trust is incredibly important when dealing with online visitors

It was incredible to hear about this online shop selling Brazilian and Caribbean paintings. A slight change meant an increase in their conversion rate of more than 95%, from 8.8 to no less than 17.2. How? Instead of showing thumbnails of the paintings, they showed thumbnails of the artists that made them. The quality of the paintings was never a problem, but the fact that they did not trust the shop was. By simply showing the faces of the artists, visitors realized they were buying from real people like themselves.

Chopra talks about another user who has an online portfolio. By just replacing the contact icon with his own picture, he increased the conversion rate by 45%, from 3.7 to 5.5. His conclusions were that visitors can spot stock photos right away and tend not to believe them. They create an emotional connection with faces they see online.

Optimization

To end this article, I also want to mention some technical aspects of using images in websites, without getting into too much details. First I want to mention how important optimization really is.

According to data from February the 15th, 61.9% of a webpage is filled with images, with the average size of a webpage being 1.29MB. Images are heavy and take a lot of time to load. They are dangerous for users’ browsing flow. According to Jakob Nielsen, a one-second response time is the limit for users feeling that they are freely navigating the command space without having to unduly wait for the computer.

webpage size stats

Average Webpage Size – 15th February 2013

Before we upload images on 1WD, we always get them through Photoshop’s Save for Web & Devices function, where you can decrease the size of the picture without decreasing the quality too much. Smush.it is a free online tool that does the same, and there is also a WordPress plugin made for it. Do either one of those before uploading your images and the total size of your website will decrease, which means faster loading times and less frustrated users.

Width and height

The last technical aspect I want to talk about is the necessity of mentioning the width and height of an image in the HTML markup. The reasoning behind this is simple. A webpage will always load the text first, then the images. But because of this, until the images are completely loaded, their position is marked with a small, blue question mark thumbnail. While the image is loading, this small thumbnail expands to the full size of the picture, which disrupts the reading flow if users already started reading the text. By expanding, the thumbnail will also move other elements in the website that the user might be focusing on – and this makes many visitors go bananas.

By declaring the height and width of an image in the HTML markup, you can be sure that the thumbnails (which will still exist), will appear right from the start at the full size of the picture – this means that while the picture is loading, it will just fill up the big thumbnail, instead of expanding it. It is a small detail, but a nice touch.

Width and height to images

However, some people consider this an old technique and with the emergence of mobile browsing, not very effective at all. I tend to agree. Therefore use this only when your framework is responsive and don’t forget to resize the images for different screen resolutions. You don’t want a picture with a width of 700 pixels on a screen 640 pixels wide.

Bottom line

Using images the right way is crucial if you want to have a successful website, especially when your goal is conversion. As you have seen in the examples above, bad images are a turn-off for visitors and they will ignore them. However, if you manage to find the right pictures and insert them in the right places, they can do wonders for you, as they did for some others.

It is also important to keep in mind that images are not always the solution for your website’s problems. Sometimes your website shouldn’t even have any images. Testing is important in this matter. I will put together an article about A/B testing for you in the coming months and will teach you not only how to use it, but more importantly, what to use it for and what you can get out of it. Until then, though, stay tuned for other amazing pieces here on 1WD.

Now it’s your turn to hit the keys. Do you have other usability tips or questions? Have you encountered issues with the matters discussed above? How did you solve them and what were the results? We would love to hear from you.

September 14 2011

05:11

How to Make More Unique Images


  

We all use images — photos and illustrations — in our daily design work. Lots of them. And while the best way to make sure your images are unique is to have custom photography or illustration done for you every time, this is not very realistic. Often, due to time and/or budget constraints, we have to use royalty-free images. And, royalty-free images, by definition, are available to anyone who pays their fee (very reasonable, compared to the fees for rights-managed images that grant you exclusivity).

The first time it happens to you, will forever be etched into your memory: seeing the same photo which had been carefully chosen for a particular client’s project (when they did not have the time or the budget to set up a photo shoot), used in an advertisement by another company. If you are lucky, it will at least be in a different industry. But what happens when it is a direct competitor? This is a rather unsettling thought.

Here are some tips, tricks and examples of what you can do to make sure your images are slightly more unique than what everyone else is using — even if you do purchase them from a royalty-free site.

Don’t Go With the Most Obvious Choice

Before you choose the image, keep in mind that often search results on the royalty-free sites are sorted by popularity — meaning that the images that have been downloaded the most times will show up first. This, of course, increases the risk of someone else using the same image. Sometimes simply browsing a little longer can help you find something relevant, yet not quite as popular.

Also, before you even start searching, think of less obvious ways to illustrate your point. You don’t have to always use computer and code images to illustrate a website or a brochure for an information technology company. Maybe something completely unexpected can work just as well? How about using pie or toast to illustrate the ease of use, or dogs to illustrate friendliness and loyalty? You get the idea; there are many ways to make a point with a picture, and they don’t always have to be the same images everyone else uses to convey the same kinds of ideas.

Choose a Detail

Once you have chosen your images, there are any number of ways that you can alter them to make it more unique. Sometimes just focusing in on one part of the image can make it very different from the original. Crop and zoom in on a detail that is very relevant to your message, and the let the rest fall by the wayside.

Instead of using the photo of many fallen leaves, why not focus on just one?

Or you could even go one step further and actually extract an element from the image that works well for your project purposes (clipping paths in Photoshop will be very helpful with this).

Instead of using the typical cookie tray, you can extract a couple of cookies and integrate them with the title.

Color Shifts

Sometimes in order to put a more unique slant on your images simply playing around with the colors can produce striking effects, and even enhance the message you are intending the images to communicate.

For example, creating a black and white version of an image, with just one element remaining in color will place a strong focus on that element. So instead of cropping to make a certain element stand out you can use the colors to highlight any one aspect that really speaks to or with your message.

Other ways that you can use the color to your advantage here is by adding some colors that are not normally found in nature. This is a fantastic way to attract attention.

Furthermore, adjusting the saturation, contrast and luminosity levels of your images can do a lot to transform them from subtle to striking.

Try Different Effects

Depending on the style that you are looking for, sometimes enhancing the image can be as easy as running a filter. This is not necessarily recommended just because they look pretty, but when you have a project that calls for a particular style, they can be handy for getting the image to the place you need.

For example, using a poster-like effect for an art gallery brochure can be very impactful on its viewers, and compliment its theme and message in ways the image unfiltered could not.

Another example would be to use a filter to add a hand-drawn look to the imagery included in a project for a family-run bakery. This effect can really add to the home-made feel and ideas the bakery wants to convey to their customer base.

Combining Images

When taking this route, the possibilities are virtually endless. With the right amount of work and retouching you can almost guarantee that the images you use for your client will be unique, even on a more limited budget.

Blending mediums can be an effective way to make your point here as well. An example of this would be to combine a photo and an illustration for a fun, not quite real effect.

Another example of this would be like using a part-photo, part-illustration to better demonstrate the process of a home remodeling company.

You can also add your client’s logo to a scene or object that emphasizes their benefit. This is a really easy way to tie the two together.

When combining images, you can also play with the size and perspective to alter them from their original, and to better serve the message you need to convey. For that larger than life quality.

You can further use this technique to emphasize custom-made objects by showing them “in the making” — even if it isn’t quite the real process.

Don’t Settle for the Same Old Image

There are numerous tutorials and techniques available to designers these days to really take our images to the next level. What we often forget, is that this can serve much more of a purpose than just demonstrating our skills. It can allow us to deliver much more unique imaging to our clients.

Further Resources

Below are a few useful posts and resources for helping you put the advice offered here into action when your next client comes calling.

(rb)

July 15 2011

10:00

Why Images Are Important for Blog Posts and Content

Remember how much you would have rather read a book with lots of pictures versus one with only text when you were a kid? The same applies, even now.

A picture speaks a thousand words, and when it comes to your content, that cannot be truer if your image is relevant. Images add richness to your content, and make readers more willing to read a long article. And they have great SEO value too!

Best Images for Content

The following are the types of images you can use to add an extra bit of pizazz to any blog post, article, or other piece of online content.

Eye Catching Photography

Dramatic Photography for Content

That photo grabbed your attention, right? I can’t tell you how many times I’ve been lured into reading a post simply because it had an eye-catching photo attached to it. The key is to find something that either relates to your content or proves your point. In this case, my point was to catch your eye. Some examples include:

  • An article on how to calm the mind including photos of peaceful gardens or open meadows.
  • An article on how to build a treehouse including photos of awesome treehouse designs.
  • An article on the perfect cupcake recipe including photos of the ingredients and the finished product.

Relevant photos can help the audience really feel the point you are trying to make with your content as well as breaking up the text making the story seem like less of a daunting read.

People Photos

Have you ever noticed that you tend to trust a Twitter user or Facebook friend more if they have a photo of themselves as opposed to a cartoon, logo, or other non-personal bio image?

The same goes with content. Readers love to see the face behind whatever topic is being covered in a piece of content. This includes:

  • Author bio photos for blog posts and articles.
  • Photos of a person who authored a book or an eBook that you are reviewing.
  • Photos of people included in a list, such as the top designer bloggers on Twitter.

Including people photos will increase the reader’s engagement and trust with your content as it lets them know that there is a real person on the other side of the screen creating the content.

Screenshots

Screenshots, in my opinion, are essential when it comes to two particular types of content – how to articles and lists.

How-To Screenshots

You can write the greatest tutorial on how to use a piece of software, but if it doesn’t include screenshots, it will make the reader still feel that the software may be to complicated for them to understand. For example, I could say that, when editing photos in Gimp, you should scale the image to the appropriate size to fit the article, such as I did with the above photo in this post to make it 570px wide. Or I could say that and then include the following:

Screenshot Images for How To Articles

Including the screenshot directs readers to the right menu option to correspond with my instructions, helping readers get to know the software before they get to it and give them a reference point if they get stuck.

List Post Screenshots

Have you ever seen a piece of content such as the top 25 ___ websites? Have you noticed that some lists go viral while others are just blah. The difference is generally in whether the post has included screenshots of the websites in question.

Screenshot Images for List Posts

A good example of this is how Dainis listed 33 blogs to make you a social media and marketing guru with screenshots of each site.

So the next time you do a list of your favorite people on Twitter, include a screenshot of their Twitter profile. Or if you do a list of your favorite brand’s Facebook pages, include a screenshot of their fan pages. This will make readers love your list even more and share it with their audience!

How to Get Images for Your Content

So now that you have some good ideas of what kind of images to include in your content, here are some tools and resources to get those images.

Eye Catching Photography

The following are great sources for eye-catching photography.

  • Creative Commons Images – My favorite resource is Flickr’s Advanced Search to find eye-catching photography. Be sure to check the box to Only search within Creative Commons-licensed content and include a photo credit with the image you use.
  • Royalty-Free Stock Photos – If you can’t find what you are looking for through Creative Commons, your next best bet is sites like iStockphoto that allows you to buy a photo for use in your website content and designs.

There are tons of other resources – simply search for creative commons images or stock photography on Google to find them, but the above are a great place to start. Also, if you find a photo you want to use but it isn’t creative commons licensed, all hope is not lost. Just email the owner of the photo / photographer and let them know what you had in mind. You might get a great response!

People Photos

Whenever I need to grab a photo of a person, I tend to go with their Twitter profile photo as it is one they have chosen to represent themselves online. Other places to grab a photo include:

  • A person’s Gravatar (if they have commented on your blog).
  • The author bio page on their blog.
  • The photo on their corporate bio page.

Or, if you prefer, you can contact the person and ask them to send you a photo of their choosing for an upcoming piece of content you are working on. Generally, if you let them know you are including them on a list or a positive review, they will be happy to oblige!

Screenshots

If you don’t have a program like Snagit or similar to get screen captures, then you have some free options to work with.

  • Screenshots on Windows Based PCs – I tend to rely on the Print Screen (Prt Scr) button on my keyboard to do a screen capture, then resize and crop it in Gimp, a free image editor.
  • Screenshots on Mac OS Machines – If you’re running a Mac, you can use shortcuts such as Command-Shift-3 to take a screenshot and save it on your desktop, Command-Control-Shift-3 to take a screenshot and save it to your clipboard, or use other shortcuts listed here. Gimp also works on Mac for editing your screenshots.
  • Website Previews – If you use Safari and need an image of a website, then you’ll be happy to know that Safari actually takes screenshots of websites in .png and .jpg format. In Windows 7, you can find these previews under C:\Users\YourUsername\AppData\Local\Apple Computer\Safari\Webpage Previews. You can then edit the website’s capture in Gimp to fit your post.

Windows 7 also has a Snipping Tool that allows you to grab screenshots easily, but I have found those captures are very low quality, so depending on your needs, you might want to use one of the above options instead.

Your Thoughts on Images for Content

Now it’s your turn. How do you use images in your content? Please share your strategies and resources with us in the comments!

Photo Credit: Ground Squirrel of the Desert

May 17 2011

04:22

5 Examples of Images Within Typography

I’ve always been drawn to typography that incorporates images – I’m talking about that bold type that frames a series of photographs or illustrations. As a graphic element, this typographic style allows the designer to include more photos than would otherwise be permitted. The letters provide a natural frame for the photos.

This type of design is popular with postcards that depict cities – the typical old-timey card declares, “Greetings from …” and then the city name frames landmarks that might entice the recipient to visit.

But in addition to marketing, this type of design lends itself to personal projects as well: Perhaps a milestone birthday invitation could contain images of the celebrant’s life.

Here are five examples of images in typography. And please list your favorite designs in the comments!

image1
The marketing postcard for last year’s Oakland Pride included Oakland, Calif., landmarks and drag queens.

image2
Carolyn Hazard designed this postcard for music store Tower Records, with a variety of album covers in the letters.

image4
The I Work in Pages blog has a tutorial for how to create transparent letters with images inside.

image3
MTV redesigned its logo last year, dropping “Music Television” from the base and filling the “M” with scenes from its reality programming.

image5
Souvenir postcards such as this one from Oklahoma City are ideal for squeezing in as many landmarks as possible in a tidy manner.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



5 Examples of Images Within Typography

March 07 2011

06:09

30 Examples of Big Backgrounds in Web Design – Round 2

Four months ago, we showcased 30 Examples of Big Backgrounds in Web Design, and we can say that the trend surrounding big images as backgrounds is still hot. As we noticed that a number of new websites were using big backgrounds, we decided to do a fresh round of examples to inspire you. Here you will see websites using big images as the focal point and you’ll also see sites using big images to enhance the content in creative ways. Keep in mind that using only a huge image as a background is a bit risky, since you might be driving attention away from content. So try to have something “in between those lines”.

blitz

bbackgroungs01

Moods of Norway

bbackgroungs03

Art of Kinetik

bbackgroungs05

Michael Korstick

Handle With Love

bbackgroungs07

Brandon Knaster Jewelry

bbackgroungs08

Te Haku Lake House

bbackgroungs09

blitz

bbackgroungs10

Weight Shift

bbackgroungs11

Frank Chimero

bbackgroungs12

Viventy

bbackgroungs13

Nike Skateboarding

bbackgroungs14

Image the Music

bbackgroungs15

Capturee

bbackgroungs16

Nike Better World

bbackgroungs17

Ben Thomson Photography

bbackgroungs18

YYoga

bbackgroungs19

Cat Rabbit

bbackgroungs20

Nordkapp

bbackgroungs21

Tower

bbackgroungs06

Grandpeople

bbackgroungs04

Gauged2

bbackgroungs02

NFB Interactive

bbackgroungs23

Mies van der Rohe Society

bbackgroungs24

Design Made in Germany

bbackgroungs25

Intercity

bbackgroungs26

Valerio Berruti

bbackgroungs27

German Craft

bbackgroungs28

Treme

bbackgroungs29

Jooji

bbackgroungs30

Source:

The Best Designs
Awwwards
Site Inspire

July 05 2010

05:30

40 Tasty Restaurant Websites to Inspire You

Restaurant websites are a great place to find inspiring designs and also to check out some nice ways of displaying photographs within a design. Since the main content of a restaurant is their food – or at least it should be – there is no better thing to do than show beautiful images of the food. So for this post, I’ve rounded up 40 Tasty Restaurant Websites to Inspire You. You’ll notice that these restaurant web designs use images in a variety of ways to put the focus where it needs to be. Whether it’s a full background or in a slideshow, the images make it all about the food. So here we go, enjoy the tasty selection and remember that sometimes images are better than a thousand words.

Marie Catribs

restaurants34

Culinaria

restaurants02

TasteSpotting

restaurants03

The Noodle Box

restaurants04

PizzaExpress

restaurants05

McDonalds

restaurants01

Aqua Italia

restaurants06

San Diego Brewing

restaurants07

Twelve Restaurant

restaurants08

Chez Gerard

restaurants09

Nuevo

restaurants10

Veda

restaurants11

Brooklyn Fare

restaurants12

FIG

restaurants13

Ruby Tuesday

restaurants14

Jake’s

restaurants15

Hoddows

restaurants16

Hunan Gourmet

restaurants17

springhill

restaurants18

Restaurant El Amigo

restaurants19

isle

restaurants20

Le 28Thiers

restaurants21

The Little Cake Parlour

restaurants22

Cannolificio Mongibello

restaurants23

La Masa Mimatta

restaurants24

Pic Fresh

restaurants25

Giraffe

restaurants26

Sesame

restaurants27

Choga NYC

restaurants28

Giannis Steakhouse

restaurants29

Osaki

restaurants30

Alley Pfannekuchen

restaurants31

Back Yard Burgers

restaurants32

MoNkEyNuTs

restaurants33

Olive Garden

restaurants35

Daimu

restaurants36

Charlie Browns

restaurants37

Gibsons Steakhouse

restaurants38

Auberge de lill

restaurants39

Saf Restaurant

restaurants40

Sources:

About the Author

Gisele MullerGisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr

February 01 2010

20:29

Photoshop 101: Editing Indexed Color Images from the Web

Have you ever plucked an image from the web and tried to edit it in Photoshop only to find annoying problems? It’s probably a .gif in Indexed color mode. For this quick example I’m using the MediaTemple ad in my sidebar, which happes to be an indexed .gif.

Photoshop 101: Editing Indexed Color Images from the Web

When trying to edit an indexed color image in Photoshop, certain adjustments are disabled, as you can see below.

Photoshop 101: Editing Indexed Color Images from the Web

The quickest way to tell what you’re dealing with is to glance at the Layers palette. You’ll see right away if it’s an indexed color image.

Photoshop 101: Editing Indexed Color Images from the Web

All you need to do in order to edit your image is simply change the color mode to RGB, and all of the annoying disabled features return.

Photoshop 101: Editing Indexed Color Images from the Web

a

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl