WISWEB

WISWEBdesign concepts v0.1

WISWEB

Het doel van het WISWeb design is vier-ledig:

1. het moet informatie verschaffen over

producten (en evenementen) die voor voor

het wiskunde onderwijs in het voorgezet

onderwijs relevant zijn.

2. het moet toegang verschaffen tot deze

producten.

3. het moet professionaliteit uitstralen;

eventueel binnen de academische context

van de UU of het Fisme.

4. het moet zowel op de desktop als op

mobile apparaten beschikbaar zijn. Hierbij

wordt het echter wel geoptimaliseerd voor

tablets en niet voor telefoons.

Om dit te bereiken gaan we uit van de

principes van content first. Voor zover

mogelijk willen we alle relevante informatie

in één keer aan de gebruiker tonen. Dit

betekent, dat scrollen en lange pagina’s zo

veel mogelijk beperkt moeten worden. Dit is

weliswaar een streven; het zal niet bij elk

onderwerp, elk apparaat, of elke user-setting

mogelijk zijn. Ook willen we niet, dat er

oneindig veel nieuwe sub-pagina’s

aangemaakt worden, alleen maar om te

voorkomen dat de gebruiker niet hoe� te

scrollen.

Content first betekent ook, dat lange lappen

tekst vermeden moeten worden (dit is op de

huidige WISWeb pagina ook het geval). Een

pagina moet niet ‘leeg’ aanvoelen, maar

zeker ook niet druk. Aan de andere kant

passen headers die 80% van de pagina in

beslag nemen ook niet binnen het concept.

De smart-phone versie van componenten

zijn hier wel weergegeven, maar worden in

eerste instatie niet geimplementeerd.

HEADER

outline

tagline site-name (WISWeb)site Icon

82px

95%

70px

70px

16px

flex

(max-lengte: 86 karakters)flex

(max-lengte: 2x12 karakters)

30px

flex flex

2.5% 2.5%

background

Achtergrond plaatje voor de banner is gebaseerd

op de fibonacci sequentie maar is vormgegeven

met elipsen.

De achtergrond covert altijd de hele header, maar

aan de rechterkant is er een fade naar de

achtergrond kleur.

Deze achtergrond kan nog veranderen maar is

gekozen omdat het visueel aantrekkelijk is, niet

dominant, en wel een wiskundig concept weergee�.

responsive

CSS2 (IE8/9)

768px >= width >= ...

320px <= width < 768px;

1000px

82px

12px 12px

auto auto

550px

JS

le�: 0px right: 0px

rendering de website van het Freudenthal Instituut voor het voortgezet onderwijs WISWEB

de website van het Freudenthal Instituut voor het voortgezet onderwijs WISWEB

WISWEB

no

rma

lla

rge

ph

on

e

de website van het Freudenthal Instituut voor het voortgezet onderwijs WISWEBCS

S2

MENU

outline

responsive

CSS2 (IE8/9)

768px >= width >= ...

320px <= width < 768px;

JS

menu item UU logo

menu item FAQ (of contact?)100%

32px32px

32pxflex

110px

...px float: le�

flfl

max-width: 1024 (??)

110px

32px

item iconitem title

menu item UU logo

menu item FAQ (of contact?)

32px

32px

...px float: le�

12px12px 1000 px

110px

32px

item title

auto auto

32px

32px

12px12px 1000 px

auto auto

rendering

no

rma

lla

rge

ph

on

eC

SS

262px

FAQ?Applets DWOHome

Applets DWOHome FAQ

WISWEB

Opmerking: Het menu is normaal

onder de header. Maar voor de telefoon

look kan hij beter er boven.

WISWEB

128px

NAVIGATIE

Home

Applets

DWO

FAQ?

WISWEB

NAVIGATIE

Home

Applets

DWO

FAQ?

JAVA

HTML5

iOS

FAQ?Applets DWOHome

FAQ?Applets DWOHome

HTML5 JAVA iOS

FAQ?Applets DWOHome

HTML5 JAVA iOS

Applets DWOHome FAQ

HTML5 JAVA iOS

PRE-FOOTER

JSmax-width: 1024px

outline Opmerking: De pre-footer moet

alleen op de landings-pagina

(home page) aanwezig zijn, en

kan projecten, links, een sitemap

etc. bevatten. Het kan ook de

samenwerkings-partners weer

geven. De pre-footer kan erg hoog

worden; en hier moet men wel

mee oppassen.

...px

flex flex flex

Contact

responsive 768px >= width >= ...

320px <= width < 768px;

CSS2 (IE8/9)

341px 342px 341px

1024px

display: table-cell display: table-cell display: table-cell

rendering

partners

FreudenthalInstituutLinks naar VO-projecten en activiteiten

van het Freudenthal Instituut

RekenVOort

cTWO

Nieuwe Wiskrant

Rekenlijn

Nationale Kennisbank Basisvaardigheden Wiskunde

vmbo

WisSci (vh Scenario5)

Wisbaak

Nationale Wiskundedagen

Wiskunde A-Lympiade

Wiskunde B-dag

Lesmateriaal van het Profi-project

KLOO

Tool Use

BPS

ADLO

TWIN

WINST

projecten

contactPeter t.a.v. DWO

Straatnaam 1

1122PC

Plaatsnaam

no

rma

lp

ho

ne

CS

S2 partners

FreudenthalInstituutLinks naar VO-projecten en activiteiten van het Freudenthal Instituut

RekenVOortcTWONieuwe WiskrantRekenlijnNationale Kennisbank Basisvaardigheden WiskundevmboWisSci (vh Scenario5)WisbaakNationale WiskundedagenWiskunde A-LympiadeWiskunde B-dagLesmateriaal van het Profi-projectKLOOTool UseBPSADLOTWINWINST

projecten

contactPeter t.a.v. DWOStraatnaam 11122PCPlaatsnaam

FreudenthalInstituut

partners

projecten

wiskunde dagen

contact

FreudenthalInstituut

partners

projecten

wiskunde dagen

contactPeter t.a.v. DWO

Straatnaam 1

1122PC

Plaatsnaam