Design, UX, technika a výkon - keď sa tvoj portál ešte zlepší!

Dizajn, UX, technika a výkon - keď sa tvoj portál ešte stane lepším!

Stefan Petri
zverejnené:

Od markantného a nápadného po skôr nenápadné a pritom užitočné - v posledných týždňoch a mesiacoch sme na stránke TutKit.com vykonali množstvo zmien. Patrili medzi ne zlepšenia výkonu a technické aktualizácie, rovnako ako aj úpravy dizajnu a orientácie používateľa. Všetko sa celkovo pozitívne prejavuje na tvojej užívateľskej skúsenosti. Čo sa zmenilo pod kapotou a na povrchu - podrobný prehľad.

Teraz bude tmavé

Odteraz môžeš kedykoľvek jediným kliknutím zmeniť dizajn na tmavý alebo svetlý. Nastavili sme ho tak, ako je prednastavené v operačnom systéme.

Aktivujte tmavý dizajn na stránke TutKit.com.

V tejto súvislosti sme taktiež premenili všetky obrázky do formátu AVIF, čím sa tvoj prehliadač nemusí stiahnuť toľko dát (približne 70% obrázkov sa tak zmenšili z hľadiska veľkosti súboru).


Assety, šablóny a E-knihy: viac informácií na prvý pohľad, bez klikania

Odjakživa sme ti na stránkach našich aktív, šablón a E-kníh k jednotlivým obsahom zobrazovali malé náhľady. Takže hneď vidíš, čo ťa čaká pri sťahovaní.

Za každým náhľadovým obrázkom sa skrývalo malé menu. Pomocou neho si mohol zväčšiť náhľadový obrázok, označiť obsah ako obľúbený a zobraziť informácie o kompatibilite. Príjemné... Ale znamenalo to tiež, že si musel pred zväčšením každého obrázku otvoriť menu, kliknúť na ikonu, pozrieť si obrázok a zavrieť ho pred tým, ako prejdeš na ďalší. Zbytočný okruh. Preto sme toto menu odstránili. Stačí teraz prejsť myšou cez malý náhľadový obrázok a zrazu: Už ti bude zobrazená veľká verzia.

Pri úpravách okamžite vyplynuli aj ďalšie vhodné úpravy: Informácie o kompatibilite sa teraz dajú získať cez priamo viditeľnú ikonu s informáciami i. Obľúbenie obsahu prebieha cez tiež priamo viditeľnú ikonu hviezdy, ktorá sa navyše zobrazuje len pre prihlásených používateľov.

Efekt Hover na jednotlivých obsahoch
Zjednodušené: Pri prezeraní našich jednotlivých obsahov sa ti nemusíš zameriavať len na malý náhľadový obrázok, stačí ho vyznačiť kurzorom, aby sa ti zobrazil veľký. Ďalšie funkcie, ktoré boli predtým ukryté v menu, sú teraz priamo dostupné pomocou ikon.

Videonávody: Teraz budeš informovaný tiež obrázkami!

Ak si pred časom pozeral na jednej z našich stránok s videonávodmi, stretol si sa tam hlavne s prevažne šedou púšťou textov a tlačidiel pre spustenie videa. Pozorovanie sme úplne prepracovali tak, že zodpovedá jednému k jednému rozloženiu aktív, šablón a E-kníh.

Inak povedané: Aj pri našich videonávodoch teraz nájdeš malé náhľadové obrázky, čo jednoducho pôsobí esteticky príťažlivejšie. Či video je bezplatné alebo nová aktualizácia, uvidia napríklad na aktívoch vo forme farebných odznakov.

Nový pohľad: Videa s náhľadmi.
Zo šedej na wow: Kým predtým si pri videonávodoch videl iba tlačidlá Play, teraz ti ukážeme aj náhľadové obrázky.

Naše stránky sa teraz prezentujú konzistentne. Bez ohľadu na to, či ide o aktívum, šablónu, E-knihu alebo videonávod: Tam je náhľadový obrázok, ktorý pri pohybe kurzora zväčšíš; tam je tlačidlo na stiahnutie alebo na prehranie videa; tam sú ikony pre ďalšie informácie a pre obľúbenie; akýchsi doplnkových materiálov ako projektové súbory, návody alebo textové návody, ktoré sú k dispozícii k obsahu, nájdeš linky na konci popisových textov.

Okrem toho sme odstránili zbytočné ikony trojuholníkov na otváranie a zatváranie textov, takže zobrazenie pôsobí podľa hesla menej je viac upravenejšie. Všetky optimalizácie sme nakoniec pripravili aj pre mobilné zariadenia.

Dôkladné upratovanie na stránkach balíkov

Čo môže ísť preč? Čo môže byť zobrazené inak? Čo sa dá umiestniť na lepšie miesto? Tieto otázky sme pokladali naše stránky balíkov s cieľom ich zúžiť a zároveň udržať vysokú informačnú hodnotu. Okrem vyššie uvedených zmien v zobrazení jednotlivých obsahov sme vykonali tieto úpravy:

Galéria: V galériách zobrazujeme, ako môžeš napríklad využiť naše aktíva a šablóny. Doteraz tam bola rotácia. Pekné, ale aj rušivé. Zobrazovanie novej galérie sme preto obmedzili na presne tri veci: vidíš vybraný obrázok, podtitulok a navigáciu doprava a doľava - bez veľkého ohňostroja efektov okolo.

Otvárať a zatvárať a trošku viac farby: Doteraz sa dalo skoro každú sekciu na stránkach balíkov otvárať a zatvárať, na to boli k dispozícii príslušné tlačidlá v tvare trojuholníkov. Táto funkcia bola odstránená. Robí stránky ešte čistejšími - a buďme úprimní: Existuje niekto, kto by túto funkciu vôbec niekedy využil? Okrem toho sme sekciám udelili jednotnejšiu farbu. Od teraz všetky dôležité časti oddeluje od seba nie hrubý čierny, ale jemný TutKit-zelený pruh.

Informačná oblasť: V pravom hornom rohu stránok so zoskupenými sadami zobrazujeme všetky dodatočné informácie, napríklad o kompatibilite, počete obsahu a kategóriách. Tu sa zhromažďuje veľa údajov.

Informačnú oblasť sme ešte raz upravili a vizuálne zlepšili. Pokrok pri tutoriáloch bude teraz zobrazený iba pre prihlásených používateľov (odhlásení návštevníci ho totiž nepotrebujú). Hodnotenie našich balíkov sa presunulo nadol do komentárnej sekcie. Novinkou v informačnej oblasti je odkaz na práva na používanie. Pravdepodobne najvýraznejšia zmena sa týka zobrazenia osôb, ktoré vytvorili balík. Namiesto ich mien vám zobrazíme ich portréty. Dúfame, že to tiež pôsobí o niečo priateľskejšie ...

Mnoho malých vylepšení detailov:

  • žiadna posuvná navigácia viac pre Softvér/Kategórie
  • kontinuálne posúvanie pri vyhľadávaní, stránkach kategórií atď.
  • Karty: menej tieňov, ikony preč, rohovité rohy
  • Karty: animácia preč, namiesto toho zelený prekryv
  • Optimalizovaný efekt hover pre rozdelené tlačidlo
  • Veľkolepejšie tváre, napríklad v blogu a pri videoukážkach
  • Tvár v kontaktnom formulári
  • Úplne nový päta (už nie otváranie, zobrazenie tváre atď.)
  • Stránka s autorom: Odkaz "Na web autora" preč, kontinuálne posúvanie, zelené prekryvy
  • Titulná stránka: Nové obsahy už nie sú ako posuvník
  • 4 stĺpce pre autorov
  • Stránkovanie pri vyskakovacích oknách
  • nový modul pre cieľové skupiny

Somárskych otázok o zlepšení výkonu menej

Rýchle stránky, ktoré sa rýchlo načítavajú – páčia sa Google, páčia sa nám a pravdepodobne sa páčia aj vám. Čo sa týka výkonu našej stránky, aj naďalej budeme postupne zlepšovať. Máme však napríklad optimalizáciu obrázkov. Tieto sme preniesli z kompaktného formátu JPG na oveľa kompaktnejšie formáty WEBP a AVIF.

Okrem toho sme sa venovali databázam a dotazom, ktoré sa vykonávajú pri načítaní našich stránok. Je to dosť technické všetko, ale len aby sme uviedli príklad: Keď prídete na jednu z našich stránok so zoskupenými sadami s tutoriálmi, systém musí vedieť napríklad, do akej miery si môžete pozrieť videá. Máte teda členstvo? Kúpili ste si balík? Sú niektoré videá prípadne zadarmo? Takéto otázky musíme pri načítaní stránky opakovane klásť, čo samozrejme trvá čas. Preto sme uplatnili páku na zlepšenie výkonu (Upozornenie, teraz to už bude skutočne technické):

  • Nepotrebné dotazy do databázy, ktoré sa pýtali na viac informácií, než bolo skutočne potrebné, boli odstránené.
  • Rýchlosť najčastejšie vykonávaných dotazov do databázy bola zlepšená.
  • Kód v PHP metódach bol optimalizovaný a opakujúce sa dotazy do databázy v určitých cykloch boli eliminované.
  • Všetky časti nášho systému boli preskúmané z hľadiska zbytočných dotazov do databázy, ktoré sa používali na všetkých stránkach, najmä tie, ktoré boli prepojené s našimi položkami v ponuke. Tieto boli optimalizované pre lepší výkon.
  • Zistilo sa, že niektoré dotazy do databázy sa opakovali zbytočne, najmä tie, ktoré spájali používateľov s balíkmi. Tieto opakovania boli vyriešené pomocou dočasného pamäťového systému (cache), čím sa ušetrili čas a zdroje.
  • Protokol systému bol sledovaný a všetky hlásené problémy boli vyriešené.
  • Automatizované úlohy systému (Cronjobs) boli kontrolované, či niektoré z nich trvali príliš dlho alebo zlyhali. Tieto úlohy boli efektívnejšie navrhnuté tak, aby filtrovali informácie priamo z databázy, namiesto toho, aby to robili nepriamo cez PHP kód.

Je technika všetko aktuálne? Všetko je aktuálne!

Samozrejme sme aj mnoho optimalizovali pod kapotou alebo aktualizovali v softvérových balíčkoch:

  • Aktualizácia na najnovšiu verziu PHP.
  • Laravel (náš rámec) bol aktualizovaný z verzie 9 na 10.
  • Vyše 35 balíčkov rámca bolo aktualizovaných, rovnako ako SDK od našeho platobného poskytovateľa Braintree.
  • Teraz používame http2 (najradšej by sme používali verziu 3, lenže ju (zatiaľ) nepodporuje server Apache.
  • Ubuntu bol aktualizovaný z 20.04 na 22.04 (bolo to dôležité pre podporu obrázkov vo formáte AVIF).

Čo ešte príde?

Práve intenzívne pracujeme na tom, aby bol náš portál od januára prístupný aj viacjazyčne. Je to dosť náročný úkon, ale sme na seba hrdí, keď sa nám to podarí.

Okrem toho už budete môcť od budúceho týždňa zakupovať jednotlivé obsahy aj so zľavou, ak práve prebieha akcia. To má za následok, že náš samostatný obchod (shop.psd-tutorials.de) nebude viac aktualizovaný novými výrobkami a najneskôr do konca 1. štvrťroka 2024 sa vypne a všetky naše obsahy budú prístupné iba na stránke TutKit.com.

Chceme v roku 2024 tiež aspoň 1 x mesačne posielať newsletter, aby všetci členovia a predplatitelia newsletterov videli všetky novinky. Lebo jedno sme dovtedy vždy dokázali: Každý týždeň sme priniesli aspoň jeden nový obsah online!

Samozrejme aj naďalej budeme poskytovať zaujímavé nové obsahy. Sám by som napríklad rád natočil nový tréning k Adobe Photoshop Elements, pretože sa konečne niečo zmenilo aj na jeho rozhraní a teraz sa oplatí poskytnúť úplne nový tréning. Téma umelej inteligencie nás aj naďalej bude zaujímať, a k tomu budeme udržiavať existujúce produkty v najnovšom stave alebo poskytovať úplne nové produkty.

Chýba ešte niečo? Potom mi prosím napíš e-mail na info@tutkit.com. Tiež by som bol rád, ak by blog dostal možnosť komentovania. Čo si myslíš? Rozumné alebo nikto už tak či tak nekomentuje kvôli nedostatku času?

Uverejnené dňa od Stefan Petri
Uverejnené dňa: Od Stefan Petri
Stefan Petri prevádzkuje spolu so svojím bratom Matthiasom populárne odborné fórum PSD-Tutorials.de a vzdelávaciu platformu TutKit.com, ktorá kladie dôraz na rozvoj digitálnych profesionálnych kompetencií vo vzdelávaní a odbornej príprave. 
Späť na prehľad