Steps webapp-design Muse

MUSE WEBDESIGNLEERJAAR 1 REALISATIE & VORMGEVEN

ONTWERP MET MUSE EEN RESPONSIVE WEBSITE

webdesign met muse

auteur: Raoul PostelWEBDESIGN 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

http://www.designtrainingen.nl

auteur: Raoul Postel

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

WEBDESIGN MUSE RESPONSIVE INTERACTION



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 specificaties

▸ Formaat op 1280px in 4 kolommen en een minimale hoogte van 800px

▸ Stel via ‘Breekpunt instellen’ de responsive breedte in op: 768 (tablet staand) en320 (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



auteur: Raoul PostelWEBDESIGN MUSE RESPONSIVE INTERACTION

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



http://lipsum.com


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 viaFont Awesome

▸ Klik op Voorvertonen en bekijk het resultaat door het venster smaller en breder te maken

V



http://pixelosaur.com/blog/how-to-use-font-awesome-in-muse/


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

▸ Ga naar de tab A-master, open de Widget- bibliotheek en sleep een 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

▸ Ga naar de tab A-master, open de Widget- bibliotheek en sleep een SocialMedia-widget op de layout in de footer

▸ Plaats minimaal de 3 belangrijkste media-buttons

▸ Zet er in wat grotere typografie 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

Education

Transcript of Steps webapp-design Muse