Lær hvordan du oppretter prototyper eller trådrammer av webområdene dine i Adobe Muse.

Merk:

Adobe Muse legger ikke lenger til nye funksjoner, og kundestøtte opphører 26. mars 2020. Hvis du vil ha detaljert informasjon og hjelp, kan du se siden for tjenesteopphør for Adobe Muse.

I tillegg til å være et svært intuitivt verktøy kan Adobe Muse også brukes til å raskt opprette prototyper av webprosjekter som du kan vise på Internett. Muligheten til å opprette prøveområder betyr at du kan dele koblingene med potensielle kunder. Dermed kan de se gjennom prototypene på Internett ved hjelp av de samme webleserne som skal vise den endelige versjonen av området. Dette hjelper kunder med å forstå hvordan det endelige området vil se ut.

fig01.wireframe.b720
Trådrammer inkluderer plassholdere for å angi plasseringen av sideelementer.

Les videre for å lære hvordan du utformer trådrammer, bygger en strukturert planvisning og oppretter plassholderelementer på området. Du kan erstatte plassholderelementene med faktiske sideelementer etter at innholdet er ferdigstilt.

Arbeide med trådrammer

Trådrammene viser sidelayoutene for området og gjør det mulig å klikke gjennom koblingene for å se hvordan området fungerer. Etter å ha samhandlet med trådrammene, kan du gå til det endelige området for å sammenligne trådrammene med den fullførte versjonen. Vær oppmerksom på hvordan plassholderelementene i trådrammene ble erstattet med grafikken for den endelige versjonen av området.

Hvis du vil vise hvordan trådrammene ble konstruert, laster du ned eksempelfilene (ZIP, 4,5 MB). Pakk ut ZIP-filen, åpne mappen og finn filen KevinsKoffeeKartWire.muse. Dobbeltklikk for å åpne trådrammene i Adobe Muse. Bruk Planlegg-visning til å finne ut hvordan sidene er ordnet i ulike lag som utgjør områdekartet. Dobbeltklikk hver side for å åpne den i Design-visning og utforske hvordan den er designet.

Adobe Muse inneholder mange funksjoner du kan bruke til å opprette trådrammer:

  • Design-visningen inkluderer et valgfritt spalterutenett som hjelper deg med å justere elementer i layouten.
  • Fleksible tegneverktøy gjør det enkelt å opprette plassholderfigurer for grafikk.
  • Innholdselementer-panelet inkluderer funksjoner du kan bruke til å oppdatere plassholderelementer.
  • Adobe Muse optimaliserer, deler opp og eksporterer alle bildefilene når du publiserer eller eksporterer et område.
  • Ved hjelp av topptekster og avsnittstiler kan du enkelt opprette strukturerte sider og endre tekstformatering.
  • Ved hjelp av Plasser-kommandoen kan du lagre kundens logo direkte fra webleseren og deretter plassere den i Adobe Muse-filen.
fig02.wireframe.b720
Velg Fil > Plasser for raskt å legge til varemerkingselementer i trådrammer.

Designe trådrammer for kundegodkjenning

Etter et innledende møte med kunden kan du opprette en trådrammemodell av området som illustrerer posisjoneringen og funksjonaliteten til sideelementer som ikke har grafikken og tekstformateringen til det endelige området. Målet med en trådramme er å gjenskape grunnlayouten på hver side, slik at det opprettes en simulering av webpresentasjonen uten at farger og visuelt innhold forstyrrer visningen. Rektangler brukes som plassholdere til å markere plasseringen av bilder, og håndskrevede eller generelle skrifttyper brukes til å vise områdene på siden som inneholder tekst.

Trådrammer gir følgende fordeler:

  • De gjør det mulig for kunder å fokusere på strukturen til et område samt i tillegg å forstå sidelayoutene.
  • De gir en interaktiv opplevelse, slik at kunder kan se gjennom og godkjenne områder.
  • De fungerer som et kommunikasjonsverktøy for å konkretisere områdets design og funksjonalitet.

I tillegg til å være et webdesignverktøy er Adobe Muse godt egnet for prototypeprosjekter. Du kan umiddelbart opprette en aktivert prøve-URL-adresse og sende den til kundene dine i en e-postmelding. Dette forenkler godkjenningsprosessen. Men det er ikke den eneste fordelen med å opprette trådrammemodeller med Adobe Muse.

Bruk av trådrammer i Adobe Muse øker produktivitet til et nytt nivå sammenlignet med andre designverktøy, fordi funksjonene for tur-retur-redigering av bilder og de redigerbare avsnittstilene gjør det mulig for webdesignere raskt å oppdatere .muse-filen og konvertere de godkjente trådrammene til den endelige versjonen. I stedet for at kunden må logge av, trådrammene må slettes og du må bygge prosjektet på nytt fra starten, kan du umiddelbart begynne å oppdatere de godkjente trådrammene for å legge til det reelle webinnholdet og bygge ut den endelige versjonen. Underveis kan du publisere så mange testområder du vil, for å dokumentere iterasjonene og dele koblingene med kundene etter hvert som områdedesignen utvikles.

Du kan bygge områder med trådrammer ved hjelp av denne grunnleggende arbeidsflyten:

  • Du kan konstruere trådrammene og publisere en gratis prøveversjon.
  • Kunden ser gjennom det aktive området ved å klikke gjennom sidene.
  • Kunden krever endringer eller ber om oppklaring om designen.
  • Etter eventuelle nødvendige revisjoner avslutter kunden redigeringen av trådrammene.
  • Du oppdaterer trådrammeområdet for å legge til grafikkelementer og -farger.
  • Du oppdaterer avsnittstiler for å formatere det eksisterende tekstinnholdet.
  • Kunden ser gjennom den oppdaterte versjonen av området og ber om flere endringer.
  • Du utfører de anmodede endringene.
  • Kunden godkjenner den fullførte versjonen.
  • Du oppgraderer området, konfigurerer domenet og lanserer det endelige området.

Undersøk områdestruktur ved hjelp av Planlegg-visning i Adobe Muse

Hvis du vil se hvordan sidene på området er plassert i et hierarki som definerer de overordnede og underordnede lagene for navigeringskoblinger, åpner du .muse-filen for trådrammene i Adobe Muse for å analysere filen. Når du åpner prosjektet, vises Planlegg-visningen med alle sidene på området.

fig03.wireframe.b720
Sidene i trådrammene vises i Planlegg-visningen.

Vær oppmerksom på at det finnes to lag – et overordnet og et underordnet lag – som representerer hierarkiet i områdekartet. Når som helst i løpet av utviklingen eller vedlikeholdet av et område kan du klikke og dra disse sidene for å endre plasseringen av dem i områdestrukturen.

For å opprette nye sider:

  1. Klikk plusstegnet (+) til høyre for eller under eksisterende sider, og klikk deretter sidens navnefelt for å skrive inn navnet. 

    Vær så beskrivende du kan når det gjelder hvert sidenavn.

  2. Høyreklikk en sideminiatyr og bruk menyvalgene som vises, til å kopiere, slette eller gi sideminiatyren nytt navn.

    Alternativt kan du bevege pekeren over en side og klikke X-ikonet som vises i hjørnet øverst til høyre for å slette siden.

  3. Hvis du vil, kan du legge til, omplassere og slette sider for å endre områdekartet. Velg Rediger > Angre hvis du vil tilbakestille trådrammeområdet til slik det var i utgangspunktet.

    Grensesnittet i Planlegg-visningen er intuitivt å bruke, og Adobe Muse sporer alle sidenavnene og opprettholder koblingene som vises i kontrollprogrammer for meny. Eventuelle endringer oppdateres automatisk for å sikre at koblingene ikke brytes.

Bruke grafikkstiler til å opprette plassholderelementer som deler attributter

På samme måte som Adobe Illustrator og Adobe Photoshop kan du bruke Adobe Muse til å opprette grafikkstiler når du ønsker å konstruere konsekvent utseende og funksjonalitet som skal brukes på et sett med elementer. Dette er nyttig hvis trådrammer brukes (samt når sider designes) fordi du kan endre en eksisterende grafikkstil slik at du raskt kan oppdatere alle andre sideelementer som bruker den stilen. Du kan også kopiere eksisterende stiler for å opprette variasjoner av dem.

Slik bruker du grafikkstiler til å ta i bruk attributter på figurer og opprette plassholdere for bildefiler på et trådrammeområde:

  1. Bruk rektangelverktøyet til å tegne tre rektangler på en side i Design-visning.

  2. Merk ett rektangel og rediger det for å angi strøkfarge, fyllfarge og tetthetsinnstilling slik at du kan legge til grafikkeffekter, for eksempel skyggelegging.

  3. Når rektangelet er merket, klikker du Opprett ny grafikkstil nederst i Grafikkstiler-panelet. Stilen er basert på formateringen til det valgte rektangelet. Dobbeltklikk navnet på den nye grafikkstilen for å gi den et nytt, beskrivende navn.

  4. Merk én av de andre rektangelfigurene, og bruk samme grafikkstil på den ved å klikke navnet på stilen. Gjenta dette trinnet for å bruke stilen på det tredje rektangelet, slik at alle tre rektanglene bruker den samme stilen.

  5. Merk ett rektangel og rediger det for å endre stilen. Vær oppmerksom på at et plusstegn (+) vises i Grafikkstiler-panelet ved siden av navnet på den redigerte stilen.

  6. Høyreklikk navnet på stilen i Grafikkstiler-panelet, og velg Omdefiner stil. De to andre rektanglene oppdateres slik at de samsvarer med den nye stilen, og plusstegnet (+) vises ikke.

  7. Bruk grafikkstiler til raskt å formatere figurerer for å opprette konsekvente trådrammer og oppdatere et sett med innholdselementer for området når en kunde ber om endringer.

Bygge strukturerte websider og formatere tekst med avsnittstiler

Etter hvert som du bygger ut et trådrammeområde, kan du bruke tekstverktøyet til å opprette tekstrammer og legge til plassholdertekst (eller lorem ipsum) som du bytter ut senere. Eller hvis kunden har et eksisterende webområde, kan du kopiere teksten direkte fra en webleser og lime den inn i tekstrammene. Når du har opprettet tekstelementer, kan du bruke Tekst-panelet til å formatere teksten.

Ved hjelp av avsnittstiler kan du definere topptekst- og avsnittskoder for å strukturere tekstinnholdet på siden:

  1. I Design-visning bruker du Tekst-verktøyet til å dra en tekstramme til siden. Skriv inn eller lim inn tekst i tekstrammen for å fylle den ut.

  2. Bruk Tekst-panelet eller valgene i Kontroll-panelet øverst i arbeidsområdet i Design-visningen til å angi formateringsvalg, for eksempel valg av skrifttype, skriftstørrelse, skriftfarge og andre egenskaper.

  3. Klikk Opprett ny avsnittstil nederst i Avsnittstiler-panelet for å opprette en ny avsnittstil. Dobbeltklikk navnet på den nye stilen for å gi den et nytt, beskrivende navn.

  4. Høyreklikk stilen og velg Valg for stiler. Bruk Avsnittkode-menyen til å angi avsnittstilen til en bestemt HTML-kode, for eksempel P, H1, H2 eller H3.

    fig04.wireframe.b720
    Høyreklikk navnet på en stil i Avsnittstiler-panelet, og bruk deretter dialogboksen Valg for stiler til å definere stilen for en bestemt topptekst- eller avsnittskode.

  5. Opprett et par tekstrammer til med tekst. Vær oppmerksom på at hvis du klikker navnet på avsnittstilen mens en tekstramme er merket, bruker du formateringen til avsnittstilen på den merkede tekstrammen. Hvis du senere merker én av tekstrammene med en anvendt avsnittstil og endrer den, vises plusstegnet (+) i Avsnittstiler-panelet ved siden av navnet på stilen. Dette angir at stilen er endret ved hjelp av den samme virkemåten som grafikkstiler.

  6. Hvis du vil oppdatere alle tekstrammene automatisk ved hjelp av den samme stilen, høyreklikker du navnet på stilen i Avsnittstiler-panelet og velger Omdefiner stil.

    Som du ser i dette korte eksempelet, kan du opprette ulike tekstbeholdere og angi at de skal bruke bestemte stiler for å opprette en konsekvent design. Når du deretter oppdaterer trådrammene for å designe den endelige versjonen av området, er det enkelt å oppdatere stilene basert på kundens ønsker. Oppretting av strukturerte websider med tekstbeholdere er den beste metoden fordi rangeringen av søkemotoroptimaliseringen dermed forbedres.

Merk:

Når du designer sider med heldekkende bakgrunnsfarger, må du angi bakgrunnsfyllfargen for tekstrammene i henhold til det. Dette bidrar til at Adobe Muse kan publisere tekstinnholdet på en mer effektiv måte. Hvis bakgrunnsfyllet er ukjent, ser den publiserte tekstaliasingen mindre elegant ut fordi Adobe Muse setter bakgrunnsfargen for tekstrammen til gjennomsiktig. Hvis sidebakgrunnen imidlertid viser graderinger eller bilder, setter du fyllfargeverdien for tekstrammer til Ingen.

Oppdatere plassholderbildene med grafikk fra det endelige området

Når kunden har godkjent trådrammene, kan du raskt oppdatere området slik at det bruker de faktiske bildefilene.

  1. Merk en bildeplassholder på siden.

  2. Åpne Innholdselementer-panelet for å finne det valgte sideelementet.

  3. Høyreklikk sideelementet. På menyen som vises, har du to valg du kan bruke til å oppdatere bildefilen, avhengig av hvordan du satte opp trådrammeområdet.

    Hvis du opprettet en fil i Adobe Photoshop- eller Adobe Fireworks-programvaren og plasserte den på siden, kan du velge Rediger original for å redigere den opprinnelige filen i produktet som ble brukt til å opprette filen. Når du lagrer malfilen og går tilbake til Adobe Muse, blir de plasserte forekomstene av filen automatisk oppdatert på området.

    Hvis du opprettet plassholdere for bildefiler i Adobe Muse ved hjelp av rektangelverktøyet, kan du alternativt velge Koble til alle forekomster på nytt og bla til og velge en fil som finnes på datamaskinen. Deretter bruker du denne filen til å bytte en plassholderfil med det endelige grafikkbildet.

    fig05.wireframe.b720
    Høyreklikk navnet på innholdselementet og velg Rediger original for å åpne malen til en plassholderfil i bilderedigeringsprogrammet du brukte til å generere plassholderfilen.

  4. Gjenta disse trinnene for å erstatte alle plassholderbildene på siden med faktiske bildefiler.

    Merk:

    Når du høyreklikker navnet på et innholdselement i Innholdselementer-panelet, kan du også velge Gå til innholdselement. Dette alternativet ber Adobe Muse om å åpne siden som inneholder det valgte innholdselementet, slik at du kan oppdatere det raskt.

Åpne de optimaliserte bildefilene som er generert av Adobe Muse

I tillegg til å publisere Adobe Muse-områdene du oppretter, på vertsserveren, kan du også eksportere hele settet for å hente mappen med oppdelte og eksporterte bildefiler:

  1. Velg Fil > Eksporter som HTML.

    Dialogboksen Eksporter til HTML vises.

  2. Velg plasseringen på datamaskinen for å eksportere områdefilene, og klikk deretter OK.

Når denne operasjonen er fullført, eksporterer Adobe Muse filene og lagrer dem i den lokale mappen du angav. Gå til mappen og åpne bildemappen for å få tilgang til de optimaliserte bildefilene. Du kan bruke disse bildefilene på nytt til å opprette nyhetsbrev, mobilapper, sider på sosiale nettverk og andre relaterte prosjekter.

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet