Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

HTML Reactor

I've been working on a website called HTML Reactor for a while now.  Its main purpose is to be a web design community where users can create resources, tutorials, and advertise their sites for free.  I am posting this now because the site is nearly done, and I would like to focus on it's appearance at this time.  As such, I'm looking for critiques on the website's overall look (as what the user sees is very important!).

HTML Reactor

Thanks in advance for the help!

~Abyss
 
Why would I want to go to a web design community when the design on it is terrible?  Seriously, man, it's not 1998 any more.  If this looked halfway decent I'd consider joining, but right now it looks downright embarrassing.

Also, when your layout type is so easily achieved with css/divs, why are you using tables?  They clog up your code so much.

edit: here's how to fix your design. 

1. convert to css/divs
2. change your colors to ones that don't burn out retinas
3. get an actual logo
4. get rid of those annoying hover effects.

Otherwise, this site has potential.  Your tools look pretty good and I could see this becoming a fairly nice site.
 
Harsh, but very much appreciated.  I think I have an idea of what to do now...and, yeah...ive been meaning to get rid of the hover effects on the links, but I have been pretty busy with the actual php coding up until now.
 
I'm glad you appreciate the feedback, instead of saying "But I ______."

If you want any layout help, I'm willing (and bored!).
 
I just tried to make some web graphics with gimp 2.2, but it seems I suck with graphics...I need to get some to improve the site's appearance, but I'll just get to the css first.

EDIT: I'm having some troule with the css.  The first two columns line up fine, but the third appears below the first two....any ideas?
 

$t3v0

Awesome Bro

To make it more interesting it's going to need a full working system that gives them no problems from start to finish. If sites like these go online and they don't work from the start they struggle to make it past 16 members. What you need to do in all honesty is create a system that works and allows members to upload files AS EASY AS POSSIBLE. At the end of the day you want your database to grow so either:

a) Make it as easy to achieve an upload as possible
b) Input a ton of resources manually

On a further note there are a few issues with the site as it stands right now. I'll point them out in points when bold red = top priority:

1. No DOCTYPE - Not having a doctype can cause all sorts of errors when validating, so it's easier to just have one from the start. As of now your page has 12 errors in XHTML, all mainly stringing from not having a DOCTYPE.
2. You have used tables when tables are easier to use, so zalzer's comment was a little off color. Nut you could at least make them have no cellpadding or border so they don't look like they're from 1996.
3. Keep the fonts consistant! - I see Times new & Verdana within 2 cm of one another.
4. Your style.css has failed by 10 errors - Pay close attention to these before they get out of hand and it becomes a joke to fix. Validating .CSS is the easiest part about making a website, so keep checking it throughout the design.

Validation:

XHTML
CSS

The site has got potential but you have to take a professional approach to things before people that look down upon the above points take it seriously.
 
Hmm...this seems like a pretty big task.  It'll probably have to wait 'til after I get back (I'll be gone for about three weeks starting tomorrow...) Ill get as much as i can done now, though.

EDIT: Hmm...I'm going back to using tables.  It just works better for me.  How's the site look now that I've changed i around a bit? (I'll get to fixing the validation errors after I get back)
 
While a lot better, it still looks fairly horrendous.

For starters, pick a definite color scheme.  These usually consist of three colors. http://www.colorschemer.com/online.html

I see dark red, dark blue, yellow, gray, bright red and bright blue.  =\

Also "Quick Nav" is redundant... it isn't really quicker than the menus you already have.
 
Would it be better if I renamed "Quick Nav" as "Site Map"?

I'll try to fix up the color scheme some more after I get back because I really want to get the admin panel programmed before I leave.
 

___

Sponsor

You are going to have a hard time attracting serious web designers until your site implements valid XHTML and modern web standards.  For starters, run it through a validator such as the one provided by W3C and fix the numerous warnings and errors.  Next work on separation of presentation and content.  Most professional designers take this topic seriously (and the ones that don't should!).  You can start by ripping out the inline styling and icky presentational tags and attributes (font, and the width, height, etc. attributes) and replacing them with some clean semantic ids or class names, then handling your styling in a linked stylesheet (or a couple separated by function, many designers like to use one for position, one for color and decoration, and one for typography for instance).  Trust me, when you go to change your design the first time and you can do it all in one place instead of digging through thousands of lines of code in disparate php files you will thank yourself.

As for design sense, that's really something that comes from developing your artistic taste and ability, but a solid understanding of color theory and the art of UI design is a great way to both build your skill and find inspiration.  If you can afford to buy a book I highly recommend Transcending CSS by Andy Clarke, which is also available on Safari Books Online (if you haven't heard of Safari, it's like the computer books section of Barnes and Noble on steroids, with access to up to 10 books at a time for 20 bucks a month or unlimited access for 30 and great discounts on buying physical copies, it's an *amazing* resource).  Sitepoint also published a book recently on the subject of design theory, I can't recall the name atm but it's worth a read particularly for its chapter on typography. 

You may also consider recruiting an artistic friend to help you do some designing, designer/developer teams are a great marriage of skills.  Just have him do mockups of what he would make the site look like in the graphics app of his choice and provide input on what sorts of things you're comfortable with implementing.  You will find that this is very common in the professional world so it's great practice if you're serious about getting into web design/development. :)

That's probably very overwhelming for a simple commentary but I believe in teaching people to fish.  Good luck :D
 
We'll I'm still on vacation, so I only have limited access to a computer right now, but I'll try to fix the validation errors and stuff.  Unfortunately, I have no friends that are artists...If anyone could help with that, I'd really appreciate it.
 
Ok, I got a new template and editted it suit my needs.  I only added this template to the home page, so the other pages are a bit dysfunctional.  But, I'd appreciate it if you could critique my new template.

On another note, I managed to fix a lot of the validation errors.  Some of them I can't seem to fix for some reason.
 
I think if you're going to make an site that teaches HTML, you should be able to code your own layout and not have to use a free one from another website.
 
Actually, since I'm terrible at making graphics myself, I just took a free template from the internet, and recoded it.  So, for the most part, the coding is mine (save for some of the css which I left unaltered).
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top