Een verandering van werkwijze is nooit gemakkelijk, maar in vele gevallen wel noodzakelijk. De switch van Adobe Photoshop naar Adobe XD is daarbij geen uitzondering.
In onderstaand artikel leggen wij uit hoe wij dit als internetbureau hebben opgepakt, wat onze ervaringen hierbij waren en wat ons advies is tijdens een overstap als deze.
Het proces versnellen en versimpelen, voor zowel de ontwerper als de klant.
Van Photoshop naar Adobe XD
Je kent het vast wel:
- Homepage-v0.1
- Homepage-v1.0
- Homepage-final-2018
- Homepage-final-final
- Homepage-gekozen-final-na-bespreking
- etc.
Dat wat je hierboven ziet was ons grootste probleem met de werkwijze van Photoshop. Uiteraard ook het feit dat Photoshop van huis uit niet echt een web-design tool is, maar voornamelijk omdat je na een ontwerptraject al snel 2GB aan bestanden hebt voor alle templates, pagina’s en UI-elementen.
Uit dat probleem is de vraag naar voren gekomen, hoe kan dit beter. Naast het feit dat wireframes en prototypes nog steeds in Adobe Muse opgemaakt werden, wat ook niet optimaal was, waren we eigenlijk op zoek naar een intuïtief en compact softwarepakket dat het gemakkelijk maakt een design klus te beheren en het overzicht te houden.
Sketch is dan natuurlijk wat als eerste in je Google zoekresultaten naar voren komt, maar Windows, dus die viel helaas af. Dit verhaal is inmiddels ongeveer anderhalf jaar geleden, dus net rond de launch van de beta versie van Adobe XD. Now we’re talking.
De nieuwe werkwijze van Adobe XD
Een project begint natuurlijk met de eerste klantgesprekken. Uiteraard komen hier vragen en oplossingen naar voren en bij Smeedijzer Internet maken wij dan vrijwel altijd een low-fi wireframe. Dit is eigenlijk een ontwerp met dummy teksten, veel grijze blokken en de algehele structuur van de website. Welke pagina’s komen op de website, welke elementen op die pagina’s en waar staan deze elementen?
Binnen Adobe XD kan je een project simpelweg starten zoals je dit ook met Photoshop of Muse zou doen. Het mooie is echter dat je deze wireframes direct volledig clickable kan maken. Kies een element als de koptekst van een pagina, sleep het lipje naar de pagina waar dit element heen moet linken en je bent klaar. Selecteer eventueel nog met wat voor effect of fade je deze overgang wilt laten uitvoeren en je bent klaar.
Je hoeft geen bestanden te exporteren, je bent geen extra plugins nodig om te publiceren. In plaats daarvan kan je met één simpele knop het prototype uploaden naar de externe servers van Adobe. Hier kan zowel de klant als de developer bij. De klant gaat door het prototype alsof het een al afgerond product is en de developer kan per element inzien welke HTML en CSS eigenschappen deze bevatten.
Tijd voor de ontwerpen!
Tof! Je klant vindt het prototype prachtig, met natuurlijk een aantal opmerkingen, maar je kan verder met de ontwerpen. Als de wireframes zodanig goed in elkaar gezet zijn is het vaak slechts nog maar het toevoegen van wat foto’s, afbeeldingen en huisstijl elementen om het uniek en eigen te maken en je bent klaar.
Geen gedoe en met de juiste volgorde aan de slag
Dát is de kracht van Adobe XD. Je begint bij het begin en werkt dit verder uit binnen hetzelfde project waar je mee begonnen bent. De UX/UI wordt in het begin besproken en uitgewerkt tot een clickable prototype waarna het omgezet kan worden in de volledige ontwerpen. Het mooie is dat de verbanden tussen de elementen en pagina’s niet verloren gaan. Wil je de klant dus helemaal van zijn of haar sokken blazen kan je de ontwerpen bij de presentatie ook nog eens werkend doorheen klikken.
« Klaar met lezen? Ga terug naar het overzicht