Elements UI simples mais indispensables pour réaliser tous vos wireframes

28 avril 2011

Lorsque l’on est Ergonome / UX / Designer d’interface ou autres, il est toujours intéressant d’avoir plusieurs éléments et composants ui (user interface) sous la main. En voici une petite liste :

freebie_modern_web_ui_set

Freebie: Modern Web UI Set

Des éléments soignés pour créer une interface utilisateur moderne et originale. Aussi bien utilisable pour du webdesign, des applications mobiles ou du print.  3 effets sont disponibles : Glitter / Shine / Black&white

FORMAT FICHIER : PNG / PSD

————————————————————————————————————————————————

 

design_elements_by_plakkert

Design element

De très jolis composants utilisables en webdesign et entièrement modifiables. Chaque élément est séparé par un calque.

FORMAT FICHIER : PSD

————————————————————————————————————————————————

NEAT UI

Tous les éléments présents ici sont organisés par thème pour un gain de temps conséquent. De plus, chaque forme est entièrement vectorielle et redimenssionnable. En tout, près de 25 composants pour application web comprenant pas moins de 900 formes.

FORMAT FICHIER : AI /CDR / EPS / PDF / PNG (pour chaque élément)

————————————————————————————————————————————————

simple ui elements previews pour wireframe

Simple UI Elements

Simple UI Elements est un fichier PSD  bien organisé contenant des éléments d’interface utilisateur pour la conception web et application mobile.

FORMAT FICHIER : PDF

————————————————————————————————————————————————

freebie massive web ui button set

Massive Web UI & Button Set

Cet ensemble contient des éléments d’interface utilisateur en trois styles distincts: brillant, satiné et coloré. Le satin  est disponible en 7 couleurs différentes. Ce fichier propose des boutons de contrôle, des flèches et symboles de base, des boîtes d’informations, du texte, des breadcrumbs, des listes déroulantes, des boîtes pliantes, des bulles, des formulaires de recherche, des éléments de chargement et autres éléments de navigation.

FORMAT FICHIER : PSD

 

————————————————————————————————————————————————

Free Sketching & Wireframing Kit

Ce kit se compose d’éléments de formulaire, des icônes, des indicateurs, des messages de rétroaction, des info-bulles, des éléments de navigation, des espaces réservés pour les images, des lecteurs vidéos intégrés, des curseurs et des bannières de publicité communes. Le kit est disponible en deux formats vectoriels, un pour Adobe Illustrator et l’autre en SVG, qui peut être facilement modifié. Il peut également être téléchargé en format PDF et EPS.

FORMAT FICHIER : EPS / PDF / AI / SVG

————————————————————————————————————————————————

 

Sleek Video Player

Sleek Video Player est un fichier PSD avec 3 styles d’interfaces.

FORMAT FICHIER : PSD

————————————————————————————————————————————————

Apple Styled UI Elements

Apple Styled UI Elements

De quoi « appeliser » vos maquettes ou vos wireframes

FORMAT FICHIER : PSD

————————————————————————————————————————————————

Light UI PSD

 

Light UI PSD

Des éléments UI graphiques et soignés.

FORMAT FICHIER : PSD

————————————————————————————————————————————————

AutoSuggest Form Fields

AutoSuggest Form Fields

Un ensemble de champs de formulaire avec liste déroulante super sympa pour les recherches suggérées.

FORMAT FICHIER : PSD

————————————————————————————————————————————————

 

Keynote Wireframe templates V1.1

Keynote Wireframe Templates V1.1

Pour les détenteurs d’un mac (apple), il est également utile d’avoir dans sa bibliothèque cette palette keynote qui agrémentera vos présentations et illustrera vos conceptions web. Il est également possible d’ajouter des liens hypertextes pour rendre l’interface entièrement cliquable. Chacun de ces éléments UI sont modifiables et personnalisables (aucun outil supplémentaires n’est nécessaire)

FORMAT FICHIER : pour logiciel Apple Keynote

————————————————————————————————————————————————

Web Kit Interface Layout Pack (.psd  .png)

Web Kit Interface Layout Pack (.psd .png)

Cette autre planche pour conception d’interface web est livrée avec six couleurs différentes : gris, violet, bleu, rouge, vert, jaune. A vous de faire votre choix. A noter également que chaque plaquette est disponible en psd et png.

FORMAT FICHIER : PSD / PNG

————————————————————————————————————————————————

 

Small GUI Pack wireframe

Small GUI Pack

Un kit comprenant quelques éléments sombres et très soignés graphiquement pour créer vos interfaces.

FORMAT FICHIER : AI / PSD / PNG

————————————————————————————————————————————————

SimpleWireFrame

La capture d’écran n’est pas forcément à son avantage mais cette palette d’éléments ui est très variée et donc indispensable :)

FORMAT FICHIER: gstencil (omnigraffle pour mac osx)

————————————————————————————————————————————————

 

free-web-ui-wireframe-kit

Free Web UI Wireframe Kit

Ce kit graphique pour le logiciel photoshop est composé de diverses formes converties en SmartObjects (et donc complètement modifiables, évoluables etc…).

FORMAT FICHIER : PSD

————————————————————————————————————————————————

wireframe flex - free ui - omnigraffle

Flex Stencil Kit

Comprend une grande partie des composants Flex : tableaux, grilles de données, boutons, champs vides, liens, menu, accordéon, onglets, liste, gestion des erreurs…

FORMAT FICHIER : gstencil (omnigraffle pour mac osx)

————————————————————————————————————————————————

wireframe-symbols

Wireframe Symbols

Une bibliothèque de symboles vectoriels (illustrator) pour construire votre wireframe, le tout réparti sur une planche. Pour installer tous les éléments, il vous suffit de glisser-déposer le ficher nommé Symbols.ai dans le dossier « symbols » d’illustrator. Une fois illustrator ouvert, sélectionnez la palette symbole puis charger la bibliothèque.

FORMAT FICHIER : AI

——————————————————————————————————–

omnigraffle-wireframe-stencils

OmniGraffle Wireframe Stencils

Il s’agit ici d’un ensemble de formes pour la conception de joli wireframe sous omnigraffle.

FORMAT FICHIER : gstencil (version 5.x OmniGraffle (Mac OS X).

————————————————————————————————————————————————

Free UI Element Kits and Stencils for a perfect web template design

Wireframe Magnets (DIY Kit)

Toujours pour Omnigraffle voici une liste d’éléments assez simple et sobre mais particulièrement utile. Une petite astuce aussi : télécharger et imprimer les fichiers PDF sur des feuilles aimant, découpez-les, amusez vous sur un tableau aimanté à modifier vos pages comme bon vous semble.

FORMAT FICHIER : gstencil (version 5.x OmniGraffle (Mac OS X).

————————————————————————————————————————————————

D’autres éléments disponibles sur :

http://speckyboy.com/2011/04/11/50-free-psd-ui-kits-and-templates-for-web-designers/

http://365psd.com/