WISWEB - Universiteit Utrechtboon0104/wisweb/designConcepts.pdf · 4. het moet zowel op de desktop...
Transcript of WISWEB - Universiteit Utrechtboon0104/wisweb/designConcepts.pdf · 4. het moet zowel op de desktop...
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