Mijn gedachten over ontwerpen in de browser versus ontwerpen in Photoshop

Ontwerpen in de browser wordt steeds populairder met de opkomst van "ontwerpers die coderen". Maar alleen omdat we nieuwe vaardigheden hebben opgepikt, betekent dit dat we onze paper, sharpies, desktop publishing-software en wireframing-tools moeten verwijderen en direct naar codeerprototypes moeten gaan.?

Browser versus Photoshop is een populair onderwerp

Als je in de digitale ruimte werkt, met ontwerpers en ontwikkelaars, zul je de stijgende trend in ontwerpers hebben gezien waarvan wordt verwacht dat ze (enige) codeervaardigheden hebben.

Veel mensen zijn er helemaal voor, terwijl sommigen vinden dat ontwerpers geen code mogen aanraken. De ontwerpers die code gebruiken, krijgen echter meer zelfvertrouwen en sommigen beweren zelfs dat ontwerpen in Photoshop niet langer relevant is in bepaalde scenario's..

Ik ben van mening dat creativiteit werktuigonafhankelijk is, maar ik zie de voordelen en nadelen van beide benaderingen afzonderlijk (ik heb ze hieronder opgesomd, zodat je mijn perspectief op de discussie kunt krijgen).

In dit artikel gebruik ik de term "Photoshop" en "UXPin" losjes. Ik heb het echt over dit soort hulpprogramma's, of je nu Sketch, Balsamic of iets anders gebruikt! Hetzelfde argument is van toepassing. Photoshop en UXPin zijn gewoon mijn favoriete tools.

Recht in de browser gaan

Een veel voorkomende situatie waarin iemand in een organisatie in de browser kan ontwerpen, is of ze vaardig zijn in visueel ontwerp, maar ook comfortabele codering hebben. Het doel kan bijvoorbeeld zijn om een ontwikkelaar die een CMS bouwt, te laten weten hoe het ontwerp eruit zal zien. Een PSD zou geschikt zijn, maar de ontwerper zou kunnen denken dat het waardevoller zou zijn om alle extra's, zoals animatie en responsiviteit, te tonen op een manier die dichter bij de uiteindelijke build ligt.

Voordelen

Kaders zoals Bootstrap en Foundation maken het proces sneller. In mijn ervaring is het goed om daadwerkelijk te leren hoe je vanaf nul moet coderen voordat je op raamwerken leunt, omdat je zult leren wat er achter de schermen gebeurt.
Het leren coderen van front-end vermindert het aantal knelpunten, vooral als uw team zwaarder is aan de ontwerpkant. Je kunt de ontwikkelaars laten focussen op meer van de uitdagende aspecten van ontwikkeling en specialistische gebieden.

nadelen

Het ontwerpen in de browser kan iets trager zijn als u niet zeker bent van codering. Naar mijn ervaring kan het betalen om je in te schrijven voor een front-end ontwikkelingscursus, en een paar freelance optredens proberen, zoals het bouwen van een eenvoudige landingspagina..
Dit proces kan de aandacht van ontwerpers verleggen van hun kernsterkten. Ja, het kan goed zijn om codeerkrakers te hebben. Sommige mensen beweren echter dat de arbeidsverdeling (mensen die zich concentreren op heel specifieke taken) tot een grotere efficiëntie van de productie leidt. De realiteit van de markt (en flexibiliteit gezocht in de digitale ruimte) kan ertoe leiden dat mensen anders ruzie maken!

Ontwerpen in Photoshop / UXPin

Desktop publishing-software zoals Adobe Photoshop en Software as a Services (SAAS) zoals UXPin zijn slechts een paar van de vele tools die het brood en boter zijn van ontwerpers. Zelfs ontwerpers dat kan code en vaak ontwerpen in de browser zal het waardevol vinden om dingen eerst uit te plannen met behulp van deze hulpmiddelen.

Voordelen

Grafische toepassingen zijn geweldig in de vroege plannings- en onderzoeksfasen. In mijn ervaring zijn papier en sharpies snelle en vieze manieren om snel iets uit te werken.
Wireframes kunnen een goede manier zijn voor een bedrijfsanalist of andere niet-visuele stakeholder om basismetagegevens door te geven. Ontwerpen in een browser is waarschijnlijk overbodig, omdat het doel in deze fase is om iets los te maken voor discussie.
Plannen en vooruitdenken met mock ups met lagere getrouwheid kan leiden tot een aanzienlijke afname van de ontwikkelingstijd.

nadelen

Ontwerpen voor het responsieve web kan repetitief aanvoelen in Photoshop en niet realistisch vertalen naar hoe de daadwerkelijke build eruit zal zien. In mijn ervaring is het gemakkelijker om uw mediaquery's met het oog op verschillende apparaten aan te passen, zodat u realtime feedback krijgt van hoe de feitelijke build eruit zal zien in plaats van een aantal speculatieve mock-ups in Photoshop te produceren.
Er zijn moeilijk technische beperkingen te herkennen bij het ontwerpen in Photoshop. Bijvoorbeeld toen ik een bestemmingspagina voor een klant aan het ontwerpen was. Het bevatte een e-mail capture box, die later vanwege de complexiteit erg moeilijk te ontwerpen werd. Uiteindelijk "ontwierp" ik in de browser de luie manier, die veel praktischer was.

Conclusie

Creativiteit is gereedschapsonafhankelijk. Direct werken in de browser confronteert u onmiddellijk met mogelijke beperkingen en helpt u bij het ontwikkelen van uw ontwerp. In mijn ervaring is het echter geen vervanging voor een vroege snede in UxPin en Adobe Photoshop. Deze benaderingen sluiten elkaar ook niet uit. Ik gebruik Adobe Photoshop veel, zelfs bij het ontwerpen in de browser. Tegenwoordig heeft het ook een aantal geweldige extensies om je te helpen veel efficiënter te coderen.

Ben jij een ontwerper die codeert? Of doe je liever je mock-ups in desktop publishing software zoals Photoshop? Laat hieronder een reactie achter!

Web ontwerp