Opret et rent webstedslayout i Photoshop - At designe et webstedlayout er mere end at arrangere farverige billeder og udfylde noget tekst i tekstrammerne. Det er en tilgang, der taler bånd om din kundes forretning. Webstedets farver og grafik definerer forretningens art, mens kvaliteten af design og let navigationsstrøm på webstedet skal binde brugeren til organisationen og gøre ham til en potentiel kunde.
Det er obligatorisk at designe et flot og et let tilgængeligt webstedlayout for enhver wannabe webdesigner. Denne tutorial er beregnet til at føre dig gennem processen med at oprette et webstedlayout enkelt og rent websted lige fra bunden. Under processen vil du lære vigtige punkter, som vil hjælpe dig videre med at få mere viden om webdesign. 
Skriv dine krav ned, inden du designer et webstedslayout
Inden du begynder at designe et webstedlayout, skal du vide, hvordan dit websted vil se ud, og hvad er de emner, du skal inkludere på webstedet. Det er vigtigt at lave en liste over webstedslayoutelementer, som din klient har brug for på hans websted. Sammen med det er kvaliteten af en god designer at forberede en spot af hele websitet, før han begynder at arbejde på den endelige skabelon.
Forskellige designfirmaer tilpasser forskellige niveauer af foruddesignende strategier, som kan indeholde trådramme, prototype, mockup, beta-versioner og meget mere. I denne tutorial vil vi oprette en mock-up-version, inden det originale skabelondesign startes. Jeg bruger de grå nuancer, der gør det muligt at identificere mockup-blokken
Lærred
År før, mens der var meget få OS og begrænsede enheder til at få adgang til websteder, var sidens dimensioner fastgjort til en eller to størrelser. I dag er scenariet helt anderledes. Slutbrugere får adgang til websteder på desktops i forskellige størrelser, mobiltelefoner, iPads og tablets. I denne forskellige situation er der ingen chance for, at du kan fastlægge din webside til en bestemt størrelse. Men der er nogle industristandardstørrelser, der anvendes til hver enhed. Du finder langsomt din yndlingsstørrelse, eller din klient kan muligvis henvise dig et websted for at efterligne størrelserne.
I dette tilfælde arbejder vi på følgende dimensioner. Vær ikke bange for højden, da den vil ændre sig over tid. Jo mere indhold du tilføjer til dit websted, desto mere er højden.
Husk, at det er almindeligt at rulle ned ad siden lodret, så du muligvis ikke fastgør til en bestemt højde for din webside, medmindre du ikke ønsker, at brugeren skal rulle på din startside som Google. Men det er nødvendigt ikke at rulle vandret. Så begræns din bredde i henhold til industristandarder og bliv ikke kreativ med den vandrette rulle.
For internettet er opløsningen begrænset til 72. Der er billeder og sider med højere opløsning fundet på iPads og få tabletter for nylig. Men det er ved en sjælden lejlighed, og det er bedre at holde sig til 72 i betragtning af internethastigheden over hele kloden.
Vælg filerne ved hjælp af Ctrl + A-kommandoen, og tegn guider lige igennem skabelonen. Et websted skal være pænt organiseret med hvert element arrangeret sammenhængende med hinanden. Og retningslinjer for webstedslayout hjælper dig med at få det let.
Gør din mockup klar
At placere din mockup-fil på din originale skabelon hjælper dig med at spare rigelig tid. At designe dit websted bliver så let, at du ender med at færdiggøre rammen inden for få minutter. Mockup hjælper dig dog kun med at designe rammerne. At gennemføre elementerne i design med detaljer, typearrangement og justering vil tage over tid end at tegne webstedets layout.
Farveskema og andre valg
Den næste ting, når du har fået din ramme klar, er at vælge et farveskema. Men det er bedre at gøre dine farver klar, inden du begynder at arbejde på designet.
Det hele koger ned til beskeden om, at få dine kanoner klar, inden du starter designet. Alt inklusive ikoner, billeder og farvevalg skal være klar, før du begynder at arbejde. Organisering og planlægning af dit arbejde sparer mere tid og fokuserer på design uden hindring imellem.
Valg af farver kan være designerens valg, hvis virksomheden er ny og ikke har en virksomhedsidentitet før. I nogle tilfælde giver kunderne en idé om, hvilke nuancer de ønsker, at logoet eller baggrunden skal være. I spørgsmålet om eksisterende virksomheder, hvor du muligvis har brug for at redesigne et helt websted, skal du muligvis vælge de samme farver som for kundens behov.
Der er adskillige websteder, der kan hjælpe dig med at vælge millioner af farveskemaer fra arkiverne. Prøv følgende websteder for at nyde et bredt udvalg af farvekombinationer.
Color.adobe.com
Colourlovers.com
Her valgte jeg nogle få nuancer af blåt at bruge til hjemmesiden. Hele webstedet vil blive planlagt inden for følgende farveskema. Glem ikke at vælge tre eller fire forskellige farvekombinationer, da vi ikke ved, hvilken farveklient der foretrækker. Når klienten er færdig med et farveskema, skal du gemme skyggeværdierne og sørge for, at farverne spiller en vigtig rolle i enhver vertikal af organisationen. Især inden for virksomhedsidentitet.
Designproces
Der er mange måder at fortsætte dine designere på. Der er ingen hårde og hurtige webstedlayoutregler til at definere eller følge processen med at designe, det er hovedsageligt en proces, som designeren vil vælge for hans bekvemmelighed.
Nogle designere ønsker at bygge hele blokke og rammer og begynde at arbejde på detaljer i den anden fase efterfulgt af typen og til sidst justeringer og justeringer. Nogle kan lide at afslutte den ene del af siden ad gangen og tage den til den næste del. Vi følger den anden stil.
Vi afslutter webstedet i følgende trin
- Header & Footer
- Hvad vi gør
- Services
- Form
- Nyheder
- Sidefod
Header & Footer
Tommelfingerreglen til at definere dimensionerne på dit header eller banner overlades til din kreativitet. I henhold til de nyeste tendenser vises websteder med et kæmpe billede, der dækker hele computerskærmen. Stilen omtales som Hero image, som for nylig blev ret populær.
I dette tilfælde startede vi med 120 pixels højdehoved og 550 pixel højde for banneret. Bredde skal svare til dokumentstørrelsen.
Design med ensfarvet har et fladt udseende, der ikke passer godt med større rammer eller billeder. For at undgå det flade udseende anvendte jeg gradientoverlaylag på toppen af banneret. Det giver banneret en dybde, der langsomt omdannes fra en skygge til en anden.
Derefter begyndte vi at importere logoet og placere det i øverste venstre hjørne af overskriften og et andet større logo i midten af banneret. Du kan også se webstedslayoutvektorformerne i øverste højre hjørne, som bruges til at dele de sociale medier-links.
På dette tidspunkt var jeg færdig med at tilføje typen i Header & Banner-delen. Firmanavn, brand-meddelelse, med links og tjenester, tilføjes i teksten. Du kan også se en gennemsigtig knap på banneret.
Almindelig tekst eller for meget af typen uden specialfunktioner vil ødelægge udseendet og følelsen af din webside; siden vil snart kede brugeren, hvilket kan lade ham forlade dit websted hurtigt. Tjek vektorformen, jeg føjede til servicelinkene øverst til højre på banneret. Stilen er enkel, men alligevel udfylder det tomrum ved at undgå det verdslige look.
Vælg et billede, der passer til virksomheden. Der er millioner af stockbilleder tilgængelige på nettet, og det tager ikke for lang tid at finde et billede, der passer til dit krav.
I mit tilfælde fandt jeg et billede i høj kvalitet, som jeg tror vil gå godt med mit websted. Jeg har ikke et forretningstema til hjemmesiden, så jeg kan frit vælge ethvert billede, der ser godt ud på bannerstolpen.
Prøv at downloade nogle HD-billeder fra gratis lagerbillede-websteder, der er vist nedenfor
www.pixabay.com
Blanding er en kunst, du skal mestre for at fremstille smukke bannere. Her blandede jeg tre lag for at opnå effekten vist i ovenstående billede. Her er hvad jeg gjorde
- Placer billedlaget oven på det blå farvebanner
- Placer gradientoverlayet over billedet
- Skift billedets opacitet 40 procent, og skift blandingstilstand til forskel.
- Tjek lagpaletten på billedet ovenfor for at forstå, hvordan lagene er stablet på hinanden.
Sådan ser din Header & Banner ud, da vi lige er færdige med at arbejde på det. Vi arbejder på en del ad gangen, og det er på tide at gå videre til det næste niveau.
Tilpasning er afgørende, når det kommer til type; har en idé om, hvordan dit websted skal se ud, og teksten skal justeres, før du starter det. På dette niveau brugte jeg to forskellige tekstrammer, begge på linje til venstre.
Det næste trin er at designe servicedelen af websiden. Jeg designede en metallisk stjerne i grå nuancer for at vise forskellige services i virksomheden. Intensionen bag brugen af stjernesymbolet er 5-stjernetjenester.
Når det kommer til at tilpasse teksten Guider er dine bedste venner. Kohærens inden for type og genstande kan opnås ved at udnytte det hvide rum og lige mellemrum mellem designelementerne godt. Jeg brugte mange retningslinjer for webstedslayout for at se, at alle objekter i rammen skulle opretholde passende huller og afstande, der bringer en hel del hvid plads ud.
Det næste trin i vores design er at oprette formfeltet. I dette tilfælde arbejder jeg modsat den metode, vi brugte til at designe banneret. Vi placerer billedlaget under det faste farvede lag og anvender et gradientlag oven på de to lag for at opnå et bedre udseende. Det er altid vigtigt at lege med blandingstilstande, mens der placeres større billeder.
Valget af billeder til dette websted har ikke noget specifikt tema relateret til det. Jeg tror, at dette billede vil hjælpe webstedet med at se bedre ud.
Placer billedet under det farvede baggrundslag. Hvis du vil fastlægge billedet nøjagtigt til størrelsen på det farvede lag, skal du bruge lagmaskeringsindstillinger.
Se på lagpaletten i ovenstående billede. Det faste blåfarvede lag er øverst på billedet, blandingstilstanden konverteres til overlay og opacitet reduceres til 65 procent.
Jeg brugte gradientkortet oven på de to lag. Blandingstilstand ændres til farvetone, og opaciteten forbliver den samme.
Formularboksen er klar, hvilket bringer os til slutningen af det fjerde niveau i vores webdesign.
Vores næste niveau består af to enkle tekstrammer. Det ligner niveau 2 på websiden, og jeg brugte justeret de to bokse, der ligner toppen. Opretholdelse af sammenhæng i tilpasningen er en god måde at bruge det hvide rum på.
Da vi nåede den sidste del af siden, er det på tide at se på dimensionerne på sidefoden igen. Designeren skal planlægge om sidefodens højde baseret på de links, han skal bruge der. I dette tilfælde gav jeg en højde på 170 pixels til min sidefod. Bredden forbliver den samme som webstedet.
Placer linkene og billederne som dit krav.
Med dette afsluttede vi designen af vores hjemmeside. De farvekombinationer, vi brugte, er minimale, vi bruger en masse hvid plads i vores design og tilføjede enkel tekst med minimumsskrifter. Hensigten er at designe en ren webside, som vi håber er opfyldt.
Se endnu en gang på designet på hele siden nedenfor
