“Users pay close attention to photos and other images that contain relevant information, but ignore (…) “jazz up” webpages.” Jakob Nielsen @NNgroup – @christianvasile


How to Use Images Successfully – Web Design Usability Guide
VIa 1stwebdesigner.com

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!

Full article 🙂 !

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.

%tutke

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.

Full article 🙂 !

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
Full article 🙂 !

Anuncios

15+ inspiring galleries // thnxz to webdesignerdepot.com – @designerdepot @TheGainesColl – TheGainesCollective.com


We are very visual beings. We like to see it to believe it. And sometimes we don’t trust our brain as much as we trust our eyes. Making decisions is often easier when you see something rather than if you take in a bunch of information about that something.

By Kendra Gaines Connect with her.
TheGainesCollective.com/

Could you imagine trying out a new restaurant without seeing food from their menu? Could you imagine purchasing a shirt online without actually seeing that shirt? How about working with a developer and not knowing what sites they’ve worked on? All these things sound farfetched because we have to see something.

Visuals help build trust in that same vein, that we must actually see it to understand it’s real. Web designs have become very image heavy as of late because we want to do less reading and more seeing. We don’t want to have to make difficult decisions about easy things. Just show us the offering and we can go from there.

Our best bet is to create images galleries. Image galleries come in many forms to many different sites and of course make the most sense. We now have a place to put all our work or our products so visitors can see what we have to offer. Today we’ve found some of the most interesting, intuitive and innovative image galleries we could find. So, let’s jump right in…

Arnaud Beelen

To start, let’s break out of the entire notion that our thumbnails have to even be squares. Arnaud has created perfectly spaced parallelograms to show off his thumbnails. This is immediately interesting and stands out from the thousands of portfolios that are all too square.

Big Human

Big Human has done an absolutely wonderful job making an image gallery with easy to use and understand navigation. Utilizing the arrow keys on a keyboard, the developers here have made it second nature to scroll through images and skip to different projects. This is a great idea that I’d love to see implemented more.

Big Human

Full article / Artículo Completo

3 Things to Consider When Designing Your Business Signs | workawesome.com


 

Work Awesome

Designing your business signs

Everywhere you go, you see signs: billboards, road signs, aisle markers, window signs, and service and business signs.  They’re how we find our way through commercial and public places. Whether we’re just looking for a specific exhibit in a museum or for the cereal aisle in a grocery store, signs showcase where things are and they draw foot traffic.

That said, signs have to be clear and effective at conveying their message otherwise they stand the chance of being ignored or passed by in the search for the most easily accessible information.

There are many tips and tricks for designing your business signs and effective signage but if you simply follow basic design principles most of the problems disappear at the beginning.

So here are three things to consider when designing your sign before it’s sent off to print!

1. Too Many Good Things

At some point, every piece of media has to go through a cutting room.  Even something that had only a few ideas to begin with can blow up into a piece beyond its own scope.  The bright red text, green mascot, customer image, and product background may seem like a great way to show everything you offer at once but it’s too much too quickly. Remove some of it!

Pick your points and run with them.  Are you emphasizing a specific product? Then use the customer action shot with the product.  Use it only as a label and let the image speak for itself.  Is the sign a general piece for your brand or company? Then use the mascot and the letterhead or a logo.  Don’t bog things down with images of your products when a quick image, your name, and a tagline can carry the message quickly and cleanly!

Use basic color theory.  There’s limited real estate on your sign so stick with two or three colors that mesh well.  There are plenty of online resources that give advice on color theory and how to apply it.  If you want, look up a color wheel to check for complimentary colors.  You can also take your main color for the sign and look for specific color themes that match it to help your sign pop out among the crowd. Leer más “3 Things to Consider When Designing Your Business Signs | workawesome.com”

How to Go Beyond Stock Photo Cliches


Stock photos are an excellent way to make a website communicate visually. They are inexpensive and high-quality photos are easy to obtain. There are plenty of well known stock photo websites that have new collections of images added to them every day. But still, many websites still use the same cliche photos – here are three popular examples to learn from and avoid:

The Value of Team Work

Working as a team

This image has several variations, but the general idea is always the same. “We are a friendly, warm organization that values its bright team members. We are empowered through our inner cooperation”.

The World is in your Hands

World in hands

You’ve probably seen this image on clean-tech websites or any websites promoting a “green” agenda. The world is after all, a pretty small place as it’s nesting warmly in a delicate hand. We are closely connected to this planet and are positioned to take care of it.

The Customer Service Girl

The customer service girl

She’s young and beautiful and always has a smile for you – the customer. She is also very responsible looking, which is how you know you’re in good hands. This is the company I want to hire! If you recognize one or more of these images, you get the point. Some images have just been overused, especially in web design. However, there are solutions and alternatives to using this type of photos.

How to Avoid Cliches

Use illustrations

Using illustrations instead of photos is a great option. Good illustrations can convey lots of personality and unique character. You can find great stock illustrations to make a statement and convey a message. Illustrations tend to be bolder and less ordinary compared to the average stock photo. A few years ago it would have been a tough task to find websites that use illustrations. But times have changed, and today, some extremely successful websites use illustrations.

mailchimp

Go Abstract

Pictures of people acting in a certain way draw attention, especially when the photos represent a particular demographic that you are inviting into your website. However, high resolution abstract photos, can give a site a modern feel. They can convey a certain emotion that you wish to communicate or be associated with. Often times, images which are less literal can give a site a sophisticated appearance. Careful though, abstract photos can damage your website if you use them as a replacement for photos

Go abstract

Use Styling 

You can always enhance a stock photo and give it a different, more unique style. If you have zero graphic design experience, get some help from a designer. The point is that you can easily turn a regular stock photo into an “original” by applying modifications such as filters and collages. For example, you can remove the “box”, the frame around the image, and integrate the subject of the photo seamlessly into your site’s background.

Moving company Wix website template

Stock Photo  Sites with a Twist

If you’re looking for photos with an added twist, be sure to expand your search to sites like Flickr and Morguefile.

Flickr

For more “niche” type of photography that includes landscape, illustrations and art, visit Deviantart and Whoophy.

Using Instagram Photos

Photos can turn out awesome through use of Instagram’s  simple filters. As a result, many amateur photographers can produce compelling photos on their smartphones. Some brands have even started integrating Instagram photos into their product pages – why not integrate yours – or others’ –  into your website? Have a look at web.stagram,  Instagram’s web version, to browse through images on your desktop.

Use Instagram

Instagram copyright policy generally states that “Instagram doesn’t own the images – Instagram users do”.  To view the restrictions imposed on a particular photo, look at the label placed by its owner. You can always contact them directly and ask to use their creation.

Create your own beautiful HTML5 website today! >>

via http://feedproxy.google.com/~r/TheOfficialWixBlog/~3/iHXBPX1uwTY/

Best Practices: New Twitter Headers and Mobile Updates


Portent, Internet marketing company and SEO Agency

Twitter rolled out a slew of changes today. The big conversation piece: The addition of profile “header” images. These images are just like Facebook and Google Plus headers. But on Twitter, the new header section also houses your all-important profile picture, name, handle, bio, location, and website.

New Twitter Profile Header

This update affects both Twitter’s web client and their mobile app, which was a surprise to many brands. Read on for best practices regarding the new Twitter headers, and the new mobile app.

New Twitter Headers

Your profile picture now lives in the header section. Following/follower stats sit just below the header.

The basic navigation remains the same: clicking the tabs in the left-hand column (Tweets, Following, Followers, Favorites, Lists) keeps users on your profile. So, if someone comes to my profile and wants to see who I’m following, that list will display below the new header section.

Following Tab on New Twitter Profile

Header Setup, Dimensions & Tips

Uploading your new header image is simple:

  1. Prepare an image. Bigger is better as long as you don’t exceed 1252 x 626 (theoptimal viewing size across all devices). Remember, your bio and other information will display over the top of the image. So pick something that’ll keep that text readable. Anything smaller than 700 or so pixels wide looks like a game of Minecraft, though.
  2. Log into your Twitter account.
  3. Head to “Settings” from the drop-down menu in the top right of the Twitter menu bar. From here, select “Design” as if you were going to change your profile’s theme or background image. Scroll down a bit and you’ll see the new header image option.
    Change Header Twitter
  4. You won’t need to spend a lot of time editing the size of the image you want to use. After you choose an image, Twitter lets you customize how you want to display the image. This is why I recommend choosing a large image to upload, as you can easily zoom in and out to get the right look.
    Uploading a Twitter Header Image

And, since it always helps to have the actual dimensions: In the web client, the header image itself is 520 x 260. Leer más “Best Practices: New Twitter Headers and Mobile Updates”

Create Collages with your Facebook Photos

The drawback though is the resolution. Loupe generates a relatively small image of your collage that will probably look good only on a mobile screen. Shape Collage says that will be introducing higher resolution images in the future.
Photo Collages and Facebook Privacy

Any photo collage that you create with Loupe is public and currently there’s no option to change the visibility to private. Thus, if you have any private photos on Facebook that you don’t want the world to see, it may not be a good idea to turn them into collages because others may then find them through search engines.


http://www.labnol.org
_>>>-)

facebook photo collage

The team behind Shape Collage, a popular photo collage software, have launched Loupe, an online tool that will help you create collages using Facebook photos.

You can either use your own photo albums and turn them into collages or the app can also pull photos from the albums of your Facebook friends that are visible to you.

It takes just a few steps to build your first collage. Authorize the app to access your Facebook account, then select any of your photo albums (or that of your friends), choose a shape and your collage is ready. Hit the Share button to save that collage to your Facebook account or grab the permalink to share it by email.

The collages look impressive and if you don’t like the default layout, you can always move or delete any of the pictures on the pile. Here’s a quick video that shows how you can turn Facebook albums into collages.
Leer más “Create Collages with your Facebook Photos”

Texture Used in Web Design: Examples, Best Practices, and How-To

Within the last ten years, web design has impressed us with glossy gradients, smooth reflections, and even plain and bold colors. With this new trend in simplicity and open space, came a better understanding and appreciation for adequate user interfaces. Now, though, in more recent designs we’re beginning to see these minimalistic and well-laid out designs come in not so plain ways. Modern designs are beginning to use more texture than before, but still using texture in an intelligent way to keep web spaces clean, organized, but just much more aesthetically pleasing.

Texture Used in Web DesignIn this post we’re going to look at some of the greatest uses of texture in web design today, and see how it can be used in so many forms. We’ll explore how the use of texture has evolved over the years in web design, and how any designer today should use texture to make designs really pop.
From Sleek to Textured-Sleek

The early era of modern web design is still widely used today. Gradients, beveling, and solids all still come into play – and it can still look modern and sophisticated.


Within the last ten years, web design has impressed us with glossy gradients, smooth reflections, and even plain and bold colors. With this new trend in simplicity and open space, came a better understanding and appreciation for adequate user interfaces. Now, though, in more recent designs we’re beginning to see these minimalistic and well-laid out designs come in not so plain ways. Modern designs are beginning to use more texture than before, but still using texture in an intelligent way to keep web spaces clean, organized, but just much more aesthetically pleasing.

Texture Used in Web DesignIn this post we’re going to look at some of the greatest uses of texture in web design today, and see how it can be used in so many forms. We’ll explore how the use of texture has evolved over the years in web design, and how any designer today should use texture to make designs really pop.

From Sleek to Textured-Sleek

The early era of modern web design is still widely used today. Gradients, beveling, and solids all still come into play – and it can still look modern and sophisticated.

Leer más “Texture Used in Web Design: Examples, Best Practices, and How-To”