http://th00.deviantart.net/fs49/300W..._by_cr0z3r.jpg
Hope you like it.
Website designed by me [founder of croZZin' Productions] for my brother.
>> dA LINK <<
Website: Marc Honninger
Printable View
-
08-23-2009, 01:10 PMcrozerWebsite: Marc Honninger
-
08-23-2009, 01:26 PMChris
I'll have some critique for the main site in just a moment.
-
08-23-2009, 05:40 PMcrozeralright.Quote:
Originally Posted by Solaris
i'll be checking around. -
08-26-2009, 08:03 AMChris
Okay, sorry it took me so long to get back to you, had alot come up in the last couple days, and I just forgot about it. Just a few things I wanted to hit on.
- All of the below critique is based on the original site found at www.miuziqa.com -
You have a good grasp of the basic principles of interface design. There's a couple things that stick out to me as needing some emphasis:
- The purpose of the site isn't very clear. I didn't actually know that this was a site for a band / musician until I see the "music" and "Latest Music" sections. This brought me to that conclusion. The general aim of any design is to ensure that the purpose of the site is fully realized. You want your viewers to know exactly what it is they are looking at. This will increase the effectiveness of the design, as well as the site overall.
- The very top headline needs some attention. As it stands, it's the only dark element on a purely light-based color palette. It makes the content stick out, only a little too much. A lighter, less conflicting color selection may have made this a more effective elevator pitch for the site. You also need to take a little bit off of the line-height for the headline. Line height needs to be evenly distributed between the text and the containing box. Right now, there's just a little too much between the lines of text, and there's not really enough whitespace to support the text element.
- Adjust your font sizing just a little. The navigation text seems to be an appropriate size, but the headline just below it almost seems massive. Compared to the rest of the content, an H1 header should be big, but only by about 10-15 px. This will provide a much smoother transition from header to subheader to content. You should never go beyond 28px for any header, unless the design specifically tailors to larger type. Check out Smashing's typography trends and practices article and base your selection on that. Using more adapted methods will give you a better idea of how and where to use large vs small type.
- Your content needs a little bit more detail. Not so much the content itself, but the formatting. Your header titles are a little too high, and the content formatting is a little bland. This may be because it's all the same, but you should definitely try using www.lipsum.com instead for filler content, rather than copy / pasting. It gives you a much more pronounced idea of how real content would look in your layout. The right section also follows a similar need. Some defining of meaning would definitely help the appearance. It will also make your content a lot more exciting.
- Some technical issues. When I zoom out to view your whole page, your footer basically disappears at 70% (in ie7), I don't know if it happens in firefox, but you should be aware, since IE7 is a somewhat current browser. Your footer in general needs a little bit of work, seeing as it's the only element using a black hue right next to white on greyish-blue. For some people, this may be a visibility issue. But my only issue is continuity.
Some validation errors:
28 errors as viewed on the w3c validator:
line 7 - You used a conditional comment, but there's no comment! Make sure you use the appropriate syntax for condition comments, which should follow this paradigm:
So in your code, yours should read:Code:<!--[if IE]><![endif]-->
instead ofCode:<!--[if !IE]>
<link href="img/favicon.png" rel="shortcut icon"/>
<![endif]-->
The "--" are very important. If your comments aren't correctly formatted, the conditional effect will not work, and could risk actually printing this information on the page.Code:<![if ! IE]>
<link href="img/favicon.png" rel="shortcut icon"/>
<![endif]>
Line 16 / Line 30 / Line 64 / Line 65 / Line 76 - You forgot to use the "alt" attribute on your images. This is a usability issue. Alt attributes on images are important because they give the user something to look at should the image not load for whatever reason (disabled locally, didn't load properly, etc). This provides a placeholder and is very important for users who are visually impaired.
Line 47 - Under the div id "column 2", you have incorrectly used the bullet html tag, as there is no containing <ul>. This causes about 20 errors in your validation. Make sure that your bullets always follow the same syntax paradigm:
Line 74 - You have one closing div tag too many, and it shows on this line. There's a closing div tag, but no div tag open for it to affect. This may cause irregularities in your rendered page.Code:<ul>
<li>Button</li>
<li>Button</li>
</ul>
Fix those couple errors, and your page should validate as xhtml transitional. If there are any left, they should be fairly simple to correct. I am glad to help you get them validated if you require any assistance.
Validation in your web-design process can be a very important thing. To some it may not matter, but I've seen first-hand the effects of nonvalidated code. It's not overrated. In fact it can have some drastic effects to the end-result of your design, impacting how your viewers see your work.
That's all the critique I have for this layout. If you have any questions about what I've talked about, please feel free to ask! :) Hope I helped! Thanks for sharing your work with us here at GFXVoid. -
08-26-2009, 08:10 AMChris
Oh, and here's the validation result page:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.miuziqa.com%2Findex.htm l&charset=%28detect+automatically%29&doctype=Inlin e&group=0
And I just wanted to ask...why are there so many meta keywords on your homepage?
You only need, at a maximum, 10-12. Using all those keywords does not guarantee that you'll get traffic. Using a concentrated, more precise amount will be sure to bring you more traffic than a list of 500 words. Keep this in mind because in reality, using so many keywords actually hurts your chances of being tracked by google or any other search engine. Sites with such a high number of keywords usually tend to get grouped with spam sites or sites that have been known to have malicious activity.Quote:
<meta name="keywords" content="paginas web,pagina web,páginas web,crear páginas web,diseño páginas web,páginas web gratis,crear paginas web,páginas webs,página web,traductor páginas web,diseño pagina web,diseño de pagina web,creacion páginas web,diseño paginas web,creacion pagina web,hacer paginas web,pagina web gratis,hacer páginas web,diseño página web,crear pagina web,diseñar pagina web,crear una pagina web,crear página web,hacer pagina web,hacer una pagina web,creación de páginas web,creación páginas web,paginas web gratis,paginas web flash,diseños páginas web,diseño de páginas web,traducción páginas web,traducir páginas web,diseñar paginas web,empresas paginas web,pàginas web,diseños pagina web,empresas páginas web,plantillas para pagina web,botones pagina web,alojamiento paginas web,programas crear paginas web,creacion de paginas web,creacion paginas web,diseñadores de paginas web,diseñadores paginas web,creacion paginas web gratis,diseños paginas web,creacion de páginas web,creacion de paginas web gratis,creador de paginas web gratis,diseñar páginas web,programas para paginas web,diseño de paginas web,creación pagina web,diseñador paginas web,creacion de pagina web,foro paginas web,desarrollo paginas web,como diseñar pagina web,programa creacion paginas web,desarrollo de paginas web,desarrollo pagina web,programar paginas web,crear pagina web gratuita,publicar una pagina web,como crear una pagina web gratuita,paginas web en valencia,cómo hacer una página web,cómo crear una página web,como hacer una página web,construir paginas web,creación página web,como crear pagina web gratis,hacer paginas web gratis,publicar paginas web,traducir una pagina web,hago paginas web,paginas web en madrid,subir paginas web,paginas web facil,colgar paginas web,como colgar una pagina web,como publicar una pagina web,publicar mi pagina web,quiero crear una pagina web,hacerme una pagina web,construir pagina web,crear tu propia pagina web,modificar paginas web,creador pagina web,creador de pagina web,programas para diseñar paginas web,publicar pagina web,colgar una pagina web,tener una pagina web,pagina web gratuita,crea una pagina web,colgar pagina web gratis,para hacer paginas web,pagina web gratis es,publicar pagina web gratis,programa paginas web,paginas web en html,programas para crear paginas web,plantilla pagina web,promocionar pagina web,publicar páginas web,flash para paginas web,como diseñar paginas web,desarrollo de páginas web,crear paginas web gratis,servidor pagina web,programa para diseñar paginas web,hacer pagina web gratis,crear pagina web gratis,software para crear paginas web,diseñar una pagina web,crear tu pagina web,para hacer una pagina web,diseñar una página web,hacer tu pagina web,hacer mi pagina web,subir una pagina web,como subir pagina web,para crear una pagina web,hacer una pagina web gratis,crear página web gratis,crear una página web,como se crea una pagina web,crear mi propia pagina web,pagina web com,pagina web de orange,como hacer tu pagina web,crearse una pagina web,como crear una página web,como crear pagina web,quiero hacer una pagina web,crear un pagina web,mi pagina web,hacer una página web,como ganar dinero con una pagina web,construir una pagina web,hacer página web,hacer un pagina web,como hacer paginas web,como crear paginas web,crea tu pagina web gratis,como poner una pagina web,crea tu pagina web,crear web,creacion web,diseños web,diseño web,diseno web,publicar web,crear páginas,una web,hacer web,páginas wed,mi web,servicios web,publicar páginas,como web,tu web,páginas html,para web,pagina de internet,páginas gratis,diseño webs,páginas diseño,diseño de páginas,hosting,paginas,programas web,creación web,traducir páginas,raductor páginas,páginas inglés,traducción páginas,páginas al,traducir web,traductor online web,paginas de internet,traductor web,paginas internet,pag web,diseño de paginas,diseño paginas,buscador web,español web,internet web,traductor ingles español web,empresas diseño web,traductores web,diseño de web,sitios web,páginas de internet,diseño web flash,diseño web economico,diseño grafico,diseño gráfico,diseño gráfico publicitario,estudios diseño gráfico,cursos diseño gráfico,diseño gráfica,diseño gráfico editorial,diseño graficos,estudio diseño gráfico,escuelas diseño gráfico,curso diseño gráfico,escuela diseño gráfico,diseño gráfico madrid,diseño gráficos,diseno grafico,diseño grafico publicitario,diseñadores gráficos,diseño grafica,diseño grafico editorial,estudio diseño grafico,diseñador gráfico,curso diseño grafico,carrera diseño gráfico,libros diseño gráfico,revista diseño gráfico,empresas diseño grafico,empresas diseño gráfico,empresa diseño gráfico,programas diseño gráfico,trabajo diseño gráfico,empleo diseño gráfico,concurso diseño gráfico,concursos diseño gráfico,blog de diseño gráfico,blog diseño gráfico,diseño gráfico online,software diseño gráfico,diseño gráfico on line,diseño grafico online,diseño grafico publicidad,foros diseño gráfico,blog de diseño grafico,blogs de diseño grafico,diseño grafico actual,material diseño grafico,base diseño grafico,pc diseño grafico,diseño grafico on line,ability diseño grafico,blog diseño grafico,blogs diseño grafico,clase diseño grafico,diseño grafico wikipedia,portal diseño grafico,precio diseño grafico,diseño grafico pdf,mejor diseño grafico,foros de diseño grafico,ideas diseño grafico,foros diseño grafico,diseño grafico 2008,foro de diseño gráfico,book diseño grafico,book de diseño grafico,foro diseño gráfico,diseño grafico bcn,curriculum diseño grafico,diseño grafico linux,recursos diseño gráfico,recursos diseño grafico,galeria diseño grafico,noticias diseño grafico,foro de diseño grafico,diseño grafico palma,foro diseño grafico,diseño grafico comunidad,tarifa diseño grafico,portfolio diseño grafico,ilustración diseño gráfico,monitor diseño grafico,diseño grafico leon,diseño grafico e ilustracion,diseño grafico ilustracion,tendencias en diseño grafico,diseños gráfico,diseño artes graficas,diseñadores gráfico,tendencias diseño grafico,diseño gráfico pamplona,diseño de graficos,diseño grafico cartel,arte diseño gráfico,diseño grafico carteles,portafolios diseño grafico,diseño grafico santander,diseño grafico infantil,diseño grafico palma de mallorca,diseño grafico japones,diseño grafico vectorial,diseño grafico girona,diseño grafico marbella,portafolio diseño grafico,diseño grafico rapidshare,estudio de diseño grafico,peret diseño grafico,estudios de diseño gráfico,diseño grafico santiago de compostela,estudios de diseño grafico,diseño grafico e industrial,estudios diseño grafico,libreria diseño grafico,diseño grafico londres,estudio de diseño gráfico,diseño grafico industrial,diseño gráfico universidad,diseño grafico toledo,curso de diseño gráfico,diseño grafico santiago,diseño grafico lugo,diseño grafico tarragona,arte final de diseño grafico,arte diseño grafico,diseño grafico antequera,diseño grafico denia,escuela diseño grafico,diseño grafico palencia,universidad diseño grafico,diseño grafico logotipo,diseño grafico ferrol,diseño grafico zamora,diseño grafico vitoria,diseño grafico san sebastian,diseño grafico jerez,diseño grafico logroño,diseño grafico benidorm,carrera diseño grafico,diseño grafico caceres,diseño grafico lleida,master diseño gráfico,diseño grafico castellon,master diseño grafico,fuentes diseño grafico,cursos de diseño gráfico,publicidad diseño gráfico,diseño grafico alcala,cursos diseño grafico,revistas diseño gráficodiseño grafico gandia,diseño grafico gran canaria,diseño grafico web,diseno gráfico,diseño editorial,diseño interiores,diseño industrial,estudio diseño,diseño carteles,publicidad diseño,diseño multimedia,diseño creativo,diseño imagen corporativa,diseño paginas,diseño publicitario,diseño stands,logotipos,diseño gràfico,diseño tipografía,diseño tipografia,dibujo gráfico,arte gráfico,diseño ilustración,diseño,diseño ilustracion,diseño visual,diseño de imagen,imagen diseño,maquetación,cartel diseño,diseño moda,diseño creatividad,diseño logotipo,diseño folletos,diseño portafolio,diseño comunicación,diseño logotipos,identidad corporativa,empresas diseño web,diseño páginas web,empresas diseño,diseño webs,imagen corporativa,diseño catalogos,diseño logos,diseño pagina web,páginas web,diseño de imagen corporativa,gráfico gráfica,folletos,diseño corporativo,diseño web,diseño digital,alojamiento web,alojamiento web dominio,alojamientos web,alojamiento web hosting,alojamiento web asp,mejor alojamiento web,alojamiento pagina web,alojamiento webs,alojamiento web php,alojamiento web gratis,alojamiento web gratuito,alojamiento web español,alojamiento páginas web,alojamiento sitio web,alojamiento web ilimitado,alojamiento web gratuitos,dominios alojamiento web,alojamiento web lycos,servidores alojamiento web,alojamiento web ftp,servidor alojamiento web,alojamiento paginas web,alojamiento web barato,alojamientos paginas web,alojamiento de web,dominio y alojamiento web,foro alojamiento web,alojamiento de pagina web,alojamiento de páginas web,alojamiento web profesional,contratar alojamiento web,servicio alojamiento web,precio alojamiento web,alojamiento web linux,alojamiento web sin publicidad,alojar web,alojamiento web españa,alojamiento de paginas web,precios alojamiento web,alojamiento web google,alojamiento web com,web de alojamiento de,alojamiento web,por,alojamiento para web,alojamiento web 1,alojamiento web mas,alojamiento web orange,alojamiento web wikipedia,alojamiento web ya,el alojamiento web,web y alojamiento,alojamiento web net,alojamiento web pago,sobre alojamiento web,alojamiento web es,alojamiento web que,alojamiento web free,alojamiento web windows,empresa de alojamiento web,comparativa alojamiento web,alojamiento web jsp,un alojamiento web,alojamiento gratuito de web,alojamiento de sitios web,alojamientos web gratis,alojamiento sitios web,alojamientos de paginas web,alojamiento web trafico,alojamiento paginas web gratis,alojamiento web sin,alojamiento web soporte,proveedor de alojamiento web,alojamiento web gratis en,alojamientos web gratuito,dominios y alojamientos web,alojamientos web gratuitos,alojamiento web gratuito sin,alojamiento web gratis sin,alojamiento web gratuito en,mi alojamiento web,alojamiento web gratuito con,alojamiento web gratis con,alojamiento web gratuito para,dominios y alojamiento web,de dominios y alojamiento web,alojamiento de paginas web gratis,alojamiento web gratis en español,alojamiento de web gratis,mejor alojamiento web gratis,y alojamiento web gratis,alojamiento web gratis español,servicio de alojamiento web,mejor alojamiento web gratuito alojamiento web gratutito,servidores de alojamiento web,alojamiento web trafico ilimitado,alojamiento pagina web gratis,alojamiento gratis para web,registro de dominios y alojamiento web,alojamiento web gratis ftp,alojamiento web gratuito sin publicidad,alojamiento web gratis sin publicidad,el mejor alojamiento web gratuito,alojamiento web gratis php,comprar alojamiento web,alojamiento web sql,alojamiento web gratuito php,empresas alojamiento web,alojamiento gratuito paginas web,el mejor alojamiento web,alojamiento gratuito de paginas web,alojamiento de una web,empresas de alojamiento web,mejores alojamiento web,alojamientos de web,comparativa alojamientos web,alojamiento gratuito pagina web y alojamientos web,alojamiento para pagina web,mejores alojamientos web,alojamiento web tomcat,alojamiento web con,es un alojamiento web,alojamiento web joomla,web hosting,hosting,dedicated hosting,hosting ftp,website hosting,best hosting,hosting php,hosting unlimited,webhosting,hosting cpanel,game hosting,host,hosting asp,reseller hosting,shared hosting,server hosting,web host,hosting - linux,email hosting,vps hosting,hosting gratis,dominios hosting,image hosting,hosting asp.net,internet hosting,free hosting,hosting directory,hosting profesional,hosting españa,comprar hosting,hosting windows,hosting argentina,domain hosting,hosting reviews,mejor hosting,hosting 100mb,virtual hosting,hosting español,servicios de hosting,servicios hosting,hosting servers,managed hosting,cheap+hosting,hosting services,alojamiento hosting,hosting gratuito,hosting mexico,hosting peru,hosting usa,hosting 1,one hosting,hosting wikipedia,top hosting,hosting bueno,hosting es,buen hosting,hosting service,hosting space,international hosting,imagen hosting,free web hosting,net hosting,hosting review,hosting recomendado,opinion hosting,hosting digital,hosting frontpage,hosting plans,mi hosting,hosting mac,cgi hosting,hosting fotos,hosting de fotos,precio hosting,ranking hosting,hosting domains,foros hosting,hosting chile,audio hosting,hosting wiki,hosting gb,hosting compartido,hosting virtual server,mejor hosting españa,hosting economico,hosting españoles,mejores hosting,hosting provider,foro hosting,all in hosting,hosting de imagenes,oferta hosting,hosting · blog,upload-hosting,comunidad hosting,hosting solutions,hosting cheap,hosting imagenes,mail hosting,servicio de hosting,best web hosting,web hosting españa,hosting venezuela,servicio hosting,web hosting chile,hosting sql,dominio hosting,hosting y dominios,hosting ilimitado,sql server hosting,hosting paginas web,dominio y hosting,contratar hosting,hosting colombia,lmi hosting,cambiar de hosting,hosting en español,hosting loft,photo hosting,host serve,free image hosting,hosting dedicado,empresas de hosting,streaming hosting,hosting de pago,hosting sms,hosting barato,jsp hosting,hosting isp,hosting chileno,hosting casero,hosting en españa,dina hosting,precios hosting,free ftp hosting,free photo hosting ru,php web hosting,precios de hosting,hosting para web,best free hosting,free hosting php,free hosthosting ru,free photo hosting,hosting valencia,free web host,hosting plesk,minerva hosting" />
-
08-29-2009, 09:37 AMcrozer
wow, wow, WOW.
i love this critique, i hope i could get this all the time, for free.
i am aware about many of those w3c errors that popped up. i have to mention that the website is barely 35% finished.
=====
And I just wanted to ask...why are there so many meta keywords on your homepage?
the meta-tags were just added from my main website. they'll be removed as soon as the main structure and coding of the web's done.
The purpose of the site isn't very clear...
I know. however, it's my client's decision. the web's topic is not music/bands, it is a whole mixed portfolio of an artist in general. music, photography, design, culture, etcc.. I do know what you mean, though.
The very top headline needs some attention...
Thanks for that. i was really wondering and having a bad time deciding whether it did fit or not.. and I think i will put my hands on it.
Your content needs a little bit more detail..
actually, i did use lipsum.com, though i copied the 5-paragraph result onto the html <p></p>. is there some other way of doing this?
Some technical issues. When I zoom out to view your whole page, your footer basically disappears at 70% (in ie7), I don't know if it happens in firefox..
i guess it's me, but i'm pretty tired of IE1-8's incompatibilities. i know i should test the website on both browsers, and even on chrome, safary and opera.. but it's somehow a way of advertising and indirectly promoting firefox (my beloved browser).
Once again, thank you very, very much for this delightful critique. i hope we can talk another time and share some tips and experiences with web-design/development, as i'm impressed by your knowledge.
add me any time: icrozer@hotmail.com -
08-29-2009, 10:07 AMChrisI'm here all the time. Just feel free to post your work. I take my critique very seriously, and I do my best to ensure that it helps you in some way. I am in no way perfect myself, but I like to be able to bring people to a standard that I think is appreciated.Quote:
Originally Posted by crozer
[QUOTE]
Hah, thereinlies my point. I interpreted the site all wrong. :)Quote:
Originally Posted by crozer
Quote:
Originally Posted by crozer
For the most part, it does seem to suit the design, and it could be a very effective element. The only thing I think it really needs is a slight adjustment size-wise.
Quote:
Originally Posted by crozer
I mentioned the formatting, mostly. Headlines should be brought down maybe 2-3 pixels. A good rule of thumb I like to follow with content is the rule that you never use more than 2-3 lines of text to summarize an article. Oftentimes people get too wordy, and it tends to make the page seem more bulky than it really needs to be. You can address this, and incorporate this by breaking your current / past articles into snippets. This gives your site and overall layout the appearance of constantly being updated. I was actually going to try and go through and adjust things myself (firebug) but I could not find a selector for h2 in your styles.css document.
Quote:
Originally Posted by crozer
I agree that we should really be able to stick to more standards-compliant browsers. We do kind of increase the life-expectancy for browsers like IE6-IE7. Cross-browser compatibility is important mainly because of the effect it has on your overall target audience. Most of your clients may in fact, be using internet explorer! So keep that in mind.
Always here. :)Quote:
Originally Posted by crozer
