Gestalt principles of form perception

Gestalt psychology attempts to understand psychological phenomena by viewing them as organised and structured wholes rather than the sum of their constituent parts. Thus, Gestalt psychology dissociates itself from the more ‘elementistic’/reductionistic/decompositional approaches to psychology like structuralism (with its tendency to analyse mental processes into elementary sensations) and it accentuates concepts like emergent properties, holism, and context.

In the 30s and 40s Gestalt psychology was applied to visual perception, most notably by Max Wertheimer, Wolfgang Köhler, and Kurt Koffka who founded the so-called gestalt approaches to form perception. Their aim was to investigate the global and holistic processes involved in perceiving structure in the environment (e.g. Sternberg 1996). More specifically, they tried to explain human perception of groups of objects and how we perceive parts of objects and form whole objects on the basis of these. The investigations in this subject crystallised into “the gestalt laws of perceptual organization.” Some of these laws, which are often cited in the HCI or interaction design community, are as follows.

Law of proximity

Figure 1.A: A real-world example of the law of proximity from MTV Music Awards 2002

Figure 1.B.: An example of the use of the law of proximity in interface design – Kazaa Media Desktop

Figure 1.C.: A typical “text-book way” of exemplifying the law of proximity

The law of proximity posits that when we perceive a collection of objects, we will see objects close to each other as forming a group. In figure 1.A., we perceive the MTV logo and the logo for the Europe Music Awards as forming a group in the top left corner and the logos of the sponsors as forming a group in the bottom right corner. The white space separating the two groups of logos is used to indicate ‘grouping’, and the proximity of the logos of each groups is thus used to this end. Thus, a semantic separation of ‘organisers’ from ‘sponsors’ is achieved via structuring the graphical layout in accordance with this simple principle of perceptual organisation.

Figure 1.B is taken from Kazaa Media Desktop, where the law of proximity is used in designing the user interface of the popular peer-to-peer (P2P) software. As shown by the screen dump, the user can choose between P2P and web search. The group of radio buttons underneath are only associated with the P2P search and not the web search. To signal this association to the user, the vertical row of radio buttons are placed comparatively closer to the P2P-search radio button.

Figure 1.C is a typical textbook example, exemplifying how the law of proximity groups the items into 3 groups as opposed to 8 individual items.

Law of similarity

Figure 2.A.: The “preferences window” of the Opera browser

Figure 2.B.: A typical textbook example of the law of similarity

The law of similarity captures the idea that elements will be grouped perceptually if they are similar to each other. In the “preferences window” of the Opera browser (figure 2.A), colour is used to make the user group the menu items on the basis of their background colour. The grey background of the first four menu items thus “tie them together”. Figure 2.B. is a typical textbook example of the principle of similarity, whereby we see the circles and triangles as forming four horizontal rows (or at least some configuration where triangles and circles are grouped depending on their shape). Objects similar to each other thus tend to be seen as a unit.

Law of Prägnanz (figure-ground)

Figure 3.A: The logo of visitnorway.com

Figure 3.B: The logo of the Gnome Desktop Environment

Figure 3.C: The logo of the Macintosh

Edgar Rubin, a Danish psychologist, was the first to systematically investigate the figure-ground phenomenon. The phenomenon captures the idea that in perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground). The visual field is thus divided into these two basic parts. This effect is often used by smart logo makers, as figure 3.A, B, and C suggest: The logo of visitnorway.com can be viewed as both three separate elements of blue, green and navy colour. It may, however, also be viewed as a person stretching his/her arms into the air. Similarly, the logo of the Gnome Desktop Environment (figure 3.B.) can be viewed as both a “G” and a footprint. Lastly, the Macintosh logo can be viewed as a regular happy face and a happy face in profile (looking at a computer screen).

Common to these logos is that you can focus on only one “interpretation” at a time; you cannot observe both the figure and ground at the same time, as ground will become figure when shifting the focus.

It should be noted that the figure-ground is most often exemplified using the Rubin Face/Vase Illusion, named after Edgar Rubin.

Law of symmetry

Figure 4.A.: CSC Finland’s logo.

Figure 4.B.: A typical textbook example of the law of symmetry

The law of symmetry captures the idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their centre. Most objects can be divided in two more or less symmetrical halves and when for example we see two unconnected elements that are symmetrical, we unconsciously integrate them into one coherent object (or percept). The more alike objects are, they more they tend to be grouped.

In the above (figure 4.A), CSC Finland’s logo is perceived as an integral whole although the two constituent geometrical shapes seem to be pointing in different directions and have differing colours.

A typical textbook example of the law of symmetry (figure 4.B.), consists of a configuration of a number of brackets. When perceiving the configuration, we see three pairs of symmetrical brackets as opposed to 6 individual brackets, or two pairs and two singles. This happens despite what is suggested by some of the brackets immediate proximity to each other.

Law of closure

Figure 5.A.: IBM’s logo.

Figure 5.B.: Half of the book cover of Paul Thagard’s book, “Coherence in Thought and Action”

Figure 5.C: A typical textbook example of the law of closure

The law of closure posits that we perceptually close up, or complete, objects that are not, in fact, complete. In the above, we perceive the letters ‘I’, ‘B’, and ‘M’ although the shapes we see, in fact, are only lines of white space of differing length hovering above each other. Similarly, we see the figure on Paul Thagard’s book (figure 5.B.) as forming a three-dimensional box although all we see, in fact, is 24 dissimilar red shapes (count for yourself!) on a dark red background. Figure 5.C. is the typical textbook example of the law of closure; we perceive a circle and not 8 individual circles.

The Gestalt approach can be said to be a “bottom-up” theory as it starts from the bottom (the aspects of the stimuli that influence perception) and work its way up to higher-order cognitive processes. An example of another bottom-up theory (of perception) that is well-known in the HCI community is James Gibson’s theory of “direct perception” (see affordances and perception).

Google user experience

Ten principles that contribute to a Google user experience

1. Focus on people–their lives, their work, their dreams.

   The Google User Experience team works to discover people’s actual needs, including needs they can’t always articulate. Armed with that information, Google can create products that solve real-world problems and spark the creativity of all kinds of people. Improving people’s lives, not just easing step-by-step tasks, is our goal.

   Above all, a well-designed Google product is useful in daily life. It doesn’t try to impress users with its whizbang technology or visual style – though it might have both. It doesn’t strong-arm people to use features they don’t want – but it does provide a natural growth path for those who are interested. It doesn’t intrude on people’s lives – but it does open doors for users who want to explore the world’s information, work more quickly and creatively, and share ideas with their friends or the world.

2. Every millisecond counts.

   Nothing is more valuable than people’s time. Google pages load quickly, thanks to slim code and carefully selected image files. The most essential features and text are placed in the easiest-to-find locations. Unnecessary clicks, typing, steps, and other actions are eliminated. Google products ask for information only once and include smart defaults. Tasks are streamlined.

   Speed is a boon to users. It is also a competitive advantage that Google doesn’t sacrifice without good reason.

3. Simplicity is powerful.

   Simplicity fuels many elements of good design, including ease of use, speed, visual appeal, and accessibility. But simplicity starts with the design of a product’s fundamental functions. Google doesn’t set out to create feature-rich products; our best designs include only the features that people need to accomplish their goals. Ideally, even products that require large feature sets and complex visual designs appear to be simple as well as powerful.

   Google teams think twice before sacrificing simplicity in pursuit of a less important feature. Our hope is to evolve products in new directions instead of just adding more features.

4. Engage beginners and attract experts.

   Designing for many people doesn’t mean designing for the lowest common denominator. The best Google designs appear quite simple on the surface but include powerful features that are easily accessible to those users who want them. Our intent is to invite beginners with a great initial experience while also attracting power users whose excitement and expertise will draw others to the product.

   A well-designed Google product lets new users jump in, offers help when necessary, and ensures that users can make simple and intuitive use of the product’s most valuable features. Progressive disclosure of advanced features encourages people to expand their usage of the product. Whenever appropriate, Google offers smart features that entice people with complex online lives – for instance, people who share data across several devices and computers, work online and off, and crave storage space.

5. Dare to innovate.

   Design consistency builds a trusted foundation for Google products, makes users comfortable, and speeds their work. But it is the element of imagination that transforms designs from ho-hum to delightful.

   Google encourages innovative, risk-taking designs whenever they serve the needs of users. Our teams encourage new ideas to come out and play. Instead of just matching the features of existing products, Google wants to change the game.

6. Design for the world.

   The World Wide Web has opened all the resources of the Internet to people everywhere. For example, many users are exploring Google products while strolling with a mobile device, not sitting at a desk with a personal computer. Our goal is to design products that are contextually relevant and available through the medium and methods that make sense to users. Google supports slower connections and older browsers when possible, and Google allows people to choose how they view information (screen size, font size) and how they enter information (smart query parsing). The User Experience team researches the fundamental differences in user experiences throughout the world and works to design the right products for each audience, device, and culture. Simple translation, or “graceful degradation” of a feature set, isn’t sufficient to meet people’s needs.

   Google is also committed to improving the accessibility of its products. Our desire for simple and inclusive products, and Google’s mission to make the world’s information universally accessible, demand products that support assistive technologies and provide a useful and enjoyable experience for everyone, including those with physical and cognitive limitations.

7. Plan for today’s and tomorrow’s business.

   Those Google products that make money strive to do so in a way that is helpful to users. To reach that lofty goal, designers work with product teams to ensure that business considerations integrate seamlessly with the goals of users. Teams work to make sure ads are relevant, useful, and clearly identifiable as ads. Google also takes care to protect the interests of advertisers and others who depend on Google for their livelihood.

   Google never tries to increase revenue from a product if it would mean reducing the number of Google users in the future. If a profitable design doesn’t please users, it’s time to go back to the drawing board. Not every product has to make money, and none should be bad for business.

8. Delight the eye without distracting the mind.

   If people looked at a Google product and said ”Wow, that’s beautiful!” the User Experience team would cheer. A positive first impression makes users comfortable, assures them that the product is reliable and professional, and encourages people to make the product their own.

   A minimalist aesthetic makes sense for most Google products because a clean, clutter-free design loads quickly and doesn’t distract users from their goals. Visually appealing images, color, and fonts are balanced against the needs for speed, scannable text, and easy navigation. Still, ”simple elegance” is not the best fit for every product. Audience and cultural context matter. A Google product’s visual design should please its users and improve usability for them.

9. Be worthy of people’s trust.

   Good design can go a long way to earn the trust of the people who use Google products. Establishing Google’s reliability starts with the basics – for example, making sure the interface is efficient and professional, actions are easily reversed, ads are clearly identified, terminology is consistent, and users are never unhappily surprised. In addition, Google products open themselves to the world by including links to competitors and encouraging user contributions such as community maps or iGoogle gadgets.

   A greater challenge is to make sure that Google demonstrates respect for users’ right to control their own data. Google is transparent about how it uses information and how that information is shared with others (if at all), so that users can make informed choices. Our products warn users about such dangers as insecure connections, actions that may make users vulnerable to spam, or the possibility that data shared outside Google may be stored elsewhere. The larger Google becomes, the more essential it is to live up to our “Don’t be evil” motto.

10. Add a human touch.

    Google includes a wide range of personalities, and our designs have personality, too. Text and design elements are friendly, quirky, and smart – and not boring, close-minded, or arrogant. Google text talks directly to people and offers the same practical, informal assistance that anyone would offer to a neighbor who asked a question. And Google doesn’t let fun or personality interfere with other elements of a design, especially when people’s livelihood, or their ability to find vital information, is at stake.

    Google doesn’t know everything, and no design is perfect. Our products ask for feedback, and Google acts on that feedback. When practicing these design principles, the Google User Experience team seeks the best possible balance in the time available for each product. Then the cycle of iteration, innovation, and improvement continues.

How to Create a Gooey Text Effect in Photoshop

Preview

Here’s a look at the end result of what you’ll be putting together today:

Resources

You’ll need a couple of extra resources for this tutorial. You can grab them at these links:

• Coaster — DaFont
• Sun Burst Brush — Brusheezy
• Orange skin Pattern — Brusheezy

Step 1

Create a New Document in Photoshop. The size of my document is 530px by 1060px at 72DPI.

Step 2

On your background layer, fill it with #E6F39F.

Step 3

Use your Sun Burst Brushes and place them on a new layer. The color I’m using is #7ae008.

Step 4

Now change this layer to Color Burn with an Opacity of 22%

Step 5

Now come up with a word that you would like to use for this tutorial. For this tutorial I will be using the word “Juicy”. Let’s start off with the letter “J.” The font I’m using is Coaster. The font can be any color for right now, we will be changing it in a bit. Don’t forget to angle your letter by using the Free Transform tool.

Step 6

Now add these layer styles by double clicking this layer.

Drop Shadow

Inner Shadow

Bevel and Emboss

Color Overlay

Pattern Overlay

Step 7

This is how your letter should look

Step 8

Duplicate this letter and place it underneath the original “J” layer. Move it a couple pixels over to the right and increase the Drop Shadow on this duplicated layer.

Step 9

Now we will add some shadows and highlights to this letter. Create a new layer above both “J” layers. With a soft round brush #595757 darken the edges. Change this layer to Color Burn.

Step 10

Create a New Layer and use a #FFFFFF soft round brush. I’m using between 30-60px brushes.

Step 11

Grab your Smudge Tool (44px, Strength 50%) and smooth out your highlights like the image below.

Step 12

Repeat step 10 with the addition of the smudge tool but change this layer to Overlay.

Step 13

It’s a good idea to place all of the layers pertaining to the letter J in a folder to keep everything organized. Now go on and do the rest of the letters. The only thing that varies is the Color Overlay and Bevel Emboss layer styles with each of the letters. I will place screen shots of these layer styles. Letter U layer styles:

Step 14

Letter I:

Step 15

Letter C:

Step 16

Letter Y:

Step 17

Now we are finished with the letters and it’s time to create the ooze. Create a new layer above your “J” group and with your pen tool selected make a rounded splatter and fill it with any color.

Step 18

Change this layer Fill to 0%, and add these layer styles:

Step 19

Now it should look like this:

Step 20

But we are not done with it yet. Time to add some highlights and shadows. Use a combination of light and dark soft brushes (varying opacities), to give the ooze a slimey feel. Don’t forget to use your Smudge Tool.

Step 21

Repeat those last few steps to create another one.

Step 22

Add a couple more:

Step 23

Lastly, we will finish it off with a puddle at the bottom. Grab your pen tool and make a shape of a puddle. With my puddle selected I used various colors like the ones for my letters to form the puddle.

Step 24

Add these layer styles

Step 25

Add some shadows and highlights:

Step 26

Add a couple more puddles:

Step 27

Now you’re done!

 

5 Principles of User-​​Centered Interface Design

Principle #1: Understand Your Users and Support Their Goals

Mitchell Kapor wrote a Software Design Manifesto back in 2002, and there is a quote from this paper that I still like to use:

“If a user interface is designed ‘after the fact’ it is like designing an automobile dashboard after the engine, chassis, and all other components and functions are specified.”

Now at first glance you might be thinking no big deal, a car’s dashboard or website’s interface can be designed once you have all your core components and functionality built. But this will usually get you into trouble. Why? Because your users aren’t interacting directly with your core components — they are experiencing your system, and all that it can do for them, through the interfaces that you provide. And if these interfaces are designed after the fact, it’s almost impossible for them to be able to meet all your users’ goals. In other words, you need to first understand your users — their needs and objectives — in order to create an interface that allows them to effectively access your system’s functionality.

The important questions to ask then in creating a user-centered interface are: Who are the users? What are the main functions that the user will need? Why is the user using this particular piece of software/hardware and what are their goals? Is the software/hardware accessible by users of different experience levels? What is the most intuitive way that the user could interact with the software/hardware?

Principle #2: Make Your Interface Easy to Learn and Enjoyable to Use

For the typical iPhone owner, they don’t care about the brilliance of the software and hardware engineering that went into creating their device, they just know that it is easy and enjoyable to use. Finger swipe, tap, two-finger pinch, slingshot an angry bird. You can bet that Apple never creates anything without first considering how people will interface with their products, and I would guess that a prevailing philosophy of user-centered design at all levels of their product development lifecycle is a big reason for Apple’s success.

For websites, creating an interface that is enjoyable to use may seem less obvious, unless you are creating a complex interface for a Flash game, but being enjoyable can be as simple as a navigation structure that is straight-forward and intuitive. Even so, with more and more applications moving to the cloud and our browser becoming our operating system, creating effective, easy and enjoyable interfaces for our web products has never been more important. I recently switched from desktop based wireframing software (Axure, Omnigraffle) to an online application called Lucid Chart, and the transition was seamless because the authors made sure to create a web interface that is easy to use and familiar to those migrating from desktop programs.

Principle #3: Remain Consistent

An important concept to help the user maintain a sense of spatial orientation, and sanity, is to remain consistent. From the user’s perspective, this means not only a consistent look and feel to a system’s interfaces, but also that actions performed on the interface result in expected outcomes. If the same action is repeated, the system needs to respond in a consistent manner.

I still occasionally come across the odd website that actually changes the order of its nav bar or sub-nav links depending on what page you are on on their site. To me this is the equivalent of switching your car’s gas and brake pedals depending on whether you are driving on the highway or a side road. Interfaces need to remain consistent so that they can fade into the background and not require any higher level of concentration to use.

Principle #4: Form a Dialog with Your Users

I like an interface that speaks to me. Not literally speak to me (although that might be nice too), but an interface that uses terms that make sense and gives me feedback when I need it.

In order to ensure that we don’t get lost and can always find what we are looking for, it’s important for an interface to be labeled properly. Everyone understands what a “home” button should do in a nav bar, but not every menu label is always this obvious. For example, let’s say you have a multi-user game on your website that allows people to compete against each other, move up and down leaderboards, chat, form groups, etc. Do you put this game under the “Multimedia” or “Community” category in your nav if those are your only two options? This is when techniques like card sorting can help you figure out the best navigational structure.

A feedback mechanism is also crucial for effective interface design: the user needs to feel that their actions have meaning. We are all familiar with filling out and submitting an online form, for example, but have you ever clicked the submit button and just had the page refresh and be presented with the empty form again? Then you are forced to ask if your information went through, was there an error, should I fill out the form again to make sure? Don’t leave any doubt in your user’s mind — give them feedback for their actions. Thank you for your inquiry, someone will get back to you just as soon as we get back from our Starbucks run.

Principle #5: Be Problem Free

The quickest way to inhibit enjoyment is to create frustration over simple interface and navigation issues. If you’re like me, testing is never the most fun part of the process, but it is vitally important. It’s a competitive marketplace out there, and if your system’s interface has noticeable bugs you risk losing your users, perhaps forever, no matter how good your content is. Interface problems can be more than just software bugs, however, as a poorly designed interface is still a major issue. A good way to test your interface is by watching people use your system in a real-world scenario. Are they able to navigate around and achieve their objectives with relative easy? Is your interface intuitive to both experienced and less experienced computer users?

I will forgive a website for having small interface problems that may make me shake my head a little, but time is a limited resource, and if too many problems are interfering with the tasks I am trying to accomplish, sorry, but I’m moving on.

Focus on Typography: Space

There are a number of ways to add breathing space to your type. White space or negative space helps to focus attention on the words, while line spacing and letter spacing can help to make your text more readable. Let’s take a look at each of these.

White Space

White space is the space between graphics, text elements and between columns on a page. It’s one of the most important principles in layout and design. It’s essential not to think of the space around your type (or graphics) as just blank space. The space is actually a design element all of its own and is used to create a classic or elegant appearance, and as I mentioned previously, this is a decision that you as a designer needs to make. Don’t just let your page fall together.

A web page with very little white space can appear too busy and may be difficult to read and focus on. However some simple ways to increase the amount of white space around your type, are to use

• bulleted items
• headlines and sub headlines
• padding around images
• margins

Line Spacing (Leading)

By changing the amount of space between lines, you increase the readability of a passage of text. If the line spacing is too tight, it becomes difficult to separate the words and is tiring on the eye. In the example below, you can see a paragraph of 12 pt text. As the line spacing in increased, the text becomes easier to read, and a nice airy effect is achieved.

As a rule of thumb, you may need to increase line spacing:

• If the typeface you choose has a large x-height, which many san-serif fonts do
• If you are reversing the type out, for example light blue font on a dark navy background.

You may need to decrease line spacing if your typeface has a very small x-height, as this will naturally create more space between the lines (the x-height is the distance between the baseline of a line of type and the tops of the main body of lower case letters).

From the Wikimedia Commons

Letter Spacing (Tracking)

Some typefaces have connecting letters that are designed to sit very close together. You can set the space between letters (known traditionally as tracking) to make your text more readable. If you’re using the “web safe” fonts, Georgia, Verdana, Arial and so on, for your body text, you can usually leave the letter spacing as is. However you might like to change the spacing between letters for headings and sub-headings to achieve that airy feel and also stretch the length of your text without distortion.

There are no hard and fast rules when it comes to letter spacing. You really need to trust your eyes and own judgment. If the letters look too close together, they most likely are.

Kerning

Kerning is sometimes confused with tracking. It refers to the adjustment of spacing of two particular characters to correct visually uneven spacing. This is used mainly in print design.

Let’s take a look at some examples of web sites which make good use of space to create clean, legible designs.

Matt Lawrence’s blog is mainly text based, yet still achieves a sense of airy-ness by using large heading and sub-headings and body text with large line spacing. The background image on the right hand side blends with the page and adds to the sense of spaciousness.

Simpleart leaves plenty of room around the main image on the page and separates three columns of text with gutters. A large margin underneath the three columns gives a nice impression (in this case) of floor space.

Daily Bath & Body is simple, clean and elegant. There’s lots of space around the logo in the header and between the main image and the headline “Indulge daily”. The headline itself uses wide tracking, while the body text is easy to read with good line spacing.

A simple measure is a slightly busier site than the others shown here, but it does a nice job putting a fair amount of information onto one page whilst keeping it legible and attractive. Each section of the page is allowed to breathe, either by using large margins or by using simple graphics such as the pencils in the navigation area.

Finally, just to show that white space does not have to be white, Nine Lioncombines a colourful graphic with large headline type. The small body text is cleanly separated from the graphic using a margin.

Webinar series on Usability/Design on techgig.com.

Get everything you need to know to be the expert in Usability/Design through TechGig Webinars.

 

Usability/UI Series (Session 1): Mobile UI and Usability Guide
This webinar will give an overview of the Cross Platform Mobile User Interface and describes its essential parts. It will cover UI Guidelines, Visual Design Guidelines and Best Practices to design consistent application across different platforms mentioned below. iPhone Android BlackBerry Symbian Windows Mobile Palm Pre This training is for anyone who wants to get an general overview about Cross Platform Mobile UI and its Best Pratices. Friday, February 17, 2012 @ 3:00 PM IST    JOIN WEBINAR		Speaker Shyamala Prayaga User Experience Evangelist

Usability/UI Series (Session 2): Experience Design challenges and what does it mean to be the new breed of designer
We are in a world thats ever changing. There is ever so more no. of devices in the market, increasing expectations from our users in an increasingly convergent world. This complexity is also the opportunity that a smart designer can leverage.  The technology progress has been so rapid that even before you settle into a new order, there will be a something new staring at you. Key Learning areas of this session are: What is the future going to look like What is needed to survive in the future Who is a Designer Some technical skills to be successful as a designer Tuesday, February 21, 2012 @ 3:00 PM IST    JOIN WEBINAR		Speaker Sudhindra Venkateshamurthy Head of Experience Design, SapientNitro India

Create an Rough Woody Text Effect with Wood Splinters Texture in Photoshop

Check out the Below link for this tutorial best ever tutorial i have ever seen

http://www.psdvault.com/text-effects/create-an-rough-woody-text-effect-with-wood-splinters-texture-in-photoshop/

Creating vector characters in Illustrator

Characters can add a recognisable face to your work. But how do you go from a sketch to the finished product? Peskimo talk through their process.

Character design is such a wide and varied subject that the specifics of each character’s process and gestation are unlikely to be the same for everyone.

However, some of the core principals, especially in the early stages of development, are key to creating a well-executed and memorable character. We talk through the essential steps, from before you even pick up a pen and paper to working your design up as a vector image, and show you some of our processes for adding details to the character.

If you are following this project with a particular brief in mind, think carefully about the target audience and what sort of design elements will be suitable for that audience – the usual concerns apply as they do with all design. The character we created is intended to be a mascot of sorts, and aimed at all ages. It is usable at a variety of sizes, and in both print and animation.

Click here to download the support files (3.94MB)

Click here to download the tutorial for free

Current 15 Web Design Trends

1. Responsive Interface Design

The average user’s experience is possibly the most important aspect to consider when designing a website. You want page elements to respond quickly to keyboard/mouse input and behave as expected. Some examples may include side fly-out menus, drop-down boxes, and popup windows.

Including famous JavaScript libraries such as MooTools and jQuery, it has become much easier to animate these features and even more. Most modern-day browsers support this code and even gracefully degrade when the scripts aren’t available. Ultimately you want to make the user feel comfortable when interacting with anywhere in the design.

Similarly you should take form input and data checking into consideration. On many registration pages you’ll receive small responses as you work through each input area. You can automate checking for valid e-mail addresses, duplicate usernames, and even double-check password inputs. This will save time on the user’s end and provides a handy guide throughout the signup process.

2. Touchscreen Mobile Devices

In the past couple of years it has become evident that smartphones are gaining support among even non-tech enthusiasts. But only since 2011 have we seen an explosion of mobile sites and mobile-specific templates.

The popularity of iPhone and iPad devices along with Android-powered phones means you will have visitors fully interacting with your pages through touch commands. This has to become a realistic consideration with every design mockup. Trends in mobile web design have shown that building an entirely separate mobile theme often provides the best results. In this way you can keep all the dynamic content in place on your main layout while serving up a slimmed version of the site to mobile users.

3. Tons Of Freebies!

Who can say they honestly don’t enjoy free downloads? Web designers have been sharing their content online for years, but only recently has this become a very popular trend among digital artists. There have been a few communities built specifically around offering free downloads for web and graphic designers.

Two of my personal favorites are Download PSD and Designmoo, both of which get updated frequently by top-quality members. Additionally the Hongkiat Freebies archive has plenty of sweet goodies to check out. In any era before it has literally never been this easy to download free web interfaces, layouts, logos, banners, and practically any other type of PSD/AI file!

Some Neat Downloads

Below are just a few cool freebies to check out from earlier in 2011. And if you think this list has some great files, just wait until 2012 rolls around!

Mini Web UI Set

Dark Mini Music Player

Sliding Tags

Dark Photo Slider

Search Boxes

Login in/Signin Form

Login Modal Box

Clean Login Form

Pricing Tables

Minimal Loading Bars

Attachment Pop-up

4. HTML5 & CSS3 Standards

Both of these new design archetypes have accumulated an ever-growing following throughout 2011. Semantic web designers have been waiting years to churn out CSS-only designs rendering rounded corners and drop shadows. Additionally the W3C has made a lot of headway in garnering support from the most popular browsers.

I can only see good things for the future of HTML5/CSS3 web development. Front-end designers are often overlooked in today’s field, yet they serve such a great importance to the entire composition process. Try not to squeeze yourself into any set ‘label’ based on the techniques you know and practice daily. We offer a beginner’s how-to guide for HTML5/CSS3 coding if you feel the need to catch up.

Sticking with these new standards will also make developing in JavaScript and jQuery just that much easier. Developers have already been publishing and sharing their HTML5/CSS3 project code online, and if things continue we’ll surely notice a whole lot more of this going into next year.

5. Ribbons And Banners

Although this design technique isn’t exactly “new” it never truly broke through mainstream until just recently. You have probably seen examples of corner ribbons, banner navigation bars, and small ribbon badges. These trends have likely exploded because of the massive accumulation of detailed tutorials which can be found all through Google.

Web designers are more competent these days in launching their own blogs to share information. Now simple techniques can easily be passed around between designers to duplicate the most popular effects. There are even free PSDs you can download to save yourself the effort.

6. Premium WordPress Themes

The final release of WordPress 3.0 included a host of long-awaited features such as custom post types and unique article images. Yet the most profound changes I have seen are coming from WordPress development shops which specialize in premium WP themes.

After you purchase such a theme the installation process is similar to any other. Yet it’s now possible to include custom plug-in functionality, child themes, new admin menus, and a whole bunch of other features right from within the theme! WooThemes, ElegantThemes and Rocket Themes are few brands which stand out to me above all the rest. Their quality is impeccable and I feel their developers go above-and-beyond to create the best templates and most intuitive admin menus.

Going into 2012 I can only imagine WordPress will become even easier to use. This means more high-quality themes to be released, and more amazing blogs to be launched.

7. Online Magazines

Speaking about WordPress themes we should also bring up the quickly-adopted success of online magazines. These websites are not so different from any generic WordPress blog aside from the general structure and page layout. You can spot these larger mags by the sheer presentation of their home page, and collection of authors writing for the site.

As magazines begin moving online they will become a source of income for many writers. Granted a topic such as ‘web design’ targets a smaller niche than, say, gaming or economics. But the fact that we’re seeing moredesign magazines online than print goes to show where the world may be heading in the years to come.

8. Easy Drop Shadows

As a facet of CSS3 it’s now easier than ever for designers to implement a drop shadow anywhere on the page. Box text and box-style elements have been given respective properties to render clear-cut shadow effects.

The text-shadow syntax is very easy to memorize and follows along as box-shadow. With images now unnecessary in rendering these effects, web developers can focus on expanding these basic ideas further. I personally love Matt Hamm’s page curls which were developed entirely with CSS3. You can find all the code on his website to duplicate the effect and implement a similar style onto your own pages.

9. Dynamic Typography

Fonts are a big part of the sphere encompassing web design tradition. The most notable fonts including Arial, Helvetica, Georgia, and Trebuchet MS have been around for years now. Although they continue to serve a deep purpose in web standards, there are plenty of alternate options for advanced webpage typography.

Typekit for example only requires a couple lines of code to be included in your document head. After this you can specify which font names to include and append them into your CSS. The best part about this technique is that it relies mostly on JavaScript, so the end user isn’t required to have the fonts installed.

Another alternative is Google Web Fonts which behaves in a similar manner to Typekit. I recommend interested designers to check out CSS3′s @font-face media query, as you are given much more creativity. This code can be used to import a .ttf or .otf font file from your web server and include it as a usable stylesheet font! With so many alternate systems used for building dynamic fonts I’m expecting 2012 to hold a surge of innovation and design talent in this area.

10. Image Gallery Slideshows

With the subsequent popularity of jQuery I have spotted more and more image slideshows being dropped into web layouts. Galleries are perfect for demonstrating a quick glimpse of inner-page content. This could be a set of portfolio entries, photographs, blog posts with featured images, demo screenshots, etc.

When you consider the many unique sliding and fading animations it has never been easier to construct a quick slideshow for your home page. I’m confident that 2012 will see an uptick in these trends, and not just between designers. Online web applications and software companies have been using slideshows as guided tutorials to display screenshots and unique features.

11. Modal Popup Boxes

I feel that modal boxes are still fairly new to the Internet considering they’ve been appearing in desktop software and mobile apps for years. The purpose of a modal window is to offer box content(such as user registration or login) on top of the current page without loading onto a new one.

Many of the open-source image gallery scripts use a type of lightbox effect where the background fades darker than the popup box. I really enjoy this feature whenever I see it, although it has yet to be adopted by many. And although modal boxes are sexy and sleek, they can also be very difficult to code and get working properly.

To get ideas for your own websites check out some of the more popular social news sharing communities.Reddit and Digg are the first two which come to mind as they both feature register/login modal boxes with a typical layout. Additionally the UI effects for Google+ boast a considerable amount of modal functionality.

12. Inspirational Lists

Collections of list items have appeared since the very early days of web design. As we moved into the new century designers began using HTML ordered and unordered lists to house navigation menus. But nowadays lists can and are being used for much more.

In most of the blog themes I find the entire sidebar is loaded with lists! Not to mention designers who have crafted awesome CSS styles for lists in their article entries. We covered inspiring list styles in another post earlier this year which may give you some more insight to the matter. Looking forward into 2012 I’m expecting some really creative examples, possibly on par with Flowapp’s custom layout for tasks & to-dos.

13. Generated Image Thumbnails

In the web universe we can agree that content is king. But most designers will also agree that a page of blank text becomes boring real quickly. Images can add that extra spice if you know how to sprinkle them in gently. One such method is using dynamic thumbnails to provide previews for each page or article.

Blogs today are continuing to adopt the featured image trend, so why not apply generated thumbnails into your theme as well? These often draw my attention towards the article headline and help to break up a page full of text links.

As another example Dribbble provides a whole gallery listing of thumbnails for each design shot. In such a table row-style layout it’s super easy to catch a glimpse of each thumbnail and scroll through to find what you’re looking for. This tactic has proven to grab the attention of the whole design community! Er, at least the members of Dribbble at best. I can only expect that 2012 will see further exertion of these ideas building upon such examples from the past.

14. Oversized Icons

This unique trend semi-originates from the popularity of Mac OS X icon designs. As programmers began to launch websites for their Mac applications we all too frequently have seen the enormous sizes represented in branding. Accordingly this trend has also been picked up through iOS developers and now comfortably rests within modern design culture.

It’s difficult to predict how these trends will fair as we move into 2012. On the one hand these icons can be clunky and take up more space than necessary. Yet we’re not even close to hitting a shortage of iOS/OSX apps and designers are still churning out pixel-perfect icon specs. Not to mention that web designers are now including oversized icons within just about any page branding! It’s a good way to nab your visitor’s direct attention and build a name for your company.

15. Exaggerated Hyperlinks

Anchor links are certainly within the top five most important elements of any website. These have obviously come a long way since the 1990s and popular design trends have only been growing exponentially. It appears we are moving into an era where exaggerated design takes precedence.

Check out a few of the link examples from Patterntap to see if any jump out and catch your eye. There are so many incredible ideas for hyperlink design, both in standard and hover effects. CSS3 rounded corners, text shadows, and custom font families add even more great ideas into the mix! One of my favorite examples is from SimpleBits which uses a short dynamic animation on each of their blog entry permalinks.

User Interface Design Principles

 Tips and Techniques

The following tips and techniques that I have learned over the years should prove valuable:

1. Consistency, consistency, consistency. I believe the most important thing you can possibly do is ensure your user interface works consistently. If you can double-click on items in one list and have something happen, then you should be able to double-click on items in any other list and have the same sort of thing happen. Put your buttons in consistent places on all your windows, use the same wording in labels and messages, and use a consistent color scheme throughout. Consistency in your user interface enables your users to build an accurate mental model of the way it works, and accurate mental models lead to lower training and support costs.
2. Set standards and stick to them. The only way you can ensure consistency within your application is to set user interface design standards, and then stick to them.  You should follow Agile Modeling (AM)’s Apply Modeling Standards practice in all aspects of software development, including user interface design.
3. Be prepared to hold the line. When you are developing the user interface for your system you will discover that your stakeholders often have some unusual ideas as to how the user interface should be developed.  You should definitely listen to these ideas but you also need to make your stakeholders aware of your corporate UI standards and the need to conform to them.
4. Explain the rules. Your users need to know how to work with the application you built for them. When an application works consistently, it means you only have to explain the rules once. This is a lot easier than explaining in detail exactly how to use each feature in an application step-by-step.
5. Navigation between major user interface items is important. If it is difficult to get from one screen to another, then your users will quickly become frustrated and give up. When the flow between screens matches the flow of the work the user is trying to accomplish, then your application will make sense to your users. Because different users work in different ways, your system needs to be flexible enough to support their various approaches. User interface-flow diagrams should optionally be developed to further your understanding of the flow of your user interface.
6. Navigation within a screen is important. In Western societies, people read left to right and top to bottom. Because people are used to this, should you design screens that are also organized left to right and top to bottom when designing a user interface for people from this culture? You want to organize navigation between widgets on your screen in a manner users will find familiar to them.
7. Word your messages and labels effectively. The text you display on your screens is a primary source of information for your users. If your text is worded poorly, then your interface will be perceived poorly by your users. Using full words and sentences, as opposed to abbreviations and codes, makes your text easier to understand.  Your messages should be worded positively, imply that the user is in control, and provide insight into how to use the application properly. For example, which message do you find more appealing “You have input the wrong information” or “An account number should be eight digits in length.” Furthermore, your messages should be worded consistently and displayed in a consistent place on the screen. Although the messages “The person’s first name must be input” and “An account number should be input” are separately worded well, together they are inconsistent. In light of the first message, a better wording of the second message would be “The account number must be input” to make the two messages consistent.
8. Understand the UI widgets. You should use the right widget for the right task, helping to increase the consistency in your application and probably making it easier to build the application in the first place. The only way you can learn how to use widgets properly is to read and understand the user-interface standards and guidelines your organization has adopted.
9. Look at other applications with a grain of salt. Unless you know another application has been verified to follow the user interface-standards and guidelines of your organization, don’t assume the application is doing things right. Although looking at the work of others to get ideas is always a good idea, until you know how to distinguish between good user interface design and bad user interface design, you must be careful. Too many developers make the mistake of imitating the user interface of poorly designed software.
10. Use color appropriately. Color should be used sparingly in your applications and, if you do use it, you must also use a secondary indicator. The problem is that some of your users may be color blind and if you are using color to highlight something on a screen, then you need to do something else to make it stand out if you want these people to notice it. You also want to use colors in your application consistently, so you have a common look and feel throughout your application.
11. Follow the contrast rule. If you are going to use color in your application, you need to ensure that your screens are still readable. The best way to do this is to follow the contrast rule: Use dark text on light backgrounds and light text on dark backgrounds. Reading blue text on a white background is easy, but reading blue text on a red background is difficult. The problem is not enough contrast exists between blue and red to make it easy to read, whereas there is a lot of contrast between blue and white.
12. Align fields effectively. When a screen has more than one editing field, you want to organize the fields in a way that is both visually appealing and efficient. I have always found the best way to do so is to left-justify edit fields: in other words, make the left-hand side of each edit field line up in a straight line, one over the other. The corresponding labels should be right-justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen.
13. Expect your users to make mistakes. How many times have you accidentally deleted some text in one of your files or deleted the file itself? Were you able to recover from these mistakes or were you forced to redo hours, or even days, of work? The reality is that to err is human, so you should design your user interface to recover from mistakes made by your users.
14. Justify data appropriately. For columns of data, common practice is to right-justify integers, decimal align floating-point numbers, and to left-justify strings.
15. Your design should be intuitable. In other words, if your users don’t know how to use your software, they should be able to determine how to use it by making educated guesses. Even when the guesses are wrong, your system should provide reasonable results from which your users can readily understand and ideally learn.
16. Don’t create busy user interfaces. Crowded screens are difficult to understand and, hence, are difficult to use. Experimental results show that the overall density of the screen should not exceed 40 percent, whereas local density within groupings should not exceed 62 percent.
17. Group things effectively. Items that are logically connected should be grouped together on the screen to communicate they are connected, whereas items that have nothing to do with each other should be separated. You can use white space between collections of items to group them and/or you can put boxes around them to accomplish the same thing.
18. Take an evolutionary approach.  Techniques such as user interface prototyping and Agile Model Driven Development (AMDD) are critical to your success as a developer.