Wireframe Toolkit för Keynote möjliggör bara alla som har ett grundläggande grepp om hur man använder presentationsprogramvara för att snabbt bygga användargränssnittsmockups för iOS och webben. Om du inte har Keynote, oroa dig inte, det finns också en Powerpoint-version!
Idag kommer vi att ge dig super snabb igång genom hur du använder Wireframe Toolkit för Keynote för att skapa en grundläggande webbapplayout. Om du kan kopiera och klistra in kan du göra det här!
Vad du får
Din Wireframe Toolkit nedladdning ger dig en stor lista över Keynote och Powerpoint mallar. Som du kan se på skärmdumpen nedan får du fyra olika versioner av mallarna: Keynote '08, Keynote '09, Keynote for iPad och Powerpoint.
Varje mapp kommer med flera olika verktygssatser som syftar till att ge dig gränssnittselementen som du behöver för att designa för iPhone, iPad och naturligtvis den vanliga gamla webben. Det finns också några färdiga exempel som du kan öppna för att få en känsla för hur allting fungerar.
Slides vs Master Slides
För att starta, hitta verktyget som du vill arbeta med och duplicera det i Finder. Att arbeta med ett duplikat låter dig på allvar rita allt upp utan att påverka ditt original.
Jag öppnar webben? mall för vårt projekt. Om du inte känner till hur Keynote fungerar fungerar det väldigt mycket som Powerpoint, bara det är oftast ännu mer intuitivt. Strax bör du märka en remsa av diabilder på vänster sida av skärmen. Denna remsa är indelad i två områden: Slides (bottom) och Master Slides (topp).
Master Slides i verktygslådan innehåller alla de förbyggda elementen, vilket betyder att de är i huvudsak vad du betalar för. Var och en av de medföljande Master Slides har en specifik kategori som beskriver användargruppelementen inom: formulär, navigering, data, textstilar etc.
För det mesta lämnar du Master Slides ensam och kommer inte att ändra dem direkt. Istället ska du kopiera och klistra in element från Master Slides till de vanliga bilderna. Detta lämnar dina ursprungliga mallelement oförändrade så att du kan återanvända dem om och om igen.
Självklart, om du vill göra en global förändring som påverkar allt, skulle du redigera en befintlig Master Slide eller skapa en ny. Så om du till exempel vill ha en återanvändbar blå version av en knapp kan du duplicera den befintliga knappen i Master Slide och ändra dess färg till blå.
Skapa en ny bild
För att komma igång, klicka på det aktuella instruktionshjälpen under? Slides? och klicka sedan på Command + Shift + N för att skapa en ny bild. Därefter kommer vi att använda en av de inkluderade 960.gs guiderna för att få en allmän bredd för vårt innehåll. För att göra detta drar du en 960 Master Slide på din normala bild, som kommer att applicera Master Slide som bakgrund.
Lägg till lite navigering
Vi börjar med nästan varje webbsida behöver: navigering. Om du kolla in navigationssidan Master Slide hittar du en hel del alternativ. Hitta den du gillar och kopiera / klistra in den till din bildruta. Bam, nu har vi navigering! Se hur lätt det var?
Som du kan se är navigeringsbredden redan inställd för att matcha den för de guider som vi har valt. Nu när du har elementet i din bild kan du anpassa det men du vill använda Keynotes rika verktygssats. Byt ut färgerna, byt text, det är allt upp till dig!
Använd Keynote Tools för att lägga till en behållare
Kom ihåg att du inte är begränsad till element som finns i verktygslådan. Keynote och Powerpoint har båda grundläggande ritverktyg som kan hjälpa till med din allmänna struktur. Som ett exempel slog jag ut min sida lite genom att lägga till en bakgrundsfyllning och rita en enkel ruta under navigeringen som en behållare för resten av innehållet.
Ändra storlek på objekt
En av de saker som jag verkligen uppskattar om den här verktyget är hur bra objekten är byggda för anpassning. Låt oss säga att jag ville lägga till några widgets till min mockup, så jag slänger in en kalender och en dragspel meny. Problemet är att de inte är samma bredd, och för visuell konsistens vill jag att de ska vara.
Om man tittar på dragspelmenyn kan man se att det är ett komplext föremål och instinktivt tror att det sträcker sig horisontellt kommer att bli en smärta. Det kommer säkert att skruva upp alla dessa kapslade delar rätt? Fel! Allt du behöver göra är att sträcka det som du vill ha och allt är proportionellt och vackert.
Avsluta Mockup
Vid det här laget borde du ha grundprocessen ner. Härifrån behöver du bara kopiera och klistra in elementen från verktygslåset efter behov. På nolltid har vi en bra mockup som enkelt kan användas för att utveckla en CMS eller bloggplattform.
Med all ärlighet, första gången jag någonsin öppnade verktyget, kunde jag räkna ut processen och skapa layouten ovan på ungefär tio minuter! Nu när jag vet vad jag gör kan jag göra något liknande på ungefär tre minuter. Och jag är inte riktigt mycket av en Keynote-användare.
Det här är verkligen ett fantastiskt verktyg för att skapa snabba wireframes och mockups. Jag skulle definitivt kunna göra bilden ovan i Photoshop, men det skulle säkert ha tagit mig mycket längre att bygga dessa element från början!
Fler exempel
Demon ovan skrapar knappt ytan inte bara av vad du kan göra med det här verktyget, men även vad som ingår. Kolla in dessa mockups av iPad och iPhone apps, helt byggda med Wireframe Toolkit för Keynote.
En sak att märka är att knapparna på dessa versioner har blivit till länkar till andra bilder. Det betyder att du faktiskt kan springa igenom en grov fungerande prototyp av navigeringen genom att titta på bildspelet och klicka på knapparna! Hur coolt är inte det?
Vem är det här för?
Wireframe Toolkit för Keynote är användbar för nästan alla som är involverade i webb- eller applikationsutveckling på vilken nivå som helst. Om du inte är en formgivare är det ett bra sätt att visa din designer en allmän uppfattning om vad du letar efter utan att behöva tillgripa dina MS Paint-färdigheter.
Om du är en designer, är det ett fantastiskt och otroligt snabbt sätt att tänka på mekaniken i en layout. Du kanske tror att verktyget skulle begränsa dig, men det är faktiskt ganska ledigt för att kunna bryta ut en wireframe så fort innan du går in i Photoshop eller CSS och bygger elementen med den specifika stilen du ska gå för. Faktum är att om du inte gillar stilen på något av elementen, som vi sagt ovan, är de lätta att byta!
Bra, var kan jag få den?
Wireframe Toolkit för Keynote är tillgänglig när som helst på Keynotekungfu.com för $ 12. Lita på mig, det är verkligen billigt för det värde du kommer att få ut av det här.
Webbplatsen har också en massa mer information om vad som ingår och hur man använder det. Det finns även ett par riktigt bra instruktionsvideor som innehåller användbara tips om hur du får ut det mesta av Keynote för trådframställning.