Hoe u zelf aan de slag kunt met UXPin
Naarmate we het rijk van mobiel ontwerp, app-ontwerp en responsief ontwerp betreden, is er een toenemende aandacht voor UX (User Experience) en wireframing, interactieve prototyping en mockups. Er zijn een heleboel tools die er zijn gericht op deze niche en ze bieden het volledige scala van complexe, geladen objecten, tot dun en nauwelijks bruikbaar. Een van de tools die me opviel, is UXPin, simpelweg omdat het is ontwikkeld door ontwerpers voor ontwerpers.
Voordat we verder gaan … een voorbehoud. Als de jouwe een organisatie is die liever de software bezit dan is UXPin niets voor jou. Al het werk in deze app wordt gedaan in de browser en de projecten die u opslaat, worden in uw account opgeslagen.
Om aan de slag te gaan met UXPin start je een browser op en ga je naar UXPin. Hier kunt u zich aanmelden voor een gratis proefperiode of een maandelijks abonnement plannen op basis van uw verwachte behoefte. Het aanmeldingsproces is vrij eenvoudig en als u eenmaal uw gebruikersnaam en wachtwoord hebt ingesteld, bent u klaar om aan de slag te gaan.
Hoe een project in UXPin te starten
Wanneer u zich aanmeldt, komt u aan bij het Dashboard en kunt u vanaf hier beslissen om een nieuw wireframe, een nieuw mobiel project of een Responsive Web Design-project te maken. Er zijn ook plug-ins voor UXPin waarmee je je Photoshop- of Sketch-projecten kunt binnenhalen. Voor deze Hoe ga ik een banner maken met wat tekst en een e-mailknop toevoegen aan de banner. Om dit te bereiken heb ik gekozen om een nieuw draadframe te maken.
Hoe de UXPin-interface te gebruiken
Het ontwerpoppervlak is opgedeeld in vier gebieden. In het zwarte gebied aan de linkerkant vindt u een reeks gereedschappen waarmee u naar het dashboard kunt terugkeren, de elementen kunt openen die u gaat gebruiken, het paneel Slimme elementen opent, naar elementen zoekt, opmerkingen aan de pagina toevoegt en teamleden toevoegt. Onderaan is een knop die een korte zelfstudie opent, een andere waarmee je toegang hebt tot je account en een andere die toegang geeft tot de veelgestelde vragen, zodat je vragen kunt stellen en zelfs feedback kunt geven.
In het blauwe gebied langs de bovenkant bevinden zich een reeks gereedschappen en eigenschappen. Met de donkere knoppen aan de rechterkant kunt u uw ontwerp herhalen, de projectinstellingen aanpassen, de pagina delen en een in-browser simulatie van de pagina uitvoeren.
In het paneel Elementen pikt u de stukjes en beetjes voor het ontwerpoppervlak, geeft u uw project een naam en voegt u pagina's toe of verwijdert u ze.
De Elements-bibliotheek is een aangename verrassing voor UX-ontwerpers. Deze pop-down laat je kiezen uit 30 verschillende bibliotheken variërend van iOS tot Android Lolipop. Je hebt ook toegang tot Bootstrap en Foundation-elementen samen met de Font Awesome-iconen, Gesture-pictogrammen voor mobiel en een verzameling Social Widgets.
04 van 09Hoe een element toe te voegen aan een UXPin-pagina
Om te beginnen sleepte ik het Box-element naar het ontwerpoppervlak en, als ik de muis loslaat, de Eigenschappen paneel opent. Met de knop Eigenschappen kunt u het element een naam geven en de breedte- en positiewaarden van het element instellen. Je kunt ook opvulling aan het element toevoegen, de hoeken afronden en de dekking aanpassen. Als u op de knop Achtergrondkleur klikt, wordt een RGBA-kleurkiezer geopend.
U kunt ook een lettertype, rand en patroon toewijzen aan het geselecteerde element. Met de Lightning Bolt kunt u interactiviteit toevoegen aan een geselecteerd element.
05 van 09Tekst toevoegen en opmaken in UXPin
Om tekst toe te voegen, sleept u het tekstelement naar het ontwerpoppervlak en voert u uw tekst in. Klik op de teksteigenschap om de Font-eigenschappen te openen en uw tekst op te maken. Als u een blok dummy-tekst nodig hebt, voegt u een tekstelement toe en klikt u op de GENERAL LOREM IPSUM knop in de eigenschappen van het lettertype.
06 van 09Hoe een afbeelding aan een UXPin-pagina toe te voegen
Er zijn een aantal manieren om deze taak te volbrengen. U kunt de Image Tool in de werkbalk, voeg een afbeeldingselement uit de bibliotheek toe of sleep eenvoudig een afbeelding vanaf je bureaublad naar het element op het ontwerpoppervlak zoals hierboven weergegeven.
07 van 09Hoe een knop aan een UXPin-pagina toe te voegen
Hoewel er een Button-element is, voert u in " Knop " in de Zoeken gebied, zoals hierboven weergegeven, opent alle knoppen in alle bibliotheken. Sleep degene die voor u werkt naar het ontwerpoppervlak en gebruik de eigenschappen om de kleur, het lettertype en zelfs de rand van de rand te wijzigen. Als u de tekst binnen de knop wilt wijzigen, klikt u eenmaal op de tekst en voert u de nieuwe tekst in.
08 van 09Interactiviteit toevoegen aan een UXPin-pagina
Dit is niet zo ingewikkeld als het misschien voor het eerst lijkt. Voor de e-mailinvoer heb ik een invoerelement toegevoegd, het formaat ervan gewijzigd, de tekst ingevoerd en de tekst opgemaakt. Met het Input-element geselecteerd klik op de knop Eigenschappen en, wanneer de Elementeigenschappen verschijnen klik op de Zichtbaarheid knop - de oogbol - in de rechterbovenhoek van het paneel.
Selecteer de knop en klik op de Interactieknop - de Lightning Bolt- in de eigenschappen. Wanneer het venster Interacties wordt geopend, selecteert u Nieuwe interactie. Selecteer Klik in de pop-up Trigger. Selecteer Show Element in het Action-gebied. Je wordt nu gevraagd welk element je wilt laten zien. Klik eenmaal op de gunsite en klik op het Input-element. Met het geïdentificeerde element kunt u nu bepalen of het element al dan niet moet worden geanimeerd. In dit geval heb ik besloten om de invoervak te tonen met een gemak in en ging met de standaard duurwaarde van 300ms.
Ik wil ook dat de knop ongeveer 65 pixels naar rechts beweegt wanneer erop wordt geklikt. Ik heb de knop geselecteerd, het venster Interacties geopend en geselecteerd Nieuwe interactie. Ik heb deze instellingen gebruikt:
- Op gang brengen: Klik
- Actie: Verplaats door
- Verplaats richting: 65 px op de x-as
- animatie: Lineair
- Looptijd: 300 ms
Als u een interactie wilt verwijderen, selecteert u het element en opent u het paneel Interacties. Selecteer de interactie in het paneel en klik op de prullenbak om deze te verwijderen.
09 van 09Hoe uw pagina te testen in UXPin
Vanwege het feit dat u in de browser werkt, is testen doodeenvoudig. Klik op de Simuleer ontwerp knop. De pagina wordt geopend in de browser en u kunt de weg testen. Er zal ook een paneel aan de linkerkant van de pagina worden toegevoegd, dat opmerkingen toestaat, een Site Map als er meerdere pagina's zijn, Usability Testing, Live Sharing, Bewerken en een terugkeer naar het Dashboard.
Onder aan de pagina bevindt zich nog een klein paneel waarmee u de interactieve elementen kunt weergeven, opmerkingen kunt weergeven of verbergen en de projectkoppeling kunt delen met anderen.
