Designing Killer Web UI Layouts With Freebies - Ultimate Guide
Fältet för webbdesign har tagit ett andetag på egen hand om några få år. Det finns mer aktiva designers världen över nu än någonsin tidigare, alla samarbetar om innovativa projektidéer. Och koncepten bakom många av dessa trender har utvecklats genom professionella grafikdesigners.
Det kan ta flera månader eller till och med år innan du förstår tekniken för att bygga ett användargränssnitt. Du måste överväga storlekar och placering av sidelement, även läsbarhet för text och etiketter. Med lite fritid kan du gräva till en minimalistisk inställning för att bygga webbplatser med mindre och minska förvirring. Och även då finns det dussintals andra designtekniker att överväga också.
För den här guiden har jag kopplat upp några moderna användargränssnittstekniker med freebies du kan ladda ner och leka med. Jag hoppas att detta kommer att ge en viss motivation till de som är intresserade av en karriär inom grafik / webbdesign. Även professionella webbdesigners kan hitta några av dessa trender som är till hjälp för ditt nästa projekt.
Öva med fullständiga mallar
När du har färdigheter att designa din egen layout från början, behöver du inte börja med mallar. Nybörjare kan å andra sidan känna sig mer bekväma från en full design och arbetar med de finare detaljerna.
Det finns några bra gratis nedladdningar av fullständiga PSD-webbsidor för portföljer, hemsidor, bloggar och många andra kategorier. Dessa är de perfekta mönster för att komma igång med att bekanta dig med en “allmän” webblayout. Varje webbplats kommer att ha olika behov för sidelement och du måste bestämma vilka objekt som är viktiga.
Här är ett PSD-exempel som heter "AppCivilization", designad av Martin Fabricius. Layouten presenteras för en kreativ studio som utformar mobilappar och eventuellt webbplatser. Mot botten hittar du en liten panel av appikoner som visas i en portfölj. Du kommer också märka att hela designen är uppbruten horisontellt i en rubrik, topp bildspel, huvudinnehåll och mörkare sidfot.
Originalkälla - Ladda ner
Designa landningssidor
Låt oss titta på en annan freebie också designad av Martin. Detta nästa exempel är en målsida som du kan använda för att sälja alla typer av produkter. Vanligtvis är det digitala varor som kan laddas ned av användaren, dvs appar, foton, ikoner, mallar etc..
Originalkälla - Ladda ner
Men den bästa delen av hans design är att det är mycket flexibelt för nybörjare att arbeta runt. Sidhuvudet använder fortfarande en liten toppnavigering med en stor bild, men särskilt de förväntade användaråtgärderna är olika. Han har en stor “Köp det!” knappen som sticker ut strax över veckan. På en produktens målsida skulle detta uppmärksamma mer än ett jQuery-bildspel.
En annan bra användargränssnittsteknik är den lilla iPhone-funktionen displayen mitt på sidan. Martin innehåller en förhandsgranskning av iPhone, App Store-knappen och en liten lista över nyckelfunktioner. När besökare letar efter produktdetaljer kan du inte göra saker enklare än via en formaterad lista.
Fler mallar:
Här är några gratis PSD-mallar som vi släppte i passet:
- "BiZ" Business Website PSD Templates
- "ThinkJuice" Produktsida PSD-mall
- Professionell företags webbplats PSD-mall
- "Polo360" Portfolio Site PSD-mall
Du kanske också är intresserad av följande:
- Företagswebbplatskartor
- "Kommande snart" sida handledning + mallar
Huvudsajtnavigering
Menyer och knappar är bara verktyg för att bygga mycket större sidelement. Det finns ingen förnekande att din webbplatss huvudnavigering har ett mycket viktigt syfte. Du behöver det för att din webbplats ska vara lättillgänglig med möjliga återgångsmetoder för mobila användare.
Nedan är en cool navigationsfält med en sömnadsteksturseffekt. Markeringsstilen kan visas som en mörkad ruta eller som ett nedåtriktat spets som pekar in i sidinnehållet. Denna stil har varit framträdande under åren och ser bra ut i rätt miljö.
Originalkälla - Ladda ner
En annan liknande freebie är den här strukturerad headernavigeringen designad av Edi Gil. Jag gillar verkligen hur denna andra navbar innehåller både en lista med länkar och några ytterligare sidoknappar. Du vill erbjuda sekundära länkar till besökare där de kan hitta dina profiler på webben.
Originalkälla - Ladda ner
Alternativa menyalternativ
Bortsett från den typiska horisontella navigeringsfältet finns andra utformningar av design att överväga. Vertikala länkar kan delas upp i olika underrubriker vilket ger mer utrymme för sidinnehåll.
Ta till exempel menyns freebie nedan designad av webbplatsen Icojam.
Varje rubrik är byggd för att expandera och kollapsa baserat på det valda objektet. Dessutom möjliggör designen ett litet antal räknare att sitta till höger om varje kategori. Detta skulle bäst fyllas i som en bloggnavigering för att räkna hur många inlägg som arkiveras under varje ämne.
Originalkälla - Ladda ner
Navigeringstips / Tutorials:
- 50 + Rengör CSS Tab-Based Navigation Scripts
- Breadcrumb Navigation Bästa praxis och exempel
- Bygg mobilnavigering med jQuery
- Kodning av Breadcrumb Navigation i CSS3
- Designing Navigation med mindre CSS
Renare webbformulär
Internetens modern tid är långt ifrån en statisk mötesplats. Användare delar ständigt information och interagerar med varandra dagligen. Huvuddelen av denna text och mediedelning hanteras via webbformulär.
Vi bör titta på några exempel på hur du kan utforma snygga inmatningar och knappar. Designen av dina element kan gå långt för att bjuda in besökarna att faktiskt använda dem. Och detta bygger i sin tur på din webbplats trovärdighet och ger fler sidvisningar.
Inloggningsfält
Det finns några bra exempel på inloggningsformulär PSDs att kolla in. Det här inloggningsfältet via WP Scientist har alla dina standardelement. Två inmatningsfält för inloggning / lösenord, en inlämningsknapp och kryssrutor för att hantera sessionskakor.
Denna modell av designen är perfekt om du kan implementera effekterna genom jQuery. Det högra högra pilhuvudet gör att du tänker på en popup-stil fönsterinstallation. Det här är en underbar teknik för att spara utrymme på din webbplats genom att hålla formuläret gömt tills en användare klickar på länken för registrering.
Originalkälla - Ladda ner
Formuläret nedan är gratis att ladda ner tack vare designern Gil Huybrecht. Han använde ett liknande mönster med en kornig bakgrund och pappersstruktur. Vad jag speciellt tycker om Gils design är "överdimensionerade" element. Det är mycket vänligare landning på ett inloggningsformulär som fyller hela sidan. Användare kan enkelt se vad de skriver och det finns mindre rodnad.
Originalkälla - Ladda ner
Om du är erfaren som en frontend-utvecklare som använder CSS3 är det super lätt att översätta den här grafiken till kod. Du kan även genomföra den valda yttre glödseffekten och avrundade hörn för knappen och inmatningsfälten.
Kontakter
En annan form som du hittar på praktiskt taget varje webbplats är en kontaktformulär. Detta inkluderar normalt fält för avsändarens namn, e-post och meddelandeinnehåll.
Freebie nedan är ett utmärkt exempel på att använda egna texturer och ikoner.
Designen använder också platshållare text istället för etiketter. Detta innebär att när fältet laddas först fylls varje fält med ett standardvärde (ex: ditt namn). Men sedan du börjar skriva, rensar platshållaren och ditt innehåll visas istället. Alla standardkompatibla webbläsare stöder denna effekt och det kan spara lite utrymme på sidan.
Originalkälla - Ladda ner
En annan underbar freebie att ta tag i är den här flikformade kontaktformulären designad av de begåvade Jonno Riekwel. Denna design är mycket enklare och gör funktionen etiketter ovanför varje ingång. Det här är en bra lösning för större företag eller nystartade företag som behöver skicka meddelanden genom olika avdelningar i företaget.
Originalkälla - Ladda ner
Kontaktformulär handledning:
- Inloggning / Registreringsformulär: Idéer och vackra exempel
- Skapa en inloggningsformulär med staplad papperseffekt
- Skapa en Ajax-baserad HTML5 / CSS3-kontaktformulär
Band och Banderoller
Bara 6 eller 7 år sedan började runda hörn stiga i populära designtrender. Nu har vi kommit ännu längre med drop skuggor och hörnband.
Originalkälla - Ladda ner
Några av dessa element kan användas som designhöjdpunkter, till exempel ett kommentarerstabell eller ett publiceringsdatum för en blogg. Det söka bandet ovan är perfekt för portföljer eller projektsidor där du vill fånga besökarens uppmärksamhet. Du kan också prova ett liknande vertikalt band där designen faller in från toppen.
Dessa små sidoeffekter går långt för att förbättra din layout. Besökare märker och kommer att älska dessa estetiska bekvämligheter. Men anser att små hörnband bara är en del av denna designutveckling.
Originalkälla - Ladda ner
Dessutom har full bannerdesign blivit vansinnigt populär för att bygga upp varumärkesigenkänning. Du kan använda dessa i din logotyp, navigering, hemsida eller till och med på featured blogginlägg. Implikationerna är praktiskt taget obegränsade med goda designmöjligheter.
Förpackning av hörnet
En annan väldigt specifik bandbanner-effekt utförs genom att inveckla designen runt sidans hörn. Detta bygger illusionen på din sida som 3-D och bandet är omslagen runt den övre delen av din webbplats.
Designen nedan är 100% gratis för nedladdning och kan användas för egna projektidéer. Du kan se hur detta skulle dra uppmärksamhet från besökare och varför denna trend har vuxit till en sådan frenesi. Var försiktig så att du inte överanvända bannersna. I bulk kan dessa bli mycket irriterande ungefär som de äldre "web 2.0" glansiga / speglade effekterna.
Originalkälla - Ladda ner
Designa med knappar
Bortsett från hyperlänkar får du störst interaktion från besökare med knappar. Dessa sidobjekt kan utföra något med hjälp av jQuery- och Ajax-samtal, förutom att du också kan använda knappar för länkning till statiskt innehåll, t.ex. freebie-nedladdningar till exempel!
UI-kitet nedan, designad av Matt Gentile har mycket mer än bara knappar. Hans PSD-uppsättning är fantastisk för nybörjare som vill hämta uppgraderingar och texturer för att bygga liknande former. Ofta hittar du mycket högre kvalitetsknappar i UI-paket än med singulära PSD-enheter.
Originalkälla - Ladda ner
Hur man skapar variationer
När du spenderar tid på att öva dessa tekniker vill du skapa många olika stilar över tiden. Detta kan leda till att man byter liknande knappar mellan olika projekt och layouter. Ett bra exempel är de mjölkiga knappar som erbjuds av designer Robert van Klinken.
Originalkälla - Ladda ner
Var och en av de tre ursprungliga knapparna har en annan gradientstil, förutom att svävar och aktiva stater som liknar varandra. När du arbetar i Photoshop måste du matcha färger mellan gradienter eller flytta färgerna till ett effektlager. Med den här förståelsen kan du till och med bygga egna knappar freebie set för nedladdning!
Originalkälla - Ladda ner
Trä + Pappersstruktur
När du behöver krydda dina grundläggande layoutdesigner måste du flytta till mer smidiga metoder. Texturer är alltid välkomna om du kan implementera dem ordentligt via CSS-bakgrunder eller breddinnehåll. Och två av de mest populära texturerna jag har sett är trä och blankt papper.
Anteckningsblanketten är väldigt enkel men det kan fungera i en cool branding-design, antingen som en del av ett användargränssnitt eller inbyggt i hela din layout. Men papper ser inte alltid bäst ut på egen hand, och en annan konsistens kan hjälpa stilar att blanda in. Här kan mer detaljerad texturer av trä komma in i spel.
Originalkälla - Ladda ner
Bilderna kommer att stå ut och se underbart inslagna i ett yttre skal. Hela konseptet med textur är att ge din webbplats en viss känsla eller känsla. Trädämnen kan framkalla en känsla av hem och natur. Det finns till och med en fantastisk träweb-UI-kit för nedladdning av Jeremiah Wingett. Om du känner dig kreativ, försök att sätta ihop några av dina egna texturer och se hur de fungerar i en webbaserad miljö.
28 Högupplöst trästruktur
Slutsats
De bästa webbdesignersna är de som övar dagligen och aldrig låter deras misslyckanden avskräcka från deras slutliga mål. Du måste vara lyhörd och studsa snabbt tillbaka från både framgång och misslyckade försök. Tips och freebies i den här guiden ska vara en bra utgångspunkt för att börja lära sig att bygga olika sidokoncept för ett webbprojekt. Och vi skulle vilja läsa dina tankar om frågan i postdiskussionsområdet.
