<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Archives des UI Design - Ilelli</title>
	<atom:link href="https://ilelli.net/category/ui-design/feed/" rel="self" type="application/rss+xml" />
	<link>https://ilelli.net/category/ui-design/</link>
	<description>Vos projets prennent leur envol</description>
	<lastBuildDate>Mon, 06 Feb 2023 08:11:23 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.3.1</generator>

<image>
	<url>https://ilelli.net/wp-content/uploads/2022/04/cropped-Logo-Ilelli-Couleurs-Icone-RVB-PNG-32x32.png</url>
	<title>Archives des UI Design - Ilelli</title>
	<link>https://ilelli.net/category/ui-design/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Le métier : UI designer</title>
		<link>https://ilelli.net/le-metier-ui-designer/</link>
		
		<dc:creator><![CDATA[webmaster]]></dc:creator>
		<pubDate>Mon, 12 Dec 2022 09:18:00 +0000</pubDate>
				<category><![CDATA[Les métiers du digital]]></category>
		<category><![CDATA[UI Design]]></category>
		<guid isPermaLink="false">https://ilelli.net/?p=595</guid>

					<description><![CDATA[<p><span class="rt-reading-time" style="display: block;"><span class="rt-label rt-prefix">Temps de lecture : </span> <span class="rt-time">2</span> <span class="rt-label rt-postfix">min.</span></span> L’UI designer réalise le design graphique de l’interface, lien entre l’utilisateur et le produit ou service.</p>
<p>L’article <a rel="nofollow" href="https://ilelli.net/le-metier-ui-designer/">Le métier : UI designer</a> est apparu en premier sur <a rel="nofollow" href="https://ilelli.net">Ilelli</a>.</p>
]]></description>
										<content:encoded><![CDATA[<span class="rt-reading-time" style="display: block;"><span class="rt-label rt-prefix">Temps de lecture : </span> <span class="rt-time">2</span> <span class="rt-label rt-postfix">min.</span></span>
<h2 class="has-text-color wp-block-heading" style="color:#067790">La définition </h2>



<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_737cef-b1" class="kt-row-layout-inner kt-layout-id_737cef-b1"><div class="kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row">
<div class="wp-block-kadence-column inner-column-1 kadence-column_9ffcf9-58"><div class="kt-inside-inner-col">
<p>Notre dernier article vous présentait le <a href="https://ilelli.net/le-metier-ux-designer/" target="_blank" rel="noreferrer noopener">métier d’UX designer</a>. Aujourd’hui, nous verrons la différence avec l’<strong>UI designer</strong>.&nbsp;Commençons par une courte définition :&nbsp;</p>



<blockquote class="wp-block-quote">
<p>L’UI designer réalise le design graphique de l’interface, lien entre l’utilisateur et le produit ou service. Il se charge de toutes les étapes du design graphique, du <strong>brief </strong>à la livraison de la <strong>charte graphique</strong> en passant par les <strong>pistes graphiques</strong>, <strong>maquettes</strong> et <strong>déclinaison d’écrans</strong>. Son travail consiste à organiser les éléments visuels de manière à produire un contenu <strong>esthétique</strong> et <strong>fonctionnel</strong>.</p>
<cite>Source : usabilis.com</cite></blockquote>



<p>Il est plus que commun de voir le titre<strong> UX/UI designer</strong> sur les offres d’emploi notamment. Il y a entre ces deux métiers, pourtant, une distinction à faire. Nous vous laissons visionner, au travers de la vidéo ci-dessous, la différence entre <strong>l’UX et l’UI design</strong> :</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Quelles sont les différences entre l&#039;UX et l&#039;UI Design ?  Le Laptop" width="1170" height="658" src="https://www.youtube.com/embed/ztNC-c_hrV0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<p></p>



<p>On terminera cette définition, avec une vidéo portrait d’une <strong>UI designer</strong>, réalisée par la <a href="https://www.youtube.com/@pool5448" target="_blank" rel="noreferrer noopener">chaîne Pool</a> qui propose de nombreuses vidéos sur différents métiers, dont ceux du <strong>digital </strong>:</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="DESIGNER UI (USER INTERFACE) : quotidien, salaire, parcours | Pool" width="1170" height="658" src="https://www.youtube.com/embed/4ga0JcMFBj4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>
</div></div>
</div></div></div>



<div class="wp-block-kadence-spacer aligncenter kt-block-spacer-_3d6e25-72"><div class="kt-block-spacer kt-block-spacer-halign-center"></div></div>



<h2 class="has-text-color wp-block-heading" style="color:#067790">Les missions d&#8217;un UI designer</h2>



<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_7892d3-0a" class="kt-row-layout-inner kt-layout-id_7892d3-0a"><div class="kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row">
<div class="wp-block-kadence-column inner-column-1 kadence-column_490827-fc"><div class="kt-inside-inner-col">
<p>Les <strong>missions de l’UI designer</strong> se concentre essentiellement sur <strong>l’interface </strong>et son <strong>ergonomie </strong>:&nbsp;</p>



<ul>
<li>Il crée et améliore <strong>l’interface utilisateur</strong> pour répondre à leurs besoins.</li>



<li>Il est en charge de la <strong>navigation </strong>qui doit se faire de façon logique.</li>



<li>Il doit implémenter la <strong>charte graphique</strong> de son client dans son design.&nbsp;</li>



<li>Il apporte son expertise pour ajuster l’ensemble de ses éléments dans une <strong>interface pertinente</strong> et <strong>agréable</strong>.</li>
</ul>



<p>L’<strong>UI designer</strong> travaille main dans la main avec l’<strong>UX designer</strong>, pour cela, il doit toujours prendre en compte différents éléments inhérents au projet :</p>



<ul>
<li>Le contexte et les <strong>enjeux </strong>du projet,</li>



<li>Les <strong>utilisateurs</strong>, leurs parcours et leurs besoins,</li>



<li>Les<strong> tests utilisateurs</strong> et leurs retours pour adapter son travail. &nbsp;
<ul>
<li></li>
</ul>
</li>
</ul>
</div></div>
</div></div></div>



<p>Résumons tout cela grâce à cette courte vidéo : </p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="L&#039;UI Design, c&#039;est quoi ? (définition, aide, lexique, tuto, explication)" width="1170" height="658" src="https://www.youtube.com/embed/UIIUcSu8OVo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<div class="wp-block-kadence-spacer aligncenter kt-block-spacer-_dc4ff9-ab"><div class="kt-block-spacer kt-block-spacer-halign-center"></div></div>



<h2 class="has-text-color wp-block-heading" style="color:#067790">Les outils</h2>



<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_9e606c-e5" class="kt-row-layout-inner kt-layout-id_9e606c-e5"><div class="kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row">
<div class="wp-block-kadence-column inner-column-1 kadence-column_a1c33f-6f"><div class="kt-inside-inner-col">
<p>Il existe sur le marché de nombreux outils de <strong>conception d’interfaces</strong>. Que ce soit pour du <strong>wireframes</strong>, du <strong>prototyping </strong>ou encore du <strong>collaboratif</strong>, vous trouverez ci-dessous les outils utilisés chez Ilelli par notre <strong>UI designer</strong>.</p>



<ol start="1">
<li>Un crayon papier et un carnet : La première étape, poser son idée sur du papier.</li>



<li><a target="_blank" href="https://www.figma.com/fr" rel="noreferrer noopener">Figma </a>: La seconde étape, retranscrire en wireframe et prototype interactif.</li>



<li><a target="_blank" href="https://www.figma.com/fr/figjam/" rel="noreferrer noopener">Figjam</a> : si on a besoin de travailler en collaboration pour construire un workflow par exemple.</li>



<li><a target="_blank" href="https://zeroheight.com/" rel="noreferrer noopener">Zeroheight </a>: pour documenter son design system.</li>



<li>La<a target="_blank" href="https://www.adobe.com/fr/creativecloud.html?gclid=Cj0KCQiA1sucBhDgARIsAFoytUswNumSC-6Rj4q_gcNzJnHtTqRKDSZzO7W5WUKwfGTS9HycXzLYTS8aAt1yEALw_wcB&amp;mv=search&amp;mv=search&amp;sdid=K42KVTW8&amp;ef_id=Cj0KCQiA1sucBhDgARIsAFoytUswNumSC-6Rj4q_gcNzJnHtTqRKDSZzO7W5WUKwfGTS9HycXzLYTS8aAt1yEALw_wcB:G:s&amp;s_kwcid=AL!3085!3!600183576440!e!!g!!adobe!1435912500!56537399459" rel="noreferrer noopener"> suite Adobe</a> : d’Illustrator à Photoshop en passant par Premiere, l’UI designer doit disposer des connaissances de bases en retouches d’images et montage vidéo.</li>



<li>HTML, CSS et un peu de JS ! Et oui, il doit pouvoir communiquer avec ses collègues développeurs.</li>
</ol>
</div></div>
</div></div></div>



<div class="wp-block-kadence-spacer aligncenter kt-block-spacer-_381f6c-13"><div class="kt-block-spacer kt-block-spacer-halign-center"></div></div>



<h2 class="has-text-color wp-block-heading" style="color:#067790">En savoir plus</h2>



<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_cacdf1-ad" class="kt-row-layout-inner kt-layout-id_cacdf1-ad"><div class="kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row">
<div class="wp-block-kadence-column inner-column-1 kadence-column_f9d864-b3"><div class="kt-inside-inner-col">
<p>On vous laisse une liste de quelques ressources ci-dessous si vous souhaitez en savoir plus. Parce que l’on sait que c’est difficile de décrire un métier aussi passionnant que l’<strong>UI design</strong> en seulement quelques lignes. Le dernier mot pour la fin, n’oubliez pas que Google est votre ami !</p>



<div class="wp-block-kadence-spacer aligncenter kt-block-spacer-_e3a125-98"><div class="kt-block-spacer kt-block-spacer-halign-center"><hr class="kt-divider"/></div></div>



<p><strong>Articles :&nbsp;</strong></p>



<p>Devenir UI designer : </p>



<p><a href="https://www.studi.com/fr/metier/ui-designer" target="_blank" rel="noreferrer noopener">https://www.studi.com/fr/metier/ui-designer</a></p>



<p>Trouver l’inspiration : </p>



<p><a href="https://medium.com/@romaindao/ui-design-o%C3%B9-trouver-linspiration-417cd81cf68e" target="_blank" rel="noreferrer noopener">https://medium.com/@romaindao/ui-design-o%C3%B9-trouver-linspiration-417cd81cf68e</a></p>



<p>9 conseils pour améliorer ses compétences en UI : </p>



<p><a href="https://medium.com/user-experience-design-1/9-simple-tips-to-improve-your-ui-designs-fast-377c5113ac82" target="_blank" rel="noreferrer noopener">https://medium.com/user-experience-design-1/9-simple-tips-to-improve-your-ui-designs-fast-377c5113ac82</a></p>



<p>Construire un design system : </p>



<p><a href="https://medium.com/@emiliegarnier/comment-construire-un-design-system-adapt%C3%A9-%C3%A0-votre-produit-638f617695db" target="_blank" rel="noreferrer noopener">https://medium.com/@emiliegarnier/comment-construire-un-design-system-adapt%C3%A9-%C3%A0-votre-produit-638f617695db</a></p>



<p></p>



<p></p>



<div class="wp-block-kadence-spacer aligncenter kt-block-spacer-_f52e85-2d"><div class="kt-block-spacer kt-block-spacer-halign-center"><hr class="kt-divider"/></div></div>



<p><strong>Sites :</strong></p>



<p>La chaîne YouTube de Basti UI : </p>



<p><a href="https://www.youtube.com/channel/UCnnIP34CpT7nIBZS5KuuhbA" target="_blank" rel="noreferrer noopener">https://www.youtube.com/channel/UCnnIP34CpT7nIBZS5KuuhbA</a></p>



<p>The cacatoès Theory le site fait pour des designers :&nbsp;</p>



<p><a href="https://www.thecacatoestheory.com/" target="_blank" rel="noreferrer noopener">https://www.thecacatoestheory.com/</a></p>



<div class="wp-block-kadence-spacer aligncenter kt-block-spacer-_5ea50d-25"><div class="kt-block-spacer kt-block-spacer-halign-center"><hr class="kt-divider"/></div></div>



<p><strong>Autres ressources :</strong></p>



<p>Un site qui recensent de nombreuses ressources UI : </p>



<p><a href="https://uigoodies.com/" target="_blank" rel="noreferrer noopener">https://uigoodies.com/</a></p>



<p>En manque d’inspiration :</p>



<p><a href="https://dribbble.com/shots" target="_blank" rel="noreferrer noopener">https://dribbble.com/</a></p>



<p>On en reprendra encore un peu :</p>



<p><a href="https://www.behance.net/" target="_blank" rel="noreferrer noopener">https://www.behance.net/</a></p>



<p>La toolbox d’une graphiste :&nbsp;</p>



<p><a href="https://www.neographefactory.com/toolbox.html" target="_blank" rel="noreferrer noopener">https://www.neographefactory.com/toolbox.html</a></p>
</div></div>
</div></div></div>
<p>L’article <a rel="nofollow" href="https://ilelli.net/le-metier-ui-designer/">Le métier : UI designer</a> est apparu en premier sur <a rel="nofollow" href="https://ilelli.net">Ilelli</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
