Design, UX, tehnologie și performanță - atunci când portalul tău devine și mai bun!

Design, UX, tehnică și performanță - când portalul tău devine încă mai bun!

Stefan Petri
publicat:

De la distinct și vizibil până la mai degrabă discret și totuși util - în ultimele săptămâni și luni am făcut numeroase schimbări pe TutKit.com. Printre acestea s-au aflat îmbunătățiri de performanță și actualizări tehnice, la fel ca și ajustări ale design-ului și a navigării utilizatorului. Toate acestea au efect pozitiv asupra experienței tale ca utilizator. O prezentare generală comprehensivă privind ce s-a schimbat sub capota și suplimentar.

Acum devine întunecat

Începând de acum poți schimba design-ul între întunecat și deschis cu un singur clic. L-am setat implicit conform a ceea ce este înregistrat în sistemul de operare.

Activați designul întunecat pe TutKit.com

În același timp, am convertit toate imaginile în formatul AVIF pentru a face ca browser-ul tău să nu descarce atât de multe date (astfel, dimensiunea fișierelor s-a redus cu aproximativ 70%).


Resurse, Șabloane & E-Books: mai mult pe o singură pagină, fără clicuri intermediare

Dintotdeauna, pe paginile noastre dedicate resurselor, șabloanelor și E-Books, am afișat mici imagini de previzualizare ale fiecărui conținut individual. Astfel, vezi direct ce te așteaptă la descărcare.

În spatele fiecărei imagini de previzualizare se ascundea de asemenea un mic meniu. Prin intermediul său, puteai mări imaginea de previzualizare, marca conținutul ca favorit și accesa informații despre compatibilitate. Drăguț... Dar însemna și că pentru a mări fiecare imagine trebuia să deschizi meniul, să selectezi un icon, să vezi și să închizi imaginea înainte de a trece la următoarea. Un ocol inutil. De aceea am eliminat meniul. Acum este suficient să treci cu mouse-ul peste o mică imagine de previzualizare și hop: deja îți va fi afișată varianta mare.

În timpul revizuirii, au apărut rapid și alte ajustări utile: Informațiile de compatibilitate pot fi acum accesate printr-un icon vizibil direct cu un i Info. Favorizarea conținutului se realizează printr-un separat icon stea, care mai ales acum este afișat doar pentru utilizatorii care s-au conectat.

Efect de hover pentru conținutul individual
Concentrat pe esențial: când vizualizezi conținuturile noastre individuale, trebuie doar să treci cursorul peste imaginea de previzualizare pentru a o vedea în mărime mare. Alte funcții, care erau ascunse anterior într-un meniu, pot fi acum accesate direct prin intermediul iconurilor.

Tutoriale video: Acum ești și aici vizibil prin imagine!

Dacă te-ai uitat acum ceva timp pe una dintre paginile noastre cu tutoriale video, probabil că ai întâlnit acolo în mare parte un deșert gri de texte și butoane de redare. Vizualizarea a fost complet revizuită, astfel încât să reflecte în întregime aspectul resurselor, șabloanelor și E-Books-urilor.

Cu alte cuvinte: acum chiar și la tutorialele noastre video vei vedea mici imagini de previzualizare, ceea ce este pur și simplu mai estetic. Fie că video-ul este gratuit sau o actualizare proaspătă, poți vedea - așa cum este cazul pentru resurse - prin intermediul insemnelor colorate de pe imaginile de previzualizare.

Nouă vedere: Videoclipuri cu imagini de previzualizare
De la gri la uau: în timp ce anterior la tutoriale video vedeați doar butoane de redare, acum vă arătăm și imagini de previzualizare la tutorialele video.

Astfel, paginile noastre se prezintă acum uniform. Indiferent dacă este vorba de Resurse, Șabloane, E-Books sau Tutoriale video: este o imagine de previzualizare pe care o mărești când treci cursorul peste ea; este un buton pentru descărcare sau redare video; sunt iconuri pentru informații suplimentare și pentru a favoriza; dacă există materiale suplimentare cum ar fi fișiere de proiect, instrucțiuni sau tutoriale text disponibile, vei găsi link-urile către acestea la sfârșitul descrierilor.

În plus, am eliminat elemente inutile precum triunghiuri pentru deschiderea și închiderea textelor, astfel încât vizualizarea să fie mai ordonată, conform principiului mai puțin înseamnă mai mult. Toate aceste optimizări le-am implementat ulterior și pentru dispozitivele mobile.

Marele curățenie pe paginile pachetelor complete

Ce poate dispărea? Ce poate fi prezentat altfel? Ce se poate plasa mai bine? Acestea sunt întrebările pe care le-am adresat paginilor noastre dedicate pachetelor complete, pentru a le simplifica și totuși a menține nivelul de informații ridicat. Înafară de modificările menționate mai sus privind vizualizarea conținuturilor individuale, am făcut următoarele ajustări:

Galerie: În galeriile noastre vă arătăm cum puteți folosi, de exemplu, resursele și șabloanele noastre. Anterior, aici exista un efect de rotație. Drăguț, dar și distractiv. Noua vedere a galeriei a fost redusă la exact trei elemente: vedeți imaginea selectată, un subtitlu și navigarea la stânga și la dreapta - fără artificii majore de efecte în jurul acestora.

Deschidere și închidere și un pic mai multă culoare: Până acum, aproape fiecare secțiune pe o pagină de pachete complete putea fi deschisă și închisă, fiind disponibile butoane corespunzătoare sub formă de triunghiuri. Această funcție a fost eliminată. Face ca paginile să fie chiar mai curate - și să fim sinceri: Există cineva care a folosit vreodată această funcție? În plus, am adăugat mai multă culoare titlurilor intermediare. Din partea de sus în jos, acum o nuanță blândă de verde TutKit separă secțiunile individuale una de cealaltă, în loc de un negru masiv.

Zonă de informații: Sus în dreapta paginilor de pachete complete, grupăm toate informațiile suplimentare, cum ar fi despre compatibilitate, numărul de conținuturi și categoriile. Acolo se adună multe date.

Zona de informații a fost curățată și îmbunătățită ilustrativ. Astfel, progresul învățării în tutoriale este prezentat doar pentru utilizatorii conectați (vizitatorii neconectați oricum nu au nevoie de el). Evaluarea pachetelor noastre a fost mutată în partea de jos în zona de comentarii. Nou în zona de informații este un link către drepturile de utilizare. Cea mai vizibilă schimbare privește în cele din urmă reprezentarea persoanelor care au creat pachetul. În locul numelor lor, îți arătăm portretele lor. Se speră că acest lucru oferă un aspect mai prietenos ...

Multe îmbunătățiri de detalii mici:

  • fără navigare cu slider pentru software/categorii
  • derulare continuă în căutare, pagini de categorie etc.
  • Cărți: mai puține umbre, fără pictograme, colțuri pătrate
  • Cărți: fără animație, în schimb suprapunere verde
  • Efect de hover optimizat la butonul împărțit
  • Fețe mai mari, de exemplu în blog și la tururi video
  • Fețe în formularul de contact
  • Subsol complet nou (fără deschidere, prezentare de fețe etc.)
  • Pagina autorului: Eliminarea "Spre site-ul autorului", derulare continuă, suprapuneri verzi
  • Pagina de start: conținut nou nu mai ca slider
  • 4 coloane pentru autori
  • Sărituri de pagini la pop-up-uri
  • modul nou pentru grupuri țintă

Cu mai puține întrebări despre îmbunătățirea performanței

Pagini rapide, care se încarcă rapid - Google iubește, noi iubim și cu siguranță și tu iubești. În ceea ce privește performanța portalului nostru, vom continua să facem îmbunătățiri. În schimb, am implementat, de exemplu, optimizarea imaginii. Ele au fost mutate de la formatul greoi JPG la formatele mult mai subțiri WEBP și AVIF.

Mai mult decât atât, ne-am ocupat de bazele de date și de interogările care au loc atunci când accesăm paginile noastre. Destul de tehnic, dar hai să dăm un exemplu: când ajungi pe una dintre paginile noastre de pachete complete cu tutoriale, sistemul trebuie să știe, printre altele, cât de multe videoclipuri poți viziona. Deci, ai o membralitate? Ai cumpărat pachetul? Sunt unele dintre videoclipuri gratuit? Trebuie să punem o grămadă de astfel de întrebări la fiecare accesare de pagină, ceea ce, desigur, durează. Prin urmare, acționăm aici pentru îmbunătățirea performanței (Atenție, acum devenim cu adevărat tehnici):

  • Cereri inutile către bazele de date, care cereau mai multe informații decât cele necesare, au fost eliminate.
  • Viteza celor mai frecvent efectuate cereri către baza de date a fost îmbunătățită.
  • Codurile din metodele PHP au fost optimizate și interogările repetitive din anumite bucle au fost eliminate.
  • Toate părțile sistemului nostru au fost verificate pentru cereri inutile la baza de date care erau folosite pe toate paginile, în special cele legate de meniurile noastre. Acestea au fost optimizate pentru o performanță mai bună.
  • S-a constatat că unele cereri la baza de date erau repetate inutil de multe ori, în special cele care legau utilizatorii de pachete. Aceste repetări au fost eliminate folosind un sistem de memorie cache, economisind timp și resurse.
  • Jurnalul de erori al sistemului a fost monitorizat și toate problemele raportate au fost rezolvate.
  • Activitățile automate ale sistemului (cronjobs) au fost verificate pentru cele care rulează prea mult timp sau care se opresc. Acestea au fost optimizate eficient, extrăgând informații direct din baza de date în loc să facă acest lucru indirect prin cod PHP.

Tehnologia este actualizată? Actualizată este!

Desigur, am optimizat mult sub capotă sau am actualizat pachetele de software ca:

  • Actualizare la cea mai recentă versiune PHP.
  • Laravel (framework-ul nostru) a fost actualizat de la versiunea 9 la 10.
  • Aproape 35 de pachete din framework au fost actualizate, precum și SDK-ul furnizorului nostru de plăți, Braintree.
  • Acum folosim http2 (de preferat ar fi să folosim versiunea 3, dar (încă) serverul Apache nu o susține).
  • Ubuntu a fost actualizat de la versiunea 20.04 la 22.04 (a fost important pentru suportul pentru imagini AVIF).

Ce urmează în continuare?

Lucrăm intens acum pentru ca portalul nostru să fie disponibil în mai multe limbi începând din ianuarie. Este un efort considerabil, dar ne face mândri când vom reuși să realizăm acest lucru.

Mai mult, va fi posibil să achiziționezi conținut individual cu discount începând chiar săptămâna viitoare, în cazul în care se desfășoară o promoție. Acest lucru va determina ca magazinul nostru separat (shop.psd-tutorials.de) să nu mai fie actualizat cu produse noi și să devină offline cel târziu până la sfârșitul primului trimestru al anului 2024, iar toate conținuturile noastre vor fi accesibile exclusiv pe TutKit.com.

De asemenea, ne dorim să trimitem cel puțin odată pe lună un newsletter în 2024, astfel încât toți membrii și abonații la newsletter să poată vedea ce noutăți există. Pentru că până în prezent am reușit întotdeauna să avem cel puțin un conținut nou online în fiecare săptămână!

Desigur, vom continua să oferim conținut nou și interesant. De exemplu, eu însumi vreau să încep un nou curs despre Adobe Photoshop Elements, deoarece s-a schimbat ceva în interfață și acum merită să oferim un curs complet nou despre acest subiect. Tema inteligenței artificiale ne va preocupa și mai departe, iar vom menține produsele existente la curent sau vom oferi complet produse noi.

Lipsește ceva? Atunci scrie-mi cu plăcere un e-mail la info@tutkit.com. De asemenea, m-aș bucura dacă blogul ar avea o funcție de comentarii. Ce părere ai? Util sau oricum nu mai comentează nimeni din lipsă de timp?

Publicat pe de la Stefan Petri
Publicat pe: De Stefan Petri
Stefan Petri conduce împreună cu fratele său Matthias forumul specializat popular PSD-Tutorials.de și platforma de învățare online TutKit.com, care pune accentul pe formarea și perfecționarea competențelor profesionale digitale. 
Înapoi la vizualizarea generală