Jak zapewniliśmy usprawnienia dla osób niepełnosprawnych i przygotowaliśmy odświeżony design, zgodny z zasadami UX, wyposażony w intuicyjny kalendarz.

Zdjęcie telefonu z wyświetlonym menu na stronie internetowej

Śledź nas w mediach społecznościowych:

kbf logo

Festiwal operowy Opera Rara stanął przed problemem nieintuicyjnej strony internetowej. Użytkownicy szybko opuszczali witrynę, ponieważ nie mogli znaleźć potrzebnych informacji. Naszym zadaniem było stworzenie nowej, czytelnej i funkcjonalnej strony internetowej z udogodnieniami dla osób niepełnosprawnych.

Projektowanie stron internetowych - wizualizacja nagłówka w wersji mobilnej

O projekcie

Opera Rara to festiwal operowy, który pokazuje różnorodność i wyjątkowość tego gatunku muzycznego. Zabawa, współuczestnictwo, twórcza ekspresja oraz pozycja Opery jako marki i ośrodka życia towarzyskiego, były głównymi wskazówkami podczas tworzenia projektu strony internetowej.

Festiwal operowy Opera Rara potrzebował odświeżyć swoją stronę internetową. Nowy powiew był już niezbędny, ponieważ stara wersja strony była przestarzała. Naszym zadaniem było stworzenie nowej, czytelnej i funkcjonalnej strony WWW z udogodnieniami dla osób z niepełnosprawnościami.

Projekt został nagrodzony przez Csswinner.com

    Programista Robert o projekcie:

    Administrator serwisu może samodzielnie zarządzać każdą jego sekcją. Artyści, lokalizacje i spektakle są ze sobą logicznie powiązane, dzięki czemu odnalezienie wszystkich informacji jest wyjątkowo proste tak od strony użytkownika, jak i zarządzającego stroną.

    Robert Orliński

    Programista
    Brave New

    kbf logo
    Web development - zdjęcie z przedstawienia teatralnego

    Główne założenia i początek projektu

    Gdy rozpoczynaliśmy prace nad projektem, wiedzieliśmy, że strona ma być bazą wszystkich informacji o festiwalach oraz miejscach, gdzie użytkownicy będą mogli sprawdzić program, lokalizacje eventów. Należało uwzględnić również odnośniki do systemu sprzedaży biletów na organizowane wydarzenia i koncerty.

    Głównym założeniem, które braliśmy pod uwagę na wszystkich etapach prac, była wygoda korzystania z serwisu i logiczne rozmieszczenie treści na stronie.

    W prezentacji pracy, wykorzystaliśmy zdjęcia Edyty Dufaj (zdjęcie pierwsze) i Alicji Wróblewskiej Black Shadow Studio (drugie zdjęcie)

    Co było kluczowe w trakcie prac?

    • Design i usability

      Strona festiwalu przeszła całkowitą przemianę pod względem wizualnym. Pierwszym elementem, który można dostrzec po wejściu na nią, jest nowa kolorystyka, wykorzystująca elementy identyfikacji wizualnej. Połączenie ciemnego tła z wyrazistym odcieniem zieleni odzwierciedla klimat wydarzenia, piękno i symbolizuje oderwanie od codzienności. Zdjęcia dostarczone przez organizatorów wydarzenia pomogły podkreślić artystyczny charakter wydarzenia.
    • Strona z harmonogramem wydarzeń

      Interaktywny harmonogram - Jedną z najciekawszych funkcjonalności jest harmonogram. Program wydarzeń został wyposażony w rozbudowane dynamiczne filtrowanie. Co więcej, poszczególne działy – lokalizacje, artyści i wydarzenia – zostały ze sobą logicznie powiązane, aby użytkownik szybko mógł znaleźć potrzebne informacje.
    • Strona dla osób z niepełnosprawnościami i dwie wersje językowe

      Wszystkie treści umieszczane na stronie są dostępne w dwóch wersjach językowych. Na stronie znalazły się także ułatwienia dla osób z niepełnosprawnościami, które mogą zmienić rozmiar tekstu i kontrast.
    • Pełny system zarządzania treściami na stronie

      Administrator może swobodnie zmieniać treści i zdjęcia w obrębie całego serwisu, a także dodawać nowe działy i modyfikować je w prosty sposób. Strona jest bardzo dobrze zoptymalizowana i szybka. Jej odświeżenie pozytywnie wpłynęło na liczbę użytkowników i wydłużyło średni czas przebywania odwiedzającego na stronie.
    Tworzenie stron internetowych - wizualizacja menu witryny na urządzeniach mobilnych
    • Zdjęcie laptopa z wyświetloną stroną główną
    • Zdjęcie telefonu z wyświetlonym menu na stronie internetowej
    • Zdjęcie osoby przeglądającej witrynę
    • Zdjęcie MacBooka z wyświetloną stroną wydarzeń
    • Zdjęcie laptopa z otwartą stroną pojedynczego wydarzenia
    • Zdjęcie laptopa z otwartą witryną internetową
    • Zdjęcie telefonu pokazujące stronę z aktualnościami
    • Zdjęcie przedstawiające deskoptową wersję strony z mapą
    • Zdjęcie osoby przeglądającej stronę WWW
    • Wizualizacja strony z goścmi wydarzeń
    • Wizualizacja strony z informacjami o festiwalu
    • Wizualizacja układu informacji na stronie
    • Wizualizacja strony Kontakt w wersji mobilnej
    • Zdjęcie osoby przeglądającej stronę Kontakt
    • Wizualizacja newslettera na stronie internetowej
    • Zdjęcie przedstawiające układ strony pojedynczego wydarzenia

    Jak przebiegały prace nad projektem?

    Wordpress development - zespół przy pracy nad nową stroną WWW

    Po zapoznaniu się z problemami, które występowały na stronie festiwalu, przystąpiliśmy do tworzenia architektury informacji. Zaplanowaliśmy prace polegające na usprawnieniu działania wszystkich sekcji, organizację treści na stronie oraz główne założenia projektu graficznego.

    Podczas tworzenia widoków wszystkich podstron inspirowaliśmy się symboliką i przykładami zastosowanymi w identyfikacji wizualnej oraz wcześniej przygotowanymi materiałami promocyjnymi. Projekt graficzny poza walorami estetycznymi został tak zaprojektowany, aby w zrozumiały sposób przedstawiał wszystkie funkcjonalności, z których można skorzystać na stronie.

     

    Etap kodowania polegał na przygotowaniu wszystkich funkcjonalności, aby administratorzy mogli w przyszłości samodzielnie modyfikować zawartość serwisu. Dla artystów, wydarzeń i lokalizacji przygotowaliśmy osobne działy, by na zapleczu panował porządek, a zarządzanie treściami było jeszcze łatwiejsze.

     

    Ostatnią częścią projektu było uzupełnienie wszystkich treści na stronie. Archiwalne wpisy zostały przeniesione ze starej strony, a nowe podstrony uzupełnione tekstami dostarczonymi przez organizatorów. Całości dopełniły artystyczne zdjęcia z poprzednich edycji festiwalu.

    Zakres prac

    • Webdesign
    • Kodowanie strony www
    • Strona z harmonogramem wydarzeń - Stworzenie rozbudowanego harmonogramu online
    • Dostosowanie strony do standardów WCAG
    • Migracja treści
    • Wsparcie techniczne po uruchomieniu serwisu

    Duże znaczenie miał projekt serwisu, dlatego też każda z głównych podstron została zaprojektowana indywidualnie. Łącznie zaprojektowaliśmy prawie 50 odsłon!

    • Zrzut ekranu strony internetowej przedstawiający menu
    • Zrzut ekranu strony Aktualności
    • Zrzut ekranu strony z artystami
    • Zrzut ekranu strony błedu 404
    • Zrzut ekranu strony opisu ze zdjęciami
    • Zrzut ekranu strony pojedynczego artysty
    • Zrzut ekranu strony z listą wydarzeń
    • Zrzut ekranu strony harmonogramu
    • Zrzut ekranu przedstawiający stronę For Media
    • Zrzut ekranu przedstawiający szczegółowy harmonogram z kategoriami na stronie internetowej
    • Zrzut ekranu pokazujący stronę dostępną po wprowadzeniu hasła
    • Zrzut ekranu przedstawiający stronę Archiwum
    • Zrzut ekranu przedstawiający układ elementów na stronie głównej
    • Zrzut ekranu strony Kontakt
    • Zrzut ekranu strony galerii wideo i zdjęć
    • Zrzut ekranu strony z informacjami o festiwalu
    • Zrzut ekranu przedstawiający logo firm
    • Zrzut ekranu przedstawiający wydarzenia z wybranej lokalizacji
    • Zrzut ekranu przedstawiający wyszukiwarkę internetową
    • Zrzut ekranu przedstawiający układ strony z lokalizacjami
    • Zrzut ekranu przedstawiający wyniki wyszukiwania w witrynie