Prototyping-tools

Voor wie : 

Ux/Ui-ontwerpers.

Pourquoi?

• Ontwerp de componenten.
• Deel componentbibliotheken.
• Werk samen.

# 1 Figma

plus:

Figma combineert alle functies van Sketch, Invision en Zeplin: ontwerpen, presenteren, prototypen en code-inspectie, allemaal in één programma.

• live samenwerkend delen.
• ingeschakelde en uitgeschakelde gedeelde bibliotheken.
• opmerkingen over de werkruimte.
• eenvoudige wijziging en ophalen van componenten / trapsgewijze styling.

De prijs:

• Gratis 2 editors & 3 projecten.
• DS Libraries $ 12/maand/gebruiker.

Compatibiliteit van platformen voor het delen van systemen ontwerpen:

• Nul hoogte

Beoordeling: 4 sterren / 4

#2 Schets 

plus:

• Tool die het meest wordt gebruikt door de Ux-gemeenschap > compatibel met vele andere tools (thema-editor voor plug-inmateriaal +++).
• Native gedeelde bibliotheken (aangepast aan de DS).
• Duidelijke paginascheiding van symbolen.
• Veel zeplin / marvel / materiaal thema-editor plug-in eerder.
• Cloudoptie voor samenwerkend werk.
• Bewerkbare stijl.

De nadelen :

• Beheer van gecompliceerde typografische stijlen.
• Hij bleef iets achter op Figma (pas op, de race is nog niet voorbij!).

De prijs:

• $ 9 per gebruiker.
• Cloud inbegrepen in de Sketch-licentie.

Compatibiliteit van platformen voor het delen van systemen ontwerpen:

• Invisie DSM
• Nulhoogte 

Beoordeling: 3,5 van de 4 sterren

#3Adobe XD

plus:

• Collaboratieve werkwolk.
• Jira/zeplin/teams-plug-in.
• Ontwikkelen hulpmiddel.
• Component herhalen/statusraster.

nadelen:

• Geen mogelijkheid om meerdere pagina's te ondersteunen.
• Geen stijlkopie.
• Nog niet zo goed als Figma en nog in bèta.

De prijs:

• Gratis te prototypen.
• Voor DS €11,99/maand/gebruiker.

Compatibiliteit van platformen voor het delen van systemen ontwerpen:

• DSM toollab-plug-in (bèta).
• Nulhoogte

Beoordeling: 2 van de 4 sterren

deelplatforms van componenten

Voor wie :  

De UX-designers, front-end ontwikkelaars en het hele team.

Pourquoi?

Voorzie ontwikkelaars van de componenten, beheer de versiebeheer en geef het team alle documentatie van het ontwerpsysteem.

Verplicht

Het platform moet versiebeheer beheren.

#1 Nul hoogte

De extra's:

Toegankelijke tool voor ontwerpers.

Bekijk per onderdeel.

Visualisatie van een eenvoudig te documenteren online stijlgids.

Gekoppeld aan de gedeelde bibliotheken Sketch, Figma of XD.

Versiegeschiedenis voor elk onderdeel.

nadelen:

Geen opmerkingen mogelijk.

Geen plug-in voor native ontwikkelaars.

De prijs: 

45€ / maand / gebruiker

Verenigbaar : 

Adobe Xd (ok) / Figma (heel eenvoudig) / Sketch (een beetje ingewikkeld) 

Verhaal boek kant ontwikkelaar.

Notitie : 

3 van de 4 sterren

#2 Invisie DSM

De extra's:

Toegankelijke tool voor ontwerpers.

Documentatie rechtstreeks uit het versiebeheersysteem.

Ontwerp penningen.

nadelen: 

Nog in bèta.

Geen gecodeerde inspectie van componenten.

Activa worden één voor één opgehaald. 

Prijs op schatting (te duur).

Werkt nog niet met Figma.

Verenigbaar :

Schets 

Notitie : 

2 van de 4 sterren

Handoff-tools

Storybook

Voor wie :  

ontwikkelaars.

Pourquoi?

Voor- en achterkant componentcode opslaan.

Ter beschikking stellen aan het UX Star-team.

De extra's: 

Tool toegankelijk voor ontwerpers op voorwaarde dat ze de code kennen.

Werkt met Raw HTML, React, React Native, Vue, Angular, Mithril, Marko, Ember, Riot, Svelte.

Componentenbibliotheek gegenereerd uit React/Angular-componenten.

Geïntegreerd in het dev-project, dus versiebeheer.

Het concept van een speelveld, waarmee de parameters van een component "live" getest kunnen worden.

Het kan optioneel rechtstreeks op Figma worden aangesloten als er geen deelplatform is.

De prijs:

Gratis.

nadelen: 

Sterk gericht op "ontwikkelingscomponenten", niet ideaal voor UX/UI-documentatie.

Stijlgids die alleen door ontwikkelaars kan worden onderhouden.

Onthouden : 

1 figuur

Het meest geschikte hulpmiddel voor een ontwerpsysteem : geavanceerde functies, delen, teamwork, een zeer eenvoudige interface, ideaal en snel te leren.

Zeer vloeiend met Zero Eight.

2 schets

Sketch is een veilige keuze; met deze tool, die het meest gebruikt wordt in de community, zit je altijd goed .

https://uxtools.co/survey-2017/

Als we voor materiaalontwerp kiezen , is dit het meest geschikte hulpmiddel.

3 De tool voor het maken van prototypen begeleidt de keuze van andere tools

We associëren schets gemakkelijk met invision DSM of figma + zero height & story book, het belangrijkste is om een ​​compatibele gereedschapsketen en een gevestigde workflow te hebben.

4 De tool die ik wou dat ik had

Ja software-uitgevers, ik praat tegen jullie sinds het kerst is: 

Wanneer komt er een toegankelijk deelplatform voor een ontwerper en voor een ontwikkelaar dat de functionaliteiten van een nulhoogte + verhalenboek samenbrengt? 🙂

Tot morgen voor nieuwe verrassingen op onze UX-Republic adventskalender!

Leslie POCHAT, UX Designer @UX-Republic

[actionbox color=”default” title=”DESIGN SPRINT training -20%” description=”-20% korting op de DESIGN SPRINT training van december door de code 12-UX-DEC in te vullen bij inschrijving! Er is nog tijd…” btn_label=”Onze trainingen” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external=”1″]