Design feedback

Discussion in 'HTML & Website Design' started by geoiss2004, Jan 4, 2010.

  1. #1
    Hey all

    I am looking for constructive critism on my new website: http://www.creativefeedback.co.uk/

    Ironically, the premise of this website is to post design work that is unfinished in an attempt to receive feedback, but it's a little dead at the moment.

    Thoughts on the layout of information and colour scheme is appreciated.

    Thanks

    Matt
     
    geoiss2004, Jan 4, 2010 IP
  2. abhijit

    abhijit Notable Member

    Messages:
    4,094
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    215
    #2
    its a good design ............................add some more categories and templates................put your question in the reviews category
     
    abhijit, Jan 5, 2010 IP
  3. bluecollar01

    bluecollar01 Peon

    Messages:
    50
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    nice design - you should do some a press release on prnewswire.com to get some publicity.
     
    bluecollar01, Jan 5, 2010 IP
  4. dlb

    dlb Member

    Messages:
    203
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #4
    I like how you've managed to use dark colours effectively. It's hard to do and I can appreciate the visual aspect of your design.

    Apart from the slogan I can't really see anything else to change except from opening the Facebook page and community. Leaving areas redundant with text such as 'coming soon' is kind of bad, i'd recommend removing those areas until you're actually ready to get them added.

    Still, nice work!
     
    dlb, Jan 5, 2010 IP
  5. Firas

    Firas Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    its cool you employed the dark color in nice way :)
     
    Firas, Jan 5, 2010 IP
  6. geoiss2004

    geoiss2004 Guest

    Messages:
    1,454
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #6
    thanks guys! i intend to open the facebook page but it's a little disheartening when nobody shows any interest in your site :( i guess i'll have to ram it down their throats! lol

    thanks again
     
    geoiss2004, Jan 6, 2010 IP
  7. jagged

    jagged Peon

    Messages:
    253
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I like the layout but i'm not digging the dark color also the images look to compressed but besides that it looks real good.
     
    jagged, Jan 6, 2010 IP
  8. dlb

    dlb Member

    Messages:
    203
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #8
    Maybe take on bluecollar01's idea and go for a press release to drum up initial support. Or take the initiative yourself and submit your website all over the place. This forum is an excellent resource of information for running a website, from design and development to gaining the traffic.... Take some time to read what is here. Good luck! :)
     
    dlb, Jan 6, 2010 IP
  9. Biobob

    Biobob Active Member

    Messages:
    119
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #9
    I just dont like the red xD, but thats just my preference
     
    Biobob, Jan 6, 2010 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    The green on brown clashes horribly, the absurdly undersized fixed metric fonts are an accessibility /FAIL/ - and your menu items alignment looks more like rendering errors than intentional design.

    That said there's barely enough site to even make a comment on - but let's take a look under the hood.

    This is a new site? So why is it tranny? Transitional is for supporting old outdated markup you shouldn't even be using anymore, not building new sites.

    Div heavy, class heavy, multiple H1's (you do know you're only supposed to use H1 once, right?), nonsensical heading orders (I don't think "Articles" is a subsection of "Community Submissions - View ALL", and it's improper to go to a h3 when you don't even have a h2 between it and the h1), h3's on elements that are NOT section headings, clearing DIV's, presentational classnames (Left? right? marginLeft25px?!?!? At that point why even *** bother using CSS?), the meta is called "keywords" not "keyword", said meta is long tail phrase stuffed... I could keep going for a while here...

    That said you at least tried to use tags with meanings and lists for your lists and actually validates with an attempt at using the tab key once and a while - that's more than most of the people around these parts manage. You just need to ease up on the DIV, classes and other stuff that you really don't need on the page, and start applying headings so the order makes sense. Hell, you even used the title attribute in a manner that makes SENSE. The DIV/Class heavy comment isn't entirely fair either, since it's only really bad between the start of #container through to the end of #content - the footer if not for the poor class-names inside it isn't that bad.

    If I was writing that same page, it would probably go something like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	name="keywords"
    	content="design,feedback,rate,web,help,criticism,criticise"
    />
    
    <meta
    	name="description"
    	content="Looking for impartial critism on your unfinished design pieces? Post it here for FREE and get valuable feedback from your design peers."
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <!--
    
    	Don't forget to implement these later!
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="print.css"
    	media="print"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="handheld.css"
    	media="handheld"
    />
    
    -->
    
    <title>
    	CREATIVE FEEDBACK - Design Ideas, Inspiration and Review
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		<a href="/">
    			<span>CREATIVE</span>FEEDBACK<br />
    			<small>Need a fresh pair of eyes?</small>
    			<b></b>
    		</a>
    	</h1>
    
    	<form action="" method="post" id="userTool">
    		<div>
    			<label for="usernameLogin">
    				Username:
    				<input
    					type="text"
    					name="usernameLogin"
    					id="usernameLogin"
    				/>
    			</label>
    			<label for="passwordLogin">
    				Password:
    				<input
    					type="password"
    					name="passwordLogin"
    					id="passwordLogin"
    				/>
    			</label>
    			<input
    				type="submit"
    				name="submitLogin"
    				value="Login"
    				class="submit"
    			/>
    			<a href="register.php"
    				title="Join today and get FREE creative feedback"
    			>Join for FREE</a> |
    			<a href="reasons.php"
    				title="Why get Creative Feedback?">
    				Why?
    			</a>
    		</div>
    	<!-- #userTool --></form>
    
    
    	<div id="bannerAds">
    	<!-- #bannerAds --></div><hr />
    
    	<ul id="mainMenu">
    		<li>
    			<a href="index.php"
    				title="Creative Feedback Home Gallery"
    				accesskey="h"
    			><b>H</b>OME</a>
    		</li><li>
    			<a href="articles.php"
    				title="Design Articles"
    				accesskey="a"
    			><b>A</b>RTICLES</a>
    		</li><li>
    			<a href="about.php"
    				title="About Creative Feedback"
    				accesskey="B"
    			>A<b>B</b>OUT</a>
    		</li><li>
    			<a href="register.php"
    				title="Join Creative Feedback for FREE!"
    				accesskey="r"
    			><b>R</b>EGISTER</a>
    		</li>
    	<!-- #mainMenu --></ul><hr />
    
    	<div id="fauxColumns">
    
    		<div id="content">
    			<h2>Community Submissions - View ALL</h2>
    			<ul class="thumbs">
    				<li>
    					<a href="submission.php?f_id=18">
    						<img src="uploads/thumb_90746layout5.jpg"
    							alt="Recruitment Template"
    							width="205" height="156"
    						 />
    						Recruitment Template
    					</a>
    				</li><li>
    					<a href="submission.php?f_id=15">
    						<img src="uploads/thumb_19251187371542_T.jpg"
    							alt="Montage"
    							width="205" height="156"
    						 />
    						Montage
    					</a>
    				</li><li>
    					<a href="submission.php?f_id=14">
    						<img src="uploads/thumb_73831home_XMAS.jpg"
    							alt="Northern Web Rocket"
    							width="205" height="156"
    						/>
    						Northern Web Rocket
    					</a>
    				</li>
    			</ul>
    
    			<div class="pagination">
    				<div><!-- right content here --></div>
    				page 1 of 1
    			<!-- .pagination --></div>
    
    		<!-- #content --></div><hr />
    
    		<div id="sideBar">
    			<h2>Category</h2>
    			<ul>
    				<li class="rule"><a href="index.php">View ALL</a></li>
    				<li><a href="index.php?pageno=1&amp;c_id=1">Business</a></li>
    				<li><a href="index.php?pageno=1&amp;c_id=4">Charity</a></li>
    				<li><a href="index.php?pageno=1&amp;c_id=3">Illustration</a></li>
    				<li><a href="index.php?pageno=1&amp;c_id=5">Just for Fun</a></li>
    				<li><a href="index.php?pageno=1&amp;c_id=2">Newsletter</a></li>
    				<li><a href="index.php?pageno=1&amp;c_id=7">Print</a></li>
    				<li><a href="index.php?pageno=1&amp;c_id=6">Website</a></li>
    			</ul><hr />
    			<form action="results.php" method="post" class="search">
    				<div>
    					<input type="text" name="searchField" class="searchField" />
    					<input type="submit" name="submitSearch" value="Search" class="button" />
    				</div>
    			</form><hr />
    		<!-- #sideBar --></div>
    
    	<!-- #fauxColumns --></div>
    
    	<div id="footer">
    
    		<div class="subSection">
    			<h2>Community</h2>
    		<!--
    			<ul>
    					<li>572 members</li>
    					<li>3204 submissions</li>
    					<li>2317 suggestions</li>
    			</ul>
    		-->
    			<p>Coming soon</p>
    		<!-- .subSection --></div><hr />
    
    		<div class="subSection">
    			<h2><a href="articles.php" title="Articles Index">Articles</a></h2>
    			<ul>
    				<li>
    					<a href="article.php?a_id=1"
    						title="Get by with a little help from your friends"
    					>Get by with a little help from your friends</a>
    				</li>
    			</ul>
    		<!-- .subSection --></div><hr />
    
    		<div class="subSection">
    			<h2>Social</h2>
    			<ul>
    				<li>
    					Follow us on
    					<a href="http://www.twitter.com/creativefeedbak"
    						title="Creative Feedback on Twitter"
    					><strong>Twitter</strong></a>
    				</li><li>
    					Find us on <strong>Facebook</strong> (<em>Soon...</em>)
    				</li>
    			</ul>
    		<!-- .subSection --></div><hr />
    
    		<div class="subSection">
    			<h2>About</h2>
    			<p>
    				Creative Feedback is aimed at both hobbyists and industry professionals alike to gain critism on their works.
    			</p><p>
    				<a href="about.php" title="About Creative Feedback">Read More</a>
    			</p>
    		<!-- .subSection --></div>
    
    	<!-- #footer --></div>
    
    <!-- #pageWrapper --></div>
    
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script><script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-11467139-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    
    </body></html>
    Code (markup):

    Which ends up being less code - well, if you take out my comments... and would be valid STRICT. For what you have for appearance, that's all I'd need. No clearing DIV, no extra wrappers, no IMG tags for presentational images....

    Oh, BTW - I do like the IDEA of the site - but if it's going to be about reviews and feedback, it's going to need to dot every t and cross every i... wait, that's not right ;)
     
    deathshadow, Jan 6, 2010 IP
  11. eagedesign

    eagedesign Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    nice design, good color theme

    Keep it up
    Cheers!
     
    eagedesign, Jan 6, 2010 IP
  12. geoiss2004

    geoiss2004 Guest

    Messages:
    1,454
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #12
    wow, very descriptive here! i didnt actually ask for technical critism but okay. i might add that this was built in 2 days from start to completion. generally i would agree that strict is the way to go, but sometimes it's easier to settle for transitional - as long as it validates in that, i'm generally okay.

    in honesty though i'm not sure how you can crisitse my site on a technical level when so many out there are still table based, and don't even get me started on validation (nobody does it). i'm also not sure how you can comment on my colour scheme when your site (deathshadow) actually made me feel sick ;)

    nevertheless i appreciate your comments. i think you ended up with marginly less markup than i did, not that it matters, i would suggest that the build of the website is entirely at the designer discretion. if i want to use "nonsensical" class names and so fourth, that's my perogative.

    I also fail to see how it's weak on the accessibility front - the white font is quite striking on the dark background and anybody using a semi-modern browser will know how to scale up the page (ctrl++) to aid this. also the fonts use text-shadow to added clarification, and as it's aimed at designers most visitors will be using a supporting browser.

    also in ref to the h1 tags - i know that technically you're supposed to only use one, but i actually don't agree. take my site - i have a menu and a content area, both of which are of equal importance. why the hell should i have to choose which is my page header? heading tags are somewhat outdated IMO and can only be used practically inside an article where there is true cause for h1, h2, and h3 etc.

    in ref to the meta, typo on my part by the look of it. the keywords are absolutely right though, not too many and longtail which are proven to be more effective than ambiguous keywords.

     
    geoiss2004, Jan 7, 2010 IP
  13. dlb

    dlb Member

    Messages:
    203
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #13
    I wouldn't worry too much, take a look at his other posts, he is exremely arrogant.

    That is good sportsmanship, but he does have a point about using transitional. Hell, i'd go so far as saying you shouldn't even be using XHTML, but as you said that is the designers perogative. He likes to make the markup human readable for reasons I cannot understand, but that is his perogative, too.

    This is where I disagree with you completely. H1 is used for the page title (read: branding), and should only ever be used as the overall page heading/logo. H2 moves down the chain, content headings and the like. H3 is -probably- where you should be using article titles. Make no mistake, this is how it's supposed to be done. Scattered header tags won't do you any favours and believe me, their importance isn't fading.

    I'd suggest going back to the drawing board and reading a couple of HTML books because, while I appreciate your opinion and actually enjoy your site's design, web standards disagree with your ideology.
     
    dlb, Jan 7, 2010 IP
  14. geoiss2004

    geoiss2004 Guest

    Messages:
    1,454
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #14
    i understand what you're saying but look at the structural layout or many websites, and they just don't follow the traditional heading, subheading, content flow any more. heading tags i think are outdated in their usage - why CAN'T i have two headings of equal importance? i disagree with the W3C on various things and this is one of them. another being the lack of support for target="_blank" on links, which is akin to standards nazi-ism as far as i'm concerned.

    and if we're really going to be weilding the technology finger pointing, surely we should all be developing in CSS3 and HTML5?

    thank you for your response anyway, i do appreciate it. i must state again though i didnt ask for technical feedback - if i had built the bloody thing in tables i'd expect a an uproar. but i haven't.

     
    geoiss2004, Jan 7, 2010 IP
  15. dlb

    dlb Member

    Messages:
    203
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #15
    The thing with CSS3 and HTML5 is that browsers aren't entirely up to speed on them, so developing in those languages now is pointless in this infant stage.
     
    dlb, Jan 7, 2010 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #16
    Uhm, please don't take offense to this, but it took that long? Well, ok - I can see that since you actually have it in a CMS - but the theme took what, two hours tops?

    Why? Strict is less tags and means you aren't using elements you shouldn't be using in the first place?

    Uhm, becuase you asked for feedback? Because there's not enough content on the pages to give feedback on much else?

    You'd not have done well in the 80's. That theme is actually a joke about "Christ, people still program in Pascal?"

    ... and large font/120dpi users don't want to be bothered... many small screen (handheld) users want smaller and cannot set that on the fly. %/EM or at the very least PT exist for a reason. Accessibility guidelines exist for a reason - anything less than 12px is an accessibility /FAIL/ and you shouldn't be using PX unless you HAVE TO (like on an image interaction)

    1) on a background that dark like you're going to see the shadow.
    2) So... you're designing for 5% of the audience out there right now? Actually, what, 1%? I'm not seeing text-shadow even in Opera 10.10 or Safari/Chrome which allegedly support it? You might want to check that - but when 80%+ of the browsing public won't ever see it anyways... (or is it 60% now - I can never keep up with what FF does for playing catchup to ACTUAL standards compliant browsers)

    That's why I'd make the site logo and name the h1 with a gilder-levin image replacement, and both those elements h2. Then they can 'fan out' in proper order. Also means if your site title and/or subtext have keywords/phrases in them you get a second SEO shot.

    I've never had that issue since the rules are REALLY easy. Is this heading a subsection of the heading preceeding it? If so, go to the next lower order (higher numbered) heading, if not is it kin to it? If so, make it the same level... If it's not, then you go up in order (down in number) - if you hit the h1 and already have one, you have the wrong element as a H1.

    Think of it like a newspaper - regardless of appearance/size the name of the paper is at the top of every page. It's the H1. Even when on page 20 it's still the first heading on the page and everything is a subsection of it. You look at the biggest headline on the front page it is ONLY the headline to that one article, the other headlines are not subsections of it. All of those headlines are structurally/gramtically h2 - For example if the tag headline is "MAYOR CAUGHT TAKING MILLION DOLLAR BRIBE" the smaller "Local K-6 gets new building" is not a subsection of that separate article (at least you hope not) so both get H2 - the difference is appearance - and in writing a MODERN website appearance is CSS' job.

    Proper heading orders also make it easier to navigate the page in things like screen readers, handhelds, etc. In many of those devices you can pull up the heading list, and if you have two h1, some of those devices will ignore everything after the second one. Good way to check your orders is to look at the tree in "information -> document outline" in the web developer toolbar for FF. Think of it much like accesskeys.

    Happens. In a number of ways it's one of the reasons I wish there were more 'official' lists of meta tags and that the W3C adopted them into the validator.

    Well, you have the right number (eight or less) and the total length isn't too bad - but they're redundant to each-other. My own testing has shown that keywords works like a word jumble, so far as google (and we can assume other engines are concerned) there is ZERO difference between

    "design feedback, feedback needed, design needed"

    and
    "design, feedback, needed"

    But YMMV.

    Uhm... clear consistent indentation prevents you from making mistakes in the first place, clear legible code is easier to maintain in the long term, nicer for whatever poor shub has to maintain the site when/if you pass it along to someone else, if you type it that way in the first place you don't have to dick with things like "pretty print" that could do more harm than good, makes it easier to see where you should 'cut' when turning that HTML into a PHP template... and not everybody sleazes out pages any old way using some crap WYSIWYG?

    It's a little extra effort during development that saves time in the long term... Hell for me SPEEDS UP development since everything is clear and apparent as to what's what... We're writing websites, not an entry for the IOCCC.

    Tabs or spaces - pick one, not both. Block, INDENT. Close a block? DE-INDENT. Oh noes, is that so hard?
     
    deathshadow, Jan 7, 2010 IP
  17. bluecollar01

    bluecollar01 Peon

    Messages:
    50
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #17
    all i can say is "wow". some peeps need to lay-off the caffeine or see a therapist. i didn't realize nepotism ran so deeply at digital point. i mean this whole thread is begging for a "can't we all just get along" announcement.

    i thought this was a forum for people to get constructive criticism on how to improve their sites not see how fast they can make the other guys dream burn.

    to funny - you guys keep it up.
     
    bluecollar01, Jan 7, 2010 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #18
    What does hiring your family have to do with it?

    That said ;) I often find it annoying how many people can't take criticism of their work - you DARE to say anything negative and magically you are being hostile/confrontational/insulting... Which of course when the thin skinned folks have that type of reaction that's when the escalation starts and it DOES get insulting.
     
    deathshadow, Jan 7, 2010 IP
  19. bluecollar01

    bluecollar01 Peon

    Messages:
    50
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #19
    thank you for catching that - i meant narcism

    you know us good 'ol rednecks don't know anything :)

    and I do think that people should get offended of constructive criticism but some times people construe the opportunity to offer criticism for an opportunity to be completely and utterly rude. that being said some people also construe criticism with being rude.

    it's all about perception.
     
    bluecollar01, Jan 7, 2010 IP
  20. dlb

    dlb Member

    Messages:
    203
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #20
    It depends if you're developing for yourself or for others... Either way, I don't clutter up my HTML but my CSS is purposely on single lines for quicker reference, more information on the screen for me to see such as colours, widths, heights and the like.
     
    dlb, Jan 7, 2010 IP