8 ressources icons gratuit pour vos prototypes

Lorsque nous réalisons nos prototypes, nous sommes souvent à la recherche de nouveau picto ou nous utilisons des icons comme Icon Matérial design voir même des fonts comme Awesome.

Aujourd’hui, j’avais envie de vous partager quelques kit d’icons gratuit pour vos futurs prototypes.

8 kit icons gratuit pour UI Designer

 

Material Design Icons 2.0

J’utilise beaucoup Material Design Icons 2.0, c’est une banque d’icon très complète disponible en SVG, utilisant Adobe XD c’est idéal pour la création de prototype.

La seconde raison pour lequel j’utilise ces icons, c’est qu’ils sont faciles à installer et à intégrer.

 

 

Dites moi en commentaire les banques d’icons que vous utilisez. C’est toujours agréable de partager ses ressources et ses méthodes de travail.

Prochainement, je vais sortir un nouveau format de publication et de contenu, pour avoir les contenus en avant-première, n’hésitez pas à vous inscrire à la newsletter !

5 UI kits pour la réalisation de vos futurs interface

Ils sont utiles dans le processus de production d’un site internet ou d’une interface graphique, les kits en PSD, Sketch ou Adobe XD, l’utilisation d’un UI kit vous permet d’avoir une certaine diversité d’éléments graphique comme des boutons, formulaires, icons pour créer des interfaces rapidement.

Les ressources s’inspirent des dernières tendances avec le material design ou les interfaces similaires.

Je vous ai sélectionné une série de 5 UI kits avec des ressources de qualités pour vos prochaines réalisations.

 

5 UI kit gratuit pour vos sites web

 

Material kit

Material design UI kit

Cinema kit

Cinema UI kit

Ecommerce UI kit

Ecommerce UI kit

Free UI kit

ui kit gratuit

Social kit gratuit

KIt gratuit UISource

La création de kit est la première étape dans la création d’un site internet ou d’une application. Le kit a pour objectif de créer un design fonctionnel. Matérialisé par une maquette réalisée sous Photoshop, ou un logiciel de prototypage.

L’UI kit comprend des éléments graphiques indépendants ainsi que certains éléments textes du site. Cela permet de définir chaque élément graphique utilisé sur l’application ou site web.

5 mockups device gratuit pour UX designer

Hey salut à toutes et à tous, cela faisait longtemps que je n’avais pas réalisé d’article sur mon blog, je m’en excuse d’avance, je suis sur un gros projet en ce moment avec une entreprise innovante.

Le mockup est un outil idéal pour illustrer vos interfaces auprès de clients ou même au sein de votre entreprise lors de présentation.

Du coup, pour me faire pardonner, je vous partage 5 mockups gratuits. Idéal pour illustrer votre interface dans un environnement réel et ainsi permettre au client de se projeter avec votre site ou application.

1 – The Desk Template

Mockup apple, ecran et téléphone portable

Un ensemble de maquettes photographiques apple, incluant un iMac, un iPad et un iPhone.

2 – iPhone 7 Psd

iphone7 free mockups - 5 mockups device gratuit pour UX designer

Mockup gratuit classique d’un Iphone 7, source photoshop .psd. Un mockup de qualité qui vous

 

3 – Mockup Apple Watch

free applewatch mockup psd 1000x683 697x476 - 5 mockups device gratuit pour UX designer

2000 x 1334 px format PSD

Besoin d’un mockup de l’apple watch ? Voici un mockup idéal pour la présentation de votre application !

4 – Mockup photo DSLR Camera

dslr camera mockup 635x476 - 5 mockups device gratuit pour UX designer

Découvrez ce superbe mockup gratuit, pour présenter votre photo. Cette maquette de caméra est gratuite est conçue dans le format de fichier PSD.

5 – Tablet / iPad Mock-Up

iPad mockup 1 632x476 - 5 mockups device gratuit pour UX designer

Mockup iPad, créé pour vous aidez à afficher vos projets de manière réaliste. Cette maquette est tout ce dont vous avez besoin pour obtenir d’excellents résultats.

 

Pour terminé, voici le lien d’un site qui regroupe des centaines de mockups différents. https://www.mockupworld.co/

Inspiration UX design – Food site

Pour cette fin d’année 2016 et avec les fêtes de fin d’année, rien de mieux que de parler de nourriture ou plus exactement, mon inspiration du moment pour la conception d’un site e-commerce autour de la gastronomie française en livraison à domicile. Voici une compilation pour votre inspiration ux design.

Mon client souhaite accroitre la vente de ces plats à domicile avec un site e-commerce totalement administrable, il souhaite axer son site avec le meilleurs parcours client possible.

Inspiration autour du parcours client

Avant toute réalisation graphique, il est important de réaliser un site maps pour établir le parcours client idéal. En plus d’avoir une vue global sur la totalité du parcours de votre utilisateur, il vous permettra d’ajouter les emails transactionnel.

J’ajoute systématiquement les emails transactionnel au site maps, pour avoir une vue d’ensemble sur la parcours client, mais aussi sur les interactions d’aura le client avec notre site.

site maps parcours clientSource : Behance

Inspiration UI / UX design

Voici quelques images qui ont inspiré la conception du site mobile et desktop.

a8fd1b30774141.564d7fa8e5393 - Inspiration UX design - Food site

Source : Behance

bakery website 1x - Inspiration UX design - Food site

Source : Dribbble

screen shot 2014 01 05 at 5.11.09 pm - Inspiration UX design - Food site

Source : Dribbble

food site - Inspiration UX design - Food site

Source : Dribbble

dribbble nojmov 800x600 site - Inspiration UX design - Food site

Source : Dribbble

Petit bonus : les icons

dbx icons 2 18 - Inspiration UX design - Food site

Source : Dribbble

evernote food cuisine icons - Inspiration UX design - Food site

Source : Dribbble

6 idées d’animations pour Search Box

La recherche est au cœur des efforts en ligne. Avec l’utilisation des animations, il est maintenant possible d’améliorer l’expérience utilisateurs et d’ajouter plus de fonctions à l’icône de recherche qui peut révolutionner la Search Box.

Les principales caractéristiques d’une expérience de recherche personnalisées comprennent les filtres de recherche, ce qui nous permet d’obtenir des résultats plus précis.

6 exemples d’animations de barre de recherche

Animated  Form by Bryan (@Blackmagyk) on CodePen.

See the Pen Create CSS3 Animated  Box by wpaesthetic (@wpaesthetic) on CodePen.

DailyUI #022 – Search by Fabio Ottaviani (@supah) on CodePen.

See the Pen Animated  Form by Kyle (@kalwyn) on CodePen.

Recherche Bar animation by Daiinel (@Daiinel) on CodePen.

See the Pen  Input animation by Nikolay Talanov (@suez) on CodePen.

Sources