Projektowanie nowych, w pełni responsywnych stron artykułów Wired.Co.Uk
Niedawno, Condé Nast Digital podjął się pełnego przeprojektowania artykułów opublikowanych na stronie wired.co.uk. Celem było dostarczenie bardziej treściwego i wciągającego doświadczenia. Cele te zostały ustalone po badania prowadzone przez naszego Architekta Informacji.
Zaczęliśmy na drodze do osiągnięcia tych celów ponad rok temu z przeprojektowaniem GQ.co.uk artykuły i wprowadzenie tego, co nazywamy komponentem "StickyScrollRead", co pozwoliło redaktorom osadzić media, które zostałyby wyciągnięte z kopii ciała na szerokości ekranu szerszej niż 1000 pikseli i przypięte na ekranie. Oznaczało to, że użytkownik mógł nadal czytać artykuł i nadal odnosić się do przedstawicieli mediów, których dotyczyła kopia. To okazało się znacznie bardziej wciągające i pozwoliło ciału skopiować więcej powietrza do oddechu.
Chcieliśmy, aby szablony artykułów Wired utrzymywały funkcjonalność SSR, która działała tak dobrze na GQ, ale sporo się też nauczyliśmy od czasu projektowania GQ, które moglibyśmy włączyć do Wired. Mądry proces projektowania również ewoluował znacznie więcej, odkąd zaprojektowaliśmy artykuły GQ.
Szablony artykułów GQ zostały zaprojektowane w całości za pomocą Photoshopa, z każdym innym wariantem artykułu (długi artykuł, krótki artykuł, prosto do galerii itp.) I każdym szablonem artykułu z innym osadzeniem (krótki artykuł z osadzonym obrazem, krótki Formularz artykułu z wideo ...) jest wyśmiewany jako PSD. Skończyliśmy z 20 - 30 PSD i ścianą wydruków, które objęły biuro! Było to czasochłonne, nużące i nie stanowiło ostatecznego produktu, ponieważ "modyfikowaliśmy" rzeczy podczas procesu tworzenia.
Zaproponowana koncepcja projektów artykułów Wired była bardziej głęboka i zaawansowana niż jej odpowiednik GQ, a myśl o wyśmiewaniu się z 50-60 plików Photoshopa wystarczyła do odłożenia naszego narzędzia PS lasso i zbadania dokładniejszych i skuteczniejszych metod komunikowania projekty do zespołu programistycznego.
Artykuły GQ, które poprzedziły zmianę przewodową.
Typografia
Jak wiele naszych projektów, zaczęliśmy od sprawdzenia, w jaki sposób możemy reprezentować wartości marki poprzez jego typografię. Przejrzeliśmy drukowany magazyn i zidentyfikowaliśmy style, które wykorzystują do opowiedzenia różnych historii, kolorów, które wykorzystali, a także stylów do wyróżniania tekstu i podpisów.
Następnie zaczęliśmy eksperymentować z różnymi kombinacjami typów, kolorów i rozmiarów czcionek Dawać podobne role aktor, tworzenie kompletnego przewodnika początkowego stylu dla wszystkich nagłówków, akapitów i wycinków, a także eksperymentów z porównaniami obok siebie. To byłaby podstawa naszej typografii, do której wrócilibyśmy później.
Budowanie przewodnika po stylach w programie Typecast.
Wdrożono przewodnik po stylu.
Układ
Wybraliśmy artykuł z czasopisma drukowanego i znaleźliśmy równoważny artykuł na stronie wired.co.uk. Były dokładnie tą samą historią, ale tam, gdzie artykuł w czasopismach zawierał zdjęcia o różnych rozmiarach, cytaty z ciągiem obejmowały kolumny z otaczającym je tekstem akapitu i obszerne dodatki białej przestrzeni, ekwiwalent online miał obraz wiodący nad jednym długim obszarem tekstu w otoczeniu strona internetowa, krzycząc na użytkownika, aby obejrzał coś innego.
Stary projekt artykułu przewodowego.
Wired magazyn jest dobrze znany z innowacyjnych i niestandardowych układów, za które zdobył wiele nagród. Chcieliśmy wypróbować i zreplikować układy w stylu czasopisma, z kawałkami wbitymi w kopię ciała i nie wszystkie obszary kopiowania są tak regimentowane. Wiedzieliśmy, że komponent SSR dzieli stronę na dwie kolumny, jedną dla treści artykułu i jedną dla osadzonych na nośnikach, które zostaną wyciągnięte i przypięte, ale nie chcemy, aby osadzenia czuły się całkowicie oderwane od tekstu akapitu.
Zaczęliśmy tworzyć ten sam artykuł, używając tej samej kopii i obrazów ze strony internetowej, aby utworzyć podstawową wersję szablonu SSR za pomocą CodePen. Celem było poeksperymentowanie z umieszczeniem pełnej szerokości, utrzymywanie w linii i na nośnikach treści w ramach przepływu artykułu, aby stworzyć bardziej efektowny wizualnie i angażujący układ. Od momentu zaprojektowania stron artykułów GQ zdecydowaliśmy, że byłoby to bardziej naturalne, gdybyśmy mieli kopię po lewej stronie i media w prawej kolumnie, więc zmieniliśmy je i chcieliśmy również włączyć standardowe jednostki reklamowe, takie jak podwójne niebo i MPU w kopii ciała, zamiast dawać reklamom własną kolumnę (jak na GQ), która byłaby zbędna, gdyby nie było reklam lub gdy przewinąłby się reklam.
Budynek w Codepen.
v1.1
W pierwszy prototyp artykuł prowadził z ogromnym, szerokim krajobrazem, który miał znacznie większy wpływ i nadawał sens artykułowi z magazynu. Jedną z moich ulubionych ewolucji z szablonów GQ było wprowadzenie wszechpotężnego obrazu o pełnej szerokości. Szablon GQ umożliwił redaktorom dodawanie zdjęć portretowych i poziomych "Wyciągniętych na bok", ale czasami mogliby oni tracić swoją obecność, gdy ekran użytkownika stawał się węższy, a obrazy się skurczyły, a obrazem o pełnej szerokości było nasze rozwiązanie.
Style typograficzne utworzone w programie Typecast nie były jeszcze używane, ale do akapitu, tekstu wprowadzającego i cytatów przypisano podstawowe style, aby uzyskać poczucie hierarchii.
SSR również nie zostało zaimplementowane, ale utworzono kolumnę z obrazami od przyciągania do boku, co pomogło nam w eksperymentowaniu z jaką szerokością ustawić kolumnę przyciągania do boku w stosunku do strony, a podstawowe jednostki podwójnego nieba i jednostki MPU zostały dodane do ciała skopiuj, aby sprawdzić, czy zakłócą przepływ tekstu.
W pierwszym szkicu to podejście okazało się o wiele bardziej przydatne niż eksperymentowanie z tą samą treścią za pośrednictwem Photoshopa. Umożliwiło nam to nie tylko szybkie i czasowe podejmowanie podstawowych decyzji dotyczących układu, ale mogliśmy również użyć go jako bazy, z której programiści mogliby stworzyć dodatkową funkcjonalność i dokładnie to zrobili.
Wersja 1.
v1.2
Dowód koncepcji CodePen został przekazany zespołowi programistycznemu i dodano funkcjonalność SSR (tak, że obrazy z przyciąganiem na bok zostały przypięte do ekranu), jak również pozwolono nam zmienić pozycjonowanie elementu multimedialnego poprzez zmianę jego klasy przed przekazaniem to powrót do zespołu projektowego do stylizacji.
W tym momencie zaczęliśmy stylizować artykuł za pomocą stylów czcionek, które wcześniej stworzyliśmy w programie Typecast, po prostu eksportując CSS bezpośrednio z aplikacji internetowej. Możemy teraz zacząć eksperymentować z różnymi sposobami osadzania treści i sprawdzać, co działa dobrze w różnych szerokościach i różnych historiach. Na przykład prowadzenie z portretem o pełnej szerokości było złym pomysłem, ponieważ wokół tytułu byłaby obfitość białej przestrzeni, a także zbyt duży nacisk na pierwszy akapit strony. Odkryliśmy, że najlepsze kombinacje zdawały się prowadzić z obrazem rozciągniętym na bok i być może utrzymywaniem linii w linii, ponieważ miały najmniejszy wpływ na przepływ tekstu. Pracowaliśmy również nad zoptymalizowaniem kopii ciała w celu uzyskania najwygodniejszego odczucia podczas czytania, kontrolując maksymalną szerokość kopii akapitu. Zamiast dodawać więcej wypełnienia między tekstem akapitu a materiałem przeciągniętym na bok, wciskaliśmy kopię ciała tak, aby kopia znajdowała się na środku ekranu tak, jak to było możliwe, a także pozwalała zachować obrazy linii do spływania z ekranu tak, jak drukowanie układ może zrobić.
Wersja prototypowania 2.
Ta kolektywna i zwinna metoda prototypowania pomogła nam szybko podejmować świadome decyzje, ponieważ mogliśmy z łatwością testować nasze projekty na dowolnym urządzeniu, szerokości ekranu lub przeglądarki i wprowadzać poprawki z minimalnym nakładem pracy. Pracowaliśmy z prawdziwą zawartością tak bardzo, jak to tylko możliwe, aby upewnić się, że nie zapominamy o stylizacji pewnej rzadkiej klasy, która dodaje się tylko do kilku akapitów - patrzę na Ciebie .p1 - że w przeciwnym razie moglibyśmy ominąć do rozwój. Stworzyliśmy również wiele typów artykułów przy użyciu tego samego szablonu, aby zobaczyć, jak zadziałało, gdy był tylko jeden obraz i krótka kopia lub jeśli był to artykuł poglądowy.
Chociaż zawsze wiedzieliśmy, że nasze szablony CodePen będą jedynie dowodem koncepcji, naprawdę staraliśmy się wdawać w tak wiele szczegółów i podejmować jak najwięcej świadomych decyzji dotyczących projektu i układu tak wcześnie, jak to możliwe.
v1.3
Gdy byliśmy zadowoleni z podstawowego stylu i struktury szablonu, programiści przenieśli kod do własnego środowiska kodowania, dzieląc CSS na każdy nośnik osadzony w jego własnym pliku SASS, aby zespół projektowy mógł łatwo uzyskać dostęp i zmienić CSS dla po prostu "blob" - czyli w końcu wywoływaliśmy wszelkie dodatki, które można zamieścić w artykule ... np. zdjęcia, wideo, recenzje ... itd. - które chcieliśmy edytować.
To była ogromna pomoc, ponieważ do czasu, gdy twórcy zrobili swoje rzeczy i doszli do końca, kod był zbyt skomplikowany, aby każdy z nas projektantów zrozumiał i zlokalizował części, które chcieliśmy zmienić. Takie podejście przydaje się również podczas stylizowania nowych obiektów typu blob, takich jak miniatury galerii, następnej lub oceny recenzji, ponieważ chcielibyśmy po prostu utworzyć nowy plik SCSS ze wszystkimi stylami dla pojedynczego obiektu typu blob, co znacznie ułatwiło aktualizację i obsługę.
Możliwość dostępu i edytowania CSS była ogromną pomocą dla projektantów. Po raz pierwszy odeszliśmy od "projektu w Photoshopie - dostarczamy pliki PSD - kod dewelopera - przegląd projektantów", metodę tworzenia strony internetowej i to oznacza, że byliśmy w stanie naprawdę precyzyjnie dostroić najmniejsze aspekty naszych projektów.
W przeszłości, używając starych metod, możemy na tym etapie wypuszczać artykuły przewodowe (w pełni funkcjonalne z niektórymi poprawkami do projektowania, które można wprowadzić po uruchomieniu), ale ponieważ nasi projektanci mieli teraz dostęp do CSS, byliśmy w stanie wydać ostatnie kilka dni dodając kilka subtelnych akcentów, które poprawiłyby wrażenia. Dodaliśmy małe ikony "Powiększ" w rogu zdjęć, aby poinformować użytkownika, że klikając na dowolne z nich, możesz otworzyć je jako pełną szerokość, obraz galerii. Przetestowaliśmy artykuły na różnych urządzeniach, aby uzyskać optymalną szerokość kopii ciała dla najlepszego doświadczenia z czytania, a także spędzić więcej czasu na dopracowywaniu linków tekstowych, stylów cytatów i podpisów obrazkowych, wszystkich drobnych szczegółów, które razem miałyby duży wpływ.
To był projekt o wiele bardziej kooperujący niż jakikolwiek inny, z którym wcześniej współpracowałem z projektantami, architektami informacji, kierownikami projektów, programistami i redaktorami, którzy pracowali razem na różnych etapach projektu; dodając swój kawałek do prototypu, który ciągle się rozwijał i rozwijał w produkt, jakim jest dzisiaj.
Ostateczny, w pełni responsywny projekt artykułu.
Nie spędzanie czasu na projektowaniu wszystkich stylów, układów i wariantów w różnych punktach początkowych, oznaczało, że moglibyśmy w pewnym sensie zaprojektować je według projektu. Nie czekalibyśmy, aż coś będzie idealne do zbudowania, ale zamiast tego po prostu zbudowaliśmy coś i pracowaliśmy nad tym, aby było idealnie. Oznaczało to, że były dni, w których mierzyliśmy raz i dziesięciokrotnie, ale także pozwalano na ciągłe testowanie, rozwój i, co ważniejsze, dyskusję na temat ulepszeń, które pomagały wszystkim zaangażować się i zaangażować w projekt.
Stale przeglądamy i ulepszamy budowę, ale jesteśmy także bardzo dumni z tego, co udało nam się dostarczyć w dość krótkim czasie. Artykuły przewodowe to nie tylko piękne, drukowane układy na dowolnej szerokości ekranu i na każdym urządzeniu, ale także zmiana sposobu, w jaki pracujemy w Condé Nast Digital jako zespół.
Co sądzisz o stronach z artykułami wired.co.uk? W jaki sposób proces projektowania Condé Nast Digital porównuje się do własnego projektu? Daj nam znać w komentarzach.