Design, UX, Teknik & Performance - når din portal bliver endnu bedre!

Design, UX, teknik & performance - når din portal bliver endnu bedre!

Stefan Petri
Offentliggjort:

Fra markant og iøjnefaldende til snarere diskret og dog nyttig - i de seneste uger og måneder har vi foretaget mange ændringer på TutKit.com. Disse ændringer omfattede præstationsforbedringer og tekniske opdateringer såvel som tilpasninger af design og brugeroplevelse. Alt i alt har det en positiv indvirkning på din brugeroplevelse. Hvad der har ændret sig under motorhjelmen og derover - en omfattende oversigt.

Nu bliver det mørkt

Fra nu af kan du til enhver tid med kun et enkelt klik skifte mellem mørk og lys design. Vi har indstillet det som standard i overensstemmelse med dit operativsystem.

Aktivér mørk design på TutKit.com

I samme ånd har vi også konverteret alle billeder til AVIF-format for at reducere mængden af data, din browser skal downloade (ca. 70% af billederne er blevet mindre i filstørrelse på grund af dette).


Aktiver, skabeloner og e-bøger: mere på én gang, uden omvejsklik

Ligesom altid viser vi små forhåndsvisninger af vores aktiver, skabeloner og e-bøger på deres respektive sider. Så kan du med det samme se, hvad du kan forvente ved download.

Bag hvert forhåndsvisningsbillede var der også en lille menu. Her kunne du forstørre forhåndsvisningsbilledet, markere indholdet som favorit og få kompatibilitetsvejledninger. Fint nok ... Men det betød også, at du skulle åbne menuen for at forstørre hvert billede, klikke på et ikon, se billedet og lukke det, før du kunne fortsætte til næste. En unødvendig omvej. Derfor har vi fjernet menuen. Nu er det nok bare at føre musen hen over et lille forhåndsvisningsbillede, og vupti: Den store version vises.

Ved revision opstod der også hurtigt andre meningsfulde tilpasninger: kompatibilitetsvejledningerne kan nu tilgås via det synlige ikon med info-i'et. Favorisering af indholdet sker via det ligeledes synlige stjerneikon, som desuden kun vises for brugere der er logget ind.

Hover-effekt på enkelte elementer.
Reduceret til det væsentlige: Ved visning af vores enkelte indholdselemente behøver du kun at svæve over forhåndsvisningsbilledet for at se det i stor størrelse. Yderligere funktioner, der før var skjult i en menu, er nu tilgængelige direkte via ikoner.

Video-tutorials: Nu kan du også forstå billedet her!

Hvis du for et stykke tid siden kiggede på en af vores sider med video-tutorials, blev du mødt af en overvejende grå ørken af ​​tekster og afspilningsknapper. Visningen er blevet fuldstændigt revideret, så den nu matcher layoutet af aktiver, skabeloner og e-bøger én til én.

Med andre ord: Også vores video-tutorials viser nu små forhåndsvisninger, hvilket simpelthen ser mere æstetisk tiltalende ud. Om videoen er gratis eller en frisk opdatering, kan du - ligesom med aktiver - se det i form af farvede badges på billederne.

Ny visning: videoer med forhåndsvisninger
Fra gråt til wow: Mens du tidligere kun så afspilningsknapper ved video-tutorials, viser vi dig nu også forhåndsvisningsbilleder ved tutorials.

Således præsenterer vores sider sig nu konsekvent ensartede. Uanset om der er tale om et aktiv, en skabelon, en e-bog eller et video-tutorial: Der er et forhåndsvisningsbillede, som du kan forstørre ved at svæve over det; der er en knap til at downloade eller afspille videoen; der er ikoner til yderligere information og til at favorisere; hvis det er tilfældet med yderligere materialer såsom projektfiler, vejledninger eller tekst-tutorials, der er tilgængelige, findes linkene hertil i bunden af beskrivelsesteksterne.

Desuden er overflødig funktionalitet såsom trekant-ikoner til at åbne og lukke tekster blevet fjernet, så visningen nu fremstår mere strømlinet efter mottoet "mindre er mere". Alle optimeringer er også blevet tilrettelagt til mobile enheder.

Stor oprydning på siderne for samlede pakker

Hvad kan fjernes? Hvad kan præsenteres anderledes? Hvad kan placeres bedre? Vi stillede disse spørgsmål til vores sider med samlede pakker for at forenkle dem samtidig med at vi bibeholder høj informationsværdi. Ud over de ovennævnte ændringer i visningen af enkelte elementer foretog vi følgende tilpasninger:

Galleri: I gallerierne viser vi, hvordan du f.eks. kan bruge vores aktiver og skabeloner. Tidligere var der en rotations effekt her. Fint, men også distraherende. Vi har derfor reduceret visningen i det nye galleri til nøjagtigt tre ting: du ser det valgte billede, en undertitel og navigationen til venstre og højre - uden store effektfyrværkeri omkring.

Åbne og lukke og lidt mere farve: Indtil videre kunne næsten alle sektioner på en side med samlede pakker åbnes og lukkes ved hjælp af trekant-ikoner, der var til rådighed. Funktionen er blevet fjernet. Gør siderne endnu renere - og lad os være ærlige: Er der nogen, der nogensinde har brugt denne funktion? Derudover har vi givet de mellemliggende overskrifter mere farve. Fra top til bund adskiller et blidt TutKit-grønt nu de enkelte områder i stedet for en klodset sort farve.

Info-område: Øverst til højre på samleside for alle pakker samler vi al supplerende information, f.eks. om kompatibilitet, antallet af indhold og kategorier. Der kommer en hel del data sammen.

Vi har ryddet op i info-området og illustreret det. Så bliver læringsprogressionen i tutorials kun vist for logget ind brugere (loggede besøgende behøver det alligevel ikke). Bedømmelsen af vores pakker er blevet flyttet ned i kommentarfeltet. Nyt i info-området er et link til brugsrettighederne. Den mest iøjnefaldende ændring vedrører endelig præsentationen af de personer, der har oprettet pakken. I stedet for deres navne viser vi dig deres portrætter. Forhåbentlig virker det også en anelse venligere ...

Mange små detaljeforbedringer:

  • ingen glide-navigering mere i software/kategorier
  • generelt kontinuerlig rulleskubbe i søgning, kategorisider osv.
  • Kort: mindre skygger, ikoner væk, kantede hjørner
  • Kort: animation væk, i stedet grønt overlay
  • Hover-effekt på opdelt knap optimeret
  • Større ansigter, f.eks. i blog og video-tur
  • Ansigter i kontaktformular
  • Footer helt ny (ikke mere åbning, vis ansigt osv.)
  • Forfatter-side: "Til forfatterens websted" væk, kontinuerlig rulning, grønne overlays
  • Forside: Nyt indhold ikke længere som skyder
  • 4 kolonner for forfattere
  • Sidespring for pop-ups
  • ny modul for målgrupper

Med færre spørgsmål om performance-forbedring

Hurtige sider, der indlæses hurtigt - Google kan lide det, det kan vi lide, og du kan helt sikkert også lide det. Hvad angår ydelsen af vores portal, vil vi fortsat foretage forbedringer. For eksempel har vi implementeret billedoptimering. Billederne blev nemlig skiftet fra det slanke JPG-format til de meget slankere WEBP- og AVIF-formater.

Derudover har vi fokuseret på databaserne og forespørgslerne, der finder sted, når vores sider indlæses. Meget teknisk, men for at give et eksempel: Når du kommer ind på en af vores samlesider med tutorials, skal systemet bl.a. vide, i hvilken grad du kan se videoerne. Har du en medlemskab? Har du købt pakken? Er nogle videoer måske gratis? Sådanne spørgsmål skal vi stille masser af, når siderne indlæses, hvilket naturligvis tager tid. Derfor sætter vi ind her for at forbedre ydelsen (pas på, nu bliver det virkelig teknisk):

  • Unødvendige databaseforeførsler, der bad om mere information, end der faktisk var nødvendigt, blev fjernet.
  • Hastigheden af de mest udførte databaseforeførsler blev forbedret.
  • Koden i PHP-metoder blev optimeret, og gentagne databaseforeførsler i visse løkker blev elimineret.
  • Alle dele af vores system blev gennemgået for unødvendige databaseforeførsler, der blev brugt på alle sider, især dem, der var knyttet til vores menuer. Disse blev optimeret for bedre ydeevne.
  • Det blev konstateret, at visse databaseforeførsler blev gentaget unødigt, især dem, der kobler brugere til pakker. Disse gentagelser blev løst med et midlertidigt cachelagringssystem, hvilket sparer både tid og ressourcer.
  • Systemets fejlogbog blev overvåget, og alle rapporterede problemer blev løst.
  • Automatiserede systemopgaver (Cronjobs) blev gennemgået for dem, der løb for lang tid eller afbrød. Disse opgaver blev gjort mere effektive ved at filtrere oplysninger direkte fra databasen i stedet for indirekte via PHP-kode.

Er alt opdateret teknologisk? Ja, det er det!

Vi har naturligvis også optimeret en masse under motorhjelmen eller opdateret softwarepakker som:

  • Opdatering til den nyeste PHP-version.
  • Laravel (vores framework) blev opdateret fra version 9 til 10.
  • Næsten 35 pakker fra frameworket blev opdateret samt SDK'en fra vores betalingsudbyder Braintree.
  • Vi bruger nu http2 (vi ville helst bruge version 3, det understøttes (endnu) ikke af Apache-serveren).
  • Ubuntu blev opdateret fra 20.04 til 22.04 (var vigtigt for AVIF-billede-understøttelse).

Hvad kommer næste?

Vi arbejder intensivt på at gøre vores portal tilgængelig på flere sprog fra januar. Det kræver en stor indsats, men det vil være en stor succes, når vi har fået det til at fungere.

Derudover vil det allerede være muligt næste uge at købe individuelle indhold med rabat, hvis der aktuelt er en kampagne i gang. Dette medfører, at vores separate butik (shop.psd-tutorials.de) ikke længere opdateres med nye produkter og også lukker senest ved udgangen af 1. kvartal 2024, og alle vores indhold kun vil være tilgængelige på TutKit.com.

I 2024 vil vi også begynde at sende en nyhedsbrev mindst én gang om måneden, så alle medlemmer og nyhedsbrevsabonnenter kan se, hvad der er nyt. For vi har hidtil altid formået at få mindst en ny artikel online hver uge!

Naturligvis vil vi fortsat tilbyde interessante nye indhold. Jeg selv ønsker f.eks. at optage en ny træning om Adobe Photoshop Elements, da der endelig er sket ændringer i brugergrænsefladen, og det er nu værd at skabe en helt ny træning om emnet. Kunstig intelligens vil fortsat være et emne, der optager os, og vi vil enten opdatere eller oprette helt nye produkter på dette område.

Mangler der noget? Så skriv gerne en e-mail til mig på info@tutkit.com. Jeg ville også sætte pris på, hvis bloggen fik en kommentarfunktion. Hvad synes du? Meningsfuldt eller kommenterer alligevel næsten ingen mere på grund af tidsmangel?

Udgivet den af Stefan Petri
Udgivet den:
Af Stefan Petri
Stefan Petri driver sammen med sin bror Matthias det populære fagforum PSD-Tutorials.de samt e-læringsplatformen TutKit.com, der fokuserer på uddannelse og videreuddannelse af digitale erhvervskompetencer. 
Tilbage til oversigten