Praktyczny przewodnik po Web Design Workflow
Jako projektant stron internetowych, który jest częścią większego zespołu zajmującego się tworzeniem stron internetowych, często trzeba żonglować wieloma zadaniami jednocześnie.
Po utworzeniu pierwszych projektów roboczych dla klienta i oczekujących na tę pierwszą informację, prawdopodobnie jesteś bardzo podekscytowany tym, jak twoja praca zostanie zauważona przez klienta. Przy tak wielu rzeczach, które można monitorować w ściśle określonych ramach czasowych, łatwo można przytłoczyć złożoność projektu. Projektowanie strony internetowej lub aplikacji wiąże się z wieloma krokami. Te kroki nieznacznie różnią się w zależności od osoby, ale podstawowy przepływ pracy pozostaje ten sam.
Dzięki dobrej organizacji workflow oraz kilku narzędziom i oprogramowaniu, łatwo utrzymasz piłkę w ruchu i unikniesz długich cykli zwrotnych.
Oto praktyczny przewodnik po przepływie pracy, który można wykorzystać do zwiększenia produktywności zespołu.
Faza przygotowania: zarządzanie oczekiwaniami
Niezależnie od tego, czy po prostu utrzymujesz istniejącą stronę internetową, czy projektujesz nową stronę od podstaw, zarówno Ty, jak i Twój klient jesteście zobowiązani do wzajemnego zarządzania swoimi oczekiwaniami.
Podczas gdy Twoim głównym obowiązkiem jest dokładne zrozumienie wymagań projektu, klient jest odpowiedzialny za zrozumienie, w jaki sposób każdy wybrany wybór wpływa na zakres i budżet projektu, z Twoją pomocą.
Poinformuj klienta o wymaganej technologii, wymaganym budżecie i czasie potrzebnym na ukończenie projektu. Podejście do projektu w sposób zorganizowany pozwoli zaoszczędzić czas, wysiłek i budżet.
Faza 1: Definiowanie celów witryny
Jest to prawdopodobnie najważniejsza faza każdego projektu, ponieważ definiujesz cele, konfigurujesz ogólną strukturę, decydujesz o zawartości i przypisujesz role oraz różne rezultaty w całym projekcie. Tworząc odpowiednie planowanie od samego początku, oszczędzasz sobie później wiele smutku.
Tutaj pracujesz z klientem, aby ustalić harmonogram, budżet, oś czasu, potrzeby techniczne, styl wizualny i strukturę treści dla docelowych odbiorców.
Kiedy zarządzamy oczekiwaniami i zaczynamy z projektem, chciałbym polecić korzystanie z chudego i łatwego w obsłudze zarządzania projektami, aby śledzić określone cele, budżety, zadania i harmonogramy.
Trello
Trello jest dobrze znanym i łatwym w użyciu narzędziem do zarządzania projektami. Pozwala tworzyć różne tablice dla różnych projektów. Dzięki Trello możesz uzyskać szybki przegląd zadań bieżących i zaległości.
Asana
Asana jest świetnym zadaniem i narzędziem do śledzenia zadań. Możesz nawet współpracować ze współpracownikami i klientami w ramach Asany, co pozwala zachować przejrzystość projektu i aktualność wszystkich osób.
Basecamp
Innym znanym, a zarazem doskonałym narzędziem do zarządzania projektami jest Basecamp . Podobnie jak w przypadku wspomnianych wyżej narzędzi, zasadniczo pozwala on Tobie i Twojemu zespołowi śledzić każdy dostarczony projekt i umożliwia śledzenie.
Faza 2: Opracowanie struktury witryny i zabrudzenie rąk
Struktura witryny stanowi szkielet strony internetowej. Działa jako przewodnik odniesienia dla zespołu podczas całego czasu trwania projektu. Użyj schematów blokowych, aby pokazać przepływ struktury.
Mapa witryny: tworzenie mapy witryny ma kluczowe znaczenie dla zrozumienia organizacji treści. Ważne jest, aby aktualizować mapę witryny po każdej zmianie. Jeśli tego nie zrobisz, wszystko stanie się brudne.
Model szkieletowy: treść witryny musi zostać naprawiona przed wprowadzeniem projektu i grafiki.
Modele szkieletowe to szkice o niskiej wierności witryny lub aplikacji mobilnej. Model szkieletowy służy do tworzenia symboli zastępczych dla treści, ustalania priorytetów dla elementów na stronie oraz do dokumentowania wymagań. Staje się to bardzo ważne w następnej fazie.
Balsamiq
Balsamiq to graficzne narzędzie do wireframowania, które pomaga projektantowi w tworzeniu wielu projektów, a następnie układanie gotowych widgetów w edytorze typu "przeciągnij i upuść", aby zespół mógł wyświetlać i sugerować zmiany jednocześnie.
Moqups
Moqups jest łatwy w użyciu, ma mnóstwo funkcji przeciągania i upuszczania i nie wymaga wtyczki do działania przeglądarki. Możesz łatwo zorganizować prezentację projektu dla swojego klienta za pomocą tego narzędzia.
Invision
Invision pozwala przesyłać projekty robocze i tworzyć interakcje za pomocą punktów aktywnych, tak jak w przypadku każdej prawdziwej aplikacji. Jedną z jego wyróżniających cech jest możliwość wysyłania klikalnych projektów do telefonu za pośrednictwem wiadomości SMS, co podkreśla znaczenie możliwości przetestowania własnych projektów we właściwym kontekście.
Notizm
Notizm jest jednym z najlepszych zespołów kreatywnych narzędzi, które przyspieszają ich pracę. Jest to platforma do współpracy w zakresie projektowania i wideo. Pomaga twórczym profesjonalistom dzielić się swoim projektem i otrzymywać informacje zwrotne poprzez szkice i notatki. Notizm pozwala także tworzyć różne wersje ekranu. Łatwo przełączając się między różnymi ekranami, możesz uzyskać lepszy obraz rozwoju swojego projektu.
Faza 3: Projektowanie i produkcja
W tej fazie upewnij się, że projektant współpracuje z programistą, aby zapewnić wdrożenie spójnych elementów projektu.
Po zatwierdzeniu projektów przez klienta, projektant i zespół graficzny pracują nad wyglądem i stylem strony internetowej. Kompresja, przejrzystość, efektywne wykorzystanie koloru i projektu łączą się, tworząc skuteczną grafikę internetową.
Etap produkcji to punkt, w którym tworzona jest właściwa strona internetowa. Po zakończeniu projektowania i układu strony, witryna przechodzi do części inżynierskiej pracy. Tutaj weźmiesz wszystkie poszczególne elementy graficzne z prototypu i wykorzystasz je do stworzenia rzeczywistej, funkcjonalnej strony.
Github
Twój kod zmieni się raz, dwa razy i prawdopodobnie o wiele więcej. Github pozwala efektywnie pracować z różnymi wersjami Twojej witryny. Narzędzie naprawdę świeci, gdy współpracujesz z zespołem programistów. To jest współpraca kodowa w najlepszym wydaniu.
CodePen
Ten jest cudowny. To jest edytor online dla wszystkich Twoich potrzeb HTML, CSS i JS. Łączy się łatwo z Github i oczywiście współpracuje. Chodzi o to, aby móc przetestować fragmenty kodu i znaleźć odpowiednie rozwiązanie, nie psując reszty kodu.
Faza 4: Testowanie, zbieranie informacji zwrotnych i usuwanie błędów
Żaden projekt nie jest tak naprawdę bez wad. I chociaż testowanie jest czymś, co zostało zrobione podczas całego procesu programowania, zawsze pozostaną jakieś błędy. I nie mówimy tylko o błędach oprogramowania. Nawet projekt może być błędny.
W tej chwili ważne jest, aby rozpocząć testowanie jak szalony. Wczesne rozwiązywanie problemów oszczędza dużo czasu i wysiłku. Ważne jest, aby wszystkie osoby biorące udział w tworzeniu witryny były zaangażowane w testowanie. Jednak testowanie powinno być procesem zwinnym. Po uruchomieniu witryny lub jej uruchomieniu wiele osób zacznie jej używać i przekaże opinie na jej temat.
I nawet jeśli dołożysz wszelkich starań, aby przetestować tę stronę, stracisz kilka błędów lub nowe z czasem pojawią się. Ważne jest, aby jak najszybciej uzyskać informacje o błędach i problemach. Jeśli możesz zmusić użytkowników do zgłoszenia ci tego, jesteś złoty.
Usersnap
(Pełne ujawnienie: pracuję dla Usersnap.) Zbudowaliśmy Usersnap jako wizualne narzędzie do śledzenia błędów i informacji zwrotnej ułatwiające testowanie oprogramowania. Umożliwia klientom, odwiedzającym witrynę i współpracownikom zgłaszanie błędów, zmian w żądaniach lub po prostu informacji zwrotnych na swojej stronie internetowej. Również dla ręcznego testowania strony, Usersnap to bezpieczny zakład, ponieważ przyspiesza to proces testowania dzięki łatwym w użyciu narzędziom.
Aby podsumować ...
Projekty projektowe wymagają współpracy wielu osób. Stała informacja zwrotna jest jedną z najważniejszych części dostarczania projektu zgodnie z żądaniem klienta i w określonych ramach czasowych. Z powodu tego bałaganu i faktu, że strony internetowe stają się coraz bardziej skomplikowane każdego dnia, narzędzia online ułatwiają ukończenie pracy wśród wszystkich zaangażowanych osób i natychmiastową informację zwrotną od nich.
Zintegrowanie tych narzędzi w solidny obieg pracy pozwala naprawdę dotrzeć do miejsca, w którym jest już konkurencyjna.
Przedstawiony obraz, obraz pracy zespołowej przez Shutterstock.