PureVolume

 
 
 
Blog Post
 
Projektowanie stron internetowych jest niezwykle dynamiczną dziedziną. Zmieniają się nasze oczekiwania względem stron www pod kątem wizualnym i funkcjonalnym, ewoluują gusta i trendy, dynamicznie rozwijają się nowe technologie i urządzenia, na których surfujemy po internecie. Zmieniają się także użytkownicy i ich kontekst użycia stron www – wszystko to wpływa na rozwój projektowania. Ale dokąd zmierzają te zmiany?

Z jakich elementów składa się web design?

Projektowanie stron www i aplikacji webowych rozwija się niezwykle szybko i staje się coraz szerszym przedsięwzięciem – wymaga coraz więcej czasu, kompetencji i odpowiedniej analizy. Warstwa wizualna interfejsów oraz odpowiednio przygotowanych treści odgrywa bardzo ważną rolę w user experience. Pierwsze wrażenie robimy tylko raz, a użytkownicy chcą korzystać z produktów, które są ładne, zrozumiałe i dają radość z korzystania.

REKLAMA

Steve Jobs powiedział, że design to nie tylko to, jak produkt wygląda, ale przede wszystkim to, jak działa. Podkreślił, jak bardzo ważny jest ten aspekt, a nie tylko przykuwająca wzrok estetyka urządzenia. Jeden z pionierów użyteczności w sieci, Steve Krug, bardzo słusznie stwierdził, że użytkownicy nie czytają, a jedynie przeglądają strony budowa stron internetowych www – dlatego też produkty do nich skierowane powinny być maksymalnie intuicyjne i zrozumiałe w działaniu.

Web design składa się zatem z kilku warstw: użyteczności i architektury informacji, estetyki i wyglądu oraz sposobu działania i interakcji. W związku z tym współpraca pomiędzy webdesignerami, projektantami user experience oraz front-end developerami nabiera kluczowego znaczenia w projektowaniu stron www.

Bardzo ważnym czynnikiem podczas realizacji prac projektowych staje się także mnogość finalnych urządzeń. Strony www wyświetlane na tabletach i smartfonach to dziś norma i musi to być uwzględniane w każdym nowym projekcie.

Trendy w web designie



Główne pojęcia w rozwoju web designu to zdecydowane upraszczanie (w działaniu ze strony użytkownika), ujednolicanie, zwiększanie roli interakcji i animacji oraz responsywność. W tych właśnie obszarach rynku działają projektanci interfejsów.

Flat design

Podejście do projektu graficznego, które z czysto estetycznego punktu widzenia ma tyleż zwolenników, co przeciwników. Rozwiązanie to zdobywa popularność przede wszystkim ze względu na czytelność i lekkość. W dużym uproszczeniu polega na projektowaniu elementów, które mają płaski wygląd (a raczej nie robią wrażenia „trzeciego wymiaru”). Upraszczane są kształty i zbliżane do podstawowych brył (koła, prostokąty itp.), co daje sporo możliwości tworzenia za pomocą arkuszy stylów CSS (elementy można odtworzyć przy pomocy tego właśnie narzędzia). Dąży się także to stosowania bardzo ograniczonej palety barw (przykłady takich próbek można znaleźć na www.flatuicolors.com), co zwiększa czytelność www, w szczególności podczas wyświetlania na urządzeniach mobilnych.

Jeśli przyjrzeć się powstającym projektom, to widać także pewne odejścia od „rdzennego” flat designu. Coraz częściej bowiem projektanci odchodzą od całkowicie płaskich layoutów, dodając elementy tworzące wrażenie trójwymiarowości, np. cienie lub gradienty.

Responsive web design (RWD)

Responsive web design w zasadzie przestało być trendem, a stało się standardem – przede wszystkim z powodu lawinowego wzrostu popularności tabletów i smartfonów.

Niezwykle ważnym wyzwaniem stało się takie zaprojektowanie elastycznego layoutu, aby mógł on się czytelnie wyświetlać na urządzeniach z ekranami o różnej rozdzielczości. Świetnie sprawdza się tutaj RWD, które daje możliwość stworzenia takiego elastycznego interfejsu i zastosowania odpowiednio przygotowanych zmian układu czy wyglądu elementów. Standardowe podejście polega na dostosowaniu www do urządzenia w zależności od szerokości jego ekranu. Zwraca się także uwagę na zmianę layoutu w zależności od wysokości (nie tylko szerokości) urządzenia czy orientacji ekranu (pionowa lub pozioma). Jest to bardziej zaawansowane i złożone podejście, ale w wielu projektach warto je zastosować.

Zaawansowane użycie CSS-u – szczególnie w przypadku animacji

Projektanci stosują coraz to nowsze efekty CSS (transformacje 3D, tryby przenikania warstw itp.) na szerszą skalę. Umożliwia to zakodowanie ciekawych interakcji i animacji na stronie, które ozdobią dodatkowo naszą witrynę.

CSS3 miał problemy z wydajnością i kompatybilnością, przez co nie działał na wielu starszych przeglądarkach. Sytuacja na szczęście uległa poprawie i to narzędzie jest już stosowane na szeroką skalę.

Możliwości jest tutaj bardzo wiele: wprowadzane są transformacje obrazów i plików wideo czy tworzone są całe elementy interfejsów lub wizualizacje. Często łączy się to z użyciem JavaScript.

HTML 5

Rosnąca wydajność i kompatybilność HTML 5 pomaga w wypieraniu z zasłużonego flasha elementów wideo, wykresów i tym podobnych. Samo przejście z HTML 4 na HTML 5 dla użytkownika w zasadzie jest niezauważalne, bo dotyczy ono tylko zmienionej organizacji i zawartości kodu źródłowego. Różnica widoczna jest tylko wtedy, gdy zastosowane są nowe możliwości języka, szczególnie znaczników: canvas (renderowanie kształtów i obrazów bitmapowych) oraz audio i wideo (osadzanie filmów i dźwięków). Potężną zaletą HTML 5 jest jego multiplatformowość, ponieważ działa on w praktycznie każdej nowoczesnej przeglądarce, a także na urządzeniach mobilnych. Prace nad HTML 5 trwają nadal, coraz lepiej jest także wspierany przez przeglądarki.

Poniżej strony pokazujące potęgę kombinacji HTML 5, CSS3 i JavaScriptu.

Użycie SVG i własnych fontów

Uznanie zyskuje także użycie plików wektorowych (najpopularniejszym formatem jest SVG) oraz czcionek obrazkowych – w dużej mierze jest to ukłon w stronę wyświetlaczy Retina od Apple (widoczne na nich elementy płynnie się „rozciągają” bez widocznych pikseli). Elementy te stosowane są do wyświetlania jednokolorowych ikon w formie plików wektorowych.

Ikony na witrynie www.virgin.com zostały przygotowane jako font (stworzona czcionka), co pozwala między innymi na bezstratne ich wyświetlanie witrynna Retinie.

Niekonwencjonalna nawigacja

Sposoby nawigowania na stronach www pozwalają tworzyć użyteczne witryny, ale ich twórcy świadomie łamią te standardy, tworząc coraz to nowsze metody. Efektem są witryny, w których nawigacja staje się elementem zabawy.

http://marketerplus.pl/teksty/artykuly/trendy-web-designie-bedzie-sie-projektowalo-witryny-internetowe-najblizszych-latach/

Posted Jan 08, 2016 at 6:03pm

Comments

 
 
Advertisement

Posts (2)

 
Signup for PureVolume, or Login.