Zamknięty

118053 Wykonanie UI aplikacji WWW (HTML5/CSS3)

Poszukuję web designera, który zaprojektuje i wykona interfejs użytkownika do mojej aplikacji (de facto strony WWW) volago.com.

Volago to portal informacji turystycznej, w którym atrakcje wyszukiwane są przez przeglądanie mapy. Podstawową funkcjonalnością będzie udostępnienie informacji turystycznej o zaznaczonym na mapie terenie. Np. Jadę do Kłodzka; co tam jest ciekawego? Prototyp znajduje się pod adresem http://beta.volago.com. Aktualnie jest to stronka "bez ładu i składu", ale w zasadzie działa, tzn. wyświetla dane z bazy i zawiera potrzebną logikę. Jednym z głównych wymagań jakie sobie postawiłem jest łatwość i szybkość przeszukiwania obiektów turystycznych i informacji o nich. Stąd wynika ogólny layout, na którym mapa jest cały czas po lewej stronie, a okno informacji po prawej. Eliminuje to irytujące przeładowywania strony i utratę kontekstu przeglądania mapy.

Technicznie portal jest wykonany jako SPA (Single Page Application), gdzie cała aplikacja jest uruchamiana po stronie klienta (framework AngularJS, Bootstrap) i korzysta tylko z REST API, które zaimplementowane jest w ASP.NET WebAPI.

Projekt jest prowadzony zgodnie z filozofiami Agile, Lean i Continous (Customer) Development. Aktualnie potrzebuję "akceptowanego wyglądu" aplikacji, tzn. takiego, który będzie można oficjalnie wystawić na świat. Pierwsza wersja nie musi być "na cacy", bo design będzie się rozwijał wraz z funkcjonalnościami.

Ja sam jestem bardziej techniczny (programowanie + bazy danych), więc zaprojektowanie UI chciałbym powierzyć komuś, kto zrobi to lepiej ode mnie. Moje zlecenie dotyczyłoby więc wykonania wizualnej warstwy tej aplikacji według poniższych wymagań.

Wymagania:

Techniczne:

* kod HTML5 + CSS3 + (koniecznie) Bootstrap + ew. jakieś jQuery jeśli będzie potrzebne

* Responsive design

* zależy mi aby najwięcej się da (może wszystko) z wyglądu strony było zrealizowane za pomocą CSS, zamiast grafik;

* co do responsywności, to strona powinna się dobrze układać dla okna przeglądarki powyżej 700px; w pierwszej wersji nie trzeba robić media queries dla niższych rozdzielczości.

* Powinno działać w wiodących przeglądarkach: opera, FF, chrome i IE w najświeższych wersjach; nie chcę np.. ciąć się żyletkami, żeby obsłużyć IE 6; myślę, że użycie bootstrapa rozwiąże większość problemów.

UI:

* Ogólny styl powinien być w miarę elegancki, nie narzucający się - podoba mi się ogólny design deezer'a. Nie chciałbym aby to było "plastusiowe", zabawne czy przerysowane

* Popup do wyświetlenia informacji o wykorzystywaniu cookies

* Całość składa się z 3 części: nagłówek, lewy panel wyświetlający mapę i prawy panel wyświetlający informacje

* Nagłówek zawiera nazwę volago, menu - aktualnie blog i kontakt, ale trzeba przewidzieć możliwość rozszerzenia o 3-4 pozycje; wtyczkę facebooka i obszar logowania (user + hasło) oraz przycisk logowania z facebooka;

* Dolne panele wypełniają resztę wysokości strony, a w szerz dzielą ekran dokładnie na połowę;

* Na mapie nie ma żadnych scrollbarów;

* Panel informacyjny można przewijać w pionie jeśli dane nie mieszczą się na ekranie

Panel informacyjny:

* Zawiera duże zdjęcie

* buttony: udostępnij Facebook, udostępnij Twitter

* Następne w hierarchii ważności są dane teleadresowe: adres, telefony, emaile, fanpage, etc;

* Następne w hierarchii są dane: wizyta z dziećmi, zwierzęta, itd. - ogólnie te z ikonami; chciałbym aby było to ubrane w jakieś kontrolki (spójne i podobne obszary; kafle?) i przyozdobione ikonami;

* Następne dane to już tylko pola informacyjne (mogą być jakieś divy jeden pod drugim z nagłówkami, będzie tam ładowany dynamiczny HTML z bazy) w kolejności:

** Opis - tu dobrze byłoby zrobić coś takiego, żeby standardowo wysokość diva była np 300px, a jak jest więcej tekstu, to pojawia się przycisk "rozwiń"

** Godziny otwarcia

** Ceny

** Szacowany czas wizyty

** Tagi geograficzne

** Tagi z udogodnieniami - mogą to być jakieś "pigułki", ale na początek nie róbmy dla nich ikon, tylko tekst

** Gastronomia

** Polecamy (tu będą jakieś książki, reklamy noclegów, itp.)

** Książki

** Linki zewnętrzne

Kwestie do przemyślenia:

* Czy wyświetlać (puste) pola informacyjne, jeśli nie mamy danych w tym obszarze? Np. jeśli nie mamy danych o godzinach otwarcia, to czy wyświetlić nagłówek "godziny otwarcia" (jakiś wyszarzany może) czy nie?

* Jakie będą najlepsze proporcje zdjęcia głównego? 4:3 czy może panorama? Osobiście podoba mi się galeria na filmwebie i pewnie kiedyś będę miał podobną. wydaje się, że panorama lepiej wykorzysta przestrzeń na współczesnych ekranach.

Reszta należy do Twojej inwencji. Oczywiście jeśli uznasz, że jakiś wątek jest "gruby", to warto się wcześniej skonsultować.

W wyniku chciałbym otrzymać stronę (de facto jedną) w postaci plików HTML, CSS, grafik spełniającą powyższą specyfikację.

I to w zasadzie wszystko na czym mi zależy. Poza ramami tej specyfikacji nie przewiduję, żebym był jakimś marudnym klientem. Mam świadomość, że jest to pierwsza wersja (a nie ostateczna) i będzie sukcesywnie ulepszana.

Umiejętności: CSS, Projekty graficzne, HTML, PHP, Projektowanie stron www

Zobacz więcej: www jako o com, www graphic design co za, www design web de, wed page design, wed development design, web ui e development, web html5 framework, web designera, tu portal, rest html5, rest api design, responsive web design framework, portal html5, pod web design, page grafik design, media ma, lean design, k ui, komu, ki-media

O pracodawcy:
( 0 ocen ) Poland

Numer ID Projektu: #5689898