If you strive to be a great designer (like most), then you’re more than likely to know that a web application or websites success many times rely solely on how well designed the User Interface may be. As you scale the web and even read books, there can be an influx of misleading information pertaining to the way you should design your UI.
When in reality you should do what works best for you and your users. Below you will find a variety of excellent User Interface resources that will allow you to access, redefine, and create a well designed User Interface. You should use these resources first as inspiration, and second as somewhat of a guide as to what your users may need when they come face to face with your UI.
Interface Design Libraries
MephoBox houses various interface patterns and designs that showcase the different trends within them. Their goal is mainly to inspire designers and hopefully allow them to conceive a greater design then they had first planned out to make. You’re even able to vote on designs and leave insightful comments. You can also search and sort results in an organized fashion allowing you to easily and quickly find just what you need.
This beautiful and large collection of user interface patterns allows designers to absorb great inspiration. If you have a design to showcase, then you can publicly store these UI inspirations allowing others to become inspired by what you’ve submitted as well. It’s more of a user interface collaboration between the design community.
The Yahoo! Design Pattern Library, was formed and currently managed by the Yahoo! Developer Network (YDN). Individuals from around the world are all able to share design patterns to the web design and web development community. Through their newly launched forum, you can also conversate on several interesting UI subjects with fellow designers and also talk about designs in the pattern library.
PatternTap is one of the most notorious UI pattern design libraries created and developed byMatthew Smith and Chris Pollock. Pattern Tap can mostly be described as a large gallery containing amazing web-baed User Interface designs. Pattern Tap also allows its users to upload their own patterns into their library, adding to the now over 7,000 UI patterns. This is a good resource and definitely a great place for inspiration.
Here we have the UI Pattern Factory which like the rest listed above is a UI design library/gallery. Not only are users able to upload patterns they’ve found, but their able to add and instantly share video entries that can help you gain a much better grasp of what the pattern is all about. This is a good source for inspiration, not only will you get a visual graphic as an example, but you can also get a video outlining the details of why this user interface pattern was chosen.
Interface Design Blogs
UX Magazine has set out to deliver valuable information and guidelines that will help the designer create a much better user experience. They also claim to cover the best new resources and articles on UI design. As an online magazine, they also give way to the interaction between fellow designers by letting everyone discuss quality tips, share experiences and new ideas.
UX Booth is beautifully well maintained community connected through a blog solely positioned on the web to sharing valuable knowledge and resources with the User Experience Community. Its online presence delivers informative articles and resources on usability frequently. It also speaks heavily on other subjects that go hand-in-hand with UI such as Interaction Design.
Designing Interfaces is popular book that’s formatted as a site. It is written by Jennifer Tidwell and as soon as you begin to read, you’ll find massive amounts of design patterns for your inspiration and well written articles to feed your knowledge base. A variety of content on organizing site content, soliciting actions and commands from users, and presenting complex data will be available at your fingertips. Bottom line is, Jennifer’s book is definitely a great resource for any designer wanting to learn more on this subject.
UXmatters is a very informative web magazine created to bring valuable information on user experience. You will also find several design patterns within the publications that will help you understand what’s required of a usable and accessible user interface. There are also various techniques that will give you insight and help you develop much better skills.
InspireUX is definitely more than just a great source for User Interface Design, it also has numerous inspirational and worth-while quotations from countless leaders in the technological community. The User Experience quotes are from top-bosses in the industry, you can find quotes from Steve Jobs, Bill Gates, and more. Every quote has something to do with User Interface design and has insight.
The Usability Post is a blog focused on the uses and advantages of usability within interface design. They touch base on subjects that give light to how a design looks and operates. This blog is a well maintained and established entity that offers informative feedback and allows you to engage in discussions that can produce further resources or inspirations for you.
Boxes and Arrows, an active online publication geared towards the how designs interact. Here you will find a good amount of information that speaks on effective user interface designs how to design one as well. Boxes and arrows is maintained by a professional and academe-centric community that pumps out articles that are informative and well researched. So it’s facts with proof, not just theories here.
Signal vs. Noise is 37signal’s blog. Their rapid and valued experience in developing applications with amazing user interfaces (such as BaseCamp and BackPack) leaves them as one of the most sought out resource for building applications from scratch (mainly their interfaces). Read their blog for some of the most interesting experiences with user interface design and more.
Konigi provides the design community with treasured tips, tools and useful techniques that will help you become a much better User Experience designer. They frequently monitor leading designers, sites, and applications that are subject to produce quality user experiences and then they publicize these findings for the entire design community to read.
Usable Web is a vast collection of useful links pertaining to User Interface design topics, tools, and research. The site is mostly outdated, however, the links and resources you find still hold value. Some of these links will lead you to priceless pieces of work that will impact the way you design user interfaces forever.
Interface Design Inspiration
The ate bits site is simple, yet sophisticated in its design. The large icons make it easy to choose which product you’re intersted in, and when you click on the icon it unfolds into a single page where you’re able to view the features, screenshots, and reviews. Meanwhile at the top of the page, the other icons for all 2 remaining apps are visible, just in case you want to smoothly switch back and forth between the 3.
Not only is the typography here amazing, but the way the top navigation menu uses the hover effect to grab your attention, and the use of a scrollbar with a beautiful link on the bottom right is amazing as well! The entire interface is easy to interact with and scaling around through the site, you can’t get lost.
IconDock is a very flexible website in terms of functionality and usability. It’s user interface is vibrant and features a drag and drop function that makes purchasing icons much easier and quicker.
The Versions website utilizes dark colors, however, using the website you’re able to see that the dark color has no effect on usability. This site is based on a single-page layout and defines all of its elements in an clean and organized fashion for better navigation.
Pure Volume has a beautiful web site design with an even better user interface. Here we see 2 seperate menus that are very easy to navigate, every section is organized and cleanly seperated, and it has a nice blue outline effect when you hover over an image in anyone of the 3 middle sections.
Typetees is a one-page incredible usability force. What makes this site so appealing is the hover effect on every teeshirt, it pops out and becomes full, and the pink “Join” button at the top right-hand corner also “rolls out” once you hover over it.
The Silicon Prairie News weblog features nicely organized and nested elements spaced “just right” from one another. When you visit the site you don’t feel overwhelemed, there is a sense of clarity, and the navigation at the top of the page is in caps and highlights in different colors so you can’t get lost. This is all compliments of a well thought-out interface design.
This is one of the easiest to navigate through application websites I’ve come across. Descriptions, features, details, and images are all nested well within the websites design. This is a good example of a simple, informative, and functional website that hosts applications.
Adarsh Pallian has a well designed website that’s not only eye-catching, but allows the user to interact freely. The top nav bar consists of three links for ease of use. Elements are well spaced and beautifully aligned.
Web Applications and Their Interfaces
Here we have SuberNova, it’s a project management tool that has an easy to use web interface. Once you begin to add projects and users the information begins to flow freely. A small box pops-up when you decide to create or edit an invoice. You can easily save the edited invoice, cancel, or delete it with the click of a button (located at the very bottom). You can also quickly add, manage, and contact clients with simplicity. SuberNova’s interface is dark, however the designers made it easy for your to view the contrast between the information and elements of design.
Copper posses one of the most easiest to utilize interfaces for a detailed online application. It contains a variety of features that are easily accessible. The navigation is well organized and displays sub-menus within a roll-over box that contains a description. When you click on a project it takes you to a more detailed page where further information can be found. Everything within the applications interface is well spaced, organized, and never out of reach.
TypeTester has a pretty straightforward interface. The main purpose of this app is to allow the user to enter a sample text then choose 3 different types that can easily be modified by size, alignment, color and more. Then the text is instantly outputted in 3 different formats: regular, bold, and italic.You can then click on a small box at the top right-hand corner that will pop-up and give you the CSS for the corresponding box you chose. The process is simple, and using elements such as text areas, scroll down boxes, and pop-up boxes is fairly easy as well.
This web application has a variety of functions that are possible thanks to JavaScript. We begin by selecting our body font size within the first column, once you do this you’ll see that the application will automatically have chosen a conversion of your font within the second column. Then you can either move to the third column and customize your conversions or grab the necessary CSS code by clicking on the middle tab within the top navigation bar. PXtoEM uses smooth shades of grey to create a contrast between the rows. This helps you not to get lost. When you choose the font size you’re looking for, then that specific row is highlighted in dark red. All of these features make it much easier for you to use the application while minimizing the chance of errors.
LetsFreckle is one of those beautiful web applications that come great features and eye-popping usability. As soon as you login the first thing you see is the navigation bar at the right-hand side. This makes it a thousand times easier to remember where you’re at while you’re navigating through the pages. Viewing report are is a sift, and changing between dates/times is even easier. Overall, LetsFreckle has an amazing interface that follows through with amazing usability.
Twitter’s an application that will continue to be complimented on the super well job they’ve managed to do when it comes to usability. This is one of the easiest to use web based applications that exist. It all starts from the time you reach the homepage, you hover over the sign-in button at the top, the sign-in box rolls out, and you login, till the time you scroll through your timeline and retweet appealing notifications. Everything is easy to work with, and you don’t even have to refresh your page (thanks to AJAX) to know that you’ve received new tweets.
Adobe’s Kuler is a rich color combination tool. It’s easy to experience new combinations due to the way the combinations on the left side-column load up instantly at the top. If you click on the featured combination it will “unfold” and let you see the colors at greater lengths. Although the applications website is a bit crowded at first, the most important elements (color combinations) are very well organized.
CrazyEgg is an amazing web application that makes it easier for everyone to track usability on a website. Being a usability app, I’m sure they needed to make their application extremely efficient and easy to use. Wouldn’t make sense to talk the talk about usability but not practice it at all. The most enticing thing about CrazyEgg’s usability would be how easy the interface allows you to interact with various aspects of your account. For example, when you’re reviewing how many clicks were made by a visitors mouse to your website, all you have to do is click on the plus or negative button and a small box will appear with the proper details. I was also amazed at how easy it was to navigate through your entire account.
Landing a spot on this list, non-the-less is the powerful web application known as Google Analytics. The interface flows freely and it is extremely straightforward. Every element of design is nicely organized and technologies such as Flash behave well. With just a glance you can get a quick and informative look on the analytics of your website, if you wish for a more detailed overview, that’s readily available as well. Hard to get lost within the control panel of this application, pages aren’t overcrowded, easy to navigate through, simple ways to control the look and feel of elements, and beautifully contrasting colors that help guide you through every section. This is what great usability looks like.
