FuruArt

Każdy kto posiada smartfon z systemem Android w wersji 4.4 lub wyższej jest w stanie zauważyć, że styl w jakim tworzone są aplikacje jest mocno schematyczny i można by rzecz powtarzalny. Owszem, tylko co z tego? Otóż to, że dzięki tej standaryzacji Google wypracowało swój własny, odrębny design, który mimo że pierwotnie był skierowany wyłącznie na smartfony z powodzeniem może służyć na stronach WWW! Dobrze, ale czym właściwie jest ten unikatowy design słynny dla Google'a? Material design, bo taką nazwę nosi czerpie swój styl z prostoty, użyteczności i stanowi niejako sposób komunikacji użytkownika z interfejsem. Cytując zamysł twórców zawarty na oficjalnej stronie Google'a: Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. Material design - Introduction Za cel postawili sobie stworzenie wizualnego języka, który łączy klasyczne reguły dobrego design'u z innowacją oraz możliwościami technologii i nauki. Co jak najbardziej im się udało, ponieważ Material design jest przejrzysty, zachowując nacisk na czytelności dodatkowo jest intuicyjny, wprowadza nowe pomysły (o których za chwilę), a także pozwala nauczyć się jak tworzyć w rytmie Materiału. 3 najważniejsze zasady Material design'u Teraz postaram się wytłumaczyć co autorzy mieli na myśli piszą te trzy jakże wyraziste sentencje. 'Material is the metaphor' - czyli Materiał jest metaforą, to jak to w końcu jest? Ten Material to tak na prawdę nie Material? Już tłumaczę, Materiał w przeciwieństwie do jakiegokolwiek płaskiego obiektu posiada warstwy (tak, podobnie do ogrów i cebuli...), ale zaraz, zaraz warstwy? Przecież strona internetowa czy interfejs w aplikacji na telefonie jest płaski! Właśnie w tym momencie pojawia się metafora, Design ten wyróżnia plany, sprawia że wizualna strona aplikacji nie jest jako jedna zwięzła część, Material wykorzystując cienie, położenie względem osi Z (Trójwymiar, posiada trzy wymiary jak sama nazwa wskazuje, tak jak układ kartezjański posiada oś X i Y, pozioma, pionowa, tak siatka trójwymiarowa posiada trzy osi X, Y oraz Z, czyli pozioma, pionowa i głębia) oraz kolory, aby uprzestrzennić płaską strukturę aplikacji, ukazując przy tym hierarchię elementów (o czym za moment). Kolejnym postulatem jest: 'Bold, graphic, intentional' - Pogrubiony, obrazowy, zamierzony, brzmi całkiem po chińsku (prawie jak język webdeveloper'a ?), spieszę z wytłumaczeniem. Cała sentencja odnosi się bezpośrednio do użyteczności i intuicyjności Materiału, każdy element na stronie musi być wyraźny, kojarzący się od razu z funkcją jaką pełni w interfejsie w aplikacji oraz służyć określonym celom, wszystko powinno być przemyślane. Teraz posługując się bezpośrednio przykładem, gdy wchodzimy w aplikację gdzie musimy się zarejestrować lub zalogować, aby przeglądać treść, normalnie szukalibyśmy jakiegoś przycisku, tekstu, odnośnika, który mówiłby cokolwiek o Rejestracji, przykładowo: 'Zarejestruj się, aby przeglądać publikacje', Material design kompletnie wyrzuca warstwę tekstową zastępując ją odgórnie przypisanym symbolem ludzika, gdzie będziemy mogli się zalogować po kliknięciu, ikonka ta musi znajdować się na samej górze strony, w celu łatwej dostępności, wykonywać jakiś ruch, aby ukazać do czego służy (o czym za chwilę). W ten sposób, Google wprowadziło standard dla swojego interfejsu, przypisując odpowiednim ikonom określone funkcje, których całą listę znajdziecie pod tym adresem: Ukryta zawartość Przyszedł czas na ostatnią regułę zapisaną w świętej księdze Material Design'u (nie, no nie ma takiej, ale uznajmy że oficjalna strona pełni taką funkcję), czyli 'Motion provides meaning' - Ruch przewiduje znaczenie, aha... Dobrze, tutaj poruszamy wspomniany przeze mnie temat 'Jakiegoś ruchu', którego zadaniem jest nieść znaczenie, czyli dawać korzystającemu informację o tym, że element różni się od pozostałych pełniąc jakąś funkcję. Przykładowo przycisk na stronie będzie różnił się od pozostałej treści głównie tym, że wygląda jak przycisk i można go wcisnąć, Material design zadba również o to że wypełnienie przycisku po wciśnięciu zostanie ukazane płynną animacją napełniania kolorem, błyskiem lub innym efektem zwracającym uwagę użytkownika. Dzięki ruchowi jesteśmy sygnalizowani o możliwościach interakcji z interfejsem aplikacji lub strony, tak jak np. pole wyboru z różnymi opcjami, gdy klikniemy na jedną z możliwości zostaniemy poinformowani o zaznaczeniu efektem pląśnięcia (nie wiedziałem jak lepiej nazwać ten efekt). Niby jest to trochę zbędne jednakże ukazuje ideę Ruchu w design'ie, ponieważ standardowe podejście do designu eliminuje wszelkie efekty rozpraszające użytkownika na treści, a tutaj pozwala zrozumieć symbolikę popartą poruszaniem. Aczkolwiek całość musi być wciąż minimalistyczna, czyli przetłok animacji nie jest tutaj mile widziany! Przykład ruchu, dobrego i złego dostępny tutaj: Ukryta zawartość Myślę, że jak na pierwszą ogólnikową lekcję na temat Material Design'u wystarczy, przedstawiłem podstawowe zasady jakimi kieruje się ten styl, w następnych będę już bezpośrednio rozkładał na czynniki pierwsze poszczególne elementy i tłumaczył dlaczego są istotne w Material Design'ie! Oczywiście, jeśli zachęciłem Cię do zainteresowania się temat Material Design'u, miło czytało Ci się ten artykuł lub po prostu doceniasz mój sposób prowadzenia lekcji, zostaw 'Lubię to!', aby zmotywować mnie jeszcze bardziej do kolejnych lekcji oraz w celu szerszej publikacji w sieci. A tymczasem do kolejnej lekcji w Pełni! Część grafik oraz treść artykułu są moją własnościa - Furu.Art, zakaz kopiowania na inne blogi, fanpage czy strony, bo nogi z **** powyrywam!

@fantovsky Zgadzam się z Tobą w zupełności, że są ludzie którzy wolą projektować z użyciem makiet online, jest to rzecz jasna sprawa indywidualna ponieważ mi wygodniej jest w notesie, ołówkiem i gumką bo po prostu tak się przyzwyczaiłem i uważam to za najszybsze, dla każdego będzie to coś innego. Aczkolwiek, dzięki za uwagę, faktycznie mogłem o tym wspomnieć :>

Większość stron dobrze przemyślanych pod względem wizualnym, które widzimy w internecie zostały pierwotnie skonstruowane na kartce, white-board'zie, tablicy kredowej lub nawet za pomocą żółtych karteczek samoprzylepnych. No dobrze, fajnie, tylko co z tego? A no dokładnie tyle, że każdy dobry projekt zaczyna się z dala od komputera! A sam proces Design'u wygląda mniej więcej jak zabawa klockami Lego, o czym za chwilę się przekonacie. Moje porównanie do zabawy klockami nie jest bez powodu, ponieważ aby tworzyć przemyślane strony WWW musimy układać odpowiednie sekcje (tak jak w Lego klocki) na kartce. Dzięki czemu wykreujemy coś co slang Designerów nazywa Wireframe'em, który jest niczym innym jak tylko szkieletem naszej strony, taka trochę mąka w chlebie czy mleko w serze (jeśli mówimy o prawdziwym serze, a nie produktach seropodobnych). A teraz jak wygląda przykładowy Wireframe? Jak widać jest to najzwyczajniej w świecie szkic, w którym pomijamy jakiekolwiek detale. Istotą jest wiedzieć co chce się otrzymać i tak jak u mnie, można sobie rozpisać co dana sekcja będzie robić, ale to już bardziej ze względów developerskich. Dobrze, to co musimy zrobić aby zostać Szkieleciarzem? (Wireframe'owiec brzmi jakoś średnio) Kartka, najlepiej kropkowana lecz jeśli nie mamy kropkowanej może być jakakolwiek w kratkę, kropkowana jest dla czystej wygody tworzenia, jest to bardziej precyzyjne i odzwierciedla mniej więcej piksele, a jeśli nie kartka to np. white-board. Ołówek/Długopis/Mazak/Pióro/Kreda lub jakiekolwiek inne narzędzie do kreślenia, jak ktoś ma duże aspiracje może nawet cyrklem to robić, Gumka do ścierania (nie do mazania, ważne!) Pomysł, chęci no i rzecz jasna minimalną umiejętność rysowania linii, kółek lub prostokątów. Skoro już wiadomo co będzie nam potrzebne do naszego pierwszego Szkieletu strony WWW, przystępujemy do pracy! Ale zaraz, zaraz, żeby budować coś z klocków, wymagane są jeszcze ów klocki. Zacznijmy od podstawy klockowej rodziny, czyli tak zwanego Kontenera (Container), będzie on głównym blokiem gromadzącym dane sekcje w sobie, oznaczamy go w ten sposób: Oprócz kontenera zawarłem element o szerokości całego dokumentu, czyli np. pasek z menu na górze strony lub stopka. Wewnątrz naszego 'Tatuśka' będziemy umieszczać Pudełka (Box'y), rzadziej Tabelki lecz nie miałem gdzie indziej ich wcisnąć. Do naszego Pudełka będziemy pakować chociażby różne obrazki, grafiki, infografiki, które w 'języku' designer'a prezentują się w następujący sposób (im bardziej koślawo tym lepiej!), rzecz jasna jeśli obrazek jest na całą szerokość strony, rysujemy tak jak dowolny element na całość strony z symbolem obrazka. Oprócz grafik przydałby się jakiś tekst, nagłówki, wpisy, odnośniki, listy i inne tego typu, występują pod postacią szlaczków i gryzmołów, nagłówek w celu odróżnienia zaczyna się wysokim maźnięciem do góry i dalej szlaczki, nawigacją mogą być np. listy wysuwane, wielopoziomowe (Dropdown-menu): Mamy obrazki, mamy teksty, no to może na dokładkę jakieś przyciski akcji? Proszę bardzo! Przyciski są zaokrąglonymi prostokątami z 'btn' w środku, zamiast 'btn' można wpisać nazwę akcji jaką ma wykonywać np. 'send'. A te strzałeczki, służą do wskazania treści przewijanej gestami, np. Guziki galerii interaktywnej, pokazu slajdów (Slider'y): W sumie można by powiedzieć, że mamy już wszystko, jednakże dorzuciłbym do tej listy wszelakie ikonki utarte w internecie w celu określenia funkcji danego elementu, zegarek - pokazywanie daty publikacji posta, kalendarz - archiwum postów, ludzik - możliwość logowania, myszka - należy przewijać, aby coś się stało, kratka (hash) - tagi w poście, chmurka - komentarze, strzałka góra-dół - element będzie przesuwał się wraz z przesuwaniem strony (fixed): Skoro poznaliśmy klocki, to jesteśmy w stanie stworzyć już jakiś szkielet! Budujemy dokładnie tak jak w przypadku klocków Lego. Granicą może być tylko i wyłącznie wasza wyobraźnia oraz sposób widzenia. Z ów składników można otrzymać np. coś takiego: Jak widzicie nic trudnego stworzyć Szkielet strony, a później problemem nie będzie przerzucenie tego do Photoshop'a i stworzenie normalnego Layout'u! Co również będę starał się wam pokazać. Mam nadzieję, że spróbujecie wykonać własny Szkielet strony i ta lekcja wam się przyda, do czego zachęcam! Do zobaczenia w Pełni! Materiały zawarte w artykule oraz treści są moją własnością - Furu.ART, zakaz kopiowania treści lub grafik na własne fan-page, strony czy blogi - Bo nogi z **** powyrywam!

Uszanowanko! Ja jestem Furu, zajmuję się Webdesign'em oraz Webdevelopment'em, od niedawna w sumie postanowiłem dzielić się swoją wiedzą, której mam całkiem sporo, rzecz jasna ciągle się uczę nowych rzeczy bo ciężko w tej branży stać w miejscu! Lubię gry Indie, Metalcore/Metal/Hard rock/Rock/Dubstep/D'n'B/Trap, wymyślne kanapki z pierdyliardem składników, Yerbę, Koty (posiadam takowego), Szkicować, Projektować i wszelkie tego typu rzeczy. No i cóż, tyle chyba starczy, jak ktoś chce to może zajrzeć na FB, bo tam moje wypociny są pokazane w sposób czytelniejszy Jak to się rzekło będę codziennie wrzucał poradnik z przedziału WebDevelopment do WebDesign. Także Witajcie społeczności SpaceCMS :>