skapa en ren webbplatslayout i Photoshop-att designa en webbplatslayout är mer än att ordna färgglada bilder och fylla lite text i textramarna. Det är ett tillvägagångssätt som talar volymer om din kunds verksamhet. Webbplatsens färger och grafik definierar verksamhetens karaktär, medan kvaliteten på designen och det enkla navigationsflödet på webbplatsen bör knyta användaren till organisationen och göra honom till en potentiell kund.
utforma en snygg och lättillgänglig webbplats layout är obligatoriskt för varje wannabe Webbdesigner. Denna handledning är avsedd att ta dig igenom processen att skapa en webbplatslayout enkel och ren webbplats direkt från början. Under processen kommer du att lära dig viktiga punkter som hjälper dig att ytterligare få mer kunskap om webbdesign.
skriv ner dina krav innan du utformar en webbplatslayout.
innan du börjar utforma en webbplatslayout bör du veta hur din webbplats kommer att se ut och vilka ämnen du bör inkludera på webbplatsen är. Det är viktigt att göra en lista över webbplatslayoutelement som din klient behöver på sin webbplats. Tillsammans med det är kvaliteten på en bra designer att förbereda en mock av hela webbplatsen innan han börjar arbeta med den slutliga mallen.
starta din gratis Designkurs
3D-animering, modellering, simulering, spelutveckling & andra
olika designföretag anpassar olika nivåer av fördesignstrategier, som kan innehålla trådramning, prototyper, mockup, betaversioner och mycket mer. I den här handledningen skapar vi en mock-up-version innan vi startar den ursprungliga malldesignen. Jag använder de grå nyanserna, vilket gör det möjligt att identifiera mockupblocket.
Canvas
år tidigare, medan det fanns mycket få operativsystem och begränsade enheter för åtkomst till webbplatser, fixades sidans dimensioner till en eller två storlekar. Idag är scenariot helt annorlunda. Slutanvändare får tillgång till webbplatser på stationära datorer i olika storlekar, mobiltelefoner, iPads och surfplattor. Det finns ingen chans att du kan fixa din webbsida till en viss storlek i denna skiftande situation. Men det finns några Branschstandardstorlekar som tillämpas för varje enhet. Du hittar långsamt din favoritstorlek, eller din klient kan hänvisa dig till en webbplats för att efterlikna storlekarna.
i det här fallet arbetar vi med följande dimensioner. Oroa dig inte för höjden, eftersom den kommer att förändras över tiden. Ju mer innehåll du lägger till på din webbplats, desto mer blir höjden.
kom ihåg att det är vanligt att bläddra ner på sidan vertikalt, så du kanske inte fixar till en viss höjd för din webbsida om du inte vill att användaren ska bläddra på din hemsida som Google. Men det är nödvändigt att inte rulla horisontellt. Så begränsa din bredd enligt branschstandarderna och bli inte kreativ med den horisontella rullningen.
för webben är upplösningen begränsad till 72. Det finns bilder och sidor med högre upplösning på iPads och få surfplattor nyligen. Men det är ett sällsynt tillfälle, och det är bättre att hålla fast vid 72 med tanke på internethastigheten över hela världen.
Välj filerna med kommandot Ctrl + A och rita guider lika i hela mallen. En webbplats ska vara snyggt organiserad med varje element som ordnas sammanhängande med varandra. Och riktlinjer för webbplatslayout hjälper dig att få det enkelt.
gör din mockup redo.
att placera din mockup-fil på din ursprungliga mall hjälper dig att spara gott om tid. Designa din webbplats blir så lätt att du kommer att sluta slutföra ramverket inom några minuter. Mockupen hjälper dig dock bara att designa ramarna. Att slutföra designelementen med detaljer, typarrangemang och anpassning tar överflödig tid än att rita webbplatslayouten.
färgschema och andra val
nästa sak att efter att få din ram redo är att välja ett färgschema. Men det är bättre att få dina färger redo innan du börjar arbeta med designen.
det hela kokar ner till meddelandet att, få dina vapen redo innan du börjar designen. Allt, inklusive ikoner, bilder och färgval, bör vara klart innan du börjar arbeta. Att organisera och planera ditt arbete sparar mer tid och fokuserar på design utan hinder däremellan.
att välja färger kan vara en designers val om företaget är nytt och inte har en företagsidentitet tidigare. Kunderna ger en uppfattning om vilka nyanser de vill ha logotypen eller bakgrunden i vissa fall. När det gäller befintliga företag där du kan behöva omforma en hel webbplats kan du behöva välja samma färger enligt kundens behov.
det finns många webbplatser som kan hjälpa dig att välja miljontals färgscheman från arkiven. Prova följande webbplatser för att njuta av ett brett urval av färgkombinationer.
färg.Adobe.kom
Colourlovers.com
här valde jag några nyanser av blått att använda för webbplatsen. Hela webbplatsen kommer att planeras inom följande färgschema. Glöm inte att välja tre eller fyra olika färgkombinationer, eftersom vi inte vet vilken färg klienten föredrar. När klienten har slutfört ett färgschema, spara skuggvärdena och se till att färgerna spelar en viktig roll i varje vertikal i organisationen, särskilt i företagsidentiteten.
designprocess
det finns många sätt att fortsätta dina designers. Det finns inga hårda och snabba regler för webbplatslayout för att definiera eller följa designprocessen; det är mestadels en process som designern väljer för sin bekvämlighet.
vissa designers vill bygga hela block och ramar och börja arbeta med detaljer i andra etappen, följt av typen och slutligen anpassningar och justeringar. Vissa gillar att avsluta en del av sidan på en gång och ta den till nästa del. Vi följer den andra stilen.
vi kommer att avsluta webbplatsen i följande steg
- sidhuvud & sidfot
- vad vi gör
- tjänster
- Form
- nyheter
- sidfot
sidhuvud & sidfot
tumregeln för att definiera måtten på din rubrik eller banner lämnas till din kreativitet. Enligt de senaste trenderna visas webbplatser med en enorm bild som täcker hela datorskärmen. Stilen kallas Hjältebild, som blev ganska populär nyligen.
i det här fallet började vi med 120 pixlar höjdhuvud och en 550-pixelhöjd för bannern. Bredden ska matcha dokumentstorleken.
mönster med Enfärgad har en platt utseende som inte går bra med större ramar eller bilder. För att undvika det platta utseendet applicerade jag ett gradientöverlagringslager ovanpå bannern. Det ger bannern ett djup som långsamt förvandlas från en nyans till en annan.
därefter började vi importera logotypen och placera den i övre vänstra hörnet av rubriken och en annan större logotyp i mitten av bannern. Du kan också observera vektorformerna för webbplatslayout i det övre högra hörnet, som används för att dela länkar till sociala medier.
i detta skede slutade jag lägga till typen i rubriken & Bannerdelen. Företagsnamn, varumärkesmeddelande, med länkar och tjänster, läggs till i texten. Du kan också observera en transparent knapp på bannern.
vanlig text eller för mycket av typen utan specialfunktioner kommer att förstöra utseendet på din webbsida; sidan kommer snart att tråka ut användaren, vilket kan låta honom lämna din webbplats snabbt. Kolla in vektorformen som jag lade till i tjänstelänkarna längst upp till höger på bannern. Stilen är enkel, men den fyller tomrummet och undviker det vardagliga utseendet.
välj en bild som är lämplig för verksamheten. Det finns miljontals bilder tillgängliga på webben, och det tar inte för lång tid att hitta en bild som passar ditt krav.
i mitt fall hittade jag en högkvalitativ bild som jag tror kommer att gå bra med min webbplats. Jag har inget företagstema för webbplatsen, så jag är fri att välja vilken bild som ser bra ut på bannerposten.
försök att ladda ner några HD-bilder från gratis stock bild platser nedan
www..com.
blandning är en konst du bör behärska för att producera vackra banners. Här blandade jag tre lager för att uppnå effekten som visas i bilden ovan. Här är vad jag gjorde
- placera bildlagret ovanpå den blå färgbannern
- placera Gradientöverlägget ovanför bilden
- ändra bildens opacitet 40 procent och ändra blandningsläget till skillnad.
- kolla in lagpaletten i bilden ovan för att förstå hur lagren staplas på varandra.
så här ser din rubrik & Banner ut när vi precis har slutat arbeta med den. Vi arbetar på en del på en gång, och det är dags att gå vidare till nästa nivå.
justering är avgörande när det gäller typ; ha en uppfattning om hur din webbplats ska se ut, och texten ska anpassas innan du startar den. På den här nivån använde jag två olika textramar, båda inriktade till vänster.
nästa steg är att utforma tjänster del av webbsidan. Jag designade en metallstjärna i grå nyanser för att visa upp olika tjänster i företaget. Avsikten bakom att använda stjärnsymbolen är 5-stjärniga tjänster.
när det gäller att anpassa texten, guider är dina bästa vänner. Koherens inom typ och objekt kan erhållas genom att utnyttja det vita utrymmet och lika luckor mellan designelementen. Jag använde många riktlinjer för webbplatslayout för att se att alla objekt i ramen ska behålla lämpliga luckor och avstånd, vilket ger en hel del vitt utrymme.
nästa steg i vår design är att skapa formulärfältet. I det här fallet arbetar jag motsatt till den metod som vi använde vid utformningen av bannern. Vi placerar bildlagret under det enfärgade lagret och applicerar ett lutningslager ovanpå de två lagren för att få ett bättre utseende. Att spela med blandningslägena är alltid viktigt när du placerar större bilder.
valet av bilderna för denna webbplats har inget specifikt tema relaterat till det. Jag tror att den här bilden kommer att hjälpa Webbplatsen att se bättre ut.
placera bilden under det färgade bakgrundsskiktet. För att fixa bilden exakt till storleken på det färgade lagret, använd lagermaskeringsalternativ.
ta en titt på lagpaletten i bilden ovan. Det solida blåfärgade skiktet är högst upp på bilden, blandningsläget konverteras till överlagring och opaciteten reduceras till 65 procent.
jag använde lutningskartan ovanpå de två lagren. Blandningsläget ändras till nyans och opaciteten förblir densamma.
formulärrutan är klar, vilket tar oss till slutet av den fjärde nivån i vår webbdesign.
vår nästa nivå består av två enkla textramar. Det liknar nivån två på webbsidan, och jag använde justerade de två rutorna som liknar toppen. Att upprätthålla koherens i anpassning är ett bra sätt att använda det vita utrymmet.
när vi nådde den sista delen av sidan är det dags att titta på sidfotens dimensioner igen. Designern måste planera om sidfotens höjd baserat på de länkar han ska använda där. I det här fallet gav jag en höjd på 170 pixlar till min sidfot. Bredden förblir densamma som webbplatsen.
placera länkar och bilder enligt dina krav.
med detta avslutade vi designdelen av vår webbplats. Färgkombinationerna vi använde är minimala; vi använder mycket vitt utrymme i vår design och lägger till enkel text med minsta teckensnitt. Avsikten är att utforma en ren webbsida, som vi hoppas uppfylls.
ta en titt på utformningen av hela sidan nedan igen.
