Designing Killer Web UI Layouts With Freebies - Ultimate Guide
Feltet av webdesign har tatt et pust av seg selv på bare noen få korte år. Det er flere aktive designere over hele verden nå enn noen gang før, alle samarbeider om innovative prosjektideer. Og konseptene bak mange av disse trendene er utviklet gjennom profesjonelle grafikkdesignere.
Det kan ta måneder eller år før du forstår teknikkene for å bygge et brukergrensesnitt. Du må vurdere størrelser og plassering av sideelementer, også lesbarhet av tekst og etiketter. Med litt fritid kan du grave inn i en minimalistisk tilnærming for å bygge nettsteder med mindre og redusere forvirring. Og selv da er det dusinvis av andre designteknikker å vurdere også.
For denne veiledningen har jeg satt sammen noen moderne brukergrensesnitt design teknikker med freebies du kan laste ned og lek med. Det er mitt håp at dette vil gi noen motivasjon til de som er interessert i en karriere innen bygging av grafikk / webdesign. Selv profesjonelle webdesignere kan finne noen av disse trenderne nyttige for ditt neste prosjekt.
Øv med fullmaler
Når du har ferdighetene til å designe ditt eget oppsett fra bunnen av, er det ikke nødvendig å begynne med maler. Nybegynnere, derimot, kan føle seg mer komfortable med utgangspunkt i en full design og arbeider med de finere detaljene.
Det er noen gode gratis nedlastinger av fulle PSD-nettsider for porteføljer, hjemmesider, blogger og mange andre kategorier. Disse er de perfekte designene for å komme i gang med å bli kjent med en “generell” web layout. Hvert nettsted vil ha forskjellige behov for sideelementer, og du må finne ut hvilke elementer som er viktige.
Her er et PSD-eksempel kalt "AppCivilization", designet av Martin Fabricius. Oppsettet er omtalt for et kreativt studio som designer mobile apps og muligens nettsteder. Mot bunnen finner du et lite panel med appikoner som vises i en portefølje. Du vil også legge merke til at hele designen er brutt opp horisontalt i en topptekst, topp lysbildefremvisning, hovedinnhold og mørkere bunntekst.
Original Kilde - Last ned
Designe destinasjonssider
La oss se på en annen freebie også designet av Martin. Dette neste eksempelet er en destinasjonsside som du kan bruke til å selge alle typer produkter. Vanligvis er disse digitale varer som kan lastes ned av brukeren, dvs. apps, bilder, ikoner, maler osv.
Original Kilde - Last ned
Men den beste delen av designet er at det er veldig fleksibelt for nybegynnere å jobbe rundt. Overskriften bruker fortsatt en liten toppnavigering med et stort bilde, men spesielt forventede brukerhandlinger er forskjellige. Han har en stor “Kjøpe det!” knappen som står rett ut over brettet. På en produktlandside vil dette trekke mer oppmerksomhet enn en jQuery lysbildefremvisning.
En annen stor UI-teknikk er den lille iPhone-funksjonen som vises midtveis nedover siden. Martin inneholder en forhåndsvisning av iPhone, App Store-knappen og en liten liste over viktige funksjoner. Når besøkende ser etter produktdetaljer, kan du ikke gjøre ting enklere enn via en formatert liste.
Flere maler:
Her er noen gratis PSD-maler vi har gitt ut i passet:
- "BiZ" Business Website PSD Maler
- "ThinkJuice" Product Site PSD-mal
- Profesjonell Business Site PSD Mal
- "Polo360" Portfolio Site PSD Mal
Du kan også være interessert i følgende:
- Business nettside maler
- "Kommer snart" side opplæring + maler
Hovednavigasjon
Menyer og knapper er bare verktøy for å bygge mye større sideelementer. Det er ikke nektet at nettsidens hovednavigasjon har en svært viktig hensikt. Du trenger det for at nettstedet ditt skal være lett tilgjengelig med mulige tilbakeleveringsmetoder for mobilbrukere.
Nedenfor er en kul navigasjonslinje med søm tekstur effekt. Høydepunktsstilen kan vises som en mørkret boks eller som et nedadgående tips som peker inn på sidens innhold. Denne stilen har vært fremtredende gjennom årene og ser bra ut i riktig setting.
Original Kilde - Last ned
En annen lignende freebie er denne strukturerte toppnavigasjonen designet av Edi Gil. Jeg liker virkelig hvordan denne andre navbar inneholder både en liste over lenker og noen ekstra sideknapper. Du vil ønske å tilby sekundære lenker til besøkende der de kan finne profilene dine på nettet.
Original Kilde - Last ned
Alternative meny stiler
Bortsett fra den typiske horisontale navigasjonslinjen er det andre stiler av design å vurdere. Vertikale koblinger kan deles opp i forskjellige underoverskrifter som gir mer plass til sidens innhold.
Ta for eksempel menyen freebie nedenfor designet av nettstedet Icojam.
Hver overskrift er bygd for å utvide og kollapse basert på det valgte objektet. I tillegg tillater design at en liten tallerkenbord sitter til høyre for hver kategori. Dette vil best utfylle som en bloggnavigasjon for å telle hvor mange innlegg som er arkivert under hvert emne.
Original Kilde - Last ned
Navigasjonstips / Tutorials:
- 50 + Rengjør CSS Tab-Based Navigation Scripts
- Breadcrumb Navigasjon Best Practices & Examples
- Bygg mobilnavigering med jQuery
- Koding Breadcrumb Navigasjon I CSS3
- Designe navigasjon med mindre CSS
Cleaner Web Forms
Den moderne tidsalderen til Internett er langt fra en statisk møteplass. Brukerne deler hele tiden informasjon og interagerer hverandre hver dag. Mesteparten av denne teksten og mediedeling styres gjennom webskjemaer.
Vi bør se på et par eksempler på hvordan du kan utforme rene utseende skjemainnganger og knapper. Utformingen av elementene dine kan gå langt mot å invitere de besøkende til å faktisk bruke dem. Og dette bygger på troverdigheten til nettstedet ditt og gir deg flere sidevisninger.
Innloggingsfelt
Det er noen gode eksempler på innloggingsskjema PSDs å sjekke ut. Dette logg inn gratis via WP Scientist har alle dine standardelementer. To inntastingsfelter for innlogging / passord, innleveringsknapp og avmerkingsbokser for å administrere øktkaksler.
Denne modellen av design er perfekt hvis du kan implementere effektene gjennom jQuery. Det øverste høyre pilhodet gjør at du tenker på et popup-stil-vinduoppsett. Dette er en fantastisk teknikk for å spare plass på nettstedet ditt ved å holde skjemaet skjult til en bruker klikker på registreringslenken.
Original Kilde - Last ned
Skjemaet under er gratis å laste ned takket være designeren Gil Huybrecht. Han brukte et lignende mønster med en kornete bakgrunn og papirtekstur. Det jeg spesielt liker om Gils design er "overdimensjonerte" elementene. Det er mye vennligere landing på et påloggingsskjema som fyller hele siden. Brukerne kan enkelt se hva de skriver og det er mindre rot.
Original Kilde - Last ned
Hvis du er erfaren som en frontend-utvikler ved hjelp av CSS3, er det veldig enkelt å oversette denne grafikken til kode. Du kan til og med implementere den valgte ytre glødseffekten og avrundede hjørner for knappen og inntastingsfeltene.
Kontakt
En annen form finner du på praktisk talt alle nettsider er et kontaktskjema. Dette vil normalt inneholde felt for avsenderens navn, e-post og meldingsinnhold.
Freebie nedenfor er et fantastisk eksempel på bruk av egendefinerte teksturer og ikoner.
Designet bruker også plassholdertekst i stedet for etiketter. Dette betyr at når skjemaet først lastes, er hvert felt satt med en standardverdi (f.eks .: ditt navn). Men da du begynner å skrive, rydder plassholderen og innholdet ditt vises i stedet. Alle kompatible nettlesere støtter denne effekten, og det kan spare deg for litt plass på siden.
Original Kilde - Last ned
En annen fantastisk freebie å ta tak i er denne tabbed kontaktskjema designet av talentfulle Jonno Riekwel. Denne designen er mye enklere og gjør funksjonen etiketter over hver inngang. Dette er en flott løsning for større bedrifter eller oppstart som trenger å sende meldinger gjennom ulike avdelinger i selskapet.
Original Kilde - Last ned
Kontakt skjemaer veiledning:
- Innlogging / Registreringsskjema: Ideer og flotte eksempler
- Opprett en Stacked-Paper Effect Login-skjema
- Opprett en Ajax-basert HTML5 / CSS3 kontaktskjema
Bånd og bannere
Bare 6 eller 7 år siden ble avrundede hjørner begynt å stige i populære designtrender. Nå har vi kommet enda lenger med drop skygger og hjørne bånd.
Original Kilde - Last ned
Noen av disse elementene kan brukes som designhøypunkter, for eksempel en kommentardisk eller en publiseringsdato for en blogg. Den sømte båndet ovenfor er perfekt for porteføljer eller prosjekt sider hvor du vil fange din besøkendes oppmerksomhet. Du kan også prøve et lignende vertikalt bånd der designet faller inn fra toppen.
Disse små bivirkningene går langt for å forbedre oppsettet. Besøkende legger merke til og vil elske disse estetiske pleasantries. Men vurder at små hjørnebånd bare er en del av denne designtrenden.
Original Kilde - Last ned
I tillegg er fullstendig bannerdesign blitt vanvittig populært for å bygge opp merkevaregjenkjenning. Du kan bruke disse i din logo, navigasjon, hjemmeside, eller til og med på populære blogginnlegg. Implikasjonene er praktisk talt ubegrensede med gode designegenskaper.
Innpakning hjørnet
En annen svært spesifikk bånd-banner-effekt utføres ved å pakke inn design rundt sidens hjørne. Dette bygger illusjonen på siden din er 3-D og båndet er pakket rundt den øverste delen av nettstedet ditt.
Utformingen nedenfor er 100% gratis for nedlasting og kan brukes til egne prosjektideer. Du kan se hvordan dette vil trekke oppmerksomhet fra besøkende og hvorfor denne trenden har vokst til en slik vanvidd. Vær forsiktig så du ikke overan bruker bannerne. I bulk kan disse bli svært irriterende, som de eldre "web 2.0" -blanke / speilede effekter.
Original Kilde - Last ned
Design med knapper
Bortsett fra hyperkoblinger får du mest mulig interaksjon fra besøkende med knapper. Disse sidepostene kan utføre noe ved hjelp av jQuery- og Ajax-samtaler, bortsett fra at du også kan bruke knapper for å koble til statisk innhold, for eksempel freebie-nedlastinger for eksempel!
UI-settet nedenfor, designet av Matt Gentile har mye mer enn bare knapper. Hans PSD-sett er fantastisk for nybegynnere som ønsker å plukke opp gradienter og teksturer for å bygge lignende former. Ofte finner du mye høyere kvalitet knapper i UI-sett enn med singular PSDs.
Original Kilde - Last ned
Slik lager du variasjoner
Når du bruker tid på å praktisere disse teknikkene, vil du opprette mange forskjellige stiler over tid. Dette kan resultere i å bytte lignende knapper mellom forskjellige prosjekter og layouter. Et godt eksempel er de melkefulle knappene som tilbys av designer Robert van Klinken.
Original Kilde - Last ned
Hver av de tre opprinnelige tre knappene har en annen gradientstil, bortsett fra hover og aktive stater som ser ut som de samme. Når du arbeider i Photoshop, må du matche farger mellom gradienter eller flytte fargene til et effektlag. Med denne forståelsen kan du til og med bygge dine egne knapper freebie sett for nedlasting!
Original Kilde - Last ned
Tre + Papirstrukturer
Når du trenger å krydre dine grunnleggende layoutdesigner, må du bevege deg mot mer smarte metoder. Teksturer er alltid velkomne hvis du kan implementere dem riktig gjennom CSS bakgrunner eller settbreddeinnhold. Og to av de mest populære teksturer jeg har sett er tre og blanke papirer.
Notisblokken ideen er veldig enkel, men det kan fungere i en kul branding design enten som en del av et brukergrensesnitt element eller bygget inn i hele oppsettet. Men papir ser ikke alltid best ut på egenhånd, og en annen tekstur kan hjelpe stilene å blande inn. Dette er hvor mer detaljerte teksturer av tre kan komme inn i spillet.
Original Kilde - Last ned
Bildene vil skille seg ut og se herlig innpakket i et ytre skall. Hele konseptet med tekstur er å gi nettstedet ditt en bestemt følelse eller følelse. Tre temaer kan fremkalle en følelse av hjem og natur. Det er enda et fantastisk tre-web-UI-sett for nedlasting av Jeremiah Wingett. Hvis du føler deg kreativ, kan du prøve å sette sammen noen av dine egne teksturer og se hvordan de utfører i et web-basert miljø.
28 High Resolution Wood Textures
Konklusjon
De beste webdesignerne er de som trener daglig, og la aldri deres feil avskrekke seg fra deres endelige mål. Du må være responsiv og sprette tilbake raskt fra både suksess og mislykkede forsøk. Tips og freebies i denne veiledningen bør være et godt utgangspunkt for å begynne å lære å bygge forskjellige sidekonsepter for et webprosjekt. Og vi vil gjerne lese dine tanker om saken i det etterfølgende diskusjonsområdet.
