Zawartość
- Responsywna metodologia
- Jak najpierw zachować zawartość?
- Dlaczego?
- 01. Zdefiniuj cele biznesowe i cele użytkownika
- 02. Odwołuj się do nich przy każdej okazji
- 03. Nie bój się odpychać
- 04. Popchnij też swój własny zespół
- 05. Z góry określ wszystkie potrzeby związane z zawartością
- Jak wyodrębnić treść z prezentacji?
- Musimy przestać myśleć o treści w kategoriach układu
- Zmuszaj swoich klientów do planowania treści niezależnie od projektu
- Sfinalizuj treść przed zaprojektowaniem
- Korzystaj z prawdziwych treści - za każdym razem
- Jak więc działają modele szkieletowe w projektach responsywnych?
- Szkicowanie
- Framework w przeglądarce
- Adnotacje
- Używaj prawdziwej treści w modelach szkieletowych
- Jak najpierw zaprojektować projekt dla małych ekranów?
- Abstrakcyjne projekty z urządzeń na początku
- Użyj płytek stylu
- Stwórz harmonię interfejsu
- Zobacz wszystko w przeglądarce
- Zachowaj równowagę dzięki programom statycznym
- Wniosek
Powiedzmy sobie jasno: projekt jest rozwiązaniem tylko wtedy, gdy skupia się na głębszych zagadnieniach, na czym polega wszystko. Solidny proces powinien zawsze kierować naszą pracą, ale musimy objąć coś bardziej elastycznego. Nasze medium w końcu dowiodło, że jest płynne, więc czyż nasz proces nie powinien? Pomyśl o projekcie systemu: musisz zobaczyć zarówno cały obraz, jak i drobne szczegóły. Niemożliwy? Daleko stąd!
Frank Chimero pięknie ujmuje to w swojej książce The Shape of Design: „Jest taka część, w której artysta cofa się od sztalugi, aby uzyskać nowe spojrzenie na pracę. Malarstwo jest równe częściom bliskim i dalekim: gdy jest blisko, artysta ciężko pracuje, aby zostawić swój ślad; na razie ocenia dzieło, aby przeanalizować jego walory. Cofa się, żeby praca przemówiła do niego ”.
Musimy pozwolić, aby przemówiła do nas nasza praca, nasze medium. Wraz z pojawieniem się responsywnego projektowania w końcu przyjmujemy nasze medium takim, jakim powinno być: płynnym. To wspaniały czas, aby cofnąć się i ocenić pracę, przeanalizować i przyjąć nowy sposób robienia rzeczy, nowy proces. Dawno minęły czasy statycznych makiet i projektantów stron internetowych, którzy nie rozumieją kodu. Nadszedł czas na responsywny proces.
Responsywna metodologia
Zamierzamy zdradzić wielką tajemnicę solidnego procesu już na początku tego artykułu. Ponieważ jesteśmy tacy szaleni. Gotowy? Proces responsywny to proces odpowiedzialny. Niejasny? Może. Głupi? Nie. Podobnie jak wcześniejszy ruch standardów internetowych, projektowanie responsywne popycha sieć do przodu za pomocą metod przyjaznych dla przyszłości.
Jak każdy proces projektowania, powinien skupiać się na tym, „dlaczego” stoi za tym wszystkim. Dlaczego więc istnieją strony internetowe? Dostarczanie treści. Może to być zadaniowe, społeczne, informacyjne… to nie ma znaczenia. Wszystko sprowadza się do tego: zacznij od tego, dlaczego, dobrze zorganizowanej treści i interakcji, które mają znaczenie.
Oto pytania, które najczęściej słyszymy na temat naszego procesu projektowania responsywnego.
Jak najpierw zachować zawartość?
Na początku projektu wszyscy jesteśmy optymistami. „Najpierw treść!” mówimy. „Cele użytkownika! Pamiętaj, co jest ważne! ” To prawda. Ale co to oznacza? Jak wdrażasz proces skupiający się na treści?
Nawet jeśli wiesz (lub myślisz, że wiesz), łatwo o tym zapomnieć w miarę postępu projektu. Projekty długoterminowe mają tendencję do ciągnięcia się i ciągnięcia (i dalej… i dalej…). Przestajemy myśleć o tym, dlaczego i zaczynamy skupiać się na tym, jak. Wmawiamy sobie, że nasze projekty można podzielić na oddzielne fazy „odkrywania” i „rozwoju”, które mogą istnieć niezależnie.
Prawda jest taka, że cały czas musimy pytać dlaczego. Bez względu na to, ile myślisz, że wiesz, bez względu na to, ile zaplanowałeś - za każdym razem, gdy podejmujesz decyzję, za każdym razem, gdy projektujesz przycisk lub piszesz nagłówek, musisz zapytać…
Dlaczego?
Dlaczego to robię? Dla kogo to jest? Jaki cel biznesowy pomoże osiągnąć mojemu klientowi? Jaka potrzeba pomoże moim użytkownikom adresować? Nie tylko przechowuj treść jako pierwszą. Najpierw pamiętaj, dlaczego.
To sprawia, że wydaje się to łatwe. Ale żeby zrobić to dobrze, będziesz musiał naciskać. Popchnij swoich klientów i swój zespół, aby najpierw zdefiniowali dlaczego. Bez Lorem Ipsum, bez „do tego dojdziemy później”. Odrób swoją pracę domową! Wszystkie twoje sposoby muszą zaczynać się od solidnego uzasadnienia. W Yellow Pencil oznaczało to duże zmiany w sposobie prezentowania, szacowania, budżetowania i planowania projektów. Musieliśmy naciskać na budżet i czas, aby przeprowadzić rzetelne badania, opracować strategię i zaplanować. Ty też możesz. Ale gdy Twoi klienci i Twoje zespoły zobaczą ogromne korzyści wynikające z definiowania potrzeb treści z góry, nigdy nie spojrzą wstecz.
Naszym zadaniem jest ich edukować. (Przeczytaj znakomitą książkę Mike'a Monteiro Design is a Job, jeśli chcesz dowiedzieć się więcej o kontaktach z klientami). Klienci mogą mieć trudności ze zrozumieniem wartości przeprowadzania tych wszystkich badań i pracy z wyprzedzeniem. A dlaczego mieliby to robić? Na końcu nie dostają niczego „skończonego” - a zbyt często po prostu otrzymują fakturę i wielki stary dokument Word.
To nie ich wina - to nasza wina. Naszym obowiązkiem jest skuteczniejsze okazywanie tej wartości. Na każdym kroku musimy sprowadzić wszystko z powrotem do najważniejszego dlaczego.
Jest to szczególnie ważne w przypadku projektowania responsywnego. Responsywna witryna nie wymaga dużo większego wysiłku programistycznego, ale oznacza dużo więcej planowania. Naprawdę jednak planuje, że powinniśmy to robić przez cały czas. Zobacz aktualny cykl projektowy przeprojektowywany co trzy lata. Czy chcesz to dalej robić? Na pewno nie.
Oto trzy kroki, aby zachować treść na pierwszym miejscu w procesie projektu.
01. Zdefiniuj cele biznesowe i cele użytkownika
Stwórz priorytetową listę celów biznesowych i użytkowników dla swojego projektu. Co Twoi użytkownicy najbardziej chcą wiedzieć lub robić? Przeprowadź swoje badania. Wyciągaj przemyślane wnioski, a nie szalone domysły. Poproś wszystkich interesariuszy o zgodę.
02. Odwołuj się do nich przy każdej okazji
Za każdym razem, gdy podejmiesz decyzję, za każdym razem, gdy ktoś zaproponuje nową funkcję lub element projektu lub stronę z treścią, poproś go, aby odwzorował żądanie na cel biznesowy i użytkownika. Jaką prawdziwą potrzebę spełni ta funkcja? Jaki jest prawdziwy powód? (Podpowiedź: „Ponieważ chcę”, „Naprawdę lubię niebieski” lub „wszyscy na Facebooku” się nie liczą).
03. Nie bój się odpychać
To może być trudne. Relacje z klientami mogą być delikatne, a rezygnacja z walki o zwycięstwo w wojnie może być kusząca. Ale pamiętaj, wszyscy jesteśmy w tym razem! To nie jest biznes kontra użytkownik; my kontra oni.
Spełnianie potrzeb użytkowników to najlepszy sposób na zaspokojenie potrzeb biznesowych. Ponieważ bez naszych użytkowników nie mamy biznesu! Klienci (dobrzy klienci) nie zatrudniają Cię do mówienia „tak” na wszystko. Jeśli więc klient prosi o coś, co nie spełni jego celów lub potrzeb użytkowników, nie bój się stawiać mu wyzwania. Nie chodzi o ego. Chodzi o stworzenie najlepszego możliwego rozwiązania.
04. Popchnij też swój własny zespół
Może to być również wyzwaniem podczas pracy w kreatywnym zespole. Rozdzielenie ról - projekt wizualny, doświadczenie użytkownika, architektura informacji, strategia treści, produkcja treści - może prowadzić do nieporozumień. Jesteśmy zajęci, przytłaczają nas e-maile. Trudno jest pozostać przy projekcie od początku do końca, zwłaszcza po „wykonaniu” pracy.
Relacje Twojego zespołu są co najmniej tak samo ważne, jak relacje z klientami. Musimy sobie przypominać, dlaczego, tak jak robimy to naszym klientom. Współpraca jest kluczowa. Nie można po prostu „przekazać” planu treści, makiet czy projektów. W miarę możliwości musimy pracować ramię w ramię. Łatwo jest „zakończyć” element dostarczany i przejść do czegoś innego. O wiele trudniej jest pozostać przy projekcie, gdy robi się ciężko.
Wodospadowe podejście do pracy twórczej po prostu nie działa. Zwinna, oparta na współpracy praca między członkami zespołu zapewnia lepsze wyniki.
05. Z góry określ wszystkie potrzeby związane z zawartością
Oto jedna rzecz: planowanie responsywnych witryn zajmuje więcej czasu. Nie planujemy już tylko jednego kontekstu. Planujemy dla wszystkich kontekstów, o których teraz wiemy, i takich, które jeszcze nie istnieją.
Ale planowanie wszystkich tych zawiłości z góry zajmuje znacznie mniej czasu niż cofanie się i modernizowanie funkcji i funkcji, których nie brałeś pod uwagę. Więc spędź czas / wysiłek / budżet. Zmusz swoich klientów i swój zespół do zdefiniowania (i zobowiązania się!) Całej zawartości, zanim przejdziesz do projektowania. Użyj tabel stron. Użyj ustrukturyzowanych treści. Przygotuj swoje treści na przyszłość już teraz! Albo płacz później.
Jak wyodrębnić treść z prezentacji?
Słyszysz to często w internecie. Ale czekaj, co? I czekaj - dlaczego?
Ponieważ prezentacja może (i będzie) się zmieniać. Sposób, w jaki projektowaliśmy strony internetowe 15 lat temu, jest prawie nie do poznania po tym, jak je prezentujemy obecnie. Ale wiesz, co się nie zmieniło? Słowa. Nadal ich używamy. Internet istnieje głównie dla treści (tekstowych). Nadal używamy go do rozwiązywania problemów informacyjnych; do wykonywania zadań. Ale jeśli treść zależy od sposobu prezentacji (strony wprowadzające we Flashu, czy ktoś?), Istnieje duże prawdopodobieństwo, że za kilka lat nie będzie można jej używać. I to jest do bani.
Musimy przestać myśleć o treści w kategoriach układu
Jako branża przeszkoliliśmy naszych klientów w myśleniu o treści w kategoriach układu. „Umieść to na pasku bocznym” - mówimy. „To powinno znaleźć się w stopce”. Zatrzymać! Przestań. Zatrzymać. Nie chodzi o lokalizację. Chodzi o priorytet. Jaka treść jest najważniejsza dla Twoich użytkowników? Bo zgadnij co: układ zmienia się w różnych kontekstach. Na Twoim małym ekranie (prawdopodobnie) nie będzie paska bocznego.
Gigantyczne super-menu, którego chce twój klient? Nie polecę na iPhonie.
Zmuszaj swoich klientów do planowania treści niezależnie od projektu
OK, nie musisz ich zmuszać. Zachęć ich. Gorąco zachęcaj. Tabele stron są do tego świetne. Jeśli jeszcze go nie przeczytałeś, od razu przejdź do Strategii treści dla sieci Kristiny Halvorson i Melissy Rach, aby uzyskać więcej informacji na temat ich tworzenia. Uporządkuj je według priorytetów. Nie odwołuj się do lokalizacji ani układu. Pomoże to Twoim klientom myśleć o ich treści w bardziej produktywny sposób, a także przyspieszy proces tworzenia treści przed sfinalizowaniem makiet lub projektu.
Sfinalizuj treść przed zaprojektowaniem
OK, to nie zawsze jest możliwe. Ale im więcej niepewności możesz wyeliminować przed rozpoczęciem projektowania, tym mniej będziesz musiał wracać i zmieniać rzeczy później.
Korzystaj z prawdziwych treści - za każdym razem
Jeśli to możliwe, korzystaj z treści skrajnych - pokaż swoim klientom najbardziej skomplikowane strony, obrazy i menu. Pozwoli to uniknąć niespodzianek na późniejszym etapie procesu, gdy zobaczą najbardziej niechlujną zawartość w gotowym produkcie.
Funkcjonalne modele szkieletowe w przeglądarce robią ogromną różnicę. Pozwól swoim klientom obserwować, jak ich zawartość porusza się i zmienia na różnych ekranach. Zwróć na to uwagę, prezentując swoje makiety (robisz osobiste prezentacje, prawda?). Pokaż im, jak priorytet ich informacji pozostaje taki sam na różnych rozmiarach ekranu, podczas gdy układ się zmienia.
Jak więc działają modele szkieletowe w projektach responsywnych?
Jesteśmy przekonani, że projektowanie interakcji dla RWD musi szybko i często trafiać do przeglądarki. Stworzenie statycznego dokumentu, który będzie opisywał wszystko, jest prawie niemożliwe. Jasne, moglibyśmy stworzyć dokument przedstawiający trzy, cztery lub pięć punktów przełomowych, ale to tylko ułamek historii. A co z wszystkimi momentami między punktami przerwania? Dzieje się to w przeglądarce.
Szkicowanie
Mimo to dobrze jest móc szybko wspólnie naszkicować swoje pomysły. Nie musi się to dziać na żadnym konkretnym nośniku, ale jest coś o ołówku na papierze. Chodzi o to, aby szybko i iteracyjnie wydobywać pomysły. Uwielbiamy szkicować, gdy tylko jest to możliwe, a jest nawet do tego aplikacja: UI Sketcher.
Framework w przeglądarce
Oto prawdziwy bilet dla nas. Uwielbiamy ponownie wykorzystywać wzorce i systemy podczas demonstrowania RWD w przeglądarce. Oczywiście za każdym razem moglibyśmy stworzyć własny system od podstaw, ale to nie pomaga nam ani naszym klientom.
Lubimy też korzystać z szybko reagujących platform do prototypowania, takich jak Twitter Bootstrap czy Zurb’s Foundation. Osobiście skłaniamy się ku Fundacji, ponieważ pasuje ona do naszego przepływu pracy. Byłoby wspaniale, gdyby któryś z nich zdecydował się najpierw na mały ekran, niską przepustowość, ale tak właśnie działamy.
Adnotacje
Adnotacje do szkieletów RWD są niezbędne, ale często są pomijane. Powiedz to głośno: dokumentacja, dokumentacja, dokumentacja! Widzieliśmy kilka takich przykładów od znajomych i uważamy, że jury wciąż jest na najlepszej drodze, aby prawidłowo dodawać adnotacje do responsywnych szkieletów w przeglądarce. Jak wspomniano powyżej, regularnie używamy Foundation by Zurb i lubimy używać jej dodatku Reveal do wyświetlania naszych adnotacji. Te adnotacje pojawiają się tylko na większych ekranach i idealnie można je włączać i wyłączać.
Używaj prawdziwej treści w modelach szkieletowych
Odbyło się wiele debat wokół Lorem Ipsum w makietach i projektach makiet, ale jeśli nie masz prawdziwej treści w makietach, robisz to źle. Treść informuje o decyzjach dotyczących interakcji i informuje, kiedy projekt się zepsuje. Jak Lorem Ipsum może to zrobić?
Jak najpierw zaprojektować projekt dla małych ekranów?
Od lat projektujemy z myślą o konkretnej rozdzielczości. To było ustawienie domyślne. Niezależnie od tego, czy szkicowaliśmy w notatnikach, tworzyliśmy szkielet w OmniGraffle, pracowaliśmy w Photoshopie czy projektując w przeglądarce, wiedzieliśmy, jaki będzie rozmiar naszego płótna. Te dni minęły. Wierzymy w to, że najpierw projektujemy pod kątem małego ekranu, a stopniowo ulepszamy. Jak więc projektant zmienia swój przepływ pracy ze stałego rozmiaru płótna na płynny?
Abstrakcyjne projekty z urządzeń na początku
O ile nie projektujemy dla konkretnego urządzenia, ważne jest, abyśmy przestali myśleć o urządzeniach i zaczęli myśleć o doświadczeniach. Wszystkie poniższe techniki pomagają projektantom tworzyć własne doświadczenia, jednocześnie będąc w stanie pozostać agnostykiem względem urządzenia (do pewnego momentu).
Użyj płytek stylu
Użyj kafelków stylu, aby ustalić kierunek i szybko iterować. Style Tiles umożliwiają projektantowi wyznaczenie kierunku systemu projektowania bez zbytniego precyzowania. Ich twórczyni, Samantha Warren, opisuje je w ten sposób:
„Kafelki stylu są używane, gdy moodboard jest zbyt niejasny, a kompozycja jest zbyt dosłowna. Style kafelków ustanawiają bezpośrednie połączenie z rzeczywistymi elementami interfejsu bez definiowania układu ”.
Stwórz harmonię interfejsu
Wyobraź sobie płótno z połączonymi wszystkimi elementami wizualnymi i interaktywnymi. Nie po to, aby zobaczyć konkretny układ interfejsu użytkownika, ale zobaczyć, jak wszystkie elementy współpracują ze sobą. To jest płótno harmonii interfejsu. Kanwa harmonii interfejsu umożliwia projektantowi łączenie pomysłów, ale nie skupia się na jednym rozmiarze ekranu. Ponadto jest to świetny sposób na efektywną komunikację i dokumentowanie zaprojektowanych elementów zamiast tworzenia pełnego przewodnika po stylu.
Jeśli jesteś zainteresowany dalszą lekturą, dwa doskonałe artykuły na temat harmonii interfejsów można znaleźć tutaj i tutaj.
Zobacz wszystko w przeglądarce
Wszystko musi być zebrane w przeglądarce. W tym miejscu projekt interfejsu użytkownika naprawdę ożywa. Widzenie, jak rzeczywista treść współdziała z elementami wizualnymi, ma kluczowe znaczenie. Nie ma sposobu, aby zrobić to poprawnie w statycznym środowisku. Musisz zobaczyć, jak zareaguje na rodzimym nośniku.
Zachowaj równowagę dzięki programom statycznym
Istnieje przepływ między przeglądarką a programami statycznymi, takimi jak Photoshop. Powinna istnieć równowaga, która pozwoli na stworzenie systemu projektowania w płynny i naturalny sposób. Oczywiście, stanie się to w Photoshopie, ale projektant, który projektuje responsywnie, musi nauczyć się kreatywnego myślenia również w przeglądarce.
Wniosek
Jeszcze raz z uczuciem: zacznij od tego, dlaczego, od dobrze zorganizowanej treści i interakcji, które mają znaczenie. Skoncentruj się najpierw na małym ekranie i niskiej przepustowości, a następnie stopniowo ulepszaj swoje responsywne koncepcje. Nasze medium dojrzewa. Mamy szansę robić rzeczy dobrze i zmieniać świat, jeden projekt internetowy na raz.
Odkryj 20 najlepszych narzędzi do tworzenia szkieletów dla projektantów
Steve Fisher koordynuje badania, analizy, projektowanie i strategię w Yellow Pencil w Kanadzie oraz zabiera głos na takie tematy, jak RWD, UX i open source. Alaine Mackenzie jest strategiem treści w Yellow Pencil.
