Design, UX, Tecnica & Performance - quando il tuo portale diventa ancora migliore!

Design, UX, Tecnologia e Performance - quando il tuo portale diventa ancora migliore!

Stefan Petri
pubblicato:

Dall'aspetto marcato e vistoso a quello piuttosto discreto eppure utile – nelle ultime settimane e mesi abbiamo apportato numerose modifiche su TutKit.com. Tra queste vi erano miglioramenti delle prestazioni e aggiornamenti tecnici così come adattamenti al design e all'esperienza dell'utente. Nel complesso, tutto ciò ha un impatto positivo sulla tua esperienza utente. Una panoramica dettagliata su ciò che è cambiato sotto il cofano e sopra di esso.

Ora si fa buio

Da ora in poi puoi cambiare il design da scuro a chiaro e viceversa con un solo clic. Lo abbiamo impostato come predefinito, come è memorizzato nel sistema operativo.

Attiva il design scuro su TutKit.com.

In quest'ottica, abbiamo convertito tutte le immagini nel formato AVIF, in modo che il tuo browser non debba scaricare così tanti dati (circa il 70% delle immagini è diventato più piccolo dal punto di vista della dimensione del file).


Risorse, modelli ed e-book: più visibilità in un colpo d'occhio, senza clic aggiuntivi

Da sempre mostriamo su le pagine delle nostre risorse, modelli e e-book anteprime di tutti i contenuti individuali. In questo modo vedi direttamente cosa ti aspetta al momento del download.

Inoltre, dietro ogni anteprima c'era anche un piccolo menu. Attraverso di esso potevi ingrandire l'anteprima, contrassegnare il contenuto come preferito e consultare le indicazioni di compatibilità. Carino... Ma significava anche che per ingrandire ogni immagine dovevi aprire il menu, fare clic su un'icona, guardare e chiudere l'immagine prima di passare alla successiva. Un diversivo inutile. Abbiamo quindi rimosso il menu. Ora basta passare il mouse su una piccola anteprima e hop: ti verrà mostrata la versione ingrandita.

Durante la revisione sono sorte rapidamente altre modifiche significative: le indicazioni di compatibilità possono essere ora richiamate tramite l'icona dell'info-i direttamente visibile. La marcatura del contenuto come preferito avviene tramite l'icona a stella altrettanto visibile, che viene inoltre visualizzata solo per gli utenti connessi.

Effetto hover sui contenuti singoli
Essenziale: Nella visualizzazione dei nostri contenuti singoli, ora basta passare il mouse sull'anteprima per visualizzarla ingrandita. Ulteriori funzionalità, che erano precedentemente nascoste in un menu, sono ora accessibili direttamente tramite icone.

Video tutorial: ora anche qui hai un'idea grazie all'immagine!

Se qualche tempo fa avevi dato un'occhiata alle nostre pagine con video tutorial, ti sarebbe capitato di trovare non molto più di un deserto prevalentemente grigio di testi e pulsanti di riproduzione. La visualizzazione è stata completamente rivisitata, in modo da adottare esattamente il layout delle risorse, modelli ed e-book.

In poche parole: Anche nei nostri video tutorial ora sono presenti piccole anteprime, che sono semplicemente più esteticamente accattivanti. Se il video è gratuito o si tratta di un aggiornamento fresco, puoi vederlo – come per le risorse – sotto forma di badge colorati sulle immagini.

Nuova visualizzazione: video con anteprime.
Da grigi a eccezionali: mentre in precedenza nei video tutorial vedevi solo i pulsanti di riproduzione, ora mostriamo anche nelle lezioni i riquadri delle anteprime.

Le nostre pagine si presentano ora in modo uniforme. Che si tratti di una risorsa, un modello, un e-book o un video tutorial: c'è un'anteprima che ingrandisci passandoci sopra; c'è un pulsante per il download o per la riproduzione del video; ci sono icone per ulteriori informazioni e per contrassegnare come preferito; se per i contenuti sono disponibili ulteriori materiali come file di progetto, guide o tutorial testuali, troverai i relativi link in fondo alle descrizioni.

Inoltre, abbiamo rimosso elementi superflui come le icone a freccia per aprire e chiudere i testi, in modo che la visualizzazione risulti più pulita e ordinata secondo il principio di meno è meglio. Tutte le ottimizzazioni sono infine state preparate anche per i dispositivi mobili.

Un grande rinnovo nelle pagine dei pacchetti completi

Cosa può essere tolto? Cosa può essere rappresentato diversamente? Cosa può essere posizionato in una posizione migliore? Queste sono le domande che abbiamo posto alle nostre pagine dei pacchetti completi, per snellirle mantenendo comunque alto il livello informativo. Oltre alle modifiche già menzionate in precedenza nella visualizzazione dei contenuti singoli, abbiamo apportato le seguenti modifiche:

Galleria: Nelle gallerie mostriamo come utilizzare, ad esempio, le nostre risorse e i nostri modelli. In precedenza c'era un effetto di rotazione. Carino, ma anche distante. Abbiamo ridotto la vista della nuova galleria a esattamente tre elementi: vedi l'immagine selezionata, un sottotitolo e il navigatore sinistra-destra – senza troppi fuochi d'artificio di effetti.

Apri e chiudi e un po' più di colore: Finora era possibile espandere e comprimere praticamente ogni sezione in una pagina dei pacchetti completi, per la quale erano disponibili apposite icone a forma di triangolo. La funzionalità è stata rimossa. Rende le pagine ancora più pulite – e, diciamocelo: c'è qualcuno che abbia mai usato questa funzione? Inoltre, abbiamo dato ai sottotitoli intermedi un po' più di colore costante. Ora, dall'alto verso il basso, anziché di un nero ingombrante, una tonalità di verde TutKit più morbida separa le varie sezioni l'una dall'altra.

Area informazioni: In alto a destra nelle pagine del pacchetto completo raccolgiamo tutte le informazioni aggiuntive, ad esempio sulla compatibilità, sul numero di contenuti e sulle categorie. Qui si accumulano molte informazioni.

L'area delle informazioni è stata ripulita e migliorata in modo illustrativo. Il progresso nell'apprendimento per i tutorial verrà ora visualizzato solo per gli utenti loggati (i visitatori non loggati non ne hanno bisogno). La valutazione dei nostri pacchetti è stata spostata in basso all'area commenti. Una novità nell'area informazioni è un link sui diritti d'uso. Il cambiamento più evidente riguarda infine la rappresentazione delle persone che hanno creato il pacchetto. Mostreremo i loro ritratti al posto dei loro nomi. Speriamo che dia subito un'impressione più amichevole...

Piccoli miglioramenti dei dettagli:

  • nessuna navigazione a slider per Software/Categorie
  • scorrimento continuo in generale nella ricerca, nelle pagine delle categorie, ecc.
  • Cards: meno ombreggiature, icone rimosse, angoli squadrati
  • Cards: animazione rimossa, invece sovrapposizione verde
  • Effetto hover ottimizzato per il pulsante split
  • Visi più grandi, ad esempio nel blog e nel video tour
  • Viso nel modulo di contatto
  • Footer completamente rinnovato (niente più apertura, mostrare i volti, ecc.)
  • Pagina autore: "Andare al sito web dell'autore" rimosso, scorrimento continuo, sovrapposizioni verdi
  • Homepage: I nuovi contenuti non vengono più visualizzati come slider
  • 4 colonne per autori
  • Salto pagina per pop-up
  • nuovo modulo per il target di riferimento

Con meno interrogativi sul miglioramento delle performance

Pagine veloci che si caricano rapidamente - Google lo adora, noi lo apprezziamo e tu sicuramente anche. Per quanto riguarda le prestazioni del nostro portale, continueremo a realizzare miglioramenti in futuro. Ad esempio, abbiamo implementato l'ottimizzazione delle immagini. Sono state sostituite da formati più leggeri come WEBP e AVIF rispetto al slim JPG.

Ci siamo anche occupati dei database e delle interrogazioni che avvengono durante l'accesso alle nostre pagine. Tutto molto tecnico, ma solo per darti un esempio: quando visiti una delle nostre pagine di pacchetti completi con tutorial, il sistema deve sapere fino a che punto puoi guardare i video. Quindi, hai una sottoscrizione? Hai acquistato il pacchetto? Alcuni video sono gratuiti? Queste sono domande che dobbiamo porre a ogni caricamento della pagina, il che ovviamente richiede tempo. Pertanto stiamo lavorando per migliorare le prestazioni (Attenzione, diventa davvero tecnico):

  • Sono state eliminate le interrogazioni al database non necessarie che richiedevano più informazioni di quelle effettivamente necessarie.
  • È stata migliorata la velocità delle interrogazioni al database più frequentemente eseguite.
  • Il codice nei metodi PHP è stato ottimizzato e le interrogazioni ripetitive al database in determinati cicli sono state eliminate.
  • Tutte le parti del nostro sistema sono state esaminate per interrogazioni al database inutili utilizzate su tutte le pagine, in particolare quelle collegate ai nostri menu. Queste interrogazioni sono state ottimizzate per una migliore performance.
  • Si è scoperto che alcune interrogazioni al database venivano ripetute più volte inutilmente, in particolare quelle che collegano gli utenti ai pacchetti. Tali ripetizioni sono state rimosse grazie a un sistema di memorizzazione a breve termine (cache), consentendo un risparmio di tempo e risorse.
  • È stato monitorato il registro degli errori del sistema e sono stati risolti tutti i problemi segnalati.
  • Sono stati verificati i compiti di sistema automatizzati (Cronjobs) che siano rimasti in esecuzione troppo a lungo o interrotti. Tali compiti sono stati resi più efficienti filtrando direttamente le informazioni dal database anziché attraverso il codice PHP.

Tutto aggiornato con la tecnologia?

Ancora molte ottimizzazioni e aggiornamenti di pacchetti software sotto il cofano sono stati effettuati, come ad esempio:

  • Aggiornamento alla versione PHP più recente.
  • Laravel (il nostro framework) è stato aggiornato dalla versione 9 alla 10.
  • Circa 35 pacchetti del framework sono stati aggiornati insieme allo SDK del nostro fornitore di pagamenti Braintree.
  • Attualmente stiamo utilizzando http2 (preferiremmo utilizzare la versione 3, solo che (ancora) non è supportata dall'Apache-Server).
  • Ubuntu è stato aggiornato dalla versione 20.04 alla 22.04 (è stato importante per il supporto alle immagini AVIF).

Cosa c'è in arrivo?

Stiamo lavorando intensamente affinché il nostro portale sia accessibile anche in più lingue a partire da gennaio. È un impegno significativo, ma siamo orgogliosi quando avremo completato questo progetto.

Inoltre, sarà possibile acquistare singoli contenuti con uno sconto, nel caso in cui ci sia una promozione in corso, già dalla prossima settimana. Di conseguenza, il nostro negozio separato (shop.psd-tutorials.de) non sarà più aggiornato con nuovi prodotti e chiuderà definitivamente entro la fine del primo trimestre del 2024, con tutti i nostri contenuti accessibili esclusivamente su TutKit.com.

Nel 2024 vogliamo inviare almeno 1 newsletter al mese affinché tutti i membri e gli abbonati alla newsletter possano vedere tutte le novità. Infatti, fino ad ora siamo sempre riusciti a pubblicare almeno un nuovo contenuto online ogni settimana!

Continueremo sicuramente a offrire nuovi contenuti interessanti. Personalmente, mi piacerebbe registrare un nuovo corso su Adobe Photoshop Elements, poiché finalmente ci sono state alcune modifiche all'interfaccia e ora vale davvero la pena creare un nuovo corso completo. Il tema dell'IA continuerà ad appassionarci e manterremo i nostri prodotti esistenti aggiornati o ne presenteremo di nuovi.

Mancano delle cose? Allora scrivimi una mail a info@tutkit.com. Mi farebbe piacere se il blog avesse anche una funzione di commento. Cosa ne pensi? Utile o comunque nessuno commenta più per mancanza di tempo?

Pubblicato su da Stefan Petri
Pubblicato su:
Di Stefan Petri
Stefan Petri gestisce insieme a suo fratello Matthias il popolare forum specializzato PSD-Tutorials.de così come la piattaforma di e-learning TutKit.com, che pone un accento sulla formazione e sul perfezionamento delle competenze professionali digitali. 
Torna alla panoramica