Figma Autolayout i Atomic Design: RWD - AWD

0:02Cześć! Dziś wyjaśnię Ci na czym polega różnica

0:05między RWD a AWD, czyli Responsive Web Design i Adaptive Web Design.

0:12Responsive Web Design jest to metodologia,

0:14która zakłada, że projektujemy jeden layout w taki sposób, aby dopasowywał on

0:20się do różnych rozmiarów okna przeglądarki bądź różnych rozmiarów ekranu urządzenia.

0:27Na pewno słyszałeś o czymś takim jak break point'y.

0:31Są to właśnie momenty, w których w trakcie skalowania okna przeglądarki następuje

0:36pewna zmiana w tym, jak nasz layout jest wyświetlany.

0:40W zależności od tego, czy korzystasz z gotowych framework'ów takich jak Bootstrap

0:44czy Carbon albo innego design systemu tych break point'ów może być kilka

0:51i te momenty przełączenia mogą być bardzo różnie zdefiniowane.

0:56Na potrzeby naszego ćwiczenia my skupimy się na 3 sytuacjach.

1:00Jest to ekran desktop, mobile i tablet.

1:04Responsive Web Design zakłada, że w miarę

1:07skalowania okna elementy w naszym layout'cie będą się

1:11powiększać, pomniejszać, bądź będzie się zmieniała kolejność ich

1:15wyświetlania. Jeden obok drugiego bądź jeden pod drugim.

1:19Na przykładzie, który widzicie mamy layout desktop.

1:23Zazwyczaj na desktopie mamy dużo miejsca.

1:27Możemy sobie pozwolić na wyświetlenie wielu elementów.

1:30My wykorzystaliśmy część layout'u na duży

1:32czerwony header, który rozciąga się na całą szerokość okna przeglądarki, a

1:37poniżej mamy 3 moduły składające się z przykładowego zdjęcia i tekstu.

1:43Szerokość tabletu jest dużo mniejsza.

1:45W tym przypadku wciąż możemy wyświetlić nasz header na

1:48pełną szerokość, ale w oknie tabletu mieszczą się już tylko 2 moduły.

1:54Trzeci został wyświetlony poniżej i w

1:57naszym przypadku nie zmieścił się już na foldzie.

2:00Najbardziej ograniczona jest przestrzeń urządzenia mobilnego, telefonu.

2:04W tym przypadku wyświetlimy tylko header

2:07i w naszym foldzie mieści się tylko jeden moduł.

2:09Pozostałe 2 moduły znajdują się poniżej

2:12i będą widoczne w trakcie scrollowania ekranu.

2:16Ciekawym przykładem responsywnej strony internetowej jest strona usługi Dropbox.

2:22W górnej części widzimy duży moduł z tekstem przyciskiem call to action.

2:29Mamy bardzo fajny moduł wideo.

2:32Poniżej niego znajduje się część opisująca

2:35główne funkcje usługi, składająca się z 4 modułów, w skład którego

2:40wchodzi ikona, jakiś tytuł i tekst oraz kolejnej sekcji.

2:45Jak możesz korzystać z Dropbox?

2:48Tu widzimy dwa moduły obok siebie.

2:50W miarę skalowania naszego okna moduły robią się coraz węższe, tak aby

2:57wciąż poprawnie wyświetlić się jeden koło drugiego.

3:02Natomiast w pewnym momencie.

3:05Następuje zmiana układu wyświetlania elementów.

3:08To był właśnie break point, break point, w którym widzimy widok, którego proporcje

3:13zbliżone są już do rozmiaru ekranu tabletu.

3:16W tym przypadku 4 moduły, które były wyświetlone jeden obok drugiego,

3:21zmieniły trochę swój układ i widzimy je w dwóch wierszach po 2 moduły.

3:27Poniżej sekcja: Jak korzystać?

3:30Nadal wyświetlana jest w taki sposób, że są to 2 moduły jeden obok drugiego.

3:34Kiedy dalej będziemy skalować nasze okno.

3:37Nastąpiła pewna zmiana jeżeli chodzi o moduł:

3:42Jak możesz korzystać z Dropbox?

3:44W tym momencie moduły już są jeden pod drugim i wypełniają pełną szerokość.

3:51Nasze moduły z cechami produktów wciąż są w dwóch kolumnach.

3:55Natomiast dalsze skalowanie sprawi, że

3:57również te moduły będą się wyświetlały jeden pod drugim.

4:03Jak widzicie, bez względu na to, jakie proporcje ma okno

4:07przeglądarki, widzimy na scenie te same elementy.

4:12Zmienia się szerokość modułów, zmienia się kolejność wyświetlania.

4:19I dopasowują się one do rozmiaru okna. Adaptive Web Design

4:26jest to metodologia, która zakłada, że dla

4:28każdego break point'u projektujemy inny, unikalny layout.

4:33Inny layout będzie wyświetlany na

4:35urządzeniu desktop, inny na tablecie, a jeszcze inny na telefonie.

4:40Dobrym przykładem Adaptive Web Design jest strona Amazon.com.

4:44Przyjrzyjmy się temu, jak ona jest zbudowana.

4:46Popatrzmy chociażby na samo górne menu.

4:49Widzimy logo, obok mamy informacje na temat tego, gdzie będzie dostawa.

4:54Następnie jest wyszukiwarka, koszyk.

4:57Poniżej mamy hamburger menu i kilka dodatkowych opcji.

5:01Poniżej widzimy slider oraz kilka kafelków

5:04prowadzących nas do różnych kategorii produktowych.

5:08Ta sama strona pod tym samym adresem,

5:10ale wyświetlona na urządzeniu mobilnym wygląda zupełnie inaczej.

5:15Zobaczcie tylko hamburger menu, który wcześniej znajdował się pod wyszukiwarką.

5:20Jest teraz na górze obok logo.

5:22Natomiast informacja o dostawie, która

5:24wcześniej znajdowała się obok logo jest poniżej.

5:27Inaczej wygląda też slider czy kategorie

5:31produktów, które wyświetlane są na stronie głównej usługi.

5:36Podsumowując, Responsive Web Design

5:40jest to metodologia, w której projektujemy jeden layout, który dopasowuje się do okna

5:45przeglądarki bądź rozmiaru urządzenia, na którym jest wyświetlany.

5:49A w przypadku Adaptive Web Design dla każdego break point'u czy dla każdego

5:54urządzenia projektujemy unikalny, dedykowany layout.

5:58Razem ze mną nauczysz się jak tworzyć

6:01responsywne projekty z wykorzystaniem funkcji autolayout.