Designing Killer Web UI Layouts Med Freebies - Ultimate Guide
Webdesignernes område har kun fået et åndedrag inden for få år. Der er mere aktive designere verden over nu end nogensinde før, alle samarbejder om innovative projektideer. Og begreberne bag mange af disse tendenser er blevet udviklet gennem professionelle grafikdesignere.
Det kan tage måneder eller endda år, før du fuldt ud forstår de tekniske aspekter ved at opbygge en brugergrænseflade. Du skal overveje størrelser og placering af sideelementer, også læsbarhed af tekst og etiketter. Med lidt fritid kan du grave ind i en minimalistisk tilgang til at bygge hjemmesider med mindre og reducere forvirring. Og selv da er der dusinvis af andre designteknikker at overveje også.
For denne vejledning har jeg parret nogle moderne brugergrænseflade design teknikker med freebies du kan downloade og lege med. Det er mit håb, at dette vil give nogle motivation til dem, der er interesseret i en karriere inden for grafik / webdesign. Selv professionelle webdesignere kan finde et par af disse tendenser nyttige til dit næste projekt.
Øv med fulde skabeloner
Når du har evnen til at designe dit eget layout fra bunden, er der ingen grund til at begynde med skabeloner. Begyndere kan derimod føle sig mere behagelige på grund af et fuldt design og arbejder ind i de finere detaljer.
Der er nogle gode gratis downloads af fulde PSD-website skabeloner til porteføljer, hjemmesider, blogs og mange andre kategorier. Disse er de perfekte designs til at komme i gang med at gøre dig bekendt med en “generel” web layout. Hvert websted vil have forskellige behov for sideelementer, og du bliver nødt til at bestemme hvilke elementer der er vigtige.
Her er et PSD-eksempel kaldet "AppCivilization", designet af Martin Fabricius. Layoutet er udvalgt til en kreativ studie, der designer mobile apps og muligvis hjemmesider. På bunden finder du et lille panel appikoner vist i en portefølje. Du vil også bemærke, at hele designet er brudt op vandret i en header, top diasshow, hovedindhold og mørkere footer.
Original Kilde - Download
Design af destinationssider
Lad os se på en anden freebie designet af Martin. Dette næste eksempel er en destinationsside, som du kan bruge til at sælge enhver type produkter. Generelt er disse digitale varer, som kan downloades af brugeren, dvs. apps, fotos, ikoner, skabeloner mv.
Original Kilde - Download
Men den bedste del af hans design er, at det er meget fleksibelt for begyndere at arbejde rundt. Overskriften bruger stadig en lille topnavigation med et stort billede, men især de forventede brugerhandlinger er forskellige. Han har en stor “Købe det!” knappen, der skiller sig ud lige over folden. På en produktlandingsside vil det være mere opmærksomt end et jQuery diasshow.
En anden stor brugergrænseflade teknik er den lille iPhone feature display midtvejs ned på siden. Martin indeholder en iPhone preview shot, App Store knap og en lille liste over nøglefunktioner. Når besøgende søger produktdetaljer, kan du ikke gøre tingene enklere end via en formateret liste.
Flere skabeloner:
Her er et par gratis PSD skabeloner, vi har udgivet i passet:
- "BiZ" Business Website PSD Skabeloner
- "ThinkJuice" Produkt Site PSD Skabelon
- Professionel Business Site PSD Skabelon
- "Polo360" Portfolio Site PSD Skabelon
Du kan også være interesseret i disse følgende:
- Business website skabeloner
- "Kommer snart" side tutorials + skabeloner
Main Site Navigation
Menuer og knapper er kun værktøjer til at opbygge meget større sideelementer. Der er ingen benægtelse, at dit websteds hovednavigation har et meget vigtigt formål. Du har brug for det til, at dit websted er let tilgængeligt med mulige tilbagesendelsesmetoder til mobile brugere.
Nedenfor er en cool navigationsbjælke med en søm tekstur effekt. Fremhævsstilen kan vises som en mørk boks eller som et nedadgående tip, der peger på sidens indhold. Denne stil har været fremtrædende gennem årene og ser godt ud i den rigtige omgivelser.
Original Kilde - Download
En anden lignende freebie er denne teksturerede header navigation designet af Edi Gil. Jeg kan virkelig godt lide, hvordan denne anden navbar indeholder både en liste over links og nogle ekstra sideknapper. Du vil gerne tilbyde sekundære links til besøgende, hvor de kan finde dine profiler på internettet.
Original Kilde - Download
Alternative menustyper
Bortset fra den typiske vandrette navigationslinje er der andre stilarter af design at overveje. Lodrette links kan opdeles i forskellige underoverskrifter, hvilket giver mere plads til sideindhold.
Tag for eksempel menuen freebie nedenfor designet af hjemmesiden Icojam.
Hver overskrift er bygget til at udvide og falde sammen baseret på det valgte objekt. Desuden giver designet mulighed for et lille antal tæller til at sidde til højre for hver kategori. Dette ville bedst udfylde som en blognavigation for at tælle, hvor mange indlæg der er arkiveret under hvert emne.
Original Kilde - Download
Navigationstips / Tutorials:
- 50 + Clean CSS Tab-Based Navigation Scripts
- Breadcrumb Navigation Bedste praksis og eksempler
- Opbygning af mobilnavigation med jQuery
- Kodning af Breadcrumb Navigation i CSS3
- Designing Navigation med mindre CSS
Renere webformularer
Internettets moderne tidsalder er langt fra et statisk mødeområde. Brugere deler hele tiden information og interagerer med hinanden på daglig basis. Størstedelen af denne tekst- og mediedeling styres via webformularer.
Vi bør se på et par eksempler på hvordan du kan designe skønne formindgange og knapper. Designet af dine elementer kan gå langt i retning af at invitere dine besøgende til faktisk at bruge dem. Og dette til gengæld bygger dit websted troværdighed og garners flere sidevisninger.
Login Fields
Der er et par gode eksempler på login form PSD'er at tjekke ud. Denne login freebie via WP Scientist har alle dine standardelementer. To indtastningsfelter til login / adgangskode, en indsende knap og afkrydsningsfelter for at styre session cookies.
Denne model af design er perfekt, hvis du kan implementere effekterne gennem jQuery. Øverste højre pilhoved giver dig mulighed for at tænke på en popup-stil vinduesopsætning. Dette er en vidunderlig teknik til at spare plads på din hjemmeside ved at holde formularen skjult, indtil en bruger klikker på registreringslinket.
Original Kilde - Download
Formularen herunder er gratis at downloade takket være designer Gil Huybrecht. Han brugte et lignende mønster med en kornet baggrund og papirtekstur. Hvad jeg især synes om Gils design er de "store" elementer. Det er meget venligere landing på en login formular, der fylder hele siden. Brugere kan nemt se, hvad de skriver og der er mindre rod.
Original Kilde - Download
Hvis du er erfaren som en frontend-udvikler ved hjælp af CSS3, er det super nemt at oversætte denne grafik til kode. Du kan endda implementere den valgte ydre glødseffekt og afrundede hjørner for knappen og indtastningsfelterne.
Kontakter
En anden form, du finder på næsten alle hjemmesider, er en kontaktformular. Dette vil normalt indeholde felter for afsenderens navn, e-mail og meddelelsesindhold.
Freebie nedenfor er et fantastisk eksempel på at bruge brugerdefinerede teksturer og ikoner.
Designet bruger også pladsholdertekst i stedet for etiketter. Dette betyder, at når feltet først læsses, er hvert felt angivet med en standardværdi (fx: dit navn). Men så når du begynder at skrive, rydder pladsholderen, og dit indhold vises i stedet. Alle kompatible browsere understøtter denne effekt, og det kan spare dig for noget plads på siden.
Original Kilde - Download
En anden vidunderlig freebie at gribe er denne tabbed kontakt form designet af den talentfulde Jonno Riekwel. Dette design er meget enklere og gør funktionskoder over hver indgang. Dette er en fantastisk løsning til større virksomheder eller startups, der har brug for at sende meddelelser langs forskellige afdelinger i virksomheden.
Original Kilde - Download
Kontakt formularer tutorials:
- Login / Registration Form: Idéer og Smukke Eksempler
- Opret en Stacked-Paper Effect Login-formular
- Opret en Ajax-baseret HTML5 / CSS3-kontaktformular
Bånd og bannere
For kun 6 eller 7 år siden var afrundede hjørner begyndt at stige i populære designtendenser. Nu er vi kommet endnu længere med drop skygger og hjørnebånd.
Original Kilde - Download
Nogle af disse elementer kan bruges som design højdepunkter, såsom en kommentar tæller eller som en udgivelsesdato for en blog. Det syede bånd ovenfor er perfekt til porteføljer eller projekt sider, hvor du vil fange din besøgendes opmærksomhed. Du kan også prøve et lignende lodret bånd, hvor designet falder ind fra toppen.
Disse små bivirkninger går langt for at forbedre dit layout. Besøgende tager varsel og vil elske disse æstetiske behageligheder. Men overvej at små hjørnebånd kun er en del af denne designtrin.
Original Kilde - Download
Derudover er fuld-on-banner design blevet sindssyge populære for at opbygge mærkegenkendelse. Du kan bruge disse i dit logo, navigation, hjemmeside eller endda på featured blogindlæg. Implikationerne er praktisk talt ubegrænsede med gode designmuligheder.
Indpakning af hjørnet
En anden meget specifik bånd-banner-effekt udføres ved at indpakke designet omkring dit hjørne. Dette bygger illusionen om, at din side er 3-D, og båndet er pakket om den øverste del af dit websted.
Designet nedenfor er 100% gratis til download og kan bruges til dine egne projekt ideer. Du kan se, hvordan dette vil gøre opmærksomheden fra besøgende, og hvorfor denne tendens er vokset til sådan en vanvid. Vær forsigtig med ikke at overanvende bannerne. I løs vægt kan disse blive meget irriterende ligesom de ældre "web 2.0" glansede / spejlede effekter.
Original Kilde - Download
Design med knapper
Bortset fra hyperlinks får du mest mulig interaktion fra besøgende med knapper. Disse sideposter kan udføre alt ved hjælp af jQuery og Ajax opkald, medmindre du også kan bruge knapper til at forbinde til statisk indhold, f.eks. Freebie downloads f.eks.!
UI-sætet nedenfor, designet af Matt Gentile har meget mere end bare knapper. Hans PSD sæt er fantastisk for begyndere, der søger at hente gradienter og strukturer til at bygge lignende former. Ofte vil du finde meget højere kvalitetsknapper i brugergrænsefladen end med enkelte PSD'er.
Original Kilde - Download
Sådan skaber du variationer
Da du bruger tid på at øve disse teknikker, vil du gerne skabe mange forskellige stilarter over tid. Dette kan resultere i at skifte lignende knapper mellem forskellige projekter og layouter. Et godt eksempel er de mælkeagtige knapper, der tilbydes af designer Robert van Klinken.
Original Kilde - Download
Hver af de tre originale knapper har en anden gradientstil, undtagen hover og aktive stater, der ligner hinanden. Når du arbejder i Photoshop, skal du matche farver mellem gradienter eller flytte farverne på et effektlag. Med denne forståelse kan du endda bygge dine egne knapper freebie sæt til download!
Original Kilde - Download
Træ + Papirstrukturer
Når du skal krydre dine grundlæggende layoutdesigner, så bliver du nødt til at bevæge dig mod mere smarte metoder. Tekster er altid velkomne, hvis du kan implementere dem ordentligt gennem CSS-baggrunde eller indstillet breddeindhold. Og to af de mest populære teksturer jeg har set er træ og blanke papirer.
Notepad ideen er virkelig enkel, men det kan fungere i et cool branding design enten som en del af et brugergrænseflade element eller indbygget i hele dit layout. Men papir ser ikke altid det bedste ud på egen hånd, og en anden tekstur kan hjælpe stilarterne sammen. Det er her, hvor mere detaljerede teksturer af træ kan komme i spil.
Original Kilde - Download
Billeder vil skille sig ud og se vidunderligt indpakket i en ydre skal. Hele konceptet tekstur er at give din hjemmeside en bestemt følelse eller følelse. Træ temaer kan fremkalde en følelse af hjem og natur. Der er endda et fantastisk træ-web-UI-kit til download af Jeremiah Wingett. Hvis du føler dig kreativ, så prøv at sammensætte nogle af dine egne teksturer og se, hvordan de udfører i et webbaseret miljø.
28 High Resolution Wood Textures
Konklusion
De bedste webdesignere er dem der praktiserer dagligt og aldrig lader deres fejl afskrække fra deres ultimative mål. Du skal være lydhør og hoppe hurtigt tilbage fra både succes og mislykkede forsøg. Tips og freebies i denne vejledning bør være et godt udgangspunkt for at begynde at lære at bygge forskellige sidekoncepter til et webprojekt. Og vi vil gerne læse dine tanker om sagen i det efterfølgende diskussionsområde.
