Koncepcje desktop first i mobile first
wrz22

Koncepcje desktop first i mobile first

Podejście desktop first oznacza, że najpierw przygotowuje się stronę z myślą, by dobrze wyglądała na dużych ekranach, a dopiero potem dostosowuje się ją do mniejszych ekranów urządzeń mobilnych. Mobile first jest jego przeciwieństwem – w pierwszej kolejności zwraca się uwagę na dostosowanie strony do urządzeń mobilnych. Do niedawna koncepcja desktop first była jedyną stosowaną. Jednak ogromna popularność urządzeń mobilnych wymusza rozwiązania przeznaczone przede wszystkim dla nich. Według danych z początku 2017 r. już 3,77 mld osób na świecie korzysta z internetu, a prawie 5 mld – z telefonów komórkowych. Jeśli chodzi o ruch na stronach internetowych, 50% stanowią smartfony (wzrost o 30% w porównaniu do początku roku 2016), a 5% tablety (spadek o 5%). Udział innych urządzeń, w tym konsoli, jest nadal niewielki (0,12%), ale odnotowano przyrost o 33% w porównaniu do roku ubiegłego. W niektórych krajach liczba użytkowników korzystających z internetu wyłącznie na urządzeniach mobilnych przekroczyła już liczbę użytkowników korzystających z sieci jedynie na urządzeniach stacjonarnych. Na przykład, według danych dla Włoch z marca 2017 r., liczba osób łączących się z siecią tylko na urządzeniach mobilnych wyniosła w tym kraju 9,3 mln, podczas gdy użytkowników korzystających tylko z urządzeń stacjonarnych było 9,1 mln. Pojawia się przy tym pytanie, gdzie tak naprawdę przebiega granica między urządzeniem stacjonarnym a mobilnym. Kiedyś sytuacja była w miarę jasna. Mieliśmy komputery biurkowe, z dużymi monitorami i dużymi możliwościami, oraz telefony z małymi ekranami, małą mocą sprzętową i dużymi ograniczeniami jeśli chodzi o przesył danych (także ze względu na koszty). Teraz granice te się zacierają i przeglądanie internetu na urządzeniach mobilnych jest coraz bardziej komfortowe – choć aby zachować mobilność, ekrany siłą rzeczy muszą pozostać małe. Biorąc to wszystko pod uwagę, strona internetowa powinna być zaprojektowana elastycznie, z uwzględnieniem różnych rozdzielczości ekranów, aby dobrze wyglądać i prawidłowo działać na każdym urządzeniu. Niedawno ogromną popularność zdobył responsive web design. Koncepcja ta opiera się na rozpoznawaniu rozdzielczości wyświetlacza i automatycznym dostosowywaniu do niej sposobu wyświetlania stron. Jednak nieraz odbywa się to na zasadzie „co wyciąć z rozbudowanej strony, żeby zmieściła się na smartfonie”. Takie podejście nie zawsze się sprawdza, a okrojenie wersji desktopowej może nie wystarczyć. Sam sposób korzystania z internetu na urządzeniach mobilnych jest inny – i nie jest to tylko kwestia wielkości i rozmieszczenia elementów. W podejściu mobile first zaczynamy od funkcjonalnej, przejrzystej strony mobilnej. Dopiero potem zastanawiamy się, co możemy jeszcze dodać, by wykorzystać możliwości desktopu. Przez to strona jest wygodniejsza i bardziej spójna. Korzystanie z niej na urządzeniu mobilnym jest w pełni komfortowe, a przy otwarciu jej na urządzeniu stacjonarnym jeszcze zyskuje. Mamy pewność, że strona będzie kompatybilna z mniej zaawansowanymi urządzeniami. Przy tym musimy starannie przemyśleć treść, którą zamierzamy zawrzeć, co...

Czytaj dalej
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