Mary Grooteman

webdesigner, front-end developer

ik maak <handgecodeerde> websites
voor zzp-ers en middelgrote bedrijven,
zet ontwerpen om in moderne responsive html5 en css3
en duik diep in de code van
gedateerd ogende software voor een totale redesign


html/css, javascript, php, photoshop, illustrator, svg, html-nieuwsbrieven, css-animaties, svg-animaties

responsive design responsive design

From scratch

Mijn doel is werk te maken dat 'eruit springt' maar ook tijdloos is, simpel, gebruiksvriendelijk en speels. Ik werk niet met templates maar zet een site meteen in de html- en css code op en ontwerp in de browser. De toefjes op de taart onstaan op het allerlaatst. Zo werk ik het liefst waarschijnlijk omdat ik als kunstenaar al gewend was om op een 'leeg doek' te beginnen. En ook hier probeer ik met zo min mogelijk het grootst mogelijke resultaat te behalen. Het eindproduct is een volledig uniek werk zonder overbodige scripts en codes. En dat scheelt weer laadtijd!

Lees hieronder over leuke dingen die je in je website kunt zetten en hier uitgebreide informatie over het laten maken van een website, van begin tot aflevering.

css animaties

Animaties werden lange tijd alleen met Flash of Javascript gemaakt, maar in de moderne browsers wordt er steeds meer mogelijk met alléén css en nu kun je daarmee een scala aan animaties maken. Het mooie van css-animaties is dat ze het gewoon op elk apparaat doen, ook op een telefoon. En er komen steeds meer mogelijkheden bij.
N.B. Alleen in explorer, helaas, blijven objecten in 3-d animaties als deze kubus ... plat.

SVG: haarscherpe logo's en icons

Soms zie je logo's of icoontjes tegen die niet scherp lijken te zijn, beetje rafelig bijna. Dat zijn png of jpg's en die zijn opgebouwd uit pixels. Een svg daarentegen is een zgn vector-bestand, bestaat niet uit pixels maar uit een berekening van coördinaten en die zijn op elke grootte altijd haarscherp. Dan zijn ze vergeleken met een png bestand ook nog eens veel minder KB's. Deze dame hier is bijvoorbeeld maar 7KB!
En je kunt er nog leuke hover-acties en animaties op zetten ook. Deze vectoren heb ik overigens allemaal uit illustrator gehaald. ;-)

Terras, svgHeer svg

Virtual Reality

Hoe leuk is het om je eigen ruimte, winkel of tuin op 360 graden (of met een 3-d bril) te kunnen laten bekijken op je eigen site? Je kunt een foto laten maken door een professional, zelf een apparaat kopen en aan de slag gaan...of er eentje maken met de gratis google streetview-app. Met niet al te veel moeite is het zo op je website geplaatst.
Kijk je op een computer kan je de afbeelding bekijken door met je muis te bewegen en op je telefoon (als je een vr-bril hebt) klik je op het brilletje rechtsonder.

WebMary, responsive webdesign
Hendrik Kerstens
artist
WebMary, responsive webdesign
Mondhygiënisten a/d Kade
mondhygiënistenpraktijk
WebMary, responsive webdesign
Jeroen de Groot
(solo)violist
WebMary, responsive webdesign
Wolkenland
groepsverblijf voor Het Amsterdams Lyceum
WebMary, responsive webdesign
Mirjam Slewe
violiste/vioolles
WebMary, responsive webdesign
Tandarts aan het IJ
multidisciplinaire tandartspraktijk
WebMary, responsive webdesign
Liliana de Vries
actrice
WebMary, responsive webdesign
Nijenhuis & Co | Joco Media
film en televisie
WebMary, responsive webdesign
Lupo Photo
portfolio
WebMary, responsive webdesign
Mijn andere site
portfolio schilderijen
WebMary, responsive webdesign
PDT
consultancy
WebMary, responsive webdesign
Jolien van der Kooij
tekstschrijver
WebMary, responsive webdesign
Emmy van Dantzig
interieurontwerper
WebMary, responsive webdesign
Uitvaart Amsterdam
uitvaartbegeleiding
Mary Grooteman, responsive webdesign
De Beestenboel
dierenspeciaalzaak
Mary Grooteman, responsive webdesign
Tandartspraktijk Transparant
tandartspraktijk
Mary Grooteman, responsive webdesign
Doctor Decorum
20th Century Art & Design
WebMary, responsive webdesign
G-BRECHT
artist
Mary Grooteman, responsive webdesign
Erik Paul Jager
copywriter
Mary Grooteman, responsive webdesign
IJshoeve Ruitenbeek
ijsmakerij
Mary Grooteman, responsive webdesign
Massagepraktijk Egmond
massagepraktijk
WebMary, responsive webdesign
BING
film en televisie
WebMary, responsive webdesign
Julia Veerling
viooldocente
WebMary, responsive webdesign
Rienus Gündel
grafisch ontwerper/kunstenaar
WebMary, responsive webdesign
Bach Stress
muziektheater
WebMary, responsive webdesign
Carla Hardy
beelden
WebMary, responsive webdesign
Buitenverblijf 't Herfse
vakantieappartementen
WebMary, responsive webdesign
VISSER & DE VRIES
kinderpsychologiepraktijk
WebMary, responsive webdesign
Jan Pieter Koch
musicoloog/componist
WebMary, responsive webdesign
Eva van Dam
schilder/illustrator
WebMary, responsive webdesign
Lorelei
schoonheidssalon

Schilder en web designer

Ooit begonnen als juf op de basischool. Na 5 jaar vond ik dat wel mooi geweest en ging naar de Wackers Academie om me te bekwamen in (portret)schilderen. Intussen had baantjes in restaurants o.a. als voor- en nagerechtenkok. Toen ik van de academie af kwam stond net 'het geschilderd portret' (Volkskrant 1997) weer in de belangstelling en zo kwam het dat ik al snel van mijn werk als kunstenaar kon leven. En toen had ik natuurlijk een portfolio nodig. Dat werd marygrooteman.com. Alleen liet het programma dat ik toen gebruikte steeds fouten zien. Tot het moment waarop iemand me liet zien hoe ik die eruit kon halen - gewoon in de html! En zo ben ik altijd op die manier mijn site blijven bijwerken. Sterker nog, ik vond het zo leuk om te doen dat ik steeds nieuwsgieriger werd naar de mogelijkheden. Vanaf de dag waarop ik door een vriend werd gevraagd om zijn site te bouwen, volgde de een na de ander. En heb ik er eigenlijk een tweede beroep bij. Bij beide geniet ik van de vrijheid die ik heb en het creatieve proces. Wat ik heel leuk vind aan websites is continue in oplossingen denken, en... dat ze ook nog praktisch nut hebben. En dat je ondanks honderd keer 'undo' of 'delete' niet kunt zien hoe ik soms heb geworsteld om het perfecte resultaat te bereiken. Met een schilderij is dat wel anders...

Neem contact op

 

06 1406 3356
e-mail

of laat hier een berichtje achter