Den praktiska handboken för webbdesign arbetsflöde
Som webbdesigner som ingår i ett större webbutvecklingsteam är det vanligt att du måste jonglera många uppgifter samtidigt.
Efter att ha skapat några första designförslag till din klient och nu väntar på den första återkopplingen är du förmodligen ganska upphetsad över hur ditt arbete kommer att uppfattas av kunden. Med så många saker att övervaka i en strikt tidsram är det lätt att bli överväldigad av projektets komplexitet. Det finns många steg involverade i att designa en webbplats eller app. Dessa steg varierar något från person till person, men det grundläggande arbetsflödet förblir detsamma.
Med ett bra arbetsflöde inrättat och med några verktyg och mjukvara kommer du enkelt att hålla bollen rullande och undvika långa återkopplingscykler.
Här är en praktisk guide till ett design arbetsflöde som du kan använda för att öka produktiviteten i ditt lag.
Förberedelsefas: Hantera förväntningar
Oavsett om du helt enkelt behåller en befintlig webbplats eller utformar en ny webbplats från början, måste du och din klient hantera varandras förväntningar.
Medan ditt primära ansvar är att förstå kravet på projektet i detalj, är kundens ansvar att förstå hur varje val som görs påverkar projektets omfattning och budget med hjälp.
Låt din klient veta om den teknik som krävs, den nödvändiga budgeten och den tidsram som krävs för att avsluta projektet. Närmar sig ditt projekt på ett organiserat sätt sparar tid, ansträngningar och budget.
Fas 1: Definiera platsmål
Det här är förmodligen den viktigaste fasen i något designprojekt när du definierar målen, ställer in den övergripande strukturen, bestämmer innehållet och tilldelar roller och olika resultat under hela projektet. Genom att upprätta korrekt planering från början, räddar du dig själv från mycket sorg senare.
Här arbetar du med kunden för att skapa schema, budget, tidslinje, tekniska behov, visuell stil och innehållsstruktur för målgruppen.
När du hanterar förväntningar och börjar med ditt designprojekt, skulle jag vilja rekommendera att använda en mager och lättanvänd projektledning för att hålla reda på definierade mål, budgetar, uppgifter och scheman.
Trello
Trello är ett välkänt och lättanvänt projekthanteringsverktyg. Det låter dig skapa olika brädor för olika projekt. Med Trello kan du få en snabb översikt över strömmaruppgifter och din eftersläpning.
asana
asana är bra att göra, och uppgiftsspårare. Du kan till och med samarbeta med kollegor och kunder inom Asana som gör att du kan hålla ditt projekt öppet och alla uppdaterade.
Basläger
Ett annat välkänt, men ändå bra projekthanteringsverktyg är Basläger . I likhet med de ovan nämnda verktygen tillåter det dig och ditt team att hålla reda på varje projekt som kan levereras och låter dig hålla koll på.
Fas 2: Utveckla webbplatsstrukturen och få dina händer smutsiga
Webbplatsstrukturen utgör ryggraden på webbplatsen. Det fungerar som en referensguide för laget under hela projektets varaktighet. Använd flödesdiagram för att visa strukturens flöde.
Sitemap: Skapa en webbplatskarta är avgörande för att förstå innehållsorganisationen. Det är viktigt att uppdatera webbplatskartan efter varje förändring. Om du inte gör det blir det rörigt.
Wireframe: Innehållet på webbplatsen måste lösas innan designen och grafiken sätts på plats.
Wireframes är fakta skisser på webbplatsen eller mobilapplikationen. Wireframes används för att skapa platshållare för innehåll, fastställa prioriteringar för element på sidan och dokumentation av krav. Detta blir mycket viktigt i nästa fas.
Balsamiq
Balsamiq är ett grafiskt trådverktyg som hjälper din designer att skapa många mönster och sedan ordna de förbyggda widgetsna i en drag-och-släppredigerare för att laget ska kunna se och föreslå ändringar samtidigt.
Moqups
Moqups är lätt att använda, har massor av dra och släpp funktioner och kräver inte en plug-in för webbläsare för att fungera. Du kan enkelt ordna en designpresentation för din klient med hjälp av det här verktyget.
Invision
Invision låter dig ladda upp arbetsdesign och skapa interaktioner genom att använda hotspots, precis som alla verkliga applikationer. En av sina standout-funktioner är möjligheten att skicka klickbara mönster till din telefon via SMS, vilket understryker vikten av att kunna testa dina mönster själv i rätt sammanhang.
Notism
Notism är ett av de bästa verktygen för kreativa lag för att påskynda sin arbetsprocess. Detta är en design och video samarbetsplattform. Det hjälper kreativa experter att dela med sig av sitt projekt och få feedback via skisser och anteckningar. Notism tillåter också att skapa olika versioner av en skärm. Genom att enkelt växla mellan olika skärmar kan du få en bättre bild av ditt projekts utveckling.
Fas 3: Design och produktion
I denna fas, se till att designern arbetar tillsammans med programmeraren för att säkerställa genomförandet av sammanhängande designelement.
Efter att kunden godkänner konstruktionsdesignen arbetar designern och grafiklaget med utseendet på webbplatsen. Komprimering, transparens, effektiv användning av färg och design kombinerar för att skapa effektiv webbgrafik.
Produktionsstadiet är en punkt där den faktiska webbplatsen skapas. Efter att webbplatsens utformning och layout är färdig, går webbplatsen in i konstruktionsdelen av arbetet. Här kommer du att ta alla de enskilda grafiska elementen från prototypen och använda dem för att skapa den faktiska, funktionella webbplatsen.
github
Din kod kommer att ändras en gång, två gånger, och förmodligen mycket mer än det. github låter dig arbeta effektivt med olika versioner av din webbplats. Verktyget lyser verkligen när du arbetar tillsammans med ett team av utvecklare. Detta är kodsamarbete vid sitt bästa.
CodePen
Den här är härlig. Det är en online-redaktör för alla dina HTML, CSS och JS behov. Den kombinerar enkelt med Github och är självklart samverkande. Tanken är att kunna testa bitar av kod och hitta en ordentlig lösning utan att krossa resten av koden.
Fas 4: Testa, samla in feedback och fixa buggar
Inget projekt är någonsin riktigt utan brister. Och även om testning är något som görs under hela utvecklingsprocessen, kommer det alltid att finnas fel kvar. Och vi pratar inte bara om programvarufel. Även en design kan vara buggy.
Så just nu är det viktigt att börja testa som galen. Tidig felsökning sparar mycket tid och ansträngning. Det är viktigt att alla som deltar i skapandet av webbplatsen är inblandade i testningen. Testning bör dock vara en smidig process. När du väl har lanserat webbplatsen eller är igång med att starta den, kommer många människor att börja använda det och ge feedback på webbplatsen.
Och trots att du lägger in all den insats du kan för att testa webbplatsen, kommer du ha missat några buggar eller nya kommer att dyka upp över tiden. Det är viktigt att du får information om buggar och problem så snart som möjligt. Om du kan få dina användare att rapportera dessa till dig, är du gyllene.
Usersnap
(Fullständig information: Jag arbetar för Usersnap.) Vi byggde Usersnap som ett visuellt felspårnings- och återkopplingsverktyg som underlättar mjukvarutestningens arbete. Det gör det möjligt för kunder, besökare och kollegor att rapportera fel, ändra förfrågningar eller helt enkelt återkoppling på din webbplats. Även för manuell webbplatstestning är Usersnap en säker satsning, eftersom det snabbar upp ditt testningsflöde genom lättanvända verktyg.
Så, för att återskapa ...
Designprojekt kräver många människor att arbeta tillsammans. Konstant återkoppling är en av de viktigaste delarna av att leverera ett projekt som beställts av kunden och inom de angivna tidslinjerna. Med allt detta rör och det faktum att webbplatser blir mer komplexa varje dag, gör onlineverktyg det enkelt att slutföra arbetet bland alla inblandade och få omedelbar feedback från dem.
Att integrera dessa verktyg i ett solidt arbetsflöde hjälper dig verkligen att hitta var du behöver vara i ett redan konkurrenskraftigt fält.