Material design
Sie24

Material design

Material design został stworzony przez Google, aby jego odbiorcy mogli korzystać ze stylu graficznego, który będzie czytelny i prosty, ale również łatwo dostosowujący się do różnych płaszczyzn. Po raz pierwszy został on zaprezentowany podczas premiery aplikacji Google Now, a potem było włączany w inne aplikacje tej firmy. W 2014 r. mianowano go oficjalnym stylem aplikacji mobilnych Google, czyli m.in. Gmail, Google Docs czy Google Drive. Material design szybko zaczął inspirować innych twórców. Jakie są jego główne cechy charakterystyczne? Przede wszystkim położenie w trójwymiarze, co oznacza, że znajdują się w niej trzy podstawowe głębokości, które można odpowiednio stosować, by wyróżnić elementy znajdujące się nad innymi. Powstało to na bazie ułożenia odpowiedniej hierarchii w projektowaniu strony/aplikacji i podkreślenie tego za pomocą cienia. Kolejny, istotny wyróżnik to odpowiednie dobranie kolorów, które powinny być dość intensywne, żywe, ale nie jaskrawe czy zbyt rzucające się w oczy. Dodatkowo jest tutaj możliwość personalizacji, czyli doboru ich według własnego uznania. Następny element to odpowiedni wygląd ikon – baza Google obejmuje ich dużą liczbę, ale można też tworzyć własne z dostępnych możliwości. Można wyróżnić kilka podstawowych zasad, które je łączą. Przede wszystkim – prosta forma, która jest dobrze widoczna zarówno w większej, jak i mniejszej rozdzielczości. Kształty powinny się opierać na podstawowych kształtach geometrycznych. Ikony nie powinny być stylizowane na trójwymiarowe, ponieważ przestają być dobrze widoczne np. na urządzeniach mobilnych. Wszelkie zakończenia linii powinny być proste, a współczynnik zaokrąglenia rogów powinien być stały i wynosić 2dp. Tyle powinny mieć również znaki podziału między wewnętrznymi elementami, światła wewnętrzne i wcięcia. Jeśli chodzi o typografię material design, to jego podstawowym fontem jest Roboto (alternatywnie – Noto). Podstawowe wielkości w tekście to 12, 14, 16, 20 i 34. Możliwe jest wykorzystanie większych czy mniejszych znaków, ale trzeba pamiętać tym, by było to spójne z resztą. W przypadku dużych fontów należy zmniejszyć rozstrzelenie znaków w wyrazach, a w przypadku mniejszych – odpowiednio zwiększyć. W material design można znaleźć ilustracje, zdjęcia i grafiki wektorowe, które pasują do konkretnego projektu. Unikać należy zdjęć stockowych i innych uznanych za zbyt oczywiste. Należy pamiętać, że mają być dobrze widoczne również na np. ekranach smartfonów, więc powinna cechować je odpowiednia jakość i rozdzielczość. Google stworzył material design z myślą o webmasterach, którzy mogą go wykorzystywać podczas projektowania stron internetowych. Oparto go na standardowych technologiach, a więc HTML, CSS i JS. Google zapewnia, że można go wykorzystywać w rozwiązaniach...

Czytaj dalej
Czym jest SVG?
Cze15

Czym jest SVG?

SVG (Scalable Vector Graphics) to język służący do opisu dwuwymiarowej grafiki wektorowej. Zawartość  tego stworzonego w 1999 roku pliku tekstowego tworzy zestaw znaczników XML, które opisują rozmiary, pozycję, wygląd dwuwymiarowych kształtów, obrazów oraz tekstu. Poszczególne podstawowe elementy SVG można łączyć i wykorzystywać, sporządzając w ten sposób bardziej skomplikowane kształty. Grafika tworzona za pomocą składni SVG to grafika wektorowa, dzięki której dane obiekty można powiększać bez utraty jakości obrazu. Dzięki temu świetnie nadaje się ona do przechowywania schematów, prezentacji, wykresów oraz większości obrazów generowanych komputerowo. Należy ją jednak wykluczyć w przypadku  przechowywania zdjęć, zeskanowanych obrazów i video. W SVG można opisywać standardowe obiekty (krzywe, elipsy, prostokąty), efekty specjalne (filtry), wypełnienia gradientowe, maski przezroczystości czy sposób animacji elementów w SML. Do tworzenia grafiki w formacie SVG można użyć : dowolnego edytora tekstu własnych programów, które tworzą ręcznie plik svg wolnych programów, takich jak Sketch, Karbon 14, Sodipodi czy Inkscape SVG pozwala też na użycie szablonów stylów (CSS), języków skryptowych, np. JavaScript, jak również na rozszerzanie funkcjonalności poprzez dodanie własnych elementów oraz właściwości przy pomocy standardowych technik XML. SVG opracowało pod koniec XX w. konsorcjum W3C (World Wide Web Consortium),  zajmujące się tworzeniem standardów dla sieci Web. Warto pamiętać, iż ten zapis grafiki wektorowej (statycznej i animowanej) to  otwarty standard, dzięki czemu dostęp do niego nie jest obwarowany żadnymi licencjami czy patentami i nie jest kontrolowany przez żadną firmę. Dlatego też może być swobodnie wykorzystywany w aplikacjach. Znane są jego trzy rekomendacje (ukończone wersje standardu): SVG 1.1, SVG Tiny 1.2, SVG Mobile 1.1, a także kilka zarysów oraz planów następnych wersji. Język SVG zbudowano na języku XML (Extensible Markup Language), dlatego też zachowano język bazowy, taki jak DOM (Document Object Model), generowanie dokumentów za pomocą przekształcenia XSL (Extensible Stylesheet Language), osadzanie dokumentów SVG w innych plikach XML i znaczników z innych języków w dokumentach SVG. Obsługa SVG jest możliwa w przeglądarce Amaya, Mozilla Firefox, Opera, Google Chrome, Konqueror, Safari i Internet Explorer. Te przeglądarki, gdzie SVG nie jest zaimplementowany muszą posiadać odpowiednią wtyczkę. Konkurencją dla SVG jest VML (Vector Markup Language), czyli język służący do opisu grafiki wektorowej. Jest on również zbudowany w oparciu o XML, lecz standard obsługuje się praktycznie tylko przez produkty...

Czytaj dalej
Kolorystyka strony internetowej
Kwi05

Kolorystyka strony internetowej

Projektowanie stron internetowych wymaga przemyślenia kilku zasadniczych kwestii, które w przyszłości będą miały wpływ między innymi na popularność witryny wśród jej odbiorców (wielkość ruchu sieciowego). Jednym z elementów, na który warto zwrócić uwagę, jest dobór kolorystyki – co wbrew pozorom może nastręczać niemało trudności. Podstawą przy wyborze konkretnych barw danej strony jest identyfikacja wizualna prezentowanej za jej pośrednictwem marki (firmy lub działalności). Jeśli istnieje zaprojektowane wcześniej logo lub inne elementy graficzne, wygląd całej witryny powinien z nimi ściśle korespondować pod względem stylistycznym i kolorystycznym. Wskazówką dla projektantów może być również klucz barw, wskazujący powszechne skojarzenia z poszczególnymi kolorami: zielony – środowisko, ekologia, rozwój, zdrowie, pieniądze; niebieski – zaufanie, bezpieczeństwo, spokój; fioletowy – kreatywność, duchowość, dobrobyt; żółty – szczęście, młodość, ciepło, słońce; pomarańczowy – radość, przyjaźń, pewność siebie; czerwony – siła, miłość, pasja; brązowy – ziemia, jedzenie, konserwatyzm; czarny – luksus, elegancja, wyrafinowanie; biały – czystość, prostota, profesjonalizm. Oprócz doboru konkretnych kolorów, warto również zastanowić się nad ich liczbą oraz zestawieniem. W zależności od naszych upodobań, możemy zwrócić się w stronę monochromatyczności lub zaserwować sobie i internautom istną ferię barw. Co sprawdzi się lepiej? Boom na strony internetowe sprzed kilku lat sprawił, że niemal wszyscy chcieli wyróżnić swoje witryny poprzez zastosowanie wielu wyrazistych kolorów. W celu wyeksponowania ważnych elementów, takich jak odnośniki do kolejnych zakładek lub zaprzyjaźnionych serwisów, stosowano mocno kontrastujące, czasami krzykliwe barwy. Aktualne tendencje w projektowaniu stron internetowych proponują podejście minimalistyczne, czasami wręcz ascetyczne. Widoczne jest wyraźne odejście od wielobarwnej grafiki witryn. Twórcy większości współcześnie tworzonych stron ograniczają się do góra trzech kolorów – zbliżonych do siebie lub pozostających w kontraście, wykorzystując różne stopnie ich nasycenia, na przykład w celu wyróżnienia poszczególnych treści. Nawiązanie, na przykład do popularnego ostatnio stylu skandynawskiego, proponującego połączenie bieli, szarości i delikatnych pasteli, daje poczucie uporządkowania i przejrzystości, które są wyznacznikiem użyteczności danej witryny. Internauta poruszający się po takiej stronie będzie miał z pewnością o wiele większą łatwość w znalezieniu interesujących go informacji, niż w przypadku strony, na której każdy element będzie miał inny kolor. Monochromatyczność, oznaczająca z kolei wykorzystanie jednej barwy w kilku odcieniach, zazwyczaj kojarzy się z chłodnym profesjonalizmem. Jednak przy ciekawym zastosowaniu cieniowania i odpowiednim graficznym układzie poszczególnych elementów strony może przynieść zaskakujący efekt. Przywołująca na myśl styl oszczędny, wykorzystywana jest najczęściej na stronach oferujących usługi specjalistyczne. Wybór kolorystyki strony na ogół jest uzależniony o charakteru prezentowanych na niej treści oraz od prywatnych upodobań jej właściciela. Zastanawiając się nad konkretnym projektem, warto zwrócić uwagę na obowiązujące trendy. Obecnie zdecydowanie zmierzają one w kierunku redukcji palety barw do niezbędnego...

Czytaj dalej
Trendy w projektowaniu stron na 2016 r.
Sty08

Trendy w projektowaniu stron na 2016 r.

Projektowanie stron internetowych, podobnie jak każda zbliżona dziedzina tego typu usług, wymaga śledzenia i dostosowywania koncepcji do obowiązujących trendów. Rok 2015 stał pod znakiem minimalizmu, prostoty i jak największej użyteczności. Jaki będzie rok 2016? Od dłuższego już czasu można było zaobserwować odchodzenie od rozbudowanych stron, przesyconych kolorami, ruchomą grafiką oraz treścią (tekstami, grafiką i zdjęciami). Web designerzy stawiali na stonowane barwy, oszczędną typografię, witryny typu one page oraz intuicyjną nawigację. Z uwagi na entuzjazm, z jakim przyjął się nowy kierunek – w sieci pojawiło się bardzo wiele stron o minimalistycznym, czasami wręcz ascetycznym charakterze, w przyszłym roku możemy spodziewać się jego (nieco zmodyfikowanej) kontynuacji. Podstawą projektowania www będzie nadal funkcjonalność, wyrażona między innymi w przejrzystości i czytelności witryny, łatwości w obsłudze oraz jej dostosowanie do parametrów urządzeń mobilnych (responsywność). Z pewnością zachowany zostanie trend umieszczania wszystkich treści na jednej stronie przewijanej góra-dół, poprzez tak zwane scrollowanie (one page design). Odejście od zakładek odsyłających do poszczególnych podstron i treści zastąpi prosta w obsłudze nawigacja, przyjmująca coraz częściej postać pojedynczej zakładki, umieszczonej zwykle w prawym górnym rogu strony, z której rozwija się proste menu (hamburger menu). Wyrazem minimalizmu, związanego między innymi z ograniczeniem ilości publikowanych na stronie treści, będzie również – popularne już teraz – zamieszczanie tak zwanego hero image, pojedynczego obrazka, zdjęcia, krótkiego filmu lub dynamicznej prezentacji, zawierającej dodatkowy tekst/hasło przewodnie całej witryny. Zajmując większą część ekranu, ma ono za zadanie wstępną prezentację strony oraz zachęcenie do jej lepszego poznania. Pomimo ograniczenia znajdujących się na stronie treści, bardzo duży nacisk będzie kładziony na jej interaktywność, wyrażoną na przykład w animowanym menu, dynamicznych slajdach czy zastosowaniu efektu parallax, umożliwiającego przesuwanie wybranego fragmentu witryny z inna prędkością niż pozostałe. Trendem dominującym, korespondującym z wszystkimi do tej pory omówionymi kierunkami, będzie flat design, polegający na projektowaniu płaskich elementów graficznych, a tym samym unikaniu gradientów, cieniowania i sztucznej głębi. Zgodnie z jego założeniami, typografia witryny powinna być jak najbardziej prosta i czytelna, jednakowa pod względem czcionki i fontu dla wszystkich zamieszczonych treści. Interesującym rozwiązaniem może być zastosowanie przezroczystych przycisków (ghost buttons), mających zazwyczaj cienkie obramowanie i napis w środku. Zachowując minimalizm, przejrzystość strony i jej intuicyjność, flat design proponuje również wkomponowanie elementów w żywych barwach (kolorowe i energetyczne akcenty), jeszcze większego niż dotychczas wykorzystania ikon – dopasowanych stylistycznie do całej witryny oraz zastosowanie długich cieni, nadających poszczególnym elementom witryny wrażenie...

Czytaj dalej
Animacje wracają na strony www
Lis05

Animacje wracają na strony www

Animacja komputerowa jest jedną z dziedzin grafiki komputerowej, która w ostatnich latach coraz prężniej się rozwija. Polega na tworzeniu ruchomych obrazów, np. napisów czy postaci. Coraz częściej staje się pożądanym i chętnie wykorzystywanym elementem na stronie www. Żeby stworzyć iluzję ruchu, na monitorze komputera wyświetla się obraz, by szybko zmienić go na następny – podobny, ale z niewielkimi zmianami. Animacja to inaczej sekwencja obrazów, które mają inną zawartość i są powiązane w logiczną całość oraz są wyświetlane po sobie z określoną wcześniej szybkością, przez co dają wrażenie ruchu. Podobną technikę wykorzystuje się w kinie i telewizji. Animacja może obejmować zmiany obiektów (wielkości, położenia, koloru), światła (jego natężenia, skupienia) i miejsca punktu orientacji. Można wyróżnić jej następujące rodzaje: animacja poklatkowa, w której tworzy się każdą ramkę po kolei, ma ona najczęściej formę mapy bitowej; wykorzystanie ramek kluczowych – wybrane ramki są generowane, a pozostałe obliczane; skrypty – w nich zawiera się opis właściwości danego obiektu; animacja interaktywna – w tym przypadku obiekty sterowane są przez użytkownika. Animację można stworzyć za pomocą odpowiedniego oprogramowania np. Adobe Flash, można również do tego użyć prostszych programów graficznych, jednak umożliwiają one jedynie tworzenie podstawowych, prostych rozwiązań. Jakie są główne zalety tworzenia komputerowych animacji? Umożliwiają one prostsze rysowanie ramek za pomocą komputera. Dzięki nim można dokonać przekształcenia obrazu, np. przesunąć dany obiekt w przestrzeni. Przy wykorzystaniu skryptów można opisać dane przekształcenia. Kolejna korzyść to automatyczne generowanie kolejnych sekwencji. Animacja daje duże pole do popisu w tworzeniu efektów specjalnych, banerów i innych form reklamowych. To też sposób na łatwą i bezpieczną archiwizację. Jest ona szczególnie przydatna, gdy całość informacji trzeba zawrzeć w jednej grafice, co jest bardzo istotne zwłaszcza w reklamie, kiedy na ograniczonej przestrzeni i w określonym czasie chce się przekazać najważniejsze treści. Animacje umożliwiają również łączenie się z danym interfejsem, tak jak poprzez przyciski. Strona www staje się przez to bardziej żywa i daje możliwość nie tylko prezentowania samych tekstów, ale zdobywa nowe, cenne walory. Głównym zadaniem animacji jest wzbogacanie i wzmacnianie przekazu multimedialnego, uatrakcyjnienie treści zawartej na www. Pełni ona również formą informacyjną i pokazową oraz stanowi rodzaj narracji. Umiejętnie wykorzystana może mieć także cenne walory edukacyjne. Animacja może w znaczący sposób przyczynić się do wzrostu funkcjonalności i atrakcyjności strony, zwłaszcza gdy jej zadaniem jest eksponowanie danego produktu. Należy jednak uważać, by nie warstwa estetyczna i zastosowane efekty czy nowatorskie rozwiązania nie wpłynęły niekorzystnie na jej czytelność i łatwość, z jaką możną się nią...

Czytaj dalej
Własna strona internetowa krok po kroku
Wrz29

Własna strona internetowa krok po kroku

Prowadząc dowolną działalność – zawodową, twórczą, hobbystyczną, wolontariacką lub inną, chcąc przybliżyć ją szerszemu gronu odbiorców, będących jednocześnie potencjalnymi klientami, warto założyć stronę internetową. Biorąc pod uwagę, że (według różnych statystyk) z Internetu korzysta już ponad dwadzieścia pięć milionów Polaków, hasło „nie ma Ciebie w sieci, nie istniejesz” nabiera większego sensu. Podjąwszy decyzję o uruchomieniu strony www warto zastanowić się, czy zwrócić się o pomoc do profesjonalisty – webmastera, który za zrealizowanie naszego pomysłu zażyczy sobie odpowiednią do włożonej pracy kwotę, czy może wykonać ją we własnym zakresie. Czasy, w których tworzenie witryn internetowych zarezerwowane było wyłącznie dla wąskiego grona specjalistów, już minęły. Obecnie, każdy kto ma dostęp do Internetu ma możliwość „postawienia” prostej strony www samodzielnie. Jak to zrobić? 1. Pomysł Tak jak w przypadku realizacji każdego przedsięwzięcia, zakładanie strony internetowej opiera się na trzech podstawowych krokach: pomyśle, projekcie i wykonaniu. Przed podjęciem jakichkolwiek działań musimy mieć pomysł – określiwszy wcześniej charakter prezentowanych za pomocą strony treści, musimy zdecydować, jaki rodzaj witryny będzie do niej najlepiej pasował: czy ma być to na przykład blog firmowy/osobisty, portal informacyjny, sklep internetowy, strona-portfolio, a może tak zwana wizytówka, przedstawiająca naszą firmę i jej ofertę. Korespondująca z profilem naszej strony powinna być również wybrana przez nas domena, czyli jej unikalny adres (nazwa internetowa), wskazujący na charakter witryny oraz ułatwiający jej pozycjonowanie (wypracowanie jak najwyższej pozycji w wynikach wyszukiwania). Mając już wypracowany pomysł należy zastanowić się nad wyborem, odpowiadającego naszym potrzebom, hostingu, czyli miejsca wyznaczonego na danym serwerze (stale pracującym i podłączonym do Internetu dysku/komputerze), na którym przechowywane będą wszelkie dane, umieszczane na stronie – pliki tekstowe i multimedialne, dane poczty elektroniczne, kont użytkowników itd. 2. Projektowanie Przechodząc do fazy projektowania, musimy wiedzieć jaki wygląd ma mieć nasza strona. Zgodnie z najnowszymi trendami, powinna ona wpisywać się w tendencję minimalistyczną, unikającą wielu kolorów, krzykliwych grafik oraz dużych rozmiarowo elementów multimedialnych. Niezależnie jednak od obowiązujących standardów, wygląd strony musi przede wszystkim oddawać jej charakter i odpowiadać upodobaniom docelowej grupy odbiorców, na przykład młodzieży, młodych rodziców, osób starszych, sportowców czy pasjonatów określonej dziedziny. W celu ułatwienia korzystania ze strony należy, jeszcze w fazie projektu, zadbać o jej wysoką użyteczność (funkcjonalność), między innymi poprzez unikanie jej przeładowania zbędnymi elementami, przejrzyste rozmieszczenie poszczególnych treści, gwarantujące czytelną kompozycję, zaplanowanie łatwego w obsłudze menu i systemu nawigacji, pozwalającej na bezproblemowe poruszanie się po stronie oraz dostosowanie jej parametrów do wymogów urządzeń mobilnych. Opracowaniu satysfakcjonującego nas projektu może pomóc wykonanie makiety strony internetowej, będącej w rzeczywistości jej stateczną (próbną) wersją, pozwalającą na szczegółowe zaplanowanie rozmieszczenia znajdujących się na niej elementów, takich jak logotyp, nagłówki, układ tekstu, zdjęcia i inne elementy graficzne, a także określenie jej parametrów technicznych oraz sposobu jej...

Czytaj dalej
Strona 1 z 512345