Steps webapp-design Muse

MUSE WEBDESIGN
LEERJAAR 1
REALISATIE & VORMGEVEN

ONTWERP MET
MUSE EEN
RESPONSIVE
WEBSITE
webdesign met muse

auteur: Raoul Postel
WEBDESIGN MUSE RESPONSIVE INTERACTION
BRIEFING EN OPDRACHT
▸ Schrijf kort op wat de opdracht inhoud
▸ Maak een lijst van producteisen, zoals,
interactieve elementen, kleurgebruik,
huisstijl-vormgeving, site-content  
ftp-gegevens
▸ Omschrijf het doel/thema  
van de opdracht
▸ Omschrijf de doelgroep
▸ Krijg antwoord op vragen die je  
nog hebt bij de opdrachtgever
▸ Stel de deadline vast
V

WIREFRAME & INTERACTION
▸ Teken een wireframe waarin duidelijk
wordt hoe je door de webapp navigeert
▸ Schets de belangrijkste schermen in
blokken, zodat duidelijk wordt hoe de
indeling wordt en alle functionaliteit past
▸ Geef aan welke functionaliteit er in de
smartphone vervalt of bij komt, zoals een
direct-bellen knop of het wegvallen van
de slideshow ivm laadtijd (adaptive)
▸ Bewaar het overzicht als PDF
▸ Bespreek dit met de opdrachtgever
V

IDEE & SCHETSEN
▸ Bekijk het aangeleverde beeldmateriaal,
Zijn de foto’s van voldoende kwaliteit?
▸ Lees de aangeleverde tekst
▸ Google eigen afbeeldingen ter inspiratie
met het doel/thema als zoekterm
▸ Maak een lijst van de content (inhoud),
zoals: slideshow, nieuws, banners, footer,
video, widgets, contact, socialmedia
▸ Maak met potlood of pen kleine
schetsen van de layout (min. 10).
▸ Schets in 4 kolommen
V

INSTELLEN NIEUWE SITE

OPZET ADOBE MUSE
▸ Maak een nieuwe site aan in  
Muse volgens de speciﬁcaties
▸ Formaat op 1280px in 4 kolommen  
en een minimale hoogte van 800px
▸ Stel via ‘Breekpunt instellen’ de responsive
breedte in op: 
768 (tablet staand) en 
320 (smartphone staand)
▸ Maak de gewenste pagina’s aan via het
site-overzicht.
▸ Dubbelklik op de A-Stramien (A-Master) -
pagina en geef een achtergrondkleur.
Bekijk in het site-overzicht wat er gebeurt…
V

INSTELLEN BREEKPUNT VOOR DESKTOP

INSTELLEN BREEKPUNT VOOR TABLET & PHONE

NAVIGATIE
▸ Open de tab met het A-Stramien (A-master)
en klik op + rechts naast HOME
▸ Noem deze pagina: ABOUT en herhaal deze
stap voor meerdere pagina’s, zoals
CONTACT en PRODUCTS
▸ Bij PRODUCTS klik je nog 2 pagina’s via + 
er onder. Dit zijn de sub-pagina’s
▸ Ga terug naar de tab A-Stramien (A-master),
open de Widget- bibliotheek en sleep een
horizontaal menu bovenin de layout
▸ Door op een menu-knop te dubbelklikken,
bewerk je de gegroepeerde onderdelen,
zoals achtergrond-kleur en knop-tekst.
V

AANMAKEN VAN DE PAGINA’S IN HET SITE-OVERZICHT

LAYOUT ADOBE MUSE
▸ Teken lijnen, vlakken en vormen  
volgens de schetsen
▸ Plaats het logo
▸ Plaats de neptekst (lipsum.com)  
in de diverse blokken
▸ Zet de bovenstaande objecten  
in de juiste laag
▸ Pas vervolgens ook de layout  
van de responsive breedtes aan via het
venster Transformeren
▸ Klik op Voorvertonen en bekijk het resultaat
door het venster smaller en breder te maken
V

VORMGEVEN OP HET A-STRAMIEN (A-MASTER)

VORMGEVING VASTZETTEN VOOR RESPONSIVE VERPLAATSEN

VORMGEVING VAN A-STRAMIEN OP DE OVERIGE PAGINA’S

AFBEELDINGEN VOOR WEB
▸ Controleer de kleurmodus van  
de afbeeldingen in Photoshop.  
Voor web is dit RGB
▸ Controleer de Resolutie. Voor web
minimaal 150 dpi als middenweg tussen
normaal (72 dpi) en Retina (>250 dpi)
▸ Corrigeer afwijkingen en verklein zeer
grote afbeeldingen naar een maximale
breedte van 1900 px of kleiner
▸ Exporteer als .png of .jpg  
en importeer ze in Muse
V

ACHTERGROND AFBEELDINGEN, EFFECTEN & LAGEN

TYPOGRAFIE
▸ Kies een lettertype voor de titel/kop.  
Kies Adobe Typekit of Google Webfonts
▸ Kies een lettertype voor de leestekst.  
Bij voorkeur met varianten vet en cursief
▸ Bepaal de grootte (corps) en regelafstand
(interlinie) van de leestekst
▸ Leg kleur-accenten in de tekst, zoals kleur
voor koppen, links, tekst wit uitsparen in  
een kleurvlak
▸ Plaats Social Media icoontjes via 
Font Awesome
▸ Klik op Voorvertonen en bekijk het resultaat
door het venster smaller en breder te maken
V

BEHEER TEKST & TYPOGRAFIE VIA STIJLEN

NIEUWSBERICHTEN
▸ Ga naar de tab A-master, open de
Widget- bibliotheek en sleep een
Deelvenster met tab of Accordeon
op de layout
▸ Maak 3 nieuwsberichten aan met
een titel, een datum, een tekst van
maximaal 3 regels en een ‘Lees
Meer’-knop
▸ Experimenteer met de widget-
opties (blauwe pijltje, zichtbaar
rechtsboven tijdens selectie)
V

INVOEGEN VAN WIDGETS + WIDGET OPTIES

SLIDESHOW
Diapresentatie op de layout in de
linker kolom
▸ Kies met de widget-opties (blauwe
pijltje, zichtbaar rechtsboven
tijdens selectie) de slideshow-
afbeeldingen
▸ Experimenteer met de overige
widget-opties
V

SOCIAL MEDIA EN CONTACT
▸ Plaats onderaan de pagina,
paginabreed, een footer-balk
SocialMedia-widget op de layout  
in de footer
▸ Plaats minimaal de 3 belangrijkste
media-buttons
▸ Zet er in wat grotere typograﬁe  
ook nog het telefoonnummer in
V

PUBLICEREN VIA FTP
▸ Klik op het pijltje naast Publiceren,
rechtsboven in het programma
▸ Publiceer de site via BusinessCatalist of  
via een eigen domein (FTP-host)
▸ Vul de FTP-gegevens in en het adres  
van de webserver
▸ Upload de website en bekijk het resultaat
door de browser breder en smaller te
maken
▸ Wellicht zijn er nu nog kleine aanpassingen
in de vormgeving nodig. Speel vooral met
het venster Transformeren
V

PUBLICEREN & FTP

CORRECTIES
▸ Positioneer de zojuist geplaatste
widgets verder in de layout voor
tablet en smartphone
▸ Bespreek het ontwerp met  
de opdrachtgever
▸ Voer de correcties door
▸ Plaats de schermvariaties in een
mockup als presentatie naar de
opdrachtgever
V

Steps webapp-design Muse

More Related Content

Similar to Steps webapp-design Muse

More from Raoul Postel

Steps webapp-design Muse