Den Praktiske Guide til Web Design Workflow
Som webdesigner, der er en del af et større webudviklingshold, er det almindeligt, at du skal jonglere en masse opgaver samtidigt.
Efter at have lavet nogle første designudkast til din klient og nu venter på den første feedback, er du nok begejstret for, hvordan dit arbejde vil blive opfattet af kunden. Med så mange ting at overvåge i en streng tidsramme, er det nemt at blive overvældet af projektets kompleksitet. Der er mange trin involveret i design af et websted eller en app. Disse trin varierer lidt fra person til person, men den grundlæggende arbejdsgang forbliver den samme.
Med en god arbejdsgang indstillet og med et par værktøjer og software, vil du nemt holde bolden rullende og undgå lange tilbagekoblingscykler.
Her er en praktisk vejledning til et design workflow, som du kan bruge til at øge produktiviteten i dit team.
Forberedelsesfase: Forvaltning af forventninger
Uanset om du blot vedligeholder en eksisterende hjemmeside eller designer et nyt websted fra bunden, skal du og din klient være i stand til at styre hinandens forventninger.
Mens dit primære ansvar er at forstå kravet om projektet i detaljer, er kundens ansvar at forstå, hvordan hvert valg, der er foretaget, påvirker omfanget og budgettet for projektet med din hjælp.
Lad din klient vide om den nødvendige teknologi, det nødvendige budget og den tidsramme, der kræves for at afslutte projektet. Når du nærmer dig dit projekt på en organiseret måde, sparer du tid, indsats og budget.
Fase 1: Definere webstedsmål
Dette er nok den vigtigste fase i ethvert designprojekt, da du definerer målene, opstiller den overordnede struktur, beslutter indhold og tildeler roller og de forskellige resultater gennem hele projektet. Ved at oprette ordentlig planlægning lige fra starten, redder du dig selv fra en masse sorg senere.
Her arbejder du med kunden for at fastlægge tidsplanen, budgettet, tidslinjen, tekniske behov, visuel stil og indholdsstruktur for målgruppen.
Når du styrer forventningerne og begynder med dit designprojekt, vil jeg gerne anbefale at bruge en mager og nem at bruge projektstyring for at holde styr på definerede mål, budgetter, opgaver og tidsplaner.
Trello
Trello er et velkendt og nemt at bruge projektstyringsværktøjer. Det lader dig oprette forskellige bestyrelser til forskellige projekter. Med Trello kan du få et hurtigt overblik over strømopgaver og din baglog.
asana
asana er fantastisk at gøre, og opgave tracker. Du kan endda samarbejde med kolleger og kunder inden for Asana, som gør det muligt for dig at holde dit projekt gennemsigtigt og alle up-to-date.
Base Camp
Et andet velkendt, men alligevel godt projektledelsesværktøj er Base Camp . Ligesom de ovennævnte værktøjer giver det dig og dit team mulighed for at holde styr på alle projekter, der kan leveres, og du kan holde styr på det.
Fase 2: Udvikle webstedets struktur og få dine hænder beskidte
Webstedets struktur udgør rygraden på hjemmesiden. Det fungerer som en referencevejledning til holdet i hele projektets varighed. Brug flowdiagrammer til at vise strømmen af strukturen.
Sitemap: Oprettelse af et sitemap er afgørende for at forstå indholdsorganisationen. Det er vigtigt at holde opdateringen af sitemap efter hver ændring. Hvis du ikke gør det, bliver det rodet.
Wireframe: Indholdet af webstedet skal rettes, før design og grafik sættes på plads.
Wireframes er billedskitser af hjemmesiden eller mobilapplikationen. Wireframes bruges til at oprette pladsholdere til indhold, fastlægge prioriteter for elementer på siden og dokumentere krav. Dette bliver meget vigtigt i næste fase.
Balsamiq
Balsamiq er et grafisk wireframing værktøj, der hjælper din designer med at skabe mange designs og derefter arrangere de præbyggede widgets i en træk-og-slip editor for holdet at se og foreslå ændringer samtidigt.
Moqups
Moqups er nem at bruge, har masser af træk og slip funktioner og kræver ikke, at en browser plug-in skal fungere. Du kan nemt arrangere en designpræsentation til din klient ved hjælp af dette værktøj.
invision
invision giver dig mulighed for at uploade arbejdsdesign og skabe interaktioner ved at bruge hotspots, ligesom enhver reel applikation. Et af sine standout-funktioner er evnen til at sende klikbare designs til din telefon via SMS, hvilket understreger vigtigheden af at kunne teste dine designs selv i den rigtige sammenhæng.
Notism
Notism er et af de bedste værktøjer, kreative teams bruger til at fremskynde deres arbejdsproces. Dette er et design- og video-samarbejde platform. Det hjælper kreative fagfolk med at dele deres projekt og modtage feedback via skitser og noter. Notism gør det også muligt at oprette forskellige versioner af en skærm. Ved at skifte let mellem forskellige skærme kan du få et bedre overblik over projektets udvikling.
Fase 3: Design og produktion
I denne fase skal du sørge for at designeren arbejder sammen med programmøren for at sikre implementeringen af sammenhængende designelementer.
Når klienten godkender designudkastene, arbejder designeren og grafiklaget på udseendet og følelsen af hjemmesiden. Komprimering, gennemsigtighed, effektiv brug af farve og design kombineres for at skabe effektiv webgrafik.
Produktionsfasen er et punkt, hvor den aktuelle hjemmeside oprettes. Efter at webstedets design og layout er gennemført, går webstedet ind i den tekniske del af arbejdet. Her vil du tage alle de enkelte grafiske elementer fra prototypen og bruge dem til at oprette det faktiske funktionelle site.
Github
Din kode ændres en gang, to gange og sandsynligvis meget mere end det. Github giver dig mulighed for at arbejde effektivt med forskellige versioner af din hjemmeside. Værktøjet skinner virkelig, når du arbejder sammen med et team af udviklere. Dette er kodesamarbejde på sit bedste.
CodePen
Denne er dejlig. Det er en online editor for alle dine HTML, CSS og JS behov. Det kombinerer nemt med Github og er selvfølgelig samarbejdsvilligt. Tanken er at kunne teste stykker kode og finde en ordentlig løsning uden at ødelægge resten af koden.
Fase 4: Testing, indsamling af feedback og fastsættelse af fejl
Intet projekt er nogensinde virkelig uden fejl. Og selv om testning er noget, der er gjort i hele udviklingsprocessen, vil der altid være fejl tilbage. Og vi taler ikke kun om software bugs. Selv et design kan være buggy.
Så lige nu er det vigtigt at starte testningen som skør. Tidlig fejlfinding sparer meget tid og kræfter. Det er afgørende for alle, der deltager i oprettelsen af webstedet, at være involveret i testning. Testning bør dog være en smidig proces. Når du har lanceret webstedet eller er ved at starte det, vil mange mennesker begynde at bruge det og give feedback på webstedet.
Og selvom du lægger alt i at gøre for at teste webstedet, vil du have savnet et par fejl eller nye vil dukke op over tid. Det er afgørende, at du får information om fejl og problemer så hurtigt som muligt. Hvis du kan få dine brugere til at rapportere disse til dig, er du gyldig.
Usersnap
(Fuld offentliggørelse: Jeg arbejder for Usersnap.) Vi byggede Usersnap som en visuel fejl tracking og feedback værktøj, der letter arbejdet med software test. Det gør det muligt for kunder, besøgende og kollegaer at rapportere fejl, ændre anmodninger eller blot tilbagemelding på din hjemmeside. Også til manuel website-test er Usersnap et sikkert bet, da det øger din test-arbejdsgang gennem brugervenlige værktøjer.
Så for at genskabe ...
Design projekter kræver mange mennesker at arbejde sammen. Konstant feedback er en af de vigtigste dele af leveringen af et projekt som krævet af kunden og inden for de angivne tidsplaner. Med alt dette rod og det faktum, at hjemmesider bliver mere komplekse hver dag, gør onlineværktøjer det nemt at gennemføre arbejdet blandt alle involverede og få øjeblikkelig feedback fra dem.
Integrering af disse værktøjer til en solid arbejdsgang hjælper dig virkelig med at finde ud af, hvor du skal være i et allerede konkurrencedygtigt felt.