Minimalistyczny web design nadal w modzie
Wrz19

Minimalistyczny web design nadal w modzie

Już od kilku lat minimalizm jest jednym z dominujących trendów w web designie. Specjaliści prognozują, że ta moda może jeszcze potrwać – a przynajmniej nie odejdzie do lamusa w przyszłym roku. Czym się charakteryzuje minimalistyczny design strony internetowej? Podstawowa zasada brzmi: mniej znaczy więcej. Nie znaczy to, że wygląd strony jest niedopracowany. Wręcz przeciwnie – grafik musi nieraz wykonać sporo pracy i mieć wyczucie, żeby osiągnąć maksymalny efekt przy zastosowaniu minimum środków. Jak to działa w praktyce? Typowe jest białe tło, brak ozdobników i jaskrawych barw – zwykle występują jedynie 2-3 kolory, nie licząc zdjęć czy diagramów. Częste są kontrasty między wspomnianym białym tłem a ciemnymi elementami. Stosuje się też przeważnie flat design, czyli uproszczone elementy bez gradientów i cieniowania. Inna cecha to szerokie marginesy i duże odstępy między elementami, dające wrażenie przestrzenności. Ważną rolę odgrywa typografia – prosta, ale wysmakowana; fonty są z reguły bezszeryfowe. Kolejnym charakterystycznym elementem są hero headers, czyli duże, wyraźne nagłówki na tle zdjęcia lub obrazka. Menu jest uproszczone i przeważnie ukryte w formie tzw. hamburgera (trzech poziomych pasków). Kluczowe elementy umieszcza się na górze, w miejscu, które nie wymaga żadnych działań (np. przewijania) ze strony użytkownika. Zalety minimalistycznego designu to przede wszystkim przejrzystość, intuicyjność i łatwość użytkowania. Można bardziej skupić się na treści, gdy nie ma zbyt wielu rozpraszaczy. Poza tym minimalistyczne strony ładują się szybciej i łatwiej je dostosować do ekranów o różnych wymiarach, co ma znaczenie zwłaszcza dla użytkowników urządzeń mobilnych. Wskazuje się, że minimalistyczne strony mają większy współczynnik konwersji (jest to liczba dokonanych pożądanych czynności, np. zakupów, w stosunku do liczby odbiorców). Użytkownikom łatwiej znaleźć to, czego potrzebują i jest mniejsze ryzyko, że się zniechęcą, zanim dokonają...

Czytaj dalej
Przestarzała strona internetowa – czas ją przerobić!
Maj22

Przestarzała strona internetowa – czas ją przerobić!

Obecnie niemal każda firma ma swoją stronę internetową, a o potrzebie posiadania strony i płynących z tego korzyściach chyba nikogo nie trzeba już przekonywać. Jednak przestarzała strona – zarówno pod względem wizualnym, jak i technologicznym – robi niezbyt korzystne wrażenie na odwiedzających, przez co nie mamy tylu klientów, ilu byśmy mogli. Strona jest wizytówką firmy i wpływa na jej wizerunek – podobnie jak np. biuro. Dlatego strona, która nie była zmieniana od 10 lat, może stwarzać podobne wrażenie, jak dawno nieremontowane pomieszczenia biurowe o niemodnym wystroju. Niestety, w sieci można znaleźć wiele stron firmowych, które mają prawdopodobnie tyle lat, co sama firma. Poza niedostatkami czysto estetycznymi, bywają one nieczytelne i niedostosowane do współczesnych technologii, przez co pozostawiają firmę daleko w tyle za konkurencją. Dlatego, gdy po założeniu firmy zlecamy stworzenie strony, nie łudźmy się, że wystarczy nam ona raz na zawsze. Na początku należy podjąć decyzję – czy stworzyć nową stronę, czy wprowadzić zmiany na istniejącej. Wiele zależy od aktualnej sytuacji. Strona może być kompletnie niezgodna z obecnie obowiązującymi standardami, a może się okazać, że potrzebne są jedynie niewielkie poprawki, które ułatwią i uprzyjemnią korzystanie z niej. Musimy też się zastanowić, jaki cel chcemy osiągnąć i czy nasza aktualna strona ten cel realizuje. Możliwości modyfikacji jest sporo – tu wymienimy jedynie kilka przykładowych. Obecnie standardem jest już responsywność, czyli dostosowanie do różnych urządzeń. Strona powinna wyglądać i działać dobrze zarówno na dużym monitorze, jak i na ekranie smartfona. Aktualnie wiele osób korzysta z internetu głównie lub wyłącznie na urządzeniach mobilnych. Dlatego strona, która jest niewygodna w obsłudze na takim urządzeniu, zniechęca potencjalnych klientów. Kolejną kwestią, której powinniśmy poświęcić uwagę, jest wycofanie się z technologii Flash. Jeszcze kilka-kilkanaście lat temu była ona bardzo popularna ze względu na ciekawe efekty wizualne. Jednak zagrożenia dla bezpieczeństwa użytkowników oraz problemy w użytkowaniu przez urządzenia mobilne sprawiły, że jest wycofywana. Jak pisaliśmy w poprzednim artykule, wkrótce zakończy się jej wsparcie przez producenta i przeglądarki. Dlatego jeśli strona firmy została zaprojektowana we Flashu, zmiana będzie nieunikniona. Nie poleca się także dużej ilości multimediów. Oczywiście od czasu do czasu można umieścić animację czy materiał wideo, ale nie powinny one wpływać znacząco na czas ładowania się strony. Nadmiar dużych i wolno ładujących się plików powoduje zniecierpliwienie użytkowników i nadmiernie zużywa transfer na urządzeniach mobilnych. Bardzo ważne są aktualne i wartościowe treści. Jeśli strona do tej pory nie posiada CMS (systemu zarządzania treścią), warto go wprowadzić. Dzięki temu będzie można w łatwy sposób dodawać nowe treści i zmieniać istniejące – nawet jeśli nie mamy specjalistycznej wiedzy technicznej. Jeśli strona jest na razie tylko wizytówką naszego biznesu (zawiera jedynie prezentację firmy i informację o jej ofercie), zastanówmy się nad...

Czytaj dalej
Koniec Flasha
Kwi20

Koniec Flasha

Strony we Flashu stały się bardzo popularne kilkanaście lat temu ze względu na efektowny wygląd i niespotykane wcześniej możliwości. Jednak obecnie odchodzi się od tej technologii, gdyż ma ona znaczące mankamenty. W 2017 r. firma Adobe wydała oficjalny komunikat o zakończeniu jakiegokolwiek wsparcia dla Flasha do końca 2020 r. Do tego czasu mają się pojawiać aktualizacje zabezpieczeń. Trochę historii Początki Flasha datuje się od lat 90. W tamtych czasach była to technologia rewolucyjna, gdyż pozwalała na tworzenie stron internetowych i gier, które dzięki niej zyskały zupełnie nowy wygląd. Prekursorem był SmartSketch, którego nazwę zmieniono następnie na FutureSplash. Jego twórcą była firma FutureWave Software. Następnie produkt zakupiła firma Macromedia i nazwała go Macromedia Flash 1.0. Był to system dwuelementowy, składający się z edytora grafiki i animacji oraz z odtwarzacza. Powstało w sumie 8 wersji Macromedia Flasha. Następnie firma Macromedia została zakupiona przez Adobe Systems w 2005 r., wraz ze swoimi produktami, takimi jak Flash, Dreamweaver, Shockwave, Fireworks (już nierozwijany) i Authorware (również nierozwijany). Wady Głównym mankamentem stron we Flashu są luki bezpieczeństwa. Stwarzają one duże możliwości ingrencji ze strony hakerów. Wskutek wycieku dokumentów z firmy hakerskiej Hacking Team wyszło na jaw, że to właśnie Flash był często wykorzystywany do szpiegowania użytkowników i do ataków typu malware. Niejednokrotnie wskazywano też, że Flash obciąża pamięć urządzeń i powoduje ich przegrzewanie się, a także bardzo skraca czas działania baterii. Dlatego urządzenia mobilne firmy Apple nigdy nie miały odtwarzacza dla tego formatu, a z urządzeń z Androidem wycofano go w 2012 r. Od 2010 r. możliwe jest odtwarzanie treści Flash w aplikacjach stworzonych w Adobe AIR instalowanych na urządzeniach z iOS. Kolejnym problemem dość długo była niedostępność treści we Flashu dla osób niewidomych lub niedowidzących. Nie było możliwości odtworzenia ich przez programy czytające ekran ani powiększenia fontów. Stało się to możliwe od wersji 6 Flash Playera. Inną wadą jest trudność w indeksowaniu treści we Flashu przez wyszukiwarki – np. indeksowanie bez zachowania kontekstu czy indeksowanie tylko strony głównej. Oznacza to z kolei gorsze pozycjonowanie. Prawidłowe wyświetlanie treści we Flashu w przeglądarce wymaga odpowiedniego pluginu, a potem jego regularnego aktualizowania. Co dalej? Już od pewnego czasu w Google Chrome elementy we Flashu należy aktywować kliknięciem – są uruchamiane na życzenie użytkownika. Przewiduje się, że w 2019 r. będą one domyślnie wyłączone i trzeba będzie je uruchamiać w ustawieniach. Natomiast w 2020 r. Chrome ma w ogóle zaprzestać wsparcia dla Flasha. Jak wspomniano, firma Adobe również planuje wydawać aktualizacje Flasha jedynie do końca 2020 r. Flash jest zastępowany przez inne technologie, takie jak HTML5, WebGL i WebAssembly, które dają podobne efekty wizualne, a są bezpieczniejsze i nie potrzebują dodatkowych wtyczek. Oznacza to, że przestarzałe flashowe aplety...

Czytaj dalej
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
Strona 1 z 612345...Ostatnia »