VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ BRNO UNIVERSITY OF TECHNOLOGY
FAKULTA VÝTVARNÝCH UMĚNÍ FACULTY OF FINE ARTS
ATELIÉR GRAFICKÉHO DESIGNU 1 STUDIO OF GRAPHIC DESIGN 1
ŠÍŘKA HŘBETU KNIHY BOOK BINDING SIZE
BAKALÁŘSKÁ PRÁCE BACHELOR’S THESIS
AUTOR PRÁCE
Lucie Horáková
VEDOUCÍ PRÁCE
Mgr. Art. Žaneta Drgová
OPONENT PRÁCE
MgA. Tomáš Procházka
AUTHOR
SUPERVISOR OPPONENT
BRNO 2016
Dokumentace VŠKP Osnova úvod 1 proces 2 3D book mockup – vysvětlení pojmů – způsob vizualizace grafického designu, rešerše podobných projektů – výsledné řešení – WEB – propagace projektu závěr
úvod Před zvolením tématu bakalářské práce jsem vybírala mezi více druhy projektů. Všechny se týkaly pomůcek pro grafické designéry. Během každého procesu přicházíme na věci, které nám chybí a nedají se vyřešit tak rychle a efektivně, jak bychom si přáli. Tím, že jsem se setkávala s úskalími a důvody, proč jít zrovna touto cestou a ne jinou, přišlo mi důležité nezmiňovat pouze konečný produkt, který na základě procesu vznikl, ale právě proces, který mě k němu dovedl. Práce je tedy založena na dlouhodobé studii kterou rozvádím v první části projektu. V závěru první části pak přicházím k řešení, které sice ne přímo koresponduje s názvem prvotního nápadu projektu, vyplývá však logicky z řešení problematiky a jednotlivých kroků. V druhé části se budu věnovat popisu výsledného projektu s názvem 3D book mockup, jehož cílem je přinést více možností vizualizace v grafickém designu. Následuje vysvětlení základních pojmů, rešerše podobných projektů, postup vizualizace v online prostředí, popis výsledné webové stránky a návrh na šíření a propagaci celého projektu skrze sociální sít. Obrazový materiál se váže na jednotlivé sekce.
1 proces Jedním z prvních nápadů byla webová aplikace na měření šířky hřbetu knihy. Před rokem jsem pracovala v nakladatelství, kde jsem začala přemýšlet o předtiskové přípravě trochu jinak. Nešlo o to, jak udělat na obálku ořezové značky, nebo ji vyskládat na arch, ale jaký papír použijeme, jaká specifika má, pro jaký druh tisku je vhodný, jaká bude vazba atp. Bavila mě práce s papírem i přes to, že se mnohem více zajímám o interaktivní a webové rozhraní. V této poměrně malé firmě, která se zabývá malo-nákladem a experimentálními vazbami, byla celkem slušná nabídka atypických papírů. Díky tomu se velice často stávalo, že se hřbety knih před tiskem spočítaly, daný papír měl však jiná specifika než jiný 90 g papír a kalkulačka nespočítala míry dobře. Také když jsem připravovala knihu do tisku sama, chtěla jsem si udělat maketu z papíru, který v knize později bude, a zjistit tak šířku hřbetu a velikost obálky. Tento papír jsem však doma neměla a přemýšlela jsem, jak si knihu jednoduše vyměřit sama. Napadlo mě tedy vytvořit webovou aplikaci – kalkulačku na měření šířky hřbetu knihy, zkusit tak urychlit a upřesnit proces tisku. Tím bychom mohli snadno docílit výsledku za pár vteřin, udělat obálku a rovnou ji i se zkušební maketou poslat do tisku. Aplikace měla být pro designéry, autory, nakladatele, kteří zadávají knihy do tisku sami. Ti pak budou moci poslat knihu i s naměřenou obálkou (hřbetem), budou vědět, jestli má tiskárna papír který potřebují a ještě si pomocí skriptu v aplikaci otevřou soubor, kde obálku rovnou vytvoří v Indesignu na přesný rozměr spočítaný aplikací. Díky tomuto procesu jsem si vyzkoušela různé druhy prototypovacích programů jako je Invision později Principle, ve kterých jsem testovala UX, UI aplikace a její uživatelské možnosti. Stále se však objevovaly otázky přínosu aplikace u niž jsem věděla, že bude pouze malé procento lidí. To byl důvod k dalšímu kroku. Chtěla jsem aplikaci nabídnout tiskárnám, které jsou v tomto procesu nedílnou součástí. V tom případě by vznikla online aplikace, která by fungovala jak pro nakladatelství nebo tiskárny (mohli by kalkulačku využívat interně), tak pro uživatele. Na základě následujících rešerší jsem přicházela na další logické rozšíření a objevilo se více možností, které mohla aplikace generovat. Např. by změřila hřbet knihy, nabídla papír, na který můžeme tisknout, doporučila tiskárnu, která potřebný papír má. Dále by spočítala průměrnou cenu zakázky a určila termín, kdy bude možné si hotovou maketu vyzvednout. Na základě těchto informací bychom mohli tisknout knihy bez zbytečných komplikací. Aplikace se stále rozšiřovala o další atributy, které mi najednou přišly spíše doplňkové nebo nedostatečně určující danou problematiku. Jako např. u průměrné ceny se vyskytl velký cenový rozptyl jednotlivých tiskáren. Účelem této aplikace nebylo přidělat někomu další starosti, právě naopak je odbourat, což dané řešení nepřinášelo. Po dalším testováních aplikace a diskuzích se zástupci tiskáren, designéry, autory atd. jsme došli k tomu, že nám aplikace poskytne část informací o knize, ale vlastně nám nenabídne možnost žádného vizuálního zobrazení hotové makety? Proto jsem měla stále pocit, že něco chybí, parametry aplikace přehodnotila a začala se více zabývat tématy vizualizace výsledného produktu – tiskovina, maketa, mockup. Čímž se dostávám k závěrečnému řešení a tím je webová stránka 3Dbookmockup.
2 3D book mockup vysvětlení pojmů WIREFRAME Wireframe je kostra aplikace, webu. Vytváříme je za účelem zobrazení všech prvků, které potřebujeme otestovat a zjistit, jak budou fungovat v interaktivním prostředí. Zajímá nás pochopení principu fungování aplikace a její struktura. PROTOTYP Prototyp je zobrazení wireframů v interaktivním prostředí. Pomocí prototypu chceme ukázat aplikaci nebo web v interaktivní formě (klikací). Jednotlivé elementy se zobrazují jako v reálné aplikaci a také ho testujeme pomocí zařízení, na kterém bude v budoucnosti fungovat. Zajímá nás prostředí aplikace a uživatelské možnosti. MOCKUP Mockup je prostředí, na které aplikujeme hotový návrh aplikace, webu, tiskoviny atd. pro lepší představu finálního produktu. Na mockupu nic netestujeme, slouží především jako náhled. Měl by také zobrazit produkt v poměrně realistickém a dobře představitelném měřítku.
2 3D book mockup způsob vizualizace grafického designu, rešerše podobných projektů Kdo používá mockupy a proč? Mockupy používají designéři při prezentaci produktu, který ještě není ve finální formě, nebo naopak v portfoliu po dokončení výstupu. Protože je velice důležité, umět si věc komplexně představit, je dobré ji zasadit do 3D prostředí a ukázat tak její vizualizaci. Mnohdy není vhodné prezentovat nezhotovenou knihu pomocí papírové makety. Ta je často nedotažená a neodpovídá reálné formě finálního stádia. Je tedy lepší prezentovat produkt přes mockup, který dokáže dobře vystihnout jeho vizuální stránku i strukturu. Podle čeho si mockupy vybíráme a kde je hledáme? Mockup se často stává příliš transparentním prostředím a samotný předmět druhotným elementem. Zatímco by měl spíše pomoci celé prezentaci k tomu, aby byla srozumitelná a zobrazila produkt tak, jak bude vypadat v reálném měřítku, nabízejí se nám různá prostředí s tužkami, zahrádkou a hrnkem s kávou, které leží vedle papíru a hodnotu celé kompozice spíše ubírají než přidávají. Takže, co je vlastně důležité? Kniha? Prostředí? Pozadí? Kompozice? Barvičky...
příklady mockupů z webových stránek Moje práce je založená na logickém postupu tvorby a výběru mockupu. Máme knihu, známe typ vazby, máme představu o cílené vizuální podobě prezentace a na základě právě této specifikace budeme mockup hledat. To v jakém prostředí se vyskytuje, jestli má nebo nemá okolo sebe nějaké další komponenty, má pro mě přidanou hodnotu pouze v případě, že jsou pro mě kontextuálně podstatné. Rozhodně by to ale neměl být rozhodující prvek. Prostředí, kde bude kniha ležet může být šedé, nebo se může klidně vznášet se vesmíru, to už se samozřejmě odvíjí od volby vizuální představy designéra nebo studia. Jak už jsem výše zmínila, mockupy používáme nejčastěji ve dvou případech: V prezentování věcí, které ještě nejsou hotové pro jejich lepší, přesnější představu a v prezentaci vlastní práce, v portfoliu. Proto je také v neposlední řadě důležité uvést další přínos a důvody ke zvolení tématu projektu. Vytvořené mockupy by měly pomoci studentům, kteří si na ateliéru prezentace zkouší. Budou je také moci využívat a testovat na vlastních projektech a zakázkách. Existuje mnoho webových stránek, kde si můžeme stáhnout různé druhy mockupů na tiskoviny, webové aplikace a další produkty. Jsou to však různorodé zdroje, které vybíráme spíše podle „hezkého obrázku“ nikoli podle specifikace naší knihy. Postup výběru probíhá tak, že hledáme např. mockup na knihu a ačkoli už v dané situaci víme, jakou knihu děláme, nedá se podle této specifikace vyhledat, což mi přijde jako zásadní nedostatek. Příklady podobných projektů ke stahování mockupů: https://www.mockupworld.co http://www.freepik.com http://zippypixels.com http://www.psdtemplatesblog.com
2 3D book mockup výsledné řešení – WEB Základní princip webové stránky, její systém a přínos. Produkt > Hledání formy > Výsledná prezentace. V této fázi přišla základní otázka jak generovat mockupy na webu. Nabízely se mi tedy dvě možnosti: 1. Mockup PSD ke stažení Na základě specifikace si vybereme styl a druh mockupu, který se nám líbí – sken, fotka, 3D model knihy... Tento mockup si stáhneme do svého počítače a po nahrání vlastní obálky v programu Photoshop se obsah zdeformuje podle předem nastaveného modelu. Tyto mockupy však mají přednastavený formát a typ vazby knihy bychom museli v případě potřeby upravovat. 2. Online generátor mockupu Tento způsob generování mockupů je inovativní, jednoduchý a uživatelsky přívětivý. Zatím tento druh online aplikace neexistuje. Dovoluje nám vytvoření vlastních rozměrů knihy. Obálku nahráváme přímo v online prostředí, čímž dojde k deformaci obálky podle modelu (stejně jako ve Photoshopu). Kniha se však modeluje přímo v online prostředí.
1. Mockup PSD / skeny
2. online generátor mockupu / 3D
Na základě definování jednotlivých bodů v obou možnostech jsem vyzkoušela cestu druhou, která mi přišla pro uživatele přínosnější. Výsledkem projektu je tedy testovací verze online generátoru mockupů. Součástí prezentace je také webová stránka s PSD mockupy, jejichž testování a modelování mi pomohlo v dalších krocích a považuji ho za podstatné. Rozprostření webu:
3Dbookmockup
gallery 3Dbookmockup.tumblr.com
[email protected]
book size A4 (210x297)
book binding V2
number of pages
paper thickness
120
120 g
color of pages
cover lamination
book lapels
background color
RGB 55/65/66
mate
50 mm
RGB 55/65/66
background image
cover image
book view
front
site
binding
generate
Levá strana / obrazová část (náhledy mockupů)
Pravá strana / interaktivní část (nástroje)
Postup generování mockupu v online prostředí / popis nástrojů: book size / velikost knihy – svůj rozměr book binding / knižní vazba – V1, V2, V8, kroužková vazba number of pages / počet stran – od 4 do 1000 paper thickness / gramáž papíru color of pages / barva papíru cover lamination / laminace obálky book lapels / klopy background color / barva pozadí background image / obrázek na pozadí cover image / obrázek na oblálku book view / náhled knihy
pages
3Dbookmockup
ukázka hlavní webové stránky
book view
cover image
background image
try
50 mm
mate
RGB 55/65/66
site
book lapels
cover lamination
color of pages
front
120
V2
A4 (210x297)
number of pages
book binding
book size
binding
pages
RGB 55/65/66
background color
120 g
paper kind
gallery 3Dbookmockup.tumblr.com
[email protected]
3Dbookmockup
zadávání a vyplňování specifikace knihy
book view
cover image
background image
generate
50 mm
mate
RGB 55/65/66
site
book lapels
cover lamination
color of pages
front
120
V2
A4 (210x297)
number of pages
book binding
book size
binding
pages
RGB 55/65/66
background color
120 g
paper thickness
gallery 3Dbookmockup.tumblr.com
[email protected]
3Dbookmockup
po vyplnění všech informací přejdeme k vygenerování mockupu
generate
background image
desktop/cover-
cover image
shine
front
book view
site
binding
RGB 0/221/255
mate
50 mm
RGB 255/255/255
background color
book lapels
cover lamination
color of pages
pages
135 g ofset
120 g ofset
100 g ofset
90 g ofest
80 g ofset
120
V2
paper thickness
A4 (210x297)
number of pages
book binding
book size
gallery 3Dbookmockup.tumblr.com
[email protected]
3Dbookmockup
možnost stažení hotového mockupu
generate
cover image
background image
png
front
site
mate
RGB 255/255/255
desktop/cover-
book lapels
cover lamination
color of pages
book view
120
V2
A4 (210x297)
number of pages
book binding
book size
binding
pages
RGB 0/221/255
background color
80 g ofset
paper thickness
gallery 3Dbookmockup.tumblr.com
[email protected]
ukázky plných mockupů
A5
B5
letter
choose your book size
A4
bookmockup
square
ukázka první testovací webové stránky na stahování mockupů v PSD
V2
PSD
V8
spiral
choose your book binding
V1
7
120
mm
pages
write number of pages (book binding size)
PSD
YES
mockups gallery bookmockup.tumblr.com
[email protected]
A6
A5
B5
ch oo se yo ur boo k size
A4
book–mockup 3Dbookmockup
square
ukázka první testovací webové stránky na stahování mockupů v PSD
V2
V8
spiral
c h o o s e yo u r bo o k bi n d i n g
V1
15
120
mm
pages
wr ite n um ber of pag es ( bo o k bin d in g size)
YES
gallery 3Dbookmockup.tumblr.com mockups gallery bookmockup.tumblr.com
[email protected] [email protected]
2 3D book mockup propagace projektu Záměrem projektu bylo usnadnit studentům, designérům a dalším uživatelům tvorbu prezentací jak ateliérových úkolů, tak reálných zakázek. Online generátor je zdarma. Jako vhodný komunikační a prezentační kanál jsem zvolila Tumblr. Jedná se o velmi rozšířenou graficko-designerskou platformu, která je užívaná především pro prezentace designérů (portfolia) a blogy. Tumblr bude obsahovat galerii vzorových mockupů, které dohromady fungují jako prezentace online generátoru. Je nám však na první pohled jasné, že jde o vizualizaci mockupů, nikoli o portfolio designéra. Tento tumblr bude přístupný z webové stránky www.3Dbookmockup.com nebo dohledatelný přímo na Tumblru.
3Dbookmockup
návrh na tumblr
www.3Dbookmockup.com
[email protected]
závěr Výstupem projektu je webová stránka 3Dbookmockup a Tumblr. Tento projekt by měl designérům ukázat nové možnosti vizualizace a prezentace v grafickém designu. Přínos aplikace je v pestrosti modelování dle vlastní specifikace, jednoduchého ovládání online generátoru a příjemného uživatelského prostředí.
