DesignMagazyn

Webdesign

Adobe redefiniuje workflow webdesignerów

Opublikowane dnia .

Adobe redefiniuje workflow webdesignerów

Wstęp

Webdesign

Adobe redefiniuje workflow webdesignerów

Opublikowane dnia .

Webdesign, jak i cała branża technologiczna rozwija się w ogromnym tempie. Co za tym idzie, rozwijają się narzędzia, którymi posługują się twórcy – choć dziś w tej kwestii jesteśmy w bardzo nieciekawym położeniu.  Jesteśmy bowiem pozbawieni aplikacji, która kompleksowo obsłuży proces zaprojektowania responsywnej treści. To, czy Adobe redefiniuje workflow, czy tylko podejmuje tego próbę, pozostawiam ocenie każdemu z Was.

Wraz ze wzrostem udziału urządzeń mobilnych w przeglądaniu internetu pojawiło się jedno, kluczowe dziś pojęcie – Responsive Web Design. W skrócie polega ono na tworzeniu stron internetowych w taki sposób, by wyświetlały się odpowiednio dla każdego z urządzeń (desktop/tablet/smartphone). Strona internetowa stworzona zgodnie z ideą RWD wygląda nieco inaczej pod różnymi rozdzielczościami, na rzecz jej użyteczności.

Adobe chce zapełnić lukę

Gdy środowisko twórców treści internetowej było jasne, że za standard należy przyjąć RWD rozgorzała dyskusja na temat nowego workflow. Zazwyczaj w procesie projektowania strony internetowej używa(ło) się Photoshopa, ew. Fireworks’a. Niezależnie od tego, który program preferujemy, mamy to samo ograniczenie – by stworzyć parę ekranów jednej strony (na rzecz desktopu, tabletu, a następnie telefonu) musimy tworzyć 3 osobne pliki/projekty. Teraz wystarczy sobie wyobrazić ile takich osobnych plików powstaje przy stronie, która ma kilka niestandardowych układów. Migrowanie między tymi plikami jest zwyczajnie niewygodne, zmiana jednego szczegółu wymaga ingerencji w kilku osobnych plikach. Także testowanie projektu pod kilkoma rozdzielczościami jest dość uciążliwe.

Adobe zdając sobie sprawę z tych problemów stworzyło zupełnie nowe środowisko dla webdesignerów i webdeveloperów zwane Edge Tools & Services. W tym wachlarzu nowych aplikacji znajdziemy zarówno takie, które są odpowiedzią dla konkurencji (np. Edge Code, który jest edytorem dla developerów) jak i zupełnie nowe jak Reflow, który ma na celu złożyć dla nas stronę internetową na wybrane rozdzielczości. Zajrzyjmy co znajdziemy w nowej ofercie:

  • Edge Animate
  • Edge Code
  • Edge Reflow
  • Edge Inspect (połączony z Reflow/Code/Przeglądarką internetową)
  • PhoneGap Build (przeznaczony do tworzenia aplikacji na urządzenia mobilne, wbudowany w Dreamweavera)
  • Typekit & Edge Web Fonts (usługi zaimplementowane w powyższych aplikacjach)

Pozwoliłem sobie przedstawić daty wydania pierwszych wersji programów z pakietu Edge Tools z wykresem przedstawiającym udział desktopów i urządzeń mobilnych w internecie.

graph

Mimo, że wykres kończy się na początku ubiegłego roku, to widać znaczący wzrost na korzyść urządzeń mobilnych.

Krótkie przedstawienie

Edge Animate pozwala, jak sama nazwa wskazuje – na stworzenie animacji. Teoretycznie nic nowego, ale Edge Animate wyróżnia się spośród podobnych narzędzi bardzo istotnym aspektem: animacje generowane przez niego zapisywane są w html/css/js. Co więcej, sam program – środowisko w którym pracujemy nad animacją także działa na bazie nowych specyfikacji HTML/CSS, w związku z tym nie ma mowy o jakiś problemach ze strony przeglądarek w wyświetlaniu stworzonych przez nas projektów. Samo narzędzie wykorzystuje wiele rozwiązań, które sprawdziły się u „starszych kolegów”, jak np. After Effects – dysponujemy osią czasu na której za pomocą keyframów wyznaczamy poszczególne animacje. Jest to zdecydowanie najwygodniejszy sposób na poruszanie obiektów w sferze internetowej. Animate oferuje szereg opcji pozwalających na stworzenie naprawdę świetnych projektów na rzecz stron internetowych, istnieje także możliwość dopisania własnych instrukcji co do działania animacji, dodać do niej niestandardowe właściwości takie jak np. reakcja na kursor.

edge-animate

Edge Code został stworzony na podstawie open source’owego projektu Adobe – Brackets. Jest to bardzo lekkie, przyjemne narzędzie do kodowania w środowisku html/css/js.

Edge Reflow (preview) czyli główny sprawca tego artykułu. Reflow jest bezpośrednią odpowiedzią na problemy, o których pisałem na początku tekstu. Pozwala on na stworzenie projektu strony internetowej na kilka rozdzielczości bez konieczności tworzenia kilku osobnych projektów. W samym programie możemy zmieniać szerokość okna i na bieżąco monitorować jak strona zachowa się przy konkretnej szerokości ekranu. Działa to naprawdę sprawnie. Jak widać na powyższej osi czasu, Reflow jest dostępny od zaledwiekilku, nadal nie jest to wersja stabilna – z tego powodu tytułowana jest jako „preview”. Nie możemy zatem mówić jeszcze o pełnej wersji, a jedynie zalążku tego co będzie w przyszłości. Pomysł na to narzędzie powstał dwa lata temu, a już teraz mamy bardzo obiecującą alternatywę do wcześniejszych rozwiązań.

Projektowanie w Reflow jest naprawdę intuicyjne i dokładnie tak jak jego poprzednicy – wykorzystuje środowisko HTML5/CSS3/JS – wszelkie efekty, właściwości dla elementów dodajemy za pomocą atrybutów CSS, dlatego też nie musimy się martwić, że coś będzie  problematyczne na etapie kodowania. Z pewnością nie możemy definitywnie zrywać naszych więzi z takimi programami jak Photoshop czy Illustrator, są one bowiem potężnymi narzędziami, które jeszcze bardzo długo będą nierozłącznym elementem każdego projektu graficznego, natomiast w tym przypadku będziemy ich potrzebować tylko do przygotowania pojedynczych elementów do designu naszej strony www. Narzędzie jest połączone z Inspect’em (pozwala na sprawdzenie efektu naszej pracy na urządzeniu mobilnym od razu po dokonaniu zmian) oraz z Typekitem, dzięki czemu mamy dostęp do wielkiej biblioteki fontów przystosowanych do środowiska webowego.

Edge Inspect, czyli aplikacja, która działa w zasadzie od początku tak jak powinna. Będąc zaimplementowana w powyższe aplikacje daje nam podgląd do tego jak wygląda nasz projekt na wszystkich urządzeniach mobilnych jakimi dysponujemy. Wystarczy posiadać odpowiednią aplikację oraz połączyć się z tą samą siecią WiFi. Aktualizacje wprowadzanych zmian są niemal natychmiastowe.

Wszystkie produkty są obecnie dostępne w pakiecie Adobe Creative Cloud.

Zobacz 5 minutowy materiał, który w dużym skrócie wyjaśnia działanie poszczególnych narzędzi.

Reasumując

Adobe od paru miesięcy stara się stworzyć środowisko, które będzie odpowiadało wszelkim oczekiwaniom, które są narzucone przez nowe technologie. Jak widać, wszystko idzie w dobrym kierunku i tylko pozostaje tylko czekać na kolejne wersje powyższych narzędzi. Ze względu na sporo mniejszych konkurencyjnych aplikacji, korporacja z San Jose będzie musiała włożyć dużo pracy, by utrzymać monopol na swoją branżę.

Ostatnią aplikacją, która zdaje się bardzo mocno stanąć na nogach w sferze webdesignu jest Sketch (niedawno pojawił się w wersji 3). Niestety nie miałem przyjemności pracować na niej – byłbym wdzięczny za wszelkie opinie użytkowników Sketcha, bo wydaje się całkiem przyjemnym narzędziem.

Zachęcam do dyskusji i podzielenia się swoimi doświadczeniami w kwestii nowych narzędzi dostępnych do „robienia internetów”.

profile

Sebastian Cencyk

https://dribbble.com/scencyk

Grafik oraz pomysłodawca DesignMagazyn. Członek zespołu Adobe Community Professional. Pasjonat wszystkiego co ładne. Szczecinianin.

Zobacz komentarze (0) ...