background preloader

Gestalt Principles Applied in Design

Gestalt Principles Applied in Design
By Michael Tuck Web designers, like other artists and craftsmen, impose structure on the environment. We enforce order and beauty on the formless void that is our blank computer screen. We do it in different ways — creating an organized layout first, writing text and content first, or even basing a design concept on an image, a color palette, or something that visually trips your trigger, whether it’s a sunset or a Song Dynasty painting. Wherever you gain your inspiration, it’s often not just the particular element that sparks your artistic impulse; it’s the totality of the element and its surroundings. Grasping that totality concept — both the individual element and the whole in which it exists are important both separately and together — is essential to understanding how gestaltism influences our design choices. We’ll cover 6 principles related to gestalt, in the context of design, and they are: ProximitySimilarityPrägnanz (Figure-Ground)Symmetry"Common Fate"Closure Source: Dr. Mr. Symmetry Related:  design

5 Reasons Why Metaphors Can Improve the User Experience There are many ways to experience the world around us. Especially offline, we can make use of our different senses to collect information, interpret our environment and make judgments. On the Web, however, our senses are more limited. As designers, we need to present information carefully to make sure our users think, feel and do the right thing. A great way to help your users understand abstract content, create a sense of familiarity, trigger emotions, draw attention and motivate action are metaphors. "The way we think, what we experience, and what we do every day is very much a matter of metaphor." - Lakoff and Johnson In their frequently cited book, Metaphors We Live By, Lakoff and Johnson demonstrate the important role of metaphors in our language and in our everyday lives. Let’s look at how you can use metaphors to add to the user experience on your website. 1. Metaphors are a great tool to help your users understand abstract or unfamiliar content. Source Source Source 2. Source Source 3.

Web Design Podcasts Which Will Improve Your Life Last year we published a post on 7 Great Podcasts for Web Designers which went down well with our readers. Since then, several of the podcasts have dropped off the radar including arguably the most famous one of all time: BoagWorld. At the same time a whole load of new web design related podcasts have sprung up, so today we’re going to take a look at the best way to get your web design news fix in audio format. All of the podcasts covered here are linked directly through to iTunes so that you can instantly subscribe and download them straight from the source. Enjoy, and don’t forget to tell us what you think in the comments! ExplicitWeb Arguably the best new web design podcast out there (though I may be biased), ExplicitWeb is presented by three people on the front lines of the web design industry: @johnonolan, @erisds and @robhawkes. The format of the show is conversational, light hearted and to the point. Think Vitamin The Big Web Show It’s everything web that matters. SitePoint Web Design TV

Reductionism in Web Design In the field of design, the phrase "complexity is the enemy" speaks to how keeping things simple makes our work more functional. With the modern crop of technologies that dole out increasing amounts of functionality, it’s important that we take the time to ensure a balanced level between oversimplification to the level that insults our visitor’s sense of competency and extreme complexity which endangers their experience. In this article, I want to talk about the idea of reductionism — a process that improves the efficacy of our designs as well as the time we spend making and maintaining them. Going "back to basics" and challenging the way we design, write code and produce content will de-clutter our interfaces, improve the readability of our web copy, speed up deployment, make things easier to use, and reduce our maintenance requirements. Reductionism in Web Design It’s important to define what reductionism is in the context of web design. Benefits for the User Experience Code Reductionism

Free Texture Download and Resources Link Textures is always a good stuff for a designer to spice out their work or masterpieces. So today, in this article I’d like to present a list of great high resolution free paper and other textures.I've been surfing the net yesterday and made some list for you.Some of them are from my bookmark. I also have pick some of the textures from deviant art. Download and use it for your next masterpiece! Use an adjustable monitor desk mount for better projection of graphic designs on your computer You can checkout more free quality textures at QTextures.net Note:Every stock texture has license.Read them first before using it.. Paper Grungy paper texture v.5 by Bashcorpo Free High Resolution Plain and Grunge Paper Textures by Fudgegraphic Free High Res Grungy Paper Textures by Bittbox Free High-Res Texture Pack: The Anatomy of a *Really* Old Book at Bittbox 5 Fantastically Free High Res Brown Paper Textures Old Paper 1 by mourningstocks Texture: Notebook Paper Old paper texture by Bleeding dragon Grunge

What’s New for Web Designers – Oct. 2010 New apps and websites seem to be appearing on an almost daily basis, but trying to find the good ones among them can be tough, especially considering how many are not that great. That’s why every month we research and showcase some of the best and latest resources available for web designers. We cover apps, web services, software, fonts and anything else that may be of interest to web designers and developers. If you’d like to include your new product or service in our next roundup, please tweet it to @cameron_chapman and it may be included in next month’s roundup. Please feel free to share your views on the products and services that we’re featuring this month, in the comments area below… The Square Grid The Square Grid is a new grid system based on 35 equal-sized columns, with a 28px baseline-grid and margins of 1px. Maki Maki is a bookmarklet that lets you overlay a design mockup over an actual website. IntuitionHQ Disquorse Design Kindle Flickr Photo Map Sikbox TweeShot Fonts.com Web Fonts Bontq

Minimalist Web Design: How Minimal is Too Minimal? Minimalism, interestingly enough, is usually born out of excess. In all arts, in all ways of life, we start out by taking and adding whatever we can. When we start to realize that more is not necessarily better, and that we can get by with less stuff, we try to simplify by removing unnecessary elements so we can focus on what’s truly important. What is Minimalism? Minimalism, in its purest form, is the reduction of something to its bare essentials. Think of a car. In web design, minimalism translates to producing a site from the basics. Minimalism is an exercise in restraint, with the eventual goal being a design that helps the user focus and accomplish their tasks as quickly as possible. When designing minimalist websites, you should keep three things in mind: Subject: What’s the most important thing on the web page? Why Use Minimalism? This minimalist thinking is the basis of modern web design — we begin with content, perhaps a brand, but nothing else. Don’t Worry, You Can Still Be Pretty

Thoughts on Developing A Design Concept A good design begins with a good design concept. You’re trying to solve a problem and your concept will lead the way and give you direction for your design decisions. How do you form a concept? What questions do you need to ask in order to develop one? How does your concept become the roadmap for your design? What is a Design Concept? concept (n) – a general idea used to formulate a plan A design concept is the idea behind a design. Your concept will lead to your choices in color and type. Your design concept becomes the framework for all your design decisions. We can think of design concepts in two ways. Verbal – the verbal parts of your concept might be words you use to describe the site. Typically I begin forming a concept verbally (a process I’ll describe below). Generally verbal concepts come before visual concepts as the visual is really about how you’ll communicate the verbal, though it likely depends on the individual and how you think best. What is your client’s brand? Summary

Using Power Structure and Gestalt for Visual Hierarchy A core place to begin a website discovery process is to learn the goals and objectives of your client. It is imperative to understand what the website needs to do and which things are the most important. In order to do that, we need to establish a hierarchy. A hierarchy is essentially an order of items, goals, ideas, and/or needs. Hierarchy in web design is centrally about influencing a user to understand and embrace the principal goals of a website and interact with the material in the ideal order to facilitate a smooth and pleasant experience with the website. Practical Hierarchy If you have ever learned a business theory, played a video game, ordered from a menu, or interacted with businesses, then hierarchies are already a huge part of your general knowledge. The Power Structure A hierarchy does not need to have an actual chart or diagram to explain the position, relationships, importance and relative value of its contents, but it’s certainly a useful exercise. The Power Breakdown

User Experience Design June 21, 2004 I've been practicing information architecture since 1994, and from Gopher to Google have seen dramatic changes in the landscape of organization, search and retrieval. Through these ten tempestuous years, I've found the infamous three circle diagram to be a great tool for explaining how and why we must strike a unique balance on each project between business goals and context, user needs and behavior, and the available mix of content. Figure 1. The Three Circles of Information Architecture While this diagram was conceived with IA in mind, it's equally useful for explaining UX. Facets of the User Experience When I broadened my interest from IA to UX, I found the need for a new diagram to illustrate the facets of user experience - especially to help clients understand why they must move beyond usability - and so with a little help from my friends developed the user experience honeycomb. Figure 2. Here's how I explain each facet or quality of the user experience: Useful. A Big Hive

Related: