DESIGN & WEB THEORIE

Transcriptie

1 DESIGN & WEB THEORIE Hoofdstuk 1: Vorm en Afmeting 1.1 Uitgangspunt voor elk onderwerp Als je een ontwerp gaat maken moet je in de eerste plaats met twee dingen rekening houden: 1. De vorm van je ontwerp, dus vierkant, langwerpig, rond, zeshoek etc. 2. De afmeting, dus hoe groot het wordt. 1.2 Zijn Vorm en Afmeting al vastgesteld? Hoe de opmaak moet worden, is vaak van tevoren al bekend. Denk maar aan een envelop: het adres moet op de goede plek staan en je kan 'm langs de boven- of zijkant dichtvouwen. TNT post wordt er niet blij van als je een envelop ontwerpt waarbij het adres op de achterkant moet staan! Als je iets ontwerpt dat geprint moet worden is het handig om de papierformaten te kennen. Deze zijn overal ter wereld bekend, bestudeer de afbeelding met A0 t/m A8. Als je goed kijkt, zie je dat A4 hetzelfde is als 2x een A3-tje. Een A5 is een half A4-tje, etc. We rekenen altijd in mm.

2 1.3 Printen Waarmee ga je het straks printen en waarop? Wat kan deze printer eigenlijk? Wat zijn de (on)mogelijkheden? Belangrijk daarbij is: 1. het aantal kleuren 2. het aantal DPI (dots per inch) 3. de marges (= zijn de randjes wit aan de buitenranden van het papier)de printer kan de marges niet printen hou het randje dus leeg in je ontwerp. De meeste inkjet printers hebben inktcartridges (patronen) voor 3 kleuren, en een zwarte. Veel moderne consumenten printers hebben twee patronen voor zwart. Een daarvan is dan voor zwarte tekst, en de andere (grotere) voor zwarte vlakken in bijvoorbeeld een afbeelding. Zo raakt je zwarte inkt niet al te snel op. 1.4 Kleurruimte Grafische bestanden kunnen op dus verschillende manieren hun kleuren vastleggen. Dit noemen we de kleur-ruimte, ofwel color space De vier kleuren die printers kunnen maken zijn: CYAN (cyaan, een soort blauw) MAGENTA (een soort roze/rood) YELLOW (geel) KEY (zwart) Alle andere kleuren die gedrukt worden zijn dus mengkleuren van deze vier. Dit noemen we CMYK, het is de standaard de drukkerswereld. Het beeldscherm Voor beeldschermen geldt dat ze als basis slechts drie kleuren kennen: RED (rood) GREEN (groen) BLUE (blauw) Facts 50% van een inkjet cartridge bestaat uit water. De rest is pigment en chemicaliën. De retail van inkt kost meer dan de meeste vloeistoffen op aarde, inclusief olie! De kosten van een liter HP inkt zijn ongeveer 1785,-

3 SOORTEN RESOLUTIES 1.5 Resolutie Een beeld is opgebouwd uit puntjes, ofwel dots. Iedere dot is dus of rood, of groen, of blauw. Alle andere kleuren zijn ook hier mengkleuren. Afbeeldingsresolutie Beeldschermresolu>e Hoe scherp een beeldscherm het beeld noemen we de resolu+e. We drukken beeldschermresolu>e uit in pixels. In de eerste van 2012 was 1280x1024 pixels een gangbare resolu>e voor computers. Beeldschermresolutie 1200x800 is dan breedbeeld, de hoogte is dan naar verhouding kleiner dan de breedte. AIeeldingsresolu>e Foto s en aieeldingen hebben ook een eigen resolu>e. Deze drukken we uit in dpi, ofwel dots per inch. Dit betekent hoeveel beeldpuntjes er op een inch (2,54 cm) passen. 1. AIeeldingen die voor beeldscherm gemaakt zijn (web, in programma s, etc.) hebben al+jd een resolu+e van 72 dpi. 2. AIeeldingen die voor drukwerk bedoeld zijn moeten 300 dpi zijn. Je ziet dat de a7eeldingsresolu+e voor afdrukken hoger moet zijn. Als je een aieelding van 72 dpi opblaast (uitvergroot) zul je zien dat deze lelijk en korrelig wordt. Bij een aieelding van 300 dpi is dit minder. Hoe hoger het aantal dpi s, hoe groter de a7eelding op je beeldscherm wordt. Hieronder zie je een voorbeeld van dit verschijnsel. 300 dpi, 109 mm x 152 mm (A6) 1287 pixels X 1795 pixels 72 dpi, 109mm X 152 mm (A6) 431 pixels X 309 pixels

4 1.6 Financiën Financiën zijn geldzaken. Daarbij kun je je het volgende afvragen: Wat kost dat nou? Is groter en duurder echt beter? Hoeveel heeft de klant ervoor over? Maken wij er dan winst of verlies op! Een standaard vorm is veel goedkoper dan een ingewikkelde, omdat het papier speciaal gesneden moet worden. 1.7 Het Esthetisch Aspect Het woord esthetisch betekent eigenlijk wat over het algemeen als mooi wordt beschouwd. Hoe mooi zijn de vorm en de afmeting van je ontwerp? Maak je een agenda, dan is het wel belangrijk dat de vorm niet te groot en niet te klein is. Maar ze zijn niet allemaal even groot! Hoe groot is nog handig? Passen de tekst en de plaatjes er dan ook goed in? Als ik een nieuwe stoel ontwerp, dan vindt men die vaak niet mooi als ie vijf poten heeft. Een kip met een blauwe snavel is ook niet esthetisch.

5 Hoofdstuk 2: Koppen en tekstblokken 2.1 Evenwicht en Harmonie In een goed ontwerp maak je een evenwicht tussen de verschillende elementen. Het moet een gevoel van harmonie oproepen, het gevoel dat zegt: het klopt! Om dit te bereiken, moet je de elementen goed plaatsen. We gaan kijken naar verschillende manieren om een kop te plaatsen op papier. Welke stemming roept het op? 2.2 Uitlijnen Het links of rechts uitlijnen, of het centreren van de kop of tekst, heeft een groot effect. Je kan een woord ook horizontaal, verticaal of met een golfje vormgeven. Kijk maar eens naar deze voorbeelden. 2.3 Evenwicht en effect Als je een kop combineert met een afbeelding of een tekstblok, moet de kop in evenwicht zijn met het papierformaat en de andere elementen. Het ontwerp zorgt dan voor een optimaal effect bij de lezer 2.4 Grootte Je kunt de grootte, de hoek en de richting van de elementen veranderen om de elementen onderling in evenwicht te brengen.

6 Hoofdstuk 3: Lettertypes 3.1 Soorten lettertypes Er zijn vele duizenden lettertypes, maar we verdelen ze onder in maar twee groepen: 1. tekstletters 2. fantasieletters Het belangrijkste verschil is de grootte: de fantasieletters zijn niet leesbaar / bruikbaar onder een grootte van ongeveer 14-punts. Tekstletters vormen het grootste deel van de tekst en worden dan gebruikt in 8-14 punts grootte. 3.2 Met en zonder schreef Een lettertype met schreef (Engels:serif fonts) herken je aan de kleine horizontale streepjes aan de uiteinden. Schreefloze lettertypes (sans-serif fonts) zijn moeilijker te lezen dan die met schreef. Daardoor zijn ze meer geschikt voor een wat kortere tekst. Ook worden ze gebruik bij wat minder zakelijke teksten. Boeken en dergelijke worden meestal in serif uitgegeven. Het oog heeft steun aan de schreefjes onderaan de letters, als er lange regels tekst op papier staan. 3.3 Hoogte en Breedte Bij sommige lettertypes is elke letter even breed, zoals bij Courier en Consolas. We noemen dat fixed-width of monospaced. Dat is handig bij bijvoorbeeld programmeerwerk. Als letters van hetzelfde font een andere breedte hebben, noemen we dat variable width of proportioneel. Dan neemt bijvoorbeeld de 'i' minder ruimte in beslag dan de 'm'. De meeste fonts zijn proportioneel.

7 3.4 Effect van het lettertype op de lezer De keuze van het juiste lettertype heeft flinke gevolgen voor de lezer. Voor het gevoel dat hij erbij krijgt. Het is de kunst het gevoel en het lettertype op elkaar af te stemmen. LETTERTYPE Een tekst die voor bejaarde lezers bedoeld is zou het beste een groot, klassiek lettertype met schreefletters krijgen. Een tekst voor jongeren mag een vlotte letter voor kopjes hebben. Een kleine lettergrootte straalt zelfvertrouwen uit. Sommige lettertypes kunnen ook als saai of standaard overkomen, wat tot gevolg kan hebben dat de lezer sneller de aandacht verliest. 3.5 Variaties en aanpassingen Je kunt extra variatie aanbrengen in een lettertype door: Een normale, vette (bold), cursieve (schuin, italic) of vet-cursieve lettersoort. De interlinie of regelafstand, de witte ruimte tussen twee regels (line-spacing) Letter-spatiëring: de witte ruimte tussen twee letters.

8 Hoofdstuk 4: Kleur 4.1 Kleurpsychologie Kleur heeft veel effect op degene die het ontwerp bekijkt. Bestudeer de afbeelding hiernaast eens om te zien wat verschillende kleuren kunnen uitstralen. Weet je trouwens waarom de meeste logo s van fast-food ketens rood met geel zijn, zoals McDonald s en Burger King? Geel wekt eetlust op en rood staat voor snelheid. De kleur geel is ook de meest intense kleur die er bestaat. Hij valt dus onwijs op! De combinatie geel-blauw zie je vaak in combinatie met goedkope, betaalbare winkelketens als IKEA en Lidl. 4.2 Kleuren combineren Als je de ene kleur naast de andere zet, kun je een aantal effecten oproepen: harmonie: kies kleuren die dicht bij elkaar op de kleurencirkel liggen. spanning: kies kleuren die tegenover elkaar op de kleurenkaart liggen.

9 4.3 Contrast Veel contrast is witte letters op een zwarte achtergrond. Weinig contrast is gele letters op een witte achtergrond. Contrast heeft een direct effect op de leesbaarheid. 4.4 Plaats in de ruimte Een lichtere kleur geeft het effect van dichterbij, terwijl een donkerder kleur het effect van verder weg geeft. Door de pijlen en woorden in dit logo wordt dat nog eens versterkt. 4.5 Warm en koud Heel belangrijk is of een ontwerp warm of koud aanvoelt. Warmere kleuren hebben meer rood. Koudere kleuren meer blauw. 4.6 Effectwoorden Met kleur kun je woorden een extra effect geven. Bekijk de vier voorbeelden daarvan hieronder eens.

10 Hoofdstuk 5: Grafische bestanden 5.1 Native en non-native In de IT zijn er ontzettend veel verschillende soorten grafische bestanden. Deze kunnen we onderverdelen in twee groepen: native en non-native (universeel). Native Een native bestand kun je alleen openen met het bijbehorende programma. Bijvoorbeeld, een bestand met lagen dat in Photoshop gemaakt is, wordt een PSD bestand. Non-native Een non-native bestand is een bestand dat je met alle programma s kunt openen. Een JPG is een afbeelding die je ook met andere programma s en op andere apparaten kunt openen. Als je van een PSD een JPG maakt verlies je wel alle informatie over lagen en bewerkingen. 5.2 Bestandstypes die je moet kennen Native File Formats PSD : Adobe Photoshop AI : Adobe Illustrator XCF : Gimp Universele grafische formaten JPG: Geschikt voor foto's PNG: Altijd geschikt behalve voor foto's, kan transparant zijn. GIF: De voorloper van PNG, kan ook transparant zijn. BMP: Typisch Windows, niet voor internet geschikt. Vector formaat SVG: Vectortekeningen. Er zijn ook belangrijke verschillen in kwaliteit tussen grafische bestandstypes. Dit heeft vooral te maken met compressie. Dit leer je bij ITTL in klas 4.

11 Hoofdstuk 6: Het web 6.1 Geschiedenis van het web Het gaat hier te ver om een uitvoerige geschiedenis van het wereldwijde web te geven. We beperken ons daarom tot een aantal hoogtepunten die voor jullie belangrijk zijn Tim Berners-Lee startte de nieuwsgroep alt.hypertekst. De technische mogelijkheid voor internet werd al eerder ontwikkeld door het Amerikaanse leger. Hij was de eerste die documenten via hypertekst aan elkaar linkte De broncode van Internet wordt door Tim Berners-Lee vrijgegeven. Iedereen mag en kan er nu gebruik van maken. In hetzelfde jaar wordt HTML ontwikkeld. Dit is de programmeertaal voor webpagina s die jullie later in IT klas 3 gaan leren De zoekmachine Yahoo! wordt gebouwd door David Filo en Jerry Yang, twee studenten van de Stanford University. Hij heette oorspronkelijk Jerry s Guide to the World Wide Web. De naam Yahoo staat voor Yet Another Hierarchical Officious Oracle. Yahoo is volgens diverse bronnen vandaag de dag nog steeds de vaakst bezochte pagina op het internet. In october van 1994 lanceert president Bill Clinton whitehouse.gov, de Amerikaanse regering gaat dus online! 1995 Amazon.com wordt gelanceerd, Amazon was de eerste grote online winkel waar je o.a. kleding, cd s meubels, electronica, etc. kunt kopen. Amazon bestaat nog steeds! Ook komt Microsoft in 1995 met het programma Internet Explorer, een programma waarmee je op het web kunt surfen Google opent zijn eerste kantoortje in een garage in Californie MySpace wordt gestart en is de eerste sociale netwerksite. MySpace heeft zo n 100 miljoen gebruikers. Het is de voorloper van Hyves en Facebook. Vandaag de dag wordt MySpace vooral door bands, muzikanten, fotografen en nerds gebruikt In het jaar 2000 bestaan er zo n 20 miljoen websites In 2004 bedacht Mark Zuckerberg de vriendensite The Facebook. Aanvankelijk konden alleen studenten van Harvard College lid woorden, later voegden ook andere Amerikaanse universiteiten zich toe. In december 2004 had Facebook (ze lieten het woordje The vallen omdat dat beter klonk) al 1 miljoen leden. In 2007, drie jaar later, telde Facebook 50 miljoen gebruikers. Over het ontstaan van Facebook is een ontzettend leuke film gemaakt, die heet The Social Network. Warm aanbevolen om te kijken! 2005 YouTube wordt gelanceerd. Een online platform waarop iedere internetgebruiker video s kan bekijken en zelf kan uploaden. YouTube is een van de eerste WEB 2.0 voorbeelden. Hier breekt een nieuw tijdperk voor het internet aan Facebook komt met een Nederlands platform. Wereldwijd heeft Facebook zo n 100 miljoen gebruikers. Het aantal is dus sinds 2007 verdubbeld. Als je geïnteresseerd bent moet je op Wikipedia eens opzoeken hoeveel leden Facebook nu heeft. Wikipedia is een wereldwijde encyclopedie die door de gebruikers gevuld wordt met informatie. Hele knappe mensen controleren bij Wikipedia of de door gebruikers geplaatste informatie relevant is, en of het wel klopt. Het idee voor Wikipedia ontstond al in het jaar In 2008 waren er al 10 miljoen artikelen geplaatst.

12 6.2 De overgang naar Web 2.0 Vanaf 2006 wordt het web steeds interactiever. Er duiken diverse online diensten op die het mogelijk maken om zelf websites, blogs en wiki s te beheren. Ook worden vriendensites Hyves en Facebook steeds algemener. Bijna iedereen doet er aan mee. Of je nu YouTube, Wordpress, bol.com, ebay, Amazon, Tumblr, StumbleUpon, Flipboard, Instagram, Spotify, Twitter, What s-app of Ping gebruikt je bent een gebruiker van WEB 2.0. Met WEB 2.0 bedoelen we het nieuwe internet, het internet waarop de gebruikers zelf gemakkelijk informatie kan plaatsten, van commentaar kan voorzien en kan delen met vrienden. Voor 2005 was het web vooral een eenrichtingsverkeer omgeving. Je kon er dingen op opzoeken en eraf halen, maar zelf sites bouwen was alleen weggelegd voor een kleine groep mensen. 6.3 Meerdere platforms Het internet wordt met de komst van smartphones ook mobiel. Dat betekent dat mensen online (op het web) kunnen wanneer ze willen. In 2009 komt Apple met de ipad en IOS, het besturingssysteem voor draagbare apparaten, en komen er tablets van diverse merken op de markt. Android is een besturingssysteem dat op apparaten van diverse fabrikanten kan draaien. Bijvoorbeeld Samsung, Sony, etc. Anno 2012 is iedereen met een smartphone of tablet 24 uur per dag online! Dit alles betekent dat, wanneer je een website gaat bouwen, je rekening moet houden met het feit dat hij op verschillende apparaten moet werken. Hij moet er dus ook netjes uitzien op allerlei verschillende beeldschermen. Het ontwikkelen voor een brede groep apparaten noemen we cross-platform ontwikkelen. Als we de term WEB 2.0 gebruiken, dan bedoelen we dus dat het internet interactief is. Iedere gebruiker kan stukjes bijdragen aan het internet. Door te Liken, een blog te starten, foto s te delen, afspeellijsten op YouTube te maken, je mening te geven op een forum, etc. Meer over online diensten vind je in hoofdstuk 6.4.

13 6.4 Verschillende soorten websites We kunnen die miljoenen websites die er bestaan onderverdelen in verschillende categorieën. Het is goed om te weten met wat voor soort site je te maken hebt als je op Internet zoekt. DE INFORMATIEVE SITE Dit soort websites hebben vaak vaste content (inhoud) die op een vaste plaats staat. Websites van consumenten producten zijn een mooi voorbeeld van informatieve sites. Denk bijvoorbeeld aan Sony.nl. Natuurlijk zijn er ook informatieve sites die bedoeld zijn om iets van te leren, Howstuffworks.com is daar een mooi voorbeeld van. DE WEBWINKEL Webwinkels zoals Amazon.com, wehkamp.nl en bol.com herken je meteen. Je kunt zoeken op categorie of op trefwoord. Je kunt artikelen in je winkelmandje plaatsen en online afrekenen zodat de gekochte spullen thuis worden bezorgd. Gangbare manieren om online te betalen zijn: Creditcard Paypal (een soort online bankrekening) ideal HET BLOG Het woordje blog is een verbastering van weblog. Een log of logboek is een soort van dagboek waarin men bijhoudt wat je hebt gedaan. Een blog is dus een online dagboek. Je herkent een blog doordat er altijd redelijk korte berichten onder elkaar staan. Het nieuwste bericht staat altijd bovenaan, daaronder de op een na nieuwste. Er staat ook vaak een datum boven het bericht van wanneer het geplaatst is. Op een blog vind je ook vaak categorieën die je kunt aanklikken. Je kunt gratis een blog bouwen op Wordpress.com, Blogger, web-log.nl, etc. Ook Tumblr is een gratis blog dienst. Hier kun je echter alleen foto s en korte tekst plaatsen. Het is een soort light-versie van Wordpress. Veel websites gebruiken de techniek van bloggen voor andere doeleinden. Op geenstijl.nl kun je humoristische artikelen lezen over zaken die in het nieuws zijn. Op digitanis.com vind je het blog van meneer Tanis. Hij gebruikt de blogsoftware om huiswerk, opdrachten en uitleg voor zijn leerlingen online te zetten. DE PROFIELSITE Op een profielsite kun je lid worden en vrienden toevoegen. Je kunt je eigen profielpagina maken met informatie en foto s over jezelf. Je kunt berichtjes achterlaten bij vrienden en mensen uitnodigen voor evenementen. De bekendste zijn Facebook, Hyves en MySpace. HET FORUM Een forum is een omgeving waar mensen kunnen discussiëren over een onderwerp dat hen interesseert. Veel gamers gebruiken ook forums om over games te praten, fotografen hebben forums over lenzen en apparatuur en mensen die een Skoda hebben kunnen met andere Skodarijders praten en ervaringen uitwisselen. Forums zijn een hele handige manier om antwoord op je vragen te krijgen en mensen met gelijke interesses te ontmoeten.

14 6.5 Locaties; Hoe werkt het internet? Het internet is eigenlijk het grootste netwerk van computers ter wereld. Een netwerk is een verzameling computers/apparaten die met elkaar verbonden zijn. Dit kan door middel van snoeren of draadloos. Stel jezelf alle computers ter wereld voor en probeer tussen al deze apparaten een lijn te trekken. Je krijgt dan een bijna oneindig spinnenweb! Dat noemen we het internet, ofwel het wereldwijde web (WWW). Een website wordt altijd ergens gehost. We zeggen vaak, dat staat op Internet. We bedoelen dan eigenlijk dat die website, of die bestanden, ergens ter wereld op een PC staan. Het internet maakt het mogelijk om die informatie te bekijken. De PC waarop een website draait noemen we de server. Google is op dit moment s werelds grootste zoekmachine. Alle informatie die Google heeft staat ook ergens opgeslagen, namelijk op een server. Google heeft verschillende server parks in de wereld. Als je iets opslaat op Dropbox, dan staat dat dus op computers van Dropbox. Die computers, servers, staan ergens in een gebouw, ergens op de wereld. De werkelijke locatie van onze bestanden of de informatie de we raadplegen weten we in de praktijk niet eens. Hierboven zie je een klein deel van Google s server ruimte. Hieronder zie je op de wereldkaart de server parks van Google.

15 6.6 Wat is de Cloud? DE CLOUD De laatste jaren hoor je veel over Cloud Computing. Met de cloud (wolk) bedoelen we een plek op internet waar jouw data opgeslagen staat. Data kan zijn: je PowerPoints, Wordbestanden, Spreadsheets, agenda, adresboek, etc. Meestal staan deze zaken op je eigen PC of laptop. Als je ze dan ergens anders wilt gebruiken, bijvoorbeeld op school, dan moet je ze meenemen op een USB-stick of iets dergelijks. Als je zorgt dat jouw data in de cloud staat, dan kun je er vanaf de meeste apparaten met Internetverbinding gewoon bij. De afbeelding hieronder geeft schematisch weer wat de cloud is. Bij cloud computing staat de informatie dus niet meer op je apparaat, maar is in de wolk opgeslagen. Je kunt de wolk ook vanaf andere apparaten bereiken. Je bent dus niet meer afhankelijk van je eigen pc thuis. Een heel bekend voorbeeld van Cloud Computing is Dropbox. Ook de ELO die we op school gebruiken is een soort van cloud. 3.5 Variaties en aanpassingen Je hebt in deze reader geleerd over de verschillende soorten websites, wat internet precies is en diensten. Vaak als we voor school dingen opzoeken gebruiken we Google. Onthoud dat informatie niet op Google staat, maar op een website die Google gewoon weet te vinden. Websites worden altijd door mensen gemaakt, en mensen maken fouten. Niet alle informatie die je op het web vindt is dus betrouwbaar! Wikipedia is een encyclopedie die door haar gebruikers gevuld is met informatie. Die is nooit 100% betrouwbaar. Algemene tips voor het zoeken en gebruiken van informatie op internet: Raadpleeg altijd meerdere bronnen Als meerdere bronnen hetzelfde antwoord geven op jouw zoekvraag, dan is die informatie betrouwbaarder. Wat is het belang van de maker van de site? Op de Canon website zul je alleen maar lezen hoe geweldig Canon camera s zijn. Als je op kieskeurig.nl de reacties van echte gebruikers leest krijg je een eerlijker beeld. Rechten - wiens eigendom is het? Als je plaatjes, foto s, muziek, filmpjes gebruikt voor je werk of school, bedenk dan wie het heeft gemaakt. Vermeld altijd de bron van de gebruikte informatie. Je mag niet zomaar alle data kopieren. Als je wilt voorkomen dat je beschuldigd wordt van plagiaat, gebruik dan rechtenvrije muziek en foto s. Rechtenvrij materiaal Op YouTube kun je niet zomaar meer bekende muziek onder je eigen filmpjes zetten. Je krijgt dan bericht van YouTube dat je materiaal hebt gebruikt waarvan jij niet de rechten bezit. Kijk eens op icompositions.com voor rechtenvrije muziek. Ook plaatjes en foto s mag je niet zomaar overnemen, op istockphoto.com kun je plaatjes vinden die je wel mag gebruiken tegen betaling.