nieuwe site review
Ik heb met al mijn basiskennis geprobeerd een website in elkaar te proppen. Het is een website voor een design bedrijfje wat ik binnenkort wil opzetten.
Er zitten in de code nog wat fouten aangezien ik zo snel mogelijk nog een resultaat wilde zien. Ik heb <center... gebruikt en het stukje JavaScript bovenaan de code ga ik nog plaatsen in een extern bestandje.
De site is nog een WIP. Daarom heb ik alleen nog de homepage en is het gratis gehost.
Feedback altijd welkom:)
De link: wsketch.pcriot.com
Groeten,
Piet
Gewijzigd op 25/08/2011 19:56:54 door Piet Jansen
tevens laad de website zeer traag, ik zou de afbeeldingen iets verkleinen.
Code (php)
1
2
3
4
2
3
4
<a href="index.html"><font size="3" face="Arial" color="#FFFFFF">Home</a></font>     
<a href="index.html"><font size="3" face="Arial" color="#FFFFFF">About Us</a></font>     
<a href="index.html"><font size="3" face="Arial" color="#FFFFFF">Portfolio</a></font>     
<a href="index.html"><font size="3" face="Arial" color="#FFFFFF">Contact</a></font>    
<a href="index.html"><font size="3" face="Arial" color="#FFFFFF">About Us</a></font>     
<a href="index.html"><font size="3" face="Arial" color="#FFFFFF">Portfolio</a></font>     
<a href="index.html"><font size="3" face="Arial" color="#FFFFFF">Contact</a></font>    
- Gebruik lists hiervoor...
- Font-tag is echt uit de tijd...
Ik zal proberen zo spoedig mogelijk de fouten eruit te halen.
Dat van die photoshop, illustrator e.a. iconen is grappig, maar wat heeft je klant hier aan? Ik weet niet wat je doelgroep is, maar dit gaat voor de meeste klanten niet werken (tenzij je een doelgroep hebt die verstand heeft van wat die iconen voorstellen). Die iconen zien er ook als knoppen uit, dus dan zou je daar ook weer pagina's achter moeten hangen. Heel belangrijk is dat je met klanten over oplossingen praat, niet over technische hulpmiddelen en al helemaal niet over problemen (tenzij in combinatie met de oplossing). Dus iets als "Wij nemen de gehele realisatie van uw website voor onze rekening, van ontwerp tot realisatie." Of iets in die trend. Leef je een beetje in in je doelgroep (maak eventueel persona's) en kijk naar wat zij willen.
Wat is de reden dat je gras en lucht in je website hebt? De achtergrond vind ik erg treffend, goed gekozen, maar dat gras komt een beetje uit de lucht gevallen. Misschien is hier wel een reden voor, maar ik zie het niet.
Het deel onder het gras vind ik wat minder. Het lijkt nu een beetje alsof je bij de header het wel genoeg vond wat betreft grafische opmaak. Wellicht zou het mooi zijn als je dat gras door zou trekken tot zwart een stukje onder het plaatje. Dan loopt het dus van gras over naar zwart en dan gebruik je witte tekst. Dat moet wel subtiel gebeuren (dus geen dikke zwarte gradient maar eerder dat het zwart steeds meer de overhand krijgt omdat het gras meer en meer ophoudt). Zorg er in ieder geval voor dat je voldoende contrast houdt (dat zit nu overigens wel snor).
De mailadressen zijn opgemaakt als echte links maar je kan er niet op klikken. Dat kan verwarring opleveren. Hutsel in HTML wat met ASCII tekens om spambots tegen te gaan en maak er dan echte links van. Of gebruik een contactformulier.
De copyrights zou ik weg laten. Ten eerste heb je niet echt belangrijke content die mensen zouden willen kopiëren en ten tweede zitten er op een website standaard copyrights. Het is een fabeltje dat je dat er onder moet zetten om daar recht op te hebben. Mocht je het toch willen houden, zet het dan in wat kleinere tekst in het midden onder de drie blokken. Nu lijkt het alsof de copyrights bij "Contact" horen.
Wellicht zou het een goed idee zijn om met CSS3 je pagina een beetje te verbeteren. Denk aan hele kleine effecten zoals 3px afrondingen aan de hoeken van de container zodat 'de scherpe randjes' eraf zijn. Hoe subtieler hoe beter. De randen tussen de drie blokken (en de header) zijn vrij lomp. Ook hier zou een beetje CSS3 goed van pas komen. Gebruik bijvoorbeeld een border-right met een licht grijs 1px randje en een border left met een iets donkerder grijs randje van 1px. Met child selectors kan je voorkomen dat de buitenste blokken aan de buitenkant nog een extra randje hebben. De header zou je een border-bottom 1px donkergrijs randje kunnen geven. De blokken een net iets donkerder grijs 1px randje (border-top). Hierdoor krijg je een effect alsof het lichte randje net een beetje in de pagina ligt (diepte). Wat ook mooi is als de header een border-top 1px randje heeft wat net wat lichter is dan het lichtblauw van de bovenkant van de header. Dit geeft het effect alsof het header plaatje net ietsje boven de achtergrond hangt.
Als je je design naar een nog hoger niveau wil tillen dan moet je proberen wat meer out of the box te denken. Dat achtergrond plaatje is al een goed begin (nogmaals hulde) maar de rest van de website is enigszins standaard. Je kan wat inspiratie opdoen op http://www.smashingmagazine.com/2009/07/30/50-fresh-portfolio-websites-for-your-inspiration/ . Vergeet ook niet http://www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-portfolio-website/ door te lezen, er staan veel dingen in die voor jouw website opgaan. Bijvoorbeeld betreffende het logo.
Typografie is ook belangrijk bij design. Vooral het onderste blok ziet er op het gebied van typografie nog niet geweldig uit. Je kan hier het beste het een en ander over opzoeken, want dat is een heel vak op zich. Startpunt: http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/ .
Je moet niet denken dat ik je website bagger vind (hij steekt qua design een stuk boven het gemiddelde hier uit) maar ik hoop je wat handvaten gegeven te hebben om van goed naar geweldig te gaan. Webdesign is een markt met enorm veel spelers. Wil jij je echt onderscheiden dan moet goed niet goed genoeg zijn.
The domain you have requested is currently not in use under an x10Hosting web hosting account. If you would like this domain, you can register it now.
When it comes to free web hosting, x10Hosting is an industry leader. The features offered in our packages are unparalleled compared to our competition.
De URL die het nu doet is wsketch.pcriot.com.
Toevoeging op 25/08/2011 23:16:35:
Ik heb een paar veranderingen aangebracht:
- Ik heb de 'Welcome', 'About Us' en 'Contact' velden veranderd. Ze zwaren eerst sneeuwwit, maar nu zijn ze transparant white met zwarte tekst.
- Ik heb een border om de 'Welcome', 'About Us' en 'Contact' velden gezet zodat ze er een beetje 'gesloten' uitzien en de tekst er iets meer geordend instaat.
Ik ga morgen alle links laten werken door alle overige pagina's nog te maken. Het valid maken van deze site gaat voor mij een beetje moeilijk worden aangezien ik niet veel ervaring heb. Ik zal daar nog wel naar kijken.
Bedankt voor alle tips:)
Quote:
About Us
Met hoeveel man ben je? Ik merk vaker dat mensen doen alsof er een heel team achter het 'bedrijf' zit terwijl het maar om één persoon gaat. Ik ken je situatie verder niet.
Quote:
WSketch Design is a web design company.
Wat is je KVK nummer? Of ben je officieel geen bedrijf?
Quote:
We have a young and talented team with experience and motivation.
Ja?
Over het algemeen, zelfs in een "About us": probeer de klant erin te betrekken. "Onze missie is het om een website te maken waar uw klanten mee weglopen." werkt veel beter dan "We zijn echt zo gemotiveerd, o en we zijn ook getalenteerd! Echt waar!"
Kijk ook echt naar je schrijfstijl. "Business Related Inquiries". Gaan jullie ook in stropdas naar je werk? Wat is overigens het verschil tussen "Business Related Inquiries" en "General Inquiries"? Waarom twee e-mailadressen aanmaken? Mensen willen gewoon contact met je opnemen. Klanten prikken ook door overdreven poeha, al is het onbewust. Net zoals dat het veel uitmaakt of je hand warm of koud is als je iemand de hand schudt voor een sollicitatie.
In het algemeen: een persoonlijke, vrije schrijfstijl werkt beter. Kijk maar eens naar al die voorbeeldportfolio's die in de Smashing Magazine link staan.
Sorry voor alweer zo'n lang bericht ;).
P.S. Kijk ook eens naar het gebruik van een master stylesheet. Scheelt je veel problemen wat betreft het bekijken van je website in verschillende browsers.
Quote:
URL: http://wsketch.pcriot.com/
Rating: Dangerous
Threat details: Verified fraudulent page or threat source.
Rating: Dangerous
Threat details: Verified fraudulent page or threat source.