WISWEB. design concepts v0.1 WISWEB

Maat: px

Weergave met pagina beginnen:

Download "WISWEB. design concepts v0.1 WISWEB"

Hans Sasbrink
5 jaren geleden
Aantal bezoeken:

1 design concepts v0.1

2 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- versie van componenten zijn hier wel weergegeven, maar worden in eerste instatie niet geimplementeerd.

3 HEADER 2.5% 95% 2.5% 82px tagline site Icon site-name (WISWeb) 70px 16px 30px (max-lengte: 86 karakters) 70px (max-lengte: 2x12 karakters) background Achtergrond plaatje voor de banner is gebaseerd op de ﬁbonacci 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. 1000px 550px CSS2 82px right: 0px large le : 0px

4 MENU menu item (of ) 100% max-width: 1024 () fl fl 62px menu item UU logo float: le item title item icon Opmerking: Het menu is normaal onder de header. Maar voor de telefoon look kan hij beter er boven. 128px menu item (of ) 1000 px menu item UU logo 1000 px float: le CSS 2 large item title NAVIGATIE NAVIGATIE

5 PRE-FOOTER max-width: 1024px Contact Opmerking: De pre-footer moet alleen op de landings-pagina (home page) aanwezig zijn, en kan, links, een sitemap etc. bevatten. Het kan ook de samenwerkings- weer geven. De pre-footer kan erg hoog worden; en hier moet men wel mee oppassen. 1024px 341px 342px 341px CSS2 Links naar VO- 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 Proﬁ-project KLOO Tool Use BPS ADLO TWIN WINST Links naar VO- 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 Proﬁ-project KLOO Tool Use BPS ADLO TWIN WINST wiskunde dagen wiskunde dagen Peter t.a.v. Peter t.a.v. Peter t.a.v.

Vergelijkbare documenten

Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.

Inhoud: 1. Installatie 2. FAQ 3. Thema instellingen 4. Meer hulp nodig? 1.Installatie: Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in