Adobe XD Det fria användargränssnittet och UX-designverktyget du kan använda just nu

Adobe XD Det fria användargränssnittet och UX-designverktyget du kan använda just nu / Kreativ

Det är inte ofta du associerar Adobe med “fri” nedladdningar, men det är precis vad det företaget har gjort med Adobe XD. Det är en snabb gränssnitt prototyping app för mobila enheter och webbplatser, så att designers snabbt kan komma med mönster för specifika plattformar.

Det bästa med Adobe XD är hur lätt det är att använda. Även om du har liten erfarenhet av att utforma något, finns det bara en mycket gradvis inlärningskurva som håller dig tillbaka.

Även användargränssnittet är uppfriskande starkt, utan alla verktyg och paneler som sätter så många människor utanför appar som Photoshop, Illustrator och Lightroom. 15 Gratis alternativ till Photoshop, Illustrator, Lightroom och mer. 15 Gratis alternativ till Photoshop, Illustrator, Lightroom och Mer Vill du inte spendera $ 50 / månad på en Adobe Creative Cloud-prenumeration? Här är några av de bästa lediga alternativen som finns tillgängliga. Läs mer . I den här artikeln introducerar vi dig till Adobe XD och förklarar vad du kan och inte kan göra med det.

Vad är Adobe XD?

Adobe XD är ett designverktyg. Det kommer inte att bygga din app för dig, men det hjälper dig att presentera en vision eller prototyp för vad du vill att din nästa mobil- eller surfplattformsapp, webbplats eller annat användargränssnitt ska se ut. Appen använder konstkort - i huvudsak skärmmockups - för att ge en visuell representation av din appdesign.

Skapa mobilappar Gör din första mobilapp med dessa rabatterade kurspaket Gör din första mobilapp med dessa rabatterade kurspaket Har du vad som krävs för att utveckla nästa stora iOS- eller Android-app? Dessa kraftigt diskonterade kurspaket kommer att lära dig hur det är gjort! Läs mer och webbplatser som fungerar kan ta mycket teknisk kunskap. Adobe XD ger dig verktygen för att göra en idé till ett bevis på konceptet. När du är klar kommer du att ha en ritning från vilken du ska arbeta, och en du kan finjustera oändligt tills du är nöjd med designen.

På samma sätt är konceptkonsten så viktig i kreativa strävanden (se den här vackra konsertkonstkonstkonsten Var hittar du vacker videonspelkoncept konst på nätet Var hittar du vacker videospelkoncept Art Online Vill du se några av de vackra konceptkungen bakom din favoritspel? Här är de konstnärliga resurserna till ditt förfogande! Läs mer som bevis), ett bevis på konceptet för önskad gränssnittsdesign är viktig när det gäller programvara och webbdesign. Att ge programmerare ett koncept som så nära matchar den färdiga produkten är ett bra sätt att anpassa dina förväntningar till vad som är möjligt.

Bäst av alla appen är utformad så att alla kan använda den. Oavsett om du är en erfaren designer, en programmerare eller någon som saknar båda dessa färdigheter. Adobe XD kan överbrygga klyftan mellan din vision och teknisk kunskap. Du behöver inte ens lära dig att koda Lär dig att koda genom att remixa befintliga appar gratis Lär dig koda genom att remixa befintliga appar gratis Gratis På den här webbplatsen kan du skapa eller remma apps, så att du kan vara kreativ utan rädsla för att bryta någonting. Läs mer för att designa en app.

Vad kan Adobe XD göra?

Adobe XD är utformad med några specifika applikationer i åtanke, men du kan också tänka utanför lådan. Appen gör det enkelt genom att inkludera mallar för:

  • Smartphone-appar: Från iPhone 5 och SE till de allra senaste modellerna; och en generisk Android-mall också.
  • Tablet-appar: Med mallar till iPad, båda storlekarna på iPad Pro, Surface Pro 3 och 4, och en generisk Android-tablettmall.
  • Webbplatser / webbapps: Med några förinställningar att välja mellan, inklusive Full HD.

Du behöver inte hålla fast vid dessa mallar, de är bara där för att göra ditt liv enklare. Du kan också ange ett helt anpassat gränssnitt (dvs skärmstorlek) och börja designa för nästan vilken plattform du kan tänka dig.

Om du utformar en mobilapp kan du hämta den kostnadsfria Adobe XD-appen till din plattform och exportera dina mönster för en live-förhandsgranskning på din enhet..

UI-kits gör livet ännu enklare

Om du funderar på att designa för IOS 7 Skäl är det Swift Programmeringsspråket värt att lära dig 7 Skäl Swift Programmeringsspråket är värt att lära Du borde lära dig Swift programmeringsspråket tidigare snarare än senare om du inte vill bli kvar. Här är några bra skäl som kan övertyga dig. Läs mer, Android, Windows eller en annan väletablerad plattform; du kan använda användargränsspaket för att få en hjälpande hand. Dessa är huvudsakligen projektmallar som underhålls av Apple, Google, Microsoft och andra, som kan laddas ner i Adobes .xD-filformat.

Med UI-kits kan du påskynda produktionen, så att du kan designa din app inom de begränsningar och gemensamma element som ses i din valfria plattform. Eftersom de underhålls av plattformsutvecklarna är de i allmänhet alltid aktuella och grundliga.

Till exempel innehåller Apples IOS-gränssnittskit-skärmdimensioner för en rad olika enheter, exempel på iOS-tangentbordet, navigeringselement som bandet längst upp på skärmen, IOS-växlingsknapparna med mera. Du kan enkelt kopiera och klistra in element i dina designtavlor och skapa exakta prototyper.

Adobe underhåller också några andra användargränssnitt, inklusive watchOS-kompatibla smartwatch-prover, ett e-handelswebbkit och en uppsättning exempel för att skapa digitala applikationer för smartphones. Top 10 Bitcoin och Cryptocurrency Apps för iPhone Topp 10 Bitcoin och Cryptocurrency Apps för iPhone Det är nu lättare än någonsin att köpa Bitcoin, konvertera till altcoins, och till och med investera i ICO, allt från din telefon med kryptocurrency apps. Läs mer . Du måste ladda ner lämpliga användargränssnitt för iOS, Googles materialdesign och Microsoft Windows separat.

En enkel uppsättning inbyggda verktyg

Till skillnad från Adobes andra komplexa grafik- och designprogram har XD ett fint rent användargränssnitt med bara några enkla verktyg. Du har dina grundläggande former: rektanglar, cirklar, linjer och ett pennaverktyg för att skapa egna former. Det finns också ett enkelt textverktyg, med tillgång till Typekit-fontbiblioteket (men inte allt).

Du kan sedan ändra olika attribut relaterade till dessa element, som opacitet, fylla färg, gränser, skuggor och rullningsbeteende. Slutligen finns det ett förstoringsglas och ett tavlor för att expandera din design.

Adobe XD hjälper dig att placera element i estetiskt tilltalande platser av “snäpp” på plats runt kanterna på skärmen, kanlinens mittpunkt och till andra element. Du kan åsidosätta detta om du vill ha det genom att hålla ned en knapp (i Mac-versionen är det Cmd).

Längst upp i appens överkant ser du två växlar: Design och Prototyp. Design är där du kommer att tillbringa större delen av din tid att skapa din vision. Växla till prototypläge för att lägga till olika interaktioner mellan element på skärmen. Du kan utlösa händelser och byta till olika tavlor, vilket ger en enkel upplevelse av användarupplevelse utan att skriva en kodlinje.

Detta görs via ett enkelt drag och släpp-gränssnitt, till exempel: skapa en knapp med cirkelverktyget, skapa en ny tavla med önskat resultat av den knapptryckningen (t.ex. en annan flik i din app), växla till prototypläget och Dra pilen från knappen till din nya tavla. Slå “Spela” knapp eller förhandsgranskning på din levande enhet för att se hur det spelar ut.

Du kan även ange övergångar och effekter för att få det att se ut. Det finns några ganska stora begränsningar för prototypläget. Du kan inte riktigt bli fördjupad med det, men det tjänar ett syfte och det är enkelt att implementera gör det enkelt att använda.

Hur begränsad är den fria versionen av Adobe XD?

Att vara en fri produkt är Adobe XD utformad för att få dig kopplad till sina enkla arbetsflöden och användarvänliga verktyg utan att spendera ett öre. Den största nackdelen med den fria versionen är oförmågan att ha mer än en aktiv delad prototyp eller uppsättning designspecifikationer på en gång.

Så för din första design eller projekt, kan den fria versionen vara tillräcklig. När det gäller att dela fler mönster eller projekt med dina lag- eller apputvecklare kommer du snabbt att träffa en vägg. Du kan alltid exportera dina olika skivor som. PNG-filer gratis, för alltid via Arkiv> Exportera alternativ.

Men den delade prototypen och interaktiviteten mellan tavlor är en av standoutfunktionerna här. Appen är fortfarande användbar utan den, bara inte i samma utsträckning. Du kan inte bygga en helt realiserad prototyp, men du kan snabbt lägga ner din design.

De andra begränsningarna i den fria versionen inkluderar ett begränsat antal Typekit-teckensnitt och 2 GB molnlagring (i motsats till 100 GB) för Creative Cloud-abonnenter. Om du bestämmer dig för att stumpa pengar för den betalda versionen, kommer Adobe XD att kosta dig $ 9,99 / månad för den här appen ensam eller $ 52,99 / månad för hela Creative Cloud-paketet.

Vi tycker att Adobe Creative Cloud är värt pengarna 5 Skäl att köpa Adobe Creative Cloud 5 Skäl att köpa Adobe Creative Cloud Adobes Creative Cloud har många fördelar. Vi har sammanställt en lista med anledningar att investera i Adobe Creative Cloud medan du fortfarande kan. Läs mer, förutsatt att du kan få tillräckligt med användning av det.

Adobe XD är ett överraskande användarvänligt verktyg

Adobe XD är ett användbart verktyg, oavsett om du tänker betala för det eller inte. I vissa fall kan du komma undan med den fria versionen för att arbeta på små personliga projekt. När det gäller allvarligt arbete och delning med lag måste du uppgradera.

Adobe XD är inte det bästa och slutliga hela användargränssnittet. Designers har använt grafikverktyg i flera år för att skapa mockups för webbplatser, appdesigner och mer. Kolla in de bästa Mac-vektorgrafikverktygen för designers på en budget Den bästa vektorprogramvaran för Mac-designers på en budget Den bästa vektorprogramvaran för Mac-designers på en budget Adobe Illustrator kan vara guldstandarden när det gäller vektorprogram för Mac, men du behöver inte alltid spendera en form på designprogramvara. Läs mer för att se några alternativa alternativ.

Utforska mer om: Adobe Creative Cloud, Design.