Pamiętasz stare dobre czasy? Wiesz, o których dniach mówię; dni nie tak dawno temu, kiedy projektowaliśmy strony internetowe do stałych szerokości. Patrząc wstecz, wydają się teraz tak prostym czasem; szczęśliwszy czas; czas, kiedy mogłem recytować każdą czcionkę, która była dostępna w Internecie bez namysłu. Prawdą jest, że Responsive Web Design wszystko zmienił. Świat był płaski, a teraz jest okrągły, byłem ślepy i teraz widzę, że sieć była pikselami, a teraz są to procenty.
Wraz z wprowadzeniem RWD bardzo ważne jest, abyśmy, jako projektanci, ewoluowali w naszym obiegu pracy, aby lepiej odpowiadać wymaganiom nowej sieci. Wielu z nas wyraziło naszą frustrację, że stałe pixelowe podejście Photoshopa nie nadaje się do projektowania płynnych układów potrzebnych do responsywnej strony internetowej, ale nie zaproponowano żadnych użytecznych alternatyw. Świat projektowania stron internetowych jest gotowy na zindywidualizowane oprogramowanie, które jest zbudowane od podstaw z myślą o RWD. Produkty takie jak Adobe Reflow to świetny początek, ponieważ pokazuje, że Adobe przynajmniej pracuje nad rozwiązaniem, ale po spędzeniu z nim kilku godzin w weekend, widzę, że wciąż ma dużo do zrobienia, zanim stanie się użyteczne uzupełnienie mojego przepływu pracy. Z nami, w zawieszeniu pomiędzy oprogramowaniem historycznym a obietnicą tego, co ma nadejść jutro, musimy stworzyć alternatywne przepływy pracy, aby uwzględnić niedociągnięcia naszego obecnego "oprogramowania projektowego", wprowadzając inne narzędzia i procedury, które pomogą wypełnić lukę pomiędzy stałym pikselem a płynną reakcją.
Poniższa lista nie jest w żadnym wypadku listą tego, jak należy podejść do projektów RWD, ale raczej jak dostosowałem mój przepływ pracy do nowego krajobrazu.
Stałem na granicy dzielącej Photoshopa / fajerwerki / Illustratora, ponieważ każdy walczył o wyższość i widziałem niewinnych ludzi, którzy wpadają w krzyżowy ogień pikseli. Projektanci zwykle mają swoich ulubionych i wolą umrzeć w powolnej bolesnej śmierci, niż przyznają, że inne oprogramowanie ma funkcję, której mogliby chcieć. Uważam, że powinieneś zaprojektować w dowolnym oprogramowaniu, które pozwoli ci pracować w sposób najbardziej wydajny i szybko odkrywać twoje pomysły, czy to Photoshop, Powerpoint czy Paint.
To prawie nieistotne, które wybierzesz, ponieważ powinno być po prostu punktem wyjścia do szybkiego eksperymentowania z różnymi układami. Osobiście wolę Fireworks, ponieważ zaznacza on więcej pól tego, co chcę w oprogramowaniu. Staram się nie wpaść w szczegóły na tym etapie i naprawdę staram się tylko wstępne decyzje dotyczące układu i struktury, podobnie jak niektóre eleganckie modele krawędziowe.
Wszystko, co trzeba powiedzieć o używaniu Lorem Ipsum w makietach witryny, zostało powiedziane, więc proszę, zaufaj mi w tym i tam, gdzie to możliwe, wykorzystaj prawdziwą treść do zaprojektowania. Jeśli nie jest to możliwe, użyj treści z ostatniego roku, napisz własne treści lub użyj słów "Świeca na wietrze", ale nie używaj Lorem ipsum. Jeśli nie użyjesz prawdziwej treści, trudno będzie dostrzec, w których punktach przełomowych niektóre elementy wymagają dostosowania.
To jest właśnie ta szerokość, od której lubię zacząć, ponieważ jest ona bliska niewielkiemu doświadczeniu na komputerze, a następnie jest łatwa do skalowania dla większych ekranów i dla tabletów / urządzeń mobilnych. Niektórzy wolą zacząć szerzej, podczas gdy inni wolą projektować urządzenia mobilne - po pierwsze sprowadza się to do tego, co działa dla Ciebie.
W RWD chodzi o pojemniki z płynami, które rosną i kurczą się, aby wypełnić obszar dostępny w przeglądarce, więc projektowanie w procentach zamiast w pikselach zapewni, że projekty będą przepływać proporcjonalnie do przeglądarki i będą wymagały mniej punktów przerw niż ich odpowiednik oparty na pikselach.
Zwykle mam otwarty projekt w tle, dzięki czemu mogę łatwo i szybko znaleźć procentowy rozmiar elementu opartego na pikselach. InDesign świetnie radzi sobie z takimi obliczeniami i łatwo można się przekonać, jaki rozmiar elementu 428px x 333px będzie wynosił 46% jego pierwotnej szerokości, zachowując jego proporcje lub może znaleźć 27% szerokości przeglądarki 889px w sekundach. Wyniki są nadal podawane w pikselach, dzięki czemu można następnie powrócić do oprogramowania, w którym projektujesz i utworzyć ten kontener w pikselach, wiedząc, że będzie on relatywny do procentu zdefiniowanego obszaru roboczego.
Jeśli myślisz, że podoba mi się użycie prawdziwej treści w twoich projektach, powinieneś usłyszeć, jak mówię projektowanie stylów typograficznych w Photoshopie (lub odpowiednik). Typografia będzie wyglądać zupełnie inaczej w przeglądarce niż wygląda w zwykłych pakietach Adobe, co będzie oznaczać więcej pracy dla ciebie, aby ulepszyć projekt po jego zbudowaniu.
Oszczędzaj sobie głowy i korzystaj z aplikacji takich jak typecast.com eksperymentować i tworzyć style czcionek za pomocą. Gdy będziesz zadowolony z układu i stylu swojej typografii, możesz wyeksportować cały obszar roboczy jako przezroczysty PNG, aby umieścić go w swoich projektowych makietach. Nie musisz mieć zainstalowanych żadnych wybranych czcionek w swoim systemie, ponieważ będzie to tylko obraz, ale nie będziesz mógł go edytować bez powrotu do typecast.
Do tej pory powinieneś mieć projekt o szerokości 1000 pikseli (lub dowolnej szerokości, którą wybrałeś na początku), uzupełniony o szerokości kontenerów, które zawierają różne treści przetłumaczone na procenty. Chciałbym teraz zacząć tworzyć siatkę na zamówienie, która imituje szerokości kontenera, które używam w moim projekcie. Jeśli więc mam pasek boczny o szerokości 30% i obszar zawartości, który stanowi 55% mojej przeglądarki z 5-procentowym wypełnieniem z każdej strony, moja siatka może wyglądać na 5%, 30%, 5%, 55%, 5%.
Możesz korzystać z aplikacji takich jak Gridset aby zbudować własną siatkę, ale znowu wolę korzystać z InDesign, ponieważ możesz grupować elementy i zmieniać ich proporcje względem siebie.
Teraz zajmuję się moją siatką, którą utworzyłem przy użyciu InDesign i wklejałem ją w szerokość 1600px (lub maksymalną szerokość, którą ma być twoja strona). Następnie powiększam i zmniejszam rozmiar siatki, zwiększając ją o 100px aż do szerokości 300px. Przy każdym inkrementowaniu sprawdzam szerokość każdego kontenera treści i upewniam się, że jest wystarczająco duży, aby pomieścić jego zawartość. Kiedy osiągnę szerokość, która moim zdaniem sprawia, że kontener jest zbyt mały, po prostu edytuję siatkę, aby pasowała. Więc jeśli szerokość 800 pikseli pasek boczny, który utworzyłem na 30% szerokości przeglądarki, staje się zbyt wąski, mogę dodać do niego dodatkowe 10%, co czyni go teraz 40% szerokości przeglądarki i jest wystarczająco szeroki, aby pomieścić jego przeznaczoną treść. .
Kluczową rzeczą do zapamiętania jest to, że jeśli powiększysz pojemnik, musisz w ten sam sposób zmniejszyć w ten sposób inny pojemnik, aby zachować 100% całą szerokość. Jest to najlepszy sposób, w jaki znalazłem zdefiniowanie punktów przełomowych (punkt, w którym zmieni się układ), ponieważ dodajesz tylko kolejny punkt przerwania, gdy zawartość się zepsuje, a nie na szerokość nowego urządzenia. Ta procedura może być czasochłonna, ponieważ skończysz z 14 różnymi podglądami siatki, ponieważ rośnie ona z 300 na 1600 pikseli, ale jest to najlepszy sposób, w jaki znalazłem, aby sprawdzić, jak twój projekt będzie wyglądał na różnych szerokościach ekranu, zanim będzie on dostępny. rozwój.
Inną opcją jest użycie narzędzia takiego jak Adobe Reflow to także umożliwia dodawanie zawartości do kontenerów, a następnie przeciąganie obszaru roboczego i wyświetlanie skali elementów. Punkty łamania można również określić, zmieniając rozmiar obszaru roboczego, dopóki zawartość się nie zepsuje, i po prostu doda zapytanie o media. Reflow jest nadal dostępny publicznie w wersji beta i można go pobrać z tutaj .
Po skalowaniu twoich projektów z przyrostem co 100 pikseli, zidentyfikujesz kilka szerokości, w których treść się łamie i poprawia, dodając punkt przerwania. Możesz teraz powrócić do oprogramowania, w którym zostały utworzone oryginalne projekty, i zmienić układ projektu na szerokości, które określono jako punkty przerwania. Oznacza to, że projektujesz tylko 2, 3 lub 4 różne układy (w zależności od złożoności siatki i liczby punktów niedostępnych), które będą obejmować całą drogę od 300px do 1600px.
Jeśli wykonałeś ten proces, powinieneś teraz mieć zestaw układów pasujących do punktów przerwania, dokument, który pokazuje, jak twoja siatka składa się z procentów szerokości przeglądarki i jak się załamuje dla mniejszych ekranów, jak również dla wszystkich twoich style typograficzne już utworzone i przetestowane w przeglądarce. Powinno to być bardzo mocnym argumentem dla dewelopera, aby następnie zaczął budować projekty dokładnie i bez konieczności radzenia sobie z rozbijaniem treści w określonych szerokościach w późniejszym czasie.
Proces ten może wydawać się bardzo długi, ale bez konkretnego narzędzia zbudowanego w całości na potrzeby RWD, jest to najlepszy sposób, w jaki znalazłem, aby łatwo przetestować swój responsywny układ przy użyciu niereagującego oprogramowania i wyraźnie przekazać moje pomysły programistom. Nie jest to jedyny sposób podejścia do projektu RWD, ale jest to najlepsze, jakie znalazłem.
Co zmieniło się w projektowaniu responsywnym w odniesieniu do Twojego przepływu pracy? Jakie wskazówki możesz udostępniać? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz przepływu przez Shutterstock.