Dizajn manuál

Prefabetón Diviaky logo

Naše logo, aj keď je pomerne jednoduché, nevytvárame znovu. Logo na stiahnutie

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 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.

Dizajn a farby

paleta

V rámci nášho dizajnu sme verný našej farebnej schéme.

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

Š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

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

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.

<video width="640" height="360" controls>
  <source src="/user/documents/upload/video/liatie.mp4" type="video/mp4">
</video>

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

Ď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