Copyright WebsiteInEenMiddag.nl 2011 Disclaimer

Maat: px
Weergave met pagina beginnen:

Download "Copyright WebsiteInEenMiddag.nl 2011 Disclaimer"

Transcriptie

1 Copyright WebsiteInEenMiddag.nl 2011 Op de inhoud en vormgeving van dit document rust, ongeacht de drager of de vorm waarin het werd verspreid, auteursrecht. Dit document werd geproduceerd en verspreid als onderdeel van de workshop Website In Een Middag en is daar onlosmakelijk mee verbonden. De gids wordt alleen verspreid onder cq ter beschikking gesteld aan deelnemers van de workshop. U mag dit document NIET verspreiden of op welke manier dan ook ter beschikking stellen aan derden. Niet in zijn geheel en niet gedeeltelijk. Als u dit document in uw bezit heeft (opgeslagen op een elektronisch medium of in geprinte vorm) zonder dat u de workshop heeft gevolgd of zich formeel voor de workshop heeft aangemeld, dan beschikt u over een illegaal exemplaar. In dat geval verzoeken we u vriendelijk dit te melden aan Disclaimer De inhoud van deze gids is gebaseerd op de persoonlijke ervaringen van de auteur. Dat wil niet persé zeggen dat u dezelfde resultaten zult behalen. Deze gids bevat een aantal links naar pagina s op internet. Een aantal daarvan leidt naar websites of online bestanden cq applicaties die buiten de verantwoordelijkheid van de auteur vallen. Bovendien kan het zijn dat een aantal links niet (meer) werkt. Google.com, Google.nl en Google zijn handelsnamen van Google Inc. WebsiteInEenMiddag is op geen enkele wijze verbonden met Google Inc. of elke andere in deze gids genoemde merknaam.

2 VORMGEVING Dit document gaat over de vormgeving van je website: kleuren, vormen, lettertype en ga zo maar door. Vaak is je huisstijl de basis waarop je de vormgeving baseert. Doel van dit document is dat je een uitgeschetst idee formuleert over de uitstraling en feitelijke vormgeving. Je krijgt advies over hoe je ideeën opdoet en vertaalt naar je eigen website. Daarnaast leer je welk materiaal je tijdens de workshop beschikbaar moet hebben. Actiepunt(en): bepaal welke vormgevingselementen je gaat gebruiken en verzamel (indien mogelijk) de bestanden die je daarvoor nodig hebt. Bewerkt grote beeldbestanden tot een werkbaar formaat. Hoofdstukken: Inleiding Je bent verder dan je denkt Vormgevingselementen Achtergronden Laat je inspireren Vormgevingsanalyse Grafische bestanden en bestandsvormen Wat je tijdens de workshop paraat moet hebben Homepage vs webpage Hot Tip: Hoe PowerPoint je kan helpen Tot slot

3 INLEIDING Dit ebook vraagt om iets meer inleiding dan de vorige 3. Hoewel dit zeker niet het meest ingewikkelde uit de serie is, is dit ebook wel het minst concrete. Ik kan je tot achter de komma helpen bij het opzetten van een lay-out en het bepalen van een navigatiestructuur. Dat vraagt concrete acties: doe dit + doe dat + let hier op = resultaat. Maar als het gaat over vormgeving is het ineens allemaal een stuk minder concreet. Wat jij mooi vindt, vind ik misschien lelijk minder mooi. Lastig allemaal! Het betekent namelijk dat mijn ondersteuning wat betreft de vormgeving van je website beperkter is dan bij het daadwerkelijk bouwen van je website. Concreet: ik kan je vertellen hoe je een achtergrondfoto in je website plaatst, maar ik kan je niet vertellen wélke achtergrondfoto je moet gebruiken. Dat allemaal gezegd hebbende, ga ik je de komende pagina s wel degelijk helpen bij de vormgeving van je website. Echter, dit ebook is geen beknopte cursus vormgeving. Het biedt je een serie handvatten waarmee je de lay-out van je website relatief eenvoudig kunt inkleuren en optuigen. Voordat we daarmee beginnen, nog één ding. De website die je straks tijdens de workshop bouwt zit technisch prima in elkaar. En als je je huiswerk een beetje fatsoenlijk doet, creëer je een lay-out die passend is, klopt de structuur en zit de goede content op de goede plek. Vormgeving is vervolgens de slagroom op de taart. Maar wat voor jou en mij geldt, geldt ook voor je website: van teveel slagroom word je dik en onaantrekkelijk. Niks is niks, maar minder is meer. Let maar op!

4 VORMGEVING? JE BENT VERDER DAN JE DENKT! Het lijkt misschien alsof je wat betreft de vormgeving van je website op nul begint, maar dat is niet zo. Je hebt neem ik aan - een logo en huisstijlkleuren. Dat is een solide start. Neem de website hieronder als voorbeeld en kijk wat er voor nodig was om een lay-out (die je bekend zal voorkomen) op te tuigen tot een volwassen ogende website. achtergrond kader (het verlopende kleurvlak achter de primaire content) icons (2 stuks) logo foto De kleuren die zijn gebruikt voor de achtergrond en in het kader zijn afgeleid van de huisstijlkleuren in het logo. Of bovenstaande een mooie website is, laat ik in het midden. Maar dat ie een zakelijke uitstraling heeft, daarover zullen we het eens zijn. En nogmaals: voor de vormgeving zijn vijf grafische bestandjes en een logo gebruikt. That s all Folks. 5 bestandjes en niets meer. Je bent verder dan je denkt!

5 VORMGEVINGSELEMENTEN Als het gaat om de vormgeving van je website, heb je meerdere elementen tot je beschikking. Variërend van achtergronden tot kaders en uiteraard je logo. Door die zo uitgebalanceerd mogelijk te combineren (qua kleurstelling, formaat en bijvoorbeeld lettertype) creëer je een unieke uitstraling. We hebben de belangrijkste elementen hieronder op een rijtje gezet. Voor de goede orde: het is niet verplicht elk van de hieronder genoemde elementen in je website vorm te geven cq te betrekken bij de vormgeving. Sterker nog: dat is eerder verboden. Tenzij je kermisexploitant bent 1 logo Je hebt ongetwijfeld een logo. Je bedrijfsnaam zit er (waarschijnlijk) in verwerkt en het heeft een zekere uitstraling die je wilt verbinden met je bedrijfsidentiteit. Je logo is zodoende een vormgevingselement dat op je website niet mag ontbreken. 2 kleur Al is het wit: er zit kleur in je huisstijl. Die kun je doorvoeren in de achtergrond en de vormgevingselementen. Niet iedereen is even kleurgevoelig en het internet zou het internet niet zijn als er op dat vlak geen hulp te vinden is. Als je op zoek bent naar inspiratie, surf dan naar Daar pronken vormgevers, designers en kleurfetisjisten met hun favoriete kleurcombinaties. Je vindt er een wereld aan zowel gewaagde als geruststellende kleurcombinaties. Biedt Colorlovers niet wat je zoekt, probeer het dan hier eens: 3 Overige huisstijl-elementen We kennen allemaal de swoohs van Nike, de ster van Heineken en het dubbele dakje van Citroën. Het zijn huisstijl-elementen, onderdelen van het logo, die bijdragen aan de uitstraling van de website cq het bedrijf. Als je een huisstijl hebt waarin zo n grafisch element voorkomt, dan kun je die subtiel verwerken in je website. In de achtergrond maar bijvoorbeeld ook in buttons. 4 Typografie Misschien schrijft je huisstijl het gebruik van een lettertype voor. Je website maakt echter gebruik van de lettertypes die op de PC van de bezoeker geïnstalleerd zijn. De gemiddelde PC heeft een beperkte font-bibliotheek. Zit jouw lettertype daar niet tussen, dan valt de website automatisch terug op standaard lettertypes: Arial, Verdana, Courier et cetera. Om misverstanden te voorkomen: bovenstaande betekent niet dat je je logo niet in zijn volle glorie en in het juiste grafische lettertype op je website kunt zetten. Een afbeelding van je logo is namelijk exact wat het is: een grafisch afbeelding en dus geen getikte tekst.

6 5 blokken, kaders en lijnen Hoewel je de stelregel Minder = Meer constant in je achterhoofd moet houden, kun je wel degelijk kaders, blokken en bijvoorbeeld lijnen inzetten als vormgevingselementen. Op de website van ons bureau Veenema (zie afbeelding vorige hoofdstuk) wordt in de bovenste helft een groot blokkader als achtergrond gebruikt. 6 foto s en video De tijd dat beeldmateriaal de laadtijd van een website zodanig beïnvloedde dat elke foto werd teruggebracht tot een postzegel, ligt gelukkig achter ons. De techniek is verbeterd en we hebben bijna allemaal een snelle verbinding. Je kunt je wat betreft beeldmateriaal dus beter uitleven dan voorheen al blijft ook hier enige terughoudendheid geboden. 7 Achtergrond Elke website heeft een achtergrond. Dat kan elke willekeurige kleur zijn (van wit tot zwart en alles daar tussenin). Het kan ook een verlopende kleur zijn zoals in de website van Bureau Veenema (zie boven). Omdat achtergronden voor een belangrijk deel de sfeer van je website bepalen, gaan we verderop dieper in op dit onderwerp. 8 Grafische elementen, bullets, icons etc Ons bureau Veenema heeft twee icons op de homepage staan: een rijtje ordners en een handshake. Soms hebben die elementjes geen andere functie dan het visueel opleuken van de pagina en soms verduidelijken ze in één oogopslag waar de betreffende ankeiler over gaat. De manieren waarop je dergelijke icons kunt inzetten is oneindig. Je zult ze, als je straks op internet gaat zoeken naar inspiratie, tegenkomen in elk denkbare vorm en in elk denkbaar formaat. Op de website van WebsiteInEenMiddag vind je meerdere toepassingen. Bovenin zie je pijlen die het oog naar de opsomming trekken. Onderin koos ik icons die zijn aangepast aan het onderwerp. Icons (of graphics of hoe je die kleine plaatjes ook wilt noemen) verlevendigen je website. Maar ze helpen je ook meer nadruk te leggen op bepaalde content. Daarnaast hebben ze een zekere psychologisch effect. Een lachende smily heeft een voorspelbaar ander effect dan een huilende. En denk ook eens aan het effect van een rode pijl, een bliksemschicht, een garantiezegel of bijvoorbeeld een oplopende grafiek. Platgetreden paden? Daar heb je helemaal gelijk in. Maar het werkt nog steeds

7 ACHTERGRONDEN Elke website heeft een achtergrond. Sterker nog, als het om vormgeving gaat, is de achtergrond een van de meest sfeerbepalende elementen van je website. Voordat we verdergaan, gaan we een mogelijke spraakverwarring voorkomen. Er zijn namelijk twee soorten achtergronden. Veenema maar weer als voorbeeld? De eerste is de achtergrond van de TOTALE website. Kortom de achtergrond die schermbreed en schermhoog zichtbaar is. Ongeacht hoe hoog en breed dat beeldscherm is. De tweede is de achtergrond achter specifieke onderdelen van een website. Vaak worden die ook aangeduid als kaders. De TOTALE achtergrond loopt van links naar rechts over het gehele scherm en van boven naar beneden. Van boven naar beneden zit er een kleurverloop in (naar wit onderin). De tweede achtergrond, het kader, zit achter de primaire content en de foto. Ook daarin zit van boven naar beneden een verloopje. Nu we dat duidelijk hebben, kijken we eerst even naar de TOTALE achtergrond (maak je geen zorgen, dit was de laatste keer dat ik het voor de duidelijkheid in die schreeuwerige kapitalen tikte). De totale achtergrond De website die je tijdens de workshop gaat bouwen heeft standaard een witte achtergrond. Als je geen Bouvrie van achteren heet, zou het maar zo eens kunnen dat je dat wilt veranderen. Dat kan. De simpelste manier is botweg de kleur aanpassen. Van wit naar geel of bruin of pimpelpaars. Dat is een kwestie van één druk op de knop. Simpeler dan dat kan het niet worden, dus daar maken we verder geen woorden meer aan vuil. Misschien ben je in voor een achtergrond die iets meer spanning heeft dan één egale kleur. Bijvoorbeeld met een kleurverloop van donker(der) naar licht(er) of andersom, kortom het verloopje dat we net ook al zagen in de website van Veenema.

8 Om zo n effect te bereiken heb je één grafisch bestandje nodig. Het bestand waarmee de achtergrond van Veename is gemaakt, zie je hier rechts. En om maar direct antwoord te geven op je vraag: ja, in werkelijkheid is het ook zo n klein bestandje. De truc is dat de software in staat is net zoveel van die bestandjes naast elkaar te zetten als nodig is om het beeldscherm van links naar rechts te vullen. Zodoende ontstaat er een totale achtergrond met behulp van een klein en licht bestandje. Je ziet, het stelt weinig voor. Je maakt zo n verloopje met elk willekeurig fotobewerking- of tekenprogramma. Wellicht kun je overweg met zo n programma en maak je zo n bestandje in een handomdraai. Misschien niet. Dan maken we m tijdens de workshop. Kwestie van 1 minuut. Voorwaarde is natuurlijk wel dat je weet welke kleuren je wilt gebruiken!!!! En da s nog maar het begin Nu je weet dat je een achtergrond kunt maken met een relatief simpel grafisch bestand, opent zich een wereld aan mogelijkheden. De webpagina hieronder komt je waarschijnlijk bekend voor. Het is een achterliggende pagina van WebsiteInEenMiddag.nl. Rechts naast het screenshot van de webpagina zie je het (enige) bestandje waarmee de achtergrond is gecreëerd: een klein, simpel kleurvlakje met een schaduw aan de onderzijde op de overgang van groen naar wit, wat de suggestie wekt dat het groene vlak lichtjes boven de witte achtergrond zweeft. Eén klein bestandje. Meer is het niet NB Voor de goede orde: het beeld van de webpagina hierboven is verkleind, waardoor de verhoudingen tussen de twee uiteraard helemaal zoek is.

9 FOTO ALS ACHTERGROND Als je een meer uitgesproken achtergrond wilt hebben dan kom je misschien al snel op het idee een foto of illustratie in de achtergrond te hangen. Dat kan. Hiernaast een aantal ideeën. Wellicht past geen van de ideeën hiernaast bij je bedrijf, je website of de beoogde uitstraling. Waar het me om gaat is je voorbeelden aan de hand te doen, die je tonen wat de mogelijkheden zijn. Vervolgens is het aan jou om te bepalen of je een dergelijke vormgevingstruc op jouw website en in jouw branche kunt en wilt toepassen. Hou daarbij in je achterhoofd dat beeld zoals hiernaast nogal dominant is. Dat is goed als het je primaire boodschap onderstreept, slecht als het afleidt. Als je de voorbeelden hiernaast live wilt bekijken, dan heb je hier de url s: Meer voorbeelden? Ga dan naar deze link:

10 LAAT JE INSPIREREN Voordat je verder leest: als ik je aanmoedig om je te laten inspireren, moedig ik je niet aan om klakkeloos ideeën of oplossingen van andere websites over te nemen. Regels van het huis: 1. Inspiratie opdoen is best practise 2. Na-apen zit op het randje 3. Ronduit stelen is domweg verboden Nu we het daar over eens zijn: internet is een enorme bron van inspiratie en het zou dom zijn die links te laten liggen. Kortom, start je pc en surf van de ene naar de andere zakelijke website. Nogmaals: niet om klakkeloos na te apen maar om ideeën en inspiratie op te doen. Je kunt natuurlijk zelf op strooptocht gaan (en dat moet je ook zeker doen, bekijk vooral je concurrenten!) maar waarom zou je je niet de weg laten wijzen door iemand die zo vriendelijk is geweest het meeste werk voor je te doen: Bookmark de websites die je aanspreken in een aparte map zodat je ze later makkelijk kunt terugvinden. Niet iedereen vindt het prettig om zo n swipefile alleen maar op zijn scherm te hebben. Als je de ideeën die je op het web tegenkomt in je handen wilt hebben of geprint op tafel wilt uitspreiden, maak dan screenshots (fotokopieën van het beeldscherm) en sla ze op in een aparte map die je makkelijk kunt terugvinden. Daar kun je software voor gebruiken (zie de tip hieronder) maar met de toets PRTSC (print screen op PC) op je toetsenbord kom je ook een heel eind. Tip: handige software voor het maken van screenshots is FireShot. Er is een betaalde en een gratis Freeware versie. Je kunt m hier downloaden: (zoek naar de link FireShot op de onderste helft van de pagina). Grote voordeel ten opzicht van PRTSRN is dat je met dit programmaatje een foto kunt maken van de gehele website terwijl PRTSCRN alleen het in je scherm zichtbare gedeelte pakt.

11 HOE JE AAN ICON S, BEELD EN ACHTERGRONDEN KOMT Als je eenmaal een aantal voorbeelden hebt verzameld en een idee begint te vormen over hoe je website er uit moet gaan zien, doet zich natuurlijk de volgende vraag voor: hoe kom ik aan de vormgevingselementen die ik nodig heb foto s, kaders et cetera. Onderdeel van het WiEM Startpakket is een pdf genaamd online bronnen. Daarmee kom je een heel eind. Ik kom vrijwel dagelijks op enkele of elk van die websites om er goodies weg te halen. Een tweede bron is een klein internetbedrijfje waar je wellicht wel eens van hebt gehoord of iets over hebt gelezen. Het heet Google. Zoek naar free background of free website graphics of varianten daarop en er gaat en wereld voor je open. Gebruik liever Google.com dan Google.nl. Een waarschuwing is hier wel op z n plaats. Twee zelfs. Ten eerste bestaat er zoiets als copyright. Gebruik dus alleen beeld waarvan je zeker weet dat je het mág gebruiken. Als iets op een reguliere website ter download wordt aangeboden, mag je daar redelijkerwijs vanuit gaan. Ten tweede: dit is een onderdeel van je voorbereiding waarin je je kunt verliezen. Hoe meer websites je bekijkt, des te groter is de kans dat je de weg kwijtraakt in alle mogelijk opties. De bekende verlammingsverschijnselen zijn vaak het trieste resultaat. Vier uur gesurfd en nóg niks besloten. Kortom, hou het puntje een beetje bij het paaltje en hak op een goed moment die knoop door. Bam! Wat betreft kaders en kleine achtergrondbestandjes die kun je uiteraard ook zelf maken. Elk fotobewerking- of tekenprogramma komt daarvoor in aanmerking. Waaronder PaintDotNet. Nogmaals: als je daar niet uitkomt, dan help ik je tijdens de workshop op weg.

12 GRAFISCHE BESTANDEN EN BESTANDSFORMATEN Niet iedereen is thuis in de wereld van grafische bestanden. Een heel klein beetje kennis van die wereld scheelt je een hoop tijd (en frustratie). Grafische bestanden heb je in verschillende bestandsformaten. Voor de workshop zijn er in feite twee van belang: JPG en PNG. Er zijn tientallen anderen (gif, psd, tiff et cetera), maar die laten we voor het moment even buiten beschouwing. Een foto/beeld/bestand/logo in bestandsformaat JPG is opgeslagen als bestandsnaam.jpg. In bestandsformaat PNG is het opgeslagen als bestandsnaam.png. Wat tijdens de workshop regelmatig voor frustratie en tijdsverlies zorgt, is het fysieke formaat van de bestanden. Ze zijn domweg te groot om mee te werken. Een beetje moderne camera maakt foto s in het formaat waarmee je een babykamer kunt behangen. Dat is hartstikke leuk, maar totaal ongeschikt voor je website. En dat geldt overigens ook voor foto s die je ophaalt bij stockfoto websites als SXC. Size does matter als het om beeldmateriaal je website gaat, maar dan andersom: hoe kleiner hoe beter. Kleiner is vaak een kwestie van het daadwerkelijke formaat van de foto cq het bestand. Je website is 1000 pixels breed (zo n 25 centimeter). De foto uit een moderne camera is makkelijk pixels breed (ruim een meter!). Minstens vier keer groter dan we ooit nodig zullen hebben. Ook de resolutie van het bestand speelt een rol, maar in de praktijk is het vooral het daadwerkelijke formaat dat dwars zit tijdens de workshop. Daarom het volgende (vriendelijke doch dringende) advies: verklein vooraf de foto s, je logo of welk ander grafisch bestand dan ook wat je op je website denkt te gaan gebruiken tot een werkbaar formaat. Door de bestanden te verkleinen tot maximaal 1000 pixels breed, weet je zeker dat je bestand nooit te klein zal uitvallen. Je website is immers niet breder dan 1000 pixels. Er is slechts één uitzondering: beeldmateriaal dat je wilt gebruiken voor de totale (!) achtergrond van je website. Hou die bestanden in hun oorspronkelijke formaat. Op de volgende pagina een beknopte uitleg hoe je een bestand met behulp van PaintDotNet kunt verkleinen.

13 Hoe verklein je bestanden? In dit voorbeeld verkleinen we stap voor stap een foto tot 1000 pixels breed via het fotobewerkingsprogramma PaintDotNet. Als je dat programma niet hebt geïnstalleerd, klik dan hier: Het werkt als volgt: Stap 1: Open PaintDotNet Stap 2: klik op Open en selecteer de foto die je wilt verkleinen. De foto verschijnt vervolgens in het werkvlak van PaintDotNet. Stap 3: Klik op Image en op Resize in het uitklapscherm Stap 4: Vervolgens verschijnt het scherm dat je hieronder ziet. Daarin zitten twee zaken die belangrijk zijn. Bij 1 zie je de verhoudingen van het beeld. Dat moet aangevinkt zijn (zoals in het voorbeeld). Bij 2 kun je het gewenste formaat van het bewerkte beeld invullen. Zet in dit geval de width op 1000 pixels (in plaats van de 3668 in het voorbeeld) en klik op OK. Omdat we Maintain Aspect Ratio aangevinkt hadden, blijft de hoogte/breedte verhouding van het bestand gehandhaafd. Je bent er bijna. Alleen nog even saven (volgende pagina).

14 Stap 5: Klik op File en op Save as. Door te kiezen voor Save as sla je het bestand op onder een andere naam waardoor het originele bestand in het oorspronkelijke formaat, niet verloren gaat. Wees slim en kies een bestandsnaam die een beetje logisch is. Dus als het bestand in eerste instantie logo heet, noem het tot 1000 pixels verkleinde bestand dan logo1000. Klaar is Kees.

15 WAT JE TIJDENS DE WORKSHOP PARAAT MOET HEBBEN Hoe beter je weet wat je tijdens de workshop wilt bereiken, des te beter zal het eindresultaat zijn. Maar dat had ik geloof ik al een paar keer eerder gezegd Als het gaat om de vormgeving, komt het er op neer dat je minimaal een helder beeld moet hebben van hoe je website er uit moet komen te zien. Een helder beeld is meer dan een helder idee. Een beeld is concreet, een idee zit in je hoofd. Een beeld heb je uitgewerkt op papier en kun je laten zien. Een idee kun je alleen omschrijven. Kortom, pak je zoontje/neefje/buurjongetje (m/v) zijn kleurpotloden af en ga aan de slag. Neem een leeg Aviertje en leg het dwars voor je neer. Dat is het beeldscherm. Trek links en rechts, circa 5 centimeter van de zijkant, een lijn van boven naar beneden. Dat ziet er ongeveer als volgt uit: Het gebied tussen de twee lijnen die je trok is je website. Het gebied daarbuiten (zowel links als rechts) is het zichtbare deel van je achtergrond. Schets vervolgens met potlood de lay-out die koos in het websitegebied. Omdat je ook je ook wat betreft je navigatie- en contentstructuur al keuzes hebt gemaakt, kun je ook die inschetsen. Voor de duidelijkheid: dit hoeft geen hoogstaand artwork te worden. Het is puur een oefening voor jezelf, die je helpt om je website te visualiseren. Dus hou je niet in, maar kladder er rustig op los. Je gummetje is je beste vriend Zullen we de website van Veenema weer als voorbeeld nemen? Op de volgende pagina vind je een aantal schetsen waarin we stap voor stap de vormgeving vastleggen. Hou in gedachte: ik heb alles in de goede volgorde gedaan. Ik heb mijn lay-out vastgelegd, mijn content op een rijtje gezet en ik weet wat mijn primaire content is. Als je dat niet weet, heeft schetsen misschien nog niet zo heel veel zin Let op: als je deze ebook uitgeprint leest, in zwart/wit, zijn een aantal kleurtjes in de illustraties op de volgende pagina waarschijnlijk slecht of niet zichtbaar!

16 Ik heb gekozen voor een relatief eenvoudige opzet: logo bovenin, daaronder een kader met primaire content (txt en beeld), daaronder twee ankeliers en een lijstje weeskinderen. Onderin zit uiteraard de footer. Dat is standaard. Mijn schets laat weinig te wensen over aan duidelijkheid. Ik heb uit het logo een achtergrondkleur gehaald en besloten daarmee de totale achtergrond van mijn website een beetje smoel te geven. Omdat ik niet wil dat die kleur te dominant wordt, heb ik besloten die kleur (van boven naar beneden) te laten verlopen naar wit. De volgende stap is een kleur voor het kader achter de primaire content. In dit geval besluit ik min of meer dezelfde tint te gebruiken als gebruikt wordt voor de totale achtergrond. Ik had ook juist voor een contrastkleur kunnen kiezen. gekleurde tekst moet gebruiken. Omdat er in dit kader ook tekst komt, realiseer ik me dat een donkere achtergrond als consequentie heeft dat ik een lichte in plaats van zwarte

17 Ik wil de ankeilers wat meer body geven en daarom kies ik op twee icons die iedereen begrijpt en een relatie hebben met mijn vak (boekhouder, weet je nog?): een ordner en een handshake. Die icons zet ik links bovenin de hoek en ik laat de tekst er omheen lopen zodat het een sluitend geheel wordt. Ik ben er bijna. Ik moet alleen nog beeld hebben om de primaire content te ondersteunen. Je weet wel, de foto in het kader. Ook dat haalde ik in dit geval overigens van sxc.hu. Maar in veel gevallen is dit de plek om jezelf in de schijnwerpers te zetten. Als je goed kijkt naar de schets hiernaast, zie je op de Post-it staan dat ik drie foto s selecteerde. Waarom? Om de primaire content nog meer body te geven, heb ik een dynamisch element toegevoegd: een beeld waarin verschillende foto s roteren. Zie hier het resultaat: Zoals je ziet wordt telkens een nieuwe foto ingeladen. Die functionaliteit zit standaard in het pakket waarmee je tijdens de workshop aan de slag gaat. Op welke plek je die rotator zet en hoe groot de foto s zijn, bepaal je straks helemaal zelf. Net als het aantal foto s en of er op die foto s tekst komt te staan. Het opent een wereld aan mogelijkheden. Oke, dat was de homepage. Nu de rest nog Een website bestaat uit meer dan alleen een homepage. Er zijn ook achterliggende pagina s. Ook voor die pagina s moet je (als ze afwijken van je homepage) een layout maken en de vormgeving bepalen. De werkwijze is gelijk aan die voor de homepage, maar er is (vaak) één groot verschil om rekening mee te houden.

18 HOMEPAGE VS ACHTERLIGGENDE WEBPAGES We blijven even bij de firma Veenema als voorbeeld. Bekend terrein, dus dat werkt lekker makkelijk. Wellicht heb je net toen je de website live bezocht op een paar links geklikt en kwam je terecht op achterliggende webpages. Hieronder zie je screenshots van twee van die webpages. Het enige verschil op deze twee pagina s is de content (het artikel, plus de kopregel). De rij onderin de vomgeving komt je (als het goed is) bekend voor. Die is bijna identiek als de rij ankeilers op de homepage. Alleen verhuisde de navigatie (de lijst met links naar de overige webpages) van rechts onderin naar rechts naast het artikel en in plaats daarvan creëerde ik een derde ankeiler. Op elke achterliggende webpage staat een artikel. Verder zijn die webpages EXACT HETZELFDE! Het logo, de achtergrond, de navigatie, de ankeilers onderin allemaal exact hetzelfde. Kortom: ik heb één lay-out bedacht/gemaakt en vormgegeven voor de homepage en ik heb één lay-out bedacht/gemaakt en vormgegeven voor alle achterliggende pagina s. Het grote verschil tussen de homepage en de achterliggende pagina s is dat er op de achterliggende pagina s ruimte is gecreëerd voor content; een artikel eventueel aangevuld met foto s of bijvoorbeeld video. Je bent overigens niet beperkt tot twee lay-outs. Het systeem kan er meer verwerken dan jij er kunt bedenken. Dus voel je wat dat betreft niet geremd. Er is echter wel een andere reden om het aantal lay-outs te beperken. Nou, twee eigenlijk. Ten eerste: je bezoekers kunnen best een beetje verandering aan, maar als elke webpage er totaal anders uitziet, oogt dat niet erg professioneel.

19 Ten tweede: elke lay-out zul je moeten bedenken, maken en optuigen tot een evenwichtig vormgegeven webpage. Daarom het advies: hou het (zeker in den beginne.) beperkt tot liefst twee, maximaal drie á vier verschillende lay-outs.

20 HOE POWERPOINT JE KAN HELPEN Enige bescheidenheid mijnerzijds is nu terecht. De tip hieronder komt namelijk niet van mij, maar van een deelnemer aan de workshop. Maar ik had m graag zelf verzonnen In een vorige hoofdstuk spoorde ik je aan je kleurpotloden te slijpen en zo aan de vormgeving van je website te knutselen. Dat werkt. Vormgeving begint altijd met krabbeltjes op een papiertje. Ik adviseer je die fase dan ook niet over te slaan. Zet een kop muntthee of trek een fles wijn open en ga aan het kliederen. Er komt echter een moment waarop je de schets graag meer body wilt geven. Daar is PowerPoint (als je daar een beetje mee overweg kunt) uitermate geschikt voor. Het voordeel van PowerPoint is dat je bijvoorbeeld achtergronden heel makkelijk van kleur kunt veranderen. Zo zie je razendsnel het gevolg en de impact op je gehele ontwerp. Hetzelfde geldt voor de omvang van een kopregel. Of van een kader. Alsof het er voor gemaakt is, heeft een standaard PowerPoint sheet ongeveer de breedte van een website. Gebruik dus het hele vlak en je hebt een aardig idee hoe je website er straks op het scherm komt uit te zien. Bedenk wel dat er links en rechts van je website een achtergrond zichtbaar is. Verlies je niet teveel in de details. Denk big picture. Details zijn van latere zorg. Ik kreeg deze handige tip toen de website voor bureau Veenema al klaar was. Had ik m eerder gehad, dan zou de schets in PowerPoint er ongeveer zo uitgezien hebben:

21 TOT SLOT Je bent op de laatste pagina van het WebsiteInEenMiddag startpakket gekomen. Hierna volgt alleen nog een lijstje actiepunten. Ik hoop dat je ideeën hebt opgedaan, geïnspireerd bent geraakt en dat je zin hebt in de workshop. Als je alle stappen hebt doorlopen, ben je optimaal voorbereid op de workshop. Niets staat je in de weg om straks een dijk van een website te bouwen. Mocht je je zorgen maken over de techniek: niet doen. Daar slepen we je tijdens de workshop wel doorheen. Maar hoe de navigatiestructuur in elkaar zit, welke content de bezoeker krijgt voorgeschoteld en hoe eea oogt, de uitstraling, daarvoor ben je grotendeels zelf verantwoordelijk. We helpen je waar we kunnen ook als het gaat om vormgeving maar dat kunnen we alleen als je weet wat je wilt. Kortom, maak die contentlijst, puzzel een uurtje op de primaire boodschap die je op de homepage zet, maak die schetsjes, ga op zoek naar beeldmateriaal. Je zult er straks tijdens de workshop ontzettend veel plezier van hebben en ik verzeker je dat je website er mooier, sterker en professioneler van wordt. Als je het prettig vindt dat ik voorafgaand aan de workshop met je meekijk in welke fase van de voorbereiding dan ook laat het me weten. Mail me je schetsen, je powerpoint of url s van de websites die je als inspiratie wilt gebruiken. En mail me vooral als je vast dreigt te lopen. Ik heb het al eerder gezegd: ik ben niet 24 uur per dag online, maar het scheelt niet veel. Doorgaans heb je binnen een paar uur antwoord. Meestal sneller, heel soms iets later. Ook in het weekend, ook s avonds. Aarzel niet. Mail of bel. We gaan samen een website bouwen. Je stoort nooit! Carl (tel: ) PS Trouwens, mocht je suggesties hebben om het Startpakket te verbeteren, dan hoor ik het graag. Mis je iets? Is er iets volslagen onduidelijk? Waar loop je vast?

22 Actie: Vorm een zo concreet mogelijk idee over de vormgeving van je website. Bepaal welke elementen je daarvoor nodig hebt en verzamel die zo veel mogelijk. Creëer een map op je computer waarin je alle elementen en bestanden opslaat (vergeet je logo niet!) Verklein grote grafische bestanden tot maximaal 960 pixels breed en sla die op onder een aparte naam waardoor het bestand ook in het originele formaat behouden blijft. Maak schetsen op papier en zet die als het even kan om in PowerPoint.

Copyright WebsiteInEenMiddag.nl 2011 Disclaimer

Copyright WebsiteInEenMiddag.nl 2011 Disclaimer Copyright WebsiteInEenMiddag.nl 2011 Op de inhoud en vormgeving van dit document rust, ongeacht de drager of de vorm waarin het werd verspreid, auteursrecht. Dit document werd geproduceerd en verspreid

Nadere informatie

Copyright WebsiteInEenMiddag.nl 2011 Disclaimer

Copyright WebsiteInEenMiddag.nl 2011 Disclaimer Copyright WebsiteInEenMiddag.nl 2011 Op de inhoud en vormgeving van dit document rust, ongeacht de drager of de vorm waarin het werd verspreid, auteursrecht. Dit document werd geproduceerd en verspreid

Nadere informatie

Lesbrief voor leerlingen: hoe ontwerp je een omslag voor een boek

Lesbrief voor leerlingen: hoe ontwerp je een omslag voor een boek Lesbrief voor leerlingen: hoe ontwerp je een omslag voor een boek KIEZEN Een goed begin is het kiezen van het juiste boek. Er zijn zo veel mooie verhalen waardoor het soms lastig is om een goede keuze

Nadere informatie

Handleiding Op Maat Wizard.

Handleiding Op Maat Wizard. Handleiding Op Maat Wizard. Met de Op Maat Wizard kun je zelf vullingen maken voor de verschillende werkvormen in het Op Maat programma. Wanneer je de software (Speler en Wizard) niet in je bezit hebt,

Nadere informatie

TIPS EN TRUCS KNOPPEN MAKEN GEBRUIKERS HANDLEIDING

TIPS EN TRUCS KNOPPEN MAKEN GEBRUIKERS HANDLEIDING TIPS EN TRUCS KNOPPEN MAKEN GEBRUIKERS HANDLEIDING 2008-2010 2Com2 internet & communicatie 2Com2 heeft deze informatie met zorg samengesteld om u als gebruiker zo goed mogelijk te ondersteunen. 2Com2 accepteert

Nadere informatie

Hoe moet je een prachtige presentatie maken?

Hoe moet je een prachtige presentatie maken? Hoe moet je een prachtige presentatie maken? www.meestermichael.nl Geef de presentatie een titel. Klik dit vak aan om jouw presentatie een ondertitel te geven. Hier kun je je presentatie een titel geven

Nadere informatie

~ 1 ~ 1: ga naar: http://fotoalbum.hema.nl/

~ 1 ~ 1: ga naar: http://fotoalbum.hema.nl/ Workshop album maken Maart 2013 Leonie Groosman 1: ga naar: http://fotoalbum.hema.nl/ 2 : rechts staat: download de software in oranje: begin direct klik er komt een nieuw scherm met 3 mogelijkheden een

Nadere informatie

Inloggen: Opbouw site: Een handleiding/introductie voor de nieuwe site van Fotoclub VPR.

Inloggen: Opbouw site: Een handleiding/introductie voor de nieuwe site van Fotoclub VPR. Een handleiding/introductie voor de nieuwe site van Fotoclub VPR. Inloggen: Als je de site opent dan zie je o.a. bovenstaande afbeelding met het logo van de club en het menu. Om in te loggen klik je helemaal

Nadere informatie

Stap 4 - Plaats zelf foto's in je website

Stap 4 - Plaats zelf foto's in je website Stap 4 - Plaats zelf foto's in je website Waarschijnlijk zul je ook wel een digitale fotocamera hebben. En daarmee maak je tegenwoordig de prachtigste foto s. En die hebben vaak een gigantisch hoge resolutie

Nadere informatie

Beter omgaan met YouTube: 5 Tips om jouw YouTube kanaal scherp in beeld te krijgen!

Beter omgaan met YouTube: 5 Tips om jouw YouTube kanaal scherp in beeld te krijgen! Beter omgaan met YouTube: 5 Tips om jouw YouTube kanaal scherp in beeld te krijgen! Inleiding Je kan er simpelweg niet meer omheen. Zodra je een zoekopdracht uitvoert op Google, verschijnen er video thumbnails

Nadere informatie

Handleiding teksteditor

Handleiding teksteditor In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.

Nadere informatie

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond Frontpage Express is het meest eenvoudige programma voor het maken van je homepage. Is het programma niet geïnstalleerd op je PC, dan is het te downloaden en daarna te installeren. We zullen nu een aantal

Nadere informatie

IN 7 STAPPEN NAAR EEN PROFESSIONEEL LINKEDIN PROFIEL

IN 7 STAPPEN NAAR EEN PROFESSIONEEL LINKEDIN PROFIEL IN 7 STAPPEN NAAR EEN PROFESSIONEEL LINKEDIN PROFIEL In 7 stappen naar een professioneel LinkedIn profiel! Om je positie op de (arbeids)markt te behouden en te versterken is online zichtbaarheid erg belangrijk.

Nadere informatie

Fast Stone. FastStone Image Viewer

Fast Stone. FastStone Image Viewer Fast Stone FastStone Image Viewer FastStone Image Viewer is een zeer gebruikersvriendelijk en overzichtelijk programma om foto's te bekijken, beheren en snel te bewerken. Een van de beste programma's in

Nadere informatie

Handleiding website Pax Christi

Handleiding website Pax Christi Handleiding website Pax Christi deel II Inhoudstafel 1. Invoegen van afbeeldingen... 1 1.1 Wat is een digitale afbeelding?...1 1.2 Het invoegen van een digitale afbeelding in een bericht... 2 2. Posten

Nadere informatie

Tips; fotoboek maken (bron: hema.nl)

Tips; fotoboek maken (bron: hema.nl) Tips; fotoboek maken (bron: hema.nl) tekst roteren Draai je tekst zodat het mooi onder of op je scheef geplaatste foto staat. Of maak zelf leuke labels in combinatie met clipart. 1. kies de clipart (bij

Nadere informatie

Stap 3 Wat kunnen we met de inhoud?

Stap 3 Wat kunnen we met de inhoud? Stap 3 Wat kunnen we met de inhoud? We gaan in deze stap eens bestuderen wat we zoal voor mogelijkheden hebben om tekst op te maken en links in te voegen. Kompozer heeft voor de meest voorkomende zaken

Nadere informatie

Hallo, wij willen je graag voorstellen. aan je nieuwe website:

Hallo, wij willen je graag voorstellen. aan je nieuwe website: Hallo, wij willen je graag voorstellen aan je nieuwe website: Vanwege de op handen zijnde veranderingen in de geestelijke gezondheidszorg, willen wij je een handje helpen met je bereikbaarheid, uitstraling

Nadere informatie

Zo ondersteun je jouw business met Facebook

Zo ondersteun je jouw business met Facebook Zo ondersteun je jouw business met Facebook Een goed begin is het halve resultaat! Graag willen wij je laten profiteren van enkele eenvoudige stappen die je kunt zetten, zodat jouw activiteiten op Facebook

Nadere informatie

Opstart document 8 FEBRUARI v1.24

Opstart document 8 FEBRUARI v1.24 Opstart document 8 FEBRUARI v1.24 pagina 1 Welkom In dit document vind je stap voor stap instructie hoe je jouw eigen site kunt indelen, wat je moet verzamelen en natuurlijk hoe je uiteindelijk zelf jouw

Nadere informatie

2 Kennismaking met het scherm

2 Kennismaking met het scherm 84 1 Inleiding Met Microsoft Office Picture Manager kan je op een eenvoudige manier jouw afbeeldingen bekijken, beheren, bewerken en delen. Paint kan je openen via Starten - Alle Programma s - Microsoft

Nadere informatie

Handleiding Joomla 3.x

Handleiding Joomla 3.x Handleiding Joomla 3.x Hoe maak ik een call to action button? Geschreven: Sandra van der Heijden (2015) AdviesMies Introductie Het wordt regelmatig geroepen. Je hebt call to action buttons nodig op je

Nadere informatie

P O W E R P O I N T - onderdeel van Microsoft Office 2000 pakket (nl) De Windows versies van Powerpoint kunnen onderling afwijken

P O W E R P O I N T - onderdeel van Microsoft Office 2000 pakket (nl) De Windows versies van Powerpoint kunnen onderling afwijken P O W E R P O I N T - onderdeel van Microsoft Office 000 pakket (nl) De Windows versies van Powerpoint kunnen onderling afwijken DEEL I De zes basisstappen Met het programma Powerpoint kun je zelf een

Nadere informatie

1. Foto/Beeld invoegen in de zijvakken

1. Foto/Beeld invoegen in de zijvakken Op het blog SeniorenNet Blogs Tips en Trucs vind je in de linkerkolom verschillende mogelijkheden voor Aanmaken van een Internetadres (URL) en Foto s Verkleinen met uitleg, klik op onderstaande link. http://blog.seniorennet.be/seniorennet_blogs_tips_trucs

Nadere informatie

design ook items uitsnijden

design ook items uitsnijden (fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het

Nadere informatie

Gevorderd Geld Verdienen Met Internet

Gevorderd Geld Verdienen Met Internet Gevorderd Geld Verdienen Met Internet Zonder enige kosten/moeilijkheden Copyright 2009: "Niets uit deze uitgave mag worden gekopieerd/aangepast zonder toestemming van de auteur. 1 Hee! Bedankt dat je mijn

Nadere informatie

Basisbegrippen i.v.m. kleur op beeldschermen, afbeeldingsformaten en resoluties

Basisbegrippen i.v.m. kleur op beeldschermen, afbeeldingsformaten en resoluties Basisbegrippen i.v.m. kleur op beeldschermen, afbeeldingsformaten en resoluties Kleurdiepte De hoeveelheid kleurinformatie die een pixel op een beeldscherm kan bevatten wordt bepaald door de bitdiepte.

Nadere informatie

Comic Life: Maak een fotostrip in de klas

Comic Life: Maak een fotostrip in de klas Comic Life: Maak een fotostrip in de klas Wat ga je doen? Je gaat een fotostrip maken met het programma Comic Life. Hiermee kun je gemakkelijk je eigen verhaal construeren. In het programma kun je per

Nadere informatie

Welkom! Fijn dat je er bent.

Welkom! Fijn dat je er bent. Welkom! Fijn dat je er bent. Blurbs nieuwe tool voor het maken van boeken, BookWright, werd ontworpen om zo intuïtief mogelijk te zijn. Maar iedereen is uniek. En iedereen kan wel wat begeleiding gebruiken.

Nadere informatie

Handleiding Mijneigenweb.nl

Handleiding Mijneigenweb.nl Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen

Nadere informatie

I. Vorming 1 (12/04/2012) 1. Werken met een tekstverwerker p2 2. Mappenstructuur op een computer p6 3. Externe USB- stick gebruiken p10

I. Vorming 1 (12/04/2012) 1. Werken met een tekstverwerker p2 2. Mappenstructuur op een computer p6 3. Externe USB- stick gebruiken p10 INHOUDSTAFEL De inhoudstafel blijft in eerste instantie nog beperkt. Deze zal gestaag aangroeien en zal pas compleet zijn na de laatste vormingssessie. Het doel is om in de eerste sessie, samen met de

Nadere informatie

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te

Nadere informatie

Verkorte handleiding voor het verkleinen van digitale foto s t.b.v. MS-powerpoint-presentaties. Blad 1 van 6 - Auteur: Sjoerdt

Verkorte handleiding voor het verkleinen van digitale foto s t.b.v. MS-powerpoint-presentaties. Blad 1 van 6 - Auteur: Sjoerdt Blad 1 van 6 - Auteur: Sjoerdt Dit verhaal is toegespitst op gebruikers van de besturingssystemen MS-XP en MS-Vista. Ik ga ervan uit dat gebruikers van software op systemen als OS/2 en Linux voldoende

Nadere informatie

ICT Publisher 2002 1

ICT Publisher 2002 1 ICT Publisher 2002 1 Werken met Publisher 2002 1. Het maken van een eenvoudige publicatie in Publisher Inhoud Wat gaat er gebeuren? Waarom ga ik het doen? Wat wordt het resultaat? Oefeningen en werkwijzen

Nadere informatie

Informatieopslag van websites

Informatieopslag van websites Informatieopslag van websites Inleiding Tijdens je project raadpleeg je veel websites. Vaak is het lastig om achteraf te achterhalen wat het adres en bijbehorende inhoud van de desbetreffende pagina was.

Nadere informatie

Microsoft PowerPoint Basics Hoe maak je een presentatie in Microsoft PowerPoint 2010? Handleiding voor kinderen

Microsoft PowerPoint Basics Hoe maak je een presentatie in Microsoft PowerPoint 2010? Handleiding voor kinderen Als je weet wat er komt, wat inhoud betreft, kijken bij maken van een spreekbeurt, kunnen we praten over jouw PowerPoint presentatie. Je hebt in de klas de basis handelingen op de computer al geleerd zoals:

Nadere informatie

11. Na een aantal keren selecteren en op de delete knop drukken ziet mijn egel er nu zo uit:

11. Na een aantal keren selecteren en op de delete knop drukken ziet mijn egel er nu zo uit: Open Paint.Net 1. Klik op "Bestand" 2. Klik op "Openen " 3. Zoek de afbeelding "eend" op en open hem. 4. Herhaal de stappen 1 tot en met 3 maar open nu de afbeelding "egel". 5. Je hebt nu beide afbeeldingen

Nadere informatie

Tips & trucs banners maken voor je webshop

Tips & trucs banners maken voor je webshop 9-9-2014 15:53:00 Tips & trucs banners maken voor je webshop v1.01 Alicia van Moorsel Inhoudsopgave Pagina 1: - Wat is een header? - Sfeer - Aanbieding/nieuw product - Maar maak ik goede converterende

Nadere informatie

Handleiding CMS EWall

Handleiding CMS EWall Handleiding CMS EWall Inhoud: 1. Inleiding 2 2. Hoe log ik in op mijn EWall account? 3 3. Werken in groepen 4 4. Hoe plaats ik tekst achter een tegel? 5 5. Hoe plaats ik een foto achter een tegel? 6 6.

Nadere informatie

Handleiding voor het maken van je eigen webpagina op de schoolsite

Handleiding voor het maken van je eigen webpagina op de schoolsite Waar gaat dit over? Handleiding voor het maken van je eigen webpagina op de schoolsite Hier leer je hoe je een eigen webpagina kunt maken op de site van de school. Op deze webpagina kun je vertellen wie

Nadere informatie

Als eerste bedankt voor het aanschaffen van deze PDF waarin ik je handige tips en trucs zal geven over het schrijven van een handleiding.

Als eerste bedankt voor het aanschaffen van deze PDF waarin ik je handige tips en trucs zal geven over het schrijven van een handleiding. Bedankt! Als eerste bedankt voor het aanschaffen van deze PDF waarin ik je handige tips en trucs zal geven over het schrijven van een handleiding. Graag zou ik je willen vragen mij een email te sturen

Nadere informatie

H.A.N.G. PLEKKEN. Heel Aardig? Niet Geweldig! > OP BEZOEK BIJ HET NAI

H.A.N.G. PLEKKEN. Heel Aardig? Niet Geweldig! > OP BEZOEK BIJ HET NAI H.A.N.G. PLEKKEN Heel Aardig? Niet Geweldig! > OP BEZOEK BIJ HET NAI Binnenkort ga je met je klas op bezoek bij het Nederlands Architectuur instituut (NAi). Daar zal je het programma H.A.N.G. plekken volgen.

Nadere informatie

De Kortste SEO Gids Ooit

De Kortste SEO Gids Ooit De Kortste SEO Gids Ooit Door Carl Weenink carl@hogerranken.nl www.hogerranken.nl Copyright HogerRanken.nl 2009 Op de inhoud en vormgeving van De Kortste SEO Gids Ooit, ongeacht de drager, rust auteursrecht.

Nadere informatie

Onderdeel: Opdracht Uitleg + Opdracht

Onderdeel: Opdracht Uitleg + Opdracht Programma: HTML / Website Onderdeel: Opdracht Uitleg + Opdracht Inhoudsopgave Een website bouwen... pag. 2 Opdracht... pag. 2 Opslaan van het werk... pag. 2 Aan het werk.... pag. 3 Speciale knoppen...

Nadere informatie

Whitepaper. E-mail design best practices

Whitepaper. E-mail design best practices Whitepaper E-mail design best practices 14 tips voor het design van je e-mail Versterk de boodschap van je uiting Best practices voor je e-mail design Het design speelt een grote rol in de eerste indruk

Nadere informatie

Stap 1 Je eigen website maken... 1. Stap 2 Je template invullen... 9. Stap 3 Wat kunnen we met de inhoud?... 19

Stap 1 Je eigen website maken... 1. Stap 2 Je template invullen... 9. Stap 3 Wat kunnen we met de inhoud?... 19 INHOUDSOPGAVE Inhoudsopgave Stap 1 Je eigen website maken... 1 De eerste stap... 1 Kompozer downloaden... 1 Kompozer openen... 1 Een nieuwe pagina beginnen... 1 Je eerste tekst schrijven... 2 Je eerste

Nadere informatie

Deel 1: PowerPoint Basis

Deel 1: PowerPoint Basis Deel 1: PowerPoint Basis De mogelijkheden van PowerPoint als ondersteunend middel voor een gedifferentieerde begeleiding van leerlingen met beperkingen. CNO Universiteit Antwerpen 1 Deel 1 PowerPoint Basis

Nadere informatie

MS PowerPoint Les 2. Wanneer we niet te veel tijd willen steken in de opmaak van onze presentatie, kunnen we gebruik maken van sjablonen.

MS PowerPoint Les 2. Wanneer we niet te veel tijd willen steken in de opmaak van onze presentatie, kunnen we gebruik maken van sjablonen. MS PowerPoint Les 2 Sjablonen (Templates) Wanneer we niet te veel tijd willen steken in de opmaak van onze presentatie, kunnen we gebruik maken van sjablonen. In PowerPoint beschikken we over honderden

Nadere informatie

Linda Thuijs-Koopmans - LinnenArt, huisstijl en logo ontwerp - www.linnenart.nl

Linda Thuijs-Koopmans - LinnenArt, huisstijl en logo ontwerp - www.linnenart.nl Linda Thuijs-Koopmans - LinnenArt, huisstijl en logo ontwerp - www.linnenart.nl Handleiding Gmail in huisstijl met een automatische e-mail handtekening.. Als je je drukwerk, online profielen en alle visuele

Nadere informatie

Bedrijfspagina op Facebook. Hoe maak je een bedrijfspagina op Facebook?

Bedrijfspagina op Facebook. Hoe maak je een bedrijfspagina op Facebook? Bedrijfspagina op Facebook Hoe maak je een bedrijfspagina op Facebook? Inleiding In deze whitepaper lees je hoe je een bedrijfspagina aanmaakt op Facebook. Stap voor stap laten we je zien wat je moet doen.

Nadere informatie

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind

Nadere informatie

Vaardigheden - Internet HV 1. CC Naamsvermelding-GelijkDelen 3.0 Nederland licentie. http://maken.wikiwijs.nl/52517

Vaardigheden - Internet HV 1. CC Naamsvermelding-GelijkDelen 3.0 Nederland licentie. http://maken.wikiwijs.nl/52517 Vaardigheden - Internet HV 1 Auteur VO-content Laatst gewijzigd Licentie Webadres 21 July 2015 CC Naamsvermelding-GelijkDelen 3.0 Nederland licentie http://maken.wikiwijs.nl/52517 Dit lesmateriaal is gemaakt

Nadere informatie

GLOBAL: workshop webdesign

GLOBAL: workshop webdesign Dit werkblad is van: klas: GLOBAL: workshop webdesign Ontwerp en maak je eigen website met zelfgemaakte foto s, teksten, links en buttons! Geen onderwerp zo gek, of er is wel een website over gemaakt:

Nadere informatie

HANDLEIDING Windows XP Deel 1

HANDLEIDING Windows XP Deel 1 HANDLEIDING Windows XP Deel 1 Bureaublad en Beeldscherm aanpassen Gemaakt door: De Spanjehelpdesk http://www.spanjehelpdesk.nl Voorwoord Windows XP is het besturingssyteem van uw PC. Het besturingssysteem

Nadere informatie

WEBSITE USABILITY. white-paper

WEBSITE USABILITY. white-paper WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te

Nadere informatie

illustrator Alleen een hands- on.. LESBRIEVEN

illustrator Alleen een hands- on.. LESBRIEVEN illustrator LESBRIEVEN HANDS- ON: OPDRACHTEN: SITE MET ALLE OEFENINGEN VOORKENNIS: PLAATSEN WEBINHOUD GEBRUIK FLASH Adobe illustrator Hét pakket uit de Adobe- suite om vector- a?eeldingen mee te bewerken

Nadere informatie

Winkelparade.nl. De krant voor winkelen in Nederland. Handleiding Winkelparade Parade Basis

Winkelparade.nl. De krant voor winkelen in Nederland. Handleiding Winkelparade Parade Basis Winkelparade.nl De krant voor winkelen in Nederland Handleiding Winkelparade Parade Basis Inhoudsopgave Inloggen...3 Het hoofdmenu...4 Mijn zoekwoorden invoeren of wijzigen... 5 Een nieuw nieuwsbericht

Nadere informatie

File: M.Peters / Powerpoint 1

File: M.Peters / Powerpoint 1 PowerPoint 2003. File: M.Peters / Powerpoint 1 Een PowerPoint presentatie maken. Met behulp van een diapresentatie kun je een groep mensen informatie geven over een bepaald onderwerp of product. Een voorbeeld:

Nadere informatie

ailexpert Tips & Tricks Email design

ailexpert Tips & Tricks Email design ailexpert Tips & Tricks Email design 1 Inleiding E-mail marketing is een vorm van direct marketing waarmee een bedrijf in contact kan komen te staan met haar klanten. De markt van E-mail marketing is de

Nadere informatie

CMS Made Simple voor gevorderden

CMS Made Simple voor gevorderden CMS Made Simple voor gevorderden Workshop 2 2 e lesavond Afbeeldingbeheer Wijzigen van afbeeldingen; formaat aanpassen, uitsnijden en bewerking in CMS Made Simple zelf. Nadenken over opslag en beheer voor

Nadere informatie

E.M. van Nieuwaal. Frontpage 2003. Jouw vak op het leerlingenweb. Copyright 2008. http://cursus.anguillanova.nl

E.M. van Nieuwaal. Frontpage 2003. Jouw vak op het leerlingenweb. Copyright 2008. http://cursus.anguillanova.nl Frontpage 2003 Jouw vak op het leerlingenweb E.M. van Nieuwaal Copyright 2008 http://cursus.anguillanova.nl Inleiding... 3 1. Ontwerp een sitemap... 4 2. Index.htm... 4 3. Nieuwe pagina s maken... 7 4.

Nadere informatie

Bijlage bij Getting Started Guide International English Edition

Bijlage bij Getting Started Guide International English Edition Bijlage bij Getting Started Guide International English Edition Chapter 3: Aan de slag met Inspiration, een beginnersles Deze beginnersles is een goed startpunt voor het leren gebruiken van Inspiration.

Nadere informatie

Maak een vormgeving (geschikt voor meerdere devices), met een duidelijke huisstijl en visual, die aansluit bij jouw doelgroep, waarbij je rekening

Maak een vormgeving (geschikt voor meerdere devices), met een duidelijke huisstijl en visual, die aansluit bij jouw doelgroep, waarbij je rekening Maak een vormgeving (geschikt voor meerdere devices), met een duidelijke huisstijl en visual, die aansluit bij jouw doelgroep, waarbij je rekening houdt met verschillende behoeftes binnen je doelgroep.

Nadere informatie

Stap 2 Je template invullen

Stap 2 Je template invullen Stap 2 Je template invullen Allereerst in stap 2 gaan we onze template ophalen. Die staat op www.alphamegahosting.com/516, ook de uitleg is daar te vinden. Je kunt hem vanaf daar downloaden en op je bureaublad

Nadere informatie

Handleiding Nieuwe versie Wikiwijs Maken. Overzicht van veranderingen en nieuwe functionaliteiten

Handleiding Nieuwe versie Wikiwijs Maken. Overzicht van veranderingen en nieuwe functionaliteiten Handleiding Nieuwe versie Wikiwijs Maken Overzicht van veranderingen en nieuwe functionaliteiten Datum: 3 juni 2013 Wat is er nieuw? Op 3 juni 2013 is er een nieuwe versie van Wikiwijs Maken beschikbaar.

Nadere informatie

Handleiding Concrete5 website. Outbound Media

Handleiding Concrete5 website. Outbound Media Handleiding Concrete5 website Outbound Media In deze handleiding behandelen we de basis benodigdheden om uw website up-to-date te kunnen houden. We behandelen: Inloggen editen (bewerken) van tekst een

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Handleiding bij de workshop Animatie in Microsoft PowerPoint Hoe maak je een animatie in Microsoft PowerPoint 2010? Handleiding voor kinderen

Handleiding bij de workshop Animatie in Microsoft PowerPoint Hoe maak je een animatie in Microsoft PowerPoint 2010? Handleiding voor kinderen Vorige keer hebben wij gesproken over het maken van een PowerPoint presentatie. Deze keer beginnen wij met de herhaling van de basis handelingen op de computer zoals: iets op je scherm aanwijzen iets op

Nadere informatie

Een website omzetten naar WordPress

Een website omzetten naar WordPress 1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt

Nadere informatie

Handleiding om uw website/webshop aan te passen

Handleiding om uw website/webshop aan te passen Handleiding om uw website/webshop aan te passen ONDERWERP PAGINA 1. Hoe moet ik inloggen in het beheer? 2 2. Hoe pas ik een bestaande pagina aan? 2 3. Hoe plaats ik een afbeelding? 3 4. Hoe maak ik een

Nadere informatie

Afdrukken in Calc Module 7

Afdrukken in Calc Module 7 7. Afdrukken in Calc In deze module leert u een aantal opties die u kunt toepassen bij het afdrukken van Calc-bestanden. Achtereenvolgens worden behandeld: Afdrukken van werkbladen Marges Gedeeltelijk

Nadere informatie

Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline

Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline Werken met de website basisonline Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline - login met de verkregen inlognaam en wachtwoord - je inlognaam is jouw emailadres

Nadere informatie

Photohands. Retouche-/Afdruksoftware voor Windows. Handleiding. Versie 1.0 K862PSM8DMX

Photohands. Retouche-/Afdruksoftware voor Windows. Handleiding. Versie 1.0 K862PSM8DMX D Photohands Versie 1.0 Retouche-/Afdruksoftware voor Windows Handleiding K862PSM8DMX Windows is een handelsmerk van Microsoft Corporation. Andere namen van bedrijven en producten zijn in voorkomende gevallen

Nadere informatie

De onderwerpen die voor deze avond zijn aangedragen! Maskers maken. Workflow Lightroom en Photoshop. Verschil tussen werken in RGB en srgb

De onderwerpen die voor deze avond zijn aangedragen! Maskers maken. Workflow Lightroom en Photoshop. Verschil tussen werken in RGB en srgb De onderwerpen die voor deze avond zijn aangedragen! Maskers maken Workflow Lightroom en Photoshop Verschil tussen werken in RGB en srgb Werken in 16 of 8 bits Verschil tussen RAW opslaan als PSD of TIF

Nadere informatie

Werkschrift : Hoe werk ik op WikiKids?

Werkschrift : Hoe werk ik op WikiKids? Werkschrift : Hoe werk ik op WikiKids? WERKBOEK WIKIKIDS Welkom bij het werkboek van WikiKids. In dit werkboek staan opdrachten waarmee je stap voor stap leert werken met WikiKids. Er staan 15 opdrachten

Nadere informatie

Handleiding online Factsheetmodule

Handleiding online Factsheetmodule Handleiding online Factsheetmodule Sportvissers hebben eigenlijk maar twee dingen nodig: goed viswater en een goede visstand. De zorg voor goed viswater met een goede visstand is dan ook de belangrijkste

Nadere informatie

8.13 Windows Hulp op afstand

8.13 Windows Hulp op afstand 1 8.13 Windows Hulp op afstand Misschien heeft u een probleem dat u zelf niet kunt oplossen, maar is één van uw (klein)kinderen of kennissen erg handig met computers. Dan kunt u natuurlijk telefonisch

Nadere informatie

CURSUS DIGITAL STAMPING

CURSUS DIGITAL STAMPING INTRO Hierbij van onze gratis cursus Digital Stamping, we hebben hierin geprobeerd om het digitaal stempelen zo duidelijk mogelijk uit te leggen. Stap-voor-stap gaan we door de cursus heen, waarbij we

Nadere informatie

1. Kennismaken met Impress

1. Kennismaken met Impress 1. Kennismaken met Impress In deze module leert u: 1 Wat Impress is; 2 Impress starten; 3 Een nieuwe presentatie maken; 4 Instellingen van Impress wijzigen; 5 Opslaan en openen. 1 Wat is Impress? OpenOffice.org

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Trek een kaartje met: 1. Doel 2. Doelgroep 3. Onderwerp (dit is een globaal onderwerp en moet door jezelf nader worden bepaald)

Trek een kaartje met: 1. Doel 2. Doelgroep 3. Onderwerp (dit is een globaal onderwerp en moet door jezelf nader worden bepaald) Opdracht: Maak een vormgeving (geschikt voor meerdere devices), met een duidelijke huisstijl en visual, die aansluit bij jouw doelgroep, waarbij je rekening houdt met verschillende behoeftes binnen je

Nadere informatie

Email Marketing CHECKLIST

Email Marketing CHECKLIST Email Marketing CHECKLIST Auteur: Copyright 2011, Alle rechten voorbehouden www.emailmarketingexpert.nl 1 Inhoudsopgave Voorwoord...3 Mogelijkheden van Email marketing...4 Dé Checklist...5 Klaar?!...7

Nadere informatie

Handleiding ZKM Online. Versie 2.1

Handleiding ZKM Online. Versie 2.1 Handleiding ZKM Online Versie 2.1 Februari 2015 Inhoudsopgave 1. Inloggen... 3 1.1 Eerste keer dat je inlogt... 3 1.1.1 Profiel... 4 1.1.2. Wachtwoord (wijzigen)... 4 1.1.3. Bureau... 5 1.1.4. Consultants

Nadere informatie

Downloaden beveiligingscertificaat BRON Voor Windows versies vanaf Windows Vista

Downloaden beveiligingscertificaat BRON Voor Windows versies vanaf Windows Vista BRON Voor Windows versies vanaf Windows Vista DUO 137a/Versie 0.6 26 juni 2014 Inhoud 1. INLEIDING 3 2. VOORBEREIDING 4 3. DOWNLOADEN VAN HET BEVEILIGINGSCERTIFICAAT 5 3.1 TOEVOEGEN WEBSITE IB-GROEP.NL

Nadere informatie

ActiveBuilder Handleiding

ActiveBuilder Handleiding ActiveBuilder Handleiding Auteur: TalkActive I/S Datum: Juli 2004 Versie: R. 1.01 Taal: Nederlands Copyright 2004 - Talk Active alle rechten voorbehouden. Inhoud: 1. INTRODUCTIE...2 2. SNEL STARTEN...3

Nadere informatie

Basiscursus PE DESIGN deel 1

Basiscursus PE DESIGN deel 1 Basiscursus PE DESIGN deel 1 Caroline van Langeveld www.cvanlangeveld.nl Deze omschrijving is bruikbaar voor alle versies van PE Design, de verschillen tussen de versies zijn voornamelijk te vinden vanaf

Nadere informatie

Bouw snel en eenvoudig een eigen mobile Virtual Reality app

Bouw snel en eenvoudig een eigen mobile Virtual Reality app Bouw snel en eenvoudig een eigen mobile Virtual Reality app Deze handleiding is opgesplitst in twee delen. Deel 1: Hoe gebruik je het Smart2VR CMS? Deel 2: Hoe gebruik je de Virtual Reality app? Deel 1:

Nadere informatie

Fotobewerking en beheer

Fotobewerking en beheer Fotobewerking en beheer Met behulp van: PhotoFiltre & Picasa 3 Naam: Klas: Datum: Inhoudsopgave Fotobewerking 3 Inleiding 3 PhotoFiltre 4 Wat is PhotoFiltre? 4 Wat gaan wij vandaag leren met PhotoFiltre?

Nadere informatie

Handleiding bij de Booktest Generator

Handleiding bij de Booktest Generator Handleiding bij de Booktest Generator Het programma voor het maken van toetsen bij boeken. (c) 2005/2009 Visiria Uitgeversmaatschappij Twisk Inleiding Onze dank voor het aanvragen van de Booktest Generator.

Nadere informatie

Handicom. Symbol for Windows. Image Manager. (Versie 4) Handicom, 2011, Nederland

Handicom. Symbol for Windows. Image Manager. (Versie 4) Handicom, 2011, Nederland Handicom Symbol for Windows Image Manager (Versie 4) Handicom, 2011, Nederland Inhoud Inleiding... 2 1. Image Manager hoofdscherm...3 1.1 Onderdelen van het venster...3 1.2 Het scherm veranderen...3 1.2.1

Nadere informatie

De Kleine WordPress Handleiding

De Kleine WordPress Handleiding Introductie Dit is geen uitgebreide handleiding om een WordPress website of blog mee te bouwen. Het is ook geen overzicht van alle aspecten die een WordPress website zo bijzonder maken en geen verhandeling

Nadere informatie

Lijnen/randen en passe-partouts maken met Photoshop.

Lijnen/randen en passe-partouts maken met Photoshop. Lijnen/randen en passe-partouts maken met Photoshop. Les 1: Witte rand om de foto m.b.v. canvasgrootte. 1. Open de foto in Photoshop. 2. Klik in menu AFBEELDING op CANVASGROOTTE 3. Zorg dat in het vakje

Nadere informatie

Bijlage bij Kidspiration Getting Started Guide International English Edition Version 3

Bijlage bij Kidspiration Getting Started Guide International English Edition Version 3 Bijlage bij Kidspiration Getting Started Guide International English Edition Version 3 Hoofdstuk 3: Het leren gebruiken van Kidspiration In deze vier Kidspiration lessen leert u het Kidspiration BreinKaart

Nadere informatie

Design Theorie voor 3-ICT Vormen en Afmetingen

Design Theorie voor 3-ICT Vormen en Afmetingen Design Theorie voor 3-ICT Vormen en Afmetingen Als je een ontwerp gaat maken moet je in de eerste plaats met twee dingen rekening houden: de vorm van je ontwerp (bijvoorbeeld: vierkant, langwerpig, rond,

Nadere informatie

Een spreekbeurt houden

Een spreekbeurt houden Een spreekbeurt houden Kies je onderwerp Je kiest natuurlijk een onderwerp waar je veel belangstelling voor hebt. Misschien weet je er al veel van, of je wilt dat nu juist gaan onderzoeken! Ga vervolgens

Nadere informatie

Bewerk uw eigen Digibordbij boek

Bewerk uw eigen Digibordbij boek Bewerk uw eigen Digibordbij boek Naast de presentatie van schoolboeken in het Digibordbij systeem is het voor leraren ook mogelijk aanpassingen te maken in de digitale boeken. De leraar kan via een aparte

Nadere informatie

Ontwerpdocument BVA app Ontwerpdocument BVA app

Ontwerpdocument BVA app Ontwerpdocument BVA app 1 Inhoudsopgave Inleiding Geinterviewde persoon 1e Ontwerp - Zoeksuggesties Probleem Oplossing 2e Ontwerp - Lijst van producten in Kavel Probleem Oplossing 3e Ontwerp - Opslaan knop Probleem Oplossing

Nadere informatie

Informatie gebruik Digi Bord

Informatie gebruik Digi Bord Informatie gebruik Digi Bord Aan de slag Schakel de pc en de beamer aan en het bord is te gebruiken. Het bord hoeft u niet apart aan te zetten. De pen is nu alleen te gebruiken als muis. Beamer De beamer

Nadere informatie

Cursus Onderwijs en ICT. online (samen)werken

Cursus Onderwijs en ICT. online (samen)werken Cursus Onderwijs en ICT Jaargang 1, deel 4 (versie 1.0 po/vo/bve NL 11-11-2009) online (samen)werken door Serge de Beer Inleiding Op de tijdslijn van de geschiedenis is het nog niet zo heel lang geleden,

Nadere informatie