Chciałbym pokazać w jaki sposób można łatwo i szybko odnowić wygląd i funkcjonalność stron internetowych. Tworzenie strony od nowa to stosunkowo duży wydatek. Jeżeli myślimy o nowej stronie internetowej mimo, że nasza aktualna publikacja została przygotowana według standardów i spełnia swoje zadanie to zwykle wymaga jedynie odświeżenia lub jak kto woli modernizacji lub redesignu.
Aktualizacja może dotyczyć wyglądu oraz funkcjonalności. Niektóre można wykonać szybko, np. dodanie przycisków portali społecznościowych zajmie nam parę chwil. O tym jakie cechy mają typowo nowoczesne strony www napisałem w osobnym artykule: Nowoczesne strony internetowe. Zatem, na co zwrócić uwagę?
Redesign stron internetowych – jaki jest tego cel?
Wygląd najwyraźniej zdradza nam wiek strony tak jak to bywa z różnymi innymi rzeczami. W tej sferze mamy też największe pole do popisu. Na pierwszy ogień niech pójdzie kolorystyka.
Aktualnie we wzornictwie internetowym dominują złamane, delikatne kolory i myślę, że tak będzie jeszcze jakiś czas. Chcąc nadać stronie uniwersalnego i ponadczasowego wyrazu stosujmy dużo bieli i odcienie szarości. Często staram się wszystkich do nich przekonywać. Jaskrawe i czyste kolory budzą skojarzenia z domyślnym formatowaniem na stronach internetowych, który się znudził i po prostu nie zachęca. Mam tutaj na myśli np. niebieskie linki.
To co zauważalnie skończyło swój termin przydatności to wąska strona i prosta siatka, która była popularna tuż po spopularyzowaniu idei responsive web design. Nie są cechą tzw. flat designu stąd od razu nasuwają nam na myśl lata przed 2012 rokiem kiedy to wręcz triumfowały. To samo tyczy się wyraźnych cieni, obramowań i zaokrąglonych krawędzi stosowanych wtedy bez umiaru.
Nowe podejście do projektowania związane z elastycznymi layoutami i urządzeniami dotykowymi trochę wymusiło dodanie do kompozycji większych przestrzeni. Pozytywnie wpływa to na wygodę przeglądania i zwiększa możliwości emfazy różnych elementów na stronie internetowej. Nie trzeba stosować denerwujących pop-up’ów aby przekazać coś ważnego. Czytaj więcej o minimalizmie na stronach internetowych, trendach w projektowaniu stron oraz sekretach dobrego designu.
Typografia
Typografia czyli to jak posługujemy się literami też ma ogromny wpływ na odbiór prezentowanej treści. Trendy w używaniu czcionek ciągle ulegają ewolucji i warto od czasu do czasu odświeżyć zastosowane style na naszej stronie. Możemy zmienić rozmiary, kroje, kolory, ciężar i rozmieszczenie napisów na bardziej nowoczesne w zaledwie kilka minut.
Sprawdź trendujące fonty (czcionki) przystosowane do stron internetowych, które można wykorzystać w odświeżeniu wyglądu strony internetowej.
Szerokość robocza
Szerokość robocza stron ulega stopniowemu powiększaniu. O ile kiedyś zawartość strony miała 960px to teraz zaczyna dominować rozmiar 1170px a nawet więcej. Wszystko z powodu coraz bardziej szczegółowych ekranów jakimi się posługujemy – także w urządzeniach mobilnych.
Responsywność
Każda strona internetowa musi być mieć responsywny układ, czyli musi wyświetlać wszystkie swoje elementy w naturalnej i użytecznej wielkości niezależnie od wielkości ekranu jakim posługuje się Internauta.
Flash to przeżytek
Flash – jeżeli jakaś strona zawiera tego typu elementy to możemy mieć pewność, że mamy do czynienia ze stosunkowo starym dziełem. Flash’a już nikt poważny nie używa i ma to same zalety: mniejsze zużycie transferu, mniejsze zużycie mocy obliczeniowej urządzenia na którym przeglądamy stronę, większą użyteczność takich aplikacji oraz lepsze możliwości wyszukiwania treści w Internecie.
Przejścia i animacje CSS3
W przeciwieństwie do wyżej poruszanego Flash’a, nowy standard arkuszy stylów CSS3 daje nam nowe możliwości w zakresie robienia efektownych przejść i animacji. Stosowane bez przesady dodadzą świeżości i uatrakcyjnią wygląd naszej starej, dobrej strony. Szczególnie ciekawym rozwiązaniem jest funkcja transition, która pozwala np. na płynną animację elementów dla których przewidziano styl hover oraz animate. Czytaj po co są animacje na stronach internetowych.
Przezroczystość
Przezroczystość i efekt szyby (tzw. glassmorphism) kiedyś nie były stosowane (bo nie było takich możliwości) stąd jest częściej widywana na nieco nowszych stronach internetowych. Stosowanie opacity lub trybu rgba z wyczuciem wraz ze stałym tłem background-position: fixed doda stronie bardzo nowoczesnego stylu.
Nowoczesne funkcjonalności
Datowanie strony możemy oprzeć o funkcjonalności jakie się na niej znajdują. Od paru lat na stronach dominują przciski typu Share oraz inne ciekawe i interaktywne elementy. Pokażę co możemy zrobić w tej kwestii przy unowocześnianiu stron internetowych.
Mapka
Mapka to w zasadzie żadna nowość, jednak nadal spotykamy strony, które jej nie mają lub mają jej substytut w postaci zdjęcia. Użyjmy aplikacji Mapy Google, dzięki której z łatwością umieścimy dopasowaną i interaktywną mapkę w zaledwie parę minut. Czytaj o najpopularniejszej technice umieszczania mapki na stronie internetowej czyli o Google Maps API.
Share czyli udostępnij to…
Przyciski Share, +1, Lubię to, Udostępnij i tak dalej w dość krótkim czasie zdominowały różnego rodzaju witryny. Można je po kolei dodawać dzięki specjalnym skryptom przygotowanym przez wydawców. Nie zapominajmy, że mogą to być zwykłe linki z odpowiednimi obrazkami.
Ta pomysłowa aplikacja rozmieści i zorganizuje rozszerzenia społecznościowe a co najważniejsze zaoszczędzi nam sporo pracy i będzie edytowalna w przyszłości. Dodatkowym atutem tego rozwiązania jest możliwość sprawdzenia statystyk aktywności użytkowników.
Podsumowanie
Web design ciągle się rozwija i ewoluuje z tego powodu strony w mgnieniu oka tracą świeżość. Dzięki paru sztuczkom możemy jednak przywrócić ich świetność i nie zawsze musi się to wiązać z ogromem pracy. Oczywiście, przeróbka layout’u na responsive będzie czasochłonna jednak dodanie przycisków share, zmiana kolorów i unowocześnienie czcionek nie powinno sprawić nikomu trudności. Odnowienie strony może dotyczyć także aspektów technicznych, o tym na co zwrócić uwagę i co warto zawsze udoskonalić piszę w artykule jakość stron internetowych.
Przykłady odświeżenia stron internetowych
Sprawdź jakie efekty może dać zastosowanie kilku moich sztuczek designerskich 🙂 :
Eurotek Connection:
Profiler
