Adobe XD: Gratis brukergrensesnitt og UX designverktøy du kan bruke akkurat nå

Annonse

Det er ikke ofte du forbinder Adobe med "gratis" nedlastinger, men det er akkurat det selskapet har gjort med Adobe XD. Det er en rask prototyping-app for grensesnitt for mobile enheter og nettsteder, slik at designere raskt kan komme med design for spesifikke plattformer.

Det beste med Adobe XD er hvor enkelt det er å bruke. Selv om du har liten erfaring med å designe noe, er det bare en veldig gradvis læringskurve som holder deg tilbake.

Til og med brukergrensesnittet er forfriskende, uten alle verktøyene og panelene som setter så mange av apper som Photoshop, Illustrator og Lightroom 15 gratis alternativer til Adobe Lightroom, Illustrator og PhotoshopVil du skaffe deg Adobe Photoshop, Lightroom eller Illustrator gratis? Her er noen av de beste Creative Cloud-alternativene. Les mer . I denne artikkelen vil vi introdusere deg for Adobe XD og forklare hva du kan og ikke kan gjøre med det.

Hva er Adobe XD?

Adobe XD er et designverktøy. Den bygger ikke appen din for deg, men den vil hjelpe deg å presentere en visjon eller en prototype for hvordan du vil at neste mobil- eller nettbrett-app, nettsted eller annet brukergrensesnitt skal se ut. Appen bruker tavler - i hovedsak skjermmodeller - for å gi en visuell representasjon av apputformingen din.

Opprette mobilapper Lag din første mobilapp med disse rabatterte kursbunteneHar du det som trengs for å utvikle den neste store iOS- eller Android-appen? Disse sterkt nedsatte kursbuntene vil lære deg hvordan det gjøres! Les mer og nettsteder som fungerer kan ta mye teknisk kunnskap. Adobe XD gir deg verktøyene for å gjøre en idé om til et bevis på konsept. Når du er ferdig, har du en blåkopi som du kan jobbe med, og en kan du finpusse uendelig til du er fornøyd med designet.

På samme måte som konseptkunst er så viktig i kreative bestrebelser (se dette vakker konseptkunst for videospill Hvor finner du vakre konseptkunst for videospill på nettetVil du se noe av den vakre konseptkunsten bak favorittspillene dine? Her er videospillets kunstressurser til din disposisjon! Les mer som bevis), er et konseptbevis for ønsket grensesnittdesign viktig når det gjelder programvare- og nettstedkonstruksjon. Å gi programmerere et konsept som så nøye samsvarer med det ferdige produktet, er en fin måte å samordne forventningene dine med det som er mulig.

Det beste av alt appen er designet på en slik måte at alle kan bruke den. Enten du er en erfaren designer, en programmerer, eller noen som mangler begge disse ferdighetene; Adobe XD kan bygge bro mellom visjonen og teknisk kunnskap. Det trenger du ikke en gang lære å kode Lær å kode ved å blande eksisterende apper gratisDette nettstedet lar deg opprette eller remikse apper, slik at du kan være kreativ uten frykt for å ødelegge noe. Les mer å designe en app.

Hva kan Adobe XD gjøre?

Adobe XD er designet med noen få spesifikke applikasjoner i tankene, men du kan også tenke utenfor boksen. Appen gjør ting enkelt ved å inkludere maler for:

• Smartphone-apper: Fra iPhone 5 og SE til de aller nyeste modellene; og en generisk Android-mal også.
• Nettbrett-apper: Med maler for iPad, begge størrelsene på iPad Pro, Surface Pro 3 og 4, og en generisk Android-nettbrettmal.
• Nettsteder / webapper: Med noen få forhåndsinnstillinger å velge mellom, inkludert Full HD.

Du trenger ikke holde seg til disse malene, de er bare der for å gjøre livet ditt enklere. Du kan også spesifisere en helt tilpasset grensesnittstørrelse (dvs. skjerm), og begynne å designe for omtrent hvilken som helst plattform du kan forestille deg.

Hvis du designer en mobilapp, kan du laste ned den gratis Adobe XD-appen for plattformen din og eksportere designene dine for en direkte forhåndsvisning på enheten din.

UI-sett gjør livet enda enklere

Hvis du tenker på designe for iOS 7 grunner til at det raske programmeringsspråket er verdt å læreDu burde lære Swift programmeringsspråk før og senere hvis du ikke vil sitte igjen. Her er noen gode grunner som kan overbevise deg. Les mer , Android, Windows eller en annen godt etablert plattform; Du kan bruke UI-sett for å få en hjelpende hånd. Dette er i hovedsak prosjektmaler vedlikeholdt av Apple, Google, Microsoft og andre, som kan lastes ned i Adobes .XD-filformat.

Med UI-sett kan du øke hastigheten på produksjonen, slik at du kan designe appen din innenfor de begrensningene og vanlige elementene du ser på din valgte plattform. Siden de blir vedlikeholdt av plattformutviklerne, er de generelt alltid oppdaterte og grundige.

Apples iOS UI-sett inkluderer for eksempel blankskjermdimensjoner for en rekke enheter, eksempler på iOS-tastatur, navigasjonselementer som båndet øverst på skjermen, iOS-knappene og mer. Du kan enkelt kopiere og lime inn elementer i designartiklene dine, og lage nøyaktige prototyper.

Adobe vedlikeholder også noen få andre brukergrensesnitt, inkludert watchOS-kompatible smartwatch-prøver, et nettkortsett for e-handel og et sett med eksempler for å lage apper for smarttelefoner med digital valuta Topp 10 Bitcoin- og Cryptocurrency-apper for iPhoneDet er nå enklere enn noen gang å kjøpe Bitcoin, konvertere til altcoins og til og med investere i ICO-er, alt fra telefonen din med cryptocurrency-apper. Les mer . Du må laste ned det aktuelle UI-sett for iOS, Googles materialdesign og Microsoft Windows hver for seg.

Et enkelt sett med innebygde verktøy

I motsetning til Adobes andre komplekse apper for grafikk og design, har XD et rent, rent brukergrensesnitt med bare noen få enkle verktøy. Du har grunnleggende former: rektangler, sirkler, streker og et pennverktøy for å lage tilpassede figurer. Det er også et enkelt tekstverktøy med tilgang til typekit-fontbiblioteket (men ikke det hele).

Du kan deretter endre forskjellige attributter relatert til disse elementene, for eksempel opacitet, fyllfarge, grenser, skygger og rulleatferd. Endelig er det et forstørrelsesglass og et tegnebrettverktøy for å utvide designet.

Adobe XD hjelper deg å plassere elementer på estetisk behagelige steder ved å "knipse" på plass rundt kantene på skjermen, midtpunktet på lerretet og til andre elementer. Du kan overstyre dette hvis du vil ved å holde en knapp nede (i Mac-versjonen er den cmd).

Langs appens øverste kant ser du to veksler: Design og prototype. Design er der du vil bruke mesteparten av tiden din på å skape din visjon. Bytt til prototypemodus for å legge til forskjellige interaksjoner mellom elementer på skjermen. Du kan utløse hendelser og bytte til forskjellige tegnebrett, noe som gir en enkel brukeropplevelse uten å skrive en kodelinje.

Dette gjøres via et enkelt dra-og-slipp-grensesnitt, for eksempel: opprett en knapp med sirkelverktøyet, lag et nytt tegnebrett med ønsket resultatet av den knappetrykk (f.eks. en annen fane i appen din), bytt til prototypemodus og dra pilen fra knappen til den nye artboard. Trykk på "Spill" -knappen eller forhåndsvis på den levende enheten din for å se hvordan den spiller ut.

Du kan til og med spesifisere overganger og effekter for å få det til å se ut. Det er noen ganske store begrensninger for prototypemodus. Du kan egentlig ikke komme for dyptgående med det, men det tjener et formål og den enkle implementeringen gjør det enkelt å bruke.

Hvor begrenset er gratisversjonen av Adobe XD?

Som et gratis produkt er Adobe XD designet for å få deg tilkoblet den enkle arbeidsflyten og brukervennlige verktøyene uten å bruke en krone. Den største ulempen med gratisversjonen er manglende evne til å ha mer enn en aktiv delt prototype eller sett med designspesifikasjoner samtidig.

Så for ditt første design eller prosjekt kan gratisversjonen være nok. Når det gjelder å dele flere design eller prosjekter med teamet ditt eller apputviklere, vil du raskt slå en vegg. Du kan alltid eksportere forskjellige artboards som. PNG-filer gratis, for alltid via Fil> Eksporter alternativ.

Imidlertid er den delte prototypingen og interaktiviteten mellom tegnebrett en av de fremtredende funksjonene her. Appen er fremdeles nyttig uten den, bare ikke i samme grad. Du kan ikke bygge en fullstendig realisert prototype, men du kan raskt legge ned designet.

De andre begrensningene i gratisversjonen inkluderer et begrenset antall Typekit-skrifter, og 2 GB skylagring (i motsetning til 100 GB) for Creative Cloud-abonnenter. Hvis du bestemmer deg for å stumpe opp pengene for den betalte versjonen, Adobe XD vil koste deg $ 9,99 / måned for denne appen alene eller $ 52,99 / måned for hele Creative Cloud-pakken.

Vi tror Adobe Creative Cloud er verdt pengene 5 grunner til å kjøpe Adobe Creative CloudAdobes Creative Cloud har mange store fordeler. Vi har samlet en liste over grunner til å investere i Adobe Creative Cloud mens du fortsatt kan. Les mer , forutsatt at du kan utnytte det nok.

Adobe XD er et overraskende brukervennlig verktøy

Adobe XD er et nyttig verktøy, enten du har tenkt å betale for det eller ikke. I noen tilfeller kan du slippe unna med gratisversjonen for å jobbe med små personlige prosjekter. Når det gjelder seriøst arbeid og deling med team, må du oppgradere.

Adobe XD er ikke alt og slutt på UI-design. Designere har i flere år brukt grafikkverktøy for å lage mockups for nettsteder, appdesign og mer. Sjekk ut beste Mac-vektorgrafikkverktøy for designere med et budsjett Den beste vektorprogramvaren for Mac-designere med et budsjettHer er den beste vektorprogramvaren for macOS som du kan bruke gratis eller kjøpe på et budsjett. Perfekt for moderne designere! Les mer å se noen dyktige alternativer.