UI-udvikling er et koncept, der ikke er veldefineret rundt om på internettet. En ting, vi alle er enige om, er, at UI står for Brugergrænseflade; derfor er en UI-udvikler en person, der er ansvarlig for at designe og udvikle brugergrænsefladen. Lyder let, ikke? Desværre er beskrivelsen af denne jobfunktion ikke så enkel.
I denne artikel undersøger jeg rollen som en UI-udvikler i betragtning af definitionen af jobfunktionen såvel som det krævede software og grafiske designværktøjer, primære ansvarsområder, og hvordan man bliver en. Yderligere, vi ser dybtgående på, hvordan UI-udviklingsprincipper kan bidrage til frontend og bidrage til oprettelsen af ekstraordinære brugergrænseflader.
Hold øje med for at finde ud af mere om den fantastiske verden af UI-udvikling!
Som nævnt er en UI-udvikler en person, der designer og udvikler brugergrænsefladen til en webapplikation. Men for klart at forstå, hvad en UI-udvikler virkelig er: det er først vigtigt at forstå forskellen mellem UX, UI, og frontend.
For det første, i både UI og UX, er målet altid at levere den bedst mulige brugeroplevelse. Som ofte misforstået, er dette ikke et eksklusivt ansvar for UX designere. I modsætning til UI er UX mere optaget af, hvordan en brugeroplevelse mærker og hvad brugerne opfatter fra en interaktion med produktet (hjemmesider og apps). Med andre ord, mens UX fokuserer på de psykologiske aspekter af oplevelsen, forstår og kortlægger, hvordan brugeren navigerer gennem et produkt, på et kognitivt niveau. På den anden side fokuserer UI-design på visuelt at oversætte denne oplevelse til en visuel grænseflade, der beskæftiger sig med look & feel, layout, brandretningslinjer, tilgængelighed osv. Derfor er UX-design tæt knyttet til brugerforskning og informationsarkitektur, mens UI-design er relateret til det grafiske layout.
UI udviklere tage den vejledning og vision, der genereres i UX forskning sikre, at brugerne har de nødvendige navigationselementer for at nå deres mål og behov, mens de interagerer med produktet. Disse navigationselementer er skabt i henhold til designkoncepter og kan omfatte menuer, knapper, farver, skriftstørrelse, illustrationer, tekst osv. Nu hvor en UX-designer og UI-udviklers jobroller er mere eksplicitte, opstår det andet spørgsmål: Hvad er forskellen mellem UI og frontend?
Mens nogle siger, at jobbet for en UI-udvikler er processen med at designe produktet, hævder andre, at det er jobbet med en front-end, plus kodning og bringe designet til live. På den anden side ved Imaginær sky, vi hævder, at det er en blanding af begge dele! Derfor er en UI udvikler er en Front-end udvikler med kendskab til UI principper og koncepter, der kan lave mere enkle projekter, hvis det er nødvendigt.
Det er svært at skelne en UI-udvikler fra en front-end-udvikler, fordi de begge arbejder på, hvordan et websted eller en app vises på brugernes desktop-enheder. En UI-udvikler sigter mod at give brugeren digital software, der gør interaktionen mellem brugeren og computeren enkel, let at navigere og sjov. Samlet set fokuserer UI på at engagere brugeren i en positiv hjemmeside- eller appoplevelse, hvilket gør det ekstremt værdifuldt at udvikle stærke designfærdigheder og indgående viden om, hvordan digitale grafiske elementer kommunikerer med brugeren.
Tilsvarende (men ikke helt det samme) integrerer front-end-udviklere visuelle elementer i websteder og apps, så brugerne let kan interagere og navigere ved at implementere design gennem kodningssprog.
Hos Imaginary Cloud mener vi, at en UI-udvikler er en blanding af begge verdener (front-end og design). Det refererer til nogen, der er i stand til at kombinere programmeringsevner med kreativt design og indgående kendskab til begreber og principper. Fortsæt med at læse for at finde ud af de bedste værktøjer, når du arbejder på Brugergrænseflade på et websted.
Som tidligere nævnt skal gode UI-udviklere være godt bekendt med begge design og webudvikling færdigheder. Ideelt set kan de arbejde med softwareværktøjer til grafisk design, som Adobe XD, Sketch og Figma. Disse værktøjer er praktiske til at designe digitale elementer, oprette designsystemer og er også en fantastisk måde at holde grænseflader konsistente på.
Ud over disse værktøjer skal en UI-udvikler arbejde med webteknologier. Typisk inkluderer det at have en god forståelse af, hvordan man arbejder med HTML, CSS, og JavaScript. Yderligere viden om AJAX, jQuery og JSON kan også være gavnligt. Desuden vises nye webudviklingsværktøjer (såsom MaterialUI, CodePen, Chrome Dev Tools, Sass osv.) løbende og kan være yderst nyttige, når du producerer en grænsefladeoutput.
Når du arbejder på brugergrænsefladen på et websted eller en app, er det også værdifuldt at have et æstetisk og intuitivt øje for det visuelle. På trods af de tilgængelige UI-teknologier kan ingen software eller værktøj bedre træne denne evne end designeren eller udvikleren. Designkoncepter og principper vedrørende farver, typografi, mønstre og afstand kan hjælpe med at konstruere brugerens perspektiv, når de interagerer med et produkt.
I forlængelse af at få det til at se godt ud, gør UI-udviklere også produkter så intuitive, at oplevelsen er helt ubesværet og glat. Således er en vital færdighed at være empatisk. Empati giver UI-udviklere mulighed for at sætte sig selv i brugernes sko og dybt forstå deres behov og ønsker, når de interagerer med et produkt. Denne forståelse kan hjælpe med at tilpasse brugernes forventninger til webstedets eller appens ydeevne, hvilket resulterer i højere tilfredshed.
Yderligere har UI-udviklere en tendens til at være meget perfektionistiske med hensyn til, hvordan tingene ser ud og fungerer. Derfor er de godt klar over forskellen, som en „tilsyneladende ikke så vigtig“ detalje kan have. Faktisk er detaljerne ofte deres mesterværker, hvorfor en god UI-udvikler har et unikt øje for dem.
Som sagt før er UI-udviklere hverken designere eller frontend-udviklere. Alligevel er deres funktioner imellem og bidrager stort til at gøre et websted eller en app ikke kun funktionel, men også med fremragende præsentation. Overordnet set er deres hovedmål at producere en kvalitet grænseflade output som forstår brugeradfærd.
For at gøre dette kan nogle af de vigtigste ansvarsområder, som en UI-udvikler have, omfatte:
Som vi kan se, kan rollen som en UI-udvikler være ekstremt alsidig og spændende. Hvert trin kræver øje for detaljer og kreativitet tilpasset funktionalitet, brugernes adfærd og forretningsmål. Fortsæt med at læse for at finde ud af, hvordan du bliver en.
Vi ved allerede, at en UI-udvikler er en blanding af design og udvikling; der er således mere end én vej til at blive en. Når du arbejder i brugergrænsefladen af et produkt, god viden og forståelse af designprincipper, branding, og brugerundersøgelser er væsentlige komponenter. Derfor er en grad i grafisk design ofte en fantastisk måde at starte en UI-karriere på, da det vil danne grundlaget for oprettelse af digitale produkter.
Almindeligvis kan en UI-udvikler også begynde en karriere ved at tage en datalogisk grad med en specialisering i front-end. Dette er en fantastisk måde at tilegne sig flere tekniske færdigheder ved at lære programmeringssprog og beregningskoncepter. Plus, det giver udviklere mulighed for at forstå de forskellige roller inden for et webudviklingsteam, hvilket forbedrer kommunikationen på tværs af teammedlemmer.
Selvom en grad i grafisk design eller datalogi er et vigtigt første skridt til at blive en UI-udvikler, er der stadig mange skridt at tage for at kombinere begge færdigheder. Det betyder, at en UI-udvikler med baggrund i grafisk design skal lære programmeringssprog, og en udvikler med webudviklingsevner skal tilegne sig designprincipper. Desuden behøver man ikke nødvendigvis at følge en formel uddannelse for at blive en UI-udvikler. Andre muligheder kan også give viden og værktøjer til at vokse professionelt.
Som et alternativ til en traditionel grad er der adskillige kurser og certificeringer (begge i design og webudvikling) man kan komme enten online eller i nærvær. Disse alternativer er normalt mere fokuseret på de specifikke værktøjer og viden, som jobfunktionen kan kræve. Derudover er disse kursers praktiske side en fantastisk måde at opbygge en personlig portefølje fra dag ét og interagere med andre UI-udviklere.
På trods af den uddannelse og formelle uddannelse, hver person har, er det afgørende at udvikle en kritisk visuel kultur og vise den gennem en komplet, alsidig og velstruktureret portefølje, som også afslører tekniske færdigheder.
Kort sagt, en UI-portefølje er en mulighed for at vise sig frem. Når du ansøger om et job eller direkte til en ny klient, er porteføljen det, der gør hele forskellen. Det samler og præsenterer udviklernes personlighed, såvel som deres designbeslutninger, kreativitet, tekniske færdigheder og samlede erfaring inden for forskellige domæner.
En fremragende portefølje skal være klar, let at følge, engagerende og æstetisk tiltalende. Dette er nøgleegenskaber, som hver UI portefølje skal overvejes og bruges som retningslinjer. Udover at præsentere og samle de bedste projekter, er den måde, disse projekter er struktureret på i hele porteføljen, også afgørende, hvorfor nogle UI-udviklere ofte er meget usikre på de bedste tilgange, især i starten.
For at overvinde denne (indledende) kamp, forske og at bruge andre porteføljer som inspiration kan hjælpe med at finde en unik stemme. Et andet godt tip til at skabe en fremragende portefølje er at bede om ærlig feedback fra andre UI-udviklere og venner (eller endda folk, man måske ikke kender særlig godt), da de vil kommentere i henhold til deres sandfærdige brugeres perspektiv.
Brugergrænsefladen er den første ting, en bruger ser, når han interagerer med produktet. Hvis det ikke er tiltalende og let at bruge, vil brugeren gå væk uden at overveje de fantastiske produktfunktioner. Det svarer til at bedømme en bog efter dens omslag! Derfor skal en front-end-udvikler lære UI og designprincipper for at hjælpe med at udvikle et bedre og dermed et succesfuldt produkt.
Derudover vil en designforståelse også forbedre forholdet mellem udviklere og UI/UX-designere, da begge sider vil forstå årsagen bag et bestemt design. En god måde at forbedre denne forståelse på er ved at læse opdateret designbøger og vær opmærksom på de nyeste trends. Som en front-end, med denne viden om UI-principper vil hjælpe med at:
Normalt bruges UI-principperne udelukkende til design, og mange forskellige lister kan guide os gennem denne proces. I dag vil vi besøge nogle af dem om udviklingsmetoden for at se, hvad en front-end-udvikler kan tilføje til produktet og gøre det bedre.
En af de første ting, du ser på hver liste, der styrer UI-design, er konsistens. Hele platformen skal se ens ud, så brugeren kan oprette en nøjagtig mental model af produktet og hurtigt forstå, hvad han kan gøre med det. Dette aspekt er synligt i designet ved at have lignende former, farvepaletter og defineret typografi. Konsistens kan være nøglen til en problemfri implementering, da det giver mulighed for at genbruge elementer, adfærd og udseende. Men det kan også være en kamp, når man beskæftiger sig med vinduer i forskellige størrelser.
Hvis du har mulighed for at bruge SCSS i stedet for traditionel CSS, skal du gå efter det! Med Sass, du har variabler, der gør det muligt nemt at ændre en værdi, der bruges overalt uden at søge og bekymre sig om muligheden for at gå glip af den. Bare giv den tilsigtede værdi til en variabel og brug den, hvor du vil. De er perfekte til at definere farvepaletten, typografi og mere komplekse ting som skygger eller gradienter.
Hvis du vil gemme og genbruge flere oplysninger end en simpel værdi, kan man bruge Sass @mixin og @include til at have flere klasser, der indeholder lignende typografier. Brug @mixin til at definere det format, du vil genbruge, og brug derefter @include til at få formatet anvendt på måleelementet.
Når du implementerer et design, er det let at holde sig til de nøjagtige værdier eller tilnærmelser. Det ser perfekt ud i starten, men hvis du prøver at lege med vinduesstørrelsen, især bredden, vil du hurtigt indse, at det ikke fungerer korrekt i alle tilfælde. Ting kan skæres ud af webstedet eller sendes til et ikke-tilsigtet sted, et rigtigt mareridt!
Den første ting at huske på er breakpoints. De giver mulighed for at omstyle komponenter fra en bestemt vinduestørrelse, perfekt til at style to forskellige versioner af en side, som desktop og mobil. Med det kan man have nogle ændringer i mobilversionen uden at skulle duplikere HTML for at oprette to forskellige stilarter.
For mellemstørrelser skal du sørge for, at strukturen er fleksibel og reagerer på breddeændringer. Ikke alle bruger deres browser på fuld skærm. I stedet for at bruge nøjagtige breddeværdier, prøv at bruge relative længdeenheder som procenter. Hvis designet har en side med 2000px og et element, der optager 1400px med margener på 300px på hver side, skal du bruge en 70% bredde og margen på 15% i stedet.
Bootstrap, en CSS-ramme, kan også hjælpe med begge disse tilfælde. Den har kolonneklasser, der kan bruges i forskellige vinduer og tilpasses den aktuelle tilgængelige bredde. Tjek nedenfor eksemplet på det samme layout stylet med procentdele (til venstre) og faste værdier (til højre). Brug størrelsen på hvert element (et gråt område, nederste højre hjørne) for at se, hvad der sker i hvert enkelt tilfælde.
De fleste gange beregnes et systems effektivitet gennem den tid, en bruger bruger på at udføre en opgave, og antallet af involverede klik. Hvis systemet bruger velkendte udtryk og har sine lag veldefineret og organiseret, vil brugeren hurtigt nå sit mål. UI/UX-designet har en enorm indflydelse på at sikre, at brugeren ved, hvor han skal hen. Men der er et par ting, du kan gøre, som UI-udvikler, for at fremskynde brugeroplevelsen og reducere antallet af klik.
Når du udfylder en formular, kan brugerne prøve at klikke på navnet på input (label) i stedet for selve indgangen. Hvis du ikke forbinder etiketten med input, skal brugeren foretage et andet klik for at udfylde feltet. Dette kan let løses ved at definere et „id“ på input og et „for“ på etiketten, som nedenfor.
Stadig relateret til formularer, når du indtaster en side, hvor hovedmålet er at indtaste nogle oplysninger, er arbejdet halvt færdigt, hvis det første felt allerede er valgt. Autofokus dit første/vigtigste felt for at fjerne et enkelt klik fra processen. Dette fungerer på både desktop og mobil. På den sidste åbner dette automatisk tastaturet. Selvfølgelig vil nogle af dine brugere stadig klikke på det, men især på login-sider kan dette forkorte den brugte tid! Brug af attributten autofokus på input vil fokusere på input, når siden er indlæst. JavaScript og Jquery kan også bruges til at gøre det ved at vælge element-id og bruge „.focus ()“.
En af de ting, der mest irriterer brugerne, er at se et afsnit, der ser ud til at være klikbart, men så fungerer kun teksten (hyppigt på mange mobile versioner af menuer). Disse ting skaber forvirring og frustration og kan tilskynde brugeren til at forlade. Sørg for, at alt, hvad der formodes at være klikbart, faktisk er! Hvis du har en stor knap med en lille tekst inde, forventes det, at hele knappen vil udføre handlingen og ikke kun det rum, hvor teksten er. Nedenfor er der et eksempel på det: i venstre side, en menu, der lader os „klikke“ på hulrækken og til højre tillader kun at klikke på teksten.
Normalt ser ting, der har den samme opførsel på en brugergrænseflade, ens ud. Elementer relateret til hinanden og genstande, der ikke er relaterede, er forskellige og adskilt fra hinanden. Udover typografi, farve og form formidler hvid plads denne følelse af nærhed og relation, når vi ser på brugergrænsefladen. Det hjælper siden med at trække vejret og reducerer mængden af information, brugeren modtager på én gang, hvilket gør det lettere at beslutte, hvad der skal gøres næste gang.
Hvis du laver designet selv, skal du huske på, at hvidt rum fungerer som en usynlig kant. Hvis du føler, at du har brug for en grænse for at adskille disse to sektioner, er måske alt hvad du behøver, hvidt rum! På den anden side, hvis du implementerer et design, så prøv at respektere proportionerne og mængderne af hvidt rum - de er der af en grund. Brug relative længdeenheder, så proportionerne holdes på bredden og anvender nøjagtige højdeværdier. En margin på 47px er præcis det, ikke 45px eller 50px. Vær særlig forsigtig, når du giver margin/polstring til et element. Hvis der er en anden lukning, der allerede har disse attributter udfyldt, skal du lave matematikken, så du bruger den rigtige mængde plads til sidst.
Det er vigtigt at informere brugerne om, hvad de kan gøre for, rapportere, hvad de laver, eller endda hvad de har gjort. Giv feedback om systemets status, når f.eks. en handling er gennemført med succes, eller når noget tager længere tid end normalt. Uanset hvad der sker, skal du altid informere brugeren. Fortæl dem alle disse ting, så de ikke tvivler på resultaterne af deres handlinger.
Markørbilleder er standarder, vi beskæftiger os med hver dag. Når vi ser en bestemt markør, ved vi, hvilken type handling den repræsenterer. På grund af det, når vi ikke bruger den forventede type markør, forvirrer vi brugerne. Hvis noget er klikbart, forventer vi en markørtype markør. Hvis det er trækbart, forventer vi en åben hånd efterfulgt af en lukket hånd osv. Sørg for, at du bruger højre markør på brugerdefinerede elementer og udnyt de HTML-elementer, der allerede har disse og andre egenskaber defineret.
Animationer bruges ikke udelukkende til at få tingene til at se pænere ud. De kan være praktiske, når de anvendes på små elementer og give følelsen af kontinuitet, handling og fremskridt. Brugeren er mere tilbøjelig til at huske, hvad han lige har gjort, hvis han husker at have set noget ændre sig lidt efter lidt i stedet for alt på én gang. Det perfekte eksempel på dette er animationen af tænd/sluk-knapperne: Hvis du ser knappen ændre sig ved klikket, vil du sandsynligvis stille spørgsmålstegn ved dig selv, om du klikkede på den eller ej, og begynde at tvivle på, hvordan knappen var før. Men hvis du har en animation, vil du huske flere tilstande af denne overgang og være opmærksom på, hvad der lige er sket.
Animationer kan også være meget nyttige, når du fortæller, hvad der sker bag gardinet. Hvis brugerne anmoder om en handling, der tager længere tid at udføre, skal du give dem en ventende animation i stedet for en tom side (eller den samme, der senere ændres). Du kan bruge ting som en indlæsningscirkel eller en statuslinje for at lade brugeren vide, at det ikke er et problem. Det tager bare længere tid.
Sidst men ikke mindst, hvis du arbejder med frontend udvikling, skal du tale med UI/UX-designer. Der kan være gode forslag, der aldrig kom ind i et papir, og som let kan implementeres for at bringe værdi til produktet. Hvis du kæmper med implementeringen af noget særligt, skal du kontakte designteamet og give eventuelle forslag, du måtte have, så du kan finde en fremragende løsning sammen.
Selvom du designer selv, skal du konsultere en UI/UX-designer for at hjælpe med at påpege dine arbejdsfejl. På denne måde vil du bedre forstå, om tingene er malplacerede, om størrelserne er rigtige, og muligvis fremragende forslag, som du aldrig ville tænke på.
Her på Imaginær sky, arbejder vores front-end udviklere og UI/UX designere tæt sammen om at designe og implementere løsninger til nye projekter. Vores front-end-udviklere forstår også UI-principper for at tale designsproget og komme med værdifulde forslag.
Tror du, du kunne have brug for en hånd? Send os en linje her!
På trods af lighederne er en UI-udvikler hverken en front-end eller en designer. Disse jobfunktioner misbruges ofte i flæng, og derfor kan deres specifikke ansvar blive forvirret. For os er en UI-udvikler en blanding, og det er netop denne dualitet, der gør jobets essens så spændende og udfordrende.
UI-udvikling kræver både design og beregningsviden. Således ønskes en god forståelse af teknologier (såsom HTML, CSS og JavaScript) samt yderligere grafiske designværktøjer (f.eks. Adobe XD og Sketch) og veludviklet visuel kultur. En god UI-udvikler kan kombinere funktionalitet og navigation med smuk æstetik. For at skabe en fantastisk brugergrænseflade er det desuden vigtigt at have en dybdegående forståelse af brugeradfærd, som kan opnås gennem brugerforskningspraksis.
Når man begynder at få erhvervserfaring på dette område, er det desuden vigtigt at holde en velstruktureret portefølje, der udviser tekniske færdigheder, kreativitet og personlighed. En klar og enestående portefølje kan være en game-changer, når du ansøger om job eller direkte til kunder. Endvidere kan løbende forbedring af færdigheder og opnåelse af nye være meget fordelagtigt.
Selv om en UI-udvikler er ikke det samme som en front-end, front-end-udvikling bør bestemt være opmærksom på deres designfærdigheder og viden. UI-principper, såsom konsistens, effektivitet i brugen og gennemsigtighed, kan bidrage enormt til en brugers oplevelse, når de navigerer i en webapplikation.
Samlet set kan det at holde åben kommunikation med UX-designere, UI-udviklere og front-end-udviklere gavne et projekts resultat og individuel faglig vækst.
Webudvikler med en særlig kærlighed til front-end. Mor til katte. Jeg forsøger at hjælpe med at redde planeten i min fritid ved at dele miljøvenlige alternativer.
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
