CodeFusion

Warsztat CF cz. 1 – wireframing

29.05.2014

Dziś chcielibyśmy uchylić Wam rąbka tajemnicy naszego rzemiosła. Pewnie jak wielu „nieprogramistów” zastanawiacie się, co jest tak fascynującego w ślęczeniu godzinami przed ekranem komputera i programowaniu? To „tworzenie” jest podstawą naszej pracy. Wbrew pozorom nasze „ślęczenie” to bardzo twórczy proces. Nie ogranicza on się bynajmniej tylko i wyłącznie do pisania linijka po linijce kodu programu. Czasami robimy coś znacznie bardziej… wystrzałowego. Dziś pokażemy Wam na czym polega makietowanie aplikacji (z ang. wireframing) i jak robimy to w CODEFUSION!

W procesie wireframingu/makietowania tworzymy model działającej aplikacji. Taki model to swego rodzaju makieta działającego programu w formie rysunków. Rysunki te przedstawiają poszczególne ekrany przyszłej aplikacji. Bardzo często model wzbogacony jest o elementy interaktywne, takie jak, działające przyciski służące do nawigacji pomiędzy okami aplikacji. Makietę taką można stworzyć za pomocą kartki papieru i ołówka, tablicy sucho ścieralnej i pisaka lub też wyspecjalizowanego oprogramowania. Gotowa makieta stanowi świetną podstawę do dyskusji z klientem. Dzięki temu jeszcze przed przystąpieniem do programowania jesteśmy w stanie uzyskać informację zwrotną na temat powstającej aplikacji. Stosunkowo tanio możemy zrealizować częstą potrzebę klienta parafrazowaną w naszej branży mniej więcej tak: „pokaż mi, a powiem ci, czy jest dobrze”. Pokazując makietę otrzymamy feedback równie dobry, jak pokazując pierwszą wersję aplikacji, a nakład pracy potrzebny na stworzenie makiety jest nieporównywalny z nakładem pracy potrzebnym do jej zaprogramowania.

Niedawno uruchomiliśmy wersję 2.0 naszego kalkulatora leasingowego ExCalc. Wersja ta działa już w Niemczech u naszego partnera C.I.C. Software GmbH i niedługo zadebiutuje na rynku polskim i międzynarodowym. Wersja ta została wzbogacona o elementy B2B i przystosowana dodatkowo do obsługi dealerów oraz pracowników firm leasingowych. W związku z tymi zmianami musieliśmy odkurzyć makiety pierwszej wersji ExCalca przeznaczonej dla klientów firm leasingowych. Poniżej przedstawiamy kilka zrzutów ekranów. W głębi okienko z Microsoft SketchFlow, którego używamy do makietowania naszych aplikacji. Dzięki niemu jesteśmy w stanie dać naszym klientom dostęp zdalny (poprzez okno przeglądarki) do makiety aplikacji. Mogą oni nawigując pomiędzy oknami aplikacji przekazywać nam swoje uwagi bezpośrednio rysując lub pisząc „na makiecie”. Na poniższych obrazkach widać nałożone na okno SketchFlow zrzuty ekranu z ExCalc’a na systemie Android. Pewne szczegóły uległy zmianie, ale plan wykonany został dość precyzyjnie.

ExCalc Wireframe Sketchflow 1
ExCalc Wireframe Sketchflow 2
ExCalc Wireframe Sketchflow 3
ExCalc Wireframe Sketchflow 4
ExCalc Wireframe Sketchflow 5
«
»
strzałka do góry