En este artículo veremos una recopilación de elementos útiles para diseño web. Soy de la opinión de no reinventar la rueda, si hay material online disponible, vale la pena utilizarlo, sobre todo para aquellos que no dominen Photoshop o otros programas de edición de imágenes.
En cualquier caso, es mejor utilizar el tiempo del que disponemos para crear diseños originales y creativos y aprovechar los recursos que tenemos a nuestra disposición. En este artículo encontrarás desde botones web, a campos de búsqueda, procesos de compra online, menús de selección y otros.
Elementos PSD para usar en diseño web
Massive Web UI & Button Set (PSD)
Transparent Glass UI
Web UI Element Pack (PSD)
Modern UI Pack (PSD)
Web UI Wireframe Kit (PSD)
Web UI Treasure Chest v1.0
Colorful web UI elements
Browser Form Elements (PSD)
UI Design Elements
FREEBIES : UI Blue web kit
Snow UI Kit
Dark Mysterious Web Elements
Web Page Elements
Black UI Kit
Twitter Widget Stencil
Web Elements Kit (PSD)
Moonify UI
Blue and White GUI Kit (PSD)
GUIFX Elements Pack “Victor”
Spring GUI
Modern Web UI Set
Design elements
Wraps and Ribbons Pack (PSD)
A Clean Login Box (PSD)
Quick Sign In Form (PSD)
E-Commerce Steps UI
Dark UI Element Set
Espero que os haya gustado la recopilación y, sobre todo, que os sea útil en vuestro trabajo de diseñadores web!
I’m a big believer in not reinventing the wheel when it comes to web design.
If someone has already created something that fits what you need and/or want, and especially if that element is available for free, then why waste your time designing something that turns out virtually identical?
Your time and effort is better spent on creating new and unique parts of your design, while using what’s already available for other parts.
Below are more than 50 free UI element packs from a variety of designers. Buttons, form elements, media players, and similar stock elements are the most popular, though there are other elements included also.
And as a bonus, there are over half a dozen premium element packs at the end. Enjoy!
Free Elements
Soft UI Kit: Free PSD for Mocking Up Web Designs
A set of common web elements for mockups, designed by Adrian Pelletier and provided by Six Revisions.
Transparent Glass UI: Free PSD for User Interface Design
This set of dark UI elements was created by PixelsDaily, and is also provided by Six Revisions.
Freebie: Modern UI Pack Photoshop PSD
A modern, minimalist UI kit with some simple, basic elements.
Freebie: Massive Web UI & Button Set
This web UI kit from MediaLoot includes brightly-colored buttons, info boxes, breadcrumbs, search forms, and many other elements.
Web UI Treasure Chest v1.0
This kit includes over 100 elements for your designs, including banners, buttons, tooltips, badges, and more.
Web Form Elements
A set of gray and gold web form elements, including text areas, buttons, and dropdowns.
Web Form Elements Vol.2
A set of gray web form elements, including sliders, dropdowns, tabs, and more.
Got Wood? UI Design Elements
A kit consisting of more than 100 modern UI elements with a wood-grain look.
Snow UI Kit
This UI kit from MediaLoot has a muted gray color scheme with dark bluish-gray accents.
Dark Mysterious Web Elements
This set of design elements was designed specifically for use with dark and highly-styled sites. It includes search bars, separators, buttons, audio player elements, and more.
Black UI Kit
The Black UI Kit includes glossy, black and blue elements, including plenty of media controls.
Moonify UI
Moonify is a set of UI elements that includes a search bar, rating stars, and some basic form elements.










































Genial, como siempre!
Hola, Disculpa mi ignorancia pero como hago para utilizar las imágenes de los packs
en mi pagina web. He estado buscando pero no se como hacer para maquetar las imágenes para que queden como lo que representan, para que me entiendas mejor como hago un select apartir de estas imágenes?
Gracias ddee ante mano y por cierto muy bueno tu articulo
Primero de todo, tienes que descargar el archivo PSD correspondiente. Una vez retocada la imagen con Photoshop, guardarla en la carpeta de imágenes del sitio web en formato JPG o PNG. A partir de aquí, llamas a la imagen como siempre con HTML y CSS.