Share
Det er ofte tenkt som designe i nettleseren er en moderne tilnærming til webdesign. Faktisk, før advent av verktøy som Photoshop, var det lite annet valg. Bare i de siste årene, siden begynnelsen av responsiv design, har designere gått tilbake til sine røtter og begynt å designe i nettleseren.
Jeg sier ikke at hver nettside skal begynne livet i nettleseren, men som nettsteder nå trenger å være mer tilpasningsdyktig enn noensinne, synes det å være mer fornuftig å ta denne ruten. Design i Photoshop (eller et lignende program) kan ha fordeler, som jeg ser senere på, men det kan også ha sine ulemper. La oss ta en titt på noen av disse.
Et spørsmål som jeg får spurt mye av UI-designere på jobb er "Hva er maksimal bredde som designet må være?". Svaret som jeg pleide å gi alltid til disse spørsmålene, var "Opprett designet på rundt 960px". I dag når jeg blir spurt dette, forteller jeg dem at det ikke er en fast bredde, og at de burde forestille seg at designet skal fungere i hvilken som helst bredde.
Med responsivitet å være i så stor etterspørsel, er det viktig at når nettsteder blir utformet som dette tas i betraktning fra begynnelsen, ikke bare tatt med som en ettertanke. Når smarte telefoner først kom inn på scenen, ville mange designere lage en fast bredde-design i Photoshop for skrivebord og deretter en annen for smarte telefoner (vanligvis rundt 960px bredden for skrivebordet og 320px for mobil). Selv om denne tilnærmingen kanskje har fungert en stund, er det ikke lenger plausibel på grunn av det store utvalget av enhetsbredder som får tilgang til nettet. Den eneste måten å få en ekte følelse av for hvordan responsive nettsteder vil fungere, se og fungere, er å designe dem i nettleseren.
Konsistens vil bli stor også. Jeg håper å tenke i form av gjenbrukbare deler for å holde ting enkelt og konsistent - Chris Coyier om redesign av CSS-triks
Selv om det kan være sant at besøkende (i de fleste tilfeller) ikke besøker et nettsted for sin design, men i stedet besøker det for innholdet, ved å designe i nettleseren, kan vi fokusere på et nettsteds innhold og bygge utformingen rundt det.
Ved utforming i Photoshop er det ofte slik at designen anses som først og innholdet andre. I noen tilfeller blir innholdet ikke engang tatt i betraktning i det hele tatt. Hvor mange ganger har du laget et design i Photoshop og bare fylt innholdet med en last av Lorem Ipsum? Vi har alle gjort det, men det virker som en merkelig tilnærming til å ta når innholdet skal være en av de høyeste hensynene. Utforming i nettleseren tillater dette.
Når du velger denne tilnærmingen, før du hopper rett inn i din favorittkodeditor, er det viktig å ha en sterk ide om hvilke elementer og komponenter nettstedet ditt skal omfatte. Ved å gjøre dette vil du kunne lage gjenbrukbare komponenter, ved hjelp av samme HTML-markup og CSS. Eventuelle endringer du gjør kan enkelt endres ved å bare endre noen linjer med kode.
En av de viktigste årsakene du kanskje vil designe i nettleseren, er at du kan se hvordan et responsivt design kan se ut i sanntid. Før du legger deg ut med dette, kan det være lurt å sette ut noen forhåndsdefinerte avbrytingspoeng for mediaforespørsler, og alt i mellom disse brytpunktene skal være flytende.
Tenk på nettstedet ditt og tilpass den beste løsningen for sine behov. For eksempel, hvis du har et 4x4 fotobaneringssystem, planlegger på hvilket brytepunkt vil 4x4-nettet bli uberettiget for mindre oppløsninger og endre rutenettet til noe mer passende, for eksempel et 2x8 rutenett.
Ok, slik at du kanskje tror Photoshop har tatt litt av en vold i denne artikkelen, men Photoshop har fortsatt sin tid til å skinne, selv når du designer i nettleseren. Det er tider da CSS bare ikke vil kutte stylingen, og for flere dekorative elementer må du ty til tilbake til Photoshop. Du bør bruke Photoshop sammen med kodeditoren din.
Nettsteder som den ovenfor ville være vanskelig å designe i nettleseren, da den har en sterkt illustrert stil. Å designe i nettleseren ville ikke være den beste tilnærmingen for nettsteder som dette.
Det er ikke uvanlig i disse dager for UI-designere å presentere et humørbrett for et nettsteddesign i stedet for en faktisk representasjon av det. Disse stemmebordene kan inkludere ting som
Ved å gjøre dette, er designen fortsatt godt vurdert, men er ikke så restriktiv som et tradisjonelt Photoshop mockup-design.
Hvis du ennå ikke har prøvd å designe i nettleseren, og du vil bli sittende fast, er det noen nyttige verktøy som vil hjelpe deg med å velge denne tilnærmingen.
Det finnes mange IDEer, men her er en online, som tar design i nettleseren til et helt nytt nivå. Fordelene ved å bruke en skybasert IDE er at du kan dele filer med kollegaer eller andre som jobber med et prosjekt, alle med stor letthet.
Styles fliser kan beskrives som
et design leverbart bestående av fonter, farger og grensesnittelementer som kommuniserer essensen av et visuelt merke for nettet.
De lar deg lage en merkeidentitet for et nettsted som kan gi det litt stil uten å være for begrensende for hvordan den ferdige designen skal se ut. Hvis du ikke har brukt disse før, kan du finne en god introduksjon til det her.
Live Reload oppdaterer automatisk nettlesersiden så snart du lagrer et HTML / CSS / javascript eller en annen fil. Dette kan spare tid og fjerner behovet for å stadig trykke på F5-oppdateringsknappen.
Type cast er flott for å designe typografi i nettleseren. Det lar deg raskt skrive inn typen i nettleseren og sjekke om lesbarhet og rendering som du jobber.
I skrivende stund har Adobe et lite verktøy i pipeline som ser ganske lovende ut. Den kalles 'Edge Reflow', og lar deg designe samtidig for alle skjermstørrelser uten å ofre kvalitet eller evne. Det er skrevet som et veldig nyttig verktøy for å designe responsive nettsteder som, i motsetning til Photoshop, bruker det ikke et fast bredde lerret. Det er ingen nyheter om når det skal frigis, men du kan registrere deg for å bli varslet om utgivelsen.
Dessverre kan det være en negativ bivirkning for å designe i nettleseren. Som webdesignere og utviklere ser vi alltid etter måter å øke hastigheten på webdesign arbeidsflyten vår. Når du designer i nettleseren, kan vi bli så opptatt av funksjonaliteten, og sørg for at det fungerer i enhver oppløsning som vi noen ganger kan glemme å gi designen den kjærligheten og oppmerksomheten det fortjener. Vi tar snarveier og prøver å gjøre livet enkelt for oss selv, som alle kan bidra til forsømmelse.
Ikke bare lene deg tilbake og ta den "enkle veien ut". Det har vært mange ganger da jeg har mottatt en fil for et design, gitt det en titt og tenkte, det er ikke mye av dette som kan opprettes i CSS, det blir et bilde tungt sted bare for layoutet. Vi vet alle at bilder forårsaker oppblåsthet og så prøv å bruke dem så lite som mulig. Noen ganger kan dette imidlertid være uunngåelig for eksempel når du jobber med tungt designet merkevareinnhold. Det er det samme med mange disipliner; du må gjøre et fornuftig kompromiss mellom form og funksjon. For mye form og for liten funksjon vil resultere i en dårlig nettside og omvendt.
Det har aldri vært viktigere å kunne designe flytende, responsive nettsteder som tilpasser seg ulike resolusjoner. Behovet for disse kravene gjør verktøy som Photoshop mindre nyttige enn de en gang var for webdesign.
Som responsiv design er her for å bli, kan vi begynne å se noe skift i hvordan nettsider er estetisk utformet, og med dette kommer nye verktøy og løsninger på noen av dagens problemer. Selvfølgelig, hvis et nettsted er mer fokusert på merkevarebygging og design, vil Photoshop alltid være ditt nummer ett verktøy for å gå til; Noen nettsteder er mer design ledet enn innholdsleddet.
.
Accentsconagua