Author Archive for John Vachovsky

10
Feb
10

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations.

This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.

Complete Wireframing Toolkits

Quommunnication Stencil Kit
A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.

Wireframing01 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Mac OS X Interface Stencil Kit
Leopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.

Macos2 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Facebook Applications Stencil Kit
A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

Facebook in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

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

Flex in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Eclipse Stencil Kit
This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).

Eclipse in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Massive Web UI & Button Set
This set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.

Web-ui-set-preview1 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Yahoo! Design Stencils – Design Pattern Library
You would be hard pressed to find a better wireframing resource than this one. The Yahoo! Design Stencil Kit is available for almost every application: OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG) and Adobe Photoshop. This huge library covers the following elements (basically, everything): ad units, calendars, carousels, charts and tables, UI controls, form elements, grids, menus and buttons, mobile (general), mobile (iPhone), navigation and pagination, OS elements, placeholder text, screen resolutions, tabs, windows and containers.

Wireframeresource48 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Free Sketching & Wireframing Kit
The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.

Wireframeresource52 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

EightShapes Unify
EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool.

Wireframeresource57 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Wireframe Symbols
This download contains a wireframe symbol library and a full Adobe Illustrator file with all of the elements spread out on a board. To install the library just drag and drop the file named Wireframe Symbols.ai into your Adobe Illustrator “Symbols” directory. Once you open Illustrator, go to your Symbols Palette and load the library.

Wireframeresource49 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

OmniGraffle Wireframe Stencils
This is a set of shapes for making wireframes in OmniGraffle version 5.x (Mac OS X).

Wireframeresource50 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

OmniGraffle UX Template
This is an OmniGraffle Pro template for interface design that includes shared layers for basic UX document needs; e.g. title page, wireframes, storyboards.

Wireframeresource51 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Web Page Elements
Using the open-source “Bitstream Vera” font set and free icons from FamFamFam, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.

Webpage in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Web Browser Templates

Photoshop Browser Templates – Web Designer Toolkit
These Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and cover nearly all browsers (Firefox, IE, Safari, Camino, even Netscape). For both sizes, the safe viewing area is clearly marked in a separate layer.

Wireframeresourcea in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Browser Templates for the Website
These Photoshop browser templates for Internet Explorer, Firefox for Mac and Firefox for Windows have been mocked up in the following sizes: 800×600, 1024×768 and 1280×1024 pixels.

Wireframeresource1 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Photoshop Browser Templates
This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila!

Wireframeresource2 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Browser Screens and Website Elements
A useful set of vector website assets.

Wireframeresource3 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Web-Safe Area Templates for Photoshop

All of the Web-safe area browser PSD templates listed below can be individually downloaded by choosing from the following resolutions: 640×480, 800×600, 1024×768, 1280×960 and 1600×1200 pixels.

Windows Vista IE Web-Safe Area

Wireframeresource4 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Windows Vista Firefox Web-Safe Area

Wireframeresource5 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Windows XP IE Web-Safe Area

Wireframeresource6 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Mac OS X Safari Web-Safe Area

Wireframeresource7 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Mac OS X Firefox Web-Safe Area

Wireframeresource8 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Mac OS X Safari Web-Safe Area

Wireframeresource9 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Web Form Elements

Best Practice UX Forms Stencil
This is a comprehensive release of the stencil kit which follows best practices in UX form design. It provides three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more.

Uxform in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Photoshop Form Element Templates
These Photoshop files include screenshots of all the common form elements as displayed in your selected operating system (Mac Classic, Mac OS X, Win XP and Win Classic). The form elements are separated into individual layers so that you can easily select, adjust or switch them as you please.

Wireframeresource10 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Browser Form Elements PSD
Included in this PSD file are form elements for Mac Firefox 3 and another for Vista IE7.

Wireframeresource11 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Web Form Elements Volume 1
Volume 1 contains a selection of Web user interace elements for forms in Photoshop format.

Wireframeresource12 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Web Form Elements Vol.2
This is Volume 2 of the Web Form UI Elements mentioned above and has been designed in a different style.

Wireframeresource13 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Photoshop Button Templates
These Photoshop button templates have been separated into individual layers to be easily selectable. You can choose from the following colors: dark blue, light blue, dark green, light green, yellow, orange, red and purple.

Wireframeresource14 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Web Browser Elements

You can select the element you need from whichever operating system and browser you use, and download them individually.

Windows Vista IE Form Elements

Wireframeresource15 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Windows Vista Firefox Form Elements

Wireframeresource16 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Windows XP IE Form Elements

Wireframeresource17 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Windows XP Firefox Form Elements

Wireframeresource18 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Mac OS X Firefox Form Elements

Wireframeresource19 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Mac OS X Safari Form Elements

Wireframeresource20 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Grid Templates

960px Photoshop Grid Template
This template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is broken down into six columns of 20-pixel gutters.

Wireframeresource20a in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

960 Grid Template for OmniGraffle

Wireframeresource21 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Illustrator Template for Blueprint CSS Comps
This Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

Wireframeresource22 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Photoshop Template for Blueprint CSS Comps
This Photoshop document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

Wireframeresource23 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Mobile App Development Resources

iPad GUI PSD
The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.

Ipadgui in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Ultimate iPhone Stencil – Graffletopia
This Omnigraffe iPhone stencil kit contains backgrounds, title bars, buttons, selectors and all other iPhone UI elements. It can be easily resized horizontally by ungrouping, resizing the middle element and then regrouping the elements back into a single button.

Wireframeresource24 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

iPhone 3G Stencil
Includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons. All components are on a transparent background and should re-size nicely.

Iphone3g in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

iPhone GUI PSD 3.0
With Apple’s official release of the new iPhone 3.0 came a number of new GUI elements. Some of the changes and additions have been include in this GUI: map and map elements including curl, copy and paste elements; timeline bar editor; and horizontal iPhone and horizontal panel bars and keyboards.

Wireframeresource25 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

iPhone PSD Vector Kit
This iPhone starter kit comes with several button elements as well as six different iPhone interface options.

Wireframeresource26 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

iPhone GUI Elements
Free iPhone elements available as layered Photoshop (PSD) files.

Iphone in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

iPhone GUI as Rich Symbols for Fireworks
This iPhone kit has been designed using Adobe Fireworks. It has several combinations, buttons, backgrounds, etc. It also has some lines of code to transform the simple vector symbols into rich symbols, with some variables.

Wireframeresource27 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Google Android GUI Application Mockup PSD
This Photoshop file contains all of the basic elements of Android 1.5, Google’s mobile operating system.

Wireframeresource28 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Palm Pre GUI PSD
This Palm Pre GUI PSD has been built with vectors for easy editing and scaling, and it contains most of the Pre’s GUI elements.

Wireframeresource29 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

RIM Blackberry PSD
This download package contains 135 detailed layers for Blackberry app development.

Wireframeresource30 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Optional Wireframe Extras

Interactive Sketch Notation
The general idea behind this notation is the desire to visualize user interface states as well as user actions in a clear and rapid manner.

Linowski in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Storyboard Characters (via Google Chrome)

Storyboard in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Proofreading Marks

Wireframeresource31 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Standard Web Banners
You can download these standard Web banners or ads individually (468×60 pixels, 768×60, 125×125, etc.). There are also templates for common but non-standard banner sizes (120×30, 230×33, 728×210, etc.).

Wireframeresource32 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Wireframe Icons, Royalty-Free EPS and PNG
The icon set includes EPS and PNG versions of the original Konigi Wireframe Icon Set and are suitable for use in vector drawing applications such as Adobe Illustrator as well as in Microsoft Visio.

Wireframeresource33 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

WEB UI Treasure Chest
This PSD layered file, most of whose files are fully editable, contains more than 100 elements for website design.

Wireframeresource34 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Webdesigner kit
This Photoshop download contains registration fields, menus, checkboxes, radio buttons and cursors.

Wireframeresource35 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Printable Sketching Paper

A4 and A3 Sketching Grid Paper
This downloadable and printable 960-pixel-wide grid makes it easy to create a three-column (320 pixel), four-column (240 pixel), five-0column (192 pixel) or six-column (160 pixel) grid on a single sheet of paper. You have two sizes to choose from, A4 and A3.

Wireframeresource36 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Print and Sketch Wireframe Template

Wireframeresource37 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

iPhone Application Sketch Template
The grid squares for this sketching paper are equal to 10 pixels. The tick marks indicate the height of the status bar, nav bar, keyboard, tab bar and toolbar. For best results, print on A4 borderless paper.

Wireframeresource38 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

iPhone Wireframe Templates for Sketching
Two layouts are available, both in PDF and Visio (VSD) formats for quick iPhone mockups.

Wireframeresource39 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

iPhone App Wireframe Template
Two versions are available, one in landscape and the other in portrait. Each version includes three pages: page 1 has a vertical screen and notes column; page 2 has a horizontal screen and notes column; page 3 has a three-screen layout that is great for drafting designs.

Wireframeresource40 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Printable Wireframe and Notes

The below 8.5 x 11-inch graph paper is made for visual designers, interaction designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a 2×2 grid. Plus, you’ll get a basic grid for drafting site maps or anything else that comes up. Choose from the following:

Wireframe with Notes
This wireframe grid is divided into 24 columns, with gutters between each column. The grid is especially useful for designers who work within a CSS framework such as Blueprint.

Wireframeresource42 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Wireframe (Landscape)

Wireframeresource43 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Wireframe (Portrait)

Wireframeresource44 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Storyboard
This is a storyboard with four cells. Each cell contains a simple grid.

Wireframeresource45 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Storyboard with Notes
This is a storyboard with four cells. Each cell contains a simple grid. The area beneath each cell is ruled for notes.

Wireframeresource46 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Basic Paper
This is a basic grid box. Use it for concept diagrams, site maps, spectrums, tables and whatever else you sketch.

Wireframeresource47 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Wireframe Magnets (DIY Kit)

These DIY magnet template are based on the Konigi wireframe stencils and includes three sheets of elements that would be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, and cut them out.

Form Elements

Wireframeresourceb in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Tabs, Buttons and Bars

Wireframeresourcec in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Windows and Dialogs

Wireframeresourced in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Further Resources And Some Wireframing Inspiration

web.without.words
A visual playground where designers take popular sites and reconstruct them in a wireframe.

Ebay in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Graffletopia
Graffletopia is a huge resource of free stencils for OmniGraffle (Mac-only, sadly). With OmniGraffle, you can quickly create high-quality wireframes, flowcharts and other diagrams.

Wireframeresource53 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Mockups To Go
Mockups To Go is a user-contributed collection of ready-to-use UI components and design patterns that were built using Balsamiq Mockups. You can download all of the components and design patterns to use in your mockups.

Wireframeresource54 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Wireframes Magazine
Wireframes Magazine is dedicated to all things wireframing and prototyping. It has a huge library of downloadable templates, samples and UI tools, and even a section for inspiration.

Wireframeresource55 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

I {heart} wireframes
I {heart} wireframes is a great source of wireframing inspiration and resources. And yes, we all love wireframes!

Wireframeresource56 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

10
Feb
10

50 Brilliant CSS3/JavaScript Coding Techniques

CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.

In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Please notice that most techniques presented below are experimental, and many of them are not pure CSS3-techniques as they use jQuery or other JavaScript-library.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Visual Effects and Layout Techniques With CSS3

CSS3 Analogue Clock
Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

Css-132 in 50 Brilliant CSS3/JavaScript Coding Techniques

Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

Css3-new-03 in 50 Brilliant CSS3/JavaScript Coding Techniques

dynamic PNG shadow position & opacity
When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

Css3-new-00 in 50 Brilliant CSS3/JavaScript Coding Techniques

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Css3-last-08 in 50 Brilliant CSS3/JavaScript Coding Techniques

Awesome Overlays with CSS3
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Css3-last-11 in 50 Brilliant CSS3/JavaScript Coding Techniques

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.

Css-144 in 50 Brilliant CSS3/JavaScript Coding Techniques

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Css-197 in 50 Brilliant CSS3/JavaScript Coding Techniques

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. And, of course, it uses CSS3 to style everything.

Css3-last-00 in 50 Brilliant CSS3/JavaScript Coding Techniques

Drop-In Modals with CSS3
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.

Css3-last-13 in 50 Brilliant CSS3/JavaScript Coding Techniques

Newspaper Layouts with Columns and Image Masks
The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.

Css3-last-14 in 50 Brilliant CSS3/JavaScript Coding Techniques

Navigation Menus With CSS 3

Sweet AJAX Tabs With jQuery 1.4 & CSS3
This post is a tutorial of making an AJAX-powered tab page with CSS3 and the newly released jQuery 1.4.

Sweet-tabs in 50 Brilliant CSS3/JavaScript Coding Techniques

Sweet tabbed navigation bar using CSS3
Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

Css-041 in 50 Brilliant CSS3/JavaScript Coding Techniques

Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Css3-last-05 in 50 Brilliant CSS3/JavaScript Coding Techniques

Building Coverflow With CSS Transforms
I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

Css3-last-04 in 50 Brilliant CSS3/JavaScript Coding Techniques

CSS3 Hover Tabs without JavaScript
With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.

Css-186 in 50 Brilliant CSS3/JavaScript Coding Techniques

CSS 3 Transitions and Animations

Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Css-010 in 50 Brilliant CSS3/JavaScript Coding Techniques

Sliding Vinyl with CSS3
We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

Css3-last-12 in 50 Brilliant CSS3/JavaScript Coding Techniques

Fun with CSS3 and Mootols
These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

Css3-last-171 in 50 Brilliant CSS3/JavaScript Coding Techniques

Star Wars HTML and CSS: A NEW HOPE
There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away”, compared with my simple CSS gallery.
Guillermo Esteves presented a piece of history translated for tomorrows browsers: the Star Wars Episode IV opening crawl in HTML and CSS.

Css-130 in 50 Brilliant CSS3/JavaScript Coding Techniques

Fun with 3D CSS and video
Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.

Css-138 in 50 Brilliant CSS3/JavaScript Coding Techniques

CSS3 animations and their jQuery equivalents
This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don’t forget to check the demo/download the source code to view how everything is working under the hood.

Css-040 in 50 Brilliant CSS3/JavaScript Coding Techniques

CSS Animations
No matter how fast internet tubes or servers are, we’ll always need spinners to indicate something’s happening behind the scenes.

Css-009 in 50 Brilliant CSS3/JavaScript Coding Techniques

Snowy CSS3 Animation
It’s cold and snowy down here in Brighton, so to celebrate the falling white stuff (and of course the various festivities at this time of year) Clearleft’s very own Natbat has made a snowy CSS3 animation surprise for all you Safari and Chrome users out there.

Css-005 in 50 Brilliant CSS3/JavaScript Coding Techniques

What You Need To Know About Behavioral CSS
In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.

Css-038 in 50 Brilliant CSS3/JavaScript Coding Techniques

3D Cube using new CSS transformations
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.

Css-139 in 50 Brilliant CSS3/JavaScript Coding Techniques

Playing around with WebKit Animations
I’ve been playing around doing a KeyNote like animation done with CSS and some JS to hook up the necessary events. The animation is kind of like a deck of cards. When you go to the next one the current one zooms in and fades out, symbolizing getting closer to the viewer. The next card then zooms and fades in from the back and to give a fancy effect-

Css-133 in 50 Brilliant CSS3/JavaScript Coding Techniques

More on 3D CSS Transforms
Various 3D CSS Transforms in an overview.

Css3-last-15 in 50 Brilliant CSS3/JavaScript Coding Techniques

Gradients, RGBA and HSL with CSS 3

Working With RGBA Colour
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

Css-007 in 50 Brilliant CSS3/JavaScript Coding Techniques

CSS3 Gradients: No Image Aqua Button
I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images! Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!

Css-164 in 50 Brilliant CSS3/JavaScript Coding Techniques

CSS3 HSL & HSLA
A tutorial on using the HSL & HSLA declarations along with the quick + / – guide to which browsers currently support the herein effect.

Css3-last-06 in 50 Brilliant CSS3/JavaScript Coding Techniques

Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

Css-100 in 50 Brilliant CSS3/JavaScript Coding Techniques

Using the Shadow-Property in CSS3

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Css-096 in 50 Brilliant CSS3/JavaScript Coding Techniques

Shadows and CSS3
I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.

Css-003 in 50 Brilliant CSS3/JavaScript Coding Techniques

Learning New CSS3 Selectors

CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.

Css3-new-01 in 50 Brilliant CSS3/JavaScript Coding Techniques

A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Css-168 in 50 Brilliant CSS3/JavaScript Coding Techniques

Cleaner Code with CSS3 Selectors
In this article I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I’m also going to demonstrate how we can use these selectors now with a little help from JavaScript – which can work out very useful if you find yourself in a situation where you can’t change markup that is being output by some server-side code.

Css-008 in 50 Brilliant CSS3/JavaScript Coding Techniques

The CSS3 :target Pseudo-class And CSS Animations
It’s no secret that I’m always looking for an easy way out using CSS instead of trying to replicate things with convoluted code — there are so many underused techniques that we could be applying to our designs as an enhancement layer! In this experience, I take a brief look into the :target pseudo-class and a very simple CSS animation.

Css3-last-01 in 50 Brilliant CSS3/JavaScript Coding Techniques

The CSS3 :not() selector
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

Css3-last-02 in 50 Brilliant CSS3/JavaScript Coding Techniques

IE CSS3 pseudo selectors
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE… Honest…!

Css3-new-02 in 50 Brilliant CSS3/JavaScript Coding Techniques

CSS3 Galleries

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

Css-082 in 50 Brilliant CSS3/JavaScript Coding Techniques

An Awesome CSS3 Lightbox Gallery With jQuery
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

Css-155 in 50 Brilliant CSS3/JavaScript Coding Techniques

If That Is An Awesome CSS3 Gallery, How Would You Call Mine?

Css-136 in 50 Brilliant CSS3/JavaScript Coding Techniques

Editable CSS3 Image Gallery
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

Css-163 in 50 Brilliant CSS3/JavaScript Coding Techniques

Replacing CSS Hacks with CSS 3

Rounded corner HTML elements using CSS3 in all browsers
This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css.

Css3-last-03 in 50 Brilliant CSS3/JavaScript Coding Techniques

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

Css-058 in 50 Brilliant CSS3/JavaScript Coding Techniques

Better Image Preloading with CSS3
Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images.

Css-194 in 50 Brilliant CSS3/JavaScript Coding Techniques

Saying Goodbye to the overflow: hidden Clearing Hack
I’m now saying goodbye to overflow: hidden and the deciding factor for me is CSS3. Specifically box-shadow. At least in the sense that box-shadow was the first property I noticed being negatively impacted by the use of overflow: hidden. Like the positioned child elements mentioned above, box-shadow can get clipped when the parent (or other ancestor) element has overflow applied. And there are several other things to consider as we move forward using more CSS3. Text-shadow and transform can also potentially be clipped by overflow: hidden.

Css-184 in 50 Brilliant CSS3/JavaScript Coding Techniques

General articles about CSS 3

How to bring CSS3 features into your design
Top web browser (such as Firefox 3.5 and Safari 4) have introduce some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.

Css-013 in 50 Brilliant CSS3/JavaScript Coding Techniques

Practical Uses of CSS3
In this article I’ll show you some practical uses for CSS3.

Css-032 in 50 Brilliant CSS3/JavaScript Coding Techniques

11 Classic CSS Techniques Made Simple with CSS3
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

Css-122 in 50 Brilliant CSS3/JavaScript Coding Techniques

Mobile optimised websites using CSS3 Media Queries
A while ago I wrote about using CSS3 Media Queries on my website redesign to provide mobile visitors with an optimised view designed for smaller screens. I thought it might be useful if I went into a bit more detail on how I’m doing this.

Css-023 in 50 Brilliant CSS3/JavaScript Coding Techniques

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

Css3-new-07 in 50 Brilliant CSS3/JavaScript Coding Techniques

Get the best out of CSS3
Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

Css3-last-07 in 50 Brilliant CSS3/JavaScript Coding Techniques

Practical Uses of CSS3
“One big item for me is how much we use CSS3. Yes I know, it is not fully supported across all browsers. If you still want everything to look exactly the same across all browsers, you should probably just close this article and not read about CSS for another 10 years. A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.”

Css3-last-09 in 50 Brilliant CSS3/JavaScript Coding Techniques

A Crash-Course in Advanced CSS3 Effects
This video tutorial reviews a bunch of different neat effects that can be used in Safari 4, Chrome, and for all iPhone development.

Css3-last-10 in 50 Brilliant CSS3/JavaScript Coding Techniques

33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles
An extensive overview of CSS3-techniques, tools, articles and resources.

15
Jan
10

55 Trendy Web Design Interfaces From Deviantart

I kind of got lost a little bit in creating Monthly Deviantart web interface features, but at least I loved to do research and get inspired every month, and since our blog is focused mainly on web design, I am sure you enjoy it as well. Let’s get started, get inspired and watch how trends are slowly changing from month to month.

More and more visually appealing and image heavy websites are being created, and of course we’ve got a reason – days with slow Internet speed are going to past and technologies are evolving every day! Let’s get started – shall we?

1. Art-Label.net Board Skin by DouglasEltz

Art-labelweb-design-interface-inspiration-deviantart

2. Environment information pages bySneakyOne1990

Environment-web-design-interface-inspiration-deviantart

3. Angel by miko434

Angel-web-design-interface-inspiration-deviantart

4. Green Palacy Theme by DouglasEltz

Green-palacy-web-design-interface-inspiration-deviantart

5. InfoShop.com by DouglasEltz

Infoshop-web-design-interface-inspiration-deviantart

6. Idyll Ads by miko434

Idyll-ads-web-design-interface-inspiration-deviantart

7. Mecra by SencerBugrahan

Mecra-web-design-interface-inspiration-deviantart

8. 99studios by dot-next

99studios-web-design-interface-inspiration-deviantart

9. Fenixround by DouglasEltz

Fenix-round-web-design-interface-inspiration-deviantart

10. IT Services Company by inspiredMark

It-services-web-design-interface-inspiration-deviantart

11. Bonsai Collectors 2 by INSEKTart

Bonsai-collectors-web-design-interface-inspiration-deviantart

12. Another Portfolio Layout by simiographics

Portfolio-layout-web-design-interface-inspiration-deviantart

13. EdgeSpan Revolution by deadlinesdesign

Edgespan-studio-web-design-interface-inspiration-deviantart

14. Mocha furniture by gdnz

Mocha-furniture-web-design-interface-inspiration-deviantart

15. 4 Sale Gaming by AndasoloARTS

4sale-web-design-interface-inspiration-deviantart

16. gs.com by akenord

Game-seller-web-design-interface-inspiration-deviantart

17. Caffeteria by Tokumoto

Caffeteria-web-design-interface-inspiration-deviantart

18. OneSize v2 by acidflow

One-size-web-design-interface-inspiration-deviantart

19. KO by trunglq

Ko-web-design-interface-inspiration-deviantart

20. Restaurant Asian Bistro by preet618

Asian-bistro-web-design-interface-inspiration-deviantart

21. Pro web 2.0 portfolio template by jackinnes

Pro-portfolio-web-design-interface-inspiration-deviantart

22. Portfolio by Mac002

Ks-portfolio-web-design-interface-inspiration-deviantart

23. Szpital – FOR SALE by PanthereNoire92

Szpital-web-design-interface-inspiration-deviantart

24. Quality Furnitures by Aqib14

Quality-furnitures-web-design-interface-inspiration-deviantart

25. Lion Design Premium by FluidStudios

Lion-design-web-design-interface-inspiration-deviantart

26. My first attempt at web-design by vrs85

First-attempt-web-design-interface-inspiration-deviantart

27. Luscious by timsilva

Enimac-web-design-interface-inspiration-deviantart

28. Web2.0 Company Portfolio by princepal

Tritus-co-web-design-interface-inspiration-deviantart

29. Santa’s Town by Pilej

Santa-town-web-design-interface-inspiration-deviantart

30. Photographer by arEa50oNe

Photography-web-design-interface-inspiration-deviantart

31. The Web Meeting by miko434

Web-meeting-web-design-interface-inspiration-deviantart

32. Joomla Template Tutor by princepal

Tutor-web-design-interface-inspiration-deviantart

33. Vid by crazyclouds

Vid-web-design-interface-inspiration-deviantart

34. Amazium by sergitosuanez

Amazium-web-design-interface-inspiration-deviantart

35. Counter Strike Evo 2.0 Design by renderworks

Counter-strike-web-design-interface-inspiration-deviantart

36. Kreativo by cheafy14

Kreativo-web-design-interface-inspiration-deviantart

37. Oxid Eshop by Honya

Oxid-shop-web-design-interface-inspiration-deviantart

38. Alexion Home Page by raven9327

Alexion-web-design-interface-inspiration-deviantart

39. Gaming Website by zblowfish

Gaming-sale-talk-web-design-interface-inspiration-deviantart

40. Great Business Template by mabucs

Great-business-web-design-interface-inspiration-deviantart

41. Balai besar 5 website by champchoel

Balai-studio-web-design-interface-inspiration-deviantart

42. Glob-Data-website by desdoc

Glob-data-web-design-interface-inspiration-deviantart

43. Travel Inside by lewkaART

Travel-inside-web-design-interface-inspiration-deviantart

44. RJDesignz by rjoshicool

Rjdesign-web-design-interface-inspiration-deviantart

45. Layout-I Real Estate by whatnameisit

Real-estate-web-design-interface-inspiration-deviantart

46. Gold by aadi-f

Gold-web-design-interface-inspiration-deviantart

47. Cache networks by manujg

Cache-networks-web-design-interface-inspiration-deviantart

48. Expoze Media Webdesign by EXPOZE-MEDIA

Expoze-networks-web-design-interface-inspiration-deviantart

49. Light Design by deadlinesdesign

Light-web-design-interface-inspiration-deviantart

50. Template 19 by nodethirtythree

Template-web-design-interface-inspiration-deviantart

51. Swiat Kwiatow by Pilej

Swiat-web-design-interface-inspiration-deviantart

52. Officina Digitale v3 by Svengraph

Official-web-design-interface-inspiration-deviantart

53. Pure Home by touchdesign

Pure-home-web-design-interface-inspiration-deviantart

54. iClipeo.com by mateuszmadura

Iclippeo-web-design-interface-inspiration-deviantart

55. Folio Layout by inspiredMark

Folio-layout-web-design-interface-inspiration-deviantart




Follow

Get every new post delivered to your Inbox.