Ontwerpen in de browser werd gebruikt om mij bang te maken. Niet omdat het moeilijk leek, maar omdat ik dacht dat ik zou eindigen met een ontwerp dat bestond uit een heleboel kleine doosjes, iets dat zo generiek en saai was dat ik het uiteindelijk in Photoshop zou overnemen.
Die angst bleek volkomen ongegrond. Mijn ontwerpen werden niet alleen meer gefocust, ik maakte ze ook sneller af en zorgde ervoor dat de klanten eerder in het proces werden betrokken door middel van interactie en discussie.
Design is ontwerp. Het maakt niet uit of het in een softwareprogramma wordt gedaan of in code wordt geschreven. Ontwerpen in de browser is niet moeilijker dan ontwerpen in Photoshop. Zoals elk hulpmiddel moet je het gebruiken om het te leren en het uiteindelijk te beheersen.
Design is een iteratief proces, een proces dat moeilijker wordt gemaakt door voor klanten te werken. Het is soms moeilijk voor klanten om zich exact voor te stellen wat u beschrijft; ontwerpen in de browser kan hen tijdens het hele proces betrekken in plaats van alleen de ontwerpfase.
In wezen zijn de ontwerp- en ontwikkelingsfasen samengevoegd en als je van nature goed bent in design en front-end development, dan zal je het in de browser ontwerpen zoals een eend water neemt.
Een groot voordeel van ontwerpen in de browser is dat we kunnen ontwerpen op basis van realistische verwachtingen. Soms kan ontwerpen in software onvoorziene problemen veroorzaken voor de ontwikkeling van de front-end. UI-elementen kunnen wankel ontworpen zijn of misschien klinken ze gewoon niet, het is moeilijk om aan een klant uit te leggen waarom je iets hebt veranderd, niet omdat ze het niet zullen begrijpen, maar omdat je het al in het ontwerp hebt geplaatst en had goedgekeurd. Ontwerpen in de browser leent zich voor het idee van eenvoud.
Voordat ik zelfs maar aan het ontwerpen denk, moet ik een plan hebben. Alleen omdat ik een andere tool gebruik, betekent niet dat mijn proces verandert. Ik wil graag een behoorlijk solide plan hebben voordat ik begin met ontwerpen en ik moet weten wat ik aan het ontwerpen ben, waarom ik aan het ontwerpen ben, voor wie ik ontwerp, achtergrondinformatie over klanten en alle service- of productinformatie die ik nodig heb om te focussen op.
Nadat ik deze dingen heb bepaald, zal ik een beter idee hebben over wat het product is of wat de klant doet, hoe lang ze het hebben gedaan, wat hen onderscheidt van hun concurrenten, wie hun gebruikersbasis is en wat de primaire en secundaire gebruikers zijn. doelen van de website zullen zijn.
Persoonlijk vind ik het leuk om documentatie van alles te hebben. Meestal heb ik documentatie voor de sitemap, inhoud, calls-to-action en site-architectuur. Tegen de tijd dat ik begin met ontwerpen, zou ik een duidelijke strategie voor het ontwerp moeten hebben en zou alle inhoud verzameld moeten zijn.
Schetsen is de sleutel als ik iets in de browser ga ontwerpen. Ik kan inhoudsgebieden grofvinden met potlood en papier, feedback krijgen en snel herleiden naar de basis van mijn ontwerp.
Ik schets op basis van het plan dat ik hierboven heb beschreven en zorg ervoor dat ik alle inhoudsgebieden en calls-to-action heb uitgestippeld. Schetsen moet snel zijn, niet veel tijd besteden aan het perfectioneren van iets. Het moet solide genoeg zijn om aan een klant te laten zien, maar slordig genoeg om ze binnen een uur klaar te krijgen.
Vervolgens maak ik graag een prototype van de site van mijn schetsen in HTML en CSS. Het prototype bestaat uit een groot aantal grijze vakken met tekst en afbeeldingen voor tijdelijke aanduidingen. De grijze vakken fungeren als containers voor inhoud wanneer ik daadwerkelijk begin met ontwerpen. Het grootste voordeel van prototyping met code is dat de cliënt interactie met het prototype kan hebben en kan zien hoe de sitearchitectuur werkt. Als iets uit staat of verfijnd is, kunnen we het nu aan in plaats van op de lanceringsdag.
Voordat we kunnen beginnen met ontwerpen, hebben we een soort stijl nodig om ons ontwerp te baseren. We moeten de kleuren en lettertypen bepalen die we zullen gebruiken bij mogelijke texturen en patronen. Dit is waar stijltegels in het spel komen.
Stijltegels zijn gemaakt door Samantha Warren en ik gebruik ze nu al een tijdje. Ze helpen klanten een vroege en zeer eenvoudige stijlgids te zien waarmee we kunnen beginnen met ontwerpen. Ik maak er graag een aantal van om te zien welke de klant het best verkiest, ik kan het tot één beperken. Ik vind dat deze ook erg belangrijk zijn in het goedkeuringsproces en helpt om regelrechte afwijzing te voorkomen.
Nu zijn we klaar om te beginnen met ontwerpen. Als je gewend bent om te ontwerpen in een softwareprogramma zoals Photoshop of Sketch, is dit niet veel anders. Met ons prototype-bestand beginnen we nep-content toe te voegen aan onze markup. Op dit punt weten we precies wat er in elke contentsectie in de opmaak zit en is het raster al gedefinieerd, dus het zou niet zo lang moeten duren.
Nu ga ik layeringstijlen op mijn inhoud beginnen. Ik ga basisstijlen toevoegen voor kleur, typografie en lay-out. Als de basisstijlen klaar zijn, stap ik weg en kijk ernaar. Ik hou ervan om bepaalde delen van het ontwerp te fotograferen om er later naar te verwijzen.
Zodra ik tevreden ben met de basislaag maak ik graag notities over wat ik moet verfijnen. Gebaseerd op die opmerkingen die ik waarschijnlijk zal gebruiken Photoshop of Schetsen om textuur of iets met een tastbaar gevoel toe te voegen. Photoshop en Sketch zijn geweldige hulpmiddelen om complexe UI-elementen snel te verfijnen, dus ik bewaar alles dat lastig kan zijn om meer dan eens te coderen
De reden dat ik dit doe, is omdat ik wil dat mijn codebase lean en clean is en hoe meer code je codeert, commentaar geeft en verwijdert, des te slordiger en opgeblazen je codebase wordt.
Als je elke keer opnieuw vanuit de browser moet ontwerpen, lijkt het alsof dingen een eeuwigheid duren, maar als je vertrekt vanuit een aangepaste basis, een raamwerk, kun je alle herhalende stappen elimineren. Om te beginnen heb ik een aangepaste versie van Initializr die ik gebruik met een aangepast responsief raster ingebouwd in Sass (http://sass-lang.com/). Het gebruik van een aangepast raamwerk geeft me een voorsprong voor prototyping en ontwerp.
Het hebben van een bibliotheek met gemeenschappelijke UI-patronen is ook een geweldige manier om een snel prototype te bouwen en het maakt het ontwerpen in de browser efficiënter. ik gebruik Sublieme tekst om te coderen en iets waarvan ik heb geleerd om van te profiteren, zijn de aangepaste fragmenten die je kunt maken. Ik heb verschillende variaties van navigatie, lijsten, zijbalken en andere algemene elementen aan mijn lijst met fragmenten toegevoegd, zodat ik ze snel in mijn opmaak kan plaatsen met een eenvoudige actie. Ik gebruik ook accounts Codepen en JSFiddle om patronen op te slaan. Dan Cederholm creëerde een geweldig WordPress-thema voor het opslaan van veelvoorkomende patronen peren . Het gebruikt berichten om code op te slaan die u live in de front-end kunt bewerken om wijzigingen te testen en te bekijken.
Praktijk en praktische toepassing maken je beter in het ontwerpen in de browser. De kans is groot dat als je een of andere front-end-ontwikkeling uitvoert, je al een basisraamwerk hebt om vanaf te starten en je al een aantal algemene patronen hebt om te gebruiken.
Nu hoeft u alleen nog maar te beginnen met ontwerpen in de browser en uiteindelijk komt u met een workflow die efficiënt is en binnen uw proces werkt. Met oefenen word je alleen sneller.