View
769
Download
1
Category
Preview:
Citation preview
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
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
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
INSTELLEN NIEUWE SITE
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
INSTELLEN BREEKPUNT VOOR DESKTOP
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul PostelWEBDESIGN MUSE RESPONSIVE INTERACTION
INSTELLEN BREEKPUNT VOOR TABLET & PHONE
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
AANMAKEN VAN DE PAGINA’S IN HET SITE-OVERZICHT
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
VORMGEVEN OP HET A-STRAMIEN (A-MASTER)
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
VORMGEVING VASTZETTEN VOOR RESPONSIVE VERPLAATSEN
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
VORMGEVING VAN A-STRAMIEN OP DE OVERIGE PAGINA’S
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
ACHTERGROND AFBEELDINGEN, EFFECTEN & LAGEN
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
ACHTERGROND AFBEELDINGEN, EFFECTEN & LAGEN
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
ACHTERGROND AFBEELDINGEN, EFFECTEN & LAGEN
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
BEHEER TEKST & TYPOGRAFIE VIA STIJLEN
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
INVOEGEN VAN WIDGETS + WIDGET OPTIES
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
PUBLICEREN & FTP
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
PUBLICEREN & FTP
WEBDESIGN MUSE RESPONSIVE INTERACTION
auteur: Raoul Postel
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
WEBDESIGN MUSE RESPONSIVE INTERACTION
Recommended