Posted: 5/15/2017
Nieważne jak dobre rozwiązania backendowe kryją się wewnątrz aplikacji - użytkownik ocenia po tym, co widzi na zewnątrz. Sukces lub porażka serwisu internetowego zależy w dużej mierze od jego wyglądu. W tym poście postaram się przybliżyć Wam temat material designu - zasad obecnie uznawanych za trendy przy budowie warstwy wizualnej aplikacji. Pokażę także jak, niedużym nakładem sił, napisać stronę, która w przyszłości będzie wizytówką naszego projektu.
No matter how good backend solutions are hidden inside the application - user evaluates after what he sees outside. The success or failure of a website depends largely on its appearance. In this post I’ll try to present you the topic of material design - principles currently recognized as trends in visual layer of the applications. I’ll also show how, with a little effort, write a page that in the future will be the showcase of our project.
Nowoczesny design wg Google
Na początek kilka słów o dzisiejszym głównym bohaterze - material design. Większość z nas ma z nim do czynienia na co dzień, chociaż być może nie jest tego świadoma. Wystarczy włączyć aplikację Sklep Play. M****aterial design to “styl projektowania” (ang. design language) opracowany w 2014 roku przez twórców wcześniej wspomnianego sklepu, czyli firmy Google. Z tego powodu najczęściej spotykany jest właśnie w ich produktach - np. Google Maps, Gmail.
Modern design by Google
To start with a few words about today’s main character - material design. Most of us have contact with him on a daily basis, although he may not be aware of it. Just launch the Google Play app. Material design is a design language developed in 2014 by Google. For this reason, it’s most often found in their products - e.g. Google Maps, Gmail.
Material Design na przykładzie Map Google
Material design in Google Maps
Jakie są główne założenia? Twórcom zależało na zbudowaniu systemu, który pozwoli na jednakowe odczucia związane z użytkowaniem stron/aplikacji niezależne od urządzenia. Ma być estetycznie, nowocześnie i przede wszystkim responsywnie. Nawet statyczne elementy stron mają sprawiać wrażenie ruchu. Niezwykle ważne są też kolory. Zaleca się umiejętne łączenie pastelowych barw. W tworzeniu odpowiednich kompozycji pomocne są palety, jak np. ta.
What are the main rules? Developers wanted to build a system that would allow for consistent feel for the use of pages/applications independently of the device. It should be aesthetically, modernly and above all responsive. Even static page elements are supposed to give the impression of movement. Colors are also very important. It is advisable to skilfully combine pastel colors. Palettes such as this are helpful in making the right compositions.
Materialize
Implementacją material design, którą zdecydowałem się użyć w projekcie jest framework Materialize. Udostępnia on kilkanaście gotowych CSS-owych i JS-owych komponentów, które można dodawać do swoich projektów w prawie niezmienionej formie. Dokładny opis każdego z dostępnych we frameworku elementów znajduje się pod wcześniej dodanym linkiem.
The material design implementation which I decided to use in our project is Materialize framework. It provides a number of ready-made CSS and JS components that can be added to your projects in almost unchanged form. You can read a detailed description of each of the components available in the framework of the previously mentioned link.
Lista gotowych komponentów w frameworku Materialize
List of ready-made components in Materialize framework
Let’s code!
Skoro wstęp teoretyczny mamy już za sobą, możemy w końcu zabrać się za tworzenie strony głównej naszego projektu. Za pomocą swojego ulubionego edytora (ja używam Sublime) tworzymy szkielet pliku html, jak w przykładzie poniżej.
Since the theoretical introduction is already over, we can finally get started on creating our project homepage. Using your favourite text editor (I use Sublime) we create a backbone of a html file, as in the example below.
<!DOCTYPE html>
<html>
<head>
<title>Football App</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>Teraz należy dołączyć framework Materialize do pliku index.html. Można to zrobić na kilka sposobów (dokładny opis tutaj). Dla własnej wygody wybrałem najprostszy i najszybszy - bez pobierania żadnych plików, z wykorzystaniem bibliotek online. Należy dołączyć linki do nich ze strony (zawarte na stronie cdnjs.com), osobno dla pliku CSS (w sekcji head) i JS (na końcu sekcji body).
Now we need to attach the Materialize framework to the index.html file. You can do this in several ways (the exact description here). For my convenience I chose the easiest and quickest - without downloading any files, just using online libraries. Include links from cdnjs.com to these libraries in index.html file, separately for CSS (in head _section) and JS (_at the end of body section).
<!DOCTYPE html>
<html>
<head>
<title>Football App</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
</head>
<body>
<h1>Hello!</h1>
<!-- Compiled and minified JavaScript -->
[https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js](https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js)
</body>
</html>I… to wszytko. Jeśli poprawnie dołączyliśmy linki, po otwarciu pliku index.html w przeglądarce, powinniśmy zobaczyć wystylowany w Materialize napis “Hello!“. Poniżej możecie zobaczyć porównanie (po lewej z Materialize, po prawej czysty plik html).
And… that’s all. If we correctly include the links we should see Materialize style “Hello!” text after opening index.html file in the browser. You can see a comparision below (left - with Materialize, right - clean html file).
Pasek nawigacji i stopka
Ważnym elementem każdej nowoczesnej aplikacji internetowej jest pasek nawigacji. Z jego poziomu możemy w szybki sposób dostać się do interesującej nas podstrony lub funkcji, jak np. logowanie do serwisu czy wyszukiwarka treści. W naszej aplikacji pasek nawigacji (na ten moment) będzie zawierał:
- Podstrony: Best, All
- Panel użytkownika: dodawanie nowego linku, logowanie/rejestracja, wyszukiwarka treści
Materialize udostępnia kilka gotowych typów pasków nawigacji. Znajdziemy je w zakładce Components -> Navbar. Jako najbardziej dopasowany do potrzeb naszej aplikacji wybrałem szablon Extended Navbar with Tabs. Skopiujmy jego kod i dodajmy do sekcji head w pliku index.html.
Navigation bar and footer
An important element of any modern web application is the navigation bar. From its level we can quickly get to the subpage or function we are interested in, such as e.g. login or content search. In our application, the navigation bar (for this moment) will include:
- Subpages: Best, All
- Users panel: add new link, login/register, search
Materialize provides several ready-made types of navigation bars. We can find them in Components -> Navbar bookmark. As the most adapted to the needs of our application I chose a Extended Navbar with Tabs template. Let’s copy his code and add it to the head section of the index.html file.
Jak widać powyżej, nasz pasek nawigacji nieco różni się od przykładu ze strony Materialize. Treść “Test 1”, “Test 2”… znajduje się w tej samej zakładce. Również kliknięcia myszą w odnośniki nie powodują reakcji. Dzieje się tak, ponieważ Materialize potrzebuje biblioteki JQuery do prawidłowego działania zawartych w nim skryptów. Musimy zatem dodać odpowiedni odnośnik przy końcu sekcji body w pliku index.html (lecz przed linkiem do skryptów Materialize!).
As you can see above, our navigation bar is a bit different from the example on the Materialize page. Content “Test 1”, “Test 2” … is in the same tab. Also clicking the mouse in the links doesn’t cause a reaction. This is because Materialize needs a JQuery library to proper scripting. We need to add a link at the end of the body section in the index.html file (but before the Materialize link!).
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
Teraz pozostało nam dostosowanie paska nawigacji do naszych potrzeb poprzez zmianę nazw i ilości etykiet. Po tych modyfikacjach kod prezentuje się jak poniżej:
We have now left the navigation bar to our needs by changing the name and number of labels. After these modifications, the code is shown as below:
Analogicznie jak pasek nawigacji dodajemy stopkę stąd. Zmieniamy też treść w poszczególnych jej elementach. W miejscu Links zaplanowałem listę najpopularniejszych kategorii, natomiast przy Copyright dodajemy własne dane. Footer content na razie pozostawiamy bez zmian.
Teraz przyszedł czas na modyfikację kolorystyki dodanych przez nas elementów. Obecny odcień raczej niezbyt pasuje do piłkarskiej tematyki aplikacji. Używając klas zdefiniowanych w zakładce CSS -> Colors możemy zmieniać kolor wybranych elementów strony wg składni:
Similarily to the navigation bar add a footer from here. We also change the content of each of its elements. For the place of Links I planned to add a list of most popular categories, while at the Copyright we add our own data. Footer content leave unchanged.
Now it’s time to change color of recently added elements. The current hue doesn’t match the football theme of the app. Using classes defined in CSS -> Colors bookmark we can change color of chosen elements by syntax:
<page_element class="color tone-number">
(...)
</page_element>Przykład/Example:
<footer class="page-footer grey darken-3">
(...)
</footer>
Fragment dostępnej w Materialize palety kolorów
Part of color pallette available in Materialize
Ciąg dalszy nastąpi…
Na tym etapie zakończymy dziś pracę nad stroną. Mam nadzieję, że ilość informacji zawartych powyżej Was nie przytłoczyła.;) Zachęcam do śledzenia postępów prac w kolejnych postach. Cześć!
To be continued…
At this stage we finish work on the page for today. I hope the amount of information contained above didn’t overwhelm you. I encourage you to keep track of progress in subsequent posts. Bye!
Kod projektu/Project source code:
Źródła/Sources: