Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘UI’

When designing a website, if you don't prefer to create everything from scratch, having ready-to-use design elements simplify the process so much.

Besides the ease they offer, such high-quality elements also beautifies the websites being created.

If you are looking for such UI sets, DesignModo is probably the best place to find them as they have a bunch of professionaly-built PSD UI packs.

These packs are all full-layered PSD and includes lots of design elements from buttons to menus, sliders, navigation solutions, pricing tables, charts, icons and much more. And, all having free versions.

Let's take a closer look at the options:

Impressionist UI

Impressionist UI

Impressionist UI is the world’s biggest user interface elements pack with 300 elements, 5 styles and all being created PSD shapes.

It has almost every element we can think of and also comes with a 200 icons (both PSD & AI).

And, you can get a taste of this huge set with Impressionist UI Free.

Futurico UI Pro

Futurico UI Pro

With 200+ elements, all being rasterized PSD layers

There are 2 sets of elements in different colors and two examples of use in web design.

Make sure you also check its free version: Futurico.

Pandora UI for iOS

Pandora UI For iOS

Pandora UI for iOS comes with lots of elements (completely focused on mobile interfaces), 5 skins and sample apps for helping mobile developers create good looking apps.

It targets iOS developers, the pack has support for retina display and all elements can be infinitely scaled as they are all Photoshop shapes.

And, as usual, here id the Pandora Free.

Dark Amber UI

Dark Amber UI

This is a relatively smaller (yet still big) UI kit which is focused on both web and mobile interfaces.

It has ~60 elements, all have retina display support

And, every Dark Amber UI purchase is bundled with the popular Unicons icon set.

Backbone.Notifier is a powerful and flexible framework for displaying and controlling UI notifications.

It is built on top of jQuery, Backbone.js + Underscore.js and has many cool features like a 3D module or animations support.

Bacbone.Notifier

The notifications can be displayed on the top or in the middle, modal notifications exist and it is possible to set custom styles via CSS + JS API.

Messages can be timed to be shown or hidden as wished, an integrated loader exists and there are pre-defined styles: default, info, error, warning and success.

Mobello is an open source JavaScript UI framework that simplifies developing mobile web apps.

The framework aims to provide a native-like experience in mobile, it is optimized for touch events and has 20+ widely-used UI components.

Mobello Mobile Framework

It also has an IDE, named Mobello Studio, that focuses on building mobile apps with HTML5, CS3 and the Mobello framework..

Mobello Studio has a drag 'n' drop enabled  visual design editor, a JavaScript debugger and built-in mobile device emulator.

The API of the framework is documented in detail and it can be a good alternative to other popular ones if improved regularly.

Gumby is a responsive and 960px-grid CSS grid framework that can be customized to work in every resolution with almost no effort.

Its fluid-fixed layout self-optimizes the content for desktop, tablet and mobile resolutions and there is support for nested grids.

Gumby CSS Framework

Similar to Twitter Bootstrap, it includes a web UI Kit of good looking buttons, forms, navigation + tabs and a tiny JavaScript file that brings these components to life.

Gumby has multiple versions to download: 12 columns, 16 columns, a hybrid one or an all-in-one package. And, there are PSD files provided to ease designing with the grid.

The framework is very well-documented, has demos for all of its features and totally free to use.

DesignModo, a website providing informative design, development + art-oriented articles and releasing design resources, is giving away 3 Personal Licenses of Impressionist UI (details on joining the giveaway can be found at the bottom of this post).

What is Impressionist UI?

Impressionist UI

It is a huge pack of user interface elements with over 300 elements for web design and includes almost any design element we can imagine.

The pack comes as a .PSD file where each element inside is created as a Photoshop shape (they can be resized to any size).

There are edit boxes, tabs, buttons, notification windows, menus, windows, backgrounds, graphics, sliders, informational blocks and much more in it.

Web elements are not the only stuff in Impressionist UI but there is also a slick set of 200 icons accompanying them. The items in the set are well-chosen and will fit perfectly to any web project.

Impressionist UI Preview

What is it good for?

Such a giant user interface set is a very handy resource for quickly creating good looking, consistent interfaces.

As each element is a layer, we can easily prepare high-quality prototypes, customize colors (if needed) and get going fast.

DesignModo offers other UI packs too:

The UI packs DesignModo offer are not limited to Impressionist UI and there are others as well.

For example, Pandora UI is another UI pack created specially for iOS interface designers.

How to join the giveaway?

DesignModo is giving away 3 Personal Licenses ($39/each) of Impressionist UI to WRD readers.

If you want to join the giveaway, you can choose one of the methods below or do both to increase your chances:

Winners will be selected randomly on 30 April 2012 (1 week later). Good luck to all.

P.S. You can also follow DesignModo both on Twitter and Facebook to get notified about the updates on these UI packs and any new ones.

The winners

Here they are:

  • Ben (comment #568279)
  • Flavio (comment #566940)
  • @vitorneves

Congratulations to the winners and thanks to everyone for joining.

Chico UI is an open source and free set of user interface components to ease developing with jQuery.

The components include auto-complete, blink, calendar, carousel, countdown, date-picker, dropdown, expando, form and more.

There is a CSS layout framework named Chico Mesh for accomplishing any type of web layouts and grids.

Chico UI

Also, a CSS library exists for styling HTML and UI elements like lists, tables, buttons, typography, pagination.etc..

Each Chico UI resource is well-documented + supported with demos and various tutorials exist for more details.

Wink Toolkit is a JavaScript framework for creating mobile web applications with less-hassle.

It comes in multiple parts where the "core" (which includes HTTP requests utilities, event management system or DOM extensions) is a must to use and every other feature is optional.

Such a structure helps keeping the filesize minimum which is pretty important when it is mobile.

Wink Toolkit

The UI widgets of the framework is very rich and consists of 3D wall, accordion, sliding panels, flip page, coverflow, progress bar and much more.

There are also libraries for a slick user experience with drag 'n' drop, gesture recognizer or browser history.

Wink Toolkit is a project of Dojo Foundation and also expected to be a part of the Dojo Mobile.

Ember, a service for sharing screenshots, illustrations, etc. with the world, has a well-categorized library of screenshots for getting inspired.

The categories include graphic, web and UI design with sub-categories like typography, web apps., iphone apps., sign-up forms and more.

Ember Categories

It is not a pattern library and doesn't discuss the methodology of each category but shares beautiful, well-picked screenshots which is great when searching for inspiration on a specific subject/module.

Once logged in (there are free and paid plans), you can add designs to your favorites, comment to them or upload new ones.

  • Tags:
  • Filed under: Design, Inspiration, No License
  • 1 Comment
  • Alloy UI is a JavaScript UI library, a CSS framework, a set of HTML recipes and a taglib library, all combined to empower developers across multi-skilled teams deliver rich and dynamic applications.

    It is built by the developers of Liferay, has a lot of ready-to-use components & requires Yahoo! User Interface Library to run.

    Alloy UI

    The components include:

    • auto-complete
    • charts
    • color picker
    • calendar
    • tooltips
    • forms
    • treeview
    • image gallery
    • & much more..

    The framework comes with full set of demos & not documented yet (currently in a preview release).

    Uki is a simple JavaScript user interface toolkit for creating desktop-like web applications with few lines of code.

    The toolkit is fast. It uses progressive rendering, can render 30k+ lists & tables very quickly (which would normally take minutes in IE).

    UKI: JavaScript UI Toolkit

    It doesn't offer a complete JavaScript framework. Rather, Uki is totally focused on the layout and, if wanted, can be used with any JS framework.

    Uki comes with a rich view-component library ranging from slider to list and splitpane (more is on the way like tree, grid views).

    The toolkit works cross-browser & presents a demo for creating the Google Wave interface with 100 lines of code.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com