Slechte layout, tips?
Quote:
Ik ben niet zo goed met stylen, ik werk liever met php,sql,javascript,...
Ik programmeer graag, dingen schrijven/bedenken en nadien het werkelijk laten worden vindt ik zeer tof. Echter is het stylen niet mijn ding. Waarschijnlijk mis ik wat verbeelding. Voor mijn nonkel ben ik nu bezig (hij wilde dit) en nu heb ik het volgende in elkaar gestoken (en al zo vaak bijgewerkt).
het menu en de achtergrond lijken mij goed, echter de header en de manier hoe ik mijn blokken (test bericht) layout/schik lijken nergens op.
Hoe kan ik die blokken beter rangschikken en hoe kan ik de header wat opfleuren?
Tips?
Mvg. Christophe
Topic verplaatst naar "Ontwerpen".[/modedit]
Gewijzigd op 02/07/2014 22:54:47 door Wouter J
Na een week heb je dan een paar A4tjes met allemaal kleine dingetjes die jij mooi vindt. Combineer deze samen tot 1 design. Pak vervolgens een mooie natuur foto die je deze zomervakantie gaat maken en haal daar 6 kleuren uit: 2 compleet verschillende en 4 variaties op die 2 kleuren. Kies dan nog een zwartachtige of witachtige kleur uit. Dan heb je je kleurenpallet compleet en gebruik je natuurlijke kleuren, wat heel belangrijk is.
Maak het nu in Photoshop/gimp/paint en zet het dan om tot een HTML/CSS site.
De site moet meteen de indruk geven "het gaat hier over bestrating" en de kleuren zijn die van het logo (links bovenaan). Dat zijn de eisen.
Van klinkersite's kan ik helaas niet veel leren, de meeste zijn puur html (geen css) in de buurt van mij.
Om de layout wat meer kleur te geven zou ik ervoor kiezen om de header geen grijs vak te maken, maar een nette foto met beplanting of iets dergelijks.
Dit zijn wat tips. Het zou de boel al een stuk netter maken, daarna zou je pas moeten gaan kijken naar wat mooi is om de content te presenteren.
Het zijn tips, geen kritiek. De een verdiept zich nou eenmaal liever in de back-end en de ander wat meer in de front-end! :)
"Je site is veel te grijs"
het ideee hierachter was dat als de achtergrond nog niet geladen was dat het logo nog dezelfde kleur had als de "splash" pagina. Ik heb de background transparantie op 0.2 gezet in plaats van 0.5, dan laat hij meer kleur door.
de splash pagina
de pagina zonder achtergrond
de pagina met achtergrond
"Daarnaast moet je zorgen dat de uitlijningen kloppen. Probeer de content wat meer van de rand af te laten staan, dus pas je padding aan."
hoe bedoel je, er valt toch niet's van de site af?
"maak de tekst in het menu eens antreciet in plaats van Windows-error-blauw. Ik zou ook de tekst in het menu een kleinere font-size geven (12px zoiets). "
Die windows error blauw komt uit het logo, ik heb die vervangen met de andere lichter blouw uit het logo. het menu heb ik op 14px gezet, 12 was nogal klijn.
"header"
Ik heb gevragen voor een paar foto's, ik wil er iets zetten als onderstaande
Heb je meschien ook nog iets om die "Test bericht" blokken beter te stylen?
Heel ereg bedankt, ik ervaar het niet als kritiek (vindt zelf dat het niet op al te veel lijkt).
Misschien dat je de tekst in het menu iets verder van de rand kan plaatsen aan de linkerkant. Nu is er slechts 3-5 pixels ruimte. Probeer hier is 10-15 van te maken.
De tekstberichten zou ik in witte div's zetten. Dus elk bericht zijn eigen Div. De kleur van de lijn die nu blauw is zou ik lichtgrijs maken.
Met de uitlijning bedoel ik dat er aan alle kanten evenveel ruimte zitten. Als het logo bijvoorbeeld 20px van de bovenkant af staat, zorg dan dat het logo aan de onderkant ook 20px van de content staat. Dus centreer dingen zowel horizontaal als verticaal.
Dan nog een klein dingetje over de adresgegevens linksboven. Wat als je naast het logo alleen de naam zet van het bedrijf en aan de rechterkant van de header alle gegevens?
Hopelijk kan je hier iets mee!
Die stond op "margin: 4px;" nu heb ik er "margin-left:10px;" aan toegevoegd.
"Als het logo bijvoorbeeld 20px van de bovenkant af staat, zorg dan dat het logo aan de onderkant ook 20px van de content staat."
Ik denk dat ik die in de header (foto) ga verwerken. Het logo is een foto van de buitengevel, vandaar dat het niet aan alle kanten dezelfde margen heeft (wel transparant). Ik ga proberen het logo zelf eens na te tekenen.
"Wat als je naast het logo alleen de naam zet van het bedrijf en aan de rechterkant van de header alle gegevens?"
Of ik doe die contact gegevens onder het menu, daar is nog plaats. Ik zie niet veel site's waar de die gegevens in de header staan, en het moet daarboven niet al te druk worden.
Wat bedoel je met die tekstberichten? de witte achtergrond weg en dan iedere tekstberichten een witte achtergrond geven?
Christoph e op 02/07/2014 21:46:55:
Quote:
Ik ben niet zo goed met stylen, ik werk liever met php,sql,javascript,...
Je hebt nu denk ik veel meer moeite gedaan met een minder mooi resultaat. Ik zou geen plaatjes gebruiken, op logo's ect. na. Zeker vind ik deze website geen bedrijf uitstralen. Het ziet er heel "Windows XP" uit, en dat vind ik niet mooi..
Met een paar simpele divjes, die alleen een achtergrondkleur hebben kan het al heel stuk beter zijn denk ik. Kijk maar eens hier.
Ik zie daar al zo een paar (1, 2, 3, 4) mooie lay-outs tussen zitten die eenvoudig na te maken zijn met hier en daar natuurlijk een eigen toevoeging of verandering.
"Windows Xp" Verklaar?
de site's die je geeft geven mij de indruk van een echt kantoor bedrijf, of winkel; Het gaat hier over "bestrating", ook is mijn gevragen een aantal kleuren te gebruiken. Alle kleure die in het logo zitten mag ik gebruiken.
Wat ik met Windows XP bedoel kan ik een beetje uitleggen met het volgende. Ik heb even Windows XP, Windows 7 en 8 naast elkaar gezet als voorbeeld.
Bij XP ziet alles er zo oudbollig uit vergeleken met wat je nu ziet. Nu kom ik gelijk met wat jij zei: "Alle kleure die in het logo zitten mag ik gebruiken". Geen andere kleuren? Kijk maar naar dit XP scherm. Allemaal blauw, en dat ziet er niet vrolijk uit.. zo eentonig.
Windows 7 is dan al weer een verbetering op Windows XP. Doorschijnende kleuren maken het al interessanter om naar te kijken.
En dan komt Windows 8. Dat ziet er strak uit. Allemaal verschillende kleuren, en dat zonder gradients, transparantie of andere style mogelijkheden. Je ziet strakke achtergrond kleuren en dat ziet er veel beter uit dan die Windows XP.
En dat vind ik dus ook aan de lay-out die jij hebt. Er zitten gradients in en de kleuren zijn eentonig. Blauw en grijs.. het ziet er heel somber uit (net zoals Windows XP). En als je dan naar die Windows 8 kijkt, dat ziet er heel kleurrijk uit door de verschillende kleuren. En dat zie je ook terug in de lay-outs die ik in mijn vorige reactie gelinkt heb. Eigenlijk bevatten deze lay-outs weinig verschillende kleuren, maar de kleuren zijn hier wel licht en passen mooi bij elkaar.
Dat is ook dus het meeste wat ik mis in je layout. Strakheid en kleuren.
Bij de blauwe kleur uit het logo zou ik als ik jou was nog een extra kleur kiezen die je hier en daar terug laat komen. Bijvoorbeeld bij linkjes (<a></a>). Bij een blauwe kleur gebruik ik zelf meestal een kleur in de buurt van geel en oranje.
Quote:
Windows 7 is dan al weer een verbetering op Windows XP. Doorschijnende kleuren maken het al interessanter om naar te kijken.
En dan komt Windows 8. Dat ziet er strak uit. Allemaal verschillende kleuren, en dat zonder gradients, transparantie of andere style mogelijkheden. Je ziet strakke achtergrond kleuren en dat ziet er veel beter uit dan die Windows XP.
En dan komt Windows 8. Dat ziet er strak uit. Allemaal verschillende kleuren, en dat zonder gradients, transparantie of andere style mogelijkheden. Je ziet strakke achtergrond kleuren en dat ziet er veel beter uit dan die Windows XP.
Is natuurlijk ook een kwestie van smaak en persoonlijke voorkeur. Naar mijn mening zeg je nu iets te makkelijk: XP was klote, Win 7 was beter en Win 8 is The Bomb! En dan krijgen we straks Win 9 en dan vind je die weer helemaal te gek. En zo kun je natuurlijk door blijven gaan. De felle Win 8 kleuren bijv. passen totaal niet bij de huisstijl van het bedrijf.
Machiel K op 03/07/2014 21:14:46:
Ik snap dat ze je de indruk geven van een kantoor bedrijf of een winkel, maar dat komt ook vooral door de inhoud. Als je naar de lay-out zelf kijkt, kan je er vanalles van maken wat je zelf wilt. De lay-outs zien er allemaal strak uit, en dat is denk ik wat gebruikers willen zien, wat ze aantrekt en aanspoort om op te website te blijven.
Wat ik met Windows XP bedoel kan ik een beetje uitleggen met het volgende. Ik heb even Windows XP, Windows 7 en 8 naast elkaar gezet als voorbeeld.
Bij XP ziet alles er zo oudbollig uit vergeleken met wat je nu ziet. Nu kom ik gelijk met wat jij zei: "Alle kleure die in het logo zitten mag ik gebruiken". Geen andere kleuren? Kijk maar naar dit XP scherm. Allemaal blauw, en dat ziet er niet vrolijk uit.. zo eentonig.
Windows 7 is dan al weer een verbetering op Windows XP. Doorschijnende kleuren maken het al interessanter om naar te kijken.
En dan komt Windows 8. Dat ziet er strak uit. Allemaal verschillende kleuren, en dat zonder gradients, transparantie of andere style mogelijkheden. Je ziet strakke achtergrond kleuren en dat ziet er veel beter uit dan die Windows XP.
En dat vind ik dus ook aan de lay-out die jij hebt. Er zitten gradients in en de kleuren zijn eentonig. Blauw en grijs.. het ziet er heel somber uit (net zoals Windows XP). En als je dan naar die Windows 8 kijkt, dat ziet er heel kleurrijk uit door de verschillende kleuren. En dat zie je ook terug in de lay-outs die ik in mijn vorige reactie gelinkt heb. Eigenlijk bevatten deze lay-outs weinig verschillende kleuren, maar de kleuren zijn hier wel licht en passen mooi bij elkaar.
Dat is ook dus het meeste wat ik mis in je layout. Strakheid en kleuren.
Bij de blauwe kleur uit het logo zou ik als ik jou was nog een extra kleur kiezen die je hier en daar terug laat komen. Bijvoorbeeld bij linkjes (<a></a>). Bij een blauwe kleur gebruik ik zelf meestal een kleur in de buurt van geel en oranje.
Wat ik met Windows XP bedoel kan ik een beetje uitleggen met het volgende. Ik heb even Windows XP, Windows 7 en 8 naast elkaar gezet als voorbeeld.
Bij XP ziet alles er zo oudbollig uit vergeleken met wat je nu ziet. Nu kom ik gelijk met wat jij zei: "Alle kleure die in het logo zitten mag ik gebruiken". Geen andere kleuren? Kijk maar naar dit XP scherm. Allemaal blauw, en dat ziet er niet vrolijk uit.. zo eentonig.
Windows 7 is dan al weer een verbetering op Windows XP. Doorschijnende kleuren maken het al interessanter om naar te kijken.
En dan komt Windows 8. Dat ziet er strak uit. Allemaal verschillende kleuren, en dat zonder gradients, transparantie of andere style mogelijkheden. Je ziet strakke achtergrond kleuren en dat ziet er veel beter uit dan die Windows XP.
En dat vind ik dus ook aan de lay-out die jij hebt. Er zitten gradients in en de kleuren zijn eentonig. Blauw en grijs.. het ziet er heel somber uit (net zoals Windows XP). En als je dan naar die Windows 8 kijkt, dat ziet er heel kleurrijk uit door de verschillende kleuren. En dat zie je ook terug in de lay-outs die ik in mijn vorige reactie gelinkt heb. Eigenlijk bevatten deze lay-outs weinig verschillende kleuren, maar de kleuren zijn hier wel licht en passen mooi bij elkaar.
Dat is ook dus het meeste wat ik mis in je layout. Strakheid en kleuren.
Bij de blauwe kleur uit het logo zou ik als ik jou was nog een extra kleur kiezen die je hier en daar terug laat komen. Bijvoorbeeld bij linkjes (<a></a>). Bij een blauwe kleur gebruik ik zelf meestal een kleur in de buurt van geel en oranje.
Daar heb je gelijk in. Hij moet 1 van die 2 houden, dus plat of bollig. Zijn menu en logo is bollig en rest is van zijn pagina is te plat.
Header mag meer verschillende kleuren hebben desnoods gebruik je een plaatje er voor, menu kan je beter platter maken en contant mag meer kleuren krijgen bijvoorbeeld bij titelbalken. Bedrijfsgegevens kan je vervangen door slogan en verplaats bedrijfsgegevens maar naar je contactpagina.
Gewijzigd op 04/07/2014 01:43:56 door johan de wit
Gewijzigd op 04/07/2014 15:16:59 door christoph e
Wat je al zei, de achtergrondkleur/achtergrondafbeelding van de website. Je kunt de wel de afbeelding gebruiken die je bij je eerste versie ook had, die zal ik zelf dan wel iets lichter maken.
Ik zie niet goed of je een border hebt om de witte container? Als dit zo is, of als dit niet zo is: goed. Ik zou een hele kleine box-shadow er aan toevoegen. En als je dan een lichtere achtergrond hebt komt dat best mooi tot uiting.
Verder zou ik een ander lettertype kiezen. Ik vind zelf altijd Open Sans wel een vrolijk lettertype. Maar iets als Veranda zou ook al beter zijn dan het lettertype dat je nu hebt.
De lettertype in de headers zijn ook wat aan de grote kant.
Verder nog iets meer ruimte tussen het bovenste witte vlak en de container, en wat meer ruimte tussen de boxen aan de linker kant.
Het pad naar de pagina staat ook niet echt op een mooie plek. Dit zou ik ergens onderaan in je pagina verwerken omdat dit ook niet iets is wat je direct wilt zien als gebruiker.
Gewijzigd op 05/07/2014 10:49:51 door Machiel K
@Thomas
Dat groen was maar tijdelijk, dat zou een afbeelding moeten worden of iets dergerlijk.
In het menu bovenaan zit wel een fout als je over "child" gaat, hoe kan ik dit oplossen?
de linken in de "Catalogus" zijn wat aan de dikke kant en moet die hover oranje, het komt nergens op de site terug?
bij de "meer info" en in de "Catalogus" het lijntje van de link weg halen.