Design, UX, Technik & výkon - když se tvůj portál stane ještě lepším!

Design, UX, technologie a výkon - když se tvůj portál stane ještě lepší!

Stefan Petri
zveřejněno:

Od nápadného a okázalého po spíše nenápadné a přesto užitečné – v posledních týdnech a měsících jsme na stránkách TutKit.com provedli řadu změn. Mezi nimi byly jak optimalizace výkonu a technické aktualizace, tak úpravy designu a uživatelského rozhraní. Celkově to má pozitivní vliv na vaši uživatelskou zkušenost. Co se změnilo pod kapotou a navrch – podrobný přehled.

Nyní bude temno

Od teď můžete jedním kliknutím kdykoli přepnout design na tmavý či světlý. Nastavili jsme to tak, jak je nastaveno v operačním systému.

Aktivujte tmavý design na TutKit.com.

V rámci toho jsme také převedli všechny obrázky do formátu AVIF, aby váš prohlížeč nemusel stahovat tolik dat (díky tomu se velikost obrázků zmenšila asi o 70% z původní velikosti).


Assety, šablony & E-knihy: více na první pohled, bez kliknutí na zbytečné odkazy

Tradičně vám na stránkách našich aktiv, šablon a E-knih zobrazujeme náhledové obrázky ke všem jednotlivým obsahům. Díky tomu vidíte přímo, co vás čeká při stahování.

Pod každým náhledovým obrázkem bylo navíc schováno malé menu. Přes ně jste mohli zvětšit náhledový obrázek, označit obsah jako oblíbený a získat informace o kompatibilitě. Pěkné … Ale znamenalo to také, že jste museli k zvětšení každého obrázku otevřít menu, kliknout na ikonu, prohlédnout si obrázek a zavřít ho, než jste pokračovali na další. Zbytečný odkaz. Proto jsme menu odstranili. Stačí nyní namířit myší na malý náhledový obrázek a blesk: Okamžitě vám bude zobrazena velká verze.

Při přepracování se rychle objevily další rozumné úpravy: Informace o kompatibilitě nyní můžete zobrazit prostřednictvím ikony s informacemi, která je okamžitě viditelná. Označení obsahu jako oblíbeného probíhá prostřednictvím také okamžitě viditelné ikony hvězdy, která se zobrazuje pouze pro přihlášené uživatele.

Efekt schůzku u jednotlivých položek
Zredukováno na to nejdůležitější: Při zobrazení našich jednotlivých obsahů stačí přehazovat kurzorem přes náhledový obrázek, abyste si ho velký zobrazili. Další funkce, které byly dříve skryté v menu, jsou nyní přístupné přímo prostřednictvím ikon.

Výukové videa: Teď jste také obrazem seznámeni!

Pokud jste se před časem podívali na jednu z našich stránek s výukovými videi, setkali jste se tam převážně s šedou pouští textů a tlačítek pro přehrávání. Náhled byl kompletně přepracován tak, aby odpovídal rozložení aktiv, šablon a E-knih.

Jinými slovy: Nyní se i u našich výukových videí zobrazují malé náhledové obrázky, což jednoduše působí estetičtěji. Pokud je video zdarma nebo nově aktualizováno, uvidíte – stejně jako u aktiv – barevné odznaky na obrazech.

Nový pohled: videa s náhledy
Od šedi k wow: Kde dříve u výukových videí viděli jste pouze tlačítko Play, nyní vám u tutorialů zobrazujeme také náhledové obrázky.

Tímto způsobem se naše stránky nyní prezentují jednotně. Ať už aktiv, šablona, E-kniha nebo výukové video: Je zde náhledový obrázek, který si zvětšíte při přejetí kurzorem; je zde tlačítko pro stahování nebo pro přehrávání videa; jsou zde ikony pro další informace a pro označení jako oblíbeného; pokud jsou k obsahu k dispozici další materiály, jako jsou projektové soubory, návody nebo textové tutoriály, najdete odkazy na nich na konci popisového textu.

Kromě toho jsme odstranili zbytečnosti, jako jsou ikony trojúhelníků pro rozbalení a zabalení textů, takže pohled je podle hesla méně je více uklizenější. Všechny optimalizace jsme nakonec připravili také pro mobilní zařízení.

Velké úklid na stránkách celkových balíčků

Co může být pryč? Co lze zobrazit jinak? Co lze lépe umístit na vhodnější pozici? Tyto otázky jsme obrátili na naše stránky s celkovými balíčky, abychom je zúžili a přesto zachovali vysoký informační obsah. Kromě výše zmíněných změn v zobrazení jednotlivých obsahů jsme provedli následující úpravy:

Galerie: V galeriích ukazujeme, jak můžete například využívat našich aktiv a šablon. Dříve zde byl efekt otáčení. Pěkný, ale také rušivý. Novou galerii jsme tedy zredukovali pouze na tři věci: uvidíte vybraný obraz, podtitul a navigaci doleva a doprava – bez velkého efektového ohňostroje kolem.

Rozbalit a zabalit a trochu více barev: Dosud bylo možné téměř každou sekci na stránkách s celkovými balíčky rozbalit a zabalit, pro což byly k dispozici odpovídající tlačítka ve tvaru trojúhelníků. Tato funkce byla odstraněna. Udělá to stránky ještě čistší – a buďme upřímní: Existuje někdo, kdo tuto funkci kdykoliv použil? Vedle toho jsme prostředky nadpisům rozdělili jasněji barvou. Od teď odděluje jednotlivé oblasti od sebe jemné zelené TutKit místo hromadného černého.

Info-oblast: Na horním pravém rohu stránek s balíčky shromažďujeme všechny dodatečné informace, například o kompatibilitě, počtu obsahu a kategoriích. Tady se odehrává spousta dat.

Oblast s informacemi jsme ještě jednou pročistili a vizuálně vylepšili. Takže pokrok ve studiu tutoriálů se nyní zobrazuje pouze pro přihlášené uživatele (vyhlášení návštěvníci ho stejně nepotřebují). Hodnocení našich balíčků se přesunulo dolů do komentářové sekce. Novinkou v oblasti informací je odkaz na uživatelská práva. Nejznatelnější změna se nakonec týká zobrazení osob, které balíček vytvořily. Namísto jejich jmen ti ukážeme jejich portréty. Doufejme, že to působí o něco přátelštějším dojmem...

Mnoho drobných zdokonalení:

  • žádná posuvná navigace u softwaru/kategorií
  • kontinuální posouvání ve vyhledávání, stránkách kategorií atd.
  • Karty: méně stínů, ikony pryč, hranaté rohy
  • Karty: animace pryč, namísto toho zelené překrytí
  • Přejetí tlačítka Split-Button optimalizováno
  • Větší obličeje, například v blogu a při prohlídce videa
  • Obličej ve formuláři pro kontakt
  • Úplně nový zápatí (už se neotevírá, ukazujeme obličeje atd.)
  • Stránka autorů: Odstranění odkazu "Na webové stránky autora", kontinuální posouvání, zelená překrytí
  • Domovská stránka: Nový obsah už není zobrazen jako posuvník
  • 4 sloupce u autorů
  • Skákání stránek u vyskakovacích oken
  • nový modul pro cílové skupiny

Méně otázek ohledně zlepšení výkonu

Rychlé stránky, které se rychle načítají - to má rádo Google, máme rádi my a jistě máš rád/a i ty. Pokud jde o výkon našeho portálu, i nadále budeme provádět vylepšení. Jednou z realizovaných změn byla optimalizace obrázků. Ty byly totiž přepnuty z tenkého formátu JPG na daleko tenčí formáty WEBP a AVIF.

Dále jsme se zabývali databázemi a dotazy, které probíhají při načítání našich stránek. Docela technické věci, ale pro příklad - pokud se dostaneš na jednu z našich stránek s balíčky tutoriálů, systém musí mimo jiné vědět, do jaké míry můžeš sledovat videa. Máš tedy členství? Koupil/a jsi si balíček? Jsou některá videa zdarma? Takové otázky musíme při načítání stránek položit mnoho, což samozřejmě zabere čas. Proto zde uplatňujeme páku k zvýšení výkonu (Pozor, teď to bude opravdu technické):

  • Zbytečné dotazy do databáze, které žádaly více informací, než je skutečně potřebné, byly odstraněny.
  • Rychlost nejčastěji prováděných dotazů do databáze byla zlepšena.
  • Kód v PHP metodách byl optimalizován a opakované dotazy do databáze v určitých cyklech byly eliminovány.
  • Všechny části našeho systému byly zkontrolovány na zbytečné dotazy do databáze, které byly používány na všech stránkách, zejména ty spojené s našimi položkami v menu. Tyto byly optimalizovány pro lepší výkon.
  • Bylo zjištěno, že některé dotazy do databáze byly zbytečně opakované, zejména ty, které byly spojeny s uživateli a balíčky. Tyto opakování byly opraveny pomocí dočasného paměťového systému (cache), což ušetřilo čas i zdroje.
  • Byl monitorován protokol systémových chyb a všechny nahlášené problémy byly vyřešeny.
  • Byly kontrolovány automatické úlohy systému (Cronjobs) s ohledem na ty, které běžely příliš dlouho nebo se přerušily. Tyto úlohy byly efektivnější tím, že filtrovaly informace přímo z databáze, místo toho, aby to dělaly nepřímo přes PHP kód.

Ve všech technologiích vše aktuální? Vše aktuální!

Samozřejmě jsme optimalizovali mnoho věcí pod kapotou nebo aktualizovali softwarové balíčky jako:

  • Aktualizace na nejnovější verzi PHP.
  • Laravel (naše framework) byl aktualizován z verze 9 na 10.
  • Téměř 35 balíčků z frameworku bylo aktualizováno, stejně jako SDK od našeho platebního poskytovatele Braintree.
  • Nyní používáme protokol http2 (nejraději bychom použili verzi 3, jenže jiště se (zatím) nepodporuje na Apache serveru.
  • Ubuntu bylo aktualizováno z verze 20.04 na 22.04 (bylo důležité pro podporu AVIF obrázků).

Co bude dál?

V současné době intenzivně pracujeme na tom, aby byl náš portál vícejazyčně dostupný od ledna. Je to docela náročné, ale budeme na to hrdí, až se nám to podaří.

Také bude již příští týden možné zakoupit jednotlivé položky se slevou, pokud právě probíhá akce. To má za následek, že náš samostatný obchod (shop.psd-tutorials.de) nebude aktualizován s novými produkty a také bude nejpozději koncem prvního čtvrtletí 2024 offline a všechny naše obsahy budou dostupné pouze na TutKit.com.

Chceme také v roce 2024 alespoň 1x měsíčně zasílat newsletter, aby všichni členové a odběratelé newsletterů viděli, co je nového. Protože jednu věc jsme dosud vždy dokázali: Každý týden byl zveřejněn minimálně jeden nový obsah!

Samozřejmě i nadále poskytovat zajímavý nový obsah. Sám/a bych chtěl/a například nahrát nový trénink k Adobe Photoshop Elements, protože se konečně něco změnilo na rozhraní a nyní se opravdu vyplatí poskytnout úplně nový trénink. Téma umělé inteligence nás bude i nadále zajímat a k tomu budeme udržovat existující produkty v nabídce nebo poskytovat úplně nové produkty.

Ještě něco chybí? Pak mi napište e-mail na info@tutkit.com. Sám bych byl rád, kdyby blog získal funkci komentářů. Co myslíš? Smysluplné nebo už stejně téměř nikdo nekomentuje kvůli nedostatku času?

Zveřejněno dne z Stefan Petri
Zveřejněno dne: Ze Stefan Petri
Stefan Petri společně se svým bratrem Matthiasem provozuje oblíbené odborné fórum PSD-Tutorials.de a vzdělávací platformu TutKit.com, která klade důraz na vzdělávání a rozvoj digitálních profesních dovedností.
Zpět na přehled