Diseño web

Menu 
¡pasión por el diseño web!

Recursos de Diseño Web para Mejorar la Experiencia de Usuario.

Publicado por el 8/08/2011. Categoría: Recursos

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!

29 Jul

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.

 

Blue and White GUI Kit

Si te ha gustado este artículo, compártelo en las redes sociales. ¡Suscríbete al feed RSS!
Sandra Guerrero Sanmarti
Apasionada del diseño web bien hecho. Consultora y formadora en diseño web.
Sandra Guerrero Sanmarti

@creativasfera

Tutoriales y artículos didácticos en las áreas de diseño web, UI/UX, marketing online, SEO, WordPress, el mundo freelance y mucho más.
@twago_espana puedo tener el perfil en varios idiomas? Me quiero dirigir al público alemán en este idioma.. gracias! - 59 mins ago
Sandra Guerrero Sanmarti

3 Respuestas a “Recursos de Diseño Web para Mejorar la Experiencia de Usuario”

  1. Carlos Doral dice:

    Genial, como siempre!

  2. Adrian Manjarrez dice:

    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.

Deja un comentario