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

May 01 2012

13:00

The Power of Paper Prototyping (Includes a Giveaway)

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

When planning the structure of a website or an app, I often begin by capturing my ideas on paper in the form of wireframes. I quickly sketch several possible layouts to see which form fits best: Should I use a two or three-column layout? What kind of navigation structure will the site have? How can I integrate a search bar? For exploring basic questions like these, nothing beats throwing together some quick-and-dirty paper prototypes. It’s a great way to get the creativity flowing, and when a sketch doesn’t work it’s always fun to crumple it up and play office basketball with the garbage can.

Does that mean that prototyping on paper is superior to using a wireframing software tool? Each has its own strengths that are useful at different stages of a project. In the initial brainstorming stage, I prefer the paper-based approach for the following reasons:

  • It’s fast, low-tech and low-cost. All you need to get started is paper and a pencil.
  • You can do it anywhere: on the couch, in your garden, or even while lying in bed.
  • Paper frees you from adhering to a particular style or following a set of predefined rules.
  • It’s fun, playful, and helps unleash your creative juices.

Later on, after having dealt with the basic layout questions, I refine my ideas on screen and enjoy the benefits of digital wireframing:

  • A wireframing tool lets me choose from ready-to-use template elements.
  • Existing wireframes are painless to modify.
  • Files can be versioned and easily be exchanged among team members.

If you are in the market for a good wireframe software, I can recommend PowerMockup, a wireframing tool developed by our company. PowerMockup is an add-on for Microsoft PowerPoint that provides a handy library of stencils for quickly sketching a layout.

5 Paper Prototyping Kits Up For Grabs

To promote the idea of paper prototyping and get you started, we are giving away five paper prototyping kits, each containing:

  • 3 Sketch Pads
  • 4 Sharpie Markers

The sketch pads contain a simple browser frame and come with 50 sheets of nice thick (100gms) A4 paper.

Instead of pencils or thin ballpoint pens, we include a package of Sharpie markers. The reason is simple: Due to its thickness, a Sharpie forces you to focus on the basic building blocks of your layout and minimizes the risk of getting lost in design details that will probably change later anyway. Sharpies encourage you to concentrate on the concept, which is why they are the perfect choice for early brainstorming sessions.

How to Enter the Giveaway

For a chance to win one of five paper prototyping kits, simply tweet about this post using the hashtag #protokit. The competition will run for the next seven days, ending May 8th, 2012. The winners will be picked randomly from all tweets received and contacted for shipping information (shipping will be done via DHL International to almost any location in the world).

There will be a small consolation prize for those not among the five lucky winners: a free paper browser PDF template for download so you can print your own sketching paper. Have fun with it!

April 22 2012

13:00

7 Ways to Make Money Online by Designing

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Make Money Online! As easy as it sounds, making money online has proven to be a daunting task for many. Oh, I am not even considering the A-listers of the Internet industry. I am talking about the average Joe who struggles day and night to squeeze out a few extra dollars out of the complex world of the Internet. It is not easy, but then there would have been no fun if it was anyways. A major chunk of the Internet is involved in some sort of design. People are creating logos, designing websites, magazine covers and whatnot in order to be a somewhat-known designer. Today, I will try to dig out the most famous (and easy-as-you-master-them) ways to make money online by designing. Basically, we will see how being smart is the mantra of making money online.

NOTE: Make sure that you bookmark all the links in this article. You won’t get the real meaning of what I want to convey unless you go through the suggested links. Be patient and stick around.

1. Infographics Designer

The design industry has lately grow fond of Infographics. There was a time when including the word alone in an article title meant the article would be a hit. Though such days have passed by, everyone sees the value of quality Infographics. Infographics provide loads of useful information in a graphically attractive format which is easy to consume for an average human brain.

Develop Interactive Infographics, not just Infographics!

Bookmark the below links for further reading. The loads of information will defiantly take you somewhere:

2. Accepting Donations

Please don’t bombard me with your I-cannot-take-donations type comments. If you cannot take donations then move on. For those who can, please keep reading. The idea of donations won’t work unless you are giving back to the community. And, if you are actually giving back something to the community then rest assured that people will donate money to you. All that you have to do is generously ask for donations. Yeah, it works!

Any money is good money, right?

Bookmark the below link to get more out of this money making guide:

3. Write for Blogs

Well, once I wrote a post about why every web designer must blog. The article received a mixed response, but at the end of the day most of the designers agreed that the parallel habit of blogging has its own advantages. Henceforth, web designers can earn a lot by launching their own blogs or by writing for other blogs. It is matter of time and patience before the world recognizes you.

Today’s cement and brick age faces the same challenge as was faced by the stone age – extinction due to fast paced technology.

Now, here are the customary links that you must bookmark:

4. Logo Design

Let me start with make money online by designing logos as this one is personally very close to me. I remember how I pushed a cousin of mine into the world of Internet while he was in high school. No idea how, but he landed in the world of Logo Design and today he is making loads of money just by designing logos on a regular basis. As pompous as it sounds, logo design is a career in itself with people doing it full time just because of the money that can be made.

Keep yourself updated with whatever is happening around the world of design and learn Photoshop, please!

At 1WD, we have loads of information for logo designers. Here are few links to get you started:

5. Stock Graphic Sales

Yes! They do work. With tons of websites that sell stock graphics, it looks like the niche might be saturated, but that isn’t the case yet. The reason is very simple. The kind of stuff available on these websites isn’t always the best quality. See, I am not denying the fact that such websites have over-the-top graphics, but not every graphic is over-the-top. Right? That is where designers like you can pitch in. Fill in the void and rule the world of stock graphic sales. I know people who are earning their living just by selling stock graphics on various websites.

Stock graphic is for real designers only. It is about creating vector files, icons and illustrations etc. If you don’t know Photoshop then better learn it!

Also, remember that stock graphic design is not very exciting. You will have to be innovative and patient if you want to make money online by selling stock graphics. This world has lot of competition and they will simply rip you apart if you don’t try hard enough. Be tough and stick around.

Here is something for each one of you. If you miss these then you ain’t getting rich:

6. Stock Photo Sales

Now, for those of you who sit behind a camera first and then behind Photoshop. The Internet is dying to buy your photographs and I can assure you a business out of this provided that you are good at whatever you do. Launch your own Photo Selling Website or publish photographs on other marketplaces listed below. In any case you are bound to grow. Soon, you will be earning money from your passion – Photography!

Remember, you ain’t a photographer if you need Photoshop to make your photographs look good. Get Real!

Before we move on, let me list down articles that you must bookmark for further reading:

7. Template/Theme Sales

Well, isn’t this the most obvious of them all. If you are a designer and you aren’t selling themes then you surely are missing out on a huge chunk of money. See, I don’t mean that every theme sells and that by selling themes you will be the richest person on this planet, but you surely can earn a lot if you are good at what you do. There are plenty of marketplaces that will help you provide with the best possible exposure for your work. Time to be inspired.

Stick to one Content Management System and be an expert of the same. Don’t jump back and forth from WordPress and Joomla.

Now, before we move on, here is the content that you must bookmark:

April 03 2012

11:00

How to Design a User-Interface Element in Photoshop

In this tutorial we will be creating a small user-interface element.  Most of the attention will be given to the slider, however we will do our best to improve the over-all look of the interface element. We will focus on the creation of a “filter” slider and a call to action button. We will try to achieve a nice color contrast by using a few tones of blue with a few gray tones. By adding really small details, we will improve the overall quality and look of our user interface piece. This tutorial is meant for designer of all levels, especially for beginners and intermediate level users with an approximate completion time of 20 to 40 minutes.

Final Result

Step 1

We will be starting this user interface element by creating a new document of the following size: 900px width; 500px height. It doesn’t matter what size you create your document, but it must be wide enough for us to have some “breathing space”. On the background, apply a pattern overlay style with a nice, subtle pattern. There are hundreds of awesome subtle patterns on SubtlePatterns.

Step 2

Create a white, rounded rectangle by using the Rounded Rectangle Tool (U). Mine is 310 pixels wide and 160 pixels high. Apply some drop-shadow to it, as shown in the screenshot.

Step 3

Add some white inner shadow.

Step 4

We will add some Outer Glow, which will be black. The outer glow with the stroke and drop shadow applied will give us a nice shadow all around the shape.

Step 5

Add the stroke to the shape. It must be a light-grey color (#b2b0b0). This will be the “base” rectangle which will be a shadow for the upcoming layers which will be placed over it.

Step 6

Create a new rectangle shape, it must be of the same width but the height must be 10 pixels more. Be sure that the new rectangle fits the upper part exactly, then apply some black drop shadow to it. Set the Blend Mode to: Multiply, Opacity to 25%, Distance to 1, Spread and Size to 0. Duplicate this layer then move it up by 2 pixels. Duplicate the last layer one more time and move it by 2 pixels up as well. Now you have a nice “stack” of well-styled rectangles placed one over the other. And, as you can see, the shape we’ve created in the first step now works as a shadow for all sides, except the bottom part (the effect we wanted to achieve).

Step 7

It’s time to create a new shape that we’ll color grey, again, use the Rounded Rectangle Tool (U). Be sure to set the Radius to 10px as we want to have our corners fairly round. This shape will be the base of our slider. Apply some gradient overlay styling as shown in the figure. I’ve chosen this light-maroon color because it will perfectly contrast with blue and grey colors, the ones we are going to use a bit later.

Step 8

Apply some stroke to the shape with a little bit darker color, which is: #c4b8b5

Step 9

Create a simple square of about 12 x 12px and align it on the slider bar. Apply all the styling shown on the screenshots below for a nice final result.

Step 10

Create 3 lines using the Line Tool (U). Two of them must be the same size while one should be 2 pixels smaller in height. This will make our buttons look better and they won’t have the “blank” look. Apply some white drop shadow to make the lines even more noticeable.

Step 11

Duplicate this pin and leave some space between them. You can leave as much space you’d like, because this will be our “marked/checked” area which is going to be highlighted.

Step 12

Use the Rectangle Tool (U) or Rectangular Marquee Tool (M), followed by the Bucket Tool (G), fill the space between the pins with any color. Apply some Gradient Overlay style of a nice light and dark blue, which looks awesome in combination.

Step 13

Add some dark blue stroke to the highlighted area to make it stand out and grab attention.

Step 14

By Using the Line Tool (U) and holding the SHIFT button you can create straight lines. Create some 5-7px sized lines and be sure to have an equal spacing between each. I have a spacing of 19 pixels between each line. Create enough lines to fill the upper part of the slider. All of them must be light grey colored (#ebeaea). If you’d like to make the “checked” part of the slider stand out more, you can create those blue colored lines under the slider. They will only cover the blue part of the slider (from the ending of the first pin till the beginning of the second one).

Step 15

Add some price tags over the lines. If you want to add the price over each line, you can, but you should keep in mind that this will mess up the layout a lot and will distract the user, that is why I decided to add the price tags only over the first and the last grey lines (the beginning and the end of the slider) and to the first and last lines which belong to the highlighted area.

Step 16

While the slider looks pretty nice, it doesn’t look very attractive by itself, that is why we will add some extra elements to make the interface stand out. By using a Sans-Serif font (I am using Helvetica, but Arial may work just great for you), add some text above the slider. Let’s assume this interface is for an e-commerce website; therefore we will add the name of the buyer and how many items are in his cart. As you can see there are 2 different rows of text, with different styling. The font size used for the name is 14px while the size for the cart statement is 12px. This will add more importance to the name, rather than the cart, that’s why it won’t bug the user about seeing a huge-sized text about how many items he has in the cart. The “cart” text itself is going to be highlighted by a applying a darker-grey color to it and adding some “underline” paragraph styling. Take a look at the screenshot for exact details.

Step 17

I have added a nice grey icon at the top right corner to show some extra info. My icon says that the website is using some kind of “Super-fast-shipping method”. You can find all kind of icons (vector, png, psd) on IconFinder

Result So Far

As you can see, we have done a pretty nice job tweaking the slider interface, but as you can notice, there is too much space under the slider and the bottom of the rectangle. We can either make the rectangles fit the current space used, or we can improve this piece of user-interface elements by adding a few more things which will make it definitely stand out!

Step 18

Create a black rectangle by using the Rounded Rectangle Tool (U) with a radius of 3 pixels. This will be the base of a “Call to Action” button. Apply some black shadow with an opacity of just 18% to give it a light-grey drop shadow look.

Step 19

Add some Inner Shadow to the button base. It won’t be so clearly seen right now, but when we change the base color to blue, the shadow will be clearly seen.

Step 20

Add some gradient overlay to the button as we obviously need to get rid of the black color. For this gradient overlay styling we are going to use exactly the same colors we have used to apply the Gradient effect to the highlighted area of the slider.

Step 21

We could add a simple stroke but because of the gradient effect applied on button, it won’t look all that good. For the stroke, we are again using the gradient effect, with a bit darker blue colors: #15488b and #1c60b9.

Step 22

Finish up this button by adding some “Buy Now” text with black drop shadow effect applied.

Success so Far:

As you can see, we have almost finished our slider. It isn’t a final result yet because there are some pixel-imperfections. While the pixelation isn’t a big deal for some, it should not be ignored. If you have a really quick look at the interface, you won’t see any imperfections, however, if you look at it for 10 seconds you can spot some really unattractive spots like the ends of the slider bar and the bottom corners of the base rectangle shapes.

By zooming in you can clearly see the pixelation that we talked about. This can be solved in a few ways, but we will go through a simple one. This isn’t the best solution because we are going to change the shapes a little bit, but we’ll easily get rid of these pixel imperfections. Grab the Rectangular Marquee Tool (M) and Bucket Tool (G) and start fixing pixel by pixel.

It works for us in this case because it’s a pretty small area to fix and won’t require a lot of effort. After you are done with one side, you can move to the other side and repeat the exact steps in order to get an acceptable result.

Final Result

Hope you’ve enjoyed this tutorial. Do share your thoughts with us in the comments!

March 28 2012

17:00

Stop Designing User Experience! I Mean It!

User Experience this! User Experience that! Stop it, will you? There’s plenty enough research done about User Experience . Now, can we please start designing? The problem with the Internet is that literally anything can go viral in no time. Same has happened with the keyword User Experience (UX as the nerds call it). Wasn’t aesthetically pleasing design the end goal for every designer? Then, from where did this term UX find place in our brains and how come it dominates our thoughts? Isn’t an aesthetically pleasing design that delights our user enough to keep them riveted?

Well, lots of questions there. I might be acting a bit extreme but I am a bit upset. I am upset with the trend that has forced an average designer to read tons of content about User Experience just to understand whatever it is. For me, UX is totally unrealistic. And whatever is unrealistic cannot be designed. Let me prove my point!

First Things First. What Is User Experience?

Click on the sign up button on any page and it takes you to the signup page which requires minimal user input before registering the user. Well, that is good User Experience. A slow loading webpage is part of UX and an out of location slider is part of UX too. Bad or good, but everything that happens on a website is User Experience.

So, UX is photography, coding, graphics, security, branding, information and design etc. Basically, UX is literally everything.

So, Who Are UX Designers?

Read the pointers above? Now, people who are involved in all those activities and other related activities with respect to that product can be tagged as UX designers. Be it the team lead, the project manager, the graphics designer, the content developer, the think tank team or even the testing team. All of these combine to form a consultancy group of sorts that helps the client to understand the importance of User Experience.

Did you ever stumble upon a client who wanted to focus on User Experience instead of the product? Did anyone ever ask you the question – “Where to find a User Experience Designer?” Well, such situations don’t come up as such terms are designer specific. All that customers look for is, as I always say, aesthetically pleasing design.

User Experience was a term that popped out of somewhere. It must have been some genius web designer with a lot of free time who coined this term. Later on, it grew as it was something new. It helped a lot of designers get a job of a new kind. It helped industries squeeze more money out of their clients. And, it helped writers to write about something which wasn’t heard of before. But, I guess now it is high time that designers take their words back. It is time when designers should give up on the concept of User Experience as it has done nothing new for the design industry. It is time when we stop talking and start concentrating on the aesthetics of a product.

Get It, But Why Not Design User Experience?

Well, I have my reasons. Let me list the most important of them all.

Those who have spent time in the web design industry will agree to the fact that users are very unpredictable. No matter what sort of analysis you perform, at the end of the day you will stumble upon users whom you cannot satisfy. Even when user experience based testing of any web design is done then too results aren’t satisfactory. The reason is very simple. The thought process of users in your dummy testing will never match with the thought process of real-time users. It isn’t really happening no matter how hard you try to immitate the real time user base.

Assume that you are designing a Facebook app which will focus on users from one country. But, what if that app gains fame in other geographical locations? Remember what happened with Orkut? Although Google launched Orkut in the US it garnered all the fame from India and Brazil. Who would have imagined that would happen? If Google knew this then they would surely have designed Orkut especially for India and Brazil.

We will never find out where exactly our hard work will be used and how will it be greeted, if at all greeted! Henceforth, assuming that you can design specifically for User Experience is assuming that you know every user and is a dumb mistake.

Isn’t that self-explanatory? User Experience is a very volatile term in itself. Internet has evolved exponentially in last few years and so has the perception of users towards the Internet. They have become extra vigilant and smart like never before. This results in ever evolving user experience which demands for more.

Now, in such a scenario it becomes impossible for designers to design a product which evolves with the ever evolving user experience. Nobody can design such a product. None! This simply proves the fact that our basic aim should be to design a product which is aesthetically pleasing instead of designing a product which is completely incomplete.

Got It? Now, Start Designing “For” User Experience!

Confused? Well, there is a difference between what I was suggesting before and what I am suggesting now. All that I am asking for is that so-called “UX Designers” should cease to exist. See, I don’t have anything personal against UX designers but I have issues with the concept of UX Design and the way it is used to extract money out of end clients.

Peter Morville’s Facets of UX explain a lot about what User Experience can be. Once you look at the honeycomb above then you will understand what I mean by Designing For UX. There is a subtle difference between Designing UX and Designing for UX but it is important for the ecosystem of the Web Design Industry that designers understand this difference.

Conclusion

Nothing much left to conclude I guess. I might have raised a few eyebrows and shook up some settled UX designers but this is how it is. You just cannot fool the end client just by using some technical terms that have no new meaning. Let us design for the ecosystem of our industry and not for our bank accounts.

March 26 2012

21:00

How to Create a Sexy Small Download Icon

Hi there folks, I’m back with another tutorial on how to create a sexy small download graphic. It doesn’t even have to end up as a download graphic, it can be anything. Think of a loading bar, a upload thing or even a cool button.

In this tutorial you will learn simple but elegant techniques that you can apply on your designs!

Resources for this tutorial

The only thing you need for this tutorial is the Open Sans font. Download here. Original shot on dribbble.

Step 1: Setting up the Document

  • Start by creating a document in Photoshop, something like 600 x 400 px.
  • Fill the background with the bucket tool (G). My colour was: #f0e9dd. 

Step 2: Working on the base shape

Here we go. When I first started this graphic, it had a basic circle shape. Not really original, that’s why decided to use the anchor points to modify the shape.

First, grab the Ellipse tool. Pull out a nice circle with the size you like. Next, grab the pen tool (P). Ctrl + click on the circle you just made. This should make the anchor points of the object show. Again ctrl + click, but now only on the lower anchor point. You should see this now:

With that anchor point selected, hold shift and press your down arrow twice. This should drop the point 20px down. There it is, the sort of upside down egg shape.

Let’s style that thing up!
All there is on there is:

  • Gradient Overlay
  • Inner shadow
  • Stroke

Settings below:

Next is the little lip at the bottom of the main shape.

I made this with the pen tool. I created one side first, duplicated this layer, flipped it horizontally and moved it to the right position. With these 2 layers merged you can go ahead and give it some styling.

  • Drop Shadow
  • Inner Shadow
  • Color overlay


If you look at my finished image, you see there’s another highlight at the bottom. We’ll get to that in the end.

Step 3: Let’s bring in some colour

For the workflow it’s easiest to first create the inside of the coloured circle. Like this:

This is also made with the Ellipse tool (U). Layer styles below:

  • Drop Shadow
  • Inner Shadow
  • Inner Glow
  • Gradient Overlay



We’ll be adding text to this later.

Now it’s time for the orange loading bar. I guess there are more ways to make this. But I took the easiest approach. First, create an Ellipse again. about 10px larger than the one above. Make sure the layer is set beneath the dark ellipse and above the main shape.

Now we’re gonna modify this shape a bit with the pen tool by adding some anchor points and curving some lines. Try to make it like this:

This shape has 5 added layer styles, and next to that some lighting layers above which we will get to after this.

Layer styles:

  • Drop Shadow
  • Inner Shadow
  • Inner Glow
  • Color Overlay
  • Stroke (with gradient)

Now, make a new layer, (ctrl-shift+N) and ctrl click on the orange shape layer thumbnail. This should bring up a selection.

Put the new layer selected on Blending mode Soft light, grab the brush tool with about a 40px radius and white colour and start playing around to make some highlights on the orange circle.

Than, again a new layer. Still with the selection of the orange circle. Again on soft light, pull down the opacity to about 60-70% and pull a standard black-white gradient from top to bottom.

Now you should have something like this:

Starting to look pretty sexy ha!

Let’s make the shape in which the orange is sitting. Above the orange layer, and beneath the inner circle layer create a new layer and grab the Ellipse tool again. Create a new circle the same size as the orange circle.

To make things clear, we’re making this now:

Load the selection of the orange layer again (ctrl+click on the layer thumbnail). Rasterize the new shape we made and hit delete. This should delete all of the overlapping on the orange. Doe the same thing again, but now load the selection of the inner dark circle. So you only have the visible of the circle left. (The one-quarter piece). Let’s give it some styling.

  • Drop Shadow
  • Inner Shadow
  • Gradient Overlay

What a bummer guys, we’re almost done already!

Few things left to do.

  • Add the numbers in the middle.
  • Highlights on all the shapes.
  • Simple background shadow

Grab the text tool, with the Open Sans font, typ 75% in the middle on everything (16px, bold #ddd3c3). Give the text a drop shadow, deselect the Global lighting option and set the direction to -90 degreesdistance: 1, spread: 0, size: 0. Colour: #000.

Another text layer beneath the percentage. This will show the file size, or download speed. Whatever you like. Same styling same options, only not bold and 10px big now.

All set, now we have this:

Now we have to add some highlights to make this thing shine.

This is after my added highlights:

Try to do something similar, most of it is done the pen tool, or just by loading the layers selection and stroking it with white on a new layer, a little erasing some parts an blending options should do the trick. Just play around ;). If u have questions feel free to ask.

My shadow is a gaussian blurred triangular shape on 5% opacity. Transform it a bit to get the right shape of the shadow. It also depends on when your light is coming from.

You can spice up the background a bit more with patterns/textures/lights/shadows, etc.

Here’s my final outcome once more:

I hope you likes this tutorial. If you still have any questions, feel free to ask!

Follow me on Twitter to stay tuned for more!

16:00

The Power of Stories for Enhanced User Experience

What ticks Twitter? It is not only the best possible news feed being generated by various Twitter users but also the stories that say it all in 144 characters. Although Internet has helped humans evolve the way they communicate yet the purpose remains the same – to stay in touch, to communicate and to share each other’s stories. How we do it hardly matters nowadays. Today I will discuss how stories have been used over and over in order to attract the attention of consumers and how it can be used to build a brand.

The Emotional Touch

Most of you must have seen this video but for those who haven’t must see it once. It won’t take more than 7 minutes of your precious time and it is worth it. A young girl could silence the delegates of the so-called “legendary” United Nations just by touching their hearts. It was all about connecting emotionally with her listeners and she did just that.

We must understand that most of the times the style in which one describes products on websites is almost mechanical. We have our own set patterns and we foolishly use those patterns to write down various descriptions. It is all about the amount of time one has spent doing the same work over and over. Correct me if I am wrong?

The importance of emotional touch in write-ups (and other forms of media) cannot be understood until and unless one actually gives them a shot. Humanization of communication between a company and the end customer goes far behind user experience. Make it real and involve humans in your stories or otherwise – lose!

In the early days of the personal computer, all the display screens were black and white. When color screens were first introduced, I did not understand their popularity. In those days, color was primarily used either to highlight text or to add superfluous screen decoration. From a cognitive point of view, color added no value that could not be provided with the appropriate use of shading. But despite the fact that the interface community could find no scientific benefit, businesses insisted on buying color monitors. Obviously, color was fulfilling some need, but one we could not measure. In order to understand this phenomenon, I borrowed a color display to use with my computer. After the allocated time, I was convinced that my assessment had been correct — color added no discernible value for everyday work. However, I refused to give up the color display. Although my reasoning told me that color was unimportant, my emotional reaction told me otherwise. ~ Norman, D. A. (2002). Emotion and design: Atrractive things work better.

Quickly, What’s The Connection Between Emotion And Design?

Emotion triggers a surprise response which helps the end consumer connect with the product. We might not understand the importance of emotion as it is almost invisible but emotion does trigger thought and behavior. Underplaying the role of emotion in design (or any other product for that matter) will simply result into a design without a soul.

The emotional touch in a design helps the user understand the credibility of design and the amount of hard work that has gone into the making of that design. Also, it generates a bond of trust between the two entities. On the whole, the emotional touch will instantiate the ease of use for the end-user.

Ethnography and Stories for User Experience

Ethnography has recently started to make its way into the minds of User Experience teams and experts. Dictionary definition of ethnography is “The scientific description of the customs of people and cultures.” Lately, Ethnography made its way into corporate and consumer culture. It is being used to understand the potential buyers for a particular product. It helps one to understand the values, behavior, and motivations that drive a potential end-user. This is where the connectivity of UX with Ethnography erupted.

I am planning to do a completely different article on Ethnography and User Experience but because we are discussing stories and their effect on UX so let me take some space out to co-relate importance of stories in case of Ethnography.

Image via Stockfresh

Stories help companies connect with the end-user and nurture a bond between them. On the other hand Ethnography helps the same companies understand end-user’s daily life style and their thinking pattern. So, the science of Ethnography can use stories and their emotional power in order to connect with end users. This will help the end-user to open up with the target company and strengthen the understanding between the two.

The Importance of Water Cooler Moments

Yeah! They matter. Remember the times (which might have been yesterday for you) when you end up spending more than just a minute around the water cooler at your workplace? Stories discussed around the water cooler at times have enough importance to make or break a business deal. The amount of emotional investment that we do in such stories and their characters helps us connect with such stories.

Image via stock.xchng

What I want you to understand is if your story telling is such that the end consumer is discussing them at the water cooler in his/her company then you have pretty much done your job. In short it is the lasting impression that will make or break your end game. Story telling should be such that users are emotionally able to connect with them. I agree that Water Cooler Moments might not connect with our topic here but it is an important pit stop for your stories and your end consumer.

Summarizing the Advantages of Storytelling

I am not done yet but I hope that I have been able to give you a glimpse of what all storytelling can do and how strong your pitch can be if it is backed by a story that connects with end user. Now, let me quickly go through some of the benefits of story telling that enhances UX:

  • Regenerates dead papers by pushing life in them.
  • Simplifies designer’s perspective and helps him understand the end-user better.
  • Increases understanding between the team which is into UX as it brings everyone on a common platform.
  • Brings out the thoughts of end-user.
  • Accelerates speed of the project.
  • Improves communication between various teams as it is able to connect all of them on one single platform.
  • Value for end-user and profits for company on the whole.

Conclusion

Stories have always played a vital role in our lives since childhood. When we were kids, it was the bed time story that gave our mind the much wanted peace and helped us sleep. We might have grown up physically but still its the stories that help us connect with each other. No wonder why Twitter is ticking and no wonder that User Experience will touch heights once it stands on the pillar of stories that connect people.

March 01 2012

10:00

1stwebdesigner’s Life #5 – Sales Increase and Crap Site

Hello everyone :) Here we are again with a few more funny things to share.

First of all, I want to say that we’ll be improving this section and our funny content a lot, and the good part is that we won’t be limited to comic strips anymore (tip: how often are you pinning stuff?). Needless to say that after a whole week of working hard you deserve those funny moments.

Today our strips will talk about crazy clients ideas and a misunderstanding over wireframes.

I’m pretty sure you have been requested to do a crazy .gif or a malicious script. So how to deal with it?

And you remember that client who thought that those wireframes were the whole website, even after you explained that a wireframe is a concept validation tool?

Well, let’s laugh at this then!

Sales Increase

Crap Site

So, what would you do?

Annoying scripts… Are they forbidden?

Ok, in that case of the strip, it’s totally forbidden. But actually I can see good uses for scripts that at first look like a desperate attempt to get back to the web  of the 90′s.

First you have to tell the client where you are allowed to use intrusive scripts, and truth be told, by default you aren’t.

And the big question is: when are they allowed?

It’s easy, dear Padawan. Only use them when intrusive scripts give user valuable information, or help them to use your stuff.

Let’s try a few examples:

  • Replace scrollbar with your own good-looking arrow styles (thanks GMail!) – It’s ok when you have galleries, for instance. It’s not ok just to give your website a stylish look (because once wasn’t enough, THANKS Gmail!)
  • Messages when user try to close window – It’s not ok just to give user a last chance to come back. Nobody but you likes this (but only on your own site, huh?). But it’s useful when you have unsaved data, like what WordPress does when you’re editing a post and accidentally hit close.
  • Window resizing – It’s only allowed when your app needs its own defined space, and you should open a new window. Otherwise it’s pretty annoying when my 50 tab window gets resized.
  • Window shaking – No excuses. Please, don’t do that.

Can you think of other annoying scripts that could be useful in some cases? Share with us :)

Wireframes are ugly

Sorry to say, but they are. And it’s not your fault, their purpose is just to quickly provide a proof of concept and save you time and resources by changing things before everything is done.

But clients don’t really get that, huh?

Well, my tip is, don’t ever try to make them look pretty. Actually, it’s better if you can do it with just paper, then the client won’t get confused thinking that it’s “the website”.

With your sketch in hand that actually looks like a sketch , it’ll be way easier to get clients attention to what is important at this point, look at where things should be, what is missing, if the work flow is good.

Do you have your own way to deal with this? How about sharing your secrets with us?

Big changes ahead!

As I said before, we’ll be reformulating our funny department, so stay tuned because we’ll make improvements soon :)

Oh, and if you have any comic ideas to share, or any other cool stuff you have in mind, just use the pretty field below!

January 17 2012

21:00

8 Things Designers Should Teach Their Clients

When starting as a designer, you might encounter some issues along the way, especially in the relationships you develop with your clients. This happens mainly because the clients quite often have the wrong  idea of what we actually do and think that “anybody can design a website”. In their opinion it is as easy as opening Photoshop and drawing something, then writing three lines of code and there you go, you have developed a website.

We all know the reality of is totally different, but until we explain this to our clients, they will not start understanding us and will not value our work any more than they currently do.

The way of improving their opinion is trying to give teach them different lessons, either by telling them directly or by letting them understand through your collaboration. However, it is more likely to help if you do it before signing a contract, because your working relationship will change and will be clear to them from the beginning. This way you can set some expectations and they will better understand who they’re collaborating with.

1. You are an artist, not a laborer


It is good to start with this one. Explain to them from the beginning that what you do is called creative work. Tell them designers need talent, skills and experience to be able to deliver highly-rated products. Like any other kind of tradesperson, designers/artists know how to do their jobs. Nobody tells doctors how to do their jobs and this is because people know that their doctor knows much more than they do about their health. It should be the same with designers. Just because clients know that blue and red make purple or what an anchor or container is, doesn’t make them experts.

Tell your clients that regardless of what they may think, design is not easy, that’s the best designers are paid to make it look easy. Explain to them that even though you accept feedback (we will talk about this a bit more down the road), you are the expert and you’ll only do what you believe is better for the final product, even if they may disagree with you.

Image by toomas

This happens mostly with freelance designers. If you work in a studio, you will most likely be left to do the job the way you want it. The situation changes for freelancers, however. Clients think that because you’re a freelancer and don’t have an office or work 9-5 Monday to Friday (which many of them do, by the way), you are not a professional. Tell your client that you have working hours like everybody else and don’t allow him to call you at 10:30 at night asking for a one final small adjustment before the flyers go to print the next morning. By setting these boundaries clients will also be more cautious and will think twice before calling you too often or outside of your office hours.

2. You are the expert, not them


This is a huge one and I tell you this because there have been many times that a client has called me and told me how to do my job. The bottom line is that you know the web better than they do and they should not doubt that. They shouldn’t come and give you lessons about social media, usability and design, because you already know those – and most likely he or she doesn’t know them better than you.

Many people think that just because they know how to open Illustrator or made a nice wedding invitation in Microsoft Word once that they are designers. Establish from the beginning who is the expert, but be careful about how you tell people this, you don’t want to sound harsh or arrogant. How you can handle your clients depends on so many things that I can’t tell you how to properly explain this to them, but here are some ideas:

  • Try to explain all the reasons behind the major decisions you make. By hearing that you did something with a clear purpose they will realize you know what you are doing.
  • Showing data or research to support things you say is very powerful. Google this and use it if you can, clients will always believe in your solution when they will see that many other people do.
  • You could also use books, design rules and principles or even academic discussions or files to show that the way you do things is industry standard (or truly ground breaking and different).
  • The power of example is very useful if you know how to use it; show your clients other important web sites using the same technique or principles. By showing him that “big players” use it, he will ask for it himself.
Image by sachyn

There might be some other stuff you could use, such as showing up on time to client meetings, dressing appropriately, being organized, writing professional and well-thought e-mails and, obviously, meeting deadlines. The most important is to be taken seriously by the client and you can’t do this if you don’t follow these simple rules.

3. Feedback is taken into consideration, impositions are not accepted


This is another important one, especially when everybody thinks they can be a designer. Feedback should always be accepted and considered, because others might have better ideas. They might also have some ideas that will improve the final results. Moreover, if the web page you make heads in a direction that the client doesn’t want, this is not really good for your reputation, so always accept feedback.

There is a clear difference between feedback and imposition. If a client starts giving you guidelines and ideas on how to do everything, you should stop him and explain that you know what you’re doing. Assure him of the fact that the final result is going to be actually better than the one he wants, because you are the expert, as mentioned above.

However, it is a really difficult to explain your clients, so take care about not being too harsh. Take some time in the beginning to listen to their questions and answer them as accurately and precisely as you can. Most of the clients will feel that their need to be involved in the project is lower once you have a talk with them about it. Explain in the beginning that you would like feedback from him up until the deadline, but you will be the one who makes the final decision.

4. Communication is crucial


It is very important to have a good relationship with your client during the project and also after it. Therefore try to maintain close contact with the client while you work together. This is also important because it is the only way you can find out what your client thinks and wants. Don’t just show up after three weeks with the final product done for delivery. Even if you respect the deadline and work within the budget, the client might still not be happy because he was not involved in the development process at all.

Image by YOdesigner

Many clients tend to be too involved in their projects so many designers try to stay away and only show up on the delivery date with the project, charge the money and leave. This is rather likely to end your relationship on neutral terms and the client will never come back to you for more work.

If you involve the client a bit, he will feel that he is part of the project and that he is the one who makes the decisions – although we know it is not like that. Explaining from the beginning or better yet specifying in the contract that you will ask for client meetings a few times is a good idea to make the client feel he will be part of the development process more than he actually is. Including clients usually means they have a great appreciation for the work you do as they see it develop from basic idea to final product.

5. Web is not print


There is a general misconception out there that web and print are very similar. Well, they’re not and we know it, but how do we explain this to our clients that are mostly familiar with print? They might want a web site that looks like a brochure – while you don’t. It is important to take the time and explain to your clients that the web is very different from print (even though I think we can all agree that until you know the difference it’s easy to understand why people think they’re almost the same) and there are different rules. We just decided upon who is the expert, so why not show you are one and educate your clients? You don’t need to read them a whole design book, just explain some basic principles and provide examples – clients will be more than happy to accept you as the expert when you show them and act like you are one.

6. “One small final change” does not exist


If you have even the smallest bit of experience you’ve heard this quote already. Another problem is that this usually comes at the last minute before the deadline and it affects the whole process, including the probability of you meeting the deadline. Even the simple process of changing a color might be complicated, because you need to go back and re-export the files, change the stylesheet and even make general design changes to complement the new set of colors.

In my opinion one the most important clauses you need to stipulate in a contract is the revision clause. Explain to the client in detail that for every change from one point in time on, he will have to pay extra. Allow them one or two revisions (depending on the size of the project) and charge money from then on. They will think twice before calling you with four hours before the deadline with a small, minor final change.

7. Set reasonable deadlines


We know that all the clients want the product as fast as possible, but some clients don’t understand the time it can take for even a simple website (for example our first lesson) and set difficult or impossible deadlines. Explain to them that a web site can’t be designed, developed and deployed in two days and don’t sign the contract if the deadline is not reasonable. It’s better to avoid these clients than work for them and not get paid, or get paid less because you didn’t deliver by their difficult deadline.

This is not easy to explain either, but you can actually come with a schedule draft and explain to the client what will you use each hour for. There is a high probability that he will understand. Another tip is to never deliver a schedule draft that you think is just enough for that kind of project. “Just enough” is never enough. Double or triple the time you think you need – the client doesn’t know how much the design phase takes anyway. Now I’m not saying to scam the clients into paying you more than you work for, but you need to make sure you have enough time for those minor, small changes and for the emergencies you might encounter.

Another good thing about setting such a deadline is that clients will always be happy to get the product earlier than expected. I always say: “Under promise, but always over deliver.” This makes clients think you worked more on their project than you should have and they will be happy to pay you at the end of the collaboration and even hire you again some time soon.

8. The contract is not just for fun


We’re not playing the designer – client game. This is serious business and the contract you sign with the client has to be respected. It is important to have a strong contract, but regardless of what kind of deal it is, always turn back to it if needed. Moreover, tell the client from the beginning that the contract is important and you want it to be respected. He will actually get a good impression about you and will see that you are serious and professional about what you do.

To give you some ideas about what should the contract include I made a list for you, as it follows:

  • Client meetings
  • Work hours
  • Contact hours
  • Milestones
  • Licensing (who owns the product at the end of the project)
  • Budget
  • Payment rules
  • Revising rule

This is not everything, but those are some of the most important clauses you want to include in a contract with a client.

Keep in mind that this tip is not about having a contract (we shouldn’t even talk about this), but about revising it together with the client. Make sure he knows what’s written there. Nobody reads contracts nowadays, especially with banks, car rentals and many, many others. Therefore keep it short and force the client into revising it by being there when he signs it.

Bottom line


Being a designer or developer is not easy and I am not saying this only because of the amount of skills you need, but because you need to work with people and they are always different. You will never have two clients or projects that are the same. Challenges and difficulties in communicating with them always appear and it’s up to you to solve them. It is not easy to stand up to someone who pays you, but it is worth doing. They will respect you more after you do it and most of them will just accept the rules. Don’t be afraid to share these lessons with your clients, only be aware of how you do it.

Have you encountered these issues with your clients? How did you solve them, or you just worked without working anything out?

January 15 2012

10:00

1stWebDesigner’s Life #3 – Mind Reading & Doing The Whole Site

It’s time to get back to our funny project, 1stWebdesigner’s Life. We’ve received such great feedback from our #1 and #2 that we’ve decided to make it a really cool bi-monthly series to brighten your Sundays. We’re back with Webster (our superhero!) brought live by Jamie Sale!

Today we’ll talk about clients that think we can read their minds, and misunderstandings about what your job is and what it isn’t but your client may think it is. So let’s go through them.

Mind Reading

Doing the whole site

So, what could you do in these situations?

Do you remember that our goal here is to gain some insight from this comic? So, let’s go on this.

I don’t want you stealing my idea!

Many people think that an idea has value. Actually, we avoid talking about our own ideas with other people, fearing that they will just steal our next million dollar idea. But the truth is that until you implement your idea, it has no value at all. Even after implementation many people will just copy you, so success is not just about cool ideas.

Well, it may be hard to convince your client of this fact (if you find a way to do it, please, tell me).

So, your best bet here is:

  1. Position yourself as expert, someone who will help and make their idea even better with you great wisdom :)
  2. Guide your client by trying to find out at least the basic structure of their idea, and similar projects so you’ll know how to start

To check #1 there’s no easy path, you must know a lot about what you’re talking about. So if it comes to a cool project that needs awesome JavaScript enhancements, you need to know JavaScript so you can give good (and free) advice. The key here is to say like “why don’t you do X, Y, Z [cool suggestions related to what client have pitched to you] ? If you want I can do it for you for $[fair price here]“. Again, don’t fear the client stealing your implementation logic, they’ll be glad to know that you want to help with great ideas.

To check #2 you’ll need to be really updated with new ideas and upcoming projects. So if your client asks you “a way to send and receive messages to others with a unique identifier so only allowed person will see it” you may suggest her trying Gmail. Then as you’ve done several webmail clients before you’ll know the project’s size :)

But what I was supposed to do?

About the second strip, well, this one scares me even nowadays.

I used to work in a company where programmers were asked to (wait for it) insert products in their projects. Yeah, you read it right. A real company (actually I’ve seen others that work this way too) where programmers spend their precious time doing what a technician is supposed to do.

So, hold on, if a client thinks that you were supposed to add all their data, it’s not their fault. It’s yours.

What you have to do is to make it very, very clear, in the same way you won’t be designing their business cards, you won’t be adding content, or formatting their PC.

Your job is really clear to you, but you must explain what you believe your role to be to them, though they think you are they guy who knows everything about everything internet-related you won’t be doing such things.

It’s your turn!

Have you seen something like this? Do you have any fun stories to share? Just go on and comment! :)

January 06 2012

10:00

Can Sociology Improve Your Designs?

An artist is a creative who creates to satisfy their own aesthetic pleasure, unconcerned with the wants and needs of others. However a designer is a creative who creates in hopes of satisfying the wants and needs of others with their art, casting aside their own individual creative desires. This is an important fact to always keep in mind for any professional in the creative field, because quite often we tend to forget that we make our living creating art that MUST be found appealing to others and not just ourselves. Of course for any person with creative talent this is a major downside, but that is what we sign up for when taking on the designer role. Now, what does sociology have to do with any of this?

Whether graphic designer, web designer, user interface designer, or any other profession that ends in the word designer, your job is to make art that others will enjoy. This logic behind this creative industry goes hand in hand with the principles of sociology, and corresponds with what the career sociologist does everyday in their respective field. To get a better understanding of the relationship of sociology and design, let’s first take time to understand exactly what sociology is.

What Is Sociology


*Image Credit: Camknow

Sociology can be best described as a broad study of the people, culture, living environment, and any other factor that may have the potential to shape someone into the person they are. This easily being summarized into one word, society. Now one can read that description and come to a conclusion that the approach of using sociology as a designer, is quite the same approach as using the well discussed psychology.  In a respective comparison between the two studies, psychology is better defined as the study of the mind and sociology more so a study of the society (people, location, culture, experiences, etc.) that shapes a particular person may be apart of.

To get a good grasp on Sociology, the only real way is to sit down and take the time to learn. Of course we all don’t have the time to do that, so we are going to look at a few Sociological principles that I personally always try to remember.

  • The culture of my target audience
  • The age range of my target audience
  • The social status of my target audience
  • The geographical region of my target audience
  • The current social changes(technology, cultural movements, political changes, etc.) taking place

How does that Relate to Design


*Image Credit: Cackhanded

In the introduction of this article, the idea that a designer’s main duty in their profession is to create art that is understood and appreciated by their audience.  While giving a brief overview of what sociology is, we learned that it is the study of societies and different social groups. The question presenting itself to us now is how do these two correspond with one another? Take a second, or minute if you must, and think about it. There is no rush, nobody is judging your reading and comprehension speed :).

All poorly attempted jokes aside, the career of a designer and the social science of sociology are a perfect fit together. Instead of presenting a  thoroughly descriptive explanation of sociology, we’re going to save that for a proper course and/or professor and look at a few common cases that showcase where a knowledge of sociology would be beneficial.

Case #1

You are an American freelance web designer who has never set foot outside of the States. The only information you have about other countries is what you remember from school history classes, the little bit of news you read online, and a few TV shows and movies you like. Despite this, you are presented with a project from the Sudan’s Olympic football (soccer in America) club to design and develop their website. They give you creative freedom to do as you please, and their only request is that you make sure to embody cultural aspects of the Sudan in your design.

The Problem: The issue the web designer has here is that they have no idea about the culture of the Sudan, what interests the people, and how they like to be presented.

How Sociology Helps: The main concept taught when one is first entering into sociology is how to properly study, and understand the cultures of another society. By going over the basic structure of what makes up a society, what influences a society, and what procedures and customs are common to a particular society. If this said web designer in this situation were to have knowledge of sociology, they wouldn’t have nearly as difficult a time producing a work of quality for their Sudan client.

Case #2

You are a graphic designer who specializes in creating graphics for promotional purposes. Your typical client is a company looking to promote a new product they are trying to introduce to a more adult audience. A new client approaches with a great project that really interests you, the only issue is that the client is asking you to create graphic work for a product being targeted at preteens.

The Problem: Throughout your career, you have always done projects whose key demographic was an adult audience. You have never even worked on anything aimed at teenagers, let alone preteens. To make this more difficult, you are well beyond the years of the preteen.

How Sociology Helps: One of the topics discussed in sociology is test groups. A test group is a controlled experiment consisting of different types of people in the demographic you are trying to reach. In this instance, the test group would be composed of preteens of  various social and economic backgrounds. If done correctly, based on the desired size of the test group, the graphic designer in this case would have selected a good diverse group of preteens and will have the knowledge of the proper questions to ask in a test group experiment.

Case #3

You are a designer who specializes in working with musicians, bands, and other types of musical acts. Because of your affinity for Pop music, and your tendency to spend most of your time with those infused in the Pop culture, your clients are all musical acts of the Pop genre. One day you get approached by a Gothic band who plays Punk Rock.

The Problem: Unlike your usual clients, you have no idea how you can correctly approach this project. In this case you can’t use your own personal style or knowledge of the clients culture to create something of quality, simply because you are not personally interested in their culture.

How Sociology Helps: In Sociology one of the things discussed are subcultures. A subculture is formed by a group of people who develop their own culture, distinct and easily noticeable from the mainstream culture and other subcultures. In this case, the Gothic band is part of a subculture and the designer who is a member of the Pop culture would be considered mainstream culture. As well as properly defining this subgroup of a society, Sociology also provides knowledge base that teaches one how to properly study and learn about a subculture.

What To Walk Away With


*Image Credit: Zpeckler

It is impractical for anyone to try and compact an entire subject of study into one article, especially one as multifaceted as Sociology. The purpose of this article was never to give a full breakdown of Sociology, and the ways you can use it to automatically improve your designs. Doing this would be unfair, and present a bad outlook of what this social science is. Like anything you study, the information may be the same, but the individual implementation of it varies from person to person. So hopefully by now you have seen how beneficial Sociology is to your design work, and will go out and further the knowledge you have on the subject. This can easily be done by taking an online course, maybe one at university if you are still in school or going back, or just taking the time to read some books. Here are a few things to remember to ask yourself whenever you are trying to approach an audience with your design that you are not accustom to.

  • What is the culture of their region?
  • What are influencing factors that shape the society they live in?
  • Would it be practical for me to conduct research using a test group?
  • Is the outcome of my normal design approach going to bring a result that is offensive to them?

To learn more about how design differ from culture to culture, read:

December 28 2011

21:00

40+ Fresh jQuery Image and Content Sliders Plugins

In this round-up, you will find the best of the freshest jQuery Image and Content Sliders Plugins so that you can take advantage of them and produce startling image and content sliders. You may find it quite difficult to figure out which plugin is best for you because all these plugins have different functionality. Keeping this in mind, we compiled this post. Let’s have a closer look!

1. FlexSlider

( Demo | Download )

FlexSlider is an amazing, totally responsive jQuery slider plugin. It bears uncomplicated, semantic markup, slide and fade animations, and is supported in all major browsers, therefore you won’t have any compatibility issues. Flexslider is built for novices and pros in a similar way.

FlexSlider

2. Bubble Slideshow Effect with jQuery

( Demo | Download )

In this tutorial we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as an interesting slideshow, and as the code will be completely modular, you will be able to easily use it and modify it.

Bubble Slideshow Effect with jQuery

3. Responsive Image Gallery with Thumbnail Carousel

( Demo | Download )

With this plugin you can create a responsive image gallery with a thumbnail carousel using Elastislide. The gallery will have a view switch that allows people to view it with or without the thumbnail carousel. We’ll also add the possibility to navigate with the keyboard.

Responsive Image Gallery with Thumbnail Carousel

4. Circular Content Carousel with jQuery

( Demo | Download )

With this circular content carousel, you can have some content boxes that can slide substantially (circular). Clicking the “More” link will move the respective item to the left and slide out the content area, so that you can navigate through the carousel where every step will disclose the next or previous content box with its extended content.

Circular Content Carousel with jQuery

5. Lateral On-Scroll Sliding with jQuery

( Demo | Download )

In this tutorial we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport.

Lateral On-Scroll Sliding with jQuery

6. Scrollbar Visibility with jScrollPane

( Demo | Download )

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. In this tutorial we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

Scrollbar Visibility with jScrollPane

7. Timelinr

( Demo | Download )

This simple jQuery plugin will assist you in providing more life to otherwise your lifeless timelines. With this plugin, you can easily parameterize the majority of attributes: speed, transparency, etc. It also supports horizontal and vertical layouts.

Timelinr

8. SmartGallery

( Demo | Download )

SmartGallery is a lightweight, lightening up fast and completely customizable image gallery that has been exclusively designed to support huge data. SmartGallery comes with 12 different transition effects together with some inimitable transition effect and thumbnail navigation.

SmartGallery

9. Xml Driven Vertical News Scroller Script

( Demo | Download )

vScroller demonstrates classified and color-code content is an upright or vertical scroll. Feeds originate from regular XML file and styled with plain CSS3 for a fresh and good-looking interface.

Xml Driven Vertical News Scroller Script Using html and jQuery vScroller

10. jQuery Sliding Content Bar Plugin: PushUp Content

( Demo | Download )

This smart and fast content bar is easy to integrate in any web design or web based application. You can seamlessly integrate this in your website and it will pop up whenever needed. Apart from this, it is highly easy to customize this plugin. You can add your contact details, location map by means of Google Maps, and a plain contact form that visitors can use to make contact with you.

jQuery Sliding Content Bar Plugin: PushUp Content

11. Skitter

( Demo | Download )

Skitter is a plugin for producing good-looking slideshows. You can modify every aspect of your slideshow.

Skitter

12. Diapo

( Demo | Download )

Diapo is a free of charge and open source jQuery slideshow plugin. Most interestingly, you can also use it in your projects and sell it as part of a bigger work (donations are not required, but asked to be considered in this case).

Diapo

13. Craftyslide

( Demo | Download )

Craftyslide is a small slideshow that is built on jQuery with the intention to be unique by furnishing a simple, no-frills process of displaying images packaged into a small, clean and competent plugin.

Craftyslide

14. Responsly.js

( Demo | Download )

Responsly.js is a band of simple responsive widgets, written by means of CSS3 transformations and accessible as a jQuery plugin.

Responsly.js

15. Elastislide

( Demo | Download )

This is another very responsive jQuery carrousel that will adjust its size and its performance so as to work on any screen size. Putting in the carousel’s structure into a container with a fluid width will make the carousel fluid as well.

Elastislide

16. Blueberry

( Demo | Download )

This one is an experimental open source jQuery image slider plugin that has been designed with the aim to work with fluid/responsive web layouts.

Blueberry

17. Slidorion

( Demo | Download )

Slidorion is an amalgamation of an image slider and an accordion; and therefore, it demonstrates attractive images together with a changeable length description. Slidorion is a great alternative to the traditional jQuery slider seeing that images are linked to each tab and accompanied by a large array of effects.

Slidorion

18. bxSlider

( Demo | Download )

bxSlider is a jQuery HTML content slider and image slideshow.

bxSlider

19. Minimit

( Demo | Download )

Minimit Gallery is an exceedingly customizable jQuery plugin that does practically everything: galleries and slideshows to carousels and slides and any other thing that has multiple states.

20. Galleria

( Demo | Download )

Galleria is a JavaScript image gallery framework that has been built on the jQuery library. The aim is to make the process of creating professional image galleries easier for the web and mobile devices.

Galleria

21. jQuery Image Gallery

( Demo | Download )

This is an effortless jQuery image gallery plugin.

jQuery Image Gallery

22. rlightbox

( Demo | Download )

rlightbox is antoher jQuery UI media box that can put on view several kinds of content for instance images, YouTube and Vimeo videos. It bears several matchless features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.

rlightbox

23. jQuery MB Bgnd Gallery

( Demo | Download )

With this jQuery plugin you can make a suggestive slide show of images as the background of your page; the images will adapt their size to the window size. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

jQuery MB Bgnd Gallery

24. PikaChoose

( Demo | Download )

PikaChoose is a lightweight jQuery Slideshow plugin that make allowances for unproblematic presentation of photos with carousels and lightboxes! Pikachoose is created to be effortlessly installed, trouble-free to setup.

PikaChoose

25. Fluid Thumbnail Bar with jQuery

( Demo | Download )

With this plugin you can make a fluid thumbnail bar that pages through the images it contains.

Fluid Thumbnail Bar with jQuery

27. Elastic Image Slideshow with Thumbnail Preview

( Demo | Download )

Here we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

Elastic Image Slideshow with Thumbnail Preview

28. Fullscreen Slideshow with HTML5 Audio and jQuery

( Demo | Download )

In this jQuery tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sound with the HTML5 audio element in order to give life to the gallery and try to recreate the ambiance of this vibrant city.

Fullscreen Slideshow with HTML5 Audio and jQuery

29. Image Wall with jQuery

( Demo | Download )

With this plugin you can create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Image Wall with jQuery

30. Rotating Image Slider with jQuery

( Demo | Download )

Rotating Image Slider with jQuery

31. Moving Boxes Content with jQuery

( Demo | Download )

With this plugin you can create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area.

Moving Boxes Content with jQuery

32. Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

( Demo | Download )

With this jQuery plugin you can create a beautiful full-screen slideshow.

Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

33. Flip Box

( Demo | Download )

Flip is a jQuery plugin that will easily flip your elements in four directions.

Flip Box

34. Innovation Slide – Slide jquery plugin

( Demo | Download )

With this plugin you can create a simple, lightweight, effects-laden and very versatile photo slide. It will allow us to flow in a “different” our content: images, text, etc.

Innovation Slide - Slide jquery plugin

35. TN3 Gallery

( Demo | Download )

With TN3 Gallery you can easily create amazing photo galleries and slideshows with slick transition effects, as well as multiple albums, CSS skinning, XML and Flickr support with a host of additional features. No browser plugins required.

TN3 Gallery

36. Shutter Effect Portfolio with jQuery and Canvas

( Demo | Download )

In this jQuery tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

Shutter Effect Portfolio with jQuery and Canvas

37. Photobooth with PHP, jQuery and CSS3

( Demo | Download )

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

Photobooth with PHP, jQuery and CSS3

38. Making a Flickr-powered Slideshow

( Demo | Download )

In this tutorial we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

Making a Flickr-powered Slideshow

39. How to Make Auto-Advancing Slideshows

( Demo | Download )

With this plugin we can create HTML5 Slideshow auto advance with a few lines of jQuery.

How to Make Auto-Advancing Slideshows

40. Sliding Contents With JQuery

( Demo | Download )

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

Sliding Contents With JQuery

41. Slides

( Demo | Download )

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

Slides

42. Slidy

( Demo | Download )

jQuery Slidy is a plugin that generates a customizable transitions automatically.

Slidy

December 26 2011

10:00

10 Crimes a Web Designer can Commit on Call to Action Pages

Call-to-action pages are dedicated to prompt visitors to take a desired action, whether an opt-in, a sale or any type of click that brings a user one step closer to a company’s goal. Basically, any website can be classified as a call to action page because virtually every person who creates a website has a specific action he/she wants a visitor to take.

Most websites commit at least one of the top crimes listed below. Do you agree with the choices?

1. Graphic Clutter


Graphic-Clutter-Worst-Call-to-Action-Pages

It’s obvious this website’s purpose was show as much information to visitors as possible above the fold. While this is a valiant effort, too many graphics can work against you.

A great call to action page will send your eye to a specific area. When you look at this page, your eyes are drawn everywhere and if you were looking for a car, you wouldn’t even know where to begin.

Though this page is not a landing page, it is a prime example of why less is more when trying to increase conversions with web page design. A call to action page should include benefits, features, logos, maybe one or two images and a prominent call to action button. Any more and the page will suffer.

A website home page should follow suit while including clear navigation and an easy experience for visitors. Avoid clutter at all costs. White space is your friend!

2. Blended Call to Action


Blended-Call-to-Action-Worst-Call-to-Action-Pages

Though the call to action button on this page is outlined in yellow, it does not stand out enough from the background. The yellow also matches the font above it so it blends into the background even more. The color scheme of the page is yellow, red and orange and the call to action button follows the same color scheme; therefore, it does not stand out enough. A solid color in contrast to the page would work best.

3. Distracting Background


Distracting-Background-Worst-Call-to-Action-Pages

Many businesses want to incorporate their brand colors into their website design. While this is a smart marketing strategy, if the color is overdone or distracting, it can have an adverse effect. The bright yellow background in this web page is very distracting and it draws the eye away from the purpose of the website. If you view this website in its normal size, you will see how truly distracting the bright yellow background is.

It’s good to implement your brand colors in your website design, but not at the expense of distracting visitors away from your purpose. Your background should support your web page and be somewhat neutral.

4. Lost call to action


Lost-Call-to-Action-Worst-Call-to-Action-Pages

On this page, the call to action button is not only lost, it is nonexistent. One of this website’s desired actions is to urge users to click and find out more information about the Thank You® Premier card. The current call to action is simply text that says “Get Moving”.

If you really want to lead users to an intended action, use buttons in contrasting colors. Text will never be strong enough to get users’ attention. The button should include a contrasted color that screams “click me” without slamming it in user’s faces.

Also consider the call to action button’s proximity to other elements. For example, with an ecommerce site, the “Add to cart” button would be most effective if it were placed right next to the product. You can also place call to action buttons near places of interest like testimonials, feature lists and benefits, etc. Make sure, though, not to clutter your page with too many buttons. Keep them close to your key points and at a  maximum of 2-3 per page for simple landing pages.

5. Too Much Information


Too-Much-Information-Worst-Call-to-Action-Pages

When people offer us more information than we want to hear we often say it is TMI or Too Much Information. Similar to how you would want that person to be quiet, a web page will suffer this same reproach if it is suffering from TMI.

On this example web page, the call to action is not front and center and your eye is drawn to the articles instead of the “Get a Quote” text. This page, while meant to attract visitors to get a quote, leads them towards reading an article which may be too much information for this page. Content is not necessarily bad; great content outlines the pages of some of the greatest websites. But when it blurs the message of the site or distracts users from a clear call to action, profits will suffer.

For this website, a more prominent call to action in a more effective location would draw the eye there first.

The goal with a call to action page is to lead your visitors to click on the call to action button without distracting or boring them with too much information. You should include enough information (features, benefits, guarantees, testimonies) to lead them to take action without overdoing it. If your visitors cannot figure out whether or not your site will be beneficial to them in the first few seconds, they will assume the worst and hightail out of there.

6. Too many Links


Too-Many-Links-Worst-Call-to-Action-Pages

This page is actually ranking quite well for competitive mortgage related keywords, but the design of the site unfortunately does not follow suit.

Unless your site is product specific (e-commerce) or purely informational, excessive text links can overwhelm users.

The purpose of this website is to guide consumers to get a mortgage quote. While classifying the links by states is a good idea, the clutter and small font does nothing for visitors’ eyeballs. As stated before, text links are ineffective as calls to action on pages like these and the close proximity of these links jumbles everything together to look like one cohesive blue link.

There is no clear call to action here. This webmaster would benefit from making this page a second page and redesigning the home page to include one or two buttons only, leading people to “Get a Quote”.

Here is a trick: Squint your eyes slightly to blur your vision and look at the page. If your call to action doesn’t stand out, adjustments may need to be made.

7. Button Placement & Location


Button-Placement-Location-Worst-Call-to-Action-Pages

Though this website is committing many faux pas, I chose it due to improper placement of the call to action button.

If you look on the far right (it probably took you a few seconds to find it, which is a few seconds too long), you will find a small box with a dropdown menu. This is where the webmaster would like a user to click. The only element standing out is the small red arrow and that is even questionable.

The placement and location of your call to action button is equally as important as its size and color. A great call to action will not be effective if it is surrounded by too much text or not enough whitespace, or if it is located out of sight.

Generally, it’s important to keep call to action buttons above the fold (visitors can see it without scrolling), clearly visible and prominent in relation to all other elements. If you have content that is only visible by scrolling, include a call to action button towards the end so users do not have to scroll back up to click on it.

8. Button Size


Button-Size-Worst-Call-to-Action-Pages

Your website visitors should know exactly where they need to go the second they land on your website. In this example, though well-designed, this “Buy Now” call to action button seems a bit small for the animation of the site. If you click on the entire website, you will notice a busy background which can distract from the small button as well.

Please note, though, that a bigger button is not always associated with higher conversions. The button should stand out from the other design elements without overwhelming the entire design, which can turn people away as well.

9. Button Text


Button-Text-Worst-Call-to-Action-Pages

This website used the word “Go” to urge users to click for a quote. While the design does draw your eye to the quote box, I am not sure the word “Go” is the best choice.

Though there are some basic rules for button text to maximize conversions, it is more of a function of the type of website rather than a general consensus. For example, a business offering a free trial may use “Click Here to Get Your Free Trial” while a service-oriented website may use “Get Started Today”.

General rules of thumb for call to action button text:

  • Avoid being too wordy
  • Keep it simple
  • Add urgency
  • Limited availability if applicable
  • Use action words like “now” or “today”
  • Always split test

When it comes to elements such as button text, the only way to determine what works best is to split test. Sometimes, minor changes can increase conversion rates dramatically.

10. No Clear Message


No-Clear-Message-Worst-Call-to-Action-Pages

Many businesses are not clear on their sales funnel; therefore, their visitors are not led to take a desired action. This dealership is trying to push users to perform too many actions at once along with reading text which can be boring for people looking to buy or lease a car.

TIP: The purpose of your call to action is to get users to the next step only. In the case of the dealership, the final goal would be to sell a car, but that should not be the main goal of the website. That is the car salesperson’s job. The website should only urge visitors to take the next step which is to visit the dealership.

Don’t try to sell a car with your website. Just sell the next step!

Have you seen any call to action crimes? What call-to-action crimes have you committed?

December 06 2011

10:00

Using Retro Style Images And Banners For Advertising

Retro style images and pop art graphics like those of Roy Lichtenstein and Andy Warhol is a popular style adopted by graphic designers for web and print design. They are chic, fashionable, eye-catching and add to the ‘cool’ factor of the company and its products. Lots of stock images are available for download which can be used for web designing, however if you want something unique or customized it’s better to grab a pencil and paper and do it yourself.

Step 1: Visualize the layout


If you are designing a website, it is important that you choose the image while constructing the wireframe as it should fit your overall layout accordingly. Have a look at some examples to get an idea. It is popular to use them like banners or as full body depiction which encompasses the entire page. Some examples are below
Mailchimp retro

istockphoto

Tagetscope retro layout

Step 2: Sketch


Once you have decided on the layout, its time to work on the image. Start with a few pencil sketches and try to capture the essence of the product. In this case my client was a mobile app company, so I decided to create an image of a lady displaying a standard touch screen mobile phone. To make sure that the original product gets the deserved attention I decided to sketch the lady and use a real phone image so that it remains highlighted and looks like a fun combination as well.

Retro image sketch

Step 3: Scan


Photocopy the pencil sketch so that the original sketch is preserved and can be re-used later. In this step you can either scan the sketch and add the details digitally (like details of hairstyle, dress etc) using Photoshop and a Wacom device, or if you feel more comfortable on paper, try to sketch the details on the photocopy and then scan it.

scan retro image

Step 4: Digitally enhance


Once you are satisfied with the scan, open it with Photoshop (or a similar editor) and plug-in your Wacom (or similar device). First use the magic wand tool in Photoshop to select as much area as possible from the image and save the structure in a new layer. Now use the pen tool to select around a shape and copy on a new layer. Finally use the brush tool and with careful movements of the Wacom pen add finishing touches to the image.

a. Using the magic wand tool to select and copy areas from the scanned image, and reconstruct them on a different layer (say layer2)

magic wand on retro image

b. Zoom and use the pen tool to copy the finer details on layer 2

pen tool on retro image

c. Use the brush to reconstruct the details on layer 2.

brush tool on retro image

Step 5: Integrate


Add the mobile phone (or any other product) to the image and adjust the size and contrast of the image for smooth integration. Add the entire image to the banner or the web layout. Try a few different backgrounds to see what works best.
retro and pop art inspired banner
retro and pop art inspired banner

November 25 2011

10:00

The Labyrinth Effect In Good Looking Designs

Great designers are always trying to push boundaries, creating and experimenting with new ideas, some of them resulting in revolutionary trendy design types that keep appearing in the constant shifting web design industry. I really like to see those new ideas coming to life considering that most of them are amazingly well designed, however alongside with such positive feedback, like everything in life, there is a great probability of existing a negative and critical side that acts like a turn point limiting great designs to just that… design.

One thing I do every day is save 30 to 45 minutes to check my favourite design galleries. After a long time analyzing and creating designs, I came to the conclusion that when you push too hard trying to revolutionize your layout, you eventually forget about the end-user. But believe me…”that guy” must be your number one concern. If you’re going to invest your time building a completely innovative design, please do yourself a favour and do not forget about structure and usability.

Below I’ll give a list with tips and examples of pages which I consider suffering from the labyrinth effect… meaning all of them are greatly designed but usability was not considered as it should. The point of this article is to transmit the idea that design must be just part of the equation.

Labyrinth Effect

It’s tempting to think that a website with a cutting edge look will be enough to reign in the business and call the attention of users and possible clients, however, reality reveals itself to be far more complicated. You need to balance an attractive design with an easy-to-follow user experience.

Every designer should strive to create order and balance within a page which is achieved through a moderated use of the content’s weight. Colors, shape and size gives that weight to an element and when it’s not correctly measured and in a suitable position the web page will look messy and confusing to the end-user. It’s important to say that you can have the most efficient use of white-space and still make the user feel overwhelmed if you don’t prioritize balance and order.

When design is a sky-rocket but you don’t know where to look first, it’s a clear indicator that it suffers from a labyrinth of information that makes the user feel lost and overwhelmed, it suffers from what I call the labyrinth effect.

Examples

Hellow

The Labyrinth Effect

Space o Technologies

Zizzi Ristorante

Zizzi Ristorante

Aussiebbqlegends

Labyrinth Effect

How to avoid

The labyrinth effect is directly related to balance, not only balance associated to each element’s position but also balance associated to quantity and repetition. Like I’ve said above, the overall weight must be correctly measured.

The one rule I consider to be important in order to avoid having an overwhelming design type is to always make use of wireframes. Wireframes are the representation of the website’s content and type of elements (not the design) which can provide you the possibility of testing the overall weight and balance of your page. Although very simple, I’ve gathered a few points that I consider to be of extreme importance.

White-space

It’s not really a surprise is it? As said above, white-space is not bullet proof, but it’s definitely a good start if you plan to have usability as the first concern. Space between elements isa step forward towards better readability, usage and aesthetics. Even if you have too much content, never forget to consider and test several spaces between the different elements in your page.

Balance

There are two important concepts in balance – symmetrical and asymmetrical balance. In symmetrical balance elements have equal weight which leads to the traditional design type, meaning that in asymmetrical balance elements have a different weight. The labyrinth effect tends to appear more often when using symmetrical balance, since elements have equal weight you won’t see a more prominent element to which you will look first.

With the above being said one thing that can clearly help avoid the labyrinth effect is to make good use of order while using symmetrical balance. Since the elements have equal weight, you need to build a hierarchy (most important elements starting from the top) while displaying a low number of elements.

The problem with asymmetrical balance happens when the heavier elements are used in the wrong places. Be sure to place the heavier elements where you would like the user to look first.

Imagery

Although I’m not a big fan of using stock images with people in it, I feel obligated to admit that using that kind of imagery or photography is very efficient when you need to tell the user where to look. Using a person or an animal pointing to a spot on the page will somehow “force” the user to look at it.

Minimalism

There is one style type that will never be a victim in this matter. Minimalism as the word implies makes use of the simplest and fewest elements in order to achieve a greater effect. Less is more and in this case that is an absolute truth.

Minimalism is efficient because it only make use of the most important elements which in most cases represents what the visitor wants to know.

Conclusion

Functionalities only have a purpose if someone uses them and in order to achieve that you must get the attention of your target audience. In most cases that turns out to be an easy task if you have an amazing looking design which captivates the user attention. But don’t fool yourself… If the design compromises usability and user experience you won’t succeed. Always remember to test your layouts as much as possible and with a variety number of different people.

November 19 2011

10:00

A Guide To Improve Your Website’s Readability Through Colors

Colors exist not only to make your site look pretty. Colors have a more important function – to make your site usable. A pretty site is not something to object against but when pretty colors make the text on site unreadable, this isn’t something to be proud of. This is why a designer must always think of readability first and beauty second when choosing the colors for a site.

When you think about the number of available colors, it looks easy to pick a bunch of them that go well together and are readable. If you stick with classic background colors, such as white (FFFFFF), or very light gray (F5F5F5, FAFAFA, FCFCFC, etc.) and foreground colors such as black (000000), or very dark gray (080808, 050505, 030303, etc.), or the lightest/darkest pair of the main color (i.e. red, green, blue or whatever color you are using) on your site you might wonder why readability is an issue at all. However, sooner or later you will get fed up with these classic combinations everybody is using and you will want something fancier.

This is where your problems start. These fancier combinations might be pleasing esthetically but in terms of readability they are not necessarily winners. Of course, nobody says it is impossible to find good combinations outside the group of frequently used ones. With the right tools I will mention in this article finding colors with good readability becomes much easier. However, before we go to the tools, let’s review some of the basics of colors and readability.

Color Brightness and Color Difference Determine Readability

Web design always boils down to numbers and the way you crunch them. Readability isn’t an exception. The guidelines for readability are set by the W3C and even though they (as almost any other W3C specification currently in use) are work in progress, there is a lot of criticism of the methodology, and researchers prove it wrong, it is the best we have and we stick with them. Here is the basic formula, as defined by W3C:

“Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Color difference is determined by the following formula:

(maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))

The rage for color brightness difference is 125. The range for color difference is 500.”

These formulas might look pretty cryptic and hard to understand but when you use a tool that calculates the values for you, for instance the Colour Text Legibility tool, or the Colour Contrast tool, you easily get an answer if the colors you have chosen pass the test or not.

However, unless you feel like reinventing the wheel and hunting for color combinations with good brightness and difference, you can stick to the safe choices that have already been developed for you, such as dark text on a light background.

The Golden Classics: Dark Text on a Light Background

All equal, dark text on a light background provides the best readability. Of course, it depends on which colors you choose but the highest readability ratio is achieved when you use black on white:

Black on White

As you see from the screenshot above, readability varies depending on the font size (and obviously the font itself) and a good tool will tell you if the combination you have chosen is good for titles only or for both titles and body text. Generally, the larger the font size, the more readable it is. Don’t count on this too much because as you know, for body text 10-14 is the most used size (i.e. is relatively small), which means that for body texts you won’t be able to use a color that is readable for titles.

Black on white isn’t the only great combination. If you want to see more examples of excellent to good contrast when you use white as a background color, check the first table in this article.

White backgrounds are pretty common but sometimes you will want more color. For instance, some very pale shades of red, green, yellow, blue, etc. make great backgrounds when used with black or another very dark foreground color. These combinations are not as readable as when you use black but still the ratio is good. Here are some examples of combinations where the background color is different from white and the foreground color is different from black:

For Differing Background and Foreground

Ivoryblack (#292421) on lavenderblush1 (#FFF0F5)

Midnight blue (#191970) on ghostwhite (#F8F8FF)

Sgi gray 12 (#1E1E1E) on mintcream (#F5FFFA)

One small trick many designers use to make a page more readable (and more pleasing to the eye, too) is to employ gradients for background. A gradient of white and a very pale shade of any other color works best. Well, you can’t measure its brightness and contrast using the readability formulas but if the two colors that constitute the gradient separately have good readability values, when combined, the result is even better.

The Intricacies of Dark Background

Dark backgrounds can be very depressing – not only because dark colors are traditionally related to bad things in life, at least in the Western cultures but also because they are a lot of pain to choose a readable foreground color to go with.
The problem comes from the fact that even if your contrast values are good, this doesn’t make it easier to read the text. White on black might have the best ratio but it causes eye fatigue pretty soon. As Pabini Gabriel-Petit writes, “On a black background, the high-chroma colors yellow (#FFFF00), green (#00FF00), cyan (#00FFFF), and magenta (#FF00FF) provide the best contrast.”

Dark Background Choices

If these color combinations, no matter how readable they are supposed to be, give you the feeling you are back in the 80s or early 90s when monitors were green and the text was orange, you are not alone. I have never used such an antique monitor, so I am not able to tell from experience but always when I land on a site with a dark background and light text I have to read, I get the feeling it is a time machine that takes me back two or three decades ago and my eyes are the first to object.

OK, dark backgrounds might be cute but when I have to read a 2,000+ word article (and the comments under it), this makes me cry – literally! Some sites that care about their users (and their users’ eyes) provide ways to switch colors, so if you don’t like the default dark background, you are not forced to watch it. Additionally, there are many ways to override the default colors a site uses but I’d rather visit sites that use readable color schemes than spend my time fine tuning the colors.

Probably I go to extremes, but I will personally never recommend to use a dark background with light font for sites with lot of text to read – I feel this is a usability sin #1. For other types of sites – i.e. image galleries, or even corporate sites where there aren’t 1,000+ word texts, dark backgrounds aren’t a no-no.

Those Tricky Colors That Fit Nowhere

After I discussed the two most common scenarios – i.e. dark on light and light on dark, the only thing left is to discuss all the other color combinations you can think of. These color combinations include the majority of colors but for one reason or another, you can use them neither for background, nor for text color because no matter how masterfully you combine them, either the contrast is low, or the combinations aren’t esthetically pleasing (or both).

Of course, this doesn’t mean these colors are useless. Not at all – they are great for headings, especially with larger font sizes, and for emphasis, as seen from the next examples:

Red 3 (#CD0000) on seashell2 (#EEE5DE)

Blue 4 (#00008B) on cornflowerblue (#6495ED)

Colors have a huge effect on readability. This is why you need to choose them wisely so that they not only create esthetically pleasing combinations but also make it easier for users to read the text. Text is an integral part of any site and we shouldn’t punish visitors for coming to our site by using hard to read color combinations.

November 16 2011

10:00

A Basic Guide To Choosing Colors For The Mobile Web

The rules for mobile design and mobile SEO aren’t completely different from the rules applicable to desktop sites but it is all the minor differences that make a designer’s life hard. These differences are present in all aspects of mobile design and the process of choosing the colors for your mobile site isn’t an exception.

Reuse Your Desktop Color Palette

When I say that the process of choosing the colors for your mobile site is different, don’t take it that it has nothing to do with the standard process you know from desktop sites. In fact, you seldom have to start from scratch but instead reuse your desktop color palette. This might seem like a lazy approach but in fact it is much superior in almost every aspect to choosing your colors from scratch.

For instance, if you want to ensure consistency between your mobile site and its desktop counterpart, the best you can do is use a stripped down version of the color palette of your desktop site. All you have to do is remove the colors for the site components you won’t be using on your mobile site, make sure that they display well on your target mobile devices (you might need to replace some of the colors, if they are too fancy to use on a mobile or if the contrast is unsafely low), and you are ready to go.

However, it is also totally acceptable to start your mobile site from scratch rather than make it a stripped down version of your main site. The most common case for this is when your mobile site has a very different functionality from your desktop site. Of course, even in this case you can use a modified version of the color palette from your main site but if due to various reasons this is not possible, you need to create your separate mobile color scheme.

In any case, when you choose the colors for your mobile website, the technical limitations of mobile devices are a very important consideration to keep in mind.

Keep in Mind the Technical Limitations of Mobile Devices

Mobile devices get more and more powerful day by day but still in terms of technical abilities, they are far behind contemporary PC displays. For instance, mobiles with monochrome displays are almost history, though you can occasionally find people who use them. You might laugh at the idea to design with these devices in mind but the USE_OF_COLOR Human Test (“Browse the page in a monochrome environment.”) by the W3C recommends them as the ultimate test of how readable your colors are. This is not an exaggeration because some of the technical limitations of mobiles (and the environment you use them in) basically take away from you many of the advanced color options desktop displays award you with.

Image from Wikipedia

Color Depth Dictates Fewer Colors

One of the main characteristics of mobiles to take into account is their color depth. Technology is improving rapidly but still even the best models today have relatively low color depth. Low color depth, such as 8 or 16 bits means that a device is capable of displaying 256 and 65,536 shades of red, green, and blue, respectively, which is far from enough.

It is true that mobile displays are constantly increasing their color depth but there is still a lot of room for improvement. For instance, this article (though a bit old) gives an idea of what color depths some of the major brands on the market today offer. For a more detailed look at color depth, check this white paper.

Therefore, if you want to make the colors of your mobile site user-friendly, use as few colors as possible. It is better to stick to main colors and avoid the use of fancy ones because the risk of them not being displayed properly is higher. Additionally, because of the small mobile screens, you simply don’t have much space for lots of tiny squares all in different colors, which further forces you to use a palette with fewer colors.

Brightness and Contrast Settings Demand High Contrast Schemes

In addition to color depth limitations, you also need to consider brightness and contrast settings. The levels you see on specifications might sound decent but they can be misleading because they don’t take (and can’t take) into account the actual viewing environment. For instance, a very common use of a mobile is in the brightness of daylight, when the perceived brightness and contrast are much lower than the ones stated by the manufacturer. You can’t make your visitors browse your site only in the dark of the night to see it in its full glory, right?

What is more, many users keep the brightness and contrast settings low on purpose to conserve energy. All these mean that your site will be viewed with less brightness and contrast. To counterbalance, you need to use really high contrast color schemes. You can use a contrast analyzer to check how you fare.

Be Careful with Gradients and Background Images

If you use a lot of gradients in your designs (as I do), you need to be even more careful. Gradients are cool, but really only on a desktop. On a mobile, a user can see gradients even when they are not present – he or she just needs to bend the device a little, and voila, here is a gradient that you didn’t include in your design. Of course, this doesn’t mean you must kick gradients completely out of your mobile repertoire but if you minimize their use, this won’t be a mistake.

Backgrounds pose a similar problem. The same background might be perfectly legible on a desktop but on a mobile it might be impossible to read the text. It is your task to make sure this doesn’t happen.

Don’t Rely on Colors to Convey Meaning

Even with desktop design, it is not good to rely on colors to convey information – every usability expert will tell you this. However, this is true for mobile designs and even W3C has included it in its Mobile Web Best Practices.

Time to Get the Color Scheme Ready

Image by Wikipedia

When you get to the very task of choosing the color scheme for your mobile site, you need to take into account the meaning of colors and the right color combinations to use. Even if you plan to reuse your desktop color palette, it won’t hurt to see if a better alternative is available and try using a color scheme generator. These also help when you are stuck and have no idea which colors to use, or if you simply want to speed the process. You might not like every scheme the generator offers you but often the suggestions are at least decent and with some minor modifications (i.e. replace the colors in the scheme you don’t like with other colors you find more suitable), you are done.

Examples of Mobile Sites – Great, Good, Bad, and So-So

1. Weather Underground - a great site with clean design visible on any screen

2. Craigslist- boring to look at but really useful, very minimal, as the site itself, doesn’t waste my bandwidth with useless imagery.

3. Gmail – clean and easy to use.

4. Flickr – if they didn’t use the colors from the main site, the contrast could have been better but still it is OK.

5. Walmart – clean interface, though the text color is a bit light.

6. McDonald’s – the logo is rather pale, occupies a lot of space on the screen, but when you scroll down, things get better.

7. Digg – rather pale, difficult to read.

8. Bloomberg – again, could have had more contrast but not bad as a whole.

9. US magazine – the colors don’t have enough contrast, blurred and hard to read.

10. AztekWeb – gradient + low contrast + scrolling + light text on a dark background, though it probably could have been worse.

If you are familiar with color theory and if you have experience in designing desktop sites, you won’t find it difficult to come up with good color schemes for your mobile site. In fact, thanks to the specifics of mobile sites and the fact that all equal you need fewer colors, you might find it easier to design mobile color schemes than desktop ones.

November 08 2011

10:00

An Introduction To Dark Website Design

Dark versus light design has been a long and controversial topic since almost… forever. You probably have read many articles about this matter and you probably have found contradictory facts among them. The truth is that there are no certainties whether you should use a light or dark design on your new layout. However, there are indeed strong indicators that may tell you which version you should be using to provide the majority of your visitors with a better experience.

Since I’m going to give you a personal opinion on how you should build your dark layout, it makes sense for me to first see if you should or should not indeed adopt a dark version for your website.

Dark vs Light background

There are three crucial indicators that should make your life easier when deciding if you should or should not design a dark layout. Most of them are pretty much common sense and should only take a few minutes to analyse.

1) Subject

Are you going to sell clothes? Is it a blog about weddings? Or a vacation planning site? As you may know, color and contrast are associated to feelings and that’s why a very dark gray background may not be suitable on a website that sells vacation plans to the best beaches during the summer.

2) User

Now you should ask yourself:

  • Who is going to visit your website more often
  • What type of person
  • Social level
  • Age

This question is not only useful for the type of contrast and colors you should use on your website or application, it also defines the majority of other question marks like style, minimalism and typography. You may realize that a person in his late 50′s may prefer a light background color, not due to readability (you’ll understand why in the next topic) but maybe because that person is used to visiting light background websites. It’s all about what they do, what they are used to and what they like.

3) Purpose

Will it be a store? Just a blog? Someone’s portfolio? A photo gallery? Always remember that every website has a purpose. If you’re going to sell a product to which you need to emphasize colors (this obviously depends on the type of product) a dark background would suit that purpose better than a light background, however if you’re going to have a news portal with plenty of content, a light background may suit your needs better.

Does the use of dark background really affect readability?

There are contradictory studies and scientific research so all I can give you is my personal opinion which is no, a dark background does not affect readability.

You may be wondering “What are all those sites and articles talking about when authors say dark backgrounds really affects readability? They even give examples!” To answer your question, readability is affected by the use of wrong text color, wrong line-height, kerning and font size, not by the use of a dark background. In the end it’s all about typography and the elements you use, not the background itself. It’s obvious that you just can’t compare a paragraph of text with a line-height set to 0.5 in a light and dark background – you always need to adjust the element you are using to the surrounding background.

I’ll give you tips on how to design a dark layout focusing on elements, I won’t tell you if you should use a #000 or #111 color for your background – that’s irrelevant. I’m going to tell you how you should use and design the elements on your dark background. Again, is all about how you use the elements.

So let’s get started.

White Space

If you have read some of my articles, you know I always touch on this key topic. White-space is there to help in almost every design related topic.

As I said above, you need to suit every element to the condition they are in. In the case of dark layouts, you can actually focus better on each element which gives you the feeling that elements are closer than they really are leading to a cluttering sensation.This is why you need to use white-space effectively. Readability is also favored with more white-space.

White-space

Avoid cluttering more than ever

Consequently related to the white-space topic above, cluttering is something to avoid when you’re using a dark background. Remember that a dark design is more sensitive to content spacing so what may sound enough on a light background may not be the case on a dark one. If you have low to medium content you always need to make efficient use of white-space, however, if you have too much content you should consider separating it through subpages/sections or changing to a light background.

Typography

Typography

Typography is the most sensitive element in any design but especially while using a dark background. It clearly needs to be carefully planned otherwise you will see more and more articles stating that dark backgrounds are bad for readability.

In order to improve readability,  the first thing you can do is increase font-size, line-height, kerning and write in small paragraphs. You may have noticed that all these text options are still related to white-space. Having this said, your second concern should be with the font itself. Should you use sans-serif or serif fonts? Serif fonts are not clean which makes it harder to read with small sizes. This means you should use serif fonts for bigger sizes like titles and sans-serif fonts for small text like paragraphs.

Contrast

I could have written about contrast on the Typography topic above, however, what applies to typography also applies to every other element on your page except for imagery.

So you wake up and you suddenly look up to the sky with a very bright sun-light… you know the feeling right? The same applies to the contrast use on your screen. Using pure white text on pure black background (or vice-versa) will somehow be unpleasant to your eyes. The first basic rule is to never use pure-white/black on the opposite color. Using #ddd for your text and #111 will be more preferable than  #fff text color on #000 background.

Content emphasis

One big advantage while using a dark background is the ability to easily apply emphasis on a desired element like text or image. That’s because in a darker background the focus will be completely transferred to the main elements. You also have more ways to do it than in a regular light background. You could achieve great emphasis using reflections and different blending modes for vivid colors or gradients which are possibilities that would be very difficult or almost impossible to get with a light background.

Background elements

If you’re going to use a dark background, one thing you can do is to make use of background images, textures or patterns. On most cases, images/textures and light backgrounds don’t make a perfect match. Nevertheless, be sure to avoid making your background distracting, focus needs to be on the content.

Conclusion

I believe that everything should be used according to the surrounding elements, so a dark background can have real benefits over light backgrounds when the elements are properly adjusted to it. Some people prefer reading and using light backgrounds and others not so much, as I said there are no certainties so all you can do is to check competition, make some research on your end-user and conclude which option is the best for your business.

Good luck!

August 29 2011

10:30

1stWebDesigner’s Life – Your New Must-Read Webcomic. What do you think?

After enjoying a good weekend it’s good to start your week reading some funny things, right? That’s why we bring to you our brand new webcomic: 1stwebdesigner’s life. The comic will not just be about common situations every web designer encounters, but we also want to give you some ideas about how to deal with those situations.

We’re inspired by many web comics and funny websites out there, like A Programmer’s Life, FMLife, Vida de Programador(pt-br), WebDesignerDepot’s Comic of the Week. But we surely won’t steal anyone’s idea. Everything written here is about things that I have experienced or reader’s submitted ideas :).

Oh, Tyron Love is the amazing South African cartoonist that brings this idea to life.

Characters

Our nameless Hero! (give him a name!)

It’s you, me, and everyone that suffer from web designing disease.

You have gone through hard times, haven’t you? But I’m sure you can laugh when remembering it, you know, that “better than google” client, that funny comment of your girlfriend, that site you have forgotten to test on IE. So this is it, always with a smile on his face and ready for the craziest clients that may come.

By the way, the client is another staff member:

Da Boss / Client

Basically he is someone who pays you to do technical work.

Many times they don’t know what they want, and think that what you do is just click a few times in a magic website generator and BOOM, new Facebook done.

More characters to go!

We have more people backstage just waiting to be published, but for our inaugural piece, we will have just these two characters. :)

1stWebdesigner’s Life #1 – Flash Banner

I bet you have seen something similar to this:

How to deal with this situation?

This happens not only with Flash, but I believe that iPads, iPhones, and iPods widespread made this issue pretty common.

First of all, you are the specialist. You have to know exactly which limitations each solution has, and how to deal with them. In this case, our hero has made the mistake of believing in what the client says.

Huge mistake, dear friend.

Of course, you don’t have superpowers (as far as I know), so you have to ask some questions. But you should keep in mind that your client doesn’t know what he is talking about when it comes to implementation.

Believe me, if he says “I want a flash banner” he thinks that only flash can solve his problem.

Well, you have basically two solutions for this:

  1. Ignore customer and do it your way – This is potentially dangerous if you aren’t the only one working on a project, although sometimes it is the easiest way.
  2. Educate your client - This can take a little time, but man, this will surely prove you know what you’re talking about. Your customer will understand why you’re doing the things you’re doing and if he takes the risk he will know what could go wrong.

Many times it’s good to explain to your client some of the common limitations of the application they’re asking you to use.

You know, if he wants AJAX, Flash, Hit counter, 20-steps buying process or any other solution part of the reason you are being paid is to explain why you’re using one solution over another, and what the pros and cons are of each.

Now, it’s your turn

So, do you have funny situations that want to share with us?

Or do you have a creative name for our hero? Yeah, it will be good to hear some advice!

Feel free to get in touch via comments, twitter, email. Share with us how your 1st web designer life is going.

July 21 2011

10:00

Web Design History: From The Beginning

The history of the Internet is short, but so much has changed within that time. It has radically changed how we live our lives. More importantly, the internet has created thousands of jobs that did not exist a decade ago. These include jobs in SEO marketing, online telemarketing, freelance writing, blogging and of course, in web design.

Although web design has only been with us in the past few decades, it has become a large part of our lives. We couldn’t imagine the internet without its animated graphics, fancy text, cool backgrounds, and background music. How did all these come to be?

Internet and Web Design’s Early Beginnings

It is said that the first web site published in the World Wide Web history is sometime in August of 1981. That was some 30 years ago, but the Internet was born in the sixties. It wasn’t as fast as it is today, but it was very efficient in transferring information from one computer to another. Because of its reliability, the internet was used by the military, scientists, educators, doctors and the government for efficient transfer of information within the group. Back then the internet required a computer, a modem and a telephone line.

In the 1990s Mosaic was introduced to the public, which was a free browser program. Mosaic was the first commercial browser that allowed the public access to online content. It was designed by Marc Andreesen and Eric Bina, and originally ran on the Unix system. By 1994 the Mosaic web browser became available to other OS such as Mac, Windows and Amiga OS.

Mosaic Web Browser, the first web browser in internet history (Image by Computer History)

During the 90s, internet connected the world through telephone lines. Documents were viewed in HTML,  where everyone can view and access it if they are online. These sites are referred to as first generation sites, they had lots of text, limited colors and graphics with linear layout. It was created for functional communication, and not to entertain users. Since dial-up modems are relatively slow it was impractical to bombard users with lots of graphics–loading would take forever.

Thus, web sites in the first generation were created to maximize loading time for faster data transfer through the slow dial-up modems in the hey day.

HTML – First Generation

The Hypertext concept was created by Ted Nelson during the 60s, but it was used only several decades after. In the 1980s, Tim Berners-Lee invented the Internet and used the hypertext coding language. The World Wide Web came into being in 1994. HTML was the only coding language for web design back then, and back then there wasn’t much freedom when it comes to design.

Because of this, the ‘early web designers’ could only create simple layouts, text, tables and links with little or no graphics. Consider this as the ‘Bronze Age’ of Web Design. Even if web sites were not design-centered back then, developers were already thinking about how they can make their sites more visually appealing.

The W3C or World Wide Web Consortium was created to prevent large companies from monopolizing web design code. If only one company is able to control web coding and design, the story of internet and web design would have been different. Until now, W3C is still responsible for governing the coding techniques, rules and guidelines up to this day. The W3C also updates web designers to any changes they will make. It is important for designers to follow the guidelines set by the body so that the site will work cohesively in search engines and browsers without errors.

W3C sets the web design and coding standards.

After Mosaic, the Netscape web browser soon followed, the browser was released on November of 1994. It wasn’t long before it became the leading browser on the web. It began creating its own tags, and the World Wide Web followed suit.

Second Generation

It was during 1992 to 1994 that other developers started adding their own bits of HTML codes. Thus to prevent confusion of the ever-increasing HTML 1 tags, the HTML 2 was born. The internet is faster now, and web designers are now given more HTML capabilities. Coding has become a bit more complicated, and graphics become more frequent.

Third Generation

In 1995, more HTML tags have emerged and HTML 3 was born. Designers now have an option to use HTML B tables and style sheets. That same year, Microsoft released their own browser, Internet Explorer.

During this time, designers have more freedom to customize and beautify their web design. Third generation web sites can now have colorful or patterned backgrounds. They also had animated images, thanks to .gif. Flash is also introduced, which is a fresh breath of air. It changed the whole landscape of web design, from static to dynamic.

Today’s Modern Web Design: 4th Generation Web Sites

Today’s web sites are classified in the fourth generation. Aside from HTML, web designers can play with other coding tools such as JavaScript, Flash, XML, CSS, etc.

Parasol Island is an interactive website with video, games, sound & graphics

HTML 5 is the 5th revision of the HTML language, and this is the one currently used now. HTML is the solution to most problems and syntax errors found in HTML 4 and XHTML 1.1. HTML 5 attempts to define a markup language for both HTML & XHTML syntax.

HTML 5 also added plenty of new syntax features, including the integration of SVG content, and adding <video>, <audio> & <canvas>. This means it is now easier to add multimedia content without any more plug-ins, etc. Other elements designed to improve the semantic document content are: <header>, <article>, <section>, etc.

Amazing website using HTML 5 (Digital Hands)

Because of the remarkable additions, the need for other plugins such as videos, flash and Java is greatly reduced. HTML is improving and moving towards every direction. HTML5 is compatible with various web browsers such as Mozilla Firefox, Apple Safari, Internet Explorer or Google Chrome.

Mobile Web Design

It is estimated that majority of the population will be using smart phones by 2012, with international sales of 2.5 billion phones from 2010-2015. This means that mobile web use will also increase 100%, maybe more. It’s time for companies to invest in mobile design, to make sure their websites are mobile web-friendly.

Mobile web simply makes everything more convenient. Mobile web design answers the two keys to better web experience: usability and availability. As it goes along the smartphone trend, mobile web design allows content to load faster. Developers think outside the box by providing applications and games that will be applicable to the iPhone, Blackberry or Android.

Mobile web design is about simplification. Everything is simplified to fit a smaller screen. Navigation is easier, design is simpler, and using Flash is currently not possible.

Image by Gizmodo

No two web sites are alike. As a result of immense technology advancements, web designers can now experiment with videos, graphics, images, animation and even games. Aside from that, developers must also think about SEO marketing to make sure their web site appears on the top pages of search engines. These elements are all implemented into the web design, to make it fun and interactive. Web design is no longer as a mere communication tool. The internet is now an arena for entertainment with boundless capabilities.

And for our web designers, the internet is an ever-expanding playground.

April 01 2011

10:00
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.

Don't be the product, buy the product!

Schweinderl