Złe nawyki z czasów, gdy zdobywaliśmy nowe pomysły na projekty i dokumenty wymagań użytkowników od naszych klientów, być może szkicujemy kilka pomysłów i wskakujemy do intrygującego projektowania w Photoshopie.

Naszym uzasadnieniem dla tej metodologii było natychmiastowe uruchomienie bramy projektowej, aby dać czas na rewizję.

Po pewnym czasie zdaliśmy sobie sprawę, że spędzamy dużo czasu projektując, dlaczego? Rewizje trwały cały czas. Wersje były skomplikowane; musieliśmy dostosować układy, grafikę i typografię. Wszystko było frustrujące, katastrofalne dla terminowości projektów, niepokojące dla klientów i męczące dla nas. Minęło trochę czasu, zanim zdaliśmy sobie sprawę, że potrzebujemy innego podejścia. Postanowiliśmy wrócić do początkowego procesu „Square One", który zignorowaliśmy wcześniej. Zaczęliśmy od makiet Gray-boxes, włączając go do naszego procesu projektowego, następnie przeszliśmy do innego procesu i dodaliśmy go do procesu projektowego. Pod koniec model spadał na miejsce dzięki „Wire-framingowi”, co zaoszczędziło nasz czas i pomógł nam wcześniej rozwiązać problemy, dlatego wybieram wire-frame jako „pierwszą bramę” w procesie projektowania.

Schematyczne projekty doświadczeń użytkownika

Kto wie, na najwcześniejszym etapie możesz rozpoznać potencjalne wyzwania związane z użytecznością w swoich projektach. Czasami świetna koncepcja projektu z surowymi wymaganiami użytkownika (URS), podczas początkowego procesu wydają się pasować. Znów gorsze rzeczy dzieją się, gdy zaczynamy układać plany dokumentów, „Co się stało?” zignorowaliśmy model szkieletowy, którego naszkicowanie zajmuje tylko kilka minut niż kolorowy Photoshop. Lepiej zacząć dostosowywać wcześniej niż później.

Wire-framing jako narzędzie do zarządzania czasem

Zarządzanie czasem jest ważną techniką każdego udanego projektu, jeśli projekt ma napięty harmonogram; możesz pomyśleć „po co marnować czas na tworzenie szkieletów, więc lepiej przejdę do kolorowego Photoshopa”. Początkowo popełniliśmy ten błąd, ale zamiast tego zmieniliśmy całą koncepcję, co było czasochłonne i stratą zasobów. Weryfikacja szarych pudełek i szkiców jest znacznie łatwiejsza niż przeglądanie kolorowych projektów składających się z kilku złożonych elementów.

Model szkieletowy służy do stworzenia rzeczywistego i poprawnego wymiaru strony. Po zatwierdzeniu przez klienta wystarczy nam graficzny środek poprawiający jego wygląd. Sztuczka polega na tym, że jeśli szkielety, szkice i szare pola są w porządku, nie będziemy mieli czasu na poprawki. Zamiast tego przejdziemy do następnej „wizualnej” części procesu.

Ramki druciane do łączenia klientów

Układ strony z kolorami czasami odwraca uwagę naszych klientów; może klient nie znosi koloru „fioletowego” emocje klienta mają trudności ze skupieniem się na planie. Ich opinie mogą być negatywne ze względu na ich uczucia. Mogą w końcu poprosić o „Zacznij od nowa”, projekty mogą być w porządku, ale jedyną rzeczą, która irytuje klienta, jest „fioletowy” kolor. Dlatego używanie szarych pudełek i szkiców jest skutecznym sposobem, ponieważ wyeliminuje elementy rozpraszające uwagę.

Model szkieletowy pomoże uzyskać informacje zwrotne dotyczące rozmiaru, układu bez skupiania się klienta wyłącznie na wyglądzie. Korzystanie z modelu szkieletowego pomaga nam również dowiedzieć się więcej o kliencie, co mu się podoba? Style, typografia itp. Prezentacja w ramkach jest jak czas wiązania, ich opinie i interakcje sprawiają, że wiesz o nich i ich projektach oraz czego możesz się spodziewać w przyszłych fazach projektu? Kiedy szkicujesz wstępną wersję roboczą na papierze, klient będzie komentował ikony, przyciski, czcionki itp. W końcu powie, że woli większe przyciski niż mniejsze itp. W końcu projektant uczy się od klientów i zaczyna wypatrywać wzorców informacji zwrotnych i uczyć się, posiadanie wiedzy może zaoszczędzić czas, energię i zasoby.

7 fascynujących rzeczy na temat modeli szkieletowych

1 Zwiększa doświadczenie w pracy zespołowej

Proces wire-framing łączy różne grupy ludzi o różnych umiejętnościach; każdy jest częścią procesu projektowego. Kierownicy projektów, projektanci, programiści – wszyscy spotykają się, aby osiągnąć cel. Jest to cenne, ponieważ usprawnia pracę zespołową i sprawia, że członkowie zespołu lepiej się rozumieją. Dzięki modelowi „wodospadu” projekty można faktycznie zepsuć.

2 Przejrzysta komunikacja

Płynny przepływ komunikacji, cierpieliśmy, gdy niektórzy członkowie zespołu, tacy jak programiści, nie byli włączani do dyskusji nad projektem. Dzięki włączeniu każdej osoby w proces wrabiania drutu problem jest rozwiązany. Deweloper może wcześniej wykryć problem, który może zostać przeoczony w wiadomościach e-mail i na czacie. Z drugiej strony specyfikacje są eleganckie i piękne, ale trudniejsze do wizualizacji.

3 Angażuj klientów

Model szkieletowy pomoże uzyskać informacje zwrotne dotyczące rozmiaru, układu bez skupiania się klienta wyłącznie na wyglądzie. Korzystanie z modelu szkieletowego pomaga nam również dowiedzieć się więcej o kliencie, co mu się podoba? Style, typografia itp. Prezentacja w ramkach jest jak czas wiązania, ich opinie i interakcje sprawiają, że wiesz o nich i ich projektach oraz czego możesz się spodziewać w przyszłych fazach projektu? Kiedy szkicujesz szkic na papierze, klient będzie komentował ikony, przyciski, czcionki itp. W końcu powie, że woli większe przyciski niż mniejsze itp. W końcu projektant uczy się od klientów i zaczyna obserwować wzorców informacji zwrotnych i uczyć się, posiadanie wiedzy może zaoszczędzić czas, energię i zasoby.

4 różne podejścia

Burza mózgów pozwala ludziom wymyślić różne sposoby radzenia sobie z projektami. Są łatwe do wyprodukowania i szkicowania, zwłaszcza na papierze, wystarczy ołówek i kartka papieru, a my rozwiązujemy problemy z różnych punktów widzenia i rysujemy je na kartce papieru. Możesz łączyć i usuwać zadania, aż będziesz mieć dwa lub cztery, które mają sens.

Różne podejścia obejmują podejście techniczne — nowe i popularne funkcje technologiczne, doświadczenia użytkowników i testy użyteczności, w jaki sposób użytkownicy zamierzają szybko osiągnąć cel i zadanie, zanim się znudzą, co prowadzi do przerwania zadania, ponownie podejście środowiskowe — kim są interesariusze? W jakie pola celujemy? Jakie rodzaje funkcji są ważne, które można łatwo dopasować do konkretnego interesariusza i ukierunkowanego obszaru?

5 Podstawa do testowania

Dzięki 3 lub 5 prototypom możesz przetestować szkic projektu z prawdziwymi użytkownikami. Istnieje przekonanie, że możemy testować tylko przy użyciu gotowego prototypu HTML, ale to nieprawda. Również ręcznie rysowane szkielety mogą być używane do testowania. Możesz zapytać użytkownika o sugestie dotyczące przycisków, które chciałby kliknąć; mogą również uzyskać informacje zwrotne na temat nazewnictwa tagów iw końcu mogą pomóc sprawdzić, czy mają odpowiednią hierarchię wizualną. Testowanie za pomocą modelu szkieletowego pomaga wcześniej identyfikować problemy.

6 Szybsze wykonanie projektu

Stworzenie prototypu projektu opartego na modelu szkieletowym zajmuje trochę czasu i pieniędzy, ponieważ w proces tworzenia szkieletu zaangażowane były różne grupy ludzi. Dlatego nieprzewidziane błędy, które mogą spowodować poprawki, są rozwiązywane przed prawdziwym projektem. Ponownie układ projektu został obejrzany przez klientów, więc ostateczne podpisanie projektu jest zakończone. Skraca to czas dla wielu koncepcji.

Druciane kadrowanie w Photoshopie

Szare pudełka i szkice z photoshopem.

Krok 1: Zbierz dodatkowe wymagania od klientów, a następnie „odpal”, aby pokolorować pełnego Photoshopa i rozpocząć tworzenie ramek.

Krok 2: Utwórz dokument w oparciu o system siatek 960 (szerokość 1100 pikseli i wysokość 760), możesz się tego nauczyć w „Ustawianie siatki w Photoshopie”.

Krok 3: Narzędzie Wiadro z farbą (G) służy do wypełnienia tła jasnoszarym kolorem, aby wyjaśnić, że pojawi się kolor tła lub obraz.

Krok 4: Wybierz narzędzie Prostokąt z paska narzędzi i narysuj pole symbolizujące obszar zawartości. Używamy systemu siatki 960; moje narysowane pudełko będzie miało szerokość 940 pikseli. Ustaw kolor pierwszego planu na biały za pomocą „Narzędzia Wiadro z farbą”, aby pojawił się na naszym szarym tle.

Krok 5: Aby znacznie przyspieszyć proces, po prostu (wpisz literę D) ustaw pierwszy plan na czarny lub dowolny kolor, który Ci odpowiada, a tło na biały lub dowolny kolor. Następnie narysuj czarne pola reprezentujące obszary zawartości. Ponownie możesz zmienić krycie tła, aby wyglądało na szare lub w dowolnym kolorze.

Krok 6: Wewnątrz siatki dodaj prostokąt, który będzie reprezentował cokolwiek. W tym przypadku „Przycisk logowania”, wpisz wartość krycia („30″), aby zmniejszyć krycie prostokąta („30″) po narysowaniu prostokąta. Możesz dodać tekst za pomocą narzędzia Tekst (T) na pasku narzędzi tekstowych, aby dodać tekst „LOGIN” nad polem. Dodaj kolejny prostokąt, aby utworzyć obszar nawigacji, ponownie zmniejsz wartość krycia, aby był szary.

Krok 7: Dodaj prostokąty, utwórz obszary kolumn treści. Użyj układu dwukolumnowego z nieco większą kolumną głównej treści i mniejszą kolumną na obraz strony głównej. Ustaw krycie kolumn na 10%, a także dodaj kolejny prostokąt reprezentujący stopkę u dołu strony.

Strona 8: W obszarze zawartości dodaj fałszywe teksty za pomocą polecenia Photoshopa Tekst > Wklej Lorem Ipsum.

Inne aplikacje

Inna aplikacja do szkieletów szkieletowych, która może być używana przez projektantów niebędących grafikami do tworzenia interaktywnych i pięknych szkieletów.

OmniGraffle

Jest jak Micro-Visio, ma bardzo ładne szablony, których można używać do projektowania high-tech, a funkcje są niesamowite. To jest najlepszy.

Mock Ninja

Mój ulubiony, BEZPŁATNY w użyciu, ma bardzo fajne funkcje i szablony, które można wykorzystać do zbudowania interaktywnej koncepcji projektu. Pozwala użytkownikom pracować w trybie offline i online.

Śliczne wykresy

To jest dobre dla początkujących, jest BEZPŁATNE, a interfejsy są łatwe do zrozumienia.

Balsamik

Szybki sposób na przekazanie koncepcji projektowych klientowi, ma bezpłatną wersję demonstracyjną, która pozwala użytkownikom zapisać produkt końcowy. Posiada wszystkie elementy potrzebne do szkicowania oraz niepowtarzalny wygląd odręcznego rysunku.

Rysunek Dysku Google

Może być używany do makiet ekranowych, nie jest to całkowicie typ ramek drucianych, ale ma takie funkcje, jak dobre narzędzie do współpracy, szybkie, bezpłatne i łatwe w użyciu.

Gliffy

Gliffy Jest łatwiejszy w użyciu, bardziej elegancki i oferuje funkcje diagramów, takie jak schematy blokowe i plany, ma diagramy Venna z procesami sieciowymi i UML, który ma eksport do SVG, PNG i JPEG.

Lumzy

Jest to aplikacja flash, zapewnia platformę współpracy, jest bezpłatna, szybka i wreszcie ma różne rodzaje elementów sterujących, które są łatwe w użyciu.

Moqupy

Darmowy, szybki i łatwy w użyciu, nie potrzebuję wtyczki do przeglądarki, połączenie ekranu i przycisku jest wykonane bezbłędnie, więc osoba może opublikować demonstrację dla klientów do obejrzenia i użycia. Eksport obrazów zgodnie ze specyfikacją jest dozwolony. Oprócz tego w Moqups zintegrowano standardowe HTML5 i JavaScript.

Źródło nagrywania: instantshift.com

AffiAi