Portfolio wybranych realizacji
Strona domowa brytyjskiej agencji sprzedającej usługi mailingowe. Wdrożony indywidualny projekt graficzny, dedykowane rozwiązania zwiększające użyteczność nawigacji i czytelność treści. Moduł bloga, formularz kontaktowy, zoptymalizowana galeria logotypów, integracja z serwisami społecznościowymi.
Zleceniodawca: IdeasOn
Witryna studia WolFlow, zajmującego się projektowaniem i produkcją dedykowanych animacji i prezentacji multimedialnych. Strona wyposażona w zaawansowany formularz kontaktowy, umożliwiający wysyłanie zapytania o wycenę. Animacja na stronie głównej, portfolio, blog oraz podstrona z miniaturami zespołu pracowników.
Zleceniodawca: WolFlow Studio
Serwis Polskiego Stowarzyszenia na rzecz Osób z Niepełnosprawnością Intelektualną. Wyposażony w dodatkowe funkcje poprawy czytelności dla osób słabo widzących. Strona posiada dział z wyszukiwarką publikacji, sprawozdań rocznych oraz zamówień publicznych, a także blog aktualności i rozbudowaną galerię. Sekcja Koła terenowe umożliwia dodawanie lokalizacji placówek na terenie całego kraju.
Zleceniodawca: Adah sp. z o.o.
Strona renomowanej agencji tłumaczeń. Cztery wersje językowe, integracja z serwisami społecznościowymi oraz moduł bloga. Wdrożona grafika wg typu single-page z zakotwiczoną nawigacją. Wersja mobilna i system zarządzania treścią w standardzie.
Zleceniodawca:
Best Translation & Conference Service Sp. z o.o.
Strona internetowa producenta układów chłodzenia do pojazdów oraz urządzeń przemysłowych i wojskowych. Minimalistyczna szata graficzna – treść uporządkowana w szerokie akapity przeplatane zdjęciami. Dwie wersje językowe strony, moduł wyszukiwania i aktualności. Strona kontaktowa wyposażona w formularz i mapę google.
Zleceniodawca: Adah sp. z o.o.
Witryna legendarnego polskiego zespołu. Dyskografia, wideo, fotografie, historia. Możliwość odtwarzania muzyki i przeglądania tekstów piosenek. Odpowiednio wdrożona szata graficzna pozwala na wymianę grafiki w panelu administracyjnym bez zaburzenia układu widocznego na stronie.
Zleceniodawca: Adah sp. z o.o.
Witryna fundacji sławnego gitarzysty. Pełna dyskografia z możliwością odtwarzania setek plików dźwiękowych, nut i tekstów. Rozbudowana galeria fotografii, publikacji i materiałów wideo. Dwie wersje językowe. Wersja na urządzenia mobilne i system zarządzania treścią strony.
Zleceniodawca: Adah sp. z o.o.
Serwis informacyjny prezentujący aktualności z regionu. Prasowy układ treści wzbogacony o czytelną nawigację oraz podział artykułów na kategorie. Dodatkowo galerie zdjęć, wideo, wyszukiwanie, moduł z prognozą pogody. Odpowiednio zorganizowane zaplecze strony umożliwia administratorowi wygodne zarządzanie treściami i funkcjami.
Zleceniodawca: Polish Language Services
Strona dla jednej ze spółek Skarbu Państwa. Integracja dostarczonego projektu graficznego z rozbudowaną strukturą treści. Wyszukiwarka, linki do serwisów społecznościowych, moduł aktualności, dodatkowe menu. Wersja mobilna i panel zarządzania treścią w standardzie.
Zleceniodawca: CrowDesign
Strona ogólnopolskiej akcji na rzecz integracji osób z niepełnosprawnością, organizowana przez głównego polskiego przewoźnika. Przejrzysta strona z czytelną prezentacją treści i materiałów wideo, wzbogacona w elementy identyfikacji wizualnej, połączenie z mediami społecznościowymi i funkcję poprawy czytelności treści.
Zleceniodawca: Adah sp. z o.o.
Witryna warszawskiego dewelopera z wygodną funkcją przeglądania inwestycji. Dwie wersje językowe strony, a także moduł aktualności oraz podręczny formularz kontaktowy z mapą. Wersja mobilna i panel zarządzania treścią w standardzie.
Zleceniodawca: Adah sp. z o.o.
Strona konferencji hakerów i programistów. Wdrożenie dostarczonej grafiki wg schematu single-page. Dodatkowe funkcje nawigacji pionowej umożliwiają wygodne przemieszczanie się do wybranej sekcji. Wersja mobilna i panel zarządzania treścią w standardzie.
Zleceniodawca: Litchi
Strona internetowa nowego osiedla w Warszawie. Estetycznie zakomponowana treść oraz pełny wykaz mieszkań z załączoną dokumentacją oraz możliwością uzupełniania rezerwacji. Wersja mobilna i panel zarządzania stroną w standardzie.
Zleceniodawca: Adah sp. z o.o.
Internetowy katalog miejsc i instytucji w Lesznie. Wyszukiwarka oraz czytelny podział na kategorie i hasła tematyczne. Możliwość filtrowania i wygodna nawigacja przy pomocy dodatkowych menu bocznych. Dla każdej podstrony miejsca mapa, slajder i moduł komentarzy. Wersja mobilna i panel zarządzania treścią w standardzie.
Zleceniodawca: Polish Language Services
Witryna dla producenta oświetlenia. Praktyczne rozwiązania zintegrowane z minimalistyczną grafiką. Asortyment podzielony na kategorie, a podstrony produktów wyposażone w załączniki z danymi technicznymi. Wyszukiwarka i moduł aktualności. Wersja mobilna i panel zarządzania treścią w standardzie.
Zleceniodawca: Adah sp. z o.o.
Strona typu single-page dla biznesowej szkoły języków. Implementacja licznych rozwijanych i przewijanych modułów, które umożliwiają publikację większej ilości treści na mniejszym obszarze. Menu na stałe przyczepione do górnej krawędzi strony ułatwia nawigację. Formularz kontaktowy i pełnej szerokości mapa.
Zleceniodawca: Litchi
Strona agencji brandingowej. Proste formy zestawione z animacjami. Portfolio podzielone na kategorie. Blog aktualności, dwie wersje językowe, formularz kontaktowy i mapa dostosowana estetyką do reszty strony. Wersja mobilna i panel zarządzania treścią w standardzie.
Zleceniodawca: Litchi
Strona dystrybutora z branży motoryzacyjnej. Strona główna z czytelną prezentacją, asortyment uporządkowany na podstronach kategorii. Każdy produkt na osobnej stronie z danymi technicznymi i zdjęciami. Aktualności i strona kontaktowa wyposażona w rozbudowany formularz i rozwijane zakładki z adresami sprzedawców regionalnych.
Zleceniodawca: Moretti Parts
Profesjonalne strony internetowe to:
Pełna funkcjonalność
Estetyczny wygląd
Wersja mobilna na komórki i tablety
Możliwość edycji i dodawania zawartości
Poprawny kod wg standardów html i google
Właściwie zorganizowana treść
Pełna funkcjonalność
Strona internetowa może posiadać szereg różnorodnych funkcji, które umożliwiają osobie odwiedzającej witrynę zapoznanie się z treścią. Teksty, zdjęcie, ofertę lub produkty można rozdzielić na podstrony, a te właściwie zorganizować w linki np. w menu głównym. Dobrze zorganizowana nawigacja to podstawowy element profesjonalnej strony internetowej.
Zdjęcia można zebrać i zaprezentować w formie slajdera lub galerii miniatur. To najczęściej spotykany i bardzo praktyczny sposób prezentacji treści wizualnych. Inne funkcjonalne rozwiązania to np. formularz kontaktowy, mapka google czy przycisk przewijania do początku strony. Ilość i kombinacje funkcji na stronie są w zasadzie nieskończone, ale im jest ich mniej tym lepiej. Powinny być za to czytelne i łatwo dostępne.
Estetyczny wygląd
Liczy się prostota grafiki, co wcale nie oznacza braku estetyki, a raczej minimalizm, który powinien iść w parze z łatwą obsługą nawigacji. Paletę kolorów można dobrać do charakteru treści lub oferty. Bardzo dobry dodatkiem jest wkomponowanie w layout strony zdjęć, które wzbudzą pożądane emocje u odbiorcy.
Niezwykle ważnym elementem jest typografia, czyli krój czcionki dla nagłówków i akapitów. W nagłówkach warto puścić wodze fantazji i dobrać ciekawy, ale odpowiedni do przekazu strony styl i kolor. Akapity z kolei muszą być łatwe do czytania, więc na pewno sprawdzi się czcionka o prostym kroju. Trzeba też pamiętać o interlinii i długości wiersza. Czytelność na pierwszym miejscu.
Wersja mobilna
Większość wejść na stronę wykonywana jest z urządzeń mobilnych, czyli smatfonów i tabletów. Profesjonalna strona internetowa musi być obowiązkowo responsywna. Polega to na dostosowaniu wyglądu strony do wielkości ekranu urządzenia tak, żeby wszystkie informacje były nadal tak samo czytelne.
Strona wyposażona w wersję mobilną umożliwia przesuwaniu lub skalowanie części elementów z zachowaniem odpowiedniej wielkości dla tekstów. Część treści i funkcji, które nie są priorytetem można wyłączyć dla widoku na mniejszym ekranie. Dzięki właściwemu wykorzystaniu responsywności strona będzie czytelna na dowolnym urządzeniu i na urządzeniach przenośnych będzie ładować się szybciej.
Możliwość edycji
Administrowanie własną stroną internetową nie jest konieczne, ale bardzo ułatwia aktualizację treści w przypadku, kiedy chcemy dokonać zmian i nie mamy ochoty zlecać tego za każdym razem programiście.
Prostota panelu zarządzania nie wymaga umiejętności informatycznych, czy programistycznych, a daje dostęp do wielu funkcji. Możliwość administracji sprawdza się szczególnie wtedy, kiedy trzeba być na bieżąco, np. zaktualizować ofertę, dodać najnowsze zdjęcia, zmienić dane kontaktowe. Panel zarządzania zabezpieczony jest hasłem i dostępny tylko dla administratora lub wyznaczonych przez niego osób.
Poprawny kod
Kod strony to część niewidoczna dla osoby odwiedzającej, ale za to szczegółowo analizowana przez boty Google, które weryfikują jego jakość. Każda profesjonalna strona internetowa powinna dotrzymywać standardów HTML i Google.
Dobry kod to wiele korzyści, do których można zaliczyć chociażby bezpieczeństwo i lepsze pozycjonowanie. W przypadku strony korzystającej z panelu administracyjnego mamy również do czynienia z kodem PHP, z którego korzystają serwery, na których przechowujemy stronę. Tutaj też ważne są aktualne wersje oprogramowania, które umożliwiają korzystanie z dodatkowych funkcji przy tworzeniu strony oraz czynią ją bardziej bezpieczną.
Organizacja treści
Najważniejsza część na stronie internetowej to informacja, czyli teksty. To w jaki sposób zostaną zredagowane, a później uporządkowane ma kluczowe znaczenie.
Właściwe rozmieszczenie tekstów na stronie głównej i podstronach umożliwia sprawna komunikację z osobą odwiedzającą stronę. Odpowiednio przygotowana oferta trafi do użytkownika, wzbudzi zaufanie, zachęci do dłuższego przeglądania zawartości. Redakcja treści przeznaczonych na stronę internetową powinna również uwzględniać kwestię SEO, czyli pozycjonowania. Oprócz użytkowników stronę odwiedzają również roboty Google, które oceniają treści i na tej podstawie umieszczają link do strony w wynikach wyszukiwania.
Przykładowe typy stron, organizacja treści i funkcji
Wizytówka
Strona typu single-page, czyli bez podstron, ale do przewijania z góry na dół. Wszystko co najważniejsze w jednym miejscu. Na górze nazwa firmy, slajder z fotografią lub hasłem reklamowym. Niżej kilka słów o firmie lub zespole. Galeria zdjęć produktów, czy usług wraz ze szczegółowym opisem. Na koniec formularz, dane kontaktowe oraz mapa google z lokalizacją. W stopce linki do serwisów społecznościowych. Całość wygodna do przewijania na urządzeniach mobilnych.
Dla firmy
Treść podzielona na kilka podstron. Strona główna z logotypem, zachęcającą fotografią i hasłem, a poniżej kilka słów na temat usług. Menu główne w górnej części prowadzące, kolejno, do podstrony O nas, z opisem marki, firmy, zespołu, a następnie do podstrony Oferta ze szczegółowym opisem produktów, usług, załącznikami itp. Kolejna pozycja z menu to Realizacje, a tam rozbudowana galeria zdjęć z opisami. Na podstronie Kontakt można zamieścić formularz, dużą mapę z możliwością przesuwania i powiększania oraz linki do profilów społecznościowych.
Złożona
To np. serwis z lokalnymi aktualnościami, albo strona firmy z większym asortymentem. Aktualności lub produkty można podzielić na kategorie, z których każda będzie miała osobną podstronę, na której z kolei mogą być zamieszczone linki z miniaturami do artykułów lub podstron z konkretnymi produktami, czy usługami. Każda strona może posiadać galerię, slajder, dowolny układ tekstu. Do sprawnej nawigacji służą rozbudowane albo dodatkowe menu. Dostępne formularze kontaktowe, mapy google, integracja z serwisami społecznościowymi i wiele innych spersonalizowanych funkcji.
Blog
Strona główna z reprezentacyjną grafiką, menu bocznym i listą najnowszych artykułów. Miniatury artykułów linkują do podstron z kompletną treścią, gdzie można również dodawać galerie zdjęć. Każdy artykuł wyposażony w łatwy do zarządzania system komentarzy. Pełna integracja z mediami społecznościowymi umożliwia szybkie dzielenie się treścią i popularyzowanie strony. W bocznej kolumnie lub stopce dodatkowe menu z kategoriami artykułów.
Dla właściciela strony
Obowiązujące standardy to priorytet. M.in. dlatego, że jeśli kod strony spełnia wymogi HTML i Google, sprzyja to pozycjonowaniu w wynikach wyszukiwania. Prosty w obsłudze panel administracyjny strony umożliwia wygodne zarządzanie treścią, tzn. edycję i dodawanie tekstów, zdjęć, materiałów wideo, załączników. Możliwa jest też modyfikacja menu i tworzenie kolejnych podstron. W standardzie również zabezpieczenia przed włamaniami, spamem i wirusami.
Dla odwiedzających
Szybkie ładowanie strony na komputerach stacjonarnych jak i na urządzeniach mobilnych to źródło pozytywnych wrażeń dla odwiedzających i świadczy o profesjonalnym podejściu właściciela strony. Czytelny a jednocześnie estetyczny układ treści, dostosowany do wielkości ekranu, ułatwia przekazanie ważnych informacji na temat marki, usług lub produktów. Praktyczna i prosta w obsłudze nawigacja sprawnie przenosi użytkownika do wybranych treści.
Od pomysłu do produktu
Proces realizacji
Jeśli jest już pomysł na stronę należy zastanowić się jakiego rodzaju i jaką ilość treści i informacji tam opublikujemy. Czy będą to przede wszystkim teksty, czy może sporo zdjęć, albo załączone pliki. Trzeba też pamiętać o funkcjach prezentacji (np. logotyp, galeria, slajder) i interakcji (np. menu, formularz, przyciski). Następnie należy przemyśleć jak uporządkować wszystkie treści i funkcje tak, żeby były czytelne i łatwo dostępne dla osoby odwiedzającej stronę. Czy wystarczy jedna strona, czy będzie potrzebnych kilka, a może kilkadziesiąt podstron. Później wypada określić wygląd każdej z tych podstron. Im mniej zróżnicowany układ treści tym wygodniej będzie czytać stronę. Przy rozbudowanych serwisach warto przygotować prototyp (szkic), który umożliwi praktyczne testowanie różnych użytecznych rozwiązań.
Grafika i zaplecze
Kiedy cała treść jest już uporządkowana można przystąpić do opakowania strony w grafikę. Dobrać kolorystykę, dopasować krój czcionki, wybrać najlepsze zdjęcia. Właściwa paleta i szata graficzna ma sprawić, że przeglądanie strony będzie przyjemne, a jednocześnie będzie sprzyjać identyfikacji marki, produktu, czy usługi. Warto pamiętać, że zbyt wyszukana, agresywna czy eklektyczna grafika może działać negatywnie na część odwiedzających, dlatego żeby zadowolić wszystkich trzeba postępować wg standardów prezentacji treści.
Równolegle trwają pracę nad techniczną warstwą strony, w tym wersją mobilną. Instalowany jest panel zarządzania i wszystkie funkcje potrzebne dla administratora. W panelu budowana jest cała struktura podstron tak, aby było łatwo zarządzać treścią i funkcjami, ale przy zachowaniu norm optymalizacji. Po zakończeniu prac nad częścią zewnętrzną jak i wewnętrzną witryny można zapoznać się ze specjalnie przygotowaną instrukcją wideo, która w klarowny sposób opisuje administrowanie stroną.