Projekt strony internetowej zrobione dobrze: doskonały od redakcji

Wiele rozmów na temat projektowania stron internetowych dotyczy tego, co dzieje się wokół treści. Szybkość strony, systemy projektowania, optymalizacja pod kątem wyszukiwarek, frameworki, dostępność — lista jest długa. To daje nam w Smashing Magazine wiele do opisania, co jest świetne, choć warto przypomnieć sobie, do czego to wszystko służy.

W tej trzeciej edycji naszej serii Web Design Done Well skupiamy się na bijącym sercu wielu stron internetowych: treści. Dokładniej, treść redakcyjna. Sieć dała gawędziarzom niesamowity wybór narzędzi do pracy, a jako okazjonalny półkompetentny dziennikarz uwielbiam dobrą sensację.

Poniżej znajdują się przykłady technologii internetowych wplecionych w treści redakcyjne, aby przenieść je na wyższy poziom. Następnie zakończymy szerszymi wskazówkami dotyczącymi kreatywnego myślenia o treściach cyfrowych. Nawet teraz, przytłoczony linią produkcyjną treści, dobre rzeczy wciąż błyszczą.

Reuters skłania się do przesuwania

W tym artykule o systemowym rasizmie w USA Reuters kształtuje treść wokół przesuwania, dzieląc historię na kawałki wielkości kęsa. Czytanie jest o wiele bardziej celowe niż w przypadku tradycyjnego przewijania. To jak przewracanie stron książki. Na urządzeniu mobilnym dosłownie przechodzisz do następnej sekcji. Zapewnia błyskawiczne, natychmiastowe raportowanie — nie mówiąc już o doskonałej wizualizacji danych na wystawie.

Żyjemy w świecie zorientowanym na urządzenia mobilne. Nie ma sensu być w tym cennym. Tak, rozkładówki czasopism mają w sobie pewną klasę. Tak, widok pulpitu zapewnia większe płótno do pracy. W rzeczywistości większość ludzi będzie oglądać to, co publikujesz na telefonie komórkowym, więc skup się na tym. Jeśli chodzi o podobne podejście, te „opowieści z kranu” autorstwa The New York Times i Input są również doskonałe. Wszystkim zainteresowanym dalszą lekturą artykułów wstępnych zorientowanych na urządzenia mobilne polecamy książkę The Story autorstwa legendarnego projektanta gazet Mario Garcii.

New York Times raczej pokazuje niż mówi

Mimo wszystkich okropnych rzeczy, które spowodowała pandemia COVID-19, doprowadziła przynajmniej do zapierających dech w piersiach raportów. Ten interaktywny artykuł w „New York Times ” wyjaśnia, jak działają maski na twarz, przenosząc czytelników na poziom cząstek. Możesz zobaczyć, w jaki sposób włókna wyłapują cząsteczki i dlaczego różne maski mają różne poziomy skuteczności. Każdy głupiec może sprawić, że skomplikowane tematy będą trudne do zrozumienia, ale czy sprawić, że będą łatwe do zrozumienia? To sama w sobie forma sztuki.

W grę wchodzi wiele elementów. Grafika, kolor, animacja — jeśli Twoja łódź unosi się na wodzie, możesz korzystać nawet z rzeczywistości rozszerzonej. To, co tak łatwo mogło być suchym, dusznym tematem, ożywa. A co najważniejsze, to ważne informacje. Takie rzeczy są powodem, dla którego Gabriel Gianordoli został wybrany Najlepszym Projektantem Świata w konkursie Society for News Design w 2020 roku. Druzgocący.

The Washington Post wizualizuje wykładniczy rozprzestrzenianie się

Pandemia wymusiła również wizualizację danych na pierwsze strony publikacji na całym świecie. Ten artykuł o wykładniczym rozprzestrzenianiu się z marca 2020 r. (pamiętasz to?) wykonuje niesamowitą robotę, wizualizując, jak i dlaczego niektóre wirusy stają się naprawdę dużymi problemami, bardzo szybko. Od pełnowymiarowych symulacji po małe, wbudowane wykresy — ten artykuł wstępny w pełni wykorzystuje jego cyfrowe ustawienie.

To, co szczególnie mi się w tym podoba, to to, że nigdy nie wydaje się niepotrzebne. Każda wizualizacja ulepsza historię do tego stopnia, że ​​prawie żałujesz, że ktoś musi wyjaśniać te same koncepcje samymi słowami. Dostępność w kilkunastu językach za jednym kliknięciem to kolejny wspaniały akcent — przypomnienie, że Internet w rzeczywistości nie ma granic. Mogę sobie tylko wyobrazić, ilu ludziom na całym świecie ten artykuł pomógł.

Projekt Marshalla miesza media

Tutaj The Marshall Project prezentuje bezkompromisowe dziennikarstwo o amerykańskim systemie sądownictwa karnego z elegancją i słodko-gorzkim pięknem dziecięcej bajki. W „The Zo” łączy się kreatywne pisanie, uderzająca ilustracja, hipnotyzująca narracja i ważna historia. To jest pełnoprawny edytor multimedialny.

Mówią, że piosenki mogą przybierać różne formy. To samo dotyczy treści redakcyjnych online. To, co widzisz powyżej, zostało zainspirowane 96-stronicowym artykułem naukowym. To, że może znaleźć nową publiczność jako serial animowany online, a następnie zostać nominowane do nie jednej, ale dwóch Emmy, jest świadectwem transformacyjnej mocy Internetu.

Interaktywna powieść graficzna SBS to żadna nowość

Mówiąc o transformacyjnej sile internetu, co powiesz na interaktywną historię. Wszyscy znamy adaptacje filmowe, adaptacje słuchowisk radiowych, adaptacje miniseriali i tak dalej. Dlaczego nie adaptacje stron internetowych? Właśnie to australijski nadawca SBS postanowił zrobić z The Boat , interaktywną opowieścią o krótkiej historii z książki Nam Le o tym samym tytule.

Sekwencja otwierająca stronę wciąga cię od razu, jej słowa przechylają się i kołyszą falami podczas czytania, a odgłosy grzmotów i deszczu wypełniają twoje zmysły po brzegi. Gdy historia się układa, ilustracje Matta Huynha płyną jak wspomnienia. To niezwykle żywe doświadczenie, piękne samo w sobie, a także sprytny sposób na przybliżenie literatury młodszym pokoleniom.

Puddingowe małpy dookoła

Szkoda, że ​​nie natknąłem się na to na czas, aby wydać dźwiękową edycję tej inspirującej serii stron. Nieważne, jest tu teraz. W naprawdę wspaniałym pokazie cyfrowego artykułu redakcyjnego The Pudding nie tyle wyjaśnia twierdzenie o nieskończonej małpie, co przeżywa je poprzez muzykę. Nie wiesz, co to jest twierdzenie małpy? Cóż, na co czekasz, strona wykona nieskończenie lepszą robotę wyjaśniania niż ja. Poczekam.

Używając interaktywnych czteronutowych przykładów, artykuł angażuje czytelnika, jednocześnie czyniąc koncepcję łatwą do zrozumienia. Jako ostatni, zachwycający akcent, strona sama w sobie jest żywym, trwającym eksperymentem, losowo przechodzącym przez coraz bardziej złożone melodie. Można się spodziewać, że za około 19 lat zamieni się w „Armię Siedmiu Narodów”. Można się zastanawiać, czy małpa pisząca wystarczająco długo na klawiaturze mogłaby stworzyć idealny framework JavaScript. Nadzieja rodzi się wiecznie.

Lista na osobności: klasa na osobności

Przy całej rozmowie o wizualizacji danych, muzyce, rzeczywistości rozszerzonej i innych odlotowych narzędziach, jest wiele do powiedzenia na temat uzyskania podstawowego prawa. Strony nie muszą być internetowym odpowiednikiem Vegas Strip, aby przyciągały wzrok. Lista Apart pokazuje to lepiej niż większość. Jego podejście do treści na zawsze pozostanie w moim sercu. Tytuł, ilustracja, kopia, niebieskie hiperłącza. Piękna.

Teraz zdaję sobie sprawę, że było to niepokojąco dawno temu, pisałem o dwóch gałęziach „brutalistycznego” projektowania stron internetowych. Istotą tego, co powiedziałem, było to, że jedno podejście jest głośne i zuchwałe, drugie zdecydowanie funkcjonalne. A List Apart pokazuje piękno tego ostatniego wykonanego właściwie. Multimedialny zestaw narzędzi jest wspaniałym atutem, ale nawet teraz zdarzają się sytuacje, w których wystarczą tylko słowa.

Kreatywne myślenie o treści

Na dobre lub na złe, sieć jest całkowicie zalana treścią. Wiele z tego jest świetnych, wiele nie. Wiele rozmów wokół tego ma zimną, kalkulacyjną kadencję, której można by oczekiwać od przemysłowców mówiących o liniach montażowych. Przytoczone powyżej przykłady, miejmy nadzieję, świadczą o wartości opierania się pokusie masowego wyrzucania rzeczy, ale bądźmy prawdziwi: większość stron internetowych nie ma zasobów, na przykład, The Washington Post .

Istnieją jednak sposoby kreatywnego myślenia o treściach na wszystkich poziomach, od osobistych blogów po publikacje globalne. Oto kilka z nich:

• Zakwestionuj swoje domyślne podejście.
  Jesteśmy stworzeniami z przyzwyczajeniami, w tym w tym, jak opowiadamy nasze historie. Poświęć trochę czasu, aby cofnąć się i zapytać: Jak mogę zrobić to inaczej? Może fotoreportaż byłby bardziej rozważny niż artykuł. Może mapa cieplna jest lepsza niż stół. Specjalizacja jest oczywiście ważna, ale nie daj się przesłonić innym, często uzupełniającym się sposobom robienia rzeczy.
• Korzystaj z bezpłatnych zasobów.
  Jednym z wielkich darów Internetu jest to, jak wiele jest niesamowitych darmowych rzeczy. Jak, właściwie za darmo, celowo. Od fotografii, przez projekty graficzne, po narzędzia do wizualizacji danych i oprogramowanie do edycji audio, zasoby potrzebne do przekształcenia treści są w zasięgu jednego kliknięcia. Nasz tag z gratisami to dobry początek.
• Nadaj treści wiele form.
  Jak The Marshall Project pokazał szczególnie dobrze w „The Zo”, historie mogą znaleźć nowych odbiorców, gdy przyjmą różne kształty. Napisałeś artykuł? Świetnie, dlaczego nie nagrać wersji audio? Stworzyłeś raport oparty na danych? Całkiem fajnie, ale czy jest tak fajnie, jak mogłoby być, gdybyś zaczął podłączać te liczby do D3? Tylko jeden sposób, aby się dowiedzieć.
• Eksperyment.
  Przedstawione tutaj przykłady są najlepszym wyborem, ale warto wspomnieć, że można wiele zyskać na próbowaniu nowych pomysłów i przyjmowaniu okazjonalnych niepowodzeń, które przynoszą. Iteracja jest kluczem do procesu twórczego. Jeśli spróbujesz czegoś i to nie zadziała, w porządku, nieważne. To jedyny sposób, aby dojść do tego, co działa .

Nie ma jednego uniwersalnego podejścia do treści, ale poszanowanie historii jest niezbędne. Technologie internetowe są uzupełnieniem, a nie głównym wydarzeniem. Niech nie będą ogonem, który macha psem. Najlepsze rezultaty uzyskuje się, gdy historia jest zgodna z tym, jak została opowiedziana. To rodzaj treści, które trzymają się ludzi na lata.