Lag En Ren Nettside Layout I Photoshop-Designe et nettsted layout er mer enn å arrangere fargerike bilder og fylle litt tekst i tekstrammer. Det er en tilnærming som snakker volumer om kundens virksomhet. Nettstedets farger og grafikk definerer arten av virksomheten, mens kvaliteten på design og enkel navigasjonsflyt på nettstedet skal knytte brukeren til organisasjonen og gjøre ham til en potensiell kunde.
Designe en god jakt og lett tilgjengelig nettsted layout er obligatorisk for alle wannabe webdesigner. Denne opplæringen er ment å ta deg gjennom prosessen med å lage et nettsted layout enkel og ren nettside rett fra bunnen av. Under prosessen, vil du lære viktige punkter som vil hjelpe deg videre få mer kunnskap om web design.
Skriv ned dine krav før du utformer et nettsted layout.
Før du begynner å designe et nettsted layout, bør du vite hvordan nettstedet ditt vil se ut og hva er emnene du bør inkludere på nettstedet er. Det er viktig å lage en liste over nettsideoppsettelementer kunden trenger på sin nettside. Sammen med det er kvaliteten på en god designer å forberede en mock av hele nettstedet før han begynner å jobbe med den endelige malen.
Start Ditt Gratis Designkurs
3d-animasjon, modellering, simulering, spillutvikling & andre
Ulike designfirmaer tilpasser ulike nivåer av pre-designing strategier, som kan inneholde wire framing, prototyping, mockup, betaversjoner og mye mer. I denne opplæringen, vil vi lage en mock-up versjon før kick-starter den opprinnelige malen design. Jeg bruker grå nyanser, som tillater å identifisere mockup-blokken.
Canvas
År før, mens DET var svært FÅ OS og begrensede enheter for å få tilgang til nettsteder, ble dimensjonene på siden festet til en eller to størrelser. I dag er scenariet helt annerledes. Sluttbrukere får tilgang til nettsteder på Stasjonære Datamaskiner i ulike størrelser, mobiltelefoner, iPads og Nettbrett. Det er ingen sjanse for at du kan fikse nettsiden din til en bestemt størrelse i denne mangfoldige situasjonen. Men det er noen Industristandardstørrelser som brukes for hver enhet. Du vil sakte finne din favoritt størrelse, Eller Klienten kan henvise deg til et nettsted for å etterligne størrelsene.
i dette tilfellet jobber vi med følgende dimensjoner. Ikke bekymre deg for høyden, da den kommer til å endres over tid. Jo mer innhold du legger til på nettstedet ditt, desto mer blir høyden.
Husk at det er vanlig å bla nedover siden vertikalt, så du kan ikke fikse til en bestemt høyde for nettsiden din, med mindre du ikke vil at brukeren skal bla på hjemmesiden din Som Google. Men det er nødvendig å ikke rulle horisontalt. Så begrense bredden i Henhold Til Bransjestandarder og ikke bli kreativ med horisontal rulling.
for nettet er oppløsningen begrenset til 72. Det er høyere oppløsningsbilder og sider funnet på iPads og få tabletter nylig. Men det er på en sjelden anledning, og det er bedre å feste med 72 vurderer internett hastighet over hele verden.
Velg filene Ved Hjelp Av Ctrl + a-kommandoen og tegne guider like gjennom hele malen. Et nettsted bør være pent organisert med hvert element ordnet sammenhengende til hverandre. Og nettstedet layout retningslinjer hjelpe deg å få det enkelt.
Få mockup klar.
Plassere mockup fil på den opprinnelige malen hjelper deg å spare rikelig med tid. Designe ditt nettsted blir så enkelt at du vil ende opp med å fullføre rammeverket i løpet av få minutter. Mockupen vil imidlertid bare hjelpe deg med å designe rammene. Fullføre elementer av design med detaljer, type arrangement og justering vil ta overflødig tid enn å tegne nettstedet layout.
Fargevalg og andre valg
den neste tingen å etter å ha fått rammen klar, er å velge et fargevalg. Men det er bedre å få fargene dine klare før du begynner å jobbe med designen.
det hele koker ned til meldingen som, få dine våpen klar før du starter design. Alt, inkludert ikoner, bilder og fargevalg, bør være klart før du begynner å jobbe. Organisere og planlegge arbeidet ditt vil spare mer tid og fokuserer på design uten hindringer i mellom.
Valg av farger kan være designerens valg hvis selskapet er nytt og ikke har en bedriftsidentitet før. Klienter gir en ide om hvilke nyanser de vil at logoen eller bakgrunnen skal være i noen tilfeller. Når det gjelder eksisterende selskaper der du kanskje må redesigne et helt nettsted, må du kanskje velge de samme fargene som per kundens behov.
det finnes mange nettsteder som kan hjelpe deg å velge millioner av fargevalg fra arkivene. Prøv følgende nettsteder for å nyte et bredt utvalg av fargekombinasjon.
Farge.Adobe.com
Colourlovers.com
her valgte jeg noen nyanser av blått til bruk for nettstedet. Hele nettstedet vil bli planlagt i følgende fargevalg. Ikke glem å velge tre eller fire forskjellige fargekombinasjoner, da vi ikke vet hvilken farge klienten vil foretrekke. Når klienten fullfører et fargevalg, lagre skyggeverdiene og sørg for at fargene spiller en viktig rolle i alle vertikale i organisasjonen, spesielt i bedriftens identitet.
Designing Process
det er mange måter å fortsette designerne på. Det er ingen harde og raske nettside layout regler å definere eller følge prosessen med å designe; det er for det meste en prosess designeren vil velge til sin bekvemmelighet.
noen designere ønsker å bygge hele blokker og rammer og begynne å jobbe med detaljer i den andre fasen, etterfulgt av type og til slutt justeringer og justeringer. Noen liker å fullføre en del av siden på en gang og ta den til neste del. Vi følger den andre stilen.
vi vil fullføre nettstedet i følgende trinn
- Header & Footer
- Hva vi gjør
- Tjenester
- Skjema
- Nyheter
- Footer
topptekst & bunntekst
tommelfingerregelen for å definere dimensjonene til toppteksten eller banneret er overlatt til kreativiteten din. Ifølge de nyeste trendene, nettsteder vises med et stort bilde som dekker hele dataskjermen. Stilen er referert Til Som Heltbilde, som ble ganske populært nylig.
I dette tilfellet startet vi med 120 piksler hoyde header og en 550-pixel hoyde for banneret. Bredden skal samsvare med dokumentstørrelsen.
Design med solid farge har et flatt utseende som ikke går bra med større rammer eller bilder. For å unngå flat utseende, jeg brukt en gradient overlegg lag på toppen av banneret. Det gir banneret en dybde som sakte forvandles fra en nyanse til en annen.
Deretter begynte Vi å importere Logoen og plassere den øverst i venstre hjørne av overskriften og en annen større logo i midten av banneret. Du kan også observere nettstedet layout vektorformer øverst til høyre, som brukes til å dele sosiale medier linker.
På dette stadiet er jeg ferdig med å legge til typen I Header & Bannerdelen. Firmanavn, merkemelding, med lenker og tjenester, legges til i teksten. Du kan også observere en gjennomsiktig knapp på Banneret.
Ren tekst eller for mye av typen uten spesielle funksjoner vil ødelegge utseendet på nettsiden din; siden vil snart kjede brukeren, noe som kan la ham forlate nettstedet ditt raskt. Sjekk ut vektorformen jeg la til tjenestekoblingene øverst til høyre på banneret. Stilen er enkel, men det fyller tomrommet unngå dagligdagse utseende.
Velg et bilde som passer til virksomheten. Det finnes millioner av lager bilder tilgjengelig på nettet, og det vil ikke ta for lang tid å finne et bilde som passer dine behov.
I mitt tilfelle fant jeg et høyverdig bilde som jeg tror vil gå bra med nettstedet mitt. Jeg har ikke et forretningstema for nettstedet, så jeg er fri til å velge et bilde som ser bra ut på bannerinnlegget.
Prøv å laste NED NOEN HD-bilder fra de gratis arkivbildene nedenfor
www..com.
Blending er en kunst du bør mestre for å produsere vakre bannere. Her blandet jeg tre lag for å oppnå effekten vist i bildet ovenfor. Her er hva jeg gjorde
- Plasser bildelaget på toppen av det blå fargebanneret
- Plasser Gradientoverlegget over bildet
- Endre opaciteten til bildet 40 prosent og endre blandingsmodus til forskjell.
- Sjekk ut lagpaletten i bildet ovenfor for å forstå hvordan lagene er stablet på hverandre.
Dette er Hvordan Overskriften & Banner vil se ut som vi nettopp ferdig med å jobbe med den. Vi jobber på en del på en gang, og det er på tide å gå videre til neste nivå.
Justering er avgjørende når det gjelder type; ha en ide om hvordan nettstedet ditt skal se ut, og tekst bør justeres før du starter det. På dette nivået brukte jeg to forskjellige tekstrammer, begge justert til venstre.
det neste trinnet er å designe tjenester-delen av nettsiden. Jeg designet en metallisk stjerne i grå nyanser for å vise frem ulike tjenester i selskapet. Intensjonen bak ved hjelp av star-symbolet er 5-Stjerners tjenester.
Når det gjelder å justere teksten, Er Guider dine beste venner. Sammenheng innen type og objekter kan oppnås ved å gjøre god bruk av det hvite rommet og like mellomrom mellom elementene i design. Jeg brukte Mange retningslinjer for nettstedoppsett for å se at alle objekter i rammen skal opprettholde riktige hull og avstander, noe som gir en god del hvit plass.
det neste trinnet i vårt design er å lage Skjemafeltet. I dette tilfellet jobber jeg motsatt til metoden som vi brukte i utformingen av banneret. Vi legger bildelaget under det ensfargede laget og legger et gradientlag på toppen av de to lagene for å oppnå et bedre utseende. Å spille med blandemodusene er alltid viktig når du plasserer større bilder.
valget av bildene for dette nettstedet har ingen bestemt tema relatert til det. Jeg tror dette bildet vil hjelpe nettstedet til å se bedre ut.
Plasser bildet under det fargede bakgrunnslaget. For å fikse bildet nøyaktig til størrelsen på det fargede laget, bruk lagmaskeringsalternativer.
Ta en titt på lagpaletten i bildet ovenfor. Det ensfargede blåfargede laget er øverst på bildet, blandingsmodusen konverteres til overlegg og opacity reduseres til 65 prosent.
jeg brukte gradientkartet på toppen av de to lagene. Blandemodus endres til hue, og opacity forblir den samme.
skjemaboksen er klar, noe som bringer oss til slutten av fjerde nivå i vårt webdesign.
vårt neste nivå består av to enkle tekstrammer. Det ligner nivået to på nettsiden, og jeg brukte justert de to boksene som ligner på toppen. Opprettholde sammenheng i justering er en god måte å bruke det hvite rommet på.
da vi nådde den siste delen av siden, er det på tide å se på dimensjonene til bunnteksten igjen. Designeren må planlegge om høyden på bunnteksten basert på koblingene han skal bruke der. I dette tilfellet ga jeg en høyde på 170 Piksler til bunnteksten min. Bredden forblir den samme som nettstedet.
Plasser linker og bilder som per kravet.
Med dette avsluttet vi designdelen av nettstedet vårt. Fargekombinasjonene vi brukte er minimum; vi bruker mye hvit plass i vårt design og lagt til enkel tekst med minimumsfonter. Hensikten er å designe en ren nettside, som vi håper er oppfylt.
Vennligst ta en titt på utformingen av hele siden nedenfor igjen.
