Skissa granskning och betyg

Sketch är snabbt knuffat med sin tävling och är redo att köra över Photoshop som prototyperverktyg för go-to-gränssnitt, så att många utvecklare nu föredrar att designers skickar ut skissfiler snarare än lagrade Photoshop-filer. Till skillnad från Photoshop byggdes den grafiska programvaran Sketch från grunden för att designa interaktiva gränssnitt. Det skapar livekomponenter så att klienter kan förhandsgranska vad som händer när de klickar, sveper eller knackar på din design på deras skrivbord, bärbara dator, surfplatta eller telefon. På grund av allt detta kan designers som använder Photoshop för att skapa användargränssnitt för stationära datorer och mobila enheter ge Sketch en närmare titt.

Sketch kommer från Nederländerna, och är ett Mac-program för endast vektordesign med fokus på att skapa interaktiva prototyper av webb- och appdesign. Den typ av fungerande design som Sketch producerar gör att dina kunder får en bättre känsla för hur allt ser ut och svarar. Det ger dem i sin tur möjlighet att ge mer användbar feedback om funktionaliteten (användargränssnitt eller UI) och användarupplevelse (UX), och därmed möjliggör ett informerat godkännande i förväg av utvecklingsstadiet - vilket minskar frustrationen och sparar tid och pengar.

Sketchs relativt nyligen uppfattade (2008) uppfattning fokuserade på samarbetsdesign för skärmar, så det har en kant över Photoshop, som debuterade 30 år tidigare, när ordskärmen hade att göra med att mäta halvtons täthet. Formgivare började luta sig till Adobe Photoshop för att organisera och överlämna gränssnittsdesignfiler eftersom det var det bästa verktyget i rutan för att få jobbet gjort - inte för att det var ett verktyg som byggts specifikt för detta ändamål.

Sketch är dock inte ensam i UX-designutrymmet. Adobe XD (XD står för Experience Design), som släpptes 2016 som en del av Adobes Creative Cloud för Windows och Mac, är också ett vektorbaserat verktyg för wireframing och produktion av interaktiva klickprototyper.

En andra vektorbaserad konkurrent, som utses till "världens kraftigste skärmdesignverktyg", är Studio från den tunga designsystemhanteringsplattformen, InVision (gratis för en prototyp, 25 $ per månad för obegränsade prototyper). Till skillnad från Sketch och XD har Studio en inbyggd avancerad animationsmodul. Arbetet som utförs i Sketch kan synkroniseras till InVision-plattformen med sin egen Craft Manager-plugin. Adobe erbjuder en gratis XD-startplan som har begränsad (2 GB) lagring och användning av en del av Adobe Fonts-samlingen. Den fullständiga versionen av XD är tillgänglig som en del av Adobe Creative Cloud (CC) -prenumerationen, från $ 20.99 per månad för den enda appen, eller från $ 54.99 per år för alla Creative Cloud-appar, inklusive Illustrator, InDesign och Photoshop.

Sketch använder en variant på en prenumerationsmodell, kostar $ 99 per år per enhet (antingen en dator eller mobil), för individer. Detta inkluderar ett års uppdateringar och Sketch Cloud (för online-delning och samarbete), varefter du kan behålla och använda din nuvarande version för alltid eller förnya för $ 69 per år för att återfå regelbundna uppdateringar och molnfördelar. Volymlicensiering sträcker sig från $ 64 per år per enhet för två till nio enheter ner till $ 49 vardera för 50 eller fler enheter.

Det är värt att notera att när du köper en licens har du bara rätt till en enda plats (endast för användning på en dator). Om du använder flera Mac-datorer, som ett skrivbord och en bärbar dator, har du tur och måste köpa två platser. Många prenumerationsbaserade appar tillåter två platser per licens som en bra tur för de hårt arbetande kreativa som sliter på sitt skrivbord på kontoret och på sin bärbara dator hemma. En relaterad besvär är att om du vill använda Sketch på en ny Mac eller om du har behövt omformatera din enhet måste du avregistrera Sketch från din gamla maskin / enhet och sedan registrera om.

Komma igång

Sketch är ett ögonblick att ladda ner från företagets webbplats (sketchapp.com); Det finns en 30-dagars gratis provperiod utan kreditkort krävs. Skiss kräver MacOS 10.13.4 (High Sierra) eller senare. Företaget varnar för att om du arbetar med komplexa, flersidiga dokument med hundratals tavlor, rekommenderas en av de mer kraftfulla, RAM-laddade Mac-datorerna. Jag testade Sketch 53.2 på en MacBook Pro 2018 med en 2, 9 GHz Intel Core i9-processor, 32 GB RAM och ett Radeon Pro 560X grafikkort.

Rätt på nedladdningssidan erbjuder Sketch en nybörjarguide, omfattande dokumentation, handledning och tips och länkar till dess sociala medier och utvecklare, blogg och chattar och Dribble. Det är välkomnande och inspirerande att se en lista över globala möten och evenemang för designmiljöer. Dessutom erbjuder webbplatsen en mängd gratis och premium-skiss-app UX / UI-resurser inklusive wireframe-satser, mobila UI-kit, mallar, mockups, instrumentpaneler, koncept och ikoner.

Gränssnitt och duk

Skiss leder som exempel och ger ett rent, kontextuellt användargränssnitt med tre huvudavsnitt - och (efter design) inga flytande paneler. Om du redan är Mac-användare hittar du Sketch UI som är bekant, eftersom den är modellerad på gränssnitten för Apple-appar som Pages, Numbers och Keynote. Med den senaste versionen stöds nu Apples Dark Mode.

På vänster sida av skärmen hittar du sidlistan med en lista över dina lager, enskilda innehållsobjekt på dessa lager och tavlor och det namngivna innehållet därpå. Till höger är inspektören där du kan fikla med egenskaperna för innehållet på vilket lager du har valt. Upptill har du verktygsfältet som innehåller verktyg och åtgärder. Mittsteget är din duk där du skapar magin.

Sidlistan gör det enkelt att organisera, tilldela eller ändra lager samt låta dig namnge, gruppera, välja och duplicera innehåll så att ditt arbetsflöde är effektivt. Du kommer att vara i toppform när det är dags att dela ut filer till en utvecklare.

Sketch smörjer ditt arbetsflöde genom att underlätta eller automatisera vanliga uppgifter med lättanpassade bibliotek, text- och lagerstilar, symbolinstanser och förinställningar. Dessutom finns det hundratals tidsbesparande UI-satser, mallar och plug-ins som ytterligare utvidgar Sketchs funktionalitet på många olika sätt.

Ritning och inställning i skiss

Som en Cheetah ska springa, är Sketch till prototyp. En gepard kan visserligen gå, men det den har utvecklats för är att springa. På samma sätt kan du absolut rita in Sketch, och det är OK för det, men det som är ovanligt med Sketch är dess prototyper. Det är fortfarande värt att få en översikt över vad som kan göras med Sketchs ritverktyg.

Allt skapande, import och montering av innehåll börjar med ett klick på rullgardinsmenyn Infoga. Där hittar du den förväntade formen, ritnings- och textverktygen. Bekvämt till höger är arrangemangsoperationerna som att ta fram, inriktning och distribution; och icke-förstörande grundläggande booleska verktyg som union, subtrahera, korsa och skillnad. De intuitiva och effektiva vektorverktygen tillåter skapande och redigering av former, deras poäng och Bezier-kurvor. Medan Sketch kan hantera väsentliga ritningsuppgifter, är det inte Illustrator - och det är inte heller meningen.

Grundläggande typografi i Sketch är enkel, med bekanta Microsoft Word-liknande funktioner tillsammans med dekorativa alternativ för skuggor, fyllningar och gränser. Formatering av block av typ kan kräva viss manuell ansträngning i Sketch, som till exempel inte stöder flikning - du måste använda mellanslagstangenten för att simulera önskad effekt. Det är helt fint, eftersom alla komplexa typer är inte tillåtna när du utformar responsiva layouter: Allt typografiskt (storlek, radbrytning, bindestreck osv.) Ändras när det visas på olika enheter i olika storlekar.

Prototyping och responsiv design

Till skillnad från andra ritprogram (men mycket som Adobe XD) underlättar Sketch att bygga en interaktiv prototyp. För att simulera sökvägen för din webbplats eller app (UI) och hur upplevelsen (UX) kommer att bli, kan du tilldela vissa områden som bläddring eller icke-rullning, länk och tvärlänksmenyer, symboler, sektioner, sidor och instanser och definiera hotspots (klickbara områden). Inte bara kan du förhandsgranska dina ansträngningar från appen, utan du kan också använda Sketch Mirror (mer om den funktionen nedan).

En ny finhet i Sketch är att du kan fylla prototyptext och forma fält med dynamisk realistisk data snarare än att fastna i det vanliga Lorum Ipsum tedium. I vald text- eller formlager kan du tilldela en källfil som importerar text eller bilder från.

Skiss spelar ganska bra med andra - och inte bara inom appen. Det var en glädje att upptäcka att jag kunde kopiera och klistra in en ikon som skapades i Illustrator. Vid import skapade Sketch ett grupperat lager för min konst, och därifrån kunde jag använda ikonen som den är, lägga till den i ett bibliotek eller skapa en symbol - precis som du kan med alla bilder som skapats i appen.

På dagens marknad måste alla väl tänkta, skärmbestämda design vara lyhörda. Detta innebär att innehåll i en appskärm eller en webbsida ändrar storlek och skifter automatiskt, beroende på visningsenheten (stationär, bärbar dator, mobil, surfplatta). Så ändrar storlek på text, radbrytningar ändras och bilder krymper, expanderas eller döljs, beroende på vad som kommer att se bäst ut på varje enhet.

I Sketch måste du skapa variantlayouter och förenklingar av de olika aspektförhållandena manuellt genom att kopiera och klistra in varje element eller grupp. Jag önskar emellertid att det fanns ett smartjusteringsalternativ för responsiva layoutmodifieringar som motsvarar Responsive Resize i XD eller till och med InDesigns funktionen Justera layout. Även om Justera layout nästan aldrig ger en perfekt lösning, sparar det verkligen tid och ger en bättre plats att börja än en tom sida.

För att förhandsgranska dina Sketch-mönster i realtid på dina enheter finns det gratis Sketch Mirror för iOS samt flera appar för att göra det på Android-enheter. I alla fall behöver enheter Wi-Fi eller en USB-anslutning. Att fatta informerade designbeslut gynnar någons arbetsflöde, och för detta ändamål är det en tung tillgång att se dina justeringar, grödor och textstorlek live med Sketch Mirror på själva enheten.

Utgång och samarbete

När ditt arbete är redo för kundåterkoppling eller teamsamarbete finns det flera sätt att dela. Den primära metoden är att ladda upp ditt dokument till Sketch Cloud. Efter överföringen får du en URL och kan välja vem du ska bjuda in för att visa dokumentet och ställa in en av tre åtkomstnivåer: Kommentera, ladda ner eller använda som bibliotek. Vem som helst med länken kan använda de inbyggda kommenteringsverktygen och om de öppnar sidan på en surfplatta eller telefon kan de förhandsgranska tavlan i full upplösning så länge det finns en layout för deras enhet.

Bibliotek kopplar dig och ditt team till dina projekttillgångar och förinställningar. Att skapa dessa i Sketch är en bris och det är en smart metod att lagra flexibla varumärke tillgångar på en enda, globalt tillgänglig plats - oavsett om det är lokalt på din hårddisk, på din server eller till och med i tredje part molnbaserade lagerhus som Dropbox. Ett bibliotek är bara en skiss sida i ditt dokument som du utser som ett bibliotek, vilket gör det tillgängligt och praktiskt för att lägga till eller revidera tillgångar.

Om du redigerar en symbol som du har skapat när du (eller någon annan som samarbetar om dokumentet) återvänder till ditt designdokument hittar du ett meddelande längst upp till höger på skärmen som varnar dig om uppdateringen. Du kan då välja att klicka för att uppdatera, eller så kan du välja att ta bort konstverket från biblioteket. Skiss är stor på ordning och organisation, så när du klickar på den varningen, dyker upp ett dialogfönster som visar dina bibliotekskomponenter, som visar både den föråldrade symbolen och den uppdaterade symbolen sida vid sida. Det är bra att ha fullständig information till hands.

Alternativt kan du exportera tavlor som PDF-sidor som kan markeras med kommentarer i Apple Preview, Adobe Acrobat eller annan PDF-visningsprogramvara. Sketch exporterar också grafik, skivor och sidor som JPG-, PNG- och SVG-filer. Dessutom kan den exportera kod för SVG: er och CSS-attribut.

Inget skissartat om den här appen

Sketch är ett fullfjädrat verktyg födda för designers som skapar skärmbaserade designupplevelser, och det gör detta mästerligt. Med sitt bekanta (för Mac-användare), intuitiva gränssnitt och enkla korssamarbete mellan designers och deras klienter, har Sketch förtjänat sitt goda rykte som go-to-prototypverktyg, eftersom det underlättar och påskyndar designvalideringen och godkännandeprocessen. För det ultimata inom vektorillustrationsfunktioner, se till vårt redaktörsval, Adobe Illustrator.