Projekt odświeżonej szaty graficznej mobile i desktop

Opis konkursu

Dzień dobry. Zlecimy wykonanie samego projektu graficznego (bez cięcia grafik) i kodowania. Pliki graficzne wysokiej rozdzielczości do pocięcia. Interesuje nas wyłącznie wykonanie graficznej prezentacji strony internetowej i kilku zakładek dla desktop-u i mobile, w odświeżonej minimalistycznej nowoczesnej formie. Ma być przyjaźnie dla użytkownika, nic więcej. Czysto i przejrzyście.

Przygotowaliśmy odręcznie wizualizację, która przedstawi grafikowi jak ma wyglądać projekt.

D E S K T O P

STRONA GŁÓWNA ( http://eci.com.pl/projeproje/1.JPG )
Na samej górze po lewej stronie logo, obok wyszukiwarka z możliwością wyboru kategorii z której ma być wyszukiwana dana fraza + przycisk szukaj, obok przycisku 3 ikonki jedna pod drugą telefon, adres email i adres firmy (wypełnione przykładowymi danymi), z prawej strony 3 ikonki: pierwsza ludzik, pod nim login i rejestracja, druga to koszyk i trzecia czat.

Najważniejsza część przebudowy, całkowicie nowe menu, znajdujące się tuż pod logo i wyszukiwarką. Każda kategoria ma posiadać własny osobny kolor. Całość może zajmować max 15-20% ekranu (bez rozwinięcia). Zanim przejdziemy do dalszej części strony głównej: widok MENU rozwiniętego ( http://eci.com.pl/projeproje/2.JPG )

Pod MENU slider na całą szerokość strony, długi lecz chudziutki, delikatnie szerszy niż logo szukaj i menu razem wzięte. Pod sliderem Opis firmy składający się z grafiki tytułu i treści, w rozkładzie takim jak na grafice (3 kolumny, pod spodem 1 kolumna)

Dolna część “przed stopką” to dwie kolumny, pierwsza to formularz zapytania do naszej firmy a druga to lista ostatnich 10 aktualności z bloga = tytuł + data napisania.

STOPKA
Stopka widoczna na grafice strony głównej. Podzielona na kilka sekcji / kolumn. W pierwszej od lewej linki: Strona Główna, O nas, Katalogi, następna kolumna Aktualności, Poradnik, Kontakt, kolejna kolumna to ikonki Konto, Koszyk, Czat, w ostatniej kolumnie wyeksponowany KONTAKT czyli ikonki + dane: numer telefonu, email, adres i dodatkowo godziny pracy pn-ptk 07:30-15:30 sb-ndz nieczynne.

STRONA KATEGORII PRODUKTÓW ( http://eci.com.pl/projeproje/3.JPG )
Na tej stronie zostaje góra strony tj. logo wyszukiwarka + MENU (którego na grafice nie ma, natomiast ma się również pojawiać), z lewej strony pokazuje nam się ładne przejrzyste menu z aktualnie wyświetlaną kategorią i podkategoriami w środku, na początku link do przejścia o poziom wcześniej ( w tym przypadku Strona Główna), obok nazw kategorii w nawiasach liczba produktów w środku (przykładowa).

Na środku komunikat dotyczący aktualnie wyświetlanych kategorii produktów (Wszystkie kategorie w Wózki Transportowe). Następnie 3 kolumny z ikonami kategorii produktówych oraz produktów. Na początek 3 miniatury prezentujące podkategorie. Nazwa + w nawiasie ilość produktów w środku, pod spodem mniejszą czcionką wyeksponowane nazwy podkategorii które znajdują się w środku + w nawiasie liczba produktów w środku, pod tym gwiazdki do oddania oceny i w nawisie liczba ocen.

Kolejne trzy ikonki to ikonki produktowe. Foto produktu, pod spodem nazwa, pod nazwą gwiazdki z ocenami + w nawiasie liczba ocen, pod gwiazdkami informacja Cena + Najtańsza dostawa od, pod tą informacją dwa przyciski “Dodaj do koszyka” oraz “Kup Teraz”.

Z racji tego iż sprzedajemy produkty również podlegające specjalnej wycenie, kolejną miniaturkę proszę zaprojektować w następujący sposób: Foto produktu, nazwa produktu, pod nazwą gwiazdki opinie + liczba w nawiasie, pod gwiazdkami jeden przycisk “Zapytaj o cenę”. Stopka taka sama jak na wcześniejszym projekcie.

STRONA PRODUKTU ( http://eci.com.pl/projeproje/4.JPG )
Górna część projektu zostaje taka sama jak na wszystkich wcześniejszych. Pierwsza część prezentacji produktu (do poziomej belki Opis i specyfikacja, zapytanie...itd) musi mieścić się w jednej wysokości. Po lewej stronie duża grafika główna, a pod nią miniaturki pozostałych zdjęć w jednym rzędzie z możliwością przewijania, po prawej od góry: tytuł produktu, pod spodem gwiazdki z oceną i w nawiasie liczba ocen, następnie mniejszą czcionką oznaczenie producenta i numeru katalogowego, później miejsce na krótki opis (lorem ipsum), i pod opisem przyciski: JEŻELI PRODUKT NIE JEST NA ZAPYTANIE to: Cena (button informacyjny) Dostawa od (button informacyjny) KUP (przycisk) KOSZYK (przycisk), JEŻELI PRODUKT JEST NA ZAPYTANIE to: wyłącznie przycisk ZAPYTAJ O CENĘ.

Niżej główny opis produktu poprzedzony małą belką z przyciskami które pozwolą przechodzić w każdej chwili do poszczególnych części strony produktu (potrzebne ze względu na długie opisy z dużą ilością grafik): Opis i Specyfikacja, Zapytanie, Opinie, Cena. Pod belką przestrzeń na opis, pod tym wyeksponowane OPINIE , a pod opiniami PODOBNE PRODUKTY (według wizji grafika).

To tyle jeżeli chodzi o desktop.

M O B I L E

STRONA GŁÓWNA ( http://eci.com.pl/projeproje/5.JPG )
Najważniejsze dla strony głównej jest to, aby logo i wyszukiwarka na mobile zajmowały max 15% ekranu. Przycisk oznaczony trzema kreseczkami odpala MENU które się wysuwa w następujący sposób: http://eci.com.pl/projeproje/6.JPG
Pod wyszukiwarką na stronie głównej slider, a pod nim zgodnie z projektem informacje o firmie itd. dokładnie tak jak na projekcie DESKTOP ( http://eci.com.pl/projeproje/1.JPG )

STRONA KATEGORII (http://eci.com.pl/projeproje/7.JPG )
Na górze zostaje belka z możliwością odpalenia menu, 3 ikonki: szukaj, moje konto i koszyk. Pierwszy element strony kategorii na mobile to klikalna ścieżka użytkownika (ECI - Komputery stacjonarne), następnie tytuł kategorii “Komputery Stacjonarne”, pod spodem po dwie miniatury obok siebie. Pierwsze dwie prezentują: fotografia kategorii, pod spodem Nazwa tej kategorii w nawiasie liczba produktów w środku, pod tą nazwą nazwa podkategorii która znajduje się w środku + nawias z liczbą produktów, pod spodem jeszcze jedna taka podkategoria. Pierwsze dwie miniaturki proszę zaprojektować w ten sposób. Pod spodem dwie miniaturki PRODUKTÓW. Pierwsza jest fotografia produktu, następnie Nazwa Produktu, pod nazwą gwiazdki z liczbą opinii w nawiasie (umknęło podczas rysowania), i teraz najważniejsze, dla jednak miniaturki pod nazwą i liczbą opinii przycisk “ZAPYTAJ O CENĘ”, a pod drugą tuż pod nazwą produktu (a przed liczba opinii) informacje CENA oraz DOSTAWA OD, następnie opinie i pod nimi 2 przyciski KUP oraz DODAJ DO KOSZYKA. Na końcu stopka taka sama dla całego serwisu (z projektu desktop nr 1)

STRONA PRODUKTU ( http://eci.com.pl/projeproje/8.JPG )
Na górze zostaje belka z możliwością odpalenia menu, 3 ikonki: szukaj, moje konto i koszyk. Pierwszy element strony produktu to klikalna ścieżka użytkownika (ECI - Komputery stacjonarne), następnie tytuł kategorii “Komputery Stacjonarne”.

Pierwszym elementem strony produktu to FOTOGRAFIA z możliwością przewijania za pomocą przesuwania, lub kliknięcia w strzałeczkę lub kółeczka pod zdjęciem. Następnie tytuł produktu, pod nim gwiazdki z liczbą opinii w nawiasie. Po prawej stronie wyeksponowana CENA, pod nią mniejszą czcionką Dostawa od + pod spodem prosimy dodać przycisk ZAPYTAJ O CENĘ który będzie podstawiany zamiast ceny w produktach które są tylko na zapytanie.

Kolejny element to belka która będzie klikalną kotwicą opisu produktu tak samo jak na desktop, po kolei przyciski Opis i specyfikacja, zapytanie, opinie, cena. Pod polem na opis Opinie oraz podobne produkty i stopka.


Podsumowując, do wykonania jest 8 projektów 4 dla mobile i 4 dla desktop (1. Strona główna, 2. Strona kategorii produktów, 3. strona produktu, 4. menu)

Naszym kolorem przewodnim jest pomarańcz, nasze logo jest pomarańczowe, prosimy o uwzględnienie tego koloru w projektach (aktualne logo można zobaczyć na: www.eci.com.pl)

Przypominamy, minimalistyczne, czytelnie, prosto, tak by poruszanie się po stronie było szybkie i proste.
www.eci.com.pl

Załączone grafiki: