Sketch Tutorials

Een ontwerpsysteem opzetten

Leer hoe u best practices van Sketch kunt aanpassen en gebruiken als een robuust ontwerpsysteem dat u honderden uren bespaart bij het volgende project.

Dit maakt deel uit van Frames voor Sketch - een zelfstudieartikel dat u helpt aan de slag te gaan met Frames Design System en het aan te passen aan uw merkrichtlijnen, en u helpt iets nieuws te leren over schetsfuncties en trucs die u misschien niet kent.

Gids inhoud:

  1. Overzicht - Een korte blik op de hoofdsecties.
  2. Kleuren - Leer hoe u kleuren kunt toevoegen en gebruiken.
  3. Typografie - Systeemlettertypen vervangen.
  4. Componenten - Symbolen aanpassen.
  5. Plug-ins - Lijst met handige plug-ins voor het besturen van Frames.
  6. Samenvatting - Gebruikstoepassingen en veelgestelde vragen.

1. Overzicht - Bijgewerkt

Frames is een product gemaakt door een ontwerper met het idee om de nieuwste Sketch-functies in een enkele UI-bibliotheek te implementeren door best practices en nuttige technieken te combineren die op de lange termijn veel tijd kunnen besparen voor iedereen die bekend is met de schets-app.

Het systeem is lichtgewicht en aanpasbaar aan merken, daarom vinden veel teams het een erg handig hulpmiddel om hun eigen bibliotheken op te bouwen.

Frames Master-bestand is verdeeld in 5 hoofdpagina's die veel vooraf gemaakte inhoud bevatten: componenten, stijlen en vooraf ontworpen lay-outs die kunnen worden aangepast en gebruikt voor het maken van uw eigen UI-kit of een ontwerpsysteem (naar uw voorkeur).

Opmerking: Frames gebruikt standaard Roboto- en Muli Google-lettertypen, dus zorg ervoor dat u ze installeert voordat u ze voor het eerst start.
  • Aan de slag - Dit is het startpunt voor nieuwkomers, hier kunt u uw kleuren, stijlen en lettertypen snel aanpassen aan uw merk.
  • Stijlgids - Kleurenschema, componentenblad, pictogrammen, mockups en lettertypen vormen allemaal samen de enige bron van waarheid voor uw project.
  • Web UI Kit - Verzameling van vooraf ontworpen lay-outs gebouwd met systeemcomponenten die vrij kunnen worden aangepast en worden gebruikt voor snelle prototyping en het transformeren van blauwe stijl draadframes in mooie dribbelschoten.
  • Grafieken en tabellen - Frames bevatten een set van 32 Grafieken + Tabelcomponenten die gemakkelijk kunnen worden aangepast, aangepast en opnieuw gebruikt, zodat u zich kunt concentreren op het werken met gegevens in plaats van vectorpunten.
  • Symbolen - Alle zijn gegroepeerd per categorie en gesorteerd op het type van het symbool (kleuren, knoppen, ingangen, enz., We zullen alle groepen een beetje verder behandelen).

Ja, deze 5 pagina's vormen een perfecte speeltuin om snel apps en een website te ontwerpen, wat me als ontwerper heel wat uren bespaart. Maar laten we nu naar de pagina Aan de slag gaan om ons systeem voor te bereiden op de basis van ons merk.

2. kleuren

Frames bevatten standaard tien kleuren die globaal in het document kunnen worden gewijzigd, u hoeft alleen lagen te selecteren en ze te overschrijven met nieuwe eigenschappen, vervolgens de wijzigingen toe te passen en voila alles is gesynchroniseerd en de nieuwe kleur is nu beschikbaar voor alle componenten die een kleurkenmerk hebben in het overschrijvingsmenu!

Opmerking: u kunt verlopen ook globaal gebruiken, converteer hun lagen gewoon naar symbolen en stel de nieuwe symboolgrootte in op 100x100.

Als u meer kleuren wilt toevoegen, gaat u naar de pagina Symbolen en kopieert u een tekengebied. Kopieer / plak het en wijs er een nieuwe kleur aan toe.

Pasgeboren systeemelementen moeten, zelfs als het slechts kleuren zijn, een naamgevingsstructuur volgen, dus het element past in de juiste groep, beschouw het als een pad om de mapstructuur van uw systeem te beschrijven, dus zorg ervoor dat u de wijzigingen aanbrengt. Kleur / oranje maakt het bijvoorbeeld mogelijk om het te vinden in overschrijvingen van elk ander systeemelement met kleureigenschappen.

OPMERKING: de vulstijl wordt door het hele systeem gebruikt en op alle componenten toegepast als een kleurkenmerk, dit omvat ook vormen van de randstijl.
(Zoals knoppen, waarschuwingen, badges of tags).

3. Typografie

Frames gebruikt standaard een eenvoudige lettertypecombinatie Roboto + Muli georganiseerd van H1 tot H5 headers, en een eenvoudige lettertypecombinatie kan je altijd helpen om opvallende typografie te bouwen voor je project of gewoon een dribbelfoto. U kunt dus beide lettertypen vrij aanpassen of een van de lettertypen verwijderen als dat nodig is.

Typografiesysteem is ingebouwd in gedeelde stijlen met een eenvoudige structuur:
* H1 / Lettertype / Uitlijning / Kleur

Om het huidige lettertypesysteem te wijzigen, overschrijft u eenvoudig standaardtekstlagen met een nieuwe instelling en verspreidt u wijzigingen over het hele land van Frames. Vergeet hierbij niet de oude lettertypenaam te overschrijven uit het menu met gedeelde tekststijlen met behulp van de superhandige plug-in - Sketch Text Style Master, zoek gewoon naar de lettertypenaam die u wilt vervangen. En door dit te maken, kunt u eenvoudig nieuwe teksteigenschappen toepassen op alle UI Kit-lay-outs.

OPMERKING: Componenten zoals knoppen bevatten tekstsymbolen die hier niet worden overschreven door wijzigingen. In het volgende gedeelte wordt beschreven hoe u ze kunt aanpassen.

Laten we nu enkele nieuwe lettertypen aan het systeem toevoegen, zodat ze onze structuur volgen met deze eenvoudige stappen:

1. Kies of dupliceer alle lagen van elk lettertype - breng de gewenste wijzigingen aan en overschrijf de gedeelde stijlen voorlopig niet.

2. Gebruik de Rename, deze plugin activeert de opdracht “zoeken en vervangen” op de geselecteerde lagen en vervangt de standaardlettertype in de naamstructuur door de nieuwe. (Voorbeeld: van H1 / Roboto .. tot H1 / Arial ..)

3. En genereer nieuwe stijlen uit geselecteerde tekstlagen. Gebruik hiervoor de plug-in Style Generator en druk op "gedeelde stijlen genereren". Het nieuwe lettertype is klaar.

Rename It en Style Generator zijn nuttige hulpmiddelen voor deze aanpak.

Nadat u klaar bent met de aanpassing, kunt u de huidige lettertypestijlen opslaan als een sjabloon om ze snel naar elk nieuw project te importeren met de plug-in voor gedeelde stijl. Het bespaart u enorm veel tijd, meer informatie over het beheersen van tekst in dit artikel.

4. Componenten

Bouwstenen van het systeem zijn responsieve componenten die zijn gemaakt met symbolen die een enkele systematische aanpak delen, om een ​​padstructuur te volgen en logische groepen te vormen. Alle symbolen zijn per ontwerp onderverdeeld in categorieën.

De meeste symbolen zijn gebouwd met behulp van andere symbolen. Wanneer het symbool in een ander symbool is genest, vertegenwoordigt het het kenmerk van de visuele stijl dat snel kan worden aangepast met behulp van het overschrijvingsmenu. (Zoals Kleur, Staat, Vorm of Apparaat.)

Laten we nu de symbolengroepen nader bekijken om te leren hoe we ze op schaal kunnen aanpassen.

kleuren

Eenvoudigste en een van de meest nuttige symbolen - slechts een blok waarin een enkele opvulkleur is opgeslagen. (breedte x hoogte = 100 px x 100 px)

Tip: gebruik een witte kleur van 50% dekking om uw elementen zoals pictogrammen er transparant uit te laten zien.

Tekst

Tekstsymbolen worden gebruikt voor knoppen, ingangen en tekstgebieden. Als u deze wijzigt, worden de standaardwaarden van tekstlagen overschreven en worden wijzigingen gesynchroniseerd met het bovenliggende element.

Tip: Gebruik de optie Inhoud aanpassen bij vergroten / verkleinen om de breedte van de symbolencontainer te passen bij het overschrijven van standaardwaarden.

Toetsen

Knoppen zijn gesorteerd op grootte en zijn beschikbaar in de volgende variaties: Basis, Pictogram rechts, Pictogram links, Tab en Tekstknop. U kunt ook het flexibele knoptype vinden met het pictogram dat altijd nauw aan een van de zijkanten van de tekst is bevestigd; deze knoppen zijn behoorlijk lastig en gemaakt met behulp van deze techniek.

Als u het uiterlijk van een knop wilt wijzigen, moet u het kenmerk Shape met de eigenschappen Staat en Kleur wijzigen, hier een voorbeeld van het aantal variaties van een enkele knop dat u kunt overschrijven met behulp van standaardeigenschappen.

vormen

De invoervelden kunnen beschrijvend zijn (met een extra label / bijschrift) of een basisachtige rechthoekige uitstraling hebben. Gebruik het staatssymbool om de ingangen visuals aan te passen, overschrijf elke staat laagstijl om uw wijzigingen toe te passen.

Door het kenmerk Inputs State te wijzigen, kunt u snel schakelen tussen Basic en Material look.

Vorm

Vormsymbolen vertegenwoordigen de vorm van een element zoals knoppen, badges, tags en meldingen - elke vorm kan een opvul- of randstijl hebben, het kenmerk Opvulkleur wordt op beide toegepast.

Opmerking: Vormsymbolen kunnen eenvoudig worden aangepast door de straalradiuseigenschappen van de containerlaag te wijzigen. Vormen van de randstijl worden gemaakt met contouren met eigenschappen voor aftrekken, dus zorg ervoor dat u de straal van beide samengevoegde lagen wijzigt.

Staat

Statussymbolen worden gebruikt om elementinteracties en transformaties te beschrijven, zoals Hover, Actief of Uitgeschakeld voor knoppen of ingangen, met behulp van deze kunt u manipuleren om uw elementen in de huidige interface-situatie te passen.

Als u de knop- of invoerstatus wilt bijwerken, moet u de stijl van de laag bijwerken. U kunt bijvoorbeeld ook extra effecten aan de symbolen toevoegen - u kunt schaduwsymbolen toevoegen aan elke zweeftoestand zodat deze er zwevend uitziet.

Gegevens

Gegevens zijn een plaats voor tweede prioriteit UI-elementen die dienen om de gebruiker relevante informatie te bieden en de huidige interfacesituatie te beschrijven met behulp van positieve, negatieve of waarschuwingsfeedback.

Icons

Alle pictogrammen zijn gebaseerd op een 24 px-raster, hebben een zeer materiaalachtige stijl en dragen een kleurkenmerk dat altijd overeenkomt met uw kleurenschema, zodat u elke keer dat u een pictogram in een knop of invoer ziet, weet dat u het eenvoudig kunt verwisselen met een ander pictogram uit de lijst of verander de kleur.

De meest gebruikte pictogrammen zijn gemaakt in twee stijlen: Vulling en Lijn.

mockups

Mockups worden gebruikt om uw visuele inhoud zoals foto's, prachtige achtergrond en apparaatschermen te presenteren. U kunt het uiterlijk van mockup wijzigen door het apparaatkenmerk te wijzigen.

Met behulp van de schermopties kunt u overlays toevoegen om uw afbeelding te verdoezelen met een zwart-wit verloop of het kenmerk FIll als een tint plaatsen om de leesbaarheid van de tekst boven de foto's te verbeteren.

Frames omvatten mockups van iPhone 7, Macbook en iPad Air gemaakt met behulp van Facebook-ontwerpbronnen.

Je kunt je mockups als en PNG-laag toevoegen aan een symbool en de juiste verhoudingen instellen voor het schermsymbool om de afbeelding van het apparaat te matchen, lees hier meer over het gebruik van mockups en vergeet niet om het freebie-bestand te pakken.

5. Plug-ins

Frames kunnen worden gecontroleerd en uitgebreid met behulp van plug-ins. Dit betekent dat je super wilde bewegingen kunt maken in je document; u kunt bijvoorbeeld eenvoudig de schetsbibliotheek van Frames synchroniseren en een veilige versiecontrole met uw team hebben met behulp van de Abstract-app. Ontdek vriendelijkere use cases en extensies die u samen met Frames kunt gebruiken.

6. Samenvatting

Nadat u de basisstijlen hebt geconfigureerd en de componenten in de gewenste weergave hebt gebracht, kunt u een volledig opgeladen ontwerpsysteem tot uw beschikking hebben dat klaar is om te worden aangesloten op een project. U kunt het bestand bovendien als een sjabloon opslaan om Frames altijd bij de hand te hebben.

Psst. U hoeft niet alles aan te passen om te beginnen, het instellen van uw merkkleuren is mooi genoeg om te beginnen met het ontwerpen van fantastisch uitziende producten.

Frames gebruiken is de moeite waard en geeft je de mogelijkheid om je ontwerp direct te veranderen door symbolen te overschrijven. Oké, ja - we hebben het. Maar wat zijn echte use cases waar dit systeem goed in is?

Gebruik cases

  • Prototyping, zelfs als de deadline binnen 10 minuten komt, kunt u snel een website-pagina of stijlgids voor uw klant samenstellen.
  • Bouw een merk UI-kit, gebruik een vooraf gemaakte stijl om ze te overschrijven met die van jou, en test je visuele ideeën door je ontwerptaal te bouwen.
  • Wireframing, met behulp van vooraf gemaakte inhoud, kunt u snel wireframes bouwen en uw ideeën bespreken voordat u overgaat naar het definitieve ontwerp van activa.
  • Leer iets nieuws, word expert met Sketch en blijf op de hoogte van de nieuwste functies en technieken die uw dag kunnen redden.
  • Synchroniseer, als u met uw collega's aan een project werkt, Frames om samen te werken en te ontwerpen met dezelfde bouwstenen die zijn gesynchroniseerd.

Doe meer in minder tijd, beweeg snel en bouw sterker.

Als u het systeem nog steeds niet hebt, kunt u de Frames for Sketch-website bezoeken om de volledige versie van het product te krijgen, of het demobestand downloaden en nader bekijken.

FAQ

Hoe de nieuwste versie te krijgen?
We sturen e-mailmeldingen via Gumroad en tweet wanneer de nieuwe versie wordt uitgebracht, dus volg ons. Als je Frames al hebt gekocht, ga je naar de productpagina en download je de nieuwste versie.

Wilt u een functie voorstellen of meer hulp nodig?
Koel! Voel je vrij om ons te bereiken en te bespreken via hello@robowolf.net.

Ben je van plan Adobe- of Figma-versies te maken?
Misschien in de toekomst, totdat deze tools dezelfde flexibiliteit bieden als Sketch.

Wat onderscheidt uw product van andere ontwerpsystemen?
Frames zijn in een systeem ingebouwd door middel van tonnen wijzigingen als gevolg van constante Sketch-updates en een productontwerpervaring. Iedereen die het beheerst, krijgt nu de mogelijkheid om ontwerpsystemen voor een middelgrote / grote klant snel te genereren en te schalen.

Ik heb geen ander systeem op de markt geprobeerd, maar ik geloof dat de wereld een grote plaats is en dat er net zoveel ontwerpers zijn als ik.

Voordat je weggaat

  • Vind meer Frames gerelateerde bronnen op Sketch App Bronnen.
  • Help ons het woord over Frames for Sketch te verspreiden en krijg 25% korting. Stuur ons een e-mail / tweet / DM ons de link naar uw bericht en we nemen zo snel mogelijk contact met u op.
  • Volg Robowolf voor meer ontwerpgerelateerde dingen.