- Design & Graphics

Friday Focus 08/27/10: (Mostly) Black and White

I’ve noticed a lot of designs with a mostly black and white color palette lately, and not just for site types you’d expect. Is the colorful, rainbow trend being phased out with something more classic? Are people tired of safe, middle-ground gray? Welcome to this week’s Friday Focus.

Designs of the Week

Quartel Design

It’s interesting how even the background is a strong black and white graphic.

Larissa Meek

Lots of other trends here: folded ribbons, subtle noise texture, and centered logo. Note how the social buttons and feed subscriber count come before the navigation; guess that’s what’s more important on this site!

Simple Square

Just as simple and minimal as the color palette.

Little Black Dress Society

Love the hanger icon on the current navigation item, and the feather in the drop-down menu.

David Perel

Yellow as accent for black and white designs start here. And are you for or against sidebars?

iFontMaker

Screenshots and product shots are getting bigger and bigger. I vaguely remember them occupying one-third of the page but now it’s half.

Made By Water

I like how light and playful this looks, including the irregular pattern in the background, and the recurring circles.

Elementic-Interactions

Great breathing space between everything.

Eric Johansson

It’s so clever how when you hover over the a navigation item at the top, it also affects the navigation at the bottom (not pictured). Also note how the browser frame in the portfolio carousel is abstracted and black.

Quotivate Me

The amount of gradients here is a little strong but I think it works. Perhaps it’s just the text in the lower half that could be improved.

Bombardier Studio

A little bit of alignment issue but as usual I love the whitespace.

Keith Bates

Still not a big fan of the noise texture trend but it’s slowly warming up to me. Here it looks warm and fuzzy!

Monsoon Company

The post navigation here is a wonderful idea, but the arrows could be a little more obvious and closer to the center post.

dodaqueen.com

What a nice idea to put the slideshow on the top right across vertical navigation, and place your name big front and center. Memorable branding.

Build Conference

I love how the nut on the logo repeats on the ticket icon.

KISSinsights

The video area doesn’t really work for me but everything else looks nice.

Paper Wireframes

More and more I’m seeing a layout divided in halves instead of in thirds.

The Jacket Room

The design is compelling although as a website design, not so much. I would have loved to see more.

Jose Luis Merino Parra

The mix of patterns and the interactions feels nice, but I don’t understand why you have to hover twice to navigation: first to make the designer name appear, then to make the menu appear.

Telegramme Studio

Big, bold, but still clean and easy to read.

Social Media Weekly

Accessibility How do we save longdesc?
“The longdesc attribute, although potentially useful, was removed from the HTML5 specification, despite recommendations to retain it from the HTML Accessibility Task Force.”

UsabilityDarkPatterns.org
“This pattern library is dedicated to Dark Patterns: user interfaces that have been designed to trick users into doing things they wouldn’t otherwise have done.”

Usability You’re a failure: Deal with it
“Every website has points of failure. It is inevitable. The question is do you know what they are and are you doing something about them?”

CSSCSS3 Playground by Mike Plate
WYSIWYG CSS3 code generator.

JavaScriptPaintbrushJS
“A lightweight browser-based image processing library”


40+ Elegant Free CSS/(X)HTML Templates from 2010

Advertisement in 40+ Elegant Free CSS/(X)HTML Templates from 2010
 in 40+ Elegant Free CSS/(X)HTML Templates from 2010  in 40+ Elegant Free CSS/(X)HTML Templates from 2010  in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Today we present some useful free CSS/(X)HTML templates which are available for free download and use. You may want to consider using them for your next projects or build upon them, creating more advanced themes from these basic templates.


Free CSS/(X)HTML Templates

Blue Jeans (Demo | Download)
Stand out from the crowd with this cool, free template for a portfolio website based on blue jeans texture.

Blue-jeans in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Portfolio (Demo | Download)
An HTML 5 and CSS based website template suitable for businesses. It has a jQuery slide show in the home page header for displaying your latest work, featured contents or can also be used to tell your visitor what your web site is all about.

Portfolio in 40+ Elegant Free CSS/(X)HTML Templates from 2010

High Five (Demo | Download)
It can be useful if you need to show case your work / portfolio. Most of the style elements are in the CSS including styles for Blog, Comment Template etc.

High-five in 40+ Elegant Free CSS/(X)HTML Templates from 2010

AppCloud (Demo | Download)
It has been designed with tones of blue, white and a bit grey to point out the gadgets and provide more usability that you can obtain information you need faster and more easily. You can display all gadgets you are selling.

Appcloud in 40+ Elegant Free CSS/(X)HTML Templates from 2010

RS 18 (Demo | Download)
This blue colored well designed template can be used by people doing business.

Business-portfolio in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Dandoot (Demo | Download)
It has been designed so that it is suitable mostly for major/indie music recording companies, bands, musicians, music products affiliates, music event organizers or simply online music stores.

Dangndoot in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Bamboo (Demo | Download)
This template will go extrremly well with suitable Blogs, Small Websites etc.

Bamboo in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Acallia (Demo | Download)
A smart template, it can be used by service sector industries and persons like event management compnies or graphic designer firm.

Acallia in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Reinvent (Demo | Download)
It features a narrow, one column layout with minimum graphics, clean and legible typography.

Reinvent in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Alexx C (Demo | Download)
This template gels well with person/firm in service sector.

Alexx in 40+ Elegant Free CSS/(X)HTML Templates from 2010

RealOne (Demo | Download)
This template is created keeping in mind property selling/buying sites and its quite neet.

Realone in 40+ Elegant Free CSS/(X)HTML Templates from 2010

The Radio Station (Demo | Download)
As the name suggest, this can be used by FM or radio stations.

Radio in 40+ Elegant Free CSS/(X)HTML Templates from 2010

CSS Heaven 1 (Demo | Download)
This template can be used for some design or lifestyle related website and it gives a contemporary look.

Cssheaven in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Turrion (Demo | Download)
A blue colored template, it tends to give all the necessary information to clients at one go.

Turrion in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Zen Design (Demo | Download)
This template can be used for websites with loads of information or which issuing articles/tutorials on regular basis.

Design-zen in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Urban Gear (Demo | Download)
Great free html template for on-line shop dedicated to the urban fashion industry. Remove the slider area and use this template as a start point for your on line business.

Urban in 40+ Elegant Free CSS/(X)HTML Templates from 2010

ubly (Demo | Download)
This format is most suitable for blogs related web sites.

Ubly in 40+ Elegant Free CSS/(X)HTML Templates from 2010

beSMART (Demo | Download)
Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

Besmart in 40+ Elegant Free CSS/(X)HTML Templates from 2010

CSS Heaven 2 (Demo | Download)
CSS Heaven 2 is a free CSS Template suitable for small business websites and blogs

Cssheaven2 in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Easy Slide (Demo | Download)
Easy Slide is a simple but cool css template based on the famous Coda Slider.

Easy-slide in 40+ Elegant Free CSS/(X)HTML Templates from 2010

StudioClick (Demo | Download)
Studio Click is a simple, well-structured portfolio theme that focuses on one thing: gorgeous photos, screenshots, and content. It displays works easily and stylishly using large images of your products.

Studioclick in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Bizgroup (Demo | Download)
Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

Bizgroup in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Photo Pro (Demo | Download)
Photo Pro is a simple css template for portfolios and photo sites and it’s very easy to edit.

Photo-pro in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Treasure hunters (Demo | Download)
This facinating template can be used by blogs and or some stock photo sites.

Treasure in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Shop Around (Demo | Download)
Great free html template for on-line shop. Use it as a start point for your on line business.

Shop in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Free Nova Studio (Demo | Download)
The Blog page features a simple blog design, easy on the eyes, allowing you to express your thoughts freely and in a stylish way!

Nova in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Mondays (Demo | Download)
This template gives us a break from usual design and cn be used by service industries providing 24*7 supprts.

Mondays in 40+ Elegant Free CSS/(X)HTML Templates from 2010

OWMX 1 (Demo | Download)
Color of this template is easy on eyes and is stylish.

Owmx in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Simple Solution (Demo | Download)
This template can be used by business sites and it is very attractive.

Simple-solution in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Classic Luxury (Demo | Download)
It is clean and has a lot of whitespace and nice typography. The code is well-organized and uses standards-based HTML and CSS.

Classic-luxury in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Outliers (Demo | Download)
This template can be best used to showcase your idea and ideation process.

Outliers in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Portfolio Template (Demo | Download)
This is a clean and professional looking template for small portfolios or business sites. Very easy to edit if you have a basic understanding of html and css.

Portfolio-template in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Market Leader (Demo | Download)
It can be used to showcase the reasons to prospective clients to choose you.

Market-leader in 40+ Elegant Free CSS/(X)HTML Templates from 2010

clean-white (Demo | Download)
This is a simple but beautiful css template with lots of whitespace and a professional look. Perfect as a frontpage for small businesses or photographers.

Clean-white in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Ninja Assassin (Demo | Download)
Impress visitors to your site with a high-quality one-page portfolio site inspired by the Japanese ninja culture.

Ninja-assassin in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Kelontong (Demo | Download)
You can use use Kelontong WordPress e-commerce theme to modify your store and sell more of your products.

Kelontong in 40+ Elegant Free CSS/(X)HTML Templates from 2010

Small Business (Demo | Download)
This is suitable for small scale business websites that don’t need a lot of pages.

Business in 40+ Elegant Free CSS/(X)HTML Templates from 2010

RS 19 (Demo | Download)
Its a attractive template using combination of white & bright colors and css techniques like Box Shadows and text shadows.

Ramblingsoul in 40+ Elegant Free CSS/(X)HTML Templates from 2010


Free Wireframing Kits, UI Design Kits, PDFs and Resources

Smashing-magazine-advertisement in Free Wireframing Kits, UI Design Kits, PDFs and ResourcesSpacer in Free Wireframing Kits, UI Design Kits, PDFs and Resources
 in Free Wireframing Kits, UI Design Kits, PDFs and Resources  in Free Wireframing Kits, UI Design Kits, PDFs and Resources  in Free Wireframing Kits, UI Design Kits, PDFs and Resources

To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.

In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Free Mobile GUI PSD

Android GUI PSD
This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.

Uidesignkit50 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

RIM Blackberry PSD
A complete PSD file with layer styles, this has 135 layers of Photoshop goodness.

Uidesignkit48 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Android Sketch Stencil Version 1.0
A Sketch-style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the audience from thinking about visual design and encourage them to focus instead on functionality and behavior.

Wireframes-130 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

All elements of Maemo 5 GUI in PSD
This downloadable PSD file contains GUI template elements for the Maemo platform. These are indispensable for prototyping GUI applications running on Maemo devices.

Uidesignkit58 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone 4 GUI PSD (Retina Display)
GUI PSD kit for creatives who design for the retina display (640×960). The file is huge, both in file size (62.7MB) and dimension (4074×2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.

Uidesignkit29 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad GUI Kit in PSD
This version offers a canvas size true to the iPad at 768×1024. In addition, most of the graphical elements are provided in vector format, allowing you a lot of room to scale up for high-resolution presentations. This version is layered in Photoshop, making it easy for you to go nuts with your mock-ups and client presentations.

Uidesignkit56 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Android 1.6 Wireframe stencil for Omnigraffle
Download this beautiful wireframe stencil add-on for OmniGraffle 5.x. Use this toolkit to wireframe Android-based apps and websites on the 1.6 Donut SDK.

Wireframes-132 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Google Android GUI PSD
Here are the GUI elements of Android, built using vectors to scale.

Uidesignkit51 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad GUI PSD Kit
This pack includes full size graphics, as well as 256, 128 and 64 pixel icon sizes. The pack includes four sizes of the iPad graphic in PSD, PNG and Mac ICNS formats.

Uidesignkit55 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Google Android PSD
A stencil set for Google Android prototyping.

Uidesignkit54 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Fireworks template for Android
In this Fireworks template, Android UI elements have been redrawn as vector images. In the folders, the elements have been mostly labeled according to the Android vocabulary.

Uidesignkit52 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Sexy Vector Cell Phone
This phone can be scaled to any size. Easily add your own image to the screen with the included object mask. All objects are layered, grouped and labeled for easy customization.

Uidesignkit42 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Stencil for Omnigraffle
Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. The text is fully editable in lists, title bars, buttons and scroll wheels.

Uidesignkit28 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone App Wireframe Template

Uidesignkit45 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mobile – iPhone

Uidesignkit44 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone GUI Elements
Some beautiful iPhone elements. All graphics are layered Photoshop files.

Uidesignkit5 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad and iPhone Design
Design your application for the iPhone, iPod Touch and iPad with this exhaustive set of stencils. All stencils were created by hand with native OmniGraffle shapes, and groups and can be scaled, resized and exported to other vector formats in Graffle.

Uidesignkit46 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Design Stencil for iPhone and iPad
A stencil for designing OS applications for the iPhone, iPod Touch and iPad. The stencil for now is targeted at developers familiar with the default characteristics of the views and controls provided by UIKit.

Wireframes-101 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Apple iPad fully editable PSD
A fully editable Apple iPad in PSD format. Every element you see is editable via vector masks, and everything is scaleable.

Wireframes-102 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Palm Pre GUI PSD
This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.

Uidesignkit57 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone UI Vector Elements
Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.

Wireframes-103 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Vector GUI Elements: tabs buttons menus icons
This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).

Wireframes-104 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Social Networking GUI PSD Kits

Free Full-Layered Facebook GUI PSD Kit
The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need. The kit is free to use in all projects, without any restrictions.

Uidesignkit12 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Facebook GUI Free PSD Resource
A Facebook graphic user interface (FBGUI) resource kit for Photoshop to make your work easier.

Uidesignkit22 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Facebook Applications
A sizable collection of elements for creating wireframes for Facebook applications.

Uidesignkit23 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Omnigraffle Twitter Widget Stencil
This set includes a selection of useful Twitter widgets and badges.

Uidesignkit21 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframing Kits

Best Practice UX Forms Stencil v1.1
A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.

Wireframing-106 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Form Elements UI Kit
Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.

Form in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Shapes
Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

Wireframing-104 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe kit for UI Designers
A set of various wireframes, such as product details, list of items, front page, mobile phone.

Wireframes-113 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

MBTI sketching paper for ideation
MBTI sketching paper for ideation sessions. It helps you think inside the box of four personality traits. Describe a design challenge and the problem to solve on every piece of paper. There’s also space for annotations.

Wireframes-105 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

A4 sketching paper
This sketching paper can be used after generating ideas for functionality. Design preliminary screens based on the ideas you come up with.

Wireframes-106 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Magnets (DIY Kit)
This DIY magnet template is based on the Konigi wireframe stencils, and it includes three sheets of elements that might be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and then cut them out.

Wireframes-107 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Paper wireframe templates
The finished product include seven variations, as well as PSDs.

Wireframes-108 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe template
A useful print-and-sketch template available for downloading.

Wireframes-109 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Idea Sheet
A total of three sheets: one full size (landscape), one at 70% reduction (vertical) and one at 50% reduction (landscape). The 80 tiny dots make it easy to split the screen horizontally and vertically.

Wireframes-110 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Scenario, Taskflow and Grid Sketch Sheets
A set of beautiful printable sheets for ideas and sketching

Wireframes-111 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Photoshop browser template
Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.

Wireframes-112 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Interactive Sketching Notation 0.1
The idea behind this notation is to visualize user interface states as well as user actions in a clear and rapid manner.

Notations2 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

MobileMe Full iPhone GUI
For use with WinterBoard, this is a beta release, so there may be unthemed elements.

Wireframes-116 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Android Wireframe Templates (PDF)

Wireframes-118 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Keynote UX Stencils

Wireframes-126 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Advertising Stencil Kit
A set of very useful advertising stencils.

Wireframes-131 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Dragnet website wireframes kit v 0.9
Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completely free to download and use. The kit contains common Web design elements, such as scrollbars, buttons, menus and alerts.

Wireframes-133 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

User Interface Design Framework
This pretty and comprehensive design framework contains a GUI library of hundreds of vector elements for interface design. This minimal UI icon set has 260 vector icons and a library of 200 styles for Illustrator.

Uidesignkit1 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Browser Form Elements PSD
Included here is a set for Firefox 3 for Mac and another for IE7 on Vista.

Uidesignkit14 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Sketching and Wireframing Kit
Here is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Uidesignkit3 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Photoshop Form Element Templates
This set includes all common form fields and mouse and link pointers, optimized for ease of use.

Uidesignkit37 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web Browser Elements
This excellent and useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all in an easily editable PSD file.

Uidesignkit4 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

UI Design Kit
This Web UI template kit is made completely with shape objects, which in some cases convert to SmartObjects, so they’re totally scalable.

Uidesignkit7 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Symbols
This download contains a symbols library and a full Adobe Illustrator file, with all of the elements spread out on the art board. To install this library, just drag and drop the Wireframe Symbols.ai file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.

Uidesignkit9 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web UI Element Pack
This pack, in PSD format, contains 19 elements including loading bar, default and clicked-state buttons, button toggle, icons for “Close,” “Next” and “Previous,” paging icon and slider.

Uidesignkit13 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Kit for Google Drawings

Uidesignkit15 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

OmniGraffle Stencil for Ext JS v3.0
This updated version of Ext JS Omnigraffle stencil contains many improvements and additions, namely the recreation of most Ext JS elements as Graffletopia shapes or groups, especially helpful for resizing titles, tables cells and so on.

Extjs in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Flex 3 Stencil
Includes all Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tooltips and errors.

Uidesignkit19 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Aqua GUI
A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based on Aqua, and mainly intended to make simple window designs.

Uidesignkit20 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Flex Darkskin PSD UI
A beautiful set of 16 PSD files.

Uidesignkit24 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web Wireframe Kit
Here is a simple way to plan a layout and a cost-effective, time-saving wireframe kit for Web designers.

Uidesignkit27 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

UI Buttons and Icons
This set contains 165 high-quality UI icons and buttons in five different colors. Available in AI, JPEG and SVG formats.

Uidesignkit8 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Quommunication Stencil Kit
This beautiful set contains design elements for wireframing, RSS feeds, colors, advertising units, browser windows and grids.

Uidesignkit30 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mac OS X Interface 2
A Leopard-y interface stencil kit that makes extensive use of tables for maximum flexibility while maintaining pixel precision.

Uidesignkit31 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

OmniGraffle UX Template
The OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs (e.g. title page, wireframes, storyboards).

Uidesignkit32 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Template for Blueprint CSS Comps
This template allows you to create visual design comps to be implemented using a CSS layout framework. The Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint.

Uidesignkit33 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Apple Elements for OmniGraffle
Stencils of Apple hardware and miscellaneous networking components. Excellent for creating physical diagrams.

Uidesignkit36 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

DeviantART ID PSD Kit
These 15 professionally designed, fully customizable templates include MINI and Original ID templates.

Uidesignkit40 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Browser Screens and Website Elements
Here is a useful set of vector assets you can use to mock up client projects, present your work or get a quick visual while laying out a website.

Uidesignkit41 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

960 Grid Template for OmniGraffle

Uidesignkit43 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Control of different browsers for designers (download link)
A PSD library of controls in browser interfaces of Mozilla Firefox, Opera, Internet Explorer and Safari.

Controls in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Useful Articles

  • The Importance of Wireframing
    A comprehensive article on how wireframing plays an important role in information architecture
  • The Future of Wireframes
    As we move into the next decade of Web design, it’s time to re-evaluate our understanding of wireframes, a tried and tested user experience staple.

    Wireframing-110 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

  • Wireframing Is Not a Religion
    Wireframes are an indispensable tool for design thinking, a digital sketch pad ready to be drawn and erased, scrapped or resurrected at any moment.
  • Five Commandments for Wireframing
    Paul Boag is a wireframes fanatic and believes they are an indispensable part of the development process. He espouses five unbreakable rules.
  • 20 Steps to Better Wireframing
    Possibly the biggest mistake made in any development project is failing to plan. This article goes over why.

Resources and Round-Ups

  • I Love Wireframes
    A tumblog dedicated to wireframes, prototypes and mock-ups.
  • Wireframe Showcase
    This site is a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs. Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.

    Wireframing-113 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

  • Standard Screen Patterns for Web Interface Design
    Here are some principles and patterns for rich interactions.
  • 50 Free UI and Web Design Wireframing Kits and Resources
    This post focuses on wireframing tools and standalone applications, as well as resources you need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements and mobile elements, which you can use in any graphics editor such as Photoshop or Illustrator, or with pen and paper.
  • A Collection of Printable Sketch Templates and Sketch Books for Wireframing
    Here are 20 resources that you can use in the sketching phase of application development.
  • A Collection of Printable Web Browser Sketching and Wireframe Templates
    All of these printable sketching templates have all been designed especially for Web designers. Each has an imprint of a Web browser (either Safari, Chrome or Firefox).
  • Useful (Offline) Utensils and Toolkits for Designers
    Why start completely from scratch when you can use one of these pre-made guides to save time and better direct your creative energies? In this article, you will find a great list of free downloadable tools, as well as a collection of notepads and other products to purchase for offline planning and design.

Related Posts

Would you like to see more similar posts on Smashing Magazine?


(al)


© Aquil Akhter for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , ,


In Defense Of A/B Testing

Smashing-magazine-advertisement in In Defense Of A/B TestingSpacer in In Defense Of A/B Testing
 in In Defense Of A/B Testing  in In Defense Of A/B Testing  in In Defense Of A/B Testing

Recently, A/B testing has come under (unjust) criticism from different circles on the Internet. Even though this criticism contains some relevant points, the basic argument against A/B testing is flawed. It seems to confuse the A/B testing methodology with a specific implementation of it (e.g. testing red vs. green buttons and other trivial tests). Let’s look at different criticisms that have surfaced on the Web recently and see why they are unfounded.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Argument #1: A/B Testing And The Local Minimum

Jason Cohen, in his post titled Out of the Cesspool and Into the Sewer: A/B Testing Trap, argues that A/B testing produces the local minimum, while the goal should be to get to the global minimum. For those who don’t understand the difference between the local and global minimum (or maxima), think of the conversion rate as a function of different elements on your page. It’s like a region in space where every point represents a variation of your page; the lower a point is in space, the better it is. To borrow an example from Jason, here is the issue with the local vs. global minimum:

Local-minimum-global-maximum in In Defense Of A/B Testing

As even Jason acknowledges in his post, this argument isn’t really concerned with A/B testing, because the same methodology could be used to test radical changes to get to the global minima. So, calling it an A/B testing trap is unfair because it doesn’t have anything to do with A/B testing. Rather, the argument uncovers the futility of testing small changes.

So, if A/B testing is not the culprit, is the real issue the local minima? No, even the theory of discounting local minima is flawed. The image above shows you a very simple one-dimensional fitness landscape. You can imagine the x-axis as the background color and the y-axis as the bounce rate. Jason’s argument goes something like this: if you tested dozens of shades of blue, you might decrease your bounce rate, but if you tried something completely different (such as a yellow), you might achieve the absolute lowest bounce rate possible on your page.

There are two problems with this argument…

1. You Never Know for Sure Whether You’ve Found the Global Minimum (or Maximum)

Jason Scaled in In Defense Of A/B Testing

The global minimum (or absolute best) exists only in theory. Let’s continue with the example of an extreme yellow background giving you the global minima (in the bounce rate). Upon further testing, what if you found that no background color at all gave you a lower bounce rate? Or better yet, that a background full of lolcat images gave you an even lower bounce rate? The point is, unless you have reduced the bounce rate to 0% (or the conversion rate to 100%), you can never be confident that you have indeed achieved the global optimum.

There is another way to determine whether you have found the global optimum: by exhausting all possibilities. Theoretically, if your page didn’t contain anything other than background color (and you couldn’t even add the background image because, well, your boss hates it), then you could cycle through all background colors available and see which one gave you the lowest bounce rate. In exhausting all possibilities, the color that gives you the lowest bounce rate should be the one that is absolutely the best. This brings us to the second point…

2. It’s Not Just About the Background Color, My Friend

When optimizing a Web page, you can vary literally hundreds or thousands of variables (background color being just one of them). Headline, copy, layout, page length, video, text color and images are just a few such variables. Your goal for the page (in terms of conversion or bounce rate) is determined by all of these variables. This means that the fitness landscape (as seen in the images above) is not one-dimensional and never as simple as it appears. In reality, it is multi-dimensional, with a ton of variables affecting the minima and maxima:

FitnessLandscape in In Defense Of A/B Testing

Again, imagine the peaks as your conversion rate (or bounce rate) and the different dimensions as the variables on your page (only two are here, but in reality there are hundreds). Unlike a one-dimensional case, exhausting all possibilities in a real-world scenario (i.e. in conversion optimization) is impossible. So, you are never guaranteed to have found the global maxima (or minima). Lesson to be learned: embrace local minima.

Argument #2: A/B Tests Trivial Changes

Rand Fishkin of SEOMoz, posted an article titled Don’t Fall Into the Trap of A/B Testing Minutiae in which he reiterates Jason’s argument to not waste time testing small elements on a page (headline, text, etc.). His main argument is that getting to the local maxima (by testing trivial changes) takes up too much energy and time to make it worthwhile. See the image below, reproduced from his blog but modified a little to make the point:

Abtests in In Defense Of A/B Testing
Large view

The first point to make is that the opportunity cost is not the time required to run the test (which is weeks) but rather the time needed to set up the test (which is minutes). Once you have set up the test, it is pretty much automated, so you risk only the time spent setting it up. If an investment of 15 minutes to set up a button-color test ultimately yields a 1.5% improvement in your conversion rate, what’s wrong with that?

Many A/B testing tools (including Visual Website Optimizer—disclaimer: my start-up) make setting up small tests a no-brainer. They also monitor your test in the background, so if it isn’t a winner, it is automatically paused. What’s the risk then of doing such trivial tests? I see only the upside: increased sales and conversions.

To make his point, Rand gives the example of a recent Basecamp home page redesign, by which Basecamp managed to increase its conversion rate by 14%. Can you imagine the kind of effort that went into such a redesign (compared to a button-color test)? In fact, because the fitness landscape is multi-dimensional (and very complicated), a total redesign has a much higher probability of performing worse. A complex design can go wrong in many more ways than a simple button color can. Because we never hear of case studies of redesigns gone wrong (hello survivorship bias), we shouldn’t conclude that testing radical changes is a better approach than testing minutiae (especially because radical changes require a huge investment in effort and time compared to small red vs. blue tests).

With the local minima (or maxima), you at least know for sure that you are increasing your conversion rate, which leads directly to increased profit. This isn’t to say that we should give up on our hunt to achieve the global optimum. Global optimum is like world peace: incredibly hard to achieve, but we have to keep moving in that direction. Lesson to be learned: the ideal strategy is a mix of both small (red vs. blue) tests and radical redesign tests. By jumping across the mountains in the conversion rate fitness landscape, you ensure that you are constantly seeking better conversion rates.

Argument #3: A/B Testing Stifles Creativity

Jeff Atwood compares the movie Groundhog Day to (surprise, surprise) A/B testing and concludes that because the protagonist failed in the movie, A/B testing must also fail. Stripped of all (non-)comparisons, Jeff suggests that A/B testing lacks empathy and stifles creativity. He goes on to cite a tweet by Nathan Bowers:

A/B testing is like sandpaper. You can use it to smooth out details, but you can’t actually create anything with it.

Whoever claimed that A/B testing is good for creating anything? Creation happens in the mind, not in a tool. The same flawed reasoning could be applied to a paint brush:

A paint brush is like a stick with some fur. You can use it to poke your cat, but you can’t really create anything with it.

A/B testing, like a paint brush, is a tool, and like all tools, it has its properties and limitations. It doesn’t dictate what you can test; hence, it doesn’t limit your creativity. A/B testing or not, you can apply the full range of your creativity and empathy to coming up with a new design for your website. It is up to you whether to go with your gut and implement it on the website immediately or to take a more scientific approach and determine whether the new design converts better than the existing one. Lesson learned: A/B testing is a tool, not a guidebook for design.

Summary

To reiterate the lessons learned from the three arguments above:

  • Because you can never achieve the global minima, embrace the local minima. Testing trivial changes takes a few minutes, but the potential outcome is far greater than the cost of those minutes.
  • Constantly explore the best ways to increase your conversion rate by performing both trivial tests and radical redesign tests at regular intervals.
  • A/B testing is a tool and does not kill your imagination (in fact, you need your imagination most when designing variations).
  • Lastly, don’t feel guilty about performing A/B testing.

(al)


© Paras Chopra for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


200+ Seamless Patterns Perfect for Website Backgrounds

We’re always on the lookout for great freebies to share with our readers, and today we’ve got some seamless patterns. Seamless patterns are a great way to add a lot of detail to a design and fill up a big area, such as a background. Here are over 200 patterns that are perfect for creating website backgrounds. You can use these as they are, or use them as a foundation to build upon.

Photoshop Stripe patterns (20 patterns)

seamless patterns

Free Vector Seamless Backgrounds (6 patterns)

seamless patterns

Seamless Paper Patterns (6 patterns)

seamless patterns

Patterns .38 (25 patterns)

seamless patterns

Patterns 17 – Fancy (4 patterns)

seamless patterns

Woven Plaid Swatches (25 patterns)

seamless patterns

Seamless Polka Dot Pattern Swatches (25 patterns)

seamless patterns

Pretty Plaids (30 patterns)

seamless patterns

Halftone Patterns (52 patterns)

seamless patterns

Retro Tartan (10 patterns)

seamless patterns


  • Sponsored Links

  •  

    September 2010
    M T W T F S S
    « Aug    
     12345
    6789101112
    13141516171819
    20212223242526
    27282930  
  • .

    Copyright © 1996-2010 Answer My Query. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress