Mina tankar på att designa i webbläsaren kontra design i Photoshop

Design i webbläsaren blir alltmer populär med ökningen av "designers who code". Men bara för att vi har plockat upp några nya färdigheter betyder det att vi borde gräva våra papper, sharpies, desktop publishing programvara och wireframing verktyg och hoppa rakt in i kodande prototyper?

Browser vs Photoshop är ett hett ämne

Om du arbetar i det digitala utrymmet, med designers och utvecklare, har du sett den stigande trenden i formgivare som förväntas ha (vissa) kodningsförmåga.

Många människor är alla för det, medan vissa tror att designers inte ska röra vid kod. Men de designers som gör kod blir mer övertygade och vissa hävdar att designen i Photoshop inte längre är relevant i vissa scenarier..

Jag anser att kreativitet är verktygsoberoende, men jag kan se fördelarna och nackdelarna med båda metoderna isolerat (jag har listat dem nedan, så du kan få mitt perspektiv på diskussionen).

I denna artikel använder jag termen "Photoshop" och "UXPin" löst. Jag hänvisar verkligen till något verktyg av detta slag, oavsett om du använder Sketch, Balsamic eller något annat! Samma argument gäller. Photoshop och UXPin råkar bara vara mina preferensverktyg.

Går rakt in i webbläsaren

En vanlig situation som någon i en organisation kan utforma i webbläsaren är om de är skickliga i visuell design, men är också bekväma kodning. Till exempel kan syftet vara att kommunicera med en utvecklare som bygger ett CMS vad designen kommer att se ut. En PSD skulle vara lämplig, men konstruktören kan känna att det skulle vara mer värdefullt att visa alla extrafunktioner, såsom animering och lyhördhet på ett sätt som är närmare det slutliga byggandet.

fördelar

Ramar som Bootstrap och Foundation gör processen snabbare. Enligt min erfarenhet är det bra att faktiskt lära sig hur man kodar från början, innan man lutar på ramar, eftersom du kommer att lära dig vad som händer bakom kulisserna.
Att lära sig att koda fronten minskar antalet flaskhalsar, speciellt om ditt lag är tyngre på designsidan. Du kan låta utvecklarna fokusera på mer av de utmanande aspekterna av utveckling och specialområden.

nackdelar

Att utforma i webbläsaren kan vara lite långsammare om du inte är säker på kodning. Enligt min erfarenhet kan den betala för att anmäla sig till en utvecklingskurs på framsidan, och prova på några freelance-spelningar som att bygga en enkel målsida.
Denna process kan flytta designers fokus bort från sina kärnstyrkor. Ja, det kan vara bra att ha kodningskurvor. Men vissa argumenterar för att arbetsfördelningen (människor som fokuserar på mycket specifika uppgifter) leder till ökad effektivitet i produktionen. Marknadens verklighet (och flexibilitet eftersträvad i det digitala utrymmet) kan leda till att människor argumenterar annars!

Utformning i Photoshop / UXPin

Desktop Publishing-programvara som Adobe Photoshop och Software as a Services (SAAS) som UXPin är bara ett par många verktyg som är bröd och smör av designers. Även designers som kan kod och ofta design i webbläsare kommer det att vara värdefullt att planera saker med hjälp av dessa verktyg först.

fördelar

Grafiska applikationer är bra i tidig planering och forskningsfaser. Enligt min erfarenhet är papper och sharpies snabba och smutsiga sätt att snabbt koka ut något.
Wireframes kan vara ett bra sätt för en affärsanalytiker eller annan icke-visuell aktör att kommunicera grundläggande metadata. Att utforma i en webbläsare skulle förmodligen bli överkill eftersom målet med detta stadium är att skapa något som är lös för diskussion.
Planering och förankring med lägre trovärdighet kan leda till en avsevärd minskning av utvecklingstiden.

nackdelar

Att designa för den lyhörda webben kan känna sig repeterande i Photoshop och översätt inte realistiskt till vad den verkliga byggnaden kommer att se ut. Enligt min erfarenhet är det lättare att tweak dina mediefrågor med hjälp av ögonen för olika enheter och få realtids återkoppling av vad den verkliga byggnaden kommer att se ut, snarare än att producera ett antal spekulativa mock ups i Photoshop.
Det är svårt att känna igen tekniska begränsningar när man utformar i Photoshop. Till exempel, när jag designade en målsida för en klient. Den innehöll en email capture box, som senare blev mycket svår att designa på grund av komplexiteten. Till slut "designade" jag i webbläsaren den lata vägen, vilket var mycket mer praktisk.

Slutsats

Kreativitet är verktygsoberoende. Att arbeta direkt i webbläsaren konfronterar dig omedelbart med eventuella begränsningar och hjälper dig att utveckla din design. Men enligt min erfarenhet är det ingen ersättning för ett tidigt skära i UxPin och Adobe Photoshop. Dessa tillvägagångssätt utesluter inte heller varandra. Jag använder Adobe Photoshop mycket, även när du utformar i webbläsaren. Dessa dagar har det också några bra tillägg för att hjälpa dig att koda mycket mer effektivt.

Är du en designer som kodar? Eller föredrar du att göra dina mock ups i desktop publishing programvara som Photoshop? Lämna en kommentar nedan!

Webbdesign