De praktische handleiding voor webontwerpworkflow
Als webdesigner die deel uitmaakt van een groter webontwikkelteam, is het heel gewoon dat je veel taken tegelijkertijd moet jongleren.
Nadat u enkele eerste ontwerpconcepten voor uw klant hebt gemaakt en nu op die eerste feedback wacht, bent u waarschijnlijk behoorlijk enthousiast over hoe uw werk door de klant zal worden waargenomen. Met zoveel dingen om te monitoren in een strikt tijdschema, is het gemakkelijk om overweldigd te raken door de complexiteit van het project. Er zijn veel stappen nodig bij het ontwerpen van een website of app. Deze stappen verschillen enigszins van persoon tot persoon, maar de basisworkflow blijft hetzelfde.
Met een goede workflow-opstelling en met een paar tools en software, blijf je gemakkelijk de bal aan het rollen en vermijd je lange feedbackcycli.
Hier is een praktische gids voor een ontwerpworkflow die u kunt gebruiken om de productiviteit van uw team te verhogen.
Voorbereidingsfase: verwachtingen beheren
Of u nu gewoon een bestaande website onderhoudt of helemaal opnieuw een nieuwe website ontwerpt, zowel u als uw klant zijn verplicht om elkaars verwachtingen te beheren.
Hoewel het uw primaire verantwoordelijkheid is om de vereisten van het project in detail te begrijpen, is de verantwoordelijkheid van de klant om te begrijpen hoe elke gemaakte keuze van invloed is op de reikwijdte en het budget van het project, met uw hulp.
Laat uw klant op de hoogte van de vereiste technologie, het vereiste budget en het tijdsbestek dat nodig is om het project te voltooien. Door uw project op een georganiseerde manier te benaderen, bespaart u tijd, inspanningen en budget.
Fase 1: sitedoelen definiëren
Dit is waarschijnlijk de belangrijkste fase van elk ontwerpproject bij het definiëren van de doelen, het opzetten van de algemene structuur, het beslissen over de inhoud en het toewijzen van rollen en de verschillende deliverables gedurende het project. Door vanaf het begin een goede planning op te zetten, bespaar je jezelf later van veel verdriet.
Hier werkt u met de klant om het schema, het budget, de tijdlijn, technische behoeften, visuele stijl en de inhoudsstructuur voor de doelgroep vast te stellen.
Bij het beheren van verwachtingen en aan de slag gaan met uw ontwerpproject, raad ik u aan gebruik te maken van een flexibel en eenvoudig te gebruiken projectbeheer om gedefinieerde doelen, budgetten, taken en planningen bij te houden.
Trello
Trello is een bekende en eenvoudig te gebruiken projectmanagementtool. Hiermee kunt u verschillende boards maken voor verschillende projecten. Met Trello krijgt u een snel overzicht van de stroomtaken en uw achterstand.
Asana
Asana is geweldig om te doen en taaktracker. U kunt zelfs samenwerken met collega's en klanten binnen Asana, waardoor u uw project transparant en iedereen up-to-date kunt houden.
Basiskamp
Een andere bekende en toch geweldige tool voor projectmanagement is Basiskamp . Vergelijkbaar met de hierboven genoemde tools, stelt het u en uw team in principe in staat om elk project te volgen en kunt u op schema blijven.
Fase 2: het ontwikkelen van de sitestructuur en vuile handen maken
De sitestructuur vormt de ruggengraat van de website. Het fungeert als een naslagwerk voor het team gedurende de hele duur van het project. Gebruik stroomdiagrammen om de stroom van de structuur te tonen.
Sitemap: het maken van een sitemap is cruciaal voor het begrijpen van de inhoudsorganisatie. Het is belangrijk om de sitemap bij te houden na elke wijziging. Als je dat niet doet, wordt het rommelig.
Wireframe: de inhoud van de site moet worden gerepareerd voordat het ontwerp en de grafische afbeeldingen worden geplaatst.
Wireframes zijn low-fidelity-schetsen van de website of mobiele applicatie. Wireframes worden gebruikt om tijdelijke aanduidingen voor inhoud te maken, prioriteiten vast te stellen voor elementen op de pagina en te voldoen aan documentvereisten. Dit wordt erg belangrijk in de volgende fase.
Balsamiq
Balsamiq is een grafische wireframing-tool waarmee uw ontwerper veel ontwerpen kan maken en vervolgens de voorgebouwde widgets in een slepen-en-neerzetten-editor kan rangschikken zodat het team wijzigingen tegelijkertijd kan bekijken en voorstellen.
Moqups
Moqups is gemakkelijk te gebruiken, heeft veel slepen-en-neerzetten functies en vereist geen browser plug-in om te kunnen werken. U kunt eenvoudig een ontwerppresentatie voor uw klant regelen met deze tool.
invision
invision stelt u in staat werkontwerpen te uploaden en interacties te creëren door gebruik te maken van hotspots, net als elke echte toepassing. Een van zijn opvallende kenmerken is de mogelijkheid om klikbare ontwerpen naar uw telefoon via sms te sturen, waardoor het belang van het testen van uw ontwerpen in de juiste context wordt onderstreept.
Notism
Notism is een van de beste tools die creatieve teams gebruiken om hun werkproces te versnellen. Dit is een ontwerp- en videosamenwerkingsplatform. Het helpt creatieve professionals hun project te delen en feedback te ontvangen via schetsen en notities. Notisme maakt het ook mogelijk om verschillende versies van een scherm te maken. Door eenvoudig over verschillende schermen te schakelen, krijgt u een beter beeld van de ontwikkeling van uw project.
Fase 3: ontwerp en productie
Zorg er in deze fase voor dat de ontwerper samenwerkt met de programmeur om te zorgen voor de implementatie van coherente ontwerpelementen.
Nadat de klant de ontwerpconcepten heeft goedgekeurd, werken de ontwerper en het grafische team aan het uiterlijk en de uitstraling van de website. Compressie, transparantie, efficiënt gebruik van kleur en ontwerp combineren effectieve webafbeeldingen.
De productiefase is een punt waarop de eigenlijke website wordt gemaakt. Nadat het ontwerp en de lay-out van de site zijn voltooid, gaat de site naar het technische gedeelte van het werk. Hier neemt u alle afzonderlijke grafische elementen van het prototype en gebruikt u deze om de feitelijke, functionele site te maken.
Github
Je code zal één, twee en waarschijnlijk nog veel meer veranderen. Github stelt u in staat om efficiënt te werken met verschillende versies van uw website. De tool schijnt echt wanneer je samenwerkt met een team van ontwikkelaars. Dit is codesamenwerking op zijn best.
CodePen
Deze is mooi. Het is een online editor voor al uw HTML-, CSS- en JS-behoeften. Het combineert eenvoudig met Github en is natuurlijk een samenwerking. Het idee is om stukjes code te kunnen testen en een goede oplossing te vinden zonder de rest van de code in de war te sturen.
Fase 4: testen, feedback verzamelen en fouten herstellen
Geen enkel project is ooit echt zonder gebreken. En hoewel testen ook tijdens het hele ontwikkelingsproces wordt gedaan, zullen er altijd bugs overblijven. En we hebben het niet alleen over softwarefouten. Zelfs een ontwerp kan buggy zijn.
Dus op dit moment is het belangrijk om te beginnen met testen als een gek. Vroegtijdige probleemoplossing bespaart veel tijd en moeite. Het is van cruciaal belang dat alle mensen die deelnemen aan de oprichting van de site betrokken worden bij het testen. Testen moet echter een behendig proces zijn. Zodra u de site heeft gestart of bezig bent met de lancering, zullen veel mensen het gaan gebruiken en feedback geven op de site.
En hoewel je alle moeite hebt gedaan om de site te testen, heb je een paar bugs gemist of zullen er na verloop van tijd nieuwe bugs verschijnen. Het is van cruciaal belang dat u zo snel mogelijk informatie over bugs en problemen krijgt. Als u ervoor kunt zorgen dat uw gebruikers deze aan u melden, bent u gouden.
Usersnap
(Volledige openbaarmaking: ik werk voor Usersnap.) We hebben gebouwd Usersnap als een visuele bug tracking en feedbacktool die het werk van softwaretests vereenvoudigt. Hiermee kunnen klanten, websitebezoekers en collega's bugs melden, verzoeken wijzigen of eenvoudig feedback op uw website plaatsen. Ook voor het handmatig testen van websites is Usersnap een veilige gok, omdat het uw testworkflow versnelt door eenvoudig te gebruiken hulpmiddelen.
Dus, om samen te vatten ...
Ontwerpprojecten vereisen veel mensen om samen te werken. Constante feedback is een van de belangrijkste onderdelen van het leveren van een project zoals gevraagd door de klant en binnen de opgegeven tijdlijnen. Met al deze rommel en het feit dat websites elke dag complexer worden, maken online hulpmiddelen het eenvoudig om het werk onder alle betrokkenen te voltooien en direct feedback van hen te krijgen.
Het integreren van deze tools in een solide workflow helpt u echt om te komen waar u zich op een concurrerend gebied moet bevinden.
Uitgelichte afbeelding, teamwerk afbeelding via Shutterstock.