9 fantastiske brugergrænseflade design

I webdesign handler stor brugergrænseflade eller UI-design om at hjælpe brugeren med at udføre en given opgave så enkelt og effektivt som muligt. Mens udseendet er ubestrideligt vigtigt, er kernen i en stor brugergrænseflade funktion: hvad angår navigation, skal den være intuitiv indtil det er usynlig. Så snart en bruger går tabt eller ikke kan finde ud af, hvor de skal hen, gør brugergrænsefladen ikke sit job, og der er masser af eksempler på smertefuld brugergrænseflade mislykkes for at demonstrere, hvad du ikke burde gøre.

Denne liste over websteder og apps kan have forskellige designprincipper og forskellige funktioner, men de har en ting til fælles - effektivt UI-design, der opfylder alle ovenstående og mere. Læs videre for at finde ud af, hvorfor de er så succesrige.



01. Montreux Jazz Festival

UI-design: Montreux Jazz Festival



Her er en fantastisk måde at opbygge dit eget skræddersyede festivalprogram med et par swipes(Billedkredit: Montreux Jazz Festival)

Der er intet som at være på en festival for at få dine FOMO-niveauer gennem taget; sikkert, du nyder muligvis den handling, du ser nu, men måske sker der en anden endnu bedre en andensteds, som du ikke engang kender til. Uanset hvor mange gange du kæmper gennem den lange liste over kunstnere, er der sikkert nogle absolutte perler, du savner. Men dette fantastiske stykke UI-design til Montreux Jazz Festival sigter mod at hjælpe dig med at sikre, at du får mest muligt ud af din tid der.

Det holder tingene smukt enkle og præsenterer dig for seks binære valg, som du kan skubbe til venstre eller højre for at opbygge et indtryk af din musikalske præference - foretrækker du f.eks. DJs frem for bands? - og når du er færdig, vil det præsentere dig for dit eget personaliserede program baseret på, hvad det synes du vil nyde, komplet med links til køb af billetter.



UI-design: Montreux Jazz Festival

Lizzo! Hvordan vidste de det?(Billedkredit: Montreux Jazz Festival)

Det er let og intuitivt, og selvom du uden tvivl ønsker at dobbelttjekke det fulde program alligevel for at sikre dig, at der bestemt ikke er noget, du har savnet, er det en glimrende måde at hjælpe dig med at bore hurtigt igennem en masse information for at finde resultater.

02. Vippebørste

Virtual reality er meget grænseområde for UI og UX. Det er designere og udviklere, der skal lave ting, når de går sammen, med naturligt blandede resultater. Det, der fungerer på en fladskærm, fungerer ikke nødvendigvis så godt i VR, og det kan være en udfordring at opbygge en effektiv og nyttig VR-app, som du kan bruge i timevis uden at få køresyge.



hvordan blev tegneserier farvet før computere

Så det er dejligt at se et VR-produkt som Googles Vippebørste - som lader dig opbygge 3D-malerier i et virtuelt miljø - der ikke kun fungerer, men som er så intuitivt at bruge og med så gode resultater, at kunstnere allerede integrerer det i deres kreative arbejdsgange. Gå denne vej for nogle gode pro-tip til at komme i gang med denne spilændrende kreative app.

03. Mønster

UI-design: mønster

Mønsterets cirkulære, minimale tilgang gør det lettere at rulle dine beats [Billede: Olympia Noise Co]

Olympia Noise Co's iOS trommemaskine, Mønster , er i modsætning til noget, du har set før, og med god grund. I stedet for at sekvensere din rytme på et gitter som enhver anden musikapp bruger Patterning en cirkulær grænseflade til den grundlæggende forretning med at lægge dine beats med farvekodede trommer, så du nemt kan se hvad der er.

Og ud over det grundlæggende gør Patternings smarte, men minimale brugergrænseflade den mere komplicerede forretning med at sekventere længere sange ud af individuelle mønstre meget mindre udfordrende, så du nemt kan oprette variationer på mønstre og derefter passe alt sammen. Det tager en ligetil ligefrem tilgang til også at få alt til at lyde bedre; både mixeren og FX-grænsefladen er omhyggeligt indrettet med dristige visuelle signaler, der hjælper dig med at få den lyd, du ønsker, uden at gå i stå blandt uundgåelige kontroller.

hvordan man vælger alle i Photoshop

04. MailChimp

UI-design: MailChimp

MailChimp's design er rent og fladt og stort set typografisk [Billede: MailChimp]

Oprettelse og styring af nyhedsbreve er måske ikke den mest spændende opgave i verden, men det smukt designede, intuitive design af brugergrænsefladen MailChimp gør det meget mere velsmagende. Siden dets nylige redesign er web-UI'en rent, fladt og primært typografisk.

Når din konto oprettes første gang, balanceres det klassiske 'tomme konto'-problem, før din første kampagne kommer fra jorden, med nyttige, visuelt tiltalende brugervejledninger. Der er masser af hvidt rum, og klare opfordringer til handling fører nye brugere gennem hvert trin i processen - i nogle tilfælde endda med en subtilt animeret markør for at indikere, hvor de skal klikke.

Design af brugergrænseflade: MailChimp

Nyttige opfordringer til handling forhindrer dig i at gå tabt i MailChimp [Billede: MailChimp]

05. Papir til iPad

UI-design: Papir til iPad

Papir er designet til at være intuitivt at bruge [Billede: FiftyThree]

En multi-prisvindende app designet til at hjælpe brugerne med at være kreative på en mere intuitiv, naturlig måde, Papir lader dig tegne med fingerspidserne med et overraskende detaljeringsniveau - selvom det også fungerer med en stylus, hvis der kræves mere præcision.

Papirs UI-design er udelukkende designet til berøring og har ingen knapper eller indstillinger at bekymre sig om - bare en række specialværktøjer. Det alsidige tegneværktøj med springvandspennestil kommer gratis, mens Skitse (blød blyant), Kontur (fed markør), Skriv (blækpen), Farve (akvarelbørste) og Mixer (farveblender) kommer som køb i appen.

UI-design: Papir til iPad

I stedet for knapper har papir et sæt specialværktøjer [Billede: FiftyThree]

06. Ting

Fås til både Mac og iOS, Ting er en populær opgavestyringsapp med et prisvindende design, der er intuitivt og let at afhente, baseret på det velkendte opgavelistekoncept. Som dets skabere Cultured Code påpeger, er ideen jo at gøre dit liv lettere.

hvordan man tegner et tshirt-design

Det glatte, rene design af brugergrænsefladen er opdelt i lister for at hjælpe dig med at kategorisere dine opgaver: presserende ting går i 'I dag', lidt mindre presserende kan vente til 'Næste', mens 'Planlæg' planlægger længere fremme. Hver post fanger vigtige oplysninger på én gang - titel, noter og forfaldsdato samt tags, hvis det er nødvendigt for at hjælpe med at kategorisere alt. Det bedste af alt er, at vinduet Hurtig adgang er tilgængeligt hvor som helst ved hjælp af en simpel tastaturgenvej - og det hele synkroniseres automatisk på tværs af desktop, iPhone og iPad.

07. Kampagnemonitor: Verdensbillede

UI design: Campaign Monitor Worldview

Verdenssyn indeholder komplekse data på en tilgængelig måde(Billedkredit: Campaign Monitor)

En vidunderlig original idé, der sætter et engagerende twist på e-mail-abonnementsdata, Kampagnemonitor: Verdensbillede overlejrer oplysninger om enkeltpersoner, der åbner, klikker og deler din kommunikation på et Google Map i realtid for både geografisk og personlig indsigt.

Landingssiden introducerer konceptet på en øjeblikkelig visuel måde med eksempelnåle, der falder ned på et verdenskort - og selve applikationsgrænsefladen er forfriskende ren, drejer rundt om kortet og et par grundlæggende menuer til styring af indstillinger. Et godt eksempel på UI-design med simpel ikonografi og farvekodning, der identificerer forskellige kategorier af brugerengagement på et øjeblik.

08. Figur

UI-design: Figur

Figur er designet til at hjælpe dig med at slå melodier ud, mens du er på farten [Billede: Propellerhead]

Endnu et eksempel på fladt design, der får et potentielt meget kompliceret UI-design til at se meget rent og intuitivt ud, Figur er en synthesizer og trommemaskine til iOS fra den svenske udvikler Propellerhead, som også står bag desktop musikproduktionssoftware Reason.

Du kan trykke på padserne på berøringsskærmen, holde fingeren nede og rulle rytmehjulene for en række forskellige lyde eller stryge over skærmen for at afspille forskellige toner i skalaen. Der er også hjul til at styre rækkevidden af ​​toner, du skal arbejde med, antallet af toner i melodier og baslinjer og forskellige faner for at finjustere lyden på en række forskellige måder.

hvordan du ændrer billedbeskyttelsesindstillinger på facebook

09. Kennedy

UI-design: Kennedy

Kennedy tilføjer kontekst til dine minder [Billede: Brendan Dawes]

Der er ikke noget som at rulle gennem en masse af dine gamle Twitter-opdateringer og undre sig over, hvad i helvede du tænkte på, da du sendte den ting for seks måneder siden. Manglende sammenhæng kan ofte betyde, at noget, der giver perfekt mening på det tidspunkt, kan gøres meningsløse måneder eller år længere nede.

Kennedy , en dagbog-app fra det altid fremragende Brendan Dawes , er designet til at føje kontekst til dine minder. Du kan bruge den til at oprette tekstnoter om, hvad du holder på med, ligesom du måske skriver på Facebook eller Twitter og måske tilføjer fotos til noterne, mens du er i gang. Det kloge touch er dog, at Kennedy derefter tilføjer et ekstra lag af kontekst ved at tilføje din placering, dato og klokkeslæt, de aktuelle vejrforhold, en nyhedsoverskrift og, hvis du lytter til musik på din telefon på det tidspunkt, navnet på det spor, du lytter til.

UI-design: Kennedy

Kennedys tilføjede detaljer er et rigt alternativ til tørre noter [Billede: Brendan Dawes]

Resultatet er, at i stedet for en tør note, der ikke rigtig betyder meget længere nede, fanger du et bestemt øjeblik med en fyldigere kontekst, komplet med masser af meddelelser, der kan hjælpe med at bringe en hukommelse tilbage meget mere detaljeret. Og Dawes 'rene design og smarte brugergrænseflade holder alt simpelt og godt ud.

Relaterede artikler: