Going Material med Gravit Designer

At starte et nyt projekt er ikke altid en let opgave, men med de rigtige værktøjer i de rigtige hænder bliver arbejdet en glæde, og resultatet bliver meget tilfredsstillende. Da vi har de rigtige hænder, er det eneste, vi skal gøre nu, at finde de rigtige værktøjer. Og hvis du er en Windows-bruger som mig, er der ikke noget bedre værktøj til UI-design end Gravit Designer, uanset om du har brug for at designe en mobilapp eller måske endda et websted.

Lad os nu tage en mobilapp, nærmere bestemt en Android. Og hvis du ikke er ny med Android-appdesign, skal du først læse nogle, selv tage nogle kurser, og ofte ender du med at lande på Googles eget Material Design-websted defineret som "et samlet system, der kombinerer teori, ressourcer, og værktøjer til udformning af digitale oplevelser ”. Her er en kort forklaringsvideo, som du helt sikkert vil nyde:

Træt af al teorien? Selvfølgelig er du, vi havde masser af det i skolen. Da praksis ikke gør os perfekte, men bedre med sikkerhed, vil du hoppe lige i produktivitetstilstand. Når vi går ned på kaninhullet på material.io finder vi afsnittet "Retningslinjer og ressourcer" med alle specifikationer, vi har brug for, fra farvepaletter til layoutskabeloner og endda skygger.

Og hvilken bedre måde at starte et nyt projekt på end at åbne komponentklistermærket og tage alle de elementer, vi har brug for? Vi har klistermærker til Sketch, Adobe XD, After Effects, Photoshop og endda Illustrator. Men vent, hvor er Gravit-komponentens klistermærke? Det er rigtigt, der er ikke en, måske i fremtiden vil Google frigive en, så i mellemtiden gik jeg videre og lavede en selv.

Gravit Material UI Kit

Med inspiration fra det officielle Google Material Design Sticker Sheet plus et par ekstra ting blev Gravit Material UI Kit født. Sættet fås som open source på GitHub og kan downloades herfra.

Det fantastiske ved dette ark er, at det er mere end et UI-kit, for udover de sædvanlige komponenter har vi også fået skærmguider og typografi. Så lad os dykke lidt dybere og se nærmere på nogle af elementerne, der er inkluderet i dette sæt.

Typografi

Fordi vi skal vise skriftlige oplysninger hele tiden i vores apps, begynder vi med typografispecifikationerne. Roboto er standard skrifttypen til Android-systemer, men det er på ingen måde det eneste skrifttype, der fungerer med Material Design. Da typografi forstærker karakter, er det bedste skrifttype det, der siger noget om mærket eller den app, vi udvikler. Selvom det ikke er min foretrukne skrifttype, fungerer Roboto godt i mange situationer, da det er en meget alsidig skrifttype med seks vægte fra tynd til sort.

Så det er en dejlig skrifttype til at begynde med, at vi let kan skifte senere ved at bruge en pæn funktion i Gravit kaldet Delt stil, men vi kommer tilbage til dette om et øjeblik. Der er alle de grundlæggende fontformater og -størrelser i dette sæt plus de anbefalede opaciteter i forskellige situationer.

Skærmguider

Derefter finder vi skærmguiderne, der er meget vigtige for at justere UI-elementerne på skærmen. Her har vi både lodrette afstandsregler og vandrette keyliner og margener. For at bruge disse skal du bare oprette et nyt dokument til Android (skabelonen kaldet Nexus 5 fungerer fint) og kopiere / indsætte den krævede skærmguidegruppe fra UI-kittet. Alle guider-grupper bruger “Multiply” -blandingstilstand, så vi kan se gennem vores nuværende design, som vi arbejder på.

komponenter

Og da der ikke er noget UI-design uden UI-elementer, indeholder sættet alle de vigtigste materialekomponenter som lister, gitre, underretninger, tastaturer, kort, værktøjstip med mere. Alle komponenter er pænt grupperet og organiseret, så brugeren får en hurtig arbejdsgang og en nem måde at tilpasse dem på.

Nu hvor vi har de rette "materialer" at arbejde med, lad os vende tilbage til vores værktøj og se, hvordan Gravit Designer kan gøre vores liv lettere, mens vi designer UI og gør hele processen til en fornøjelig oplevelse.

Brug af værktøjet

Som ethvert nyt nyt digitalt værktøj, graver Gravit pænt fra etableret software, men tilføjer nok unikke funktioner til at skille sig ud fra mængden. På denne måde er det virkelig let at skifte fra et tidligere værktøj, især når alle de almindelige genveje, værktøj og paneler allerede er der. Men langt den bedste funktion er ... tværplatform. Dette betyder, at du kan bruge dit foretrukne UI-værktøj enten på en Mac eller på en pc, der kører Windows eller Linux, og hvis du ikke kan lide at installere ny software, kan du endda bruge det lige fra browseren. Temmelig pæn, ha? Plus alt det arbejde, du opretter, kan du gemme det gratis i Gravit Cloud. Lad mig nu vise dig et par tricks, hvor Gravit kan gøre dit liv lettere som UI-designer.

Delte stilarter. De fleste UI-apps bruger en slags liste til at vise gentagne oplysninger. Her er hvor delte stilarter er nyttige. Lad os sige, at vi har indbakke-skærmen til en e-mail-app, hvor vi let ønsker at ændre emnestilen for al beskeden. Vælg bare det første emne, indstil skrifttypen ordentligt og opret en ny delt stil. Nu vælger vi de andre emner og anvender den nyoprettede delte stil. Ændring af et emne vil ændre dem alle. Vi kan bruge denne funktion til at oprette delte stilarter til enhver type objekt, da de kan huske objektets stil, udfyldning, kant, effekter eller tekst.

Transform panel. At flytte og duplikere objekter er noget, vi gør hele tiden som UI-designere, og for at hjælpe os med disse opgaver giver Gravit et dejligt panel med en masse muligheder. Lad os sige, at du er nødt til hurtigt at duplikere og placere et objekt efter det andet. Virkelig let ... bare indtast koordinaterne og antallet af kopier og tryk på "Anvend", så er du færdig.

Drop Shadow. Problemet med ældre software til grafisk design er, at de stadig bruger ældre effekter, som ikke let konverteres til CSS. Dette kan være et problem, mens du arbejder med web- og appudviklere. I dette tilfælde har vi en smart implementering af effekterne inklusive vores elskede Drop Shadow. Alt hvad vi har brug for er 4 parametre og en farve, og der har vi en dejlig skygge. Og hvis en skygge ikke er nok - da vi er nødt til at tilføje en klemme af realisme til vores design - kan vi naturligvis tilføje en masse mere, indtil vi får det helt rigtigt.

Et sidste trick, jeg vil overlade dig til. Lad os sige, at vi har oprettet en flot knapstil og vil se, hvordan den kan se ud på en anden form. Intet kan være lettere. Vælg vores stilform og tryk på Ctrl + C (Cmd + C på en Mac) bare tegne en anden form - en cirkel måske - tryk på F4, og du er færdig.

Og en sidste ting, jeg lover det er den sidste: Officielle tutorials. Skør ret !? For at hjælpe nye brugere med at tilpasse sig det nye værktøj har vi videoer fra de grundlæggende til mere avancerede emner.

Forhåbentlig nød du læsningen og sørg for at holde øje med vores for den nyeste version, da hver nye udgivelse bringer nye fantastiske funktioner, forbedringer og selvfølgelig fejlrettelser.

Hjemmeside | Facebook | Twitter | Forum