6 korzyści z tworzenia szkieletów przed zaprojektowaniem strony internetowej (+ przykłady)

Zaprojektowanie skutecznej strony internetowej wymaga wielu elementów — wymyślenia layoutu, uwzględniającego user experience (UX), wiedzy o tym, jak wdrożyć określone funkcjonalności, pisanie treści i uwzględnienie najlepszych praktyk optymalizacji stron pod kątem wyszukiwarek (SEO), żeby wymienić tylko kilka. A wszystko zaczyna się od burzy mózgów, podczas której wszyscy zaangażowani twórcy spotykają się z klientem, aby określić, czego potrzebują i co chcą umieścić w witrynie.

Gdy wszystkie te wymagania zostaną wymienione, możesz przejść do przodu na dwa sposoby: Powiedz swoim twórcom, aby zabrali się do pracy, wykonując swoją część projektu (np. pisząc treść, projektując makiety itp.) i mieć nadzieję, że wszyscy jesteście na tej samej stronie LUB możesz stworzyć szkielety, aby upewnić się, że wszyscy przystąpią do pracy, kierując się dokładnie tą samą wizją tego, jak będzie wyglądać witryna. To ostatnie można osiągnąć, tworząc makiety.

Czym są modele szkieletowe?

Modele szkieletowe to wizualny przewodnik po głównych stronach internetowych, które mają zostać zaprojektowane. Jego celem jest służenie jako plan dla wszystkich pracujących nad projektem. W ten sposób wszyscy zaangażowani będą dokładnie wiedzieć, dokąd trafi każdy komponent — baner bohatera, pasek nawigacyjny, nagłówki, podtytuły, treść, obrazy, wideo, przyciski wezwania do działania, wykresy itp.

Są dość proste z punktu widzenia projektu. Nie musisz jeszcze dodawać kolorów, rzeczywistych obrazów ani określonego tekstu. Zamiast tego dołączasz symbole zastępcze wskazujące, gdzie będzie wszędzie po zakończeniu witryny. Obejmuje to kwadraty lub prostokąty reprezentujące obrazy, tekst lorem ipsum dla treści oraz rozmiary czcionek H1, H2 i H3 dla nagłówków i podtytułów.

Źródło: Balsamiq

Rodzaje szkieletów

Istnieje wiele sposobów tworzenia makiet. Jeśli chcesz, możesz szkicować na zeszycie ołówkiem. W końcu to nie jest coś, co składasz na konkurs artystyczny. Jeśli jednak używasz oprogramowania do ich tworzenia, różne programy pozwalają na różne typy makiet:

Szkielety o niskiej wierności

Modele szkieletowe o niskiej wierności wyświetlają proste obrazy. Tutaj znajduje się akapit wprowadzający. Znajduje się tam opis produktu. Ten kwadrat z narysowanym w poprzek X ma w końcu być zdjęciem Twojego biura z uśmiechniętymi pracownikami, którzy są zachwyceni pracą w Twojej firmie. Możesz wyjaśnić te obrazy swojemu klientowi, ale wszystko na stronie jest bardzo proste.

Szkielety o wysokiej wierności

Makiety o wysokiej wierności odzwierciedlają bardziej realistyczny wygląd witryny. Obejmują one rzeczywistą treść i funkcje witryny — takie jak klikalne przyciski CTA, które kierują czytelnika na stronę, na którą CTA ma je przenieść. Mogą również zawierać logo, typografię, wymiary obrazu itp.

6 korzyści z tworzenia szkieletów stron internetowych

Gdy zaczniesz włączać tę praktykę do procesu projektowania witryny, od razu zaczniesz zdawać sobie sprawę z wielu jej zalet:

1. Zapewniają projekt strony internetowej

Możesz zebrać 10 osób w jednym pokoju, aby omówić sposób projektowania strony internetowej. Wszyscy mogą uzgodnić, jakich stron witryna będzie potrzebować, jakie informacje ma zawierać na każdej z nich oraz jakie funkcjonalności wyróżnią witrynę na tle konkurencji. Ale to nie znaczy, że wszyscy będą mieli w głowach dokładnie te same obrazy tego, jak to będzie wyglądać.

Jeśli więc treść zawiera tekst na stronie głównej, który jest znacznie dłuższy niż przewidywali twórcy stron internetowych, albo projekt zostanie odesłany z powrotem do treści, aby go skrócić, albo projekt będzie potrzebował dodatkowego czasu na przepracowanie układu. Dzięki modelom szkieletowym proces ten staje się bardziej wydajny.

2. Pozwalają lepiej ocenić wrażenia użytkownika (UX)

Niektóre rzeczy brzmią świetnie w teorii, ale nie działają tak dobrze w praktyce. Załóżmy, że Twój projektant UX chce uwzględnić X elementów na pasku nawigacyjnym wraz z rozwijanymi menu dla stron podrzędnych. Ale kiedy wszystko jest zrobione, zdajesz sobie sprawę, że to po prostu wprowadza zamieszanie.

Umieszczając wszystkie elementy na papierze, możesz zobaczyć te problemy przed rozpoczęciem procesu projektowania. W ten sposób możesz zająć się nimi na etapie, na którym jest to znacznie łatwiejsze.

3. Zapewniają, że wszyscy są na tej samej stronie

Ponieważ wszyscy członkowie zespołu projektowego wiedzą dokładnie, jak każda strona internetowa będzie wyglądać, zanim zostanie utworzona, wszyscy mogą przystąpić do pracy z lepszym wyczuciem kierunku. A jeśli ktoś ma jakieś pytania lub wątpliwości, jak to wszystko potoczy się, może poruszyć je podczas wstępnej burzy mózgów.

Proces ten pozwala każdemu usłyszeć o obawach i wspólnie zaproponować pomysły oraz dokładnie zrozumieć proces myślowy stojący za każdą decyzją.

4. Usprawniają proces projektowania

Kiedy tworzone są makiety, nie ma już marnowania czasu na robienie zmian w tę i z powrotem. Chociaż ten krok jest nadal częścią każdego projektu, posiadanie planów, które wszyscy uzgodnili przed rozpoczęciem projektu, oznacza, że ​​każdy członek zespołu będzie mógł pracować wydajniej.

Oznacza to również, że poświęcisz mniej czasu na pracę na każdej stronie, zwiększając prawdopodobieństwo, że skończysz przed terminem i uszczęśliwisz swoich klientów.

5. Ułatwiają tworzenie treści na stronie internetowej

Pisanie treści to proces subiektywny. Niektóre najlepsze praktyki obejmują przestrzeganie przewodnika stylu, głosu marki i pisanie z myślą o konkretnych osobach kupujących. Jednak nadal może znacznie różnić się długością i formatem.

Opracowywanie makiety daje autorom wyobrażenie o tym, jak ograniczają długość lub preferowane formatowanie. Nie musisz określać liczby słów, ale szkielety, które pokazują dwa lub trzy krótkie akapity lorem ipsum, pozwalają im opuścić powieść Tołstoja na inną okazję.

6. Możesz pokazać swojemu klientowi, zanim strona zostanie zbudowana

Jednym z najbardziej rozczarowujących doświadczeń związanych z projektowaniem strony internetowej jest to, że wszyscy jesteście podekscytowani tym, co stworzyliście, tylko po to, by klient skrzywił się i powiedział, że nie o to mu chodziło. Nie oznacza to, że to, co stworzyłeś, nie było dobre, ale że oboje wyobrażaliście sobie bardzo różne wyniki.

Tworzenie szkieletów pozwala klientom mieć dość jasne wyobrażenie o tym, jak będzie wyglądała wersja ich witryny w wersji bez kodu, zanim zostanie utworzona.

Najlepsze praktyki dotyczące tworzenia szkieletów

Teraz, chociaż istnieją różne sposoby tworzenia makiet, dobrą praktyką jest wykonanie pewnych kroków, aby zapewnić najlepsze wyniki:

Burza mózgów ze swoim zespołem

Jak wspomniano wcześniej, pierwszym krokiem jest spotkanie się ze wszystkimi, którzy będą pracować nad projektowaniem stron internetowych. W ten sposób wszyscy możecie rzucać pomysły i informować wszystkich o ich rozumowaniu. Każdy może również wziąć pod uwagę czynniki, które wpływają na jego konkretną rolę w projekcie, a które mogą nie być na czyimś radarze.

Najpierw narysuj pomysły

Chociaż technicznie rzecz biorąc, można by zacząć rysować szkielety na notebooku podczas burzy mózgów (lub przy użyciu oprogramowania do tworzenia szkieletów), łatwiejsze może być użycie tablicy suchościeralnej lub nawet długopisu i papieru, aby ukończyć pierwsze iteracje. Po zakończeniu możesz zrobić im zdjęcia i wysłać je e-mailem do członka zespołu, który utworzy makiety. Dobrą praktyką jest również umieszczanie ich w opisach zadań na kartach zarządzania projektami, aby ułatwić sobie korzystanie z nich.

Źródło: WhatPixel

Zminimalizuj kolory

Nie ma potrzeby wchodzić w szczegóły dotyczące kolorów i konkretnych obrazów, gdy tworzysz szkielet. Plany są dokładnie takie – jak nagie kości przedstawiają, jak będzie wyglądać strona. Możesz dołączyć notatki wskazujące kierunek (np. tutaj kolory marki, tam białe miejsca), ale skup się na głównych elementach projektu.

Rób notatki o funkcjonalnościach

Rób notatki o tym, jak będą działać niektóre obszary strony internetowej. Na przykład, jeśli coś ma być rozwijanym menu, karuzelą obrazów, quizem gościa lub jakimś narzędziem. Ogólne szczegóły, które dadzą projektantowi stron internetowych jasne wskazówki, co i gdzie ma się znaleźć.

Twórz szkielety stacjonarne i mobilne

Każda strona internetowa powinna mieć responsywny projekt. A ponieważ witryny nie ładują się na komputerze stacjonarnym w taki sam sposób, jak na smartfonie, utwórz makiety pokazujące, jak będą wyglądać oba wyświetlacze. Może pasek nawigacyjny zmieni się w menu z burgerami lub karty, które były obok siebie na większych ekranach, pojawią się ułożone w stos na urządzeniach mobilnych. Możesz pominąć ten krok, jeśli pracujesz z szablonem witryny, który jest już responsywny.

Czego nie robić podczas tworzenia szkieletów?

Ok. Więc teraz, kiedy już wiesz, co robić, oto lista rzeczy, które należy pominąć.

Nie szkieletuj każdej strony

Cały sens wireframingu to oszczędność czasu. Jeśli więc projektujesz stronę internetową z 42 różnymi produktami, po prostu stwórz szkielet jednej strony produktu/usługi. Następnie skup się na dużych elementach biletu, takich jak strona główna, strona Informacje, ceny, blog i strony Kontakt.

Nie spędzaj zbyt dużo czasu, próbując je udoskonalić

Szkielety nie muszą wyglądać imponująco. Muszą tylko pokazać, jak będzie wyglądał szkielet stron internetowych. Poświęć wysiłek, aby je upiększyć, gdy faktycznie projektujesz witrynę.

Nie dołączaj szczegółów co minutę

Chociaż powinieneś dołączyć pomocne notatki na temat znaczenia każdego elementu, nie zgub się w szczegółach. Bądź szczery i przejdź do projektowania następnej strony. Twój dyrektor artystyczny lub projektant stron internetowych może później rozwinąć wszystko.

Narzędzia do tworzenia szkieletów

Rysowanie w notatniku to prosty i bezpośredni proces. I na wszelki wypadek, jeśli to działa dla ciebie, idź po to. Ale dla tych, którzy wolą łatwe do udostępniania media, istnieje wiele programów, z których możesz korzystać. Niektóre z najpopularniejszych to:

Balsamiq

Balsamiq jest tak przyjazny dla użytkownika, że ​​prawie nie trzeba się uczyć. Pozwala tylko na tworzenie makiet o niskiej wierności, ale to wystarczy, aby wykonać zadanie. Oferują również kilka planów wielopoziomowych i umożliwiają współpracę, dając możliwość zapraszania członków zespołu do oglądania, jak je tworzysz w czasie rzeczywistym.

Adobe XD

Adobe XD pozwala projektować modele szkieletowe o wysokiej wierności i umożliwia udostępnianie klientom modeli szkieletowych. Następnie mogą zostawiać notatki, podając swoją opinię na temat każdego elementu szkieletu, bez dokonywania na nich żadnych modyfikacji. Zawiera również samouczki usprawniające projektowanie UX i UI.

Źródło: xd.adobe.com

Naszkicować

Szkic jest dostępny tylko dla użytkowników komputerów Mac. (To znaczy, jest tym, czym jest). Umożliwia współpracę z całym zespołem w czasie rzeczywistym w celu tworzenia makiet o wysokiej wierności. I chociaż nie ma biblioteki szablonów, jest kompatybilny z wieloma wtyczkami.

MockFlow

MockFlow to cyfrowe narzędzie do rysowania, które przypomina szkicowanie na suchej tablicy. Zawierają również obszerną bibliotekę szablonów i pozwalają eksportować modele szkieletowe na inne platformy, takie jak PowerPoint i Adobe PDF. Oferują darmową wersję, ale płatne poziomy zawierają o wiele więcej przydatnych narzędzi.

Źródło: MockFlow

Cieśla konstrukcyjny

Framer to dobre narzędzie dla startupów i firm z mniejszym budżetem, ponieważ oferuje bezpłatną opcję z szeroką gamą narzędzi. Możesz także tworzyć podstawowe modele szkieletowe, które możesz przechowywać w swojej bibliotece i ponownie wykorzystywać jako układy w przyszłych projektach.

Czas jest złotem; a kiedy się zgubi, nigdy go nie odzyskasz. Wdrożenie wireframingu do procesu projektowania stron internetowych pomoże Ci efektywniej z niego korzystać. Pracuj mądrzej. Unikaj frustracji. Realizuj swoje projekty szybciej. Jest to rozwiązanie korzystne dla wszystkich, bez względu na to, jak na to patrzysz.