specyfikacja funkcjonalności strony responsywnej „finansowy ninja”

specyfikacja funkcjonalności strony responsywnej „finansowy ninja”

SPECYFIKACJAFUNKCJONALNOŚCI
STRONYRESPONSYWNEJ
„FINANSOWYNINJA”
KRÓTKIOPISWYMAGAŃFUNKCJONALNYCH
§
§
§
§
§
§
§
§
§
CałośćdostarczonajakokodHTML+CSS+GRAFIKI
OptymalniecałośćosadzonawewnątrzWordPressa.
– StronakorzystazmediówwgranychnatywniedoWordPressa(linkiitp.)
– StronaświadomaWordPressa,tzn.pozainstalowaniupluginuSEOdodajeon
odpowiednieinformacjedotreścistrony(stronategonieuniemożliwia)
– Jeśliwymogitebędąspełnione,toniemusimydotreścistronydodawaćkodów
GoogleAnalytics,pikseliśledzącychFBitp.–samtozrobię.
CałośćprzygotowananaDIVachwtakisposób,abykażdasekcja(nazywanateżdalej
modułem)byłałatwadowycięcia/wykomentowaniawkodzie.
Proszęwkodziestronyzamieścićkomentarzeoddzielająceposzczególnemoduły,np.
– <!—STARTFAQ>i<ENDFAQ--!>itp.
Całastronarobionajestwedługwzorustrony–http://peopleoverprofit.com
– Podobająmisiętamspacingi,„oddech”iwielkościelementów/czcionekitp.
– Kompletnakopiaprzykładowejstronystanowi„Załączniknr2”ijestteżprzedstawiona
tutaj:https://www.dropbox.com/s/wl9rde6a4n309v1/POP%20landing%202.png?dl=0
Tuinnewzory,któremożnapodpatrywaćcodowyglądusekcjiniedostępnychnastronie
„PeopleoverProfit”:
– https://www.dropbox.com/s/vqiych8il3zp27j/Living%20Forward%20%20Michael%20Hyatt%20%2820160207%29.png?dl=0
– Tumodułporównaniatrzechwariantówpakietówzwyróżnionymśrodkowym:
§ https://www.dropbox.com/s/aq44rtdjfizzk5n/Good%20Book%20Template.pn
g?dl=0
§ https://www.dropbox.com/s/yzcemibodobquhs/Authority.png?dl=0
Zzałożeniaposzczególnesekcjetocoścosięmamieścićwcałościnascreenie–w
szczególnościabove-the-foldpowinienmieścićcałypasekmenu+całąsekcjępierwszą
(header).
Nadolestronywprawymdolnymrogumabyćikonkawpozycjifixedumożliwiająca
przewinięciecałejstronydogóry(pokliknięciu)
Stronamamiećwersjęresponsywną,któramadziałaćtak:
– DlaskalowanianaiPadachitp.–widaćcałąstronę(zeskalowana)
– Dlaskalowanianaurządzeniachomniejszychekranach(doustalenia)stronasię
przełamujedojednejkolumnyoraz:
Pasekgórnyjestminimalizowanytylkodologoapoprawestroniepojawiasię
ikonkaumożliwiającapokliknięciurozwinięciemenu.
§ Mająbyćwidocznewniejtylkoteelementy,któremająparametrMOBILE
ustawionyjakoON.
UWAGA:musibyćmożliwośćustawieniawidocznościlubniewidocznościcałegomodułuw
kodziestrony(odpowiednikprzestawieniaparametrunaMOBILEONlubMOBILEOFF
modyfikująckod).
Nastronieprezentowanebędą3wariantyproduktówwcenach:
– 69,90zł
– 99,90zł
– 199,90zł
§
§
§
MOTYWYIKOLORYPRZEWODNIE
Okładkaksiążkiwyglądaćbędziewnastępującysposób(tenobrazekjestroboczy–zostanie
dostarczonyfinalnyobrazek):
Kolorystykatakajakwidać.Kolorywiodące:
§
§
§
Czarny–aletakjakwidaćstylistykamaźnięćpędzlemwięctakiniedokońcaczarny
Ochra–RGB194/131/40,#c28328ßtenkolormożebyćnaszymwiodącymmiejscami
Gradientszarości
Pozatymzamówionezostałynastępującegrafiki–uinnychgrafików:
1. Logo/tytułFinansowyNinjapisanepoziomo(byłotaknajednejokładce).Umieszczęjew
lewymgórnymrogu.
2. Wizualizacjanagóręstrony:książka+eBooknaiPadzie/Kindle(chybawolęKindle)+możena
iPhoneeBook+takizeszytćwiczeń“FinansowyNinja”(niżejopiszęocochodzi)
3. Wizualizacjeniżejdosekcjiproduktów:
a. Samaksiążka
b. Takapaczkajakugórystrony(książka+ebook+iPhone).
c. Takapaczkajakugórystronyorazdodatkowopaczkazkursem“BDT”-"Budżet
domowywtydzień"(książka+ebook+iPhone+kursBDT).OkładkakursuBDT
zwizualizowanatutaj:
i. https://www.dropbox.com/s/oxxvcx6n4vb2iri/book_cds_transparent.png?dl=
0
ii. https://www.dropbox.com/s/o2znjyf0ca868b9/bdt_book-front1-07.jpg?dl=0
4. WizualizacjesamegoiPadazksiążką.
5. WizualizacjaKindlezksiążką(nawprostilekkozperspektywyjaknastroniePeopleOver
Profit)ßbędzieużytywmoduleFREECHAPTER.
6. Sameshotyksiążkidrukowanejzprzoduiztyłuwkilkuwizualizacjach(stojąca,leżąca).Jedenz
shotówtakijaknadoletej
strony:https://www.dropbox.com/s/zcfqv8gxtff0ezl/Video%20Series.png?dl=0
7. Kilkaksiążekleżącychoboksiebiejednanadrugiej(płasko-widaćgrzbiety)ioboknichoparta
książkastojącatwarządonas.Tutakishotu
góry:https://www.dropbox.com/s/aq44rtdjfizzk5n/Good%20Book%20Template.png?dl=0
UWAGA:nastroniemożemyipowinniśmygdzieśwykorzystaćgrafikizmałymninja,któryjest
motywemprzewodnimksiążki.
SPECYFIKACJAMODUŁÓW
§
§
§
§
§
Poniżejprzykażdymmodulepodajępreferowanąkolorystykę(jasny/ciemny).Jesttozabieg
celowy–modułybędęsamodzielnieprzestawiałkolejnościątestującróżneukładystrony.
WkażdymmoduleokreślamtakżeczymabyćMOBILEONczyMOBILEOFF.JeślijestMOBILE
OFFtooznaczato,żewwersjimobilnejcałymodułmabyćniewidoczny.
Mabyćmożliwośćbezproblemowegopowielaniamodułównastronie(copy&paste–sam
sobieztymporadzę).
Modułyopisanesąwkolejnościumieszczenianastronie.
Sposóbinterpretowaniakolorystyki:
– Ciemna=ciemnetło.Literybiałe/jasne.
– Jasna=jasnetłolubwręczbiałetło.Literyczarne/ciemne
– Ciemnafoto=podłożonezdjęciewciemnejkolorystyce.Literybiałe/jasne.
– Ciemnaszara=szarykolorwtle.Mogąbyćróżneodcieniewróżnychmodułach.
– UWAGA:kolorymuszątakbyćdobraneżebyzestawieniedwóchmodułów„ciemnych”
zesobąteżdobrzewyglądało(anietylkoprzeplatanieciemny-jasny).
Numer Nazwa
modułu
Kolorystyka MOBILE Czy
Opis
moduł
zawiera
tytuł?
1
MENU
Ciemna
Chowa
się
2
HEADER
Jasna
on
3
INFOBAR1
Ciemna
szara
off
4
OPIS
Ciemna
foto
on
5
PAJACYK
Ciemna–
On
niebieska
lubBiałetło
6
ROZDZIAL
Jasna
on
7
REFERENCJE
Ciemna
off
8
SPISTRESCI
Jasna
on
9
STATYSTYKI
Ciemna
off
10
PRODUKT
Jasna
on
11
FAQ
Ciemna
szara
on
12
WARIANTY
Jasna
off
13
INFOBAR2
Jasna
on
NIE
Polewejstronielogo„Finansowyninja”
wformiejednolinijkowegonapisu.Po
prawejpozycjemenu.
TAK,
Dwukolumnowyheader.Polewej
PRAWA obrazekapoprawejopis+przycisk
KOL.
„Zamówwprzedsprzedaży”.
NIE
Pasek,naktórymprezentowanebędą
docelowomediaitp.Naraziebędzie
zawierałtekst:„Zamówksiążkęw
przedsprzedażyiskorzystajz
promocji!”.
TAK
Najważniejszasekcjazawierającatytuł,
wideo,orazopisksiążki.Jejwysokość
skalujesięwzależnościodilościtekstu
TAK,
Dwiekolumny.Polewejtytuł„1książka
LEWA
=1posiłek”.Podnimkrótkiopis.Cała
KOL.
sekcjamaniebieskietłowkolorzePAH
=#0074bbalbotłobiałeitylkonapisy
wtymkolorzeniebieskim.
Poprawej–obrazekzPajacykiem
(dostarczę).Możebyćzamkniętyw
niebieskimkółkujeślitłobędziebiałe.
TAK,
Bezpłatnyrozdział.Dwiekolumny.Po
PRAWA lewejKindlezksiążkąapoprawejinfo
KOL.
+formularzzapisunanewsletter
(form).
NIE
PodobniejaknaPeopleOverProfit
(POP),alemożecierozegraćtow
dowolnysposób.
TAK
IdentyczniejaknaPOP–widać3
rozdziałyimożliwośćrozwinięciażeby
ukazałysiępozostałe.
NIE
Ikonyzdanymiliczbowymi:Xstron,X
rozdziałów,Xrysunków,X
TAK,
Tenmodułbędzietrzykrotnie
PRAWA powtórzony.Generalniedwiekolumny:
KOL.
lewazezdjęciemiprawazopisem
wariantuproduktu.
TAK
Tytułsekcji„Najczęstszepytaniai
odpowiedzi”ilecąpokoleiwyróżnione
pytania(bold,większe)ipodspodem
każdegoznichtreśćodpowiedzi.
TAK
3wariantyproduktuzestawione.
Środkowywariantnajwiększyi
wyróżniony.Wystajeugóryinadole.
Każdywariantmaprzycisk„Kupza
kwota”
NIE
Tukolormożebyćtakisamjakw
WARIANTY.Natympaskutakitekst
„Kliknijtutajjeślichceszzamówić
więcejegzemplarzy.”zlinkiem.
14
AUTOR
Ciemna
foto
on
TAK
15
MEDIA
Ochra
on
TAK
16
KONTAKT
Ochra
on
TAK
17
OPINIE
Jasna
off
TAK
18
STOPKA
Ciemna
on
NIE
19
KARUZELA
Jasna
off
TAK
AnalogiczniejaknastroniePOP.Ikony
do:
Bloga,facebooka,Twittera,LinkedIni
YouTube.
Tło–ochra,analogiczniejakPOP.Też
będzieprzycisk„Pobierzmediakit”
Tło–ochra–kleisięzpoprzednim
modułem.AnalogiczniejakwPOP.
Tytułtegomodułuto„Recenzje
Czytelników”.Widocznepokolei:z
lewejcudzysłówdużygraficzny,potem
treśćopiniizblokowana,potempod
spodemboldemimięosoby
wyrównanedoprawejstrony(musibyć
możliwośćlinkowaniaimion).Opinii
będziedocelowoprzybywać.
Dwielinie.Górnato„Copyright2016
KaveoMichałSzafrański”adolna
zawiera„Regulamin”i„Polityka
Prywatności”jakolinkiwewskazane
miejsca.
Modułdoprezentacjidowolnychzdjęć.
Zawieratytułcentralnie,podnim
zdjęcienaprawiecałąszerokośćstrony
(tubędęprezentowałrozkładówki
środkaksiążki).Poprawejipolewej
stroniestrzałkiumożliwiające
nawigacjędopoprzedniegoikolejnego
zdjęcia.Automatycznierotująprzez
tylezdjęćilewgram.Domyślnie4.
Tenmodułwykorzystywaćbędę
potem.
DETALEDOTYCZĄCEMODUŁÓW
MENU
§
§
Polewejstronielogo„Finansowyninja”wformiejednolinijkowegonapisu(grafikaklikalnai
kierującanaadreshttp://finansowyninja.pl).
Poprawejpozycjemenu:
– Książka–kierujedoOPIS
– Pakiety–kierujedopierwszegoPRODUKT
– Autor–kierujedoAUTOR
– Blog–kierujedohttp://jakoszczedzacpieniadze.pl
– Kontakt–kierujedoMEDIA
– Przycisk„Zamów”–kierujedoWARIANTY