Lag et rent nettstedoppsett i Photoshop - Å designe et nettstedlayout er mer enn å arrangere fargerike bilder og fylle litt tekst i tekstrammene. Det er en tilnærming som snakker om kundens virksomhet. Nettstedets farger og grafikk definerer virksomhetens art, mens kvaliteten på design og enkel navigasjonsflyt på nettstedet bør binde brukeren til organisasjonen og gjøre ham til en potensiell kunde.
Å designe et pent utseende og et lett tilgjengelig nettstedoppsett er obligatorisk for alle wannabe-designere. Denne opplæringen er ment å ta deg gjennom prosessen med å lage et enkelt og rent nettstedoppsett fra bunnen av. I løpet av prosessen vil du lære viktige punkter som vil hjelpe deg videre med å få mer kunnskap om nettdesign. 
Skriv ned kravene dine før du designer et nettstedoppsett
Før du begynner å designe et nettstedoppsett, bør du vite hvordan nettstedet ditt vil se ut og hva er temaene du bør ta med på nettstedet. Det er avgjørende å lage en liste over nettstedoppsettelementer din klient trenger på hjemmesiden sin. Sammen med det er kvaliteten på en god designer å forberede en hån mot hele nettstedet før han begynner å jobbe med den endelige malen.
Ulike designfirmaer tilpasser forskjellige nivåer av forhåndsdesignende strategier, som kan inneholde trådramme, prototyping, mockup, beta-versjoner og mye mer. I denne opplæringen vil vi lage en mock-up-versjon før vi starter den originale maldesignen. Jeg bruker de grå nyanser som gjør det mulig å identifisere mockup-blokken
Lerret
År før, mens det var veldig få operativsystemer og begrensede enheter for å få tilgang til nettsteder, var dimensjonene på siden satt til en eller to størrelser. I dag er scenariet helt annerledes. Sluttbrukere får tilgang til nettsteder på stasjonære PCer i forskjellige størrelser, mobiltelefoner, iPads og nettbrett. I denne mangfoldige situasjonen er det ingen sjanse for at du kan fikse websiden din til en bestemt størrelse. Men det er noen industristandardstørrelser som brukes for hver enhet. Du finner sakte din favorittstørrelse, ellers kan din klient 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 å endre seg over tid. Jo mer innhold du legger til nettstedet ditt, jo mer blir høyden.
Husk at det er vanlig å rulle nedover siden loddrett, slik at du kanskje ikke fikser til en bestemt høyde for websiden din med mindre du ikke vil at brukeren skal rulle på hjemmesiden din som Google. Men det er nødvendig å ikke rulle horisontalt. Så begrens bredden din i henhold til industristandardene og ikke bli kreative med den horisontale rullingen.
For nettet er oppløsningen begrenset til 72. Det er bilder og sider med høyere oppløsning funnet på iPads og få nettbrett nylig. Men det er en sjelden gang, og det er bedre å holde seg til 72 med tanke på internetthastigheten over hele kloden.
Velg filene ved å bruke Ctrl + A-kommandoen og tegne guider likt gjennom malen. En nettside skal være pent organisert med hvert element ordnet sammenhengende med hverandre. Og retningslinjer for nettstedlayout hjelper deg å få det enkelt.
Gjør din mockup klar
Å plassere mockup-filen på din originale mal hjelper deg å spare god tid. Å designe nettstedet ditt blir så enkelt at du vil ende opp med å fullføre rammen innen få minutter. Imidlertid vil mockup bare hjelpe deg med å designe rammene. Å fullføre elementene i designen med detaljer, typearrangement og justering vil ta over tid å tegne nettstedets oppsett.
Fargeskjema og andre valg
Den neste tingen å etter å ha gjort rammen klar, er å velge et fargevalg. Men det er bedre å gjøre fargene klare før du begynner å jobbe med designen.
Det hele koker ned til beskjeden om at, gjør våpnene dine klare før du starter designen. Alt inkludert ikoner, bilder og fargevalg bør være klart før du begynner å jobbe. Organisering og planlegging av arbeidet ditt vil spare mer tid og fokuserer på design uten hindringer i mellom.
Å velge farger kan være designerens valg hvis selskapet er nytt og ikke har en bedriftsidentitet før. I noen tilfeller gir klienter en ide om hvilke nyanser de ønsker at logoen eller bakgrunnen skal være. Når det gjelder eksisterende selskaper der du kanskje trenger å redesigne et helt nettsted, kan det hende du må velge de samme fargene som i henhold til kundens behov.
Det er mange nettsteder som kan hjelpe deg å velge millioner fargevalg fra arkivene. Prøv ut følgende nettsteder for å glede deg over et bredt utvalg av fargekombinasjoner.
Color.adobe.com
Colourlovers.com
Her valgte jeg få blå nyanser å bruke på nettstedet. Hele nettstedet vil bli planlagt innenfor følgende fargeskjema. Ikke glem å velge tre eller fire forskjellige fargekombinasjoner, da vi ikke vet hvilken fargeklient som foretrekker. Når klienten er ferdig med et fargevalg, lagrer du skyggeverdiene og sørger for at fargene spiller en viktig rolle i hver vertikal i organisasjonen. Spesielt i bedriftens identitet.
Designe Process
Det er mange måter å videreføre designerne på. Det er ingen harde og raske regler for nettstedoppsett å definere eller følge prosessen med å designe, det er stort sett en prosess designeren vil velge for hans bekvemmelighet.
Noen designere ønsker å bygge hele blokker og rammer og begynne å jobbe med detaljer i andre trinn etterfulgt av typen 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
- Topptekst bunntekst
- Hva vi gjør
- tjenester
- Form
- Nyheter
- bunntekst
Topptekst bunntekst
Tommelfingerregelen for å definere dimensjonene på toppteksten eller banneret ditt overlates til kreativiteten din. I følge de siste trendene vises nettsteder med et enormt bilde som dekker hele dataskjermen. Stilen omtales som Hero image, som nylig ble ganske populær.
I dette tilfellet startet vi med 120 piksler høydeoverskrift og 550 piksler høyde for banneret. Bredden skal samsvare med dokumentstørrelsen.
Motiver med ensfarget har et flatt utseende som ikke passer bra med større rammer eller bilder. For å unngå det flate utseendet påførte jeg gradientoverleggslag 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 i øverste venstre hjørne av overskriften og en annen større logo midt på banneret. Du kan også se vektorformatene på nettstedets øvre høyre hjørne, som brukes til å dele sosiale medier-lenker.
På dette stadiet var jeg ferdig med å legge til typen i Header & Banner-delen. Firmanavn, merkevaremelding, med lenker og tjenester, legges til i teksten. Du kan også se en gjennomsiktig knapp på banneret.
Vanlig tekst eller for mye type uten spesielle funksjoner vil ødelegge utseendet og følelsen på websiden din; siden vil snart kjede brukeren, noe som kan la ham forlate nettstedet ditt raskt. Sjekk vektorformen jeg la til tjenestelinkene øverst til høyre på banneret. Stilen er enkel, men den fyller tomrommet og unngår det verdslige utseendet.
Velg et bilde som passer for virksomheten. Det er millioner av bilder tilgjengelig på nettet, og det vil ikke ta så lang tid å finne et bilde som passer ditt behov.
I mitt tilfelle fant jeg et høykvalitetsbilde som jeg tror vil gå bra med nettstedet mitt. Jeg har ikke et forretningstema for nettstedet, så jeg står fritt til å velge et bilde som ser bra ut på banneret.
Prøv å laste ned noen HD-bilder fra gratis arkivbildesider gitt nedenfor
www.pixabay.com
Blending er en kunst du bør mestre for å produsere vakre bannere. Her blandet jeg tre lag for å oppnå effekten vist i bildet over. Dette er hva jeg gjorde
- Plasser bildelaget oppå banneret med blå farger
- Plasser gradientoverlegget over bildet
- Endre opaciteten til bildet 40 prosent og endre blandingsmodus til forskjell.
- Sjekk lagpaletten på bildet over for å forstå hvordan lagene er stablet på hverandre.
Slik ser Header & Banner ut da vi nettopp er ferdig med å jobbe med det. Vi jobber med en del samtidig, og det er på tide å gå videre til neste nivå.
Justering er avgjørende når det gjelder type; har en ide om hvordan nettstedet ditt skal se ut, og teksten skal justeres før du starter det. På dette nivået brukte jeg to forskjellige tekstrammer, begge på linje til venstre.
Neste trinn er å designe tjenestedelen av websiden. Jeg designet en metallisk stjerne i grå nyanser for å vise frem forskjellige tjenester i selskapet. Intensjonen bak bruk av stjernesymbolet er 5 Star-tjenester.
Når det gjelder justering av teksten Guider er dine beste venner. Sammenheng innenfor type og gjenstander kan oppnås ved å utnytte det hvite rommet og like mellomrom mellom designelementene. Jeg brukte mange retningslinjer for nettstedsoppsett for å se at alle objekter i rammen skulle opprettholde riktige hull og avstander som får frem en god del hvit plass.
Det neste trinnet i designen vår er å lage Form-feltet. I dette tilfellet jobber jeg motsatt av metoden som vi brukte i utformingen av banneret. Vi vil plassere bildelaget under det fargede laget og bruke et gradientlag på toppen av de to lagene for å oppnå et bedre utseende. Det er alltid viktig å leke med blandingsmodusene når du plasserer større bilder.
Valget av bilder for dette nettstedet har ikke noe spesifikt tema knyttet til det. Jeg tror dette bildet vil hjelpe nettstedet til å se bedre ut.
Plasser bildet under det fargede bakgrunnslaget. Hvis du vil feste bildet nøyaktig til størrelsen på det fargede laget, bruker du lagmaskeringsalternativer.
Ta en titt på lagpaletten i bildet over. Det heldekkende blåfargede laget er på toppen av bildet, blandingsmodusen konverteres til overlegg og opaciteten reduseres til 65 prosent.
Jeg brukte gradientkartet på toppen av de to lagene. Blandingsmodus endres til fargetone, og uklarheten forblir den samme.
Skjemaboksen er klar, noe som bringer oss til slutten av fjerde nivå i vår nettdesign.
Vårt neste nivå består av to enkle tekstrammer. Det ligner nivå to på websiden, og jeg brukte justert de to boksene som ligner på toppen. Å opprettholde sammenheng i justering er en god måte å bruke det hvite rommet.
Da vi nådde den siste delen av siden, er det på tide å se på dimensjonene til bunnteksten igjen. Designeren må planlegge om bunntekstens høyde basert på lenkene han skal bruke der. I dette tilfellet ga jeg en høyde på 170 piksler til bunnteksten. Bredden forblir den samme som nettstedet.
Plasser lenkene og bildene etter ditt behov.
Med dette avsluttet vi designdelen av nettstedet vårt. Fargekombinasjonene vi brukte er minimale, vi bruker mye hvit plass i designen vår og la til enkel tekst med minimumsskrifter. Intensjonen er å designe en ren webside, som vi håper blir oppfylt.
Ta en titt på utformingen av hele siden nedenfor igjen
