Opret en ren hjemmeside Layout i Photoshop-designe en hjemmeside layout er mere end at arrangere farverige billeder og udfylde nogle tekst i tekstrammer. Det er en tilgang, der taler meget om din kundes forretning. Hjemmesidens farver og grafik definerer virksomhedens art, mens kvaliteten af design og nem navigationsstrøm på hjemmesiden skal binde brugeren med organisationen og gøre ham til en potentiel kunde.
design af en flot og let tilgængelig hjemmeside layout er obligatorisk for enhver designer. Denne tutorial er beregnet til at tage dig gennem processen med at skabe en hjemmeside layout enkel og ren hjemmeside lige fra bunden. Under processen lærer du vigtige punkter, der hjælper dig med yderligere at få mere viden om design af internettet.
skriv ned dine krav, før designe en hjemmeside layout.
før du begynder at designe en hjemmeside layout, bør du vide, hvordan din hjemmeside vil se ud, og hvad er de emner, du bør medtage i hjemmesiden er. Det er afgørende at lave en liste over hjemmeside layout elementer din klient har brug for på hans hjemmeside. Sammen med det er kvaliteten af en god designer at forberede en mock på hele hjemmesiden, før han begynder at arbejde på den endelige skabelon.
Start dit gratis Designkursus
3D-animation, modellering, simulering, spiludvikling & andre
forskellige designfirmaer tilpasser forskellige niveauer af prædesignstrategier, som kan indeholde trådramme, prototyping, mockup, betaversioner og meget mere. I denne vejledning opretter vi en mock-up-version, inden vi starter det originale skabelondesign. Jeg bruger de grå nuancer, som gør det muligt at identificere mockup-blokken.
Canvas
år før, mens der var meget få OS og begrænsede enheder til at få adgang til hjemmesider, blev sidens dimensioner fastgjort til en eller to størrelser. I dag er scenariet helt anderledes. Slutbrugere får adgang til sider på Desktops i forskellige størrelser, mobiltelefoner, iPads og Tablets. Der er ingen chance for, at du kan rette din hjemmeside til en bestemt størrelse i denne forskelligartede situation. Men der er nogle Industristandardstørrelser anvendt til hver enhed. Du vil langsomt finde din foretrukne størrelse, eller din klient kan henvise dig til en hjemmeside for at efterligne størrelserne.
i dette tilfælde arbejder vi på følgende dimensioner. Du skal ikke bekymre dig om højden, da den vil ændre sig over tid. Jo mere indhold du tilføjer til din hjemmeside, jo mere højden vil være.
husk, det er almindeligt at rulle ned ad siden lodret, så du må ikke rette til en bestemt højde for din hjemmeside, medmindre du ikke vil have brugeren til at rulle på din hjemmeside som Google. Men det er nødvendigt ikke at rulle vandret. Så begræns din bredde i henhold til branchestandarderne og bliv ikke kreativ med den vandrette rulning.
for internettet er opløsningen begrænset til 72. Der findes billeder og sider med højere opløsning på iPads og få tablets for nylig. Men det er i en sjælden lejlighed, og det er bedre at holde fast ved 72 i betragtning af internethastigheden over hele kloden.
Vælg filerne ved hjælp af Ctrl+A-kommandoen, og tegn guider lige i hele skabelonen. En hjemmeside skal være pænt organiseret med hvert element arrangeret sammenhængende med hinanden. Og hjemmeside layout retningslinjer hjælpe dig med at få det nemt.
gør din mockup klar.
placering af din mockup-fil på din oprindelige skabelon hjælper dig med at spare rigelig tid. Designe din hjemmeside bliver så let, at du vil ende med at fuldføre rammerne inden for få minutter. Mockup vil dog kun hjælpe dig med at designe rammerne. Færdiggørelse elementer af design med detaljer, type arrangement og justering vil tage overskydende tid end at tegne hjemmesiden layout.
farveskema og andre valg
den næste ting at efter at have fået din ramme klar er at vælge et farveskema. Men det er bedre at få dine farver klar, før du begynder at arbejde på designet.
det hele koger ned til meddelelsen om, at få dine våben klar, før du starter designet. Alt, inklusive ikoner, billeder og farvevalg, skal være klar, inden 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 en designers valg, hvis virksomheden er ny og ikke har en virksomhedsidentitet før. Kunder giver en ide om, hvilke nuancer de vil have logoet eller baggrunden i nogle tilfælde. I spørgsmålet om eksisterende virksomheder, hvor du kan få brug for at redesigne en hel hjemmeside, kan du nødt til at vælge de samme farver som pr kundens behov.
der er mange hjemmesider, som kan hjælpe dig med at vælge millioner af farveskemaer fra arkiverne. Prøv følgende hjemmesider for at nyde et bredt udvalg af farvekombinationer.
farve.Adobe.kom
Colourlovers.com
her valgte jeg få nuancer af blå til brug for hjemmesiden. Hele hjemmesiden vil blive planlagt inden for følgende farveskema. Glem ikke at vælge tre eller fire forskellige farvekombinationer, da vi ikke ved, hvilken farve klienten foretrækker. Når klienten har afsluttet et farveskema, skal du gemme skyggeværdierne og sørge for, at farverne spiller en vigtig rolle i enhver lodret i organisationen, især i virksomhedsidentiteten.
designproces
der er mange måder at fortsætte dine designere på. Der er ingen hårde og hurtige hjemmeside layout regler for at definere eller følge processen med at designe; det er for det meste en proces designeren vil vælge at hans bekvemmelighed.
nogle designere ønsker at bygge hele blokke og rammer og begynde at arbejde på detaljer i anden fase efterfulgt af typen og endelig justeringer og justeringer. Nogle kan lide at afslutte en del af siden ad gangen og tage den til næste del. Vi følger den anden stil.
vi afslutter hjemmesiden i følgende trin
- Header & Footer
- hvad vi gør
- Services
- Form
- nyheder
- Footer
sidehoved & sidefod
tommelfingerreglen til at definere dimensionerne på din header eller banner overlades til din kreativitet. Ifølge de seneste tendenser vises hjemmesider med et stort billede, der dækker hele din computerskærm. Stilen kaldes Heltebillede, som blev ganske populær for nylig.
i dette tilfælde startede vi med 120 billedpunkter højde header og en 550-billedhøjde for banneret. Bredden skal svare til dokumentstørrelsen.
design med solid farve har et fladt look, der ikke passer godt til større rammer eller billeder. For at undgå det flade udseende påførte jeg et gradientoverlejringslag oven på banneret. Det giver banneret en dybde, der langsomt omdannes fra en skygge til en anden.
dernæst 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å observere hjemmesiden layout vektor figurer i øverste højre hjørne, som bruges til at dele de sociale medier links.
på dette stadium er jeg færdig med at tilføje typen i overskriften & Bannerdelen. Firmanavn, brandbesked, med links og tjenester, tilføjes i teksten. Du kan også observere en gennemsigtig knap på banneret.
almindelig tekst eller for meget af typen uden særlige funktioner vil ødelægge udseendet og fornemmelsen af din hjemmeside; siden vil snart kede brugeren, som kan lade ham forlade din hjemmeside hurtigt. Tjek den vektorform, jeg tilføjede til servicelinkene øverst til højre på banneret. Stilen er enkel, men den fylder tomrummet og undgår det verdslige udseende.
Vælg et billede, der passer til virksomheden. Der er millioner af lagerbilleder 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 af høj kvalitet, som jeg tror vil gå godt med min hjemmeside. Jeg har ikke et forretningstema til hjemmesiden, så jeg er fri til at vælge ethvert billede, der ser godt ud på bannerposten.
prøv at hente nogle HD-billeder fra de gratis stock image sites nedenfor
www..com.
blanding er en kunst, du bør mestre for at producere 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 Gradientoverlejringen over billedet
- Skift billedets opacitet 40 procent og skift blandingstilstand til forskel.
- Tjek lagpaletten i 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 på en gang, og det er på tide at gå videre til næste niveau.
justering er afgørende, når det kommer til type; har en ide om, hvordan din hjemmeside skal se ud, og tekst skal justeres, før du starter den. På dette niveau brugte jeg to forskellige tekstrammer, begge justeret til venstre.
det næste skridt er at designe tjenester del af hjemmesiden. Jeg designede en metallisk stjerne i grå nuancer for at fremvise forskellige tjenester i virksomheden. Hensigten bag at bruge stjernesymbolet er 5-stjernede tjenester.
når det kommer til at tilpasse teksten, guider er dine bedste venner. Sammenhæng inden for type og objekter kan opnås ved at gøre god brug af det hvide rum og lige store mellemrum mellem designelementerne. Jeg brugte mange retningslinjer for hjemmesidens layout for at se, at alle objekter i rammen skulle opretholde passende huller og afstande, hvilket bringer en hel del hvidt rum ud.
det næste trin i vores design er at oprette formularfeltet. I dette tilfælde arbejder jeg modsat den metode, som vi brugte til at designe banneret. Vi placerer billedlaget under det ensfarvede lag og anvender et gradientlag oven på de to lag for at opnå et bedre udseende. Det er altid vigtigt at spille med blandingstilstande, mens du placerer større billeder.
valget af billederne til dette site har ingen specifikke tema relateret til det. Jeg tror, at dette billede vil hjælpe siden med at se bedre ud.
Placer billedet under det farvede baggrundslag. For at rette billedet nøjagtigt til størrelsen på det farvede lag skal du bruge lagmaskeringsmuligheder.
se på lagpaletten i ovenstående billede. Det solide 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 opacitet forbliver den samme.
formularboksen er klar, hvilket bringer os til slutningen af det fjerde niveau i vores hjemmeside design.
vores næste niveau består af to enkle tekstrammer. Det ligner niveau to på hjemmesiden, og jeg brugte justeret de to kasser svarende til toppen. Opretholdelse af sammenhæng i justering er en god måde at bruge det hvide rum på.
da vi nåede den sidste del af siden, er det tid til at se på sidefodens dimensioner igen. Designeren skal planlægge højden på sidefoden baseret på de links, han skal bruge der. I dette tilfælde gav jeg en højde på 170 punkter til min sidefod. Bredden forbliver den samme som hjemmesiden.
Placer links og billeder som pr dine krav.
med dette afsluttede vi designdelen af vores hjemmeside. De farvekombinationer, vi brugte, er minimale; vi bruger meget hvidt rum i vores design og tilføjede enkel tekst med minimale skrifttyper. Hensigten er at designe en ren hjemmeside, som vi håber er opfyldt.
tag et kig på udformningen af hele siden nedenfor igen.
