UI Kits PSD - Free High Quality PSD A picture is worth a thousand words. Most of the time, I found that a complex idea can be comprehend far more effectively with drawing/images. Infographic is a good example. Infographic is a graphic representation of data, information and or knowledge and it’s a great method to represent your finding of data and show them to your target audience. There are thousands of infographic out there, if you have a set of data but lack of design and images to help you, this post is written just for you. If you’re seeking some advice on how to create your own infographic, you can read this: How to design your own infographic Infographic UI Kit Infographic Vector Kit from MightdealsDaily deals for creative professionals. Other Resouces Beside of vector UI kits, we also collected a few worth mentioned PSD files that would inspire you to create some infogrophic UI elements on your own as well. Icons Maps Map is one of the common visual you would see in most infographic. Markers Graph/Chart About Kevin
25 Clear And Beautiful Comparison Tables There’s no point in having an awesome website and an awesome product if your product comparison table is crap. It will throw people right off, and believe me I have seen some bad tables. Anyway here is a collection of the best product comparison tables handpicked by WebDesignDev. We think we have picked the top 25 comparison tables based on creative design and how clear it is to read and compare. By all means if you think we have forgotten any tables that look stunning, drop us a nice comment. SoftLayer This is a simple comparison table with a very basic design. BigCartel Big Cartel’s pricing table has a very beautiful design. SquareSpace SquareSpace’s table is unique and has some nice, large icons for each column. FormSpring FormSpring has a simple, modern design. the Professional column is marked as being the most popular choice. Wufoo Wufoo’s bright colored pricing table is fun and friendly! Concept Share ConceptShare has a professional pricing table with a basic design. Mind Meister Eleven2
Responsive Navigation Patterns Update: I’ve also written about complex navigation patterns for responsive design. Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Here’s some of the more popular techniques for handling navigation in responsive designs: There are of course advantages and disadvantages of each method and definitely some things to look out for when choosing what method’s right for your project. Top Nav or “Do Nothing” Approach One of the easiest-to-implement solutions for navigation is to simply keep it at the top. Pros Cons Height issues- Height matters in mobile. Responsive navigation breaking to multiple lines on small screens In the Wild Resources This clever solution keeps the nav list at the footer of the site, while the header contains a simple anchor link pointing to the footer nav.
17 CSS/HTML Effects with Cross-Browsing Alternatives Well, we surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser. You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right? Thus, our point here is to collect some cool CSS effects that you should be using: So, Let’s rock! Min / Max width (IE included) Well, many of you are used to just replace the lack of min / max width / height for IE with fixed dimensions, right? You can, in this case, insert some IE expressions (basically, JavaScript code) to check current body width and adjust element’s width as follows: RGBA (IE included) This time we will need some IE filters to get the job done. IE corrections is based on gradient filter, that actually we put just one color to the beginning and the end, and BAM! Opacity (IE included) Wow, filters again!
Improving Usability with Fitts’ Law Back in 1954, psychologist Paul Fitts published an article the detailed his theory on human mechanics as it pertained to aimed movement. It was Fitts’ observation that the action of pointing to or tapping an target object could be measured and predicted mathematically. Fitts stated that the size of the target object along with its distance from the starting location could be directly measured, allowing him to model the ease at which a person could perform the same action with a different target object. In 1954, this theory had no application for computers yet; however, it shouldn’t take a modern designer long to discover the powerful meaning this formula has in the context of user interfaces. Because of this, Fitts’ law has become a staple in the field of human-computer interaction (HCI), and has become one of the most accepted guidelines in the industry. Fitts’ law, at its simplest form, is common sense. How Fitts’ Law Works Here is the equation: In the equation above: Movement and Distances
Don't Reinvent the Wheel - 100+ Links of Design Elements and Resources This time we will review some helpful resources for designers, how you can find them, and how can they help you. Have you ever thought that every day, while you are busy doing your work, there are a lot of people doing almost the same thing as you? And they are releasing it. For free. And sometimes we just forget all this stuff and lose a lot of time doing things that just didn’t need to be done. So, this is a post with a lot of links, and with my opinion about many of them. So, let’s rock! Creative Photo Collections Actually, most of you always use stock photos in your layouts. So, usually you have 2 options: Use premium stock photosTake your own photos I think there is a third option that we almost always forget: Some really artistic and creative photos out there. We have a lot of photo collections, with photos for specific situations. Why they are good: Using in-context funny or emotional images is the easiest way to get your reader’s attention, so you get more time to explain your point.
Free PSDs & Resources for Web Designers by Orman Clark Photoshop WebDesigner Toolbox: Resources You'll Ever Need If you’re using Photoshop daily it’s essential to have an asset library. Having a pre made toolbox or asset library can be extremely handy. Having the right toolbox can save you a whale of a time and provide you with nifty resources. Brushes 1. Brusheezy is the place to share your free Photoshop brushes and other Photoshop related resources. 2. PS Brushes is another place where Photoshop brushes are gathered. 3. BrushLovers has one of the largest collections of exclusive and high-quality Photoshop brushes on the Web. Patterns 1. COLOURlovers is an international community of designers and artists of all kinds who visit the site to get color inspiration, ideas and feedback for both their professional and personal projects. 2. At Squid Fingers you can find over 100 creative patterns to use for your projects. 3. BgPatterns is a tiny web app for making background patterns in a few clicks. 4. Textures 1. CGTextures strives to be the world’s best texture site. 2. 3. 4. 5. Stock photos Icons 1. 2.
NounProject 20 Free Most Useful Photoshop Files to Inspire Designers Designers around the globe need some inspiration to motivate themselves when they going to start a creative new project with photoshop. Today we present some useful free downloadable psd files to inspire designers. Are you looking to contribute to our design community ? Suggest a link to a relevant article, or submit your own! You will help push the design community to much higher levels. Glassy panels styles Chrome Layer style Polka Lights Styles Japan layer style Glow Shiny Button Layer Style Free PS Style Pink Bucket PSD and Picture Glitter Layer Style Gold Photo Frame Style Button Layer Style Photoshop style Golden Frame Style Glossy Style Gel Button Style Earth PSD and Picture Shopping Bags – Free Picture Starry Night Background Portrait Abstract Photo Backgrounds Cute Rainbow – Free Picture Laptop – Free Picture