Webdesign

visuele communicatie

webdesign: van ontwerp naar browser

Raoul Postel

docent CROSSmedia maker | ontwerpergrafisch vormgeverwebdesigner / developerondernemer

ar

html

css

epub share

pdf

3dvr

dpicmyk

rgb px

cms

mbohbo

visuele communicatie & webdesign

van speels naar zakelijk


van creatief gevarieerd naar flexibiliteit in blokken


van pagina-aandacht naar product-aandacht


van totaal-informatie naar one-liner

zijn responsive bevatten call-to-action & motion vertellen een verhaal zijn ook op social media te vinden


hedendaagse websites…

1. functioneel ontwerp 2. interactief ontwerp (wire) 3. vormgeving & identiteit 4. html en css 5. content management 6. online zetten 7. ondersteuning/advies


ontwikkeling van een website/app in stappen:

een websiteplan opzettenHet websiteplan omvat het functioneel en interactief ontwerp, het stappen-plan voor bouwer en opdrachtgever

Een helder websiteplan omvat:

• het doel van de site • doelgroep(en) • de uitstraling (look and feel) • het concept • de opbouw en navigatie

HOME

contactnieuwswerkover mij

grafisch

illustratie

foto’s

route

webdesign


interactie schema | wireframe

storytelling

visuele communicatie & storytelling


vertel het verhaal…

Een verhaal…

1. vermijdt het cliché 2. heeft een duidelijk doel 3. beschrijft een unieke ervaring 4. verbindt product met doelgroep


responsive design: breedte in % in plaatst van px denk in kolommen

webdesign


heat-map: scherm-aandacht op midden-boven


opensource vormgeving: bijv. Bootstrap of Pure CSS


opensource vormgeving: zeer veel gebruikt, ook te vinden in WordPress e.a. systemen

webdesign

beheersing van webdesign en internettechniek: HTML & CSS

HTML = inhoud van de websiteCSS = vormgeving van de website

Scheiden van inhoud en vormgeving is belangrijk voor de zoekmachines

CODE = GEEN EXAMENSTOF

webdesign & vormgeving


Photoshop als basis voor webdesign: ontwerp in pixelprogramma voor pixelmedium (scherm)

Maar ook in Illustrator en InDesign mag een website worden ontworpen

Losse onderdelen/afbeeldingen bewaren als: png-formaat


Document grootte in Photoshop 150 dpi & sRGB desktop: 1920 x (minimaal) 1080 dpi tablet: 1024 x 768 dpi smartphone: 480 x 320 dpi

Oudere schermresoluties zijn 72dpi Retina en HD is 262dpi

Geen verschil tussen 72 en 300 dpi (op 100%) De afbeelding wordt altijd 1:1 weergegeven

LET OP:Print een gebruiker de webpagina, dan is de

resolutie wel van belang. Die moet dan

minstens 150 dpi zijn.

LET OP: Maak alleen wat de examencasus vraagt!


Dus: Alleen voor de laadtijd van je website is het noodzakelijk om rekening te houden met de resolutie.

Afbeeldingen met een hoge resolutie zijn groter en nemen meer laadtijd in beslag.

De afmeting van de afbeelding is wel belangrijk voor de schermbreedte

TEST: Resample in Photoshop

een plaatje tot bijv. 200 pixels.

Vink resamplen (pixels berekenen) daarna uit.

Bewaar dit plaatje op 72 dpi, daarna in 300 dpi, of

welk getal je maar wilt. Zet die plaatjes op je

website. Zie je verschil? Nee, want er is geen

verschil.


achtergrond repeteren

achtergrond beeldvullend


Achtergrond afbeeldingen: maak in het ontwerp duidelijk wat er met de achtergrond van de website moet gebeuren: 1. wordt een schermvullende afbeelding

die mee schaalt met de browser (min 1920px breed)

2. wordt een verloop of effen kleur 3. wordt een repeterende afbeelding

(patroon)


Menu: zorg dat het menu altijd volledig in beeld staat. Ook als er gescrolled moet worden! 1. laat in het ontwerp zien hoe een

rollover-knop er uit ziet 2. laat zien hoe een uitklapmenu er

uit ziet, indien dat er in zit. 3. houdt rekening met vingerdikte

bij touch screen.



Gedetailleerd uitwerken: werk het ontwerp zo gedetailleerd mogelijk uit. De opdrachtgever weet dan precies wat hij kan verwachten.

1. onderstreep tekstlinkjes 2. maak teksthierarchie (kop, subkop,

tekst, nieuwsbericht, links) 3. rollover en aktieve knoppen 4. randen, verloop, rondhoeken, etc.

webdesign & vormgeving : DESKTOP DESIGN

webdesign & vormgeving : TABLET DESIGN

webdesign & vormgeving : PHONE DESIGN


Welke elementen plaats je in een website ontwerp?

• horizontaal of verticaal menu

• header en footer (sfeerbeeld-slidehow)

• tekstblok (neptekst) met titel

• fotoalbum

• contactgegevens en call-to-action

• 3 nieuwsberichten incl. datum en titel kopje

• linkjes naar social media + share

typografie sluit aan bij huisstijl kleur in lijn met de huisstijl en sfeer

webdesign & vormgeving: presentatie in Mockup

Webdesign

Internet