Dizajn manuál ============= ![Prefabetón Diviaky logo](https://www.prefabeton.sk/user/documents/upload/marketing/logo/logo.svg) Logo na stiahnutie na adrese: https://www.prefabeton.sk/user/documents/upload/marketing/logo/logo.svg Naše logo, a keď je pomerne jednoduché, nevytvárame znovu. Je definované v oficiálnom SVG súbore. Uistíme sa, že toto logo používame konzistentne. Externý dizajnér vždy použije oficiálne kanonické logo a nevymýšľa si vlastnú verziu. Určujúci dizajn je maľovaný na stene našej firmy. Digitálny font nie je dostupný. Tvary nie sú presné a ani nemajú byť. Majú svoje historické "maniere". O je vždy okrúhle, nie oválne. R s rovnou nožičkou. Tvar dĺžňa je typizovaný. Je možné použiť aj [inverznú verziu](https://www.prefabeton.sk/user/documents/upload/marketing/logo.html) nášho loga, kde biely text a biela tehla leží na tmavomodrom poli, tzv. negatívny priestor. ## Gramatika Názov našej firmy vždy píšeme ako Prefabetón Diviaky. Bez pomlčky, veľké prvé písmeno. Diviaky je možné vynechať len ak už plný názov v texte alebo na stránke bol uvedený vyššie ale nie v historických textoch. Názov našej firmy nepíšeme veľkými písmenami a nikdy nie s pomlčkou. Staršie texty postupne upravujeme pre zjednotenie. - Mená produktov a kategórií začíname veľkým písmenom a pokračujeme malými. - Nepíšeme ich len veľkými alebo len malými písmenami pokiaľ nejde o akronym, napr. TBS. - Jednotky vždy oddeľujeme medzerou, napr. 100 mm, 15 kg a 6 t. - Dbáme o správne písanie interpunkcie. Pred čiarkou a bodkou nikdy nedávame medzeru, za čiarkami, bodkami a znakmi :, ?, ! vždy medzeru dávame. - Zátvorky používame správne, nikdy nepíšeme medzeru za úvodnou zátvorkou a pred záverečnou, (takto) nie ( takto ). - Texty píšeme s rešpektom pre slovenský pravopis. Nepíšeme bez diakritiky. ## Dizajn a farby ![paleta](https://www.prefabeton.sk/user/documents/upload/marketing/logo/paleta-webu.png) V rámci nášho dizajnu sme verný našej farebnej schéme. - Základom je tmavomodrá farba. Jej hexadecimálna hodnota pre web je `#00306C`. Pre tlač je možné použiť aj ekvivalentnú "Catalina Blue". - Používame aj odtiene šedej ale maximálne dva, bledšiu sivú `#A8AABC` a tmavšiu sivú `#747687`. - K našej tmavomodrej sú k dispozícii dve teplé doplnkové farby príbuzné tehlovej červenej farbe škridly, tmavšia `#660D23` a svetlejšia `#9D434F`. Tieto komplementárne farby nikdy priamo nehraničia s našou tmavomodrou, vždy sú oddelené množstvom bieleho priestoru. Používajú sa len v krajne dôležitých elementoch a kde je potrebná výstraha, napríklad tlačítko "Do košíka" alebo banner "Navštívte našu predajňu.. otváracie hodiny". Pre špecializované potreby odtieňov našej modrej je k dispozícii modrá paleta generovaná počítačom na základe našej čelnej steny. ![paleta](https://www.prefabeton.sk/user/documents/upload/marketing/logo/paleta-podla-steny-obchodu.png) ## Štýl Používame aj negatívny priestor, napríklad biely text a krivky na pozadí našej tmavomodrej. V dizajne používame stredné množstvo bieleho priestoru, nie priveľa, nie sme vysoko luxusná značka, nie primálo, náš dizajn dostatočne dýcha. Napríklad na webe banery v mriežke oddeľuje 20 px. Font nášho webu je moderný bezpatkový švajčiarskeho typu, *Muli*. Tento používame aj pre tlačené materiály. ## Texty - Náš hlas je príjemný, hlas slušného slovenského človeka. Vyjadrovanie je stručné a sústredené na technický detail, oficiálnejšie a odmeranejšie, ale nie chladné. - Limitujeme klišé, nepoužívame prázdne a uvádzacie frázy. In medias res. - Bez archaizmov, bez adoptovaných slov anglického pôvodu. - Informujeme zákazníka o našom produkte a o výhodách nášho produktu pre jeho konkrétne použitie a potreby. Sústredíme sa na uspokojenie potrieb zákazníka. Na písanie textu pre web používame aj umelú inteligenciu (AI) ChatGPT cez http://chat.openai.com Otázky pre AI formulujeme napríklad takto: > *Prepíš názov tohto produktu v eshope aby sa našiel ľahšie vo vyhľadávačoch: (meno produktu)* > *Napíš popis produktu "meno produktu" pre eshop aby lepšie popísal užívateľovi jeho vlastnosti a použitie a zároveň maximalizoval objednávky. Teraz je popísaný takto: (popis produktu)* Východzí hlas výstupu je kompatibilný s našou firmou ale môže byť nudný a pridlhý. Na toto často treba AI upozorniť. Výstup treba vždy manuálne skontrolovať a upraviť, nikdy ho nepublikujeme ako vyšiel. Generované texty rovnako berieme ako radu, nevkladáme ich do systému bez kontroly a bez úprav. Pokus o programatické použitie AI neuspel, dobrý model nebol programaticky dostupný. Hromadné generovanie textu preto začalo exportom informácií o produktoch vo formáte CSV a tu je príklad príkazu pre AI: > Tu je info o produkte v eshope betonárskej firmy ako CSV. > > Na základe názvu produktu, krátkeho popisu a dlhého popisu mi vygeneruj aj s opravenou gramatikou > * Nové meno na základe pôvodného aby sa ľahšie našlo vo vyhľadávačoch. > * Nový krátky popis je pre zoznam produktov, často chýba, doplň ho na základe info v riadku. Má byť kratší ako popis, okolo 150 znakov > * Popis aby lepšie popísal užívateľovi vlastnosti produktu a zároveň zvýšil objednávky, tiež niekedy chýba, rozšír ho na základe svojich vedomostí. > > Ak nemáš dostatok kontextu, radšej si nevymýšľaj a nechaj to krátke. > > Vráť nové CSV riadky ako CSV s úvodzovkami > > id,názov,krátky popis,popis Pôvodné CSV produktov bolo takto po riadkoch kŕmené AI a nové CSV potom spracované manuálne a postupne použité pri editácii produktov. ## Domény Naša doména je **www.prefabeton.sk**. Všetky iné sú presmerované na jej sekcie. Tieto používajú obrázky, text a video. Tvoríme jednotnú značku, nepoužívame mikro-stránky. Napr. http://skruze.sk ➡️ https://www.prefabeton.sk/betonove-skruze/ ## Obrázky a video ### Publikovanie videa Videá publikujeme na našom webe potom ako sú optimalizované programom FFMPEG vždy vo formáte MP4. FFMPEG je softvér zdarma používaný z príkazového riadku, ktorý si môžete stiahnuť z https://ffmpeg.org Nikdy nepublikujeme video cez Youtube, alebo surové bez kompresie. Maximálne rozmery sú 640 x 320 pixelov. Video je publikované na výšku len v krajnom prípade, ak iné nebolo. Vždy snímame na šírku. Tu sú príklady príkazov pre optimalizáciu videa pre našu stránku. Uprav .MOV súbor `nakladka_sachty.mov` na šírku max 640px a preformátuj na MP4 ffmpeg -i nakladka_sachty.mov -vf scale=640:-1\ -c:v libx264 -crf 23 -c:a aac -strict experimental\ -b:a 128k nakladka_sachty.mp4 Uprav .MOV súbor `pokladka_dlazby.mov` na výšku max 640px, odkroj spodných 30% a preformátuj na MP4 ffmpeg -i pokladka_dlazby.mov -vf "scale=-1:640,crop=iw:ih*0.7:0:0"\ -c:v libx264 -crf 23 -c:a aac -strict experimental\ -b:a 128k pokladka_dlazby.mp4 Uprav .MOV súbor `liatie2.mov` na výšku max 640px, odkroj prvých 20 sekúnd a preformátuj na MP4 ffmpeg -i liatie2.mov -vf "trim=start=25,scale=-1:640"\ -c:v libx264 -crf 23 -c:a aac -strict experimental\ -b:a 128k liatie2.mp4 Video vždy načítame v rámci Shoptetu ➡️ Vzhľad a obsah ➡️ Správca súborov ➡️ do priečinka video. Názov súboru videa je bez diakritiky, podtržníky namiesto medzier. Po načítaní klikneme na video pravým tlačidlom ➡️ Zobraziť URL. Skopírujeme cestu k videu (všetko po prefabeton.sk) Video vložíme do článku pomocou HTML kódu. Napríklad na stránke kategórie zvolíme Horný popis kategórie ➡️ Nástroje ➡️ <> Zdrojový kód Do src vložíme nakopírovanú cestu nového videa. ### Publikovanie obrázkov ImageMagick je podobne ako FFMPEG softvér zdarma používaný z príkazového riadku na stiahnutie z https://imagemagick.org Tento používame na optimalizáciu fotiek pre náš web a tiež používame https://tinypng.com pre daľšiu kompresiu. Shoptet automaticky pridáva na naše fotky vodoznak. Vodoznak bol napríklad vygenerovaný z nášho logo programom ImageMagick nasledovne. convert logo.png -alpha set -channel a \ -evaluate divide 4 +channel vodoznak.png Dôležitá je konzistencia pre naturálny jednotný vzhľad publikovaných fotiek, ktoré často nie sú profesionálne fotené v poli. Obrázky v galérii webu boli napríklad pripravené hromadne pomocou ImageMagick takto: mogrify -monitor -resize 1200x> -filter Lanczos\ -modulate 110,100,95\ -white-balance -auto-gamma\ -quality 85 -format jpg photos/* Argumenty `-white-balance` a `-auto-gamma` robia automaticky korektúry. Farby sú potom jemne modulované argumentom `-modulate 110,100,95`. Ani teplé, ani chladné, ani príliš živé. Kvalita JPEG fotiek je nastavená na hodnotu 85 nech súbory nie sú priveľké. A rovnako je maximálny rozmer 1200px. Pre antialiasing pri zmenšovaní je použitý `-filter Lanczos`. Mená súborov obrázkov používajú rovnaký formát ako naše URL, bez diakritiky, pomlčky namiesto medzier. Pre premenovanie veľkého množstva fotiek na našu konvenciu je dostupný program pre príkazový riadok `premenuj.py` ktorý použijeme takto: # stiahneme program curl https://www.prefabeton.sk/user/documents/upload/marketing/premenuj.py.txt\ -o premenuj.py # použijeme program python premenuj.py /cesta/k/priečinku/foto ## Kontakty * Shoptet.sk (eshop a redakčný systém) - Zdeno Rybanský 0950 492 562 * Webygroup.sk (domény a hosting) - Peter Heško 0908 232 888 * Unilexicon.com/fm (Konzultant pre web, autor prvej verzie tohto manuálu) - František Malina 0951 554 116 +44 7308 122 511 ------------ Ďakujem za Vaše štúdium tohto dizajn manuálu. Ak pracujete pre Prefabetón v kapacite dizajnéra, neváhajte tento manuál upraviť, doplniť alebo s rešpektom z neho vymazať. Jeho zdrojová forma je na adrese https://www.prefabeton.sk/user/documents/upload/marketing/dizajn-manual.md.txt Editor https://stackedit.io František Malina