Age-responsive design
Cze22

Age-responsive design

Pojęcie Responsive Web Design zdobyło popularność już jakiś czas temu. Responsywność stron internetowych polega na tym, że dostosowują się one do urządzenia, na którym są wyświetlane – dzięki temu na każdym są czytelne i dobrze wyglądają. Taki sposób projektowania upowszechnił się w odpowiedzi na wzrost popularności urządzeń mobilnych. Wkrótce może to się okazać niewystarczające. Przewiduje się, że responsywność pójdzie jeszcze o krok dalej – strony będą dostosowywane do wieku użytkownika. Na czym polega age-responsive design? Kluczowe jest rozpoznanie czynników, które są ważne dla użytkowników w różnych grupach wiekowych. Należy tu wziąć pod uwagę wygląd strony, jej elementy i interakcje między nimi, funkcjonalność i treść. Przykładowo, dzieci będą chętnie przeglądały strony, które są kolorowe i mają dużo animacji, a niewiele tekstu. Z kolei dorośli mogą woleć strony w bardziej stonowanej kolorystyce, natomiast treści w formie tekstowej. Młodzi dorośli przeważnie nie mają problemu z odczytaniem sporej ilości tekstu zapisanego małym fontem. Dla osób starszych font musi być już większy. Należy też zastosować odpowiedni kerning, czyli odległości między parami znaków, by tekst był czytelny. Wydaje się, że to nic nowego. Przecież strony skierowane do określonych grup wiekowych różnią się od siebie. Na przykład strony z interaktywnymi materiałami edukacyjnymi dla dzieci wyglądają inaczej niż strony uniwersytetów trzeciego wieku. Jednak są one zwykle takie same niezależnie od tego, kto je ogląda. Natomiast w age-responsive design chodzi o to, by dana strona zmieniała się w zależności od potrzeb użytkownika – w tym przypadku wynikających z jego wieku. W założeniu użytkownik ma czuć się tak, jakby strona została zaprojektowana specjalnie dla niego. Jak dotąd age-responsive web design nie jest jeszcze powszechnie stosowany – co najwyżej niektóre jego elementy. Istnieją też różne wątpliwości, jak jego wprowadzanie miałoby wyglądać w praktyce. Na razie mówi się i pisze, że ma to być jeden z „gorących” trendów na 2017...

Czytaj dalej
Identyfikacja wizualna
Maj22

Identyfikacja wizualna

Identyfikacja wizualna firmy (ang. corporate identity, visual identity), to narzędzie służące kreowaniu wizerunku marki/firmy. Obejmuje ogół symboli i działań podejmowanych przez firmę w celu uzyskania spójnego wizerunku, czyli identyfikacji firmy na rynku. Ma ona pomóc klientom powiązać poszczególne symbole z konkretną marką, a także wyróżnić ją spośród innych funkcjonujących w danej dziedzinie. Identyfikacja wizualna obejmuje: logotyp, czcionkę,  kolorystykę, symbole graficzne, wygląd budynków, wygląd produktów i opakowań, wygląd materiałów marketingowych, stroje pracowników. Współczesna firma nie może istnieć bez strony internetowej, szczególnie jeśli jej zasięg wykracza poza niewielki, lokalny rynek. Jej stworzenie powinno być jednym z etapów projektowania strategii marketingowej oraz identyfikacji wizualnej marki. Nie może na niej oczywiście zabraknąć logotypu i symboli graficznych, które zostały wybrane jako elementy charakteryzujące daną markę. Ich ilość i umiejscowienie nie może być nachalne, ale odwiedzający stronę użytkownik musi mieć pewność, witrynę jakiej marki przegląda. Kolorystyka zastosowana na stronie powinna być spójna z tą stosowaną w logotypie, na materiałach marketingowych itp. Aby można było mówić o kolorystyce w kontekście identyfikacji wizualnej, należy pamiętać, że powinny się na nią składać nie więcej niż 2-3 kolory. Sprawdza się tu zasada „mniej znaczy więcej”. Taka liczba barw będzie łatwiejsza do zapamiętania, a odpowiednio dobrana kombinacja stworzy wyróżniający się, charakterystyczny symbol marki, jak żółto-czerwone logo restauracji McDonald`s, niebieski napis Pepsi, czy zielony Carlsberg. Już sam kolor spowoduje, że potencjalni klienci skojarzą logo z konkretną firmą, nawet jeśli nie jest im znana dokładna jej nazwa, nie mogą jej zapamiętać, ze względu np. na jej obcojęzyczne brzmienie. Wybierając kolor w celu stworzenia takiej identyfikacji należy pamiętać, że może on mieć różny odbiór w zależności od środowiska, np. logo partii politycznej w kolorze czerwonym będzie przywodzić na myśl jej lewicowe poglądy, które w Polsce kojarzą się z ruchami robotniczymi i walką o demokrację, w tym szczególnie NSZZ Solidarność, którego logo to charakterystyczny czerwony napis. Kolejnym elementem jest dobór czcionki. Jeśli zostanie użyta w logo, będzie się nieodłącznie kojarzyła z daną marką, tak jak wspomniany już Carlsberg, czy litera M dla sieci fast foodów. Projektując stronę należy o tym pamiętać, ale stosować ją z umiarem. Jeśli cała strona browaru zostałaby zapisana tak jak jego nazwa, czyli zdobionymi, przedłużanymi literami, byłaby mało czytelna. Jednak użycie jej w kilku miejscach spowoduje, że strona będzie spójna z wizerunkiem...

Czytaj dalej
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
Strona 1 z 512345