User Interface | Webdesigner Depot

13 Jan
Free download: Balio Web UI Kit
Freebies, Icons, User Interface
Tweet View Comments

Today we have a great exclusive freebie from our good friends at Grafpedia.
The Balio UI Kit is an absolutely massive PSD file containing buttons, stickers, icons, pagination, menus, login forms and much much more. It’s a very high quality UI kit that can come in really handy for your designs. It’s free for personal and commercial purposes.
The set was designed by Grafpedia, where they teach you how to advance your design skills and they also constantly publish loads of graphic resources such as icons, vectors, brushes, textures and a whole bunch of other stuff. They already have 70,000 items available! Check out their tutorial on how to use this kit for designing a web layout.
The Kit is available for free to all WDD subscribers, simply enter your email address below to gain instant access and download the files. Being a subscriber of WDD allows you to get early access to freebies like these and much much more (and it costs nothing to subscribe anyways)!
We’ve included a full preview after the jump… Enjoy!
Read more
7 Sep
Fixed position web elements
Inspiration, User Interface, Web Design
Tweet View Comments
The usage of fixed position elements has grown in popularity and become a common element on the web.
This technique involves fixing some element in the browser while the rest of the page scrolls. Most often we find this done on header elements including the main navigation for a site. This is also a popular approach on single page sites where the in page navigation needs to be ever present. We also find various elements of web pages locked in place using such techniques.
There are many situations we can find where fixing an element in the page is a good thing, but it all comes back to a single purpose. In almost all of these situations the fixed element keeps a critical part of the page in front of users at all times.
The importance of these elements varies, but to some degree the fundamental goal is to keep some part of the page perpetually in the view port.
As you consider using this technique I highly recommend you carefully consider why and how you do so. Keep in mind that whatever part of your page doesn’t move will automatically draw lots of attention. So be sure you are putting it to work. Let’s dive in! Read more
29 Jul
50+ PSD UI Web design elements
Photoshop, User Interface
Tweet View Comments

I’m a big believer in not reinventing the wheel when it comes to web design.
If someone has already created something that fits what you need and/or want, and especially if that element is available for free, then why waste your time designing something that turns out virtually identical?
Your time and effort is better spent on creating new and unique parts of your design, while using what’s already available for other parts.
Below are more than 50 free UI element packs from a variety of designers. Buttons, form elements, media players, and similar stock elements are the most popular, though there are other elements included also.
And as a bonus, there are over half a dozen premium element packs at the end. Enjoy! Read more
27 Apr
Common elements used in interface button design
Design, User Interface, Web Design
Tweet View Comments
Buttons and navigational elements are quite possibly the most commonly used interface objects in both desktop and mobile design. They pull an interface together, allowing users to get from A to B in a single click.
Most importantly, a button has to look good. It has to scream “Click me!,” or else it simply won’t be as effective as it needs to be. Buttons are commonly used to “”Search,” “Submit,” “Send,” “Buy” and “Upload.”
In this article, we’ll look at seven common button elements in modern interface design: textures, patterns, 3-D, pixel-perfect strokes, indented backgrounds, glows and highlights.
You’ll find 35 fantastic examples of these techniques as well as a handful of mini-tutorials for Photoshop. Read more
14 Feb
The 80/20 Rule Applied to Web Design
Mobile, User Interface, Web Design
Tweet View Comments
Having recently started reading a little more on design principles, I came across an interesting principle called the 80/20 Rule, also referred to as the Pareto Principle, Juran’s Principle, the Vital Few and Trivial Many Rule, and the Principle of Factor Sparsity.
This principle, which I’ll refer to in this piece simply as the 80/20 rule, when considered in the context of website and web app design can have a profound effect on the user experience, and ultimately on the effectiveness of the content or functionality of your website or web app.
In this post, I’ll first provide a basic definition, then I’ll consider some specific examples of how the 80/20 rule proves beneficial, and then I’ll summarize some lessons that can be gleaned from having knowledge of this rule. Read more
31 Jan
Changes to the Apple.com Design
Apple, User Interface, Web Design
Tweet View Comments
Apple.com has undergone some adjustments to its design in the past week or so, changes that, if you weren’t paying close enough attention, you may not have even noticed.
Although many reports are referring to this as a “redesign”, I think it’s difficult to classify it as such. There certainly are some significant changes, but the changes are not exactly a complete overhaul as was the case for CNN.com in late 2009.
Nonetheless, the changes are significant to web designers, so I’ll briefly look at them here. If there’s anything about the changes that I’ve neglected to mention, feel free to comment. Read more
28 Oct
How to Design a Great User Interface
Applications, Design, User Interface
Tweet View Comments
When designing a web app, functionality is often placed above everything else. For the most part, this is a good thing.
People (mostly) use apps because they’re useful, not because they look pretty. But that doesn’t mean you can ignore good UI design, or just slap together a generic-looking user interface. Good UI design adds to the overall user satisfaction of any web app.
Good UI design is, in many ways, similar to good web design. Principles of color theory, negative space, and layout all still apply. But UI design requires a bit more thought in many cases due to the interactivity it requires.
Visitors won’t just be looking at your site; they’ll be interacting with it, sometimes in ways you didn’t expect. It’s vital that you take the time to really explore UI design prior to embarking on a web app design.
Below are a number of principles and ideas for designing a great user interface. Read more
13 Oct
Usability Resources to Win Arguments
Usability, User Interface, Web Design
Tweet View Comments

Today’s post is a big one and it’s most definitely one for your bookmarks menu, because from time to time when speaking with clients it becomes necessary to have material to backup the statements which you are making.
Sometimes clients will suggest things such as forcing all users to register with a six page long form before they can even access the site. They aren’t web professionals, it’s not their fault for not knowing that this isn’t a good idea from a usability perspective.
If you’re going to convince them that this is a bad idea, however, then you’re going to need some rock solid material to back that up. While an element of trust is always important to a working relationship, you have to respect that sometimes clients will just need to see the facts in front of them to fully understand that what you’re saying is correct.
So, what we’ve done for you today is compiled a list of some of the biggest, most compelling usability articles which address common issues. Hopefully this should help you during tough conversations about what does and doesn’t work on a a website.
Bookmark this post, come back to it, use it in meetings and educate your clients on the things which work for other websites, so that they might also work for them.
Read more
12 Jul
Content Organization: Deciding What Matters Most
Information, User Interface
Tweet View Comments
The content of any website is paramount to a site’s success.
High quality content, regardless of whether the site aims to inform, entertain, or sell a product, will increase the site’s likelihood of converting visitors. But beyond providing high quality content, a site also needs to organize that content in a way that makes it accessible to visitors.
Prioritizing your content is one of the best ways to make sure your visitors are finding the information you want them to find, and that they want to find. But figuring out what content is most important and how to arrange it to reflect that can get confusing, fast.
In many cases, designers and content creators feel like it’s all important, and should all get equal billing. But that’s not doing your visitors any favors. You need to get to the root of what’s most important to them, and then provide that in the most user-friendly way possible. Read more
21 Apr
Exclusive Free GUI Pack from Art.Gen
Freebies, User Interface
Tweet View Comments

The good folks at Art.Gen are providing WDD readers with an awesome and exclusive freebie…
This useful PSD file includes a great selection of GUI elements that you can use for free for both commercial and free app development (with attribution).
All elements are on their own layers which should make customization really quick and easy.
If you’d like to share this PSD with your friends, please refer them to this page so that they can download their copy from here.
Below is a full preview of all elements for quick reference. Enjoy! Read more
4 Mar
Fantastic Content Sliders for your Inspiration
Usability, User Interface, Web Design
Tweet View Comments
Content sliders are extremely versatile forms of navigation that can be used to display all sorts of information, such as images, popular posts, social information and product features.
Some have automatic slideshow capabilities or buttons to scroll sideways or up and down, and most of them feature a transition effect, usually a slide motion.
Sliders can be great focal points on websites and blogs as they instantly draw the audience’s attention and provide for an easy and sleek way for visitors to interact with a lot of information that can be sorted through quickly.
In this post, we have compiled a massive amount of content slider examples that you can use for inspiration on your own websites. Enjoy! Read more
23 Feb
Showcase of Great Web App Interfaces
Compilation, User Interface, Web Design
Tweet View Comments

Web Apps are popping up everywhere. Five years or so ago, we could live without them, but as the internet has evolved we use them more and more in our daily lives.
We have put together a great compilation of beautiful web application interfaces.
The web applications that were selected to be part of this showcase are based on usability, simplicity, colors and overall layout.
Please note that WDD was not compensated in any way to review these apps.
Feel free to comment and add links to other excellent web UI designs in the comments area below. Enjoy! Read more
22 Feb
Happy Cog’s Redesign of VisitPhilly.com:
An Exemplary Modern Website
Review, User Interface, Web Design
Tweet View Comments

In January, Jason Santa Maria sent out a tweet announcing that visitphilly.com had been redesigned by world-renowned design studio Happy Cog. My interest was piqued, and I couldn’t help but take a look.
I can honestly say that I’ve never been more impressed with a website redesign than I was with this one.
That Happy Cog was able to turn such a large website into a beautiful, accessible, functional and inviting user experience testifies to the talent of the team at Happy Cog.
By no means am I in a position to offer a critique that does justice to the planning, design and development that must have gone into this project.
But I thought it would be useful to point out why this redesign epitomizes a beautiful and effective website design for today’s market. Read more
5 Nov
Best Practices for 6 Common User Interface Elements
Usability, User Interface, Web Design
Tweet View Comments

The appearance and usability of certain interface elements and functionality are crucial to the success any websites in today’s market.
Studies have demonstrated that even a split-second delay in thinking on the user’s part will weaken their perception and interest in a website and ultimately lower the website’s conversion rate.
In certain niches and industries, having UI elements that are not obvious in their use may be perfectly acceptable. The blogging and web development industry are perfect examples.
But when we design user interfaces for non-tech-savvy audiences—which is usually the case with client work—we have to ensure that certain UI elements do not stray too far from what users are accustomed to.
This article discusses some best practices and usability traits of six user interface elements and the conventions for each, so that developers can create user experiences that are both beautiful and simple. Read more
2 Nov
CNN’s New Website Design Deconstructed
Usability, User Interface, Web Design
Tweet View Comments

On Monday, October 26, CNN.com introduced a new website design, making a number of major changes to their information-heavy layout.
The new design is beautiful, clean, organized and well-structured. It invites the eye to scan and find something interesting with the goal of clicking through to another page.
The previous design was somewhat cluttered and not very inviting; the content looked liked it was being forced into an unstructured space. The new layout is very different and embraces a number of modern web design and usability best practices and trends.
So, let’s look in more detail at not only the notable improvements, but some of the questionable design and usability decisions.
Read more
14 Oct
An Analysis of the Amazon Shopping Experience
Review, Usability, User Interface
Tweet View Comments

Designers of e-commerce websites today face a number of challenges in attempting to build a user experience that increases the likelihood of visitors making online purchases.
To battle fierce online competition and overcome the apprehension of skeptical shoppers, designers can take a number of steps to improve the usability of their online stores.
Since 1995, Amazon has established itself as the world’s leader in e-commerce. Its success is not a fluke, nor is it merely the result of being in the right place at the right time.
Amazon’s success is the direct result of a strong user shopping experience.
In this article, we will discuss a number of features of the Amazon shopping experience that will, either in principle or practically, offer a model worthy of imitation by e-commerce developers today. Read more
25 Jun
10 Tools to Improve Your Site’s Usability on a Low Budget
Usability, User Interface
Tweet View Comments

Testing the usability of your site is one of the smartest things you can do. Usability involves making a website’s interface easier to use and simpler to understand, so that the user’s experience is as enjoyable as possible.
The more usable a site is, the more satisfying it will be to interact with it — and happy visitors translate into happy customers.
Ideas about what makes for the best website design don’t always translate perfectly when put into practice. Elements that one person might consider easy to use may actually turn out to be confusing for someone else.
In this article, we’ll review 10 tools that you can use to improve your website’s usability even if you’re on a low budget.
Read more
4 Jun
10 Tips to Create a More Usable Web
Accessibility, Usability, User Interface
Tweet View Comments

Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience.
Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said:
“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.”
In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project.
Read more
6 Apr
10 Tips to Design Usable Shopping Carts
Design, Usability, User Interface
Tweet View Comments

The everyday tasks in our lives are being revolutionized by technology. One task that technology is helping to simplify is shopping: the task of buying products in stores is just not as convenient as online shopping.
With that in mind, it is becoming more and more important to pay attention to the usability of e-commerce websites.
When customers want to buy a product, they want the process to be quick and easy, without any hassles.
Here are 10 tips to help you create usable e-commerce checkouts and shopping carts. Read more
11 Mar
Operating System Interface Design Between 1981-2009
Design, Operating Systems, User Interface
Tweet View Comments
A Graphical User Interface (GUI for short) allows users to interact with the computer hardware in a user friendly way.
Over the years a range of GUI’s have been developed for different operating systems such as OS/2, Macintosh, Windowsamiga, Linux, Symbian OS, and more.
We’ll be taking a look at the evolution of the interface designs of the major operating systems since the 80′s.
I should mention that this article showcases only the significant advances in GUI design (not operating system advances) and also not all of the graphical user interfaces and operating systems existing today. Read more