Share
Van nul beginnen elke keer dat je een ontwerp bespeelt, is tijdverspilling, vooral wanneer je bouwt op een bestaand product. Op Envato Market hebben we al een gevestigde visuele look en werken we aan een stijlgids om al onze UI-elementen te verzamelen.
Wat we nodig hebben, is een eenvoudige manier om een klikbaar prototype te maken met behulp van onze UI-bibliotheek. Een sjabloon met alle Lego-stukken die er al in zitten, klaar om te worden gebouwd.
In de loop van deze tutorial zal ik mijn eigen ervaringen met Envato Market gebruiken om het proces te demonstreren. Alle besproken technieken zijn echter van toepassing op uw eigen situatie.
De eerste stap in mijn geval was om de sjabloon te maken die onze stijlgids nabootst.
Ik begon met het toevoegen van al onze pictogramlettertypen: aangezien we een pictogramlettertype hadden dat we wilden gebruiken in onze schetsontwerpen, moest eerst het pictogramlettertype worden geïnstalleerd:
De beste manier om dit te benaderen is om het lettertype in Font Book te openen. "Repertoire-weergave" (⌘ + 2) moet actief zijn om alle beschikbare glyphs te kunnen zien. Kopieer elke glyph en voeg deze toe aan een tekengebied in Sketch.
Vervolgens heb ik alle verschillende UI-elementen met de hand gemaakt. Elk element is toegevoegd aan zijn eigen tekengebied en vervolgens opgeslagen als een symbool:
Ik geef iedereen een naam. De namen komen toevallig overeen met de klassen die in de feitelijke build zijn gebruikt, maar het is aan jou hoe je dit aanpakt:
Raken invoeren. Gedaan.
Ik herhaalde dit proces voor elk type belangrijk UI-element dat we momenteel in de stijlgids hebben gecatalogiseerd. Het resultaat van dit moeizame werk was de creatie van in totaal 89 symbolen.
Het laatste stukje van de puzzel was de typografie. We hebben 17 verschillende typografische variaties, dus elke is binnen Sketch veranderd in een tekststijl.
Voeg hier een tekstvak aan toe en style de tekst met behulp van opties in de zijbalk:
Verander het dan in een tekststijl:
Als we klaar zijn, besparen we door te gaan Bestand> Opslaan als sjabloon ...
Nu zijn we klaar voor rock 'n' roll!
Nadat ik alle pictogrammen, belangrijke UI-elementen en typografie had voorbereid, waren we klaar om te beginnen met het bespotten van dingen.
Als u een nieuw bestand maakt met de Envato Market Style Guide-sjabloon, krijgt u alle tekengebieden, symbolen, pictogramlettertypen en typografische stijlen die we hebben gemaakt.
Om een nieuwe mockup te beginnen verwijder ik eerst alle tekengebieden. De symbolen die eerder zijn gemaakt, zijn nog steeds toegankelijk omdat ze zijn ingesloten in de sjabloon. Ik gebruik Font Book om snel pictogrammen te kopiëren voor gebruik in de mockup. Samen betekent dit dat ik kan beginnen met een schone lei en toch snel toegang heb tot alle middelen die ik nodig heb. Zen gelukzaligheid!
Vervolgens voeg ik een nieuw tekengebied toe:
Nu ben ik klaar om onze bouwstenen toe te voegen.
Boom! Daar is het:
Plaats het op zijn plaats:
Voeg vervolgens het voettekst toe om het instellen van de lege pagina te voltooien. Voila!
Laten we nu de dummy-pagina invullen met een formulier dat linkt naar een bevestigingspagina. Later zullen we dit aan een InVision-project toevoegen, waar we feedback van collega's kunnen krijgen en de flow kunnen testen door een link naar gebruikers te sturen die de nieuwe interface testen.
Dit kost bijna geen tijd en het beste is dat geen van deze elementen op maat hoeft te worden ontworpen voor de interface. Het is allemaal een kwestie van de bouwstenen gebruiken die we in de sjabloon hebben gemaakt.
Laten we deze nu als afbeeldingen exporteren door de tekengebieden te selecteren en naar toe te gaan Bestand> Exporteren:
De laatste en belangrijkste stap is het uploaden van de mockups naar InVision en het delen van de link met collega's en het testen van gebruikers om feedback te verzamelen.
Hier heb ik een nieuw InVision-project gemaakt en mijn geëxporteerde mockups ernaar geüpload. Klik bijvoorbeeld op de landingspagina om het te openen:
Met de build-tool maak ik een hotspot om door te linken naar de bevestigingspagina:
Ten slotte deel ik het prototype met anderen door iets te zeggen als:
"Hé als je een moment hebt, zou ik graag jouw mening horen over deze nieuwe pagina met de bevestigingspagina waar ik aan heb gewerkt. Bekijk het op http://invis.io/RG1XC6XPA "
Ja, je kunt die link volgen om met de mockup te spelen.
Dat is het! Onze eerste feedbackcyclus is voltooid.
Dit is het beste proces dat ik tot nu toe heb ontdekt met betrekking tot het snel verkrijgen van een prototype op iemands scherm.
Dat gezegd hebbende, het is nog steeds niet ideaal. Zodra onze UI-bibliotheek van persoon verandert (momenteel ikzelf), moet de Sketch-sjabloon handmatig worden bijgewerkt. Het ideale proces is er een waarin we HTML en CSS kunnen gebruiken om Sketch-symbolen te maken waarmee het mogelijk is om de stijlgids en Sketch-sjabloon in perfecte synchronisatie te houden.
Accentsconagua