Skapa en ren webbplatslayout i Photoshop - Att utforma en webbplatslayout är mer än att ordna färgglada bilder och fylla lite text i textramarna. Det är en metod som talar för kundens verksamhet. Webbplatsens färger och grafik definierar verksamhetens karaktär, medan kvaliteten på designen och det enkla navigeringsflödet på webbplatsen bör binda användaren med organisationen och göra honom till en potentiell kund.
Att utforma en snygg och en lättillgänglig webbplatslayout är obligatoriskt för alla 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 vidare med att 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 ser ut och vilka ämnen du bör inkludera på webbplatsen. Det är avgörande att göra en lista med webbplatslayoutelement som din klient behöver på sin webbplats. Tillsammans med det är kvaliteten på en bra designer att förbereda en håna på hela webbplatsen innan han börjar arbeta med den slutliga mallen.
Olika designföretag anpassar olika nivåer av fördesigningsstrategier, som kan innehålla trådramning, prototyper, mockup, beta-versioner och mycket mer. I denna handledning skapar vi en mock-up-version innan vi startar den ursprungliga malldesignen. Jag använder de grå nyanser som gör det möjligt att identifiera mockup-blocket
Duk
År tidigare, medan det fanns mycket få operativsystem och begränsade enheter för att komma åt webbplatser, var sidens dimensioner fixerade till en eller två storlekar. Idag är scenariot helt annorlunda. Slutanvändare har åtkomst till webbplatser på stationära datorer i olika storlekar, mobiltelefoner, iPads och surfplattor. I denna olika situation finns det ingen chans att du kan fixa din webbsida till en viss storlek. Men det finns vissa industristandardstorlekar som används för varje enhet. Du hittar långsamt din favoritstorlek eller så kan din klient hänvisa dig till en webbplats för att härma storleken.
I det här fallet arbetar vi med följande dimensioner. Oroa dig inte för höjden eftersom det kommer att förändras över tid. Ju mer innehåll du lägger till din webbplats desto högre blir höjden.
Kom ihåg att det är vanligt att rulla nedåt sidan vertikalt, så att 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 industristandarder 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 vid ett sällsynt tillfälle, och det är bättre att hålla sig till 72 med tanke på internethastigheten över hela världen.
Välj filerna med Ctrl + A-kommandot och rita guider lika över mallen. En webbplats ska ordnas ordentligt med varje element ordnat koherent till 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. Att designa din webbplats blir så lätt att du kommer att slutföra ramverket inom några minuter. Men mockupen hjälper dig bara att utforma ramarna. Att komplettera designelementen med detaljer, typarrangemang och justering kommer att ta över tid än att rita webbplatsens layout.
Färgschema och andra val
Nästa sak efter att ha gjort din ram klar är att välja ett färgschema. Men det är bättre att göra dina färger redo innan du börjar arbeta med designen.
Det hela kommer till budskapet att göra dina vapen redo innan du börjar designen. Allt inklusive ikoner, bilder och färgval bör vara redo 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 designerens val om företaget är nytt och inte har en företagsidentitet tidigare. I vissa fall ger kunderna en uppfattning om vilka nyanser de vill ha logotypen eller bakgrunden. När det gäller befintliga företag där du kan behöva göra om en hel webbplats kan du behöva välja samma färger som enligt kundens behov.
Det finns många webbplatser som kan hjälpa dig att välja miljoner färgscheman från arkiven. Prova på följande webbplatser för att njuta av ett brett urval av färgkombinationer.
Color.adobe.com
Colourlovers.com
Här valde jag några blå nyanser 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ärgklient som föredrar. När klienten har färdigställt 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.
Designing Process
Det finns många sätt att fortsätta med 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 kommer att välja för hans bekvämlighet.
Vissa designers vill bygga hela blocken och ramarna och börja arbeta med detaljer i det andra steget följt av typen och slutligen justeringar och justeringar. Vissa tycker om 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
- Header & Footer
- Vad vi gör
- tjänster
- Form
- Nyheter
- sidfot
Header & Footer
Tumregeln för att definiera dimensionerna på din rubrik eller banner lämnas åt din kreativitet. Enligt de senaste trenderna visas webbplatser med en enorm bild som täcker hela datorskärmen. Stilen benämns Hero image, som nyligen blev ganska populär.
I det här fallet började vi med 120 pixlar höjdrubrik och 550 pixel höjd för bannern. Bredden ska matcha med dokumentstorleken.
Motiv med fast färg har ett platt utseende som inte går bra med större ramar eller bilder. För att undvika det platta utseendet applicerade jag gradientoverlaylager 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 det övre vänstra hörnet av rubriken och en annan större logotyp i mitten av bannern. Du kan också se webbplatsformeringsvektorformerna i det övre högra hörnet, som används för att dela länkarna till sociala medier.
I detta skede slutade jag att lägga till typen i Header & Banner-delen. Företagsnamn, varumärkesmeddelande, med länkar och tjänster, läggs till i texten. Du kan också se en transparent knapp på bannern.
Vanlig text eller för mycket typ utan specialfunktioner kommer att förstöra utseendet och känslan på din webbsida; Sidan kommer snart att uthärda användaren, vilket kan låta honom lämna din webbplats snabbt. Kolla in vektorformen som jag har lagt till i servicelänkarna längst upp till höger i banners. Stilen är enkel, men fyller tomrummet och undviker det vardagliga utseendet.
Välj en bild som är lämplig för företaget. Det finns miljoner lagerbilder tillgängliga på webben, och det tar inte så lång tid att hitta en bild som passar ditt behov.
I mitt fall hittade jag en högkvalitativ bild som jag tror kommer att gå bra med min webbplats. Jag har inte ett affärsteman för webbplatsen, så jag kan fritt välja vilken bild som ser bra ut på bannerstolpen.
Försök att ladda ner några HD-bilder från gratis lagerbildsidor som anges nedan
www.pixabay.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 bildskiktet ovanpå det blå färgbanret
- Placera övergångsöverlägget ovanför bilden
- Ändra bildens opacitet 40 procent och ändra blandningsläget till skillnad.
- Kolla in lagerpaletten i bilden ovan för att förstå hur lagren staplas på varandra.
Så ser din Header & Banner ut när vi just har arbetat med det. Vi arbetar med 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 text bör anpassas innan du startar den. På den här nivån använde jag två olika textramar, båda riktade till vänster.
Nästa steg är att designa servicedelen av webbsidan. Jag designade en metallstjärna i grå nyanser för att visa upp företagets olika tjänster. Avsikten med 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 föremål kan erhållas genom att använda det vita utrymmet och lika mellanrum mellan designelementen. Jag använde många riktlinjer för webbplatslayout för att se att alla objekt i ramen borde bibehålla ordentliga luckor och avstånd som får ut en hel del vitutrymme.
Nästa steg i vår design är att skapa formulärfältet. I det här fallet arbetar jag mitt emot den metod som vi använde vid utformningen av banners. Vi kommer att placera bildskiktet under det helt färgade lagret och applicera ett lutningsskikt 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 bilder 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änder du alternativ för lagermaskning.
Ta en titt på lagpaletten i bilden ovan. Det solida blåfärgade skiktet är på bildens överkant, blandningsläget konverteras till överlägg och opaciteten reduceras till 65 procent.
Jag använde lutningskartan ovanpå de två skikten. 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å två på webbsidan och jag använde justerade de två rutorna som liknar toppen. Att upprätthålla koherens i linje ä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 fotens höjd baserat på länkarna han ska använda där. I det här fallet gav jag en fothöjd på 170 pixlar. Bredden förblir densamma som webbplatsen.
Placera länkarna och bilderna enligt ditt krav.
Med detta avslutade vi utformningen av vår webbplats. Färgkombinationerna som vi använde är lägsta, vi använder oss av mycket vitt utrymme i vår design och har lagt till enkel text med minsta teckensnitt. Avsikten är att utforma en ren webbsida, som vi hoppas är uppfylld.
Ta en titt på designen på hela sidan nedan igen
