Skizzen- und UX/UI-Tools (Figma, Adobe-XD, Zeplin ...)

Welche Werkzeuge werden von Designern verwendet?

Wie arbeiten UX UI Design Experten?

Um diese Frage zu beantworten und Ihnen bei der Auswahl der richtigen Werkzeuge zu helfen, schlagen wir Ihnen einen vollständigen Artikel zu diesem Thema vor.

Zunächst die Definition zwischen UX und UI:

  • UX: User eXperience umfasst Benutzerfreundlichkeit, Interaktion, Layout der Elemente
  • UI: Farben, grafische Details, Aussehen

Hier ist eine bekannte Illustration des Unterschieds zwischen UX/UI


Untersuchung der verfügbaren Werkzeuge

Eine Online-Studie wurde von einem Designer namens Taylor Palmer über Konstruktionswerkzeuge und ihre Verwendung je nach Tätigkeit des Konstrukteurs.

Diese Online-Umfrage unter 2.000 UX-, Produkt- und Web-Design-Profis mit 3 bis 5 Jahren Erfahrung hat diese Erwartungen erfüllt.

Das beste Prototyping-Tool für 2018 ist in dieser Umfrage der Spitzenreiter  Skizze !

Die Ergebnisse zeigen, dass Designer diese Anwendung für ihr Hauptdesign verwenden. In der Tat ist es an erster Stelle für Wireframe und UI-Design vor Photoshop, Illustrator, Adobe XD usw..

Hinweis: Sketch ist nicht auf PC verfügbar! 

Was ist das Skizzenwerkzeug?

Sketch ist ein Grafikdesign-Werkzeug.

Früher musste der Designer ein Wireframe auf einem Prototyping-Tool erstellen und dann kam die Erstellungsphase, um die Elemente in Photoshop nachzubilden.
Im Gegensatz zu Photoshop hat Sketch eine schlankere Oberfläche und verfügt nicht über diese Werkzeugpaletten, die an Ihrem Desktop kleben. Sketch ist ein kollaboratives Tool, das es dem UX-Designer und dem UI-Designer ermöglicht, gemeinsam an diesen Themen weiterzuarbeiten (Dateiaustausch).

Es hat den Vorteil des Speicherns, weil es nativ für MacOS ist. Die Operationen sind nicht-destruktiv: Die Vektortransformationen sind umkehrbar.

Sketch-Plugins verfügbar, um die Nutzung zu erweitern:
https://www.sketchapp.com/extensions/plugins/

Insbesondere ZeplinDas CSS, die Farben, die Abmessungen und andere wichtige Informationen können mit dem gesamten Entwicklerteam geteilt werden.

 

Unsere UX/UI-Werkzeuge bei NeDeviecs

Wir von NetDevices raten jedoch auch in der Regel balsamiq um großartige Wireframes zu erstellen.

Wir haben auch Figma die weitere Vorteile bei der schnellen Navigation zwischen den Bildschirmen bietet ...

Vielleicht finden Sie auch ein starkes Interesse an der Verwendung von Lösungen wie Invision die Stärken in der Bildschirmabfolge und im Workflow hat.

Wenn Sie unsicher sind und mit uns sprechen möchten, zögern Sie nicht, uns zu kontaktieren Kontaktieren Sie uns!

[wpforms id="9980" title="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-9980"><form id="wpforms-form-9980" class="wpforms-validate wpforms-form wpforms-ajax-form" data-formid="9980" method="post" enctype="multipart/form-data" action="/sketch-figma-adobexd-etc/" data-token="2fc59a98beec225aaa51eed87ffc9410"><noscript class="wpforms-error-noscript">Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.</noscript><div class="wpforms-field-container"><div id="wpforms-9980-field_3-container" class="wpforms-field wpforms-field-layout" data-field-id="3"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-9980-field_3">Layout</label><div class="wpforms-field-layout-columns wpforms-field-layout-preset-50-50"><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-9980-field_0">Résumé / Pitch du projet <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-9980-field_0" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-9980-field_16-container" class="wpforms-field wpforms-field-radio wpforms-conditional-trigger" data-field-id="16"><label class="wpforms-field-label" for="wpforms-9980-field_16">J&#039;ai une description détaillée du projet</label><ul id="wpforms-9980-field_16"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_16_1" name="wpforms[fields][16]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_16_2" name="wpforms[fields][16]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_2">Non</label></li></ul></div><div id="wpforms-9980-field_18-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="18" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_18">Vous avez des technos en tête ?</label><ul id="wpforms-9980-field_18"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_18_1" name="wpforms[fields][18][]" value="fullstackJS / python" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_1">fullstackJS / python</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_18_2" name="wpforms[fields][18][]" value="nocode bubble" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_2">nocode bubble</label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_18_3" name="wpforms[fields][18][]" value="autre" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_3">autre</label></li></ul></div><div id="wpforms-9980-field_19-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="19" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_19">Type de projet</label><ul id="wpforms-9980-field_19"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_19_1" name="wpforms[fields][19][]" value="Applications web / mobiles" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_1">Applications web / mobiles</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_19_2" name="wpforms[fields][19][]" value="Projet data, IA " ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_2">Projet data, IA </label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_19_3" name="wpforms[fields][19][]" value="Site vitrine / e-commerce" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_3">Site vitrine / e-commerce</label></li></ul></div><div id="wpforms-9980-field_12-container" class="wpforms-field wpforms-field-textarea wpforms-conditional-field wpforms-conditional-show" data-field-id="12" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_12">Description détaillée de votre projet </label><textarea id="wpforms-9980-field_12" class="wpforms-field-medium" name="wpforms[fields][12]" ></textarea></div></div><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_1-container" class="wpforms-field wpforms-field-email wpforms-one-third" data-field-id="1"><label class="wpforms-field-label" for="wpforms-9980-field_1">Votre e-mail <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-9980-field_1" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-9980-field_17-container" class="wpforms-field wpforms-field-radio" data-field-id="17"><label class="wpforms-field-label" for="wpforms-9980-field_17">Signer un accord de confidentialité ?</label><ul id="wpforms-9980-field_17"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_17_1" name="wpforms[fields][17]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_17_2" name="wpforms[fields][17]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_2">Non</label></li></ul></div></div></div></div></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="9980"><input type="hidden" name="wpforms[author]" value="4"><input type="hidden" name="wpforms[post_id]" value="8776"><button type="submit" name="wpforms[submit]" id="wpforms-submit-9980" class="wpforms-submit" data-alt-text="Envoi..." data-submit-text="Envoyer" aria-live="assertive" value="wpforms-submit">Envoyer</button><img src="https://www.netdevices.fr/wp-content/plugins/wpforms/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Chargement en cours"></div></form></div> <!-- .wpforms-container -->