Interactieve vormgeving portfolio

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Y S

Y S

12/01/2016 11:40:36
Quote Anchor link
Beste PHPhulpers,

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
 
PHP hulp

PHP hulp

14/12/2018 12:23:04
 
Y S

Y S

23/01/2016 16:39:56
Quote Anchor link
Niemand? :(
 
- Ariën -
Beheerder

- Ariën -

23/01/2016 16:46:55
Quote Anchor link
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.
 
Y S

Y S

23/01/2016 17:25:01
Quote Anchor link
- 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.
 
Eddy E

Eddy E

23/01/2016 17:29:38
Quote Anchor link
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.
 
Y S

Y S

24/01/2016 10:12:58
Quote Anchor link
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.


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
 
Y S

Y S

03/02/2016 15:15:23
Quote Anchor link
Nieuwste versie gister geüpload, is weer een stukje beter geworden, maar wil graag nog wat adviezen over het design. De cirkels onder vaardigheden ben ik mee bezig om via CSS/jQuery te implementeren, dus dat zit er nog niet in. Ook responsive ben ik nog mee bezig.

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
 
Anoniem M

Anoniem M

03/02/2016 16:20:58
Quote Anchor link
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
Gewijzigd op 03/02/2016 16:21:37 door Anoniem M
 
Y S

Y S

04/02/2016 15:28:46
Quote Anchor link
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


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

Eschwin Moerkerken

04/02/2016 18:12:20
Quote Anchor link
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.
 
Y S

Y S

04/02/2016 18:35:39
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
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.
 
Eschwin Moerkerken

Eschwin Moerkerken

04/02/2016 18:51:24
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$(document).ready(function(){
    $('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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
});
 
Y S

Y S

04/02/2016 19:01:05
Quote Anchor link
Eschwin Moerkerken op 04/02/2016 18:51:24:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$(document).ready(function(){
    $('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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
});




De eerste code heeft het opgelost. Dank je. :)
 
Y S

Y S

27/02/2016 12:24:03
Quote Anchor link
De afgelopen weken ben ik aan de slag gegaan met het vernieuwen van mijn website en wat heb wat nieuwe dingen bijgevoegd.

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
 
Wouter J

Wouter J

27/02/2016 19:50:41
Quote Anchor link
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.
 
L deB

L deB

27/02/2016 22:56:32
Quote Anchor link
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' .
 
Y S

Y S

27/02/2016 22:59:51
Quote Anchor link
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.


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' .



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
 
Y SS

Y SS

02/02/2017 17:09:27
Quote Anchor link
Iedereen hierboven nogmaals dank voor de hulp. Inmiddels zijn we alweer bijna een jaar verder sinds mijn laatste reactie en ik ben dan ook hard bezig geweest met een veel betere versie. Op die nieuwe versie zou ik graag weer feedback willen ontvangen. De site is nog niet helemaal af, ik wil dan ook vooral feedback over de pagina's die in het menu staan. Doorklikpagina's die niet in het menu staan werken nog niet, evenals het contactformulier en de buttons om die te bereiken (op de homepage). Hij is overigens ook nog niet respsonsive.

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
 
Anoniem M

Anoniem M

02/02/2017 19:49:01
Quote Anchor link
Ondanks dat hij niet responsive is, zou je voortaan rekening willen houden met schermen die niet Full HD zijn? Verder ziet het er wel netjes uit. Je zou een lettertype van Google Fonts kunnen gebruiken en misschien "fade" bij een hover op je Case afbeeldingen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.