Leer hoe u prototypen of draadframes van uw websites kunt maken in Adobe Muse.

Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

Adobe Muse is niet alleen bijzonder gebruiksvriendelijk, u kunt met Adobe Muse ook snel prototypen van webprojecten maken die u online kunt weergeven. De mogelijkheid om testsites te maken, betekent dat u de koppelingen naar potentiële klanten kunt sturen, zodat ze de prototypen online kunnen reviseren met dezelfde browsers die ook de definitieve versie van de site weergeven. Hierdoor kunnen klanten beter zien hoe de voltooide site eruit zal zien.

fig01.wireframe.b720
Draadframes bevatten plaatsaanduidingen die de locatie van pagina-elementen opgeven.

Lees verder om te leren hoe u draadframes ontwerpt en hoe u een gestructureerde overzichtsweergave en plaatsaanduidingselementen voor uw site maakt. Als u de inhoud hebt voltooid, kunt u de plaatsaanduidingselementen vervangen door de feitelijke pagina-elementen.

Werken met draadframes

Draadframes geven de paginalay-outs voor de site weer en u kunt door de koppelingen klikken om te zien hoe de site werkt. Nadat u met de draadframes hebt geëxperimenteerd, bezoekt u de uiteindelijke livesite om de draadframes te vergelijken met de voltooide versie. U ziet hoe de plaatsaanduidingselementen in de draadframes zijn vervangen door de afbeeldingen voor de definitieve versie van de site.

Als u wilt zien hoe de draadframes zijn samengesteld, downloadt u de voorbeeldbestanden (ZIP-bestand van 4,5 MB). Decomprimeer het ZIP-bestand, open de map en zoek het bestand KevinsKoffeeKartWire.muse. Dubbelklik erop om de draadframes in Adobe Muse te openen. Gebruik de overzichtsweergave om te zien hoe de pagina's in verschillende lagen zijn ingedeeld voor de sitemap. Dubbelklik op de afzonderlijke pagina's om deze te openen in de ontwerpweergave en te bekijken hoe deze zijn ontworpen.

Adobe Muse biedt talrijke functies waarmee u draadframes kunt maken:

  • De ontwerpweergave bevat een optioneel kolomraster waarmee u lay-outelementen kunt uitlijnen.
  • Met de flexibele tekentools kunt u gemakkelijk plaatsaanduidingsvormen voor afbeeldingen maken.
  • Het deelvenster Middelen bevat functies voor het bijwerken van voorlopige afbeeldingen.
  • Adobe Muse optimaliseert, segmenteert en exporteert alle afbeeldingsbestanden wanneer u een site publiceert of exporteert.
  • Met de tekstkoppen en alineastijlen kunt u gestructureerde pagina's maken en de tekstopmaak gemakkelijk aanpassen.
  • Met de opdracht Plaatsen kunt u het logo van uw klant rechtstreeks vanuit uw browser opslaan en in uw Adobe Muse-bestand plaatsen.
fig02.wireframe.b720
Kies Bestand > Plaatsen om snel merkelementen aan draadframes toe te voegen.

Draadframes ontwerpen en laten goedkeuren door klanten

Na een eerste vergadering met de klant kunt u een draadframe van de site maken met een overzicht van de posities en de functionaliteit van pagina-elementen, maar zonder de afbeeldingen en tekstopmaak van de uiteindelijke site. Het doel van een draadframe is de herhaling van de structuur van elke pagina, zodat een simulatie van de webpresentatie ontstaat zonder afleidende kleuren of visuele inhoud. De rechthoeken worden als plaatsaanduidingen gebruikt om de locatie van afbeeldingen en handgeschreven of algemene lettertypen te markeren die worden gebruikt om de paginagebieden weer te geven die tekstinhoud bevatten.

Draadframes bieden de volgende voordelen:

  • Ze stellen klanten in staat zich te concentreren op de structuur van een site en paginalay-outs te begrijpen.
  • Ze verschaffen een interactieve live-ervaring en helpen klanten sites te reviseren en goed te keuren.
  • Ze dienen als communicatiemiddel om het ontwerp en de functionaliteit van de site te verduidelijken.

Adobe Muse is niet alleen een webontwerpprogramma, maar ook ideaal om prototypen te maken voor projecten. U kunt onmiddellijk een proef-URL maken en deze in een e-mail naar uw klanten verzenden, wat het goedkeuringsproces vereenvoudigt. Maar dat is niet het enige voordeel van draadframemodellen met Adobe Muse.

De draadframefunctie in Adobe Muse maakt het programma productiever dan andere ontwerpprogramma's, omdat webontwerpers dankzij de alomvattende functies voor beeldbewerking en de bewerkbare alineastijlen het .muse-bestand in een handomdraai kunnen bijwerken en de goedgekeurde draadframes kunnen omzetten in de definitieve live-versie. Na goedkeuring van de klant worden de draadframes niet weggegooid om helemaal opnieuw te beginnen, maar kunt u de geaccepteerde draadframes meteen bijwerken door er de feitelijke webinhoud er aan toe te voegen en de definitieve versie te maken. Tijdens het ontwerpen van de site kunt u een willekeurig aantal testsites publiceren om de verschillende versies bij te houden en de koppelingen delen met uw klanten.

U kunt sites met draadframes bouwen aan de hand van deze standaardworkflow:

  • U maakt draadframes en publiceert een gratis proefversie.
  • De klant bekijkt de livesite door door de pagina's te klikken.
  • De klant vraagt om wijzigingen of om verduidelijking van het ontwerp.
  • Na eventuele noodzakelijke revisies accepteert de klant de draadframes.
  • U werkt de draadframesite bij door er grafische elementen en kleuren aan toe te voegen.
  • U werkt alineastijlen bij om de bestaande tekstinhoud op te maken.
  • De klant evalueert de bijgewerkte versie van de site en vraagt om aanvullende wijzigingen.
  • U brengt de gewenste wijzigingen aan.
  • De klant keurt de voltooide versie goed.
  • U voert een upgrade uit van de site, stelt het domein in en start de uiteindelijke site.

De sitestructuur analyseren met de overzichtsweergave in Adobe Muse

Als u wilt zien hoe de pagina's van de site in een hiërarchie zijn geplaatst die de bovenste en onderliggende lagen van de navigatiekoppelingen definieert, opent u het .muse-bestand van de draadframes in Adobe Muse om dit te analyseren. Wanneer u het project opent, ziet u de overzichtsweergave waarin alle pagina's van de site worden weergegeven.

fig03.wireframe.b720
De pagina's van de draadframes worden weergegeven in de overzichtsweergave.

U ziet twee lagen, een bovenliggend niveau en een subniveau, die de hiërarchie van de sitemap vertegenwoordigen. U kunt op elk gewenst moment tijdens de ontwikkeling of het onderhouden van de site op deze pagina's klikken en ze slepen om ze in de sitestructuur te verplaatsen.

Om een nieuwe pagina te maken:

  1. Klik op de plusknop (+) rechts van of onder de bestaande pagina's en klik op het naamveld van de pagina om de naam te typen. 

    Geef de pagina's een zo beschrijvend mogelijke naam.

  2. Klik met de rechtermuisknop op een paginaminiatuur en gebruik de menuopties om de pagina te dupliceren, verwijderen of hernoemen.

    U kunt ook de muisknop boven een pagina plaatsen en op het X-pictogram in de rechterbovenhoek klikken om deze te verwijderen.

  3. Als u alle stappen volgt, kunt u experimenteren met het toevoegen, verplaatsen en verwijderen van pagina's om de sitemap te wijzigen. Kies Bewerken > Ongedaan maken als u de draadframesite wilt herstellen.

    De interface van de overzichtsweergave is gebruiksvriendelijk en Adobe Muse houdt alle paginanamen bij en onderhoudt de koppelingen die worden weergegeven in de menuwidgets. Wijzigingen die u aanbrengt, worden automatisch bijgewerkt om ervoor te zorgen dat de koppelingen niet worden verbroken.

Afbeeldingsstijlen gebruiken om plaatsaanduidingselementen met gemeenschappelijke kenmerken te maken

Net als Adobe Illustrator en Adobe Photoshop helpt Adobe Muse u afbeeldingsstijlen te maken die u kunt toepassen op een aantal elementen voor een consistente weergave. Dit is handig voor draadframes (en pagina-ontwerpen) omdat u een bestaande afbeeldingsstijl kunt wijzigen en vervolgens snel alle andere pagina-elementen kunt bijwerken waarop die stijl is toegepast. U kunt bestaande stijlen ook kopiëren om er varianten van te maken.

Als u afbeeldingsstijlen wilt gebruiken om kenmerken toe te passen op vormen en plaatsaanduidingen voor afbeeldingsbestanden in een draadframesite wilt maken, gaat u als volgt te werk:

  1. Gebruik de tool Rechthoek om drie rechthoeken op een pagina in de ontwerpweergave te tekenen.

  2. Selecteer een rechthoek en bewerk deze om de streekkleur, vulkleur en dekking in te stellen en om grafische effecten, zoals slagschaduwen, toe te voegen.

  3. Terwijl de rechthoek is geselecteerd, klikt u op Nieuwe afbeeldingsstijl onder aan het deelvenster Afbeeldingsstijlen. De stijl is gebaseerd op de opmaak van de geselecteerde rechthoek. Dubbelklik op de nieuwe afbeeldingsstijl om deze een beschrijvende naam te geven.

  4. Selecteer een van de andere rechthoekige vormen en pas er dezelfde afbeeldingsstijl op toe door op de naam van de stijl te klikken. Herhaal deze stap om de stijl toe te passen op de derde rechthoek, zodat alle drie rechthoeken dezelfde stijl gebruiken.

  5. Selecteer een rechthoek en bewerk deze om de stijl iets te wijzigen. Naast de naam van de bewerkte stijl in het deelvenster Afbeeldingsstijlen wordt een plusteken (+) weergegeven.

  6. Klik met de rechtermuisknop op de naam van de stijl in het deelvenster Afbeeldingsstijlen en kies Stijl opnieuw definiëren. De andere twee rechthoeken worden nu bijgewerkt en aangepast aan de nieuwe stijl. De plusknop (+) verdwijnt.

  7. Gebruik grafische stijlen om snel vormen op te maken om consistente draadframes te maken en een reeks sitemiddelen snel bij te werken wanneer een klant om wijzigingen vraagt.

Gestructureerde webpagina's maken en tekst opmaken met alineastijlen

Als u een draadframesite samenstelt, kunt u de tool Tekst gebruiken om tekstkaders te maken en plaatsaanduidingstekst (of lorem ipsum) toe te voegen die u later vervangt. Als de klant een bestaande website heeft, kunt u de tekst rechtstreeks vanuit een browser kopiëren en in de tekstkaders plakken. Na het maken van tekstelementen kunt u het deelvenster Tekst gebruiken om opmaak op de tekst toe te passen.

Aan de hand van alineastijlen kunt u de koptekst en alinealabels definiëren waarmee u de tekstinhoud van de pagina structuur geeft:

  1. In de ontwerpweergave gebruikt u de tool Tekst om een tekstkader op de pagina te slepen. Typ of plak tekst in het tekstkader om het te vullen.

  2. Gebruik het deelvenster Tekst of de opties in het regelpaneel boven in de werkruimte van de ontwerpweergave om opmaakopties in te stellen, zoals het kiezen van het lettertype, de lettergrootte, de lettertypekleur en andere eigenschappen.

  3. Klik op Nieuwe alineastijl onder aan het deelvenster Alineastijlen om een nieuwe alineastijl te maken. Dubbelklik op de naam van de nieuwe stijl om deze een beschrijvende naam te geven.

  4. Klik met de rechtermuisknop op de stijl en kies Stijlopties. Gebruik het menu Alinealabel om de alineastijl in te stellen voor een specifiek HTML-label, zoals P, H1, H2 of H3.

    fig04.wireframe.b720
    Klik met de rechtermuisknop op een stijlnaam in het deelvenster Alineastijlen en gebruik het dialoogvenster Stijlopties om de stijl voor een specifiek koptekst- of alinealabel te definiëren.

  5. Maak nog wat meer tekstkaders met tekst. Als u op de naam van de alineastijl klikt terwijl een tekstkader is geselecteerd, past u de opmaak van de alineastijl toe op het geselecteerde tekstkader. Als u later een tekstkader met een toegepaste alineastijl selecteert en deze wijzigt, wordt naast de naam van de stijl in het deelvenster Alineastijlen een plus-teken (+) weergegeven. Dit geeft aan dat de stijl is gewijzigd, met hetzelfde gedrag als de afbeeldingsstijlen.

  6. Als u alle tekstkaders die dezelfde stijl gebruiken automatisch wilt bijwerken, klikt u met de rechtermuisknop op de naam van de stijl in het deelvenster Alineastijlen en kiest u Stijl opnieuw definiëren.

    Zoals uit dit snelle voorbeeld blijkt, kunt u verschillende tekstcontainers maken en deze instellen op het gebruik van specifieke stijlen om een consistent ontwerp te maken. Wanneer u vervolgens de draadframes bijwerkt om de definitieve versie van de site te ontwerpen, kunt u die stijlen eenvoudig bijwerken volgens de wensen van de klant. U kunt het beste gestructureerde webpagina's met tekstcontainers maken, omdat dat de classificatie in zoekmachines ten goede komt.

Opmerking:

Als u pagina's met effen achtergrondkleuren ontwerpt, past u de achtergrondvulkleur van tekstkaders aan deze kleuren aan. Adobe Muse kan de tekstinhoud dan efficiënter publiceren. Als de achtergrondvulling onbekend is, ziet de aliasing van gepubliceerde tekst er minder vloeiend uit, omdat de achtergrondkleur van het tekstkader is ingesteld op transparant. Als op de achtergrond van de pagina echter verlopen of afbeeldingen worden weergegeven, laat u de vulkeur van tekstkaders op Geen staan.

De plaatsaanduidingsafbeeldingen bijwerken met de voltooide site-illustraties

Nadat de klant de draadframes heeft goedgekeurd, kunt u de site snel bijwerken met de werkelijke afbeeldingsbestanden.

  1. Selecteer de plaatsaanduiding voor de afbeelding op de pagina.

  2. Open het deelvenster Middelen om het geselecteerde pagina-middel te zoeken.

  3. Klik met de rechtermuisknop op het pagina-element. In het menu dat wordt weergegeven, ziet u twee opties om het afbeeldingsbestand bij te werken, afhankelijk van de manier waarop u de draadframesite hebt samengesteld.

    Als u een bestand in Adobe Photoshop of Adobe Fireworks hebt gemaakt en dat op de pagina hebt geplaatst, kunt u Origineel bewerken kiezen om het originele bestand te bewerken in het product waarin het is gemaakt. Wanneer u het hoofdbestand opslaat en terugkeert naar Adobe Muse, worden de geplaatste instanties van het bestand op de site automatisch bijgewerkt.

    Als u echter plaatsaanduidingen voor afbeeldingsbestanden met de tool Rechthoek hebt gemaakt in Adobe Muse, kiest u Alle instanties opnieuw koppelen en bladert u om een bestand op uw computer te selecteren om een plaatsaanduidingsbestand te vervangen door de uiteindelijke afbeelding.

    fig05.wireframe.b720
    Klik met de rechtermuisknop op de middelnaam en kies Origineel bewerken om het hoofdbestand te openen van een plaatsaanduidingsbestand in het beeldbewerkingsprogramma waarin u het hebt gegenereerd.

  4. Herhaal deze stappen om alle voorlopige afbeeldingen op de pagina te vervangen door de werkelijke afbeeldingsbestanden.

    Opmerking:

    Wanneer u met de rechtermuisknop op de naam van een middel in het deelvenster Middelen klikt, kunt u ook Naar middel gaan kiezen. Dan wordt de pagina geopend die het geselecteerde middel bevat, zodat u dit snel kunt bijwerken.

De door Adobe Muse gegenereerde en geoptimaliseerde afbeeldingsbestanden openen

Naast het publiceren van door u gemaakte Adobe Muse-sites op de hostserver, kunt u ook de gehele site exporteren om een map met gesegmenteerde en geëxporteerde afbeeldingsbestanden te verkrijgen:

  1. Kies Bestand > Exporteren als HTML.

    Het dialoogvenster Exporteren naar HTML wordt weergegeven.

  2. Selecteer de locatie op uw computer waar u de sitebestanden naartoe wilt exporteren en klik op OK.

Daarna exporteert Adobe Muse de bestanden en worden deze opgeslagen in de lokale map die u hebt opgegeven. Navigeer naar deze map en open de afbeeldingenmap om de geoptimaliseerde afbeeldingsbestanden te openen. U kunt deze afbeeldingsbestanden weer gebruiken voor nieuwsbrieven, mobiele apps, sociale-netwerkpagina's en andere gerelateerde projecten.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid