cs.punk Posted May 19, 2009 Share Posted May 19, 2009 I am really not trying to get any free traffic and to make you certain of that I uploaded a screenshot of a page... (the blurs are some contact informations and stuff)... Theres a 'roll over effect' (notice the 'discussion board' block)... It just feels so hard to get a design from your head into HTML or CSS. The green and blue looks the best, as if i use other colours it starts to look so uhm 'plankifull' an What should I do? I was thinking of using images to show out the design but I don't want it to become heavy and slow... It's www.metrader.co.cc Heres the code if anyone wants: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Me Trader - Asus Radeon HD4670 512mb</title> <link href="files/css.css" rel="stylesheet" type="text/css" /> <script src="files/OnOffButton.js" language="javascript" type="text/javascript"> </script> </head> <body bgcolor="#004A7F"> <table width="100%"> <tr> <td colspan="2"><p class="heading" align="center">Me Trader </p> </td> </tr> <tr bgcolor="#02FF13"> <td bgcolor="#004A7F"> <a href='index.php' onmouseover="chgImg('home','_on')" onmouseout="chgImg('home','')"> <img src='images/home.jpg' border='0' name='home' /></a> <a href="choose_ad_cat.php" onmouseover="chgImg('post_ad','_on')" onmouseout="chgImg('post_ad','')"> <img src="images/post_ad.jpg" border="0" name="post_ad" /></a> <a href="discussion_board/board.php" onmouseover="chgImg('discussion_board','_on')" onmouseout="chgImg('discussion_board','')"> <img src="images/discussion_board.jpg" border="0" name="discussion_board" /></a> <a href="logout.php" onmouseover="chgImg('logout','_on')" onmouseout="chgImg('logout','')"> <img src="images/logout.jpg" border="0" name="logout" /></a> </td> </tr> </table> <p align="center" class="mediumheading">Asus Radeon HD4670 512mb</p> <p align="center" class="smallheading">Price: R750</p> <p align="right" class="smallheading">Date submitted: 11:52 am 18/05/09 Submited by: <a href='user.php?userid='></a></p> <br/> <p align="center" class="paragraph">Bought for R1200. Has the big cooler on which they say is 15'C cooler than the normal one. DDR3 ram, x2 DVI outputs. and a HDMI connector too i think. if thats *******</p> <hr /> <p align="center" class="mediumheading">Notes:</p><p class="paragraph">Your note has been added!</p><form name='noteform' method='post' action='ads.php?adid=4'> <p class='smallheading'> Message: <textarea name='message' cols='64' rows='4' maxlength='1024'></textarea> <br /> <br /> <input name='add_note' type='submit' value='Submit'/> </form> <br/> <hr/> <hr/><p class="smallheading">Note Submitted By: <a href='user.php?userid=5'>ellof</a> <br/>Date submitted: 02:28 am 19/05/09</p> <p align="center" class="paragraph">I'll pay you******************************************</p> <hr /><p class=page>Page: [<b>1</b>] </p><hr/> <p align='center' class='copyright'>Copyright © Me Trader 2009</p> </body> </html> It's abit messy as I use PHP... Quote Link to comment Share on other sites More sharing options...
cs.punk Posted May 19, 2009 Author Share Posted May 19, 2009 SO sorry guys forgot about the screenshot [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 19, 2009 Share Posted May 19, 2009 To get you started, you should look at how other sites are designed. Look for common elements like header images, navigation menus, content columns, and other things of that nature. Observe how they add a sense of structure to the page - by using headings, or borders to separate sections, etc. The positioning of elements is key. IMO, the first step should be to build the general layout. Fiddle around with the raw HTML (or, even better, use a graphics editor) to see where elements should go. Once you're happy with that, then you can go on to colors and font. With your site, in particular, I'm not a fan of the blue and green combo. It puts a bit of strain on my eyes. A simpler color combination with more contrast may work better. In fact, I think a three or four color design would work best. Black and white for the text, so it's easy to read (see: CNN, Amazon, ESPN, IGN, etc), and the other, more exciting colors to give your site personality and visible 'oomph'. Hope this helps a bit. Quote Link to comment Share on other sites More sharing options...
cs.punk Posted May 19, 2009 Author Share Posted May 19, 2009 But I really can't think of anything practical... I am so bad at this... Could anyone spare a thought to think of something I can actually do?... All I can think of is a 'ribbon bar' insted of the 'block buttons'... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.