Designing en Modular User Interface Kit i Photoshop

Rollen til Photoshop i webdesign blir mer modulær. I stedet for å komponere en pixel-perfekt oppsett av en hel nettside, er det kanskje mer fornuftig i disse dager for å konsentrere seg om generelle stiler, farger og bestemte grensesnittelementer. I dag vil vi se nærmere på utformingen UI elementer, trekke sammen vår egen UI kit i prosessen.

Læring ved Eksempel

Før vi kommer i gang å designe vår egen samling av UI elementer, la oss ta en titt på noen nettsteder som gjør en god jobb med sine grensesnitt. Det absolutt ikke vondt å få litt inspirasjon

Exhibit A: Flow
Flow UI

Flow gjør en god jobb med sine brukergrensesnitt. Det er helt ren, levende - og bare ved å se på det du instinktivt vet hva gjør og hvor du skal gå. Legg merke til den store bruken av farger og ikoner som er innlemmet i webapplikasjon

Exhibit B:. Gumroad
Gumroad UI

Gumroad har en god vibe skjer med deres grensesnitt. Ikke bare er grensesnittet gøy, det gjør en god jobb med å presentere informasjon på en ren, kortfattet og enkel måte. Legg merke til hvordan handlingsknapper virkelig hoppe ut fra siden

Exhibit C:. Square
Square UI

Square tar minimal og ren til neste nivå. Uten bruk av farger, fortsatt gjør grensesnittet brukerne enkelt navigere gjennom dashbordet. Legg merke til hvordan selv om det fortsatt finnes mye innhold, som gjør alle disse tallene mindre skremmende smart bruk av skyggelegging

Utstillings D:. GoSquared
GoSquared UI

GoSquared UI viser at innholdstungt webapplikasjoner kan også utnytte flott design. Med bruk av moduler grensesnittet blir rent og konsistent. Den store bruken av fargetoner også legge til UI. Legg merke til hvordan denne typen grensesnitt egner seg godt til tilpasning; Brukerne kan enkelt skifte, fjerne, legge til eller redigere moduler.

Opprette Vårt eget design

Nå som vi har tatt en titt på noen eksisterende brukergrensesnitt, er det på tide å ta en sprekk på det oss selv!

Vi vil begynne med spissen.

Fargevalg

Som vi så tidligere, fargene er veldig
viktig når det kommer til en webapplikasjon; et fargevalg bidrar til å definere stemningen og gjør app lett å identifisere. Ulike farger også provosere ulike stemninger eller temaer (for eksempel Gumroad lekne farger foreslå web app er stress-fri og lett å bruke), og de kan brukes til å målrette ulike demografi (for eksempel lys og levende for et ungt publikum, nøytral og enkel for et eldre publikum).

Husk at det kan være best å velge en beskjeden fargevalg med farger som er lett å se på. Sørg også for at du bruker kontrast og forskjellige nyanser, da dette bidrar til å definere visuell hierarki og gjør innholdet mye enklere å filtrere gjennom, sett i eksemplene ovenfor. Ettersom vi ikke egentlig har et formål for dette programmet, vil vi være beskjedne og velge en sofistikert, blå-grå farge:
Åtte viktigste fargene vi bruker for vår design
Stil

Å være unik i form av stil er viktig for en webapplikasjon; som farger, stil er én måte å gjøre programmet gjenkjennelig og skiller seg ut fra resten. I dag, vil vårt fokus være på moderne og enkel. Selv om graderinger er stor på egen hånd, legge teksturer og mønstre kan gjøre elementer skiller seg ut og skape en mer taktil opplevelse. For å oppnå den effekten, vil vi bruke en støy mønster på navigasjonslinjen og knappene. Sjekk ut forskjellen:
Legg merke til forskjellen på støy gjør på venstre? Enkelt, men effektivt!

I tillegg til mønstre, vil vi bruke lagstiler å finpusse på knappene slik at de ikke bare skiller seg ut, men deres stater er også distiguishable. I bildet ovenfor, kan du tydelig se at "Home" -knappen er aktiv

Trinn 1:. Sette opp Design

Uten ytterligere forsinkelse, la oss fyre opp Photoshop! Begynn med å lage en ny fil som er 600px bred og 350 piksler høy (standardnettinnstillinger). Lag et rektangel form som fyller hele lerretet og endre navn på laget til "BG". Siden vi har en bakgrunn nå, slette standard "Bakgrunn" lag. Deretter endrer du fyllfargen til # dde3ec.

Nå, opprette et nytt rektangel form som er 600px bred og 70px høy, og justere den til toppen av lerretet. Dette vil være vår web-applikasjonens navigasjonsfeltet. Det er viktig å holde dimensjoner i tankene når du utformer, i dette tilfellet, vi ønsker ikke et navigasjonssystem som er for stor og påtrengende til resten av programmet, så 70px er ideell

Merk:. I en Nettleseren situasjon vi kan godt være med EM til størrelse våre sideelementer, men når du bruker Photoshop vi må holde oss til piksler.

Gi nytt navn til dette laget til "Nav Bar" og endre fyllfargen til # 303844. Det er viktig å velge en kontrastfarge for navigasjons element og gjør det skiller seg ut fra bakgrunnen. I dette tilfellet har vi en lys blå bakgrunn og en mørk blå-grå navigasjonslinjen. Lås posisjonene til begge lag, så de ikke forskyver seg utilsiktet. Her er hva du bør ha på dette punktet:

Trinn 2: Opprette en Noise Pattern

Før vi begynner å legge til stiler i vår navigasjonsfeltet, vil vi simulere lyden mønster som jeg nevnte tidligere .

Opprett en ny fil som er 100px bred og 100px høy (standardnettinnstillinger). Lag et nytt lag, velger hele lerretet (cmd /ctrl + a) og fyll den med hvilken som helst farge (cmd /ctrl + backspace). Fra menyen navigerer du til Filter > Noise > Legg til støy. Sett støy beløpet til 400%, fordelingen til Uniform og sørg for monokromatisk er valgt. Her er hvordan det skal se ut:

Når du har det, gå til menyen Edit > Definer Mønster, navnet på oppskriften "støy" og klikk "Ok". Nå har du en støy mønster som du kan bruke til stilelementer! Det er mye flott ressurser på nettet som gir mønstre for web bruk - prøv å eksperimentere med dem for å skape et unikt utseende

Trinn 3: Navigasjon Bar

Retur tilbake til vår web-app UI PSD! Gå til alternativene lagstilen for 'Nav Bar'. Ved hjelp av noen lagstiler, er det lett å legge noen flotte effekter denne enkle formen.

Vi vil starte med å legge en 1px stroke utenfor laget, med fyllfargen # 000000 og opasitet på 100%. Dette vil gi oss et avgjørende linjen som deler element fra bakgrunnen

Deretter vil vi legge til en skygge til laget. Blanding modus som normalt, farge som # 000000, tetthet som 58%, vinkel som 90 grader, avstand som 1px, spredt som 0px og størrelse som 5px. Dette skygge vil låne en fin effekt fremhever navigasjonslinjen og gjør den mer fremtredende

Deretter vil vi legge til en indre skygge: blanding modus som lineær dodge (legg), farge som #ffffff, vinkel som -. 90 grader, distanse som 1px og choke og størrelse som 0px. Denne lineære skygge legger til en 3D-effekt til navigasjonslinjen og bare legger litt mer til design.

Vår navigasjonslinjen ser litt flat (ikke noe galt med det, BNY forresten!), Men la oss legge til en gradient: blanding modus som overlegg, tetthet som 20%, standard svart til kvit, stil som lineær, og vinkel på 90 grader. For å hjelpe våre gradient ut la oss legge det mønsteret vi jobbet med tidligere: blanding modus som overlegg og opasitet som 1%. Her er hva du bør ha:

Trinn 4: Knapper

Aktiv Button

Nå som vår navigasjonsfeltet ser bra ut, er det på tide å legge noen elementer inn i den. Utformingen av knappene er ganske viktig for et grensesnitt design - de blir brukt mye og trenger å være både gjenkjennelig, funksjonell og representable av merkevaren.

Skille mellom forskjellige knappe stater er også viktig - brukeren trenger stadige tilbakemeldinger, så ved å endre lagstiler litt, kan vi lage forskjellige stater. Vi vil starte med å lage den aktive knappen

Lag et nytt lag 'Nav Button Aktiv "med en avrundet rektangel form. Bredde på 100px, høyde på 40px, og en kant radius på 4px. Igjen, dimensjoner er meget viktig. Bredden og høyden på knappen er avhengig av mange faktorer som dimensjonene av sine overordnede elementer, tekstmengden og størrelsen på teksten. Plasser den vertikalt sentrert, med hensyn til navigasjonslinjen og 40px fra venstre på lerretet.

Sett fyllfarge til # 90a2c3, fylle opacity til 25% og åpne opp stilinnstillinger for laget. Nok en gang, skape et slag som er 1px utenfor laget, har en tetthet på 100% og har en fyllfarge # 000000. Neste skape en indre glød: blanding modus normal, opacity på 13%, farge # 000000, choke av 0px og størrelse på 4px. Denne indre glød gir oss "dyttet i" effekt

Nå, for skygge. Blanding modus for normal, farge på #ffffff, opasitet på 10%, vinkel på 90 grader, og avstand på 2 piksler. Dette skygge legger videre til presset i kraft

Deretter legger du til en gradient. Blanding modus normal, opacity på 6%, standard svart til hvitt, lineær, og en vinkel på 90 grader. Akkurat som vi gjorde med navigeringslinjen, legge en støymønster med blanding modus overlegg og opacity på 2%

Resultatet er en knapp som har et intuitivt kvalitet til det.; uten å se på de andre knappe stater, kan en bruke en gang innse at uansett hva teksten i den knappen henviser til innhold som er aktivt på nettsiden.

knappetekst

Denne teksten er like viktig på en knapp; husk at det krever pusterom basert på størrelsen på den knappen du velge samt mengden av innholdet du ønsker å vise i knappen.

Opprett et nytt tekstlag heter 'Tekst Aktiv ". Sett farge til # f3f5f9, skriftstørrelse til 12px og skriftfamilie til Helvetica Neue

Merk:. Helvetica Neue er til stede som en systemfont i mange versjoner av OS X, bu ikke så for Windows. Du foretrekker kanskje å bruke Arial for denne UI kit, som det er mer allment tilgjengelig for sluttbrukeren

Legg til en skygge. Blanding modus som overlegg, opasitet på 35%, vinkel på -90 grader, avstand fra 1px og spre og størrelse på 0px. Den sans-serif teksten ser nå ut som det er skjøvet inn med den aktive knappen. Endelig sentrere teksten med hensyn til knappen. Her, det vi har er en ganske enkel tekst inne knappen, men ved hjelp av en farge som er i samsvar med tema og en enkel skygge, øker det innholdet og gjør det mye lettere å lese.

Normal Button

Nå, la oss lage en normal stylet knappen for elementer i navigasjonsfeltet som ikke er aktive. Det er viktig å opprettholde temaet for den andre knappen staten, men også endre styling, slik at det er hensiktsmessig forskjellig fra aktiv tilstand.

Dupliser 'Nav Button Aktiv "lag som' Nav Button Normal" og tekstlag 'Tekst Active "som" Text Normal'. For å gjøre normal tilstand knappen ser annerledes ut, vil vi inverse at presset i utseende og stil på knappen slik at det ser ut som det er skjøvet ut av skjermen. Dette ikke bare gjør det skiller seg ut, men lar brukeren vet at det kan velges. Start med å endre knappen fyllfarge til # c2dcff og fylle opacity på 5%

Også endre skygge. Blanding modus for normal, farge som # 000000 opasitet på 10%, vinkel på 90 grader, avstand av 2px. Deretter endre den indre skygge: blanding modus for normal, opasitet på 25%, farge som #ffffff, avstand fra 1px. Nå legger en indre glød: blanding modus på skjermen, tetthet på 7%, farge som #ffffff og størrelse på 3px. Til slutt, endre gradient opacity til 13% og fjerne mønsteret overlegg. Resultatet vil bli en knapp som er litt lysere enn navigasjonsfeltet, stående ut med hjelp av skyggen og hjerneslag.

Skille tekstfarge og styling er en annen måte du kan gjøre tilstander se annerledes ut. Endre tekstfarge til # e8ecf3 og skygge, slik at tettheten er 50% og vinkelen er 90 grader.

Strømknapp

I stedet for å gi brukeren en kjedelig "Logg inn" -knappen å klikke på, hvorfor ikke endre ting opp og har et strømikon i stedet? Dette vil legge til noe kreativt og unikt design, mens også slik at brukerne raskt skille innloggingsknappen fra alt annet. Begynn med å duplisere 'Nav Button Normal "Layer til' Nav Button Login". Juster størrelsen på formen slik at det er en 40px av 40px avrundet kvadrat. Du kan gjøre dette ved hjelp av direkte valg verktøy, velge de 4 poeng på høyre side av formlag, og skiftende dem til venstre slik at endringer bredde til 40px (shift + <). Bruk denne metoden heller enn å forvandle formlag, så som forvrenger de avrundede kantene.

For å lage strømikonet, lage en serie med figurer på ett lag som heter «Power Ikon '. Først må en 16px av 16px sirkel. Deretter trekker en 12px av 12px sirkel i sentrum av den større. Dette bør gi deg en 16px av 16px sirkel som er 2px tykk. Deretter trekke en firkantet 6PX bredt justert til toppen midten av sirkelen. Til slutt legger du en 2 piksler bred, 8 piksler høyt rektangel sentrert i forhold til den trekkes torget og justert 1px over det høyeste punktet på sirkelen.

På dette punktet, bør du ha et formlag med strømikonet. Endre fargen på strømikonet form til #FFFFFF. Åpne opp lagstiler og legge en skygge: blanding modus for overlegg, farge som # 000000, vinkel på 90 grader, avstand fra 1px og spre og størrelse på 0px. Deretter legge til en gradient. Blanding modus for normal, opasitet på 10% og standard gradient fra svart til hvitt

Til slutt, justere innloggingsknappen ikonet til sentrum av innloggingsknappen og justere knappen 40px fra høyre av lerretet. Her er hvordan den endelige navigasjonslinjen skal vises.

Selv om vi brukte den samme styling for denne knappen som den andre, erstatte tekst med et ikon forbedret den generelle designen

Trinn 5: Pålogging Dropdown

Vi har etablert et flott utgangspunkt for vår web-applikasjon UI, men så langt har vi kun laget for knapper og bakgrunner. La oss prøve å utvide UI ved å legge til en dropdown innlogging grensesnitt. Dette vil gi oss en sjanse til å skape noen form elementer og knapper stylet for ulik bakgrunn.

Base Design

La oss først gjøre en ny avrundet rektangel (4px grensen radius som før for konsistens) som er 300px bred og 200px høy, og kalte den "Login Dropdown BG '. Deretter legger du til en trekant som er 14px bred og 7px høy til "Login Dropdown BG" lag og juster den 13px fra øverst til høyre på avrundet rektangel. Dette vil skape et verktøytips effekt på dropdown og representerer en forbindelse mellom innloggingsknappen over det.

Når vi endrer fargen på login rullgardin til #ffffff, betyr det ikke akkurat skiller seg ut fra lerretet bakgrunn. For å gjøre det stå om mer vil vi legge til en skygge: blanding modus for normal, opasitet på 25%, vinkel på 90 grader, avstand og spredning av 0px og størrelse på 4px. Dette gir oss en subtil skygge til drop ned, slik at det ikke bare mer fremtredende, men også å gi den effekten at det svever over bakgrunnen. Hvis du var koding dette, kan det være en god idé å legge en kort animasjon for å legge til flytende effekt. Juster denne rullegardin form 40px fra høyre side av lerretet og 13px fra bunnen av navigasjonsfeltet. Her er hva vi har så langt:

Legg merke til hvordan justeringen av rullegardin er i flukt med knappen? Konsistens med posisjon og polstring gjør renere, og det er lettere å kode i en container.

Tekst

Nå legger et tekstlag med teksten "Logg deg på kontoen din, eller lage en ny. '. Endre skriftstørrelse til 12px, font familien til Helvetica Neue (Regular) og fargen til # 92969b. Å representere en link, endre fargen på "lage en ny" til # 5c6f91.

Med hensyn til "Login Dropdown BG" lag, justere teksten 14px fra venstre og 20px fra toppen. Vi ønsker ikke å gjøre teksten skiller seg ut for mye som vi ønsker at brukerne skal fokusere på faktisk logge på, og det er derfor en relativt mindre skriftstørrelse og lysere farger er en god idé.

Tekstfelt

Det er viktig å huske at vår tekstfeltet skal passe med temaet for design, men også skiller seg ut nok slik at brukerne kan gjenkjenne det og fylle det i. Lag en ny avrundet rektangel (3px grensen radius) som er 270px bred og 30px høy og gi den navnet "tekstfeltet. Legg merke til at i stedet for en 4px grensen radius, bruker vi en 3px grensen radius for tekstfeltet. Grunnen til dette er fordi tekstfeltet er innenfor dropdown og det ville se vanskelig hvis radius størrelsen var den samme.

Endre fyllfargen av laget til # f9fafc og legge en 1px stroke utenfor formen som er fargen # d3d8e1 (100% opacity). For å legge til litt av et høydepunkt i tekstfeltet, legg en indre skygge: Fargen #ffffff, opasitet på 100%, vinkel på -90 grader, avstand fra 1px og spre og størrelse på 0px. Jeg valgte å endre fargen på tekstfeltet slik at den skiller seg ut, og ikke i ett med bakgrunnen for rullegardin.

Legg til et tekstlag med teksten 'Brukernavn' (12px skriftstørrelse, Helvetica Neue Regular, farge # 727d88) og juster den vertikalt sentrert og flyttet 10px igjen med hensyn til tekstfeltet. Justere tekstfeltet 14px fra venstre i rullegardin bakgrunn og 18px fra bunnen av teksten laget. Å skape et passordfelt, rett og slett kopiere tekstfeltet lag og tekst laget og juster den 12px fra bunnen av den første tekstfeltet lag. Her er hva du bør ha på dette punktet:

Legg merke til hvordan de størrelser og posisjoner av alle tekst- og tekstfeltene ser naturlig; du ikke ønsker å holde for mye eller for lite plass, men heller bare nok for innholdet til å passe komfortabelt.

Logg inn Button

Det er på tide å legge til en innloggingsknapp for vårt skjema dråpe ned, men knappen vi opprettet for navigasjon vil ikke akkurat passer inn med design. Dette er fordi nå har vi å gjøre med en lys bakgrunn og stilene som er brukt på navigasjonslinjen vil ikke skille seg ut mot den hvite bakgrunnen på nedtrekksmenyen. Kontrast er svært viktig for et tilgjengelig grensesnitt.

Vi vil skape en sekundær knapp stil, en som kan være bruk for hovedinnholdet i programmet og som også fungerer godt på lys bakgrunn. Vi skal bruke lignende styling fra navigeringsknappene til å style innloggingsknappen, slik at vår stil er forenlig.

Start med å lage en ny avrundet rektangel form (3px grensen radius) som er 90px høy, 35px bredt og gi den navnet "Login Button". Endre fyllfargen til # a3b2cd og legge en 1px stroke utenfor formlag som er fargen # 7b8da4 (100% opacity). Deretter legger en gradient overlay på 25% opasitet, med standard svart til hvitt. Til slutt legger du en normal indre skygge med fargen #ffffff, 45% opacity, vinkel på 90 grader, avstand fra 1px og spre og størrelsen på 0px.

For det tekstlige innholdet, opprette et nytt tekstlag (12px størrelse, Helvetica Neue Regular, farge #ffffff) med teksten "Login", og legger til en skygge: blanding modus for overlegg, farge # 000000, avstand fra 1px, og spre og størrelse på 0px. Justere tekstlaget til sentrum av innloggingsknappen.

Akkurat som Gumroad design, ønsker vi våre brukere til å vite nøyaktig hvor du skal klikke etter at de fyller i sine innloggingsdetaljer.

Det er det med vårt fundament UI design!

Utvide UI

Etter et par lag og et par flere lagstiler, har vi gjennomført design for grunnlaget for vår web app UI! Med det vi har, kan du få en følelse for temaet, stil, farger og elementer i brukergrensesnittet.

Bygger videre

Med alt grunnarbeidet vi har gjort, er det relativt enkelt å fortsette å designe flere elementer. Vi har lagt ut fargevalg og stil av vår design, så alt som kreves er å gjøre flere figurer og justere farger /lagstiler. I hovedsak, når du har grunnleggdesignelementer, kan du legge ut betydelige moduler fra søknaden din.

Den beste delen om å skape en "sample" UI er at det ikke krever så mye innsats som om du skulle lage en komplett UI sett. La oss si at du ikke er fornøyd med retningen UI går - det er bedre å gå bort fra en liten samling av elementer i stedet for å kaste timers arbeid ned i avløpet. Denne arbeidsflyten tilnærmingen lar deg også til å utforske en haug med forskjellige UI temaer og velge den som er perfekt for din app. Anmeldelser