Pretty Green — Skrojone na miarę: Nowa strona główna dla brytyjskiej marki modowej założonej przez Liama Gallaghera

Notatki projektowe

• Monochrom i białe hasło

  Plansza pokazuje modela w skórzanej kurtce, odwróconego tyłem, i hasło na środku kadru. Czarno-biały obraz nie konkuruje z tekstem, więc hasło i jasna karta wybijają się bez dodatkowych teł.

• Trzy hasła z nagrania

  W nagraniu mobilnym „WE ARE” stoi w miejscu, a zmieniają się słowa pod nim: A STATE OF MIND, THE MUSIC, THE SPIRIT. Tutaj zmieniają się co 7 sekund i tylko wtedy, gdy ekran jest widoczny.

• Pauza w zasięgu ręki

  Plansze nie pokazują sterowania, więc prezentacja je dodaje: przycisk pauzy zatrzymuje film i hasła, a kreski obok przełączają hasło. Hasła nie zmieniają się też, gdy jest nad nimi kursor albo fokus klawiatury.

• Poprawiony krój na karcie

  Na planszy podpis „Our new summer collection” ma domyślny krój szeryfowy. Tutaj jest złożony groteskiem sklepu, jak reszta karty.

Notatki projektowe

• Nowości od pierwszego ekranu

  Na planszy z wideo nowości zaczynają się już na pierwszym ekranie, pod kartą FREEDOM, więc widać je, zanim ktoś zacznie przewijać. Następna plansza pokazuje całą sekcję: zakładki i dwa kafle, każdy z nazwą i ceną.

• Przypięta sekcja z nagrania

  Nagranie desktopowe pokazuje, jak karuzela przesuwa się nad zakładkami, gdy strona stoi w miejscu. Tutaj odtwarza to przycisk „Slide the rail”, a strona nie blokuje przy tym przewijania.

• Strzałki i serca dodane

  Plansze nie pokazują strzałek ani serc. Tutaj strzałki przesuwają karuzelę o jeden kafel, a serce dodaje produkt do ulubionych — trafia on wtedy na metkę na dole ekranu.

• Poprzednia kolekcja jest przykładowa

  Plansze i nagrania nie pokazują, co było w zakładce Autumn 2020, więc jej produkty są przykładowe. Nazwy produktów też: na planszach każdy kafel ma tę samą nazwę zastępczą „Product Name Winter Parka”.

Notatki projektowe

• Większa kropka wiąże zdjęcie z panelem

  Na planszy kropka na kapeluszu jest większa od trzech pozostałych, a w panelu obok stoi właśnie kapelusz. Nie trzeba strzałek ani podpisów, żeby połączyć jedno z drugim.

• Ten sam blok w telefonie

  Nagranie mobilne pokazuje zdjęcie z czterema kropkami na całą szerokość ekranu, a pod nim ten sam panel: kapelusz, nazwę, cenę, strzałki, VIEW THIS PRODUCT i cztery kropki slidera.

• Kapelusz z planszy, reszta to próbki

  Plansza pokazuje tylko kapelusz: packshot, nazwę „Black British Millerain Bucket Hat” i cenę GBP 89.00. Koszulka, szorty i tenisówki mają tu przykładowe nazwy i tę samą cenę co produkty na innych planszach, a zamiast packshotów — zbliżenia tego samego zdjęcia.

• Co robi kliknięcie — dodane tutaj

  Plansze nie pokazują, co dzieje się po kliknięciu. Synchronizacja kropek ze sliderem, obsługa klawiszami strzałek, szybki podgląd i pasek darmowej wysyłki są dodatkiem prezentacji. Próg 199 GBP pochodzi z paska nad nagłówkiem sklepu.

Notatki projektowe

• Tekst z planszy

  Tytuł i opis karty są przepisane z planszy — stąd nazwisko artysty i tytuł płyty. W jednym zdaniu brakowało słowa, więc „The event hosted” brzmi tu „The event was hosted”. „Lighting Matches” to prawdziwy tytuł albumu i zostaje bez zmian.

• Miejsce dla artysty

  Karta stoi w lewej części pasa, więc nie zasłania śpiewającego artysty po prawej. Zdjęcie dalej pokazuje koncert, a nie tylko tło pod tekst.

• Na komputerze bez „Previous events”

  W nagraniu desktopowym karta przewija się razem ze zdjęciem i ma tylko „Discover more”. Link do poprzednich wydarzeń pojawia się dopiero w wersji mobilnej (§ 10).

• Pusta kieszeń

  Plansze ani nagrania nie pokazują artykułu, do którego prowadził przycisk. Tutaj klapka u dołu karty unosi się i opada, a komunikat mówi, że dalej nic nie ma.

Notatki projektowe

• Trzy koła z planszy

  Pod wydarzeniem plansza pokazuje trzy kolekcje: The Pretty Green Parka, Pretty Green x Elvis i Parka Guide. W nagraniu desktopowym rząd przewija się bez zmian.

• Czwarte koło w telefonie

  W nagraniu mobilnym rząd kół przesuwa się w bok i odsłania czwarte: Wear Paisley. Znajdziesz je w § 10.

• Podgląd jest przykładowy

  Plansze i nagrania nie pokazują, co było w kolekcjach. Podgląd i jego produkty są przykładowe, a wybrana kolekcja trafia na metkę na dole ekranu.

• Ząbkowany pierścień

  Po najechaniu albo przy fokusie wokół koła pojawia się pierścień jak cięty nożycami zygzakowymi. To dodatek tej prezentacji, nie sklepu z 2021 roku.

Notatki projektowe

• Przesunięta w prawo

  Kompozycja nie stoi na środku okna: lewy margines jest prawie dwa razy szerszy od prawego. Wąski odstęp między kolumnami trzyma je razem. Plan kroju pokazuje te wymiary na ekranie.

• Bez paralaksy

  W nagraniu desktopowym obie kolumny przewijają się w tym samym tempie. Rytm daje samo przesunięcie kolumn, a nie efekt przy przewijaniu.

• Po co przesunięcie

  Przełącz na zwykłą siatkę: kolumny się wyrównują, podpisy stają w jednym rzędzie i układ zaczyna wyglądać jak katalog. Przesunięcie robi z tych samych zdjęć redakcyjną rozkładówkę.

• Co jest przykładowe

  Nazwy produktów są przykładowe, bo plansza powtarza „Product Name Winter Parka”. Zdjęcia, ceny i wymiary są z planszy. Zwykła siatka i plan kroju to dodatki prezentacji: te same trzy produkty, ta sama łączna szerokość i ten sam odstęp.

Notatki projektowe

• Tylko w nagraniu

  Kafle Discover widać tylko w nagraniu desktopowym, między kompozycją a stopką. Nie ma ich na żadnej z sześciu plansz ani na liście siedmiu elementów strony.

• Narysowane, nie wycięte

  W nagraniu kafel jest za mały, żeby wyciąć z niego ostry kadr. Papier, metki, tkanina i krople są więc narysowane na wzór nagrania.

• Metka „M / Size 4”

  Pod tkaną metką PG-WL wisi metka rozmiaru „M / Size 4”, jak w nagraniu. Pozostałe rozmiary i ich numery są przykładowe, podobnie jak symbole konserwacji na odwrocie metki.

• Czytelniejsza szarość

  Na jasnoszarej karcie nagranie ma szary tytuł i szary przycisk, które trudno przeczytać. Tutaj szarość jest ciemniejsza. Tak samo poprawione są inne słabo widoczne szarości z plansz, np. nieaktywna zakładka i kropki slidera.

Notatki projektowe

• Dwie klatki z jednej kliszy

  Zdjęcie to dwie niemal takie same klatki filmu obok siebie, z czarną przerwą między nimi. Czerwona kropka na brzegu kliszy należy do zdjęcia — to nie stan przycisku.

• Konkretniej niż menu

  Menu u góry dzieli sklep na szerokie działy: CLOTHING, FOOTWEAR, ACCESSORIES. Słowa w stopce są konkretne — JACKETS, T-SHIRTS, SWEATS, JEANS — i prowadzą od razu do rodzaju ubrania.

• Żywe słowa

  Na planszy słowa są wtopione w zdjęcie. Tutaj są tekstem, więc każde jest przyciskiem: najechanie albo fokus podkreśla słowo ściegiem i przygasza resztę. Nagranie nie pokazuje stanu po najechaniu — ten jest dodatkiem prezentacji.

• Linia złożenia

  Przycisk „Linia złożenia” zaznacza oś, na której stoją słowa — jak linia na wykroju krojonym na złożeniu tkaniny. To również dodatek prezentacji.