Używanie szkieletów do usprawnienia procesu rozwoju

Tworzenie modelu krawędziowego jest jednym z pierwszych kroków, które powinieneś wykonać przed zaprojektowaniem strony internetowej.

Model szkieletowy ułatwia organizowanie i upraszczanie elementów i treści na stronie internetowej oraz jest niezbędnym narzędziem w procesie programowania.

Szyna to w zasadzie wizualna reprezentacja układu treści w projekcie strony internetowej .

Szkielet działa jako prototyp, który pokazuje rozmieszczenie elementów strony, takich jak nagłówek, stopka, treść, paski boczne i nawigacja.

Określa również rozmieszczenie elementów w tych obszarach zawartości. Jeśli chcesz stworzyć witrynę, która dokładnie odpowiada wymaganiom klienta i zminimalizuje liczbę poprawek do projektu, funkcja wireframing będzie Cię śledzić.

Korzyści z Wireframing

Tworzenie modelu krawędziowego daje klientowi, programistom i projektantowi okazję do krytycznego spojrzenia na strukturę strony internetowej i pozwala na łatwe wprowadzanie zmian na samym początku procesu.

Wireframing przynosi następujące kluczowe korzyści:

Daje klientowi wczesny, dokładny widok projektu strony (lub przeprojektowania).
Może zainspirować projektanta, co daje bardziej płynny proces twórczy.
Daje programiście jasny obraz elementów, które będą potrzebne do kodowania.
Sprawia, że wezwanie do działania na każdej stronie jest jasne.
Jest łatwy w adaptacji i może pokazać układ wielu sekcji witryny.

Narzędzia do projektowania szkieletu

Masz wiele narzędzi do wyboru podczas tworzenia modelu krawędziowego:

Ręczne szkicowanie na papierze jest zawsze dobrym punktem wyjścia dla każdego projektanta. Zapewnia szybki i łatwy sposób skupienia się i organizowania. Jeśli jesteś bardzo precyzyjny przy szkicowaniu, możesz nawet użyć tego jako ostatecznego szkieletu. (Patrz rysunek 1.)
Schemat blokowy lub oprogramowanie do mapowania umysłu , takie jak Visio . Te opcje oprogramowania są dostarczane z wstępnie pakowanymi elementami, które pozwalają w łatwy sposób tworzyć reprezentacje schematu blokowego twojego modelu szkieletowego.
Oprogramowanie do prototypowania stron internetowych , takie jak Gliffy lub Balsamiq . Narzędzia takie jak te zostały stworzone specjalnie w celu generowania szkieletów i mają łatwe w użyciu funkcje prototypowania.
Oprogramowanie graficzne , takie jak Photoshop lub Illustrator. Zaletą korzystania z tych narzędzi jest to, że szkielet można następnie przekształcić bezpośrednio w graficzną makietę projektu strony internetowej; jednak wadą jest to, że będziesz musiał stworzyć wszystkie elementy ręcznie.
(X) Wireframe HTML są prawie jak same witryny. Przed zastosowaniem stylów można ułożyć szkielet z kodem lub stworzyć w pełni stylowy układ o wysokiej wierności, który wygląda jak ostateczny projekt. (Patrz rysunek 2.)

Ostatecznie programista lub projektant powinien wybrać preferowane przez siebie narzędzie. Osobiście używam Photoshopa, ponieważ podoba mi się sposób, w jaki organizuje proces i jak łatwo mogę przekonwertować plik na makietę.

Model szkieletowy

Poziom szczegółowości w modelu krawędziowym zależy od kilku czynników, w tym: od tego, jak duży kierunek i treść podał klient, jak złożona jest zawartość, jak daleko się znajdujesz i ile detali chcesz uwzględnić .

Oto przykłady szkieletów, które zostały utworzone przy użyciu różnych narzędzi i wykazują różne poziomy szczegółowości i koloru:

Rysunek 1: Ten prosty szkic krawędziowy dla strony Coastal Capital Partners (obecnie przemianowanej na Broad Reach Retail Partners) został wykorzystany do stworzenia makiet graficznych i ostatecznie ostatecznego projektu. Przez Mike Rohde .

Rysunek 2: Model szkieletowy HTML o bardzo niskiej wierności. Przydatne w celu zademonstrowania wyglądu strony przed dodaniem stylizacji. Bardzo pomocny dla użytkowników niedowidzących.

Rysunek 3: Model szkieletowy o niskiej wierności dla Społeczność Embrace Pet , autorstwa Jesse Bennett-Chamberlain z 31 Trzeciego .

Rysunek 4: Wstępne makieta zbudowanego narzędzia do wideokonferencji Tiddlywiki do wykorzystania w Le Web 3. Notatki do niego dołączone znajdują się pod adresem tiddleleweb.tiddlyspot.com . Model szkieletowy wg Phil Hawksworth.

Rysunek 5: Ten oparty jest na zaawansowanym wykorzystaniu systemu publikowania blogów (WordPress). Przez Mattheiu Mingassson lub Activeside Internet Strategies and Consulting .

Rysunek 6: Model szkieletowy dla Społeczność Embrace Pet , autorstwa Jesse Bennett-Chamberlain z 31 Trzeciego .

Rysunek 7: Model szkieletowy z kolorami i obrazami. Strona szkieletowa autora według Bokhandel .

Rysunek 8: Kolejna siatka z kolorem. Mattheiu Mingassson z Strategie i doradztwo internetowe Activeside .

Najlepsze praktyki

Aby uzyskać optymalne wyniki, należy wziąć pod uwagę kilka ważnych kwestii podczas opracowywania modelu krawędziowego:

Prostota. Kluczem jest utrzymanie tego na tyle prostego, aby było jasne dla klienta i być elastyczne dla projektanta, ale wystarczająco szczegółowe, aby kierować programistą. Jak wspomniano, możesz utworzyć szkielet o wysokiej wierności, ale zrobienie tego na wczesnym etapie procesu programowania może być mylące dla klienta, który może pomylić go z ostatecznym projektem.
Pracuj w skali szarości. Podczas tworzenia elementów dla modelu krawędziowego najlepiej jest pracować w skali szarości, aby można było skupić się na układzie bez rozpraszania się przez projekt. Jeśli dostałeś logo w pełnym kolorze, przekonwertuj je również na skalę szarości. Aby rozróżnić i kategoryzować różne elementy, pokaż kształty i kontury w różnych odcieniach szarości.
Użyj makiet w tandemie z mapą witryny. Szyna to wizualna reprezentacja dobrej mapy witryny, a nie zamiennik. Mapa witryny jest użytecznym narzędziem dla każdej witryny i na pewno będzie pomocna w procesie tworzenia.
Skoncentruj się na pożądanym wyniku. Czytelne zrozumienie, w jaki sposób klient chce, aby użytkownicy odpowiedzieli na stronę przed utworzeniem modelu krawędziowego. Wezwania do działania powinny być bardzo jasne, po prostu patrząc na szkielet.
Utwórz pełnowymiarowy szkielet, jeśli jest on przeznaczony do witryny. Zapewni to najdokładniejszą reprezentację rzeczywistej strony.
Zaplanuj elementy, zabezpieczając zawartość z góry. W najlepszym przypadku Twój klient dostarczy Ci już elementy, które powinny pojawić się na każdej stronie, takie jak logo, reklamy, odtwarzacze Flash lub wideo, funkcje, sekcje nawigacji i elementy paska bocznego, nagłówka i stopki. Jeśli nie masz jeszcze tych informacji, skontaktuj się ze swoim klientem i uzyskaj (lub utwórz) mapę witryny. Jeśli projektujesz już istniejące elementy, możesz je zebrać z dokładnej recenzji witryny. W tym scenariuszu pamiętaj, aby najpierw potwierdzić klientowi, że nie będziesz musiał dodawać ani usuwać elementów, ponieważ brak jasnego zrozumienia ich oczekiwań spowolni proces.

Skala szarości kontra kolor

Podczas tworzenia szkieletu praca w skali szarości pomaga utrzymać skupienie na podstawowej funkcji procesu , czyli sfinalizowaniu układu, a nie projektu (patrz rysunek 3). Kolejne ryzyko związane z kolorami polega na tym, że klient może pomylić szkielet dla ostatecznego makiety.

Kolor może się jednak okazać przydatny, gdy wyświetlana jest lokalizacja każdego wezwania do działania. Ponieważ jedna strona może zawierać kilka wezwań do działania, ważna jest ich hierarchizacja. Model szkieletowy może pomóc w określeniu, które wezwanie do działania najpierw przyciągnie uwagę użytkownika.

Ostatnio pracowałem nad projektem, który miał bardzo żywe logo, które w tym przypadku było głównym wezwaniem do działania, ponieważ reprezentowało nowo powstałe czasopismo.

Kiedy używasz kolorów, możesz łatwiej stwierdzić, czy pewne elementy przytłaczają główne wezwanie do działania. Proces ten nadal należy do sfery szkieletowej, a nie do makiety, ponieważ lokalizacje elementów wciąż są określane.

Kolor może stopniowo zostać dodany do modelu krawędziowego w miarę postępu projektu , co jest bardziej wydajne niż ruszanie się z makietami, zanim położenie elementów zostanie zablokowane. Dzięki temu oprogramowanie graficzne może pomóc przejść bezpośrednio do makiety, gdy będzie to gotowe.

Czego unikać

Podobnie jak w innych aspektach procesu rozwoju, szkielet może mieć swoje pułapki, jeśli nie zostanie wykonany prawidłowo. Oto kilka wskazówek, których należy unikać, aby uzyskać jak najskuteczniejsze wyniki:

Za dużo dzieje się na stronie. Pozostaw wystarczającą ilość wolnego miejsca, aby projekt nie wydawał się zbyt zajęty lub zagracony.
Nacisk na kolor i wygląd. Wireframing służy do decydowania o układzie i lokalizacji elementów. Nawet jeśli szkielet może wpłynąć na projekt, dodanie grafiki i koloru prawdopodobnie rozpraszałoby jego cel.
Za dużo szczegółów. Zawsze możesz dodać więcej szczegółów później, ale jeśli na początku wprowadzisz zbyt wiele, klient może pomylić szkielet dla końcowego makiety.

Jeśli chcesz dowiedzieć się więcej na temat szkieletów, Wireframe Magazine to świetny zasób, który udostępnia próbki, omawia techniki i rozwiązuje problemy związane z architekturą informacji.

Stworzenie modelu szkieletowego na stronie klienta stanowi skuteczne narzędzie komunikacji dla wszystkich zaangażowanych stron.

Nawet budowanie prostego modelu krawędziowego pozwoli zaoszczędzić czas w dłuższej perspektywie i ułatwić proces projektowania projektantowi, programistom i klientowi.

Napisany specjalnie dla WDD przez Erica Shafera.

Czy używasz szkieletów do swojego projektu? Jakie są najlepsze sposoby tworzenia efektywnych szkieletów?

projekt projektowanie stron szkielety