3 Tips voor het voorbereiden van betere UX-documentatie

UX-documentatie heeft alles te maken met het volgen van de specifieke details van uw ontwerp om ervoor te zorgen dat de implementatie soepel verloopt. Na alle rondes van ontwerpiteraties, onderzoek en kritiek, is het belangrijk om deze belangrijke overgang van ontwerp naar werkende code niet te verwaarlozen. 

Hier leest u hoe u uw lichtgewicht ontwerpspecificaties structureert en ervoor zorgt dat het uiteindelijke resultaat zo gepolijst is als u het zich had voorgesteld!

Onderdelen van UX-documentatie

Wat hebben ontwikkelaars nodig om uw ontwerpen te implementeren? Dit kan afhankelijk zijn van uw werkrelatie en de complexiteit van uw project. Hoe dan ook, weet dat een ontwerp meerdere lagen informatie bevat, dus het is beter om dit te doen over--communiceren dan om dingen open te laten voor interpretatie. 

  1. Ontwerp Mockups: stijlspecificaties weergeven zoals redlines voor positionering, kleur, palet, lettertype. 
  2. interacties: laat zien hoe het werkt, via een flow of een klik. 
  3. Aanvullende specificaties: alles wat misschien ontbreekt in de vorige categorieën. Dit kan afhankelijkheden van andere teams, items die in de nabije toekomst kunnen veranderen of specifieke implementatiedetails omvatten. 
  4. Middelen: middelen die worden gebruikt in het ontwerp, zoals pictogrammen, geoptimaliseerde afbeeldingen / audio / video, kopiëren, enz.

Hulpmiddelen

Tegenwoordig zijn er verschillende ontwerptools waarin specificaties zijn ingebouwd, hetzij als integraties of als onderdeel van de workflow. Bekijk ze om te zien welke het beste werkt voor jouw team. 

uxtools.co/tools/handoff

Figma 

Vergelijkbaar met InvisionApp, in die zin dat ontwikkelaars de mogelijkheid hebben om ontwerpactiva te inspecteren, kopiëren en exporteren. Een webgebaseerde tool met de mogelijkheid om websites en mobiele apps te maken en in realtime samen te werken met teamgenoten. 

Adobe XD 

Nu gratis. Een alles-in-één UX / UI-oplossing voor het ontwerpen van websites, mobiele apps en meer. Genereert een externe link voor specificaties, inclusief wachtwoordbeveiliging. 

InvisionApp

Productontwerp, workflow en samenwerkingsplatform. Omvat de inspectiemodus om metingen, kleuren en ontwerpactiva in een handomdraai te genereren. Bladeren en toegang krijgen tot schermafmetingen, inclusief positie, palet, letterbeeld, lettertypen, code, voorvertoning van items, functie voor het downloaden van activa.

Zeplin

Ontwerp overdrachtstool, met integraties naar Slack en Sketch (alleen Mac) om uw samenwerking met ontwikkelaars eenvoudiger te maken. Ook kunt u uw ontwerpbestanden van Figma, Photoshop of XD rechtstreeks naar Zeplin exporteren. Commentaarfuncties zijn handig en op dezelfde pagina als de werkelijke specificaties. 

Meer informatie over UX Tools

  • uxtools.co: een informatieve ontwerptool vergelijkingssite
  • Een checklist voor ontwerpoverdrachten door InvisionApp