Sketch Tutorials

5 dingen die u moet doen voordat u begint met uw volgende ontwerpbestand in Sketch, of, uw ontwerp voorbereiden "mise en place"

Onze nieuwe stijlgids is beschikbaar met alle tips in dit artikel!

Afstuderen aan de chef-kok en de echte wereld betreden is niet zo glamoureus als je zou denken (dus heb ik verzameld). Je haalt niet alleen je diploma, zet een koksmuts op en opent een restaurant in een trendy deel van de stad.

Zou dat niet leuk zijn!

Nee, het merendeel van de koks treedt toe tot de culinaire wereld en bereidt de mise en place voor. Spreek je geen frans? Ik ook niet! Mise en place betekent "alles op zijn plaats" en verwijst naar de voorbereiding en organisatie van de ingrediënten vóór het avondeten.

Weet je hoe Rachael Ray altijd die kleine kommetjes voorgeportioneerde ingrediënten heeft als ze een van haar 30-minuten-maaltijden doet, die-ik-zweer-eigenlijk-minstens-per-uur kost? Nou, zo blijkt, is dat niet ver af van wat professionele keukens doen vóór elke dinerservice. Kijk hiernaar:

Door deze organisatie voel ik me warm en wazig.

Jonge chef-koks met groentjes komen uren voor de dienst naar de keuken om elke groente te hakken, elke filet te snijden en alle sauzen te bereiden (naast vele andere taken). Hiermee stellen ze het restaurant in staat om voortreffelijke gerechten te bereiden met meerdere gangen om je dikke gezicht te voeden en je binnen twee uur de deur uit te krijgen. Als ze zouden wachten tot ze een bestelling hadden ontvangen om alle ingrediënten te bereiden, zou de service uren duren, zouden de gerechten inconsistent zijn en zou de keuken gewoon niet in staat zijn om zichzelf te onderhouden.

Productontwerpers moeten hun mise en place altijd voorbereiden voordat ze in de designdiner gaan duiken.

Voordat u begint met het ontwerpen van tientallen schermen en workflows, is het belangrijk om u klaar te maken voor duurzaam ontwerpsucces. Hier zijn vijf tips voor het voorbereiden van uw ontwerpmise en place:

1. Stel typografie en tekststijlen in

Deze eerste is duidelijk, maar het kan een hele klus zijn. Er is geen directere manier waarop gebruikers met uw product omgaan en deze begrijpen dan via woorden, dus het is belangrijk dat we dit goed doen.

Ik geef mezelf graag een zo breed mogelijk scala aan tekstgroottes en stijlen, dus mijn typografieblad ziet er zo uit (ik maak ook altijd een donkere versie!):

Het is super snel om het lettertype te wijzigen als ik onderweg van gedachten verander: 1) Alles selecteren, 2) Lettertype wijzigen, 3) Synchronisatiestijlen. Gedaan!

Elke stijl heeft vier subtypen:

  • Standaard (meestal 80-100% transparantie)
  • Secundair (50-70% transparantie)
  • Uitgeschakeld (20-40%)
  • Accent (meestal mijn merkkleur)

Waarom gebruik ik transparantie in plaats van hexadecimale waarden?

Het is een handige kleine truc om ervoor te zorgen dat je tekst er geweldig uitziet over elke achtergrondkleur. In de onderstaande afbeelding ziet de transparantie (tweede regel) er veel beter uit dan de grijze (eerste regel) omdat deze de tint van de onderliggende kleur heeft aangenomen. Er zijn geen trucs; de tweede regel tekst is exact hetzelfde in elk kleurenscenario. Het is alleen de transparantie die voor u werkt waardoor ze op verschillende tekststijlen lijken. Alles voor de prijs van één. Wat handig!

Ik ga hier niet in op het kiezen van goede lettergroottes, maar bekijk Typografie in tien minuten voor een snelle spoedcursus.

Ten slotte is het absoluut noodzakelijk dat u een schetstekststijl maakt voor elke stijl die u definieert. Als u onderweg besluit dat uw "uitgeschakelde" kleur 25% in plaats van 30% moet zijn, hoeft u deze alleen op één plaats te wijzigen en zal deze over uw document stromen.

ProTip: het gebruik van schuine strepen in de namen van uw tekststijlen (zie hierboven) maakt kleine submenu's in de vervolgkeuzelijst met stijlen:

Mijn

2. Configureer kleuren en objectstijlen

Er zijn VIJF basiskleuren die je voor alles moet uitzoeken:

Basiskleuren

  • Merk: dit is je merkkleur, vrij eenvoudig.
  • Zwart: stel een basiszwart in die u voor alle typen in uw ontwerpen gebruikt. Ik vermijd puur zwart en creëer in plaats daarvan een zwart getint met mijn merkkleur (of een aanvullende kleur). Zie onderstaande afbeelding.
Neem de kleur van je merk en plaats er een zwart vierkant van 80-90%. Kleur laat dit vallen als je basis zwart. Het is subtiel, maar het zal een verschil maken! Die rechtsonder is wat ik zou gebruiken.

Staatskleuren

  • Fout: een variant van rood. In deze status laten we gebruikers weten wanneer er iets mis is gegaan. Zuiver rood is een beetje veel. Kleur het met geel of blauw om het voor de ogen gemakkelijker te maken.
  • Waarschuwing: een variant van geel. Deze status laat gebruikers weten wanneer er nog iets niet goed is gegaan, maar mogelijk tot problemen kan leiden. Maak dit geel niet te elektrisch; de mijne is meestal een beetje meer oranje, dus het is leesbaar over wit.
  • Succes: een variant van groen. In deze status laten we gebruikers weten dat alles groovy is. Ik geef de voorkeur aan app-kleuren om een ​​beetje koeler te zijn, dus ik maak mijn groen een beetje blauwer.
Van links naar rechts: merk, zwart, fout, waarschuwing, succes.

Waarom slechts vijf kleuren? Ik ben ervan overtuigd dat kleuren heel bewust in een product moeten worden gebruikt. Maak niet iets paars om het paars te maken. Mijn ontwerpen zijn in zwart-wit gebouwd, tenzij ik de aandacht op iets probeer te vestigen.

Extra kleuren zijn geschikt voor zaken als diagrammen en grafieken, maar ze moeten andere kleuren gebruiken dan uw basisstatuskleuren.

Objectstijlen

Deze zijn iets moeilijker in te stellen, maar zijn nog steeds geweldig om tijd te besparen. Objectstijlen zijn alles, van kaartachtergronden tot vakjes voor lijstitems. Hier is een blad met enkele van mijn objectstijlen:

Ik gebruik deze stijlen wanneer ik objecten maak en als ik de basisstijl wil bijwerken, kom ik gewoon naar dit blad en synchroniseer ik het op al mijn pagina's. Het is een enorme tijdsbesparing, vooral na enkele maanden schermen ontwerpen voor een klant in een bestand met 97 schermen. Mama Mia!

3. Maak pagina's en kunstborden

Deze is vrij eenvoudig, maar het zal je helpen je gezond verstand te behouden. Bepaal vooraf hoe u uw ontwerpen wilt organiseren:

  • Op functie: in een food-app heeft u mogelijk één pagina ingesteld voor alle 'recept'-tekenborden en een aparte pagina voor alle' profiel'-tekenborden.
  • Op basis van gebruikersrol: in de app Medium kunt u één pagina instellen voor alle artboards van de "lezer" en een aparte pagina instellen voor alle artboards van de "indiener"
  • Per workflow: in de Uber-app is mogelijk één pagina ingesteld met alle artboards in uw workflow 'Een auto bestellen' en een andere voor de workflow 'Een creditcard toevoegen'.

Elk van de bovenstaande is prima, maar zet je ergens voor in en blijf erbij.

ProTip: als u InVision gebruikt, kan het gebruik van Pages om uw Art Boards te organiseren uiteindelijk vruchten afwerpen. Ik heb contact opgenomen met hun ondersteuningsteam over hoe artboards en pagina's worden gesynchroniseerd met InVision, met de vraag of ze gewoon automatisch secties voor mij zouden maken op basis van mijn paginatitels. Dat wil zeggen dat elke pagina een sectie is en alle tekenborden op die pagina in die sectie op InVision staan. Ze zeiden dat het momenteel niet wordt ondersteund, maar dat ze er veel aanvragen voor hebben ontvangen, dus iedereen zou ze een tweet moeten sturen waarin om deze functie wordt gevraagd. Laten we deze [voor de hand liggende] functie toevoegen!

Hier zijn de pagina's in de UX Power Tools-kit waaraan we werken, zodat u kunt zien hoe we de dingen hebben verdeeld. ProTip: als u een afbreekstreepje aan het begin van uw pagina of artboard-naam toevoegt, worden deze niet gesynchroniseerd met InVision!

4. Stel uw rastersysteem en lay-out in

Het rastersysteem is zo belangrijk dat ik er eerder over heb gesproken. Maar je zult gewoon moeten luisteren naar mij er weer over praten

Al deze tips gaan over het gemakkelijker voor u maken en het verminderen van het aantal beslissingen dat u moet nemen tijdens het ontwerpen.

Het instellen van uw rastersysteem maakt van lay-out en positionering een zeer passieve handeling; u hoeft zelfs niet na te denken over hoe ver de dingen uit elkaar moeten staan, omdat u weet dat uw rastersysteem toeneemt, en zelfs uw standaardinstellingen voor Sketch nudge hebben aangepast om zich eraan te houden.

Het raster met 12 kolommen is nog steeds het populairst omdat het de meeste kolomdelers heeft: 1, 2, 3, 4, 6 en 12.

Hier is een kijkje in de 8px-basis raster lay-outinstellingen achter het bovenstaande scherm:

Dit is een app op volledige breedte met een zwevend inhoudsgebied. Naarmate de browserbreedte toeneemt, blijft het 12-kolomraster in het midden van het inhoudsgebied.

Iets om op te merken wanneer u uw lay-out instelt. Afhankelijk van de lay-out van uw app (van rand tot rand versus zwevend), moet u mogelijk afzonderlijke lay-outgidsen op elke pagina hebben.

Dit is een lay-out met vaste breedte (zwevend) met een volledige koptekst.

Toegevoegde bonus: je ontwikkelaarsvrienden zullen van je houden omdat je dit raster hebt opgezet en eraan hebt vastgehouden, omdat elk raamwerk daar bovenop een rastersysteem zit.

Nog een laatste opmerking: ik stel persoonlijk geen rijen in Sketch in omdat dit zo veel van pagina tot pagina varieert. Voel je echter vrij om dit te doen als je wilt!

5. Importeer en symboliseer merkactiva

Bijna klaar! Diepe adem.

Het laatste wat u moet doen is alle brandingitems importeren. Dit kan zo eenvoudig zijn als een logo, of zo groot als een set app-pictogrammen. Het belangrijkste is dat u elk van deze middelen omzet in symbolen.

Houd het simpel, maar houd ze symbolen!

Waarom?

Trek je fantasiebroek aan en laten we doen alsof je 75 schermen hebt ontworpen met je logo en slogan in de navigatiekop. Marketing heeft besloten dat ze de slogan willen weggooien omdat 'Just Do It' blijkbaar al is overgenomen en een groot bedrijf dreigt een aanklacht in te dienen. Hoe had ik dat kunnen missen ?!

Welnu, Danny de Designer was gek en symboliseerde zijn logo niet. Dus Danny de Designer moet het op 75 afzonderlijke schermen bijwerken omdat ze worden gebruikt in marketingmateriaal en omdat de juridische behoeften die slogan zijn verwijderd.

Wees niet zoals Danny.

Sandy the Sketcher besloot in een geniale lijn het logo vanaf het begin te symboliseren. Ze heeft het basissymbool in haar stijlgids bijgewerkt en vervolgens op de synchronisatieknop gedrukt om het op al haar pagina's bij te werken. Terwijl Sandy aan Piña Coladas nipt, zweet Danny door tientallen pagina's met het bijwerken van logo's.

Wees als Sandy.

Dat is het! U hebt nu uw designmise en place voorbereid en bent klaar om uw "design dinner service" te starten.

Schaamteloze zelfpromotie:

Alles in de Stijlgids van UX Power Tools is gebouwd met behulp van alle tips in dit artikel. Dat enorme typografische blad? Al ingesteld met tientallen tekststijlen. Dat blad met objectstijlen? Ja, ook die!

Bekijk het op https://www.uxpower.tools en volg ons op Twitter @uxpowertools. Volg mij ook, als je het leuk vond: @thejmoore.