10 grunner til å ikke bruke Photoshop til webdesign

De siste årene har jeg lagt merke til at til tross for tilstedeværelsen av mange moderne webdesignverktøy, er det fortsatt folk som anser Photoshop som et godt webdesignverktøy. Det er forståelig at blant folk som ikke er relatert til bransjen, er det de som tror at det å designe en nettside handler om å lage grafisk statikk, som senere blir interaktiv takket være programmereren. Selvfølgelig er det mulig, for det er slik nettsider ble laget tidligere. Foreløpig lages nettsider helt annerledes, hovedsakelig på grunn av respons og mange andre nye standarder.

Photoshop er fortsatt et flott verktøy for bilderedigering eller fotomontering. Det er et kraftig grafisk verktøy, men det oppfyller ikke fullt ut kravene til moderne netteknologier. I denne artikkelen vil jeg prøve å presentere 10 grunner til at Photoshop døde som et webdesignverktøy, og jeg vil presentere noen verktøy som er verdt å se på i dette emnet.

Dette er ikke bare en umoderne tilnærming, men en veldig dårlig praksis.

Photoshop var alle nettdesigners førstevalg - vel, det var... i 2003. Da var alt bra, for man kunne umiddelbart se hvordan nettsiden ville se ut. Det var nok å kutte grafikken i deler og lime bildene sammen ved hjelp av HTML og CSS. Respons eksisterte praktisk ikke i det hele tatt, på den tiden ble det opprettet de såkalte mobilversjoner, dvs. separate nettsider designet for mobile enheter, så sider ble vanligvis opprettet for én skjermoppløsning.

Vi observerer en økende andel mobile enheter i internettet, så respons er en åpenbar retning. Ikke bare webapplikasjoner krever et responsiv design, men også mobilapplikasjoner eller applikasjoner for TV-er og andre enheter. Antall forskjellige enheter og dems forskjellige størrelser og oppløsninger gjør at ett bilde i Photoshop ikke er nok til å snakke om å designe responsive grensesnitt.

Det er mange applikasjoner på markedet som brukes til å lage modeller og responsive prototyper, for eksempel Figma, Adobe XD eller Sketch. Til og med Adobe har et program i tilbudet som utelukker Photoshop som et grensesnittdesignverktøy.

Hvorfor brukes ikke Photoshop til å designere nettsider?

1. Det finnes bedre verktøy enn Photoshop

Photoshop ble ikke laget som et webdesignverktøy, men til bilderedigering. Selvfølgelig pleide det å bli brukt til dette formålet, men det er verdt å merke seg at dette var tider da respons ikke var så viktig som det er nå.

Tilstedeværelsen av moderne verktøy laget for å designe grafiske grensesnitt, deres brukervennlighet og samsvar med nettstandarder er etter min mening et tilstrekkelig argument for å bruke slike løsninger. Derfor, med henvisning til svakheter til Photoshop, vil vi sammenligne det med følgende verktøy:

• Figma
• Adobe XD
• Sketch

2. Photoshop „snakker ikke språket til internett”

Når du forbereder grafikk i Photoshop, får vi et statisk bilde av visningen for en bestemt oppløsning. Vi kan gjøre dette på to måter. Den første måten er selvfølgelig å kutte og lage en nettside som ikke vil være responsiv. Den andre er å lage en nettside riktig. Denne måten vil kreve kjedelig utvinning av ulike verdier fra PSD-filen (som ikke nødvendigvis er til direkte bruk), gjenskape prosjektet ved hjelp av HTML og CSS, og deretter prøve å gjøre det responsivt, som ikke er resultatet av selve designet.

Et riktig opprettet nettsted er en samling av informasjon som beskriver utseendet. Nettsider gjengis av nettlesere basert på denne informasjonen og er tilpasset enheten. For å lage et responsivt nettside, må du lage et skjelett (DOM) ved hjelp av HTML og beskrive dets ytre utseende ved hjelp av CSS. Hvert element har informasjon om form, farge og plassering. Det er hundrevis av egenskaper som kan brukes til å beskrive ett element. Alle filtre, masker, skygger, gradienter og mange flere bør beskrives ved hjelp av CSS.

Nettleseren basert på disse informasjoner gjengir nettside i vektorform, slik at nettsiden er av høykvalitet og laster raskere enn elementer laget i form av rastergrafikk.

3. Vanskelig å eksportere ressurser fra Photoshop

For å trekke ut et bilde, ikon eller annet grafisk element fra en PSD-fil, trenger du mange klikk og innstillinger i dialogbokser for å gjøre det. Photoshop er designet for bilderedigering, så et enkelt bilde vil være resultatet av en enkel PSD-fil. Man kan imidlertid trekke ut individuelle lag fra det, men det er ikke like enkelt som i grensesnittdesignprogrammer som Figma, hvor man bare trenger to klikk for å eksportere et element som er klar til bruk.

I tillegg til grafiske elementer muliggjør programmer designet for grensesnittdesign å eksportere CSS-koden til individuelle elementer, slik at veldesignede elementer vil automatisk være responsive.

4. Det finnes ikke muligheter for prototyping i Photoshop

Photoshop har ingen verktøy som gjør at man kan lage en interaktiv prototype før du starter  programmererens arbeid. Muligheten for prototyping lar designere designe ikke bare utseendet, men også måten nettstedet fungerer på. Når man lager nettapplikasjoner, er ikke bare responsevne viktig, men også dems reaktivitet. Reaktivitet betyr at brukeren, som interagerer med grensesnittet,  umiddelbart ser effekten av handlingen sin, og får en helt annen opplevelse enn om siden skulle lastes på nytt med hvert klikk.

Nåværende teknologier gir oss muligheten for å lage grensesnitt som utveksler informasjon med serveren asynkront, slik at når du klikker på en knapp, trenger du ikke å vente på at siden skal lastes inn på nytt. Når du utfører en handling, endres innholdet på skjermen, ikke hele siden.

5. Dårlig vektorbehandling i Photoshop

Vektordesign er den primære måten å lage responsive nettsider på. Alle som har jobbet med programmer som Adobe Illustrator forstår hvor i strid med intuisjon vektorverktøyene i Photoshop er. Brukeren er veldig begrenset på hva man kan gjøre med vektorelementene i prosjektet i Photoshop.

Alle applikasjoner beregnet for å designe grafiske grensesnitt er basert på vektorgrafikk, noe som betyr at effekten av arbeidet vil sikkert være responsiv og av høy kvalitet.

6. Prosjektet laget i Photoshop er ikke responsiv

For å snakke om respons må prosjektet reagere på endringer i skjermoppløsning og tilpasse seg den. I grensesnittdesignprogrammer er det forskjellige verktøy som muliggjør å lage oppsett der elementene ordnes automatisk til området de er plassert i. Ved å manipulere dimensjonene til dette området kan vi observere hvordan individuelle elementer ordner seg eller endrer sine størrelser.

Disse teknikkene tilsvarer de som brukes når du lager nettsider, for eksempel flex eller grid. Dette er et eksempel på hvor godt disse verktøyene "forstår" ideen om å lage responsive oppsetter.

7. Det er ingen komponenter i Photoshop

Komponenter er elementer man kan lage en gang og deretter bruke fritt i prosjekt. Når det er behov for det, kan de fritt endres, og deres forekomster vil også endre seg, uten å måtte rette opp alle forekomster av elementet i prosjektet.

Ideen om å lage komponenter er noe åpenbart når du lager web- eller mobilapplikasjoner. Dette er grunnlaget for DRY-regelen (eng. Don’t Repeat Yourself), så „ikke gjenta deg selv”. Muligheten til å lage komponenter leveres av praktisk talt alle programmer som Figma eller Adobe XD.

8. Photoshop er treg

Ikke bare mangel på komponenter kan forlenge tiden for gjennomføring av prosjektet. Photoshop ble laget som et verktøy for bildebehandling, så det er utstyrt med et stort antall verktøy som gjør det mulig. Disse verktøyene er stort sett ikke nødvendige for webdesign. Dette overfører til effektivitet ettersom den trenger mye mer datamaskinressurser for å kjøre.

Webdesignverktøy har akkurat det man trenger for å få jobben gjort, noe som gjør dem lette og raske.

9. Jobben i Photoshop koster mer.

Photoshop er et tungt, funksjonsfyltbildebehandlings verktøy, og derfor er prisen mye høyere enn prisen på lette verktøy for å lage grensesnitt.

10. Samarbeidet med Photoshop er ikke så lett.

Nesten alle programvarer beregnet til webdesign muliggjør samarbeid i sanntiden. Akkurat som det skjer for eksempel i Google Docs. Det er en stor letthet når det jobber mange mennesker med et prosjekt samtidig.

For å overføre et prosjekt laget i Photoshop til en annen person, må du sende dem PSD-filer, noe som ikke er så praktisk lenger. Spesielt når prosjekter ikke er lagret på ett sted, men går fra person til person.

Oppsummering

Adobe Photoshop er et utmerket program for bildebehandling, fotomontasje og arbeid med rastergrafikk. Photoshop har et stort antall funksjoner og verktøy, takket være dem kan vi blant annet forbedre bildene våre eller lage ulike typer bilder. Photoshop pleide å bli brukt til webdesign, reklamemateriell og stort sett alt relatert til grafikk. Foreløpig har vi de riktige verktøyene for hvert formål, som er laget med tanke på å nå et bestemt mål. Takket være dette får vi lette, raske og komfortable verktøy som perfekt matcher behovene knyttet til vårt arbeid.

Med forekomsten til programmer for design og prototyping av grafiske grensesnitt på markedet, begynte Photoshops rolle i sammenheng med webdesign å miste sin betydning. Mens Photoshop for flere år siden ble ansett som et perfekt verktøy for webdesign, så med fremgangen gjort av netteknologi, sluttet Photoshop å oppfylle kravene til å lage moderne nettsteder. Slik praksis begynte å bli oppfattet som arkaisk.