Som webdesigner er det vanskelig å holde orden. Ikke bare balanserer du flere prosjekter samtidig, men du sannsynligvis står overfor stramme tidsfrister og tøffe kunder også. Du kan også hoppe fra merke til merke, og måtte stadig lære nye retningslinjer og stiler for merkevaren.

Heldigvis er det mange måter å gjøre arbeidsflyten mer effektiv. For å hjelpe meg har jeg satt sammen disse åtte tipsene for å holde deg ren i din webdesign karriere

1. Hold filene dine organisert

En av de enkleste tingene du kan gjøre for å holde sunnheten, er å holde filene dine organisert. Å lage og vedlikeholde en konsistent mappestruktur vil gjøre det enklere å finne filene dine. Det oppstår problemer når du strukturerer en mappe annerledes enn en annen, noe som gjør det til en utfordring å finne den Final-Final-logo.ai- filen.

Konsekvente filnavnkonvensjoner er avgjørende når du organiserer filene dine. Det er her versjoning kommer inn. Noen designere bruker datoer, andre bruker versjonsnumre, og noen brukerrunder. Dette vil avhenge av din bransje og dine personlige preferanser, men det er en god praksis. Takket være versjonen, kan du enkelt spore hvilken fil som er den nyeste, spesielt hvis du har gamle versjoner lagret som referanse.

Jeg holder vanligvis to til tre gamle versjoner hvis klienten ønsker å gå tilbake til den heltes strategien fra Round One, eller foretrukket din mobile behandling fra runde to. For å unngå pack rotte mentalitet, er det godt å arkivere eller slette eldre filer for å holde harddisken din fra å bli lagt ned.

1-mappestrukturen

Her er en utvalgsstruktur som jeg bruker på Clearlink.

Kombinasjonen av en konsekvent mappestruktur og navngivningskonvensjoner med versjoning vil også hjelpe søkeevnen. Hvis du for eksempel starter alle filnavnene fra ett merke med merkenavnet eller forkortelsen, kan du filtrere eiendelene for det aktuelle merket lettere. Dette vil bidra til å skille "ATT-logo-final.ai" fra det som potensielt kan være et hav av "logo-final.ai's".

2. Forstå rammen din

Én ting jeg ikke lærte til flere år i designkarrieren min, er hvordan jeg skal bruke en eksisterende ramme riktig. De to tunge hitterene i rammevirksomheten er for tiden Bootstrap og Fundament , men Googles materialiserer vil sikkert gi dem en løp for pengene sine i nær fremtid. Selskapet som jeg jobber for, bruker Foundation for de fleste av deres merkede nettsteder.

Stiftelsen kommer med et innebygd responsivt rutenett, sammen med styling for knapper, felt, typografi, navigasjon etc. blant mange andre ting for å gjøre livet enklere. Ved å bruke Foundation's innebygde rutenett i dine PSD-er, gjør du det enklere for utvikleren å implementere designene dine på en mer pikselaktig måte enn om du gjør dine egne ting. Photoshop har dette nifty guide layout verktøyet som ikke bare gjør å lage grids en bris, men også fester dem til kunstbrettet for enkel fil restrukturering og bevegelse.

2-forstå-your-rammeverk

Skjermbilde fra Foundation Cheat Sheet

Rammer gir også et godt utgangspunkt for knapp styling, skjemaer, etc. og hjelper deg med å vise mulighetene og begrensningene i designstrategiene du kan implementere. Ikke bare vil dette gi deg et flott utgangspunkt for ditt design, men det vil bidra til å fremme vennligere samarbeid med utvikleren din.

3. Organiser lagene dine etter innholdsdel

Når du arbeider med komplekse webdesign-PSDer med så mange mapper, lag, smarte objekter, etc., er det lett for ting å bli rotete. Når lag 2.455 kommer rundt, begynner du å innse at du trenger en slags organisasjon i din PSD. Det er derfor jeg anbefaler å organisere PSD-en din etter seksjoner.

Mine består vanligvis av mapper som inkluderer Nav, Helt, Intro, Pakker, Fordeler, Footer, etc. Jeg fargekod disse mappene i regnbueiemåte, så de er enkle å navigere. Dette gjør oppdatering av seksjoner og omarbeidet din PSD en bris.

3-organisere-sjikt

Jeg organiserer filen min i seksjonsmapper som er regnbuefargekodede for enkel skanning.

For eksempel, hvis du trenger å gjøre helten seksjonen større, kan du enkelt dra alle mappene under som en enhet (hold kommandoen) og dra dem tilbake etter at oppdateringen er gjort. Denne strategien hjelper utviklere og andre designere til å enkelt navigere filen din. Ved å bruke forståelige navn som "Hero" og "Nav", kan en ny designer lett hoppe inn i mappen og gjøre de nødvendige endringene de trenger.

Noen designere vil selv komme inn i å navngi enkelte lag, som også kan være utrolig gunstig, men kan bli litt tidkrevende. Siden lagene er enkle å finne via automatisk valgverktøyet når det er satt til "lag", er det enkelt å komme til enkelte lag i disse dager, så det er opp til den enkelte designeren hvordan de vil organisere lagene sine. Poenget er at du git er ferdig.

4. Husk alle tastatursnarveier du vanligvis bruker

Denne er en biggie for effektivitet. Hvis du finner deg selv med en bestemt nøkkelkommando regelmessig, må du huske den. Du øker effektiviteten eksponentielt hvis du har alle de viktigste tastatursnarveiene nede.

Noen viktige er å spare, skriftstørrelse og ledende, lagbestilling, lagre for web og opacitet blant mange flere. Photoshop gir deg også muligheten til å lage egendefinerte snarveier. I min bok er den viktigste kommandoen som har blitt lagret, lagret filen din. På grunn av Adobes tilfeldige krasjer, er det godt å ta feil på siden av å spare ofte i stedet for å miste noe av fremdriften din.

4-tastatur-snarveier

Adobe gir deg muligheten til å tilpasse tastaturgenveiene under Rediger> Tastaturgenveier

Snarveier knytter seg også til å organisere lagene dine ved hjelp av seksjonskataloger (som nevnt ovenfor). Det er lettere å ta med lag til toppen og bunnen av en mappe ved å bruke hurtigtaster enn å bestille på nytt i en uorganisert fil. Dette er hvor organisering av filen som du designer kommer inn i spill. Å huske ofte brukte hurtigtastene og holde lagene dine organiserte, forbedrer effektiviteten betydelig og hjelper andre designere med å jobbe med filene dine.

5. Bruk CC-biblioteker

En av de beste tingene som Adobe har lagt til siden du oppretter CC, er biblioteker. Hvis du ikke har hørt om dem, må du sjekke ut dette fantastisk opplæring på hvordan du bruker dem.

Jeg føler at alle designteam skal benytte denne fantastiske funksjonen. Biblioteker lar deg lage et merkebibliotek med ressurser som farger, skriftstiler, bilder, ikoner og symboler (som overskrifter og bunntekster). Takket være biblioteker kan du enkelt samarbeide med reklamer fra flere organisasjoner ved hjelp av et enkelt merkebibliotek.

Biblioteker gjør det enkelt å endre farger og oppdatere tekststiler med et enkelt klikk. De hjelper også med å lagre merkevareikoner som lett kan oppdateres på ett sted, med oppdateringer som reflekteres raskt over PSD-er. Dette er utrolig gunstig for overskrifter og footers for nettstedet ditt, der du sannsynligvis vil lage små oppdateringer gjennom hele prosjektet.

Jeg bruker også CC-bibliotek for font styling gjennom hele mitt design. Jeg vil sette opp stiler for heltkopi, overskrifter, underoverskrifter, kroppseksemplar, ansvarsfraskrivelser, etc. for desktop-, nettbrett- og mobilapplikasjoner. Når det gjelder visning veksle, finner jeg meg selv ved hjelp av listformatet mer slik enn flisvisningen fordi det er lett å skanne.

5 bruke-CC-biblioteker

Bibliotekselementer settes som samarbeidspartner

Biblioteker er også gode for teamsamarbeid. Du kan velge å samarbeide med andre reklamer, slik at de kan redigere og legge til i biblioteket, eller du kan dele bibliotekskoblingen for enkel tilgang. De har også et "Opprett nytt bibliotek fra dokument" -funksjon, men jeg foretrekker å lage biblioteket selv, så det forblir organisert og har bare de mest relevante ressursene.

Dessverre er det noen få ulemper til biblioteker, en av disse er mangelen på separat karakter og stykkeformater for tekst. Jeg jobber rundt dette ved å bruke karakterstilen i en egen boks og deretter lime inn forskjellige stiler i en boks sammen for å gjøre tekstbokser enklere å håndtere i filen. En annen ulempe er at du for øyeblikket ikke kan oppdatere en tegneserie globalt. For tiden er det ingen organisasjonsevner innenfor biblioteket for å lage undermapper i kategoriene (farge, tegnstiler, etc.), men forhåpentligvis jobber Adobe også på dette.

Den nåværende måten CC Libraries arbeid er at den sist oppdaterte / lagt eiendommen vises øverst. CC-bibliotekets farger kan ikke brukes til individuell tekst i tekstbokser og brukes bare enkelt på former og hele tekstbokser. Jeg er sikker på at Adobe er hardt på jobb for å fikse disse problemene, så jeg er ikke så bekymret, særlig siden proffene definitivt oppveier ulemperne.

6. Hold bilder og vektorer i smart objektformat

Selv om det vil gjøre filen større, vil det være lettere for fremtidige designere å redigere dine PSD-er, slik at bilder og vektorer i smart objektformat holdes nede. Bilde dette: klienten kommer tilbake med redigeringer som inkluderer å omskære et heltfoto og lage små tweaks til et vektorikon. Dette gjøres mer jevnt hvis PSD inkluderer fulloppløsningsbildet i stedet for en mindre, rasterisert versjon. Vektorer er også enkle å justere når de er smarte objekter fra Illustrator i stedet for rasterisert grafikk.

En annen fordel med å ha bilder i smart objektformat kommer når du lagrer dem som PSDer, og legger dem deretter inn i filen som en smart gjenstand. Ved å bruke et plassert foto PSD, gjør det enkelt å legge til justeringslag og redigeringer i en separat, inneholdt fotofil, i stedet for å rote opp kildefilen din. Ved å bruke smarte objekter som biblioteksgrafikk gir du enda mer en vinnerkombinasjon. Ikke bare kan du enkelt redigere vektorobjektene, men bibliotekgrafikk vil oppdatere på tvers av alle applikasjoner.

6-smart-objekt

Grafikken "Hero Illustration" kan redigeres i en egen PSD for å holde rotet av hovedfilen til et minimum.

7. Lag en stilguide og hold deg til den

Mange merker vil ha en generell stilguide for deg som følger med fonter, farger, bilder, ikoner, illustrasjoner, etc. Dette er nyttig som en ressurs, men vil ikke alltid holde deg konsekvent på din nettspesifikke styling . Jeg har vesentlig forbedret effektiviteten min ved å lage webstyleguider for hvert bestemt nettsted som jeg jobber med.

Noen ganger vil merkene ha flere nettsteder med forskjellige stilarter, så jeg sørger for at jeg har en for hvert nettsted, så jeg kan holde meg konsistent mens jeg designer. Dette skaper også en enkel dra og slipp ressurs når jeg trenger knapper, ikoner, illustrasjoner, bilder, etc. Ikke bare vil dette gjøre deg mer effektiv som designer, men det vil hjelpe deg å holde deg konsistent i stylingen din på hele nettstedet.

Hvilken avstand bruker jeg mellom seksjoner? Sjekk ut stilen guide! Hva var den primære knappens farge og polstring igjen? Ta tak i stilguiden! Dette vil også hjelpe andre designere med å enkelt hoppe på nettstedet design med letthet og effektivitet. Hvis du slår sammen bruk av CC-bibliotek med stilguiden, er du enda mer foran spillet.

7-style-guide

Jeg lager en PSD-stilguide for alle de forskjellige merkene jeg jobber på, så jeg kan enkelt ta tak i elementer som knapper og ikoner.

Mange designere er fristet til å legge til nye stiler hver gang de møter et nytt problem i designet. For konsistens er det best å unngå dette og alltid holde seg til standardene du har etablert i din stilguide. Hvis du legger til nye lag og stiler, må du kontrollere at de brukes over hele nettstedet.

Jo flere nye stilarter som opprettes, desto mer komplekse fremtidige design vil være, og jo vanskeligere vil det være for nye designere å hoppe på prosjekter og holde designene konsekvente. I mange tilfeller er konsistens viktigere enn konstant innovasjon når det gjelder brukeropplevelse. Selv om det kan ta deg mer tid å lage webstyleguideen i begynnelsen av et prosjekt, vil det øke effektiviteten din for alle fremtidige sider.

En god praksis som jeg lærte av Brad Frost, er å gjøre en grensesnitt inventar enten under designprosessen eller på et eksisterende nettsted som du skal jobbe med. Et grensesnitt inventar består av å samle alle de forskjellige tekststiler, knappestiler, etc. via skjermbilder og kompilere dem for å finne inkonsekvenser. Du kan da presentere funnene dine til klienten for å foreslå oppdateringer og forbedringer.

Siden nettsteder berører flere designere i tilfelle deres eksistens, kan ting bli ganske hårete i konsistensavdelingen. Når du har funnet en enhetlig designstil for elementene på siden, må du sørge for å oppdatere din stilguide slik at alle er oppdatert.

8-grensesnitt-beholdning

Interface inventar skjermbilde fra http://bradfrost.com/blog/post/interface-inventory/

8. Foster interdepartementalt samarbeid

Mange mennesker som forfølger karriere i markedsføringsproduksjon (designere, utviklere, tekstforfattere, etc.) har en tendens til å være innadvendt, så det er vanskelig å gå ut av din komfortsone når det gjelder samarbeid. Det er også vanskelig å forlate din ekspertboble, spesielt når det er lettere å forholde seg til folk i ditt felt. Selv om det kan være vanskelig eller ubehagelig noen ganger, kan du forlate boblen din og regelmessig samarbeide med folk fra andre avdelinger, og forbedre effektiviteten av designene dine sterkt.

Et godt eksempel på dette er når designere og utviklere samarbeider om et redesign. Du bør møtes med utvikleren på forhånd for å gå over hvilket rammeverk de bruker, utdanne deg selv på rutenettet, og vurdere mulighetene. Når designarbeidet er fullført, må du sørge for å dele Photoshop-biblioteket ditt, slik at utvikleren har lett tilgang til fargepaletten, skriftstiler, etc. Det er også nyttig å dele stilguiden på forhånd, sammen med eventuelle komponenter du har designet for å gi dem en god start.

Samarbeid med andre designere på teamet ditt som bruker biblioteker, vil også hjelpe deg å holde seg konsekvent og være mer effektiv. Å gi kunstdirektøren eller de fleste Senior Designer ansvar over bibliotek og stil guide oppdateringer vil eliminere forvirring og holde merkevare konsistent. Bare vær sikker på at det er en kommunikasjonslinje når oppdateringer gjøres, slik at alle er på samme side.

Hold deg rolig

Webdesign kan være overveldende og utfordrende noen ganger. Det må ikke alltid være slik. Ved å følge disse enkle tipsene om Photoshop-effektivitet, kan du lindre en god del av stresset ditt. Ikke bare vil dette forbedre ditt velvære, men ledere og regissører på både forretnings- og kreativ side vil virkelig sette pris på ditt harde arbeid og rose deg for det. Tross alt er alle gode med mer konsistent, effektivt, vakkert utformet design.