1–2–3 Handleiding voor het beheren van ontwerpactiva

Makkelijk als het klinkt. Bekijk de samenvatting en hieronder vind je een videogids. Als u werkt als freelancer of in een team - dit is het idee. We zullen gebruiken:

Sketch → UI, Abstract → Versioning, Zeplin → Handoff (optioneel)

TL; DR

1 - Hoogste niveau: ondersteunende en clientbibliotheken

Stel in Abstract Nieuw project in met de naam ___Support - dingen die u vaak gebruikt, zoals UI Kits, OS Kits, Wireframe Kits, Mockups. Gebruik één schetsbestand voor elk activatype en zorg ervoor dat u die bestanden instelt als bibliotheken.

Stel vervolgens voor elke klant een afzonderlijk project in, zeg __Dreamland Inc., waar u de merkactiva bewaart - dingen die u in projecten voor dezelfde klant gebruikt, zoals logo's, kleuren, typografie. Alle Sketch-bestanden hier zullen ook bibliotheken zijn.

Alle elementen in de bibliotheekbestanden moeten symbolen zijn. Gebruik / in symboolnamen voor groeperen (bijv. Toetsenborden / wit, toetsenborden / zwart). Ik laat de symbolenpagina rommelig en gebruik extra pagina's om items georganiseerd te houden (met behulp van Artboards). Voorbeeld: de client gebruikt een ander kleurenschema voor de voorjaarscollectie - ik maak een pagina met lentekleuren met alle exemplaren van de kleuren in de __color.sketch-bibliotheek.

Zijtip: gebruik Batch Symbolen maken en hernoemen om lagen beter naar symbolen te converteren, en als u de pagina Symbolen gebruikt, gebruikt u de symbolenorganisator.

2 - Middenniveau: projecten

Gebruik Nieuw project voor elk clientwerk, zeg Dreamland iOS-app. Ondersteunende bibliotheken en clientbibliotheken overeenkomstig uw behoeften importeren. Maak een schetsbestand voor de gebruikersinterface of deel het in meerdere bestanden. Als u alleen werkt, gebruikt u één bestand verdeeld in pagina's - één voor elke gebruikersstroom. Voor teamwerk is het beter om meerdere Sketch-bestanden te maken om conflicten te voorkomen. Er is niets mis met het werken met veel bestanden, het kan zelfs efficiënter zijn.

Gebruik naast bibliotheken van het hoogste niveau hier bibliotheken van het middenniveau. Dat zijn de gebruikelijke elementen van projectontwerp, zoals - knoppen, formulierelementen, pictogrammen, enz. Het is meestal een overbodige taak om ze in afzonderlijke bestanden te bewaren, dus houd u aan een _dreamland-ios-bibliotheek en organiseer symbolen in pagina's voor de duidelijkheid. Later, wanneer dezelfde client u inhuurt voor een ander project, zegt u de Dreamland iOS-app voor reisgidsen, koppelt u eenvoudig _dreamland-ios-library aan en gebruikt u de middelen opnieuw.

Zijtip: gebruik de Craft Plugin en de snelkoppeling om items in pagina's te ordenen voor een beter voorbeeld. Cmd + Shift + C.

3 - Onderste niveau: UI-ontwerpbestanden

Dit is een schetsbestand met meerdere pagina's of meerdere schetsbestanden waarin u op de gebruikersinterface werkt. Tenzij het een heel klein project is, weersta de drang om symbolen in de ontwerpbestanden te houden. Houd bij voorkeur alleen de symbolen die specifiek zijn voor dat bestand en die niet buiten worden gebruikt. Voorbeeld: als ik dezelfde achtergrond voor alle onboarding-schermen gebruik, maar niet buiten, bewaar ik de achtergrond als symbool in het bestand User Onboarding.sketch. Als dat de achtergrond is die ik elders zou kunnen gebruiken, verplaats ik het naar _dreamland-ios-library.

Ik houd de _dreamland-ios-bibliotheek op de achtergrond geopend en na het ontwerpen van enkele schermen stop ik even om de naamgeving goed te krijgen, de symbolen te verplaatsen en in het ontwerpbestand te vervangen. Het is echt niet zo'n drukte. Het punt is dat u zich wilt concentreren op het ontwerpproces. Probeer je niet te veel zorgen te maken over wat waar naartoe moet. Nadat je een paar schermen hebt gemaakt of als je een beetje moe wordt, neem je een korte pauze en organiseer je de middelen. Op die manier maakt u elk volgend scherm sneller en - in de tussentijd - de bibliotheek van het project.

Zijtip: gebruik Sketch Runner om snel symbolen op naam te noemen

BONUS - Uw ontwikkelaar ️ it

Als je de kaarten goed speelt, is het niet nodig om extra specificaties te maken - ontwikkelaars kunnen Zeplin en de bibliotheekbestanden gebruiken om eerst stukjes code te maken (atomen en moleculen bouwen - kleuren extraheren, lettergroottes). Daarna laten de ontwerpbestanden ze alles samenvoegen (organismen bouwen - de afstanden meten en de elementen positioneren).

Als u op zoek bent naar enkele manieren om een ​​Design Framwework te organiseren en in te stellen, kunt u dit artikel bekijken.

En je bent helemaal klaar!

Video - Hoe het in detail werkt + Tips!

Hier is een 24-minuten durende video-tutorial verdeeld in 3 delen, die je laat zien hoe je 1-2 regel in je ontwerpworkflow kunt toepassen, plus enkele extra tips:

Klik op de afbeelding om de lessen te bekijken

Voordelen

  • Duidelijke structuur, gemakkelijk te volgen voor elk type werk
  • Bibliotheken kunnen worden gekoppeld tussen verschillende projecten
  • Eenvoudige updates en snellere levering voor bestaande klanten
  • Voordelen van versiebeheer - back-up voor al uw bestanden, versiegeschiedenis, werken in een team en het oplossen van conflicten en meer!

Nadelen

  • U moet Opslaan → Commit-bibliotheekbestand in hetzelfde project opslaan en Opslaan → Commit → Samenvoegen tot hoofdbibliotheken van andere projecten voordat Symbolen worden bijgewerkt
  • Tekststijlen en gedeelde stijlen zijn niet beschikbaar in de gekoppelde bibliotheek - houd er rekening mee dat u in dit geval tekstblokken als symbolen gebruikt

Ik hoop dat je iets nuttigs hebt geleerd! Zo ja - bekijk dan meer dan 40 uur video-tutorials voor UI / UX-ontwerpers op learnux.io