Naše Nakladatelství

O projektu

Naše nakladatelství je nakladatelství knih. Web slouží jako katalog titulů a jako vstup pro autory, kteří nakladatelství mohou poslat rukopis. Není to e-shop. S klientem spolupracuju od roku 2024 a spolupráce pokračuje.

Moje role

Product designer. Web jsem převzal celý, navrhl jeho design systém a znovu v něm postavil všechny obrazovky.

Převzatý web bez vlastní logiky

Web, který jsem převzal, byl nekonzistentní. Ve Figmě neměl autolayout a chyběla mu vizuální i rozměrová logika, takže každá úprava znamenala ruční dolaďování. Rozhodl jsem se nezačínat jednotlivými stránkami, ale systémem, ze kterého se stránky dají poskládat. Podle původního designu jsem vytvořil kompletní design system a v něm všechny obrazovky postavil znovu.

Základ: typografie, barvy, rozestupy

Typografie má šest úrovní nadpisů (H1 70 px, H2 32, H3 24, H4 18, H5 16, H6 14), tři velikosti textu (18, 16 a 14 px s řádkováním 175 %) a štítky o velikosti 12 px. Barevná paleta stojí na lososové primární barvě a neutrálech, k nim patří čtyři sémantické barvy (modrá, zelená, červená a žlutá), každá v devíti odstínech. Rozestupy jsou v jedné tabulce hodnot a rozvržení stránky je popsané pro tři breakpointy: desktop, tablet a mobil. Desktop má šířku 1 440 px s okraji 100 px.

Ikony a značky

Sada obsahuje obecné ikony, ikony sociálních sítí, tři ilustrované ikony a loga dvanácti značek, které nakladatelství vydává. Loga jsou v systému jako samostatná sada, aby se na webu vždy použila stejná verze.

Komponenty

Systém má 33 zdokumentovaných komponent: od tlačítek, vstupních polí a záložek přes produktovou kartu a stavy knihy až po navigaci, patičku, blogové karty a rozbalovací otázky. Tlačítko má čtyři typy (plné lososové, obrysové lososové, obrysové neutrální a textové) ve dvou velikostech. Karta knihy má pět velikostních variant a obsahuje titul, autora, značku, cenu a stav: Připravujeme, Skladem, Není skladem nebo Vyšlo s datem.

Obrazovky postavené na systému

Nad systémem jsem znovu postavil obrazovky webu. Každá má desktopovou a mobilní verzi, některé i tabletovou.

Katalog

Levé menu s kategoriemi a filtrováním podle roku vydání, značky a dostupnosti, sekce Připravujeme a Doporučujeme a stránkování. Na mobilu se kategorie a filtry schovávají a seznam knih dostane celou šířku.

Moje úvaha, nejde o výsledek testování: katalog má dvě různé potřeby, procházet a zužovat. Kategorie vlevo dávají orientaci v celé nabídce, filtry zužují výběr, aniž by se člověk vracel zpět. Sekce Připravujeme je oddělená od Doporučujeme, protože kniha, která ještě nevyšla, plní jiný účel než kniha, kterou už lze mít.

Detail knihy a série

Detail ukazuje cenu a tlačítko vedle obálky, datum vydání, nakladatele, jazyk, ISBN a další knihy autora. U knih, které patří do série, jsou vidět další díly. Stránka série seskupuje knihy podle dílů. Sérii jsem řešil do hloubky tak, aby se v ní každá kniha zobrazovala přesně tak, jak má.

Moje úvaha, nejde o výsledek testování: u série záleží na pořadí a stavu. Každý díl má vlastní číslo, obálku a stav, takže čtenář vidí, co už vyšlo a co ještě ne, a může navázat tam, kde skončil. Cena a tlačítko stojí hned u obálky, údaje o vydání jsou v řádcích popisek a hodnot, aby se daly rychle dohledat.

Blog, rukopisy a kariéra

Blogový článek s karuselem dalších textů, formulář Pošlete nám rukopis se souborem ke nahrání a souhlasem se zpracováním osobních údajů a stránka Kariéra se čtyřmi výhodami, rozbalovací nabídkou pozice a formulářem pro životopis.

Výsledky

Hotový je design system s 33 komponentami, jednou typografickou sadou, barevnou paletou, tabulkou rozestupů a třemi breakpointy, a osm typů obrazovek: homepage, katalog, detail knihy, série, blog, tým, rukopisy a kariéra, vždy ve dvou až třech variantách. Web na nich běží. Čísla o dopadu, například konverze nebo rychlost, nemám a nechci je odhadovat.