Ga naar hoofdinhoud

Screenshotvereisten - PDF Connect v3-documentatie

Prioriteit 1: Kernworkflow (verplicht) 📸​

Hoofdinterface van de app​

  1. PDF Connect v3-dashboard - hoofdinterface met het nieuwe ontwerp
  2. PDF-bibliotheekbeheer - rasterweergave met zoeken, tags en bulkacties
  3. PDF-detailpagina - individuele PDF-weergave met duidelijke Link-knop

Universeel koppelen​

  1. Dropdown paginatype - alle ondersteunde typen (Products, Collections, Articles, Pages, Homepage, Search)
  2. Resource-selectiemodal - zoekbalk, resource-lijst, paginatie, bulkselectie
  3. Koppelen in uitvoering - laadstatussen en bevestigingsmeldingen
  4. Overzicht gekoppelde resources - gekoppelde pagina’s met ontkoppelopties

Publicatiesysteem​

  1. Publicatiemodal - drie weergavestijlen naast elkaar
  2. Theme Editor-integratie - PDF-blokken toevoegen aan templates
  3. Blokconfiguratie - instellingenpaneel per weergavetype

Weergavestijlen in actie​

  1. Embedded PDF-voorbeeld - productpagina met ingesloten PDF
  2. PDF-knopvoorbeeld - knop met geopende popup-overlay
  3. PDF-lijstvoorbeeld - meerdere PDFs in een geordende lijst

Prioriteit 2: Geavanceerde functies (belangrijk) 📸​

Multi-blokstrategie​

  1. Productpagina met meerdere blokken - dezelfde pagina met embedded + button + list
  2. Template-statusoverzicht - welke templates blokken hebben geconfigureerd
  3. Bulkselectie-interface - meerdere items geselecteerd met teller

Mobiele ervaring​

  1. Mobiele PDF-weergave - alle drie weergavestijlen op mobiel
  2. Mobiele beheerinterface - koppelen en publiceren op mobiel
  3. Responsief gedrag - hoe PDFs zich aanpassen aan schermformaten

Workflowvoorbeelden​

  1. Voor/na-vergelijking - oude vs nieuwe interface
  2. Koppelen over paginatypen heen - dezelfde PDF gekoppeld aan meerdere typen
  3. Zoekfunctionaliteit - realtime zoekresultaten

Prioriteit 3: Aanvullende content (nice to have) 📸​

Use-cases​

  1. Productdocumentatie - technische handleiding op productpagina
  2. Collectiecatalogi - collectiepagina met PDF-catalogus
  3. Blogresources - artikel met downloadbare PDF
  4. Homepage-features - bedrijfsbrochure op homepage

Fouten en randgevallen​

  1. Laadstatussen - wat gebruikers zien tijdens verwerking
  2. Foutmeldingen - duidelijke foutcommunicatie
  3. Lege statussen - wat nieuwe gebruikers zien vóór content is toegevoegd

Analytics en performance​

  1. Gebruiksanalyse - betrokkenheidsstatistieken voor PDFs (indien beschikbaar)
  2. Prestatie-indicatoren - snelheids- en optimalisatiedata
  3. Template-analytics - welke templates het meest worden gebruikt

Screenshotspecificaties​

Technische vereisten​

  • Resolutie: High-DPI voor scherpe weergave
  • Browser: Chrome of Safari voor consistente rendering
  • Venstergrootte: desktop (1920x1080) en mobiel (375x812)
  • Thema: net, professioneel Shopify-thema voor demo’s

Inhoudsvereisten​

  • Voorbeeld-PDF’s: realistische zakelijke documenten (handleiding, catalogus, gids)
  • Testwinkel: producten, collecties, artikelen en pagina’s met relevante content
  • Schone data: duidelijke namen, beschrijvingen en geordende content

Brandingvereisten​

  • Consistente UI: alle screenshots tonen dezelfde appversie
  • Professionele uitstraling: nette, geordende interface
  • Duidelijke focus: markeer de specifieke functie die wordt getoond

Screenshotworkflow​

Voorbereiding​

  1. Testwinkel met realistische content opzetten
  2. Voorbeeld-PDF’s met professionele namen voorbereiden
  3. Alle weergavestijlen configureren
  4. Controleren dat alle functies correct werken

Vastleggen​

  1. Desktop-screenshots in volledige resolutie maken
  2. Mobiele versies van kerninterfaces vastleggen
  3. Laad- en foutstatussen documenteren
  4. Relevante voor/na-vergelijkingen opnemen

Nabewerking​

  1. Bijsnijden op relevante interface-elementen
  2. Waar nuttig callouts/annotaties toevoegen
  3. Consistente visuele stijl over alle beelden heen
  4. Bestandsgrootte optimaliseren voor webgebruik

Gebruik in documentatie​

Plaatsingsstrategie​

  • Hero-afbeeldingen: grote interfacewijzigingen aan het begin van een document
  • Stap-voor-stap: screenshot per actie in tutorials
  • Vergelijking: voor/na bij grote verbeteringen
  • Referentie: snelle visuele bevestiging van locatie/uiterlijk

Alt-tekstvereisten​

Alle screenshots hebben beschrijvende alt-tekst nodig:

  • Beschrijf wat in de interface te zien is
  • Neem belangrijke zichtbare tekst op
  • Benoem essentiële UI-elementen of acties
  • Houd waar mogelijk onder 125 tekens

Bestandsnaamconventie​

Gebruik consistente namen:

  • pdf-guru-v3-[feature]-[context].png
  • Voorbeeld: pdf-guru-v3-linking-page-types.png
  • Voorbeeld: pdf-guru-v3-display-embedded-product.png

Deze aanpak zorgt voor complete visuele documentatie die past bij de kwaliteit van de verbeterde PDF Connect v3-functies.