Criticism for my first site?

Monroe

Member
MONROE IV

I originally started making it so I could use it to learn hands-on while learning HTML and CSS. Then when it started coming together I made it my homepage with links to all the sites and resources I visit frequently.

Then I decided why not make it a resource site for everyone else to use as well. So I'm working hard to fill it up with valuable resources for everything related to Photoshop, as well as HTML and CSS.

I know the layout is very simple, but I was looking at some other similar sites and they seemed way too crowded and busy. So I'm trying to keep it clean and effective.

Any tips, comments, criticisms, or help that you guys could offer would be very much appreciated.
 
Hey Monroe. First things first it's better than my first design, so don't get disheartened if you get more negative comments than positive, I'm a believer that web design (the design and coding) can be learned, albeit some people are more naturally gifted at it and get that head start. Everyone starts at a certain point and you learn from there.

Regarding your site, the first thing I notice is the web address. If you're serious about the site then I'd advise investing in a domain, they're not very expensive, depending on what extension you decide on. It automatically improves the credibility of your site from a teenager having a play to someone who is serious about his website.

The design itself is ok. I wont say that I like it though, I've got to be honest. As I say, much better than some of my early stuff, so don't be too disheartened. How to improve it? Well, I'm not a fan of the boxed in look, it makes everything feel cramped. Try and do something free-er (if that makes sense) and don't be scared to space out items a little (you could do with a larger line-height for your paragraphs, they look a little cramped too. To do this use p { line-height:1.6em; } - change the em value until it looks right)

Also, there's scroll bars in view due to the code 'overflow:scroll'. Not a good look, I advise having the content flow all the way down as per normal (ie. take out the height and overflow from that style).

Talking about that, you've got inline styles. Now, this is something Harry could probably explain better, but you want to seperate your styling from your content. There's a number of reasons for this, which is explained here.

I think I had more to say, but I've got distracted so that'll have to do.

EDIT: Oh yeah, also add a favicon by adding this code to the header: <link rel="icon" type="image/png" href="http://example.com/myicon.png">
 
That's great criticism Fred! I'm not sure which browser you are using, but I integrated FleXcroll so that I can scroll the content area (so the page doesn't resize itself) without the scrollbars being visible. I'm using Firefox and it works for me.

I understand what you're saying about the domain, but as this is my first site it's more for me to mess around with and grow my knowledge of coding and design than to rack in thousands of visitors.

I'm well aware of the whole "separating content from style" movement. I do use a few external style sheets and try to refrain from inline styles, but I gave in a few times. I will get around to omitting on inline styles very soon though, and clean up all of the code.

As for the line-height, etc. I'm going to get to work on that right now and see if I can't space it out some.

Thanks a great deal for your comments. If you have any more tips, please send them my way! I love doing revisions.
 
Cool man, sounds good. I personally still wouldn't recommend scrolling for 90% of situations, there are probably some cases that it would work in but for me main content shouldn't be contained and should be the main emphasis of the site, the design should work around that and not limit it. That's my two cents anyway.
 
I agree with everything Fred has said, and it is a good starting point. So I'll just add a few things, based on my opinions/taste.

Firstly I think the logo/header would look much better aligned closer to the right, probably in line with the inside of the border. I'd also make the margin above below the header and the main content the same distance as from the side.(That may just be me though!) That said the black border could be half the size it is.

The titles on the page shouldn't be centred, and all the uppercase elements should be typed out as normal and changed to uppercase using css.
Code:
text-transform: uppercase;
I think you could make the navigation more obvious and then you wouldn't need the "Navigation" title.

I don't particularly like the faces where they are, could they be moved into the background? Maybe peeking out from behind the main content area, and then you could move the navigation over. This would allow you to clearly define the navigation.

Finally I'm not a big fan of the green at all. I always think that type of green looks a bit tacky.

Hope this helps! (Again, just my personal opinion).

edit: I'd definitely lose the scroll, just let the content area expand. I have to scroll twice in my second monitor as the content area is too long to fit in the screen on its own.
 
I went back into the code and took out all of the inline styles I could find. Should be a lot cleaner hopefully. Perhaps you guys are right about the scroll, personally I love it, but function over beauty right? I'll remove the scroll and just have the page expand I suppose.

Also, I think I'll take your advice and move the smileys outside of the box and have them lined up on the left side of it. Then I'll move the navigation over to the left where the smileys are now. Then I was thinking about moving the featured tutorial and featured stock underneath the navigation (with smaller preview images of course, so it fits nicely), and then just having the right side be pure content.

If the green is tacky, what color would you suggest I replace it with?
 
How would I go about placing them on the outside of the box, but lined up to the left of it, so that they are peeking out from behind it like you mentioned? Could I also fix it so that when you scroll the page down the smileys stay where they're at (on the screen).
 
Well if the content is of a fixed width, you can create a background image for the body of the page and centre it so you know the width.

As for replacing the green, I'm not sure. Why not play about? You could keep one of the shades of green (probably the lighter one) as a highlight colour. Less is more.

You could use black, white and different shades of grey. That way the colour comes from the imagery in the content.
 
Just finished another revision. I removed the scrolling as you guys suggested. Changed the colors too. Even got the smileys outside of the box and fixed to the edge. Quick question though, how do I make the "box" AT LEAST a certain size vertically, so that all four smileys can be see on each page, but make sure that it still expands as the content grows?
 
I finally decided on a color scheme. I'm really feeling this one! Also added a little more detail to the smileys to bring some LIFE to the design. The navigation is clear and recognizable now I believe.


MONROE IV
 
your 'glowing' eyes don't work full stop in my view, the 'glow' is pulling my eyes away from what is important.
 
Thanks for the tip, I toned down the glow. I also added some text to the right of the content box. I like the concept but not the execution. Any suggestions on how to improve it or should I just scrap the idea?
 
I think you and I are very much alike, Monroe. I started out in signature design too, and later moved on to web design, just like you seem to be doing now.

I see that you're modifying a theme; that's fine, but perhaps you should consider rebuilding the theme from scratch because:
  • it can be confusing to change something you didn't build yourself
  • when something goes wrong, it can be hard to tell what the cause is
  • the code of the theme you're modifying is actually not optimal and it would be bad if you copied the techniques thinking it's the correct way

Your code can be simplified quite a bit, and I'm sure you'll learn over time as all of us here did. But you've got a dozen people here that can help you out, right now. So my advise is to start the coding from scratch, step by step. A good first step would be getting the container aligned to your background.

Attached is a screenshot of a coded version. Try to recreate it, the correct way. We're all here to learn and help ;)
 

Attachments

  • Monroe IV.jpg
    Monroe IV.jpg
    15.3 KB · Views: 8
Good advice from Onartis. Interestingly enough I also started out messing about in photoshop with signatures.
 
Onartis said:
I think you and I are very much alike, Monroe. I started out in signature design too, and later moved on to web design, just like you seem to be doing now.

I see that you're modifying a theme; that's fine, but perhaps you should consider rebuilding the theme from scratch because:
  • it can be confusing to change something you didn't build yourself
  • when something goes wrong, it can be hard to tell what the cause is
  • the code of the theme you're modifying is actually not optimal and it would be bad if you copied the techniques thinking it's the correct way

Your code can be simplified quite a bit, and I'm sure you'll learn over time as all of us here did. But you've got a dozen people here that can help you out, right now. So my advise is to start the coding from scratch, step by step. A good first step would be getting the container aligned to your background.

Attached is a screenshot of a coded version. Try to recreate it, the correct way. We're all here to learn and help ;)

As displeasing as it sounds, I'm going to do just that. Should be interesting.
 
Back
Top