Design, UX, Techniek & Prestaties - als jouw portaal nog beter wordt!

Design, UX, Technologie & Prestaties - als jouw portal nog beter wordt!

Stefan Petri
publiceren:

Van opvallend en opvallend tot eerder onopvallend en toch nuttig - in de afgelopen weken en maanden hebben we talrijke veranderingen aangebracht aan TutKit.com. Daaronder vielen prestatieverbeteringen en technische updates, evenals aanpassingen aan het ontwerp en de gebruikersinterface. Alles bij elkaar genomen heeft dit een positief effect op jouw gebruikerservaring. Wat er onder de motorkap en daarboven is veranderd - een uitgebreid overzicht.

Het wordt nu donker

Vanaf nu kun je met slechts één klik op elk gewenst moment het ontwerp donker of licht maken. We hebben het zo ingesteld zoals het in het besturingssysteem is vastgelegd.

Donker ontwerp activeren op TutKit.com.

In één adem hebben we ook alle afbeeldingen geconverteerd naar het AVIF-formaat, zodat je browser niet zoveel gegevens hoeft te downloaden (hierdoor zijn de afbeeldingen qua bestandsgrootte met ongeveer 70% afgenomen).


Assets, sjablonen & e-books: meer in één oogopslag, zonder omwegklik

Al sinds jaar en dag tonen we kleine voorbeeldafbeeldingen op de pagina's van onze assets, sjablonen en e-books voor alle individuele inhouden. Zo zie je meteen wat je kunt verwachten bij het downloaden.

Achter elke voorbeeldafbeelding zat ook een klein menu verborgen. Hiermee kon je de voorbeeldafbeelding vergroten, de inhoud als favoriet markeren en de compatibiliteitsinformatie oproepen. Leuk ... Maar dit betekende ook dat je om elke afbeelding te vergroten het menu moest openen, op een pictogram moest klikken, de afbeelding moest bekijken en sluiten voordat je naar de volgende kon gaan. Een onnodige omweg. Daarom hebben we het menu verwijderd. Nu is het voldoende om met de muis over een kleine voorbeeldafbeelding te bewegen en hop: dan wordt de grote versie weergegeven.

Tijdens de herziening ontstonden ook snel enkele andere zinvolle aanpassingen: De compatibiliteitsinformatie kan nu worden opgeroepen via het direct zichtbare pictogram met het info-i. Het favoriet maken van de inhoud gebeurt via het ook direct zichtbare sterpictogram, dat bovendien alleen nog maar wordt weergegeven voor ingelogde gebruikers.

Hover-effect bij individuele inhoud
Op het essentiële gericht: Bij het bekijken van onze individuele inhouden hoef je alleen nog maar even over de voorbeeldafbeelding te zweven om deze groot te tonen. Extra functies die voorheen in een menu verborgen waren, zijn nu direct toegankelijk via pictogrammen.

Video-tutorials: Nu ben je hier ook visueel op de hoogte!

Als je enige tijd geleden op onze pagina's met video-tutorials hebt gekeken, zag je daar niet veel meer dan voornamelijk een grijze woestijn van teksten en afspeelknoppen. Het ontwerp is volledig herzien, zodanig dat het één op één het lay-out van de assets, sjablonen en e-books overneemt.

Met andere woorden: Ook bij onze video-tutorials zijn er nu kleine voorbeeldafbeeldingen te zien, wat eenvoudigweg esthetisch aantrekkelijker is. Of de video gratis is of een nieuwe update, dat zie je - net als bij assets - aan gekleurde badges op de afbeeldingen.

Nieuw perspectief: video's met voorbeeldafbeeldingen
Van grijs naar wauw: Terwijl je voorheen bij video-tutorials alleen afspeelknoppen zag, laten we je nu ook bij tutorials voorbeeldafbeeldingen zien.

Zo presenteren onze pagina's zich nu consequent uniform. Of het nu gaat om een asset, sjabloon, e-book of video-tutorial: Daar is een voorbeeldafbeelding die je bij het zweven vergroot; daar is een knop om te downloaden of om de video af te spelen; daar zijn pictogrammen voor meer informatie en om te favoriseren; als er extra materiaal zoals projectbestanden, handleidingen of tekst-tutorials beschikbaar zijn bij de inhoud, vind je de links daarvoor onderaan de beschrijvingsteksten.

Bovendien is alle overbodige informatie zoals driehoekspictogrammen om de teksten in te klappen en uit te klappen verwijderd, zodat het uiterlijk nu geordend is volgens het motto minder is meer. Alle optimalisaties zijn uiteindelijk ook geüpdatet voor mobiele apparaten.

De grote schoonmaak op de pagina's van de totaalpakketten

Wat kan weg? Wat kan anders worden weergegeven? Wat kan op een betere positie worden geplaatst? Dit zijn de vragen die we stelden aan onze totaalpakketpagina's om ze slanker te maken en toch de informatiewaarde hoog te houden. Naast de hierboven genoemde veranderingen in de weergave van de individuele inhouden hebben we de volgende aanpassingen doorgevoerd:

Galerij: In de galerijen laten we zien hoe je bijvoorbeeld onze assets en sjablonen kunt gebruiken. Eerder was er een rotatie-effect. Mooi, maar ook afleidend. De weergave van de nieuwe galerij is daarom teruggebracht tot precies drie dingen: je ziet de geselecteerde afbeelding, een ondertitel en de navigatie naar links en rechts - zonder grote toeters en bellen eromheen.

Inklappen en uitklappen en een beetje meer kleur: Tot nu toe kon bijna elke sectie op een totaalpakketpagina worden ingeklapt en uitgeklapt, hiervoor stonden bijbehorende knoppen in de vorm van pijlen ter beschikking. De functie is verwijderd. Hierdoor ogen de pagina's nog strakker - en laten we eerlijk zijn: heeft ooit iemand deze functie gebruikt? Bovendien hebben we de tussenkoppen over de hele linie meer kleur gegeven. Van boven naar beneden scheidt nu in plaats van een log zwart een zacht TutKit-groen de verschillende secties van elkaar.

Informatiegedeelte: Bovenaan rechts op de totale pakketpagina's bundelen we alle aanvullende informatie, bijvoorbeeld met betrekking tot de compatibiliteit, het aantal inhoud en de categorieën. Er komt veel data samen.

We hebben het informatiegedeelte opnieuw opgeruimd en visueel verbeterd. Zo wordt de voortgang van het leren bij tutorials alleen nog weergegeven voor ingelogde gebruikers (uitgelogde bezoekers hebben dit sowieso niet nodig). De beoordeling van onze pakketten is verplaatst naar het commentaargedeelte. Nieuw in het informatiegedeelte is een link naar de gebruiksrechten. De meest opvallende verandering heeft betrekking op de weergave van de personen die het pakket hebben gemaakt. In plaats van hun namen laten we je hun portretten zien. Hopelijk maakt dat het geheel ook wat vriendelijker...

Veel kleine detailverbeteringen:

  • geen schuifregelaarnavigatie meer bij software/categorieën
  • in het algemeen doorlopend scrollen in zoekfunctie, categoriepagina's, enz.
  • Cards: minder schaduw, iconen weg, hoekige hoeken
  • Cards: animatie weg, in plaats daarvan groene overlay
  • Hovereffect bij Split-knop geoptimaliseerd
  • Grotere gezichten, bijvoorbeeld op de blog en bij de videotour
  • Gelaat in het contactformulier
  • Footer volledig vernieuwd (geen uitklappen meer, gelaat tonen, enz.)
  • Auteurspagina: "Naar de website van de auteur" weg, doorlopend scrollen, groene overlays
  • Startpagina: Nieuwe inhoud niet langer als schuifregelaar
  • 4 Kolommen bij auteurs
  • Paginaspringen bij pop-ups
  • nieuwe module voor doelgroepen

Met minder vragen over prestatieverbetering ten opzichte van vragen

Razendsnelle pagina's, snel laden - Google houdt ervan, wij houden ervan en jij vast ook. Wat betreft de prestaties van ons portaal zullen we ook in de toekomst nog verbeteringen doorvoeren. We hebben bijvoorbeeld de beeldoptimalisatie geïmplementeerd. Deze zijn namelijk overgeschakeld van het slanke JPG-formaat naar de veel slankere WEBP- en AVIF-formaten.

Bovendien hebben we ons beziggehouden met de databases en de query's die plaatsvinden bij het openen van onze pagina's. Heel technisch allemaal, maar om een voorbeeld te geven: wanneer je op een van onze totale pakketpagina's met tutorials terechtkomt, moet het systeem onder andere weten in hoeverre je de video's kunt bekijken. Heb je dus een lidmaatschap? Heb je het pakket gekocht? Zijn bepaalde video's misschien gratis? Zulke vragen moeten we tijdens het openen van de pagina vaak stellen, wat natuurlijk tijd kost. Daarom zetten we hier in op prestatieverbetering (let op, nu wordt het echt technisch):

  • Overbodige database-query's die om meer informatie vroegen dan daadwerkelijk nodig waren, zijn verwijderd.
  • De snelheid van de meest uitgevoerde database-query's is verbeterd.
  • De code in PHP-methoden is geoptimaliseerd en herhaalde database-query's in bepaalde lussen zijn geëlimineerd.
  • Alle delen van ons systeem zijn gecontroleerd op overbodige database-query's die op alle pagina's worden gebruikt, met name die gekoppeld zijn aan onze menu-items. Deze zijn geoptimaliseerd voor betere prestaties.
  • Er werd vastgesteld dat sommige database-query's onnodig vaak werden herhaald, vooral die welke gebruikers koppelden aan pakketten. Deze herhalingen zijn verholpen met behulp van een cache-systeem voor korte termijn, waardoor zowel tijd als middelen werden bespaard.
  • De systeemlogboeken werden gecontroleerd en alle gerapporteerde problemen werden opgelost.
  • Geautomatiseerde systeemtaken (cronjobs) werden gecontroleerd op taken die te lang duurden of werden afgebroken. Deze taken werden efficiënter gemaakt door direct informatie uit de database te filteren in plaats van dit indirect via PHP-code te doen.

Up-to-date met de techniek? Helemaal up-to-date!

We hebben natuurlijk ook veel onder de motorkap geoptimaliseerd en softwarepakketten bijgewerkt zoals:

  • Update naar de nieuwste PHP-versie.
  • Laravel (ons framework) is bijgewerkt van versie 9 naar 10.
  • Ongeveer 35 pakketten van het framework zijn bijgewerkt, evenals de SDK van onze betalingsprovider Braintree.
  • We gebruiken nu http2 (we zouden het liefst versie 3 gebruiken, alleen wordt dit (nog) niet ondersteund door de Apache-server.
  • Ubuntu is bijgewerkt van 20.04 naar 22.04 (belangrijk voor de AVIF-beeldondersteuning).

Wat komt er nog meer?

We zijn momenteel druk bezig om ervoor te zorgen dat ons portaal vanaf januari ook in meerdere talen beschikbaar is. Dat vergt behoorlijk wat inspanning, maar het zal een bron van trots zijn als we het eenmaal voor elkaar hebben.

Bovendien zal het vanaf volgende week al mogelijk zijn om individuele inhoud aan te schaffen met korting, voor zover er op dat moment een actie loopt. Dit heeft tot gevolg dat onze afzonderlijke winkel (shop.psd-tutorials.de) niet meer wordt bijgewerkt met nieuwe producten en uiterlijk tegen het einde van het eerste kwartaal van 2024 offline gaat en al onze inhoud exclusief beschikbaar zal zijn op TutKit.com.

In 2024 willen we ook minstens 1 keer per maand een nieuwsbrief sturen, zodat alle leden & nieuwsbriefabonnees kunnen zien wat er allemaal nieuw is. Want een ding hebben we tot nu toe altijd voor elkaar gekregen: elke week is er minstens een nieuwe inhoud online gekomen!

Natuurlijk zullen we ook in de toekomst interessante nieuwe inhoud blijven aanbieden. Ikzelf wil bijvoorbeeld een nieuwe training opnemen over Adobe Photoshop Elements, nu er eindelijk ook iets aan het uiterlijk is veranderd en het nu de moeite waard is om een volledig nieuwe training daarover aan te bieden. Het onderwerp AI zal ons ook in de toekomst bezighouden en we zullen bestaande producten up-to-date houden of volledig nieuwe producten beschikbaar stellen.

Mis je nog iets? Schrijf me dan gerust een e-mail op info@tutkit.com. Ik zou het ook leuk vinden als de blog een reactiemogelijkheid krijgt. Wat denk je? Zinvol of reageert toch bijna niemand meer vanwege tijdgebrek?

Gepubliceerd op van Stefan Petri
Gepubliceerd op:
Van Stefan Petri
Stefan Petri runt samen met zijn broer Matthias het populaire vakforum PSD-Tutorials.de en het e-learningplatform TutKit.com, dat zich richt op de opleiding en bijscholing van digitale beroepsvaardigheden. 
Terug naar het overzicht