Interactieve vormgeving portfolio
Voor mijn opleiding interactieve vormgeving heb ik een online portfolio website moeten bouwen. Ik ben er in principe tevreden over, maar misschien dat jullie nog verbeterpunten zien qua design of code (HTML5 en responsive is nog in de maak, nu nog HTML4)?
De website.
Alvast bedankt. :)
Gewijzigd op 13/01/2016 18:41:43 door Y S
- Ariën - op 23/01/2016 16:46:55:
Hij ziet er aardig uit. Zelf zou het makkelijker te lezen zijn als je wat meer spacing tussen de letters gebruikt. Ook je contactgegevens onderin zijn niet echt netjes uitgelijnd.
Thanks. Ik zal de letterspacing wat verhogen voor betere leesbaarheid. De contactgevens zijn op mijn laptop goed uitgelijnd, dat is dus een "responsive" probleem en zal ik oplossen wanneer de site responsive gemaakt wordt.
Je vaardigheden zijn plaatjes, waarom niet met HTML5 die dingen vanaf 0 laten vollopen tot hun punt (en dan nooit precies 90 graden etc...)? Dat maakt wat.
Het lettertype is wel aardig, maar matig leesbaar (grijs op wit) en heeft (vind ik) een te hoge anti-aliassing.
De kop boven je contactformuliertje "Neem contact op" is ook onleesbaar.
Eddy E op 23/01/2016 17:29:38:
Ik is het kleine, te dicht op elkaar geschreven lettertype op donkergrijs niet te lezen.
Je vaardigheden zijn plaatjes, waarom niet met HTML5 die dingen vanaf 0 laten vollopen tot hun punt (en dan nooit precies 90 graden etc...)? Dat maakt wat.
Het lettertype is wel aardig, maar matig leesbaar (grijs op wit) en heeft (vind ik) een te hoge anti-aliassing.
De kop boven je contactformuliertje "Neem contact op" is ook onleesbaar.
Je vaardigheden zijn plaatjes, waarom niet met HTML5 die dingen vanaf 0 laten vollopen tot hun punt (en dan nooit precies 90 graden etc...)? Dat maakt wat.
Het lettertype is wel aardig, maar matig leesbaar (grijs op wit) en heeft (vind ik) een te hoge anti-aliassing.
De kop boven je contactformuliertje "Neem contact op" is ook onleesbaar.
Heb de afstand tussen de letters wat vergroot, waardoor het beter leesbaar zou moeten zijn. Ook heb ik de grijze tekst wat lichter gemaakt.
De vaardigheden zal ik vervangen door HTML5 donut charts, moet nog even kijken hoe ik dat precies doe.
Leesbaarheid van het lettertype bij 'interesses' verhoogd, door de kleur donkergrijs te maken.
Neem contact op, heb ik een ander lettertype gegeven.
De nieuwe versie staat online.
Gewijzigd op 24/01/2016 10:21:57 door Y S
De oude versie staat hier: old . y o u r i s c h n e i d e r. c o m
De nieuwe versie hier: y o u r i s c h n e i d e r. c o m
Alvast bedankt.
Gewijzigd op 03/02/2016 15:15:49 door Y S
- Je hebt eerst de footer met copyright en dan pas het contact stukje, dit hoort meestal andersom
- Ik denk dat het er beter uitziet als de contactgegevens recht onder elkaar staan en dat alle contactformulier velden even lang zijn
Gewijzigd op 03/02/2016 16:21:37 door Marthijn Buijs
PHP Maarten op 03/02/2016 16:20:58:
Even paar dingen:
- Je hebt eerst de footer met copyright en dan pas het contact stukje, dit hoort meestal andersom
- Ik denk dat het er beter uitziet als de contactgegevens recht onder elkaar staan en dat alle contactformulier velden even lang zijn
- Je hebt eerst de footer met copyright en dan pas het contact stukje, dit hoort meestal andersom
- Ik denk dat het er beter uitziet als de contactgegevens recht onder elkaar staan en dat alle contactformulier velden even lang zijn
De copyright heb ik er expres boven gedaan, vond ik mooi staan zo en ook net even anders dan de rest. Contactformulier wil ik gaan aanpassen en ga ik goed uitlijnen.
Eschwin Moerkerken op 04/02/2016 18:12:20:
Als ik op 'terug naar boven' klik, verspringt de website heel raar. Ik weet niet hoe je dit hebt gedaan maar de website laat 1 miliseconde de bovenkant zien en voert dan de animatie uit. Ik denk dat hier iets niet goed gaat.
Daar ben ik van op de hoogte, maar heb geen idee hoe ik dat moet oplossen. Wat ik doe is dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<span class="right"><a href="#top">TERUG NAAR BOVEN <img src="img/backtotop.png" width="13" height="auto" /></a></span></p>
<script type="text/javascript">
$(document).ready(function(){
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
De link activeert de code, waardoor hij verspringt.
<script type="text/javascript">
$(document).ready(function(){
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
De link activeert de code, waardoor hij verspringt.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(document).ready(function(){
$('a[href=#top]').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
$('a[href=#top]').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
Probeer dat eens, ik heb een e.preventDefault() toegevoegd, dit omdat wanneer er nu op de link geklikt wordt de pagina onmiddelijk naar boven wilt en daarna nog een animatie wilt vanaf de huidige 'scrollTop' naar de 0 (dus bovenkant).
Zet daarnaast ook alsjeblieft je code in een extern javascript document die je vervolgens kunt includen net zoals CSS bestanden.
Je kunt ook het volgende stukje code gebruiken om alle anchors met een # href soepel te laten scrollen naar de 'sectie' van het document wat in de 'href' attribuut vermeld wordt.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Smooth scroll anchor
var $root = $('html, body');
$('a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
var $root = $('html, body');
$('a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
Eschwin Moerkerken op 04/02/2016 18:51:24:
Probeer dat eens, ik heb een e.preventDefault() toegevoegd, dit omdat wanneer er nu op de link geklikt wordt de pagina onmiddelijk naar boven wilt en daarna nog een animatie wilt vanaf de huidige 'scrollTop' naar de 0 (dus bovenkant).
Zet daarnaast ook alsjeblieft je code in een extern javascript document die je vervolgens kunt includen net zoals CSS bestanden.
Je kunt ook het volgende stukje code gebruiken om alle anchors met een # href soepel te laten scrollen naar de 'sectie' van het document wat in de 'href' attribuut vermeld wordt.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(document).ready(function(){
$('a[href=#top]').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
$('a[href=#top]').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
Probeer dat eens, ik heb een e.preventDefault() toegevoegd, dit omdat wanneer er nu op de link geklikt wordt de pagina onmiddelijk naar boven wilt en daarna nog een animatie wilt vanaf de huidige 'scrollTop' naar de 0 (dus bovenkant).
Zet daarnaast ook alsjeblieft je code in een extern javascript document die je vervolgens kunt includen net zoals CSS bestanden.
Je kunt ook het volgende stukje code gebruiken om alle anchors met een # href soepel te laten scrollen naar de 'sectie' van het document wat in de 'href' attribuut vermeld wordt.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Smooth scroll anchor
var $root = $('html, body');
$('a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
var $root = $('html, body');
$('a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
De eerste code heeft het opgelost. Dank je. :)
Zouden jullie opnieuwd feedback kunnen geven?
Nieuwe website: b e t a . youri s c h n e i d e r. c o m
Oude website: o l d . youri s c h n e i d e r. c o m
Gewijzigd op 27/02/2016 12:24:21 door Y S
Nu is (a) niet goed voor je lichaam en (b) zorgt ervoor dat je potentiële klanten/geïnteresseerden mist, omdat ze het opgeven. Dit ligt niet aan je kleur gebruik (contrast ratio is prima). Dit ligt echter wel aan je lettertype grootte en de regelafstand. Maak deze allebei wat groter (bijvoorbeeld gewoon 1em en line-height:1.4;). Aangezien je site wat breder is dan eerst is het helemaal niet erg om ook je tekst wat breder te maken. Bijv. width:625px; is nog steeds prima (dan heb je 87 karakters per regel, waarbij 60-90 als prettig lezen wordt ervaart).
Hetzelfde geld voor de tekst in de 4 blokjes eronder. Je lettertype is vrij condensed. Dit moet je voor de leesbaarheid een beetje combineren met wat meer line height (1.4 bijvoorbeeld) en wat grotere tekst. Een interresant artikel: https://ia.net/know-how/responsive-typography-the-basics
Je vaardigheden zijn nu een paar cirkels zonder tekst, ik neem aan dat hier iets mist?
Verder ziet ie er strak uit! Ik zou op je portfolio pagina overigens wel de animate van de "label" en het plaatje gelijk laten oplopen, deze zijn nu wat out-of-sync en dat vind ik een beetje storend werken.
Onder vaardigheden staan 5 afbeeldingen.. geen idee wat ze zeggen.
Taalfouten ook: 'eerste half van 2017 klaar' .
Wouter J op 27/02/2016 19:50:41:
Ga voor de grap eens achterover gehangen in je bureaustoel zitten en probeer dan "Mijn naam is Youri Schneider" te lezen. Dan zullen er waarschijnlijk een van deze 2 dingen gebeuren: (a) je gaat vooroverbuigen om het te lezen of (b) je besluit al vrij snel dat je niet kan lezen.
Nu is (a) niet goed voor je lichaam en (b) zorgt ervoor dat je potentiële klanten/geïnteresseerden mist, omdat ze het opgeven. Dit ligt niet aan je kleur gebruik (contrast ratio is prima). Dit ligt echter wel aan je lettertype grootte en de regelafstand. Maak deze allebei wat groter (bijvoorbeeld gewoon 1em en line-height:1.4;). Aangezien je site wat breder is dan eerst is het helemaal niet erg om ook je tekst wat breder te maken. Bijv. width:625px; is nog steeds prima (dan heb je 87 karakters per regel, waarbij 60-90 als prettig lezen wordt ervaart).
Hetzelfde geld voor de tekst in de 4 blokjes eronder. Je lettertype is vrij condensed. Dit moet je voor de leesbaarheid een beetje combineren met wat meer line height (1.4 bijvoorbeeld) en wat grotere tekst. Een interresant artikel: https://ia.net/know-how/responsive-typography-the-basics
Je vaardigheden zijn nu een paar cirkels zonder tekst, ik neem aan dat hier iets mist?
Verder ziet ie er strak uit! Ik zou op je portfolio pagina overigens wel de animate van de "label" en het plaatje gelijk laten oplopen, deze zijn nu wat out-of-sync en dat vind ik een beetje storend werken.
Nu is (a) niet goed voor je lichaam en (b) zorgt ervoor dat je potentiële klanten/geïnteresseerden mist, omdat ze het opgeven. Dit ligt niet aan je kleur gebruik (contrast ratio is prima). Dit ligt echter wel aan je lettertype grootte en de regelafstand. Maak deze allebei wat groter (bijvoorbeeld gewoon 1em en line-height:1.4;). Aangezien je site wat breder is dan eerst is het helemaal niet erg om ook je tekst wat breder te maken. Bijv. width:625px; is nog steeds prima (dan heb je 87 karakters per regel, waarbij 60-90 als prettig lezen wordt ervaart).
Hetzelfde geld voor de tekst in de 4 blokjes eronder. Je lettertype is vrij condensed. Dit moet je voor de leesbaarheid een beetje combineren met wat meer line height (1.4 bijvoorbeeld) en wat grotere tekst. Een interresant artikel: https://ia.net/know-how/responsive-typography-the-basics
Je vaardigheden zijn nu een paar cirkels zonder tekst, ik neem aan dat hier iets mist?
Verder ziet ie er strak uit! Ik zou op je portfolio pagina overigens wel de animate van de "label" en het plaatje gelijk laten oplopen, deze zijn nu wat out-of-sync en dat vind ik een beetje storend werken.
Bedankt voor je reactie Wouter.
Ik ben het met je eens dat de tekst wat lastig te lezen was en heb deze vergroot en een line-height toegevoegd van 1.4em. Ook de breedte heb ik verhoogt en dat ziet er een stuk beter uit. Wel heb ik het wat subtieler aangepast dan jij voorstelde, omdat het er niet echt goed uitzag. De spatiëring heb ik ook aangepast bij de tekst onder 'interesses', zodat dit minder compact is en beter leesbaar wordt.
De cirkels onder vaardigheden worden gegenereerd door een jQuery plugin, ik heb namelijk geen idee hoe ik dat zou moeten maken. Het is de bedoeling dat daar dezelfde tekst in komt te staan als bij de oude website, echter is dat me tot op heden nog niet gelukt.
L deB op 27/02/2016 22:56:32:
Als je onderaan bij het contactformulier niks invult en op verzenden klikt dan is de lay-out erna helemaal verneukt.
Onder vaardigheden staan 5 afbeeldingen.. geen idee wat ze zeggen.
Taalfouten ook: 'eerste half van 2017 klaar' .
Onder vaardigheden staan 5 afbeeldingen.. geen idee wat ze zeggen.
Taalfouten ook: 'eerste half van 2017 klaar' .
Klopt, die pagina werk ik pas bij wanneer de andere pagina's zijn zoals ik wil, anders blijf ik bezig met aanpassen.
Taalfout heb ik verbetert.
Bijgewerkte versie staat online
Gewijzigd op 27/02/2016 23:11:57 door Y S
Om een goede vergelijking te geven van mijn vooruitgang, plaats ik ook de link naar de oude versie:
oude versie
nieuwe versie
Alvast bedankt.
Ps: omdat deze nog niet zover naar beneden geduwd was, dacht ik dat in hetzelfde topic plaatsen wel zou worden gewaardeerd.
Gewijzigd op 02/02/2017 17:09:54 door Y SS