Microsoft Visio kan worden gebruikt om vele soorten GUI-ontwerpen te maken.
Microsoft Visio 2010 is een grafisch ontwerpprogramma dat kan worden gebruikt om diagrammen, interface-elementen, navigatiemenu's en andere visuele objecten te maken. Het biedt een breed scala aan tools om het ontwerp van een grafische gebruikersinterface (GUI) te maken. Het diagram laat zien hoe de applicatie of webinterface eruit zal zien in zijn uiteindelijke vorm. Het ontwikkelen van een GUI in Visio is niet al te moeilijk en ontwerpen kunnen worden geëxporteerd als PDF-bestanden. Volg een paar richtlijnen om te leren hoe u een eenvoudige GUI wire-frame mockup voor een website kunt bouwen.
Stap 1
Open Microsoft Visio. Maak een nieuwe tekening door op het lege tekeningpictogram te klikken. Klik op de knop "Maken".
Video van de dag
Stap 2
Klik op het venster Vormen aan de linkerkant van het scherm. Selecteer 'Meer vormen'. Selecteer 'Basisvormen Amerikaanse eenheden'. Klik op 'Snelle vormen'.
Stap 3
Maak een koptekstvak door met de rechtermuisknop op de rechthoekige doosvorm te klikken en de vorm naar het tekengebied te slepen. Pas het formaat van het vak aan om ongeveer 15 procent van het bovenste gedeelte van de tekening te bedekken.
Stap 4
Maak een navigatiemenu door met de rechtermuisknop op de rechthoekige doosvorm te klikken en de vorm onder de koptekst te slepen. Wijzig het formaat van het vak zodat het een hoogte heeft van ongeveer een halve inch en dezelfde breedte als het kopvak.
Stap 5
Maak een groot hoofdgedeelte door met de rechtermuisknop op de rechthoekige doosvorm te klikken en deze onder het navigatiemenu te slepen. Pas het formaat van het vak aan zodat het dezelfde breedte heeft als de koptekst en de navigatiemenuvakken en om de onderkant van het tekengebied te bedekken.
Stap 6
Maak twee rechthoekige vakken door met de rechtermuisknop op de vorm van het rechthoekige vak te klikken en de vorm twee keer naar het tekengebied te slepen. Pas het formaat van elke doos aan zodat deze op de helft van de doos van het hoofdgedeelte past. Verplaats elke doos zodat ze naast elkaar in de doos van het hoofdgedeelte passen.
Stap 7
Maak tekstvelden die navigatielinks vertegenwoordigen door op de knop "A Text" bovenaan de navigatiebalk te klikken. Selecteer een gebied in het navigatievak om een klein tekstveld te maken door op de linkermuisknop te klikken. Beweeg de muis om de grootte van het veld tot de gewenste lengte te wijzigen. Typ tekst om 'Thuis' te zeggen.
Stap 8
Maak met de linkermuisknop nog vier tekstvelden aan. Typ "Menu-item" in elk vak. Pas het formaat van elk vak aan zodat het overeenkomt met het formaat van het vak "Thuis".
Stap 9
Selecteer een gebied in het hoofdkoptekstvak en maak een tekstveld met de beschrijving "Hoofdkop".
Stap 10
Maak een tekstvak in elk vak dat zich in het hoofdinhoudvakgebied van de tekening bevindt. Geef elk tekstvak een beschrijving, zoals 'Inhoudsgebied'. Pas het formaat van elk tekstvak aan zodat het even groot is. Selecteer de knop "Aanwijzer" in het navigatiemenu bovenaan.
Stap 11
Sla de tekening op door op "Bestand" te klikken in het bovenste navigatiemenu en "Opslaan als" te selecteren.
Tip
Hoewel Visio niet wordt geleverd met GUI-prototypestencils of objecten, bieden externe bedrijven dergelijke tools wel aan om te downloaden. Als u van plan bent Visio te gebruiken om een gezamenlijk ontwerp te maken, houd er dan rekening mee dat de Visio-tekeningbestandsindeling niet compatibel is met de meeste tekensoftwarepakketten.
Waarschuwing
Te complexe tekeningen kunnen ertoe leiden dat Visio langzamer gaat werken bij het vernieuwen van een tekening nadat een wijziging is aangebracht.
