As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

Just sitewhoring, no worries! (New Design)

PiggoPiggo Registered User regular
edited August 2007 in Artist's Corner
I'm currently working on my website, which i'm very happy with but need a bit of a hand if thats okay. I want to make sure that it works in the main browsers. I on a mac and it seems fine on firefox and safari, but im worried ie is going to display it weirdly.

I would also like design crits, its quite easy to change stuff so i'm very open to suggestions.

So you know what its supposed to look like;

welcome_to_ross_cubbon_design-20070811-175151.jpg

The site is rosscubbon.com

Thanks!

Piggo on

Posts

  • MKRMKR Registered User regular
    edited August 2007
    #1: I'm asked to install Quicktime; the website does not provide any compelling reason to do so.
    #2: All that text on the right is one long column in IE7
    #3: Why does it look like it was made in 2000-2003? CSS is the thing now. It's no longer necessary to squish everything together in tables. It's using divs, but not in a way that makes using them better than using tables.

    MKR on
  • Shazkar ShadowstormShazkar Shadowstorm Registered User regular
    edited August 2007
    Text on the right runs off the side of the grey for me. I'm in Firefox on OS X.

    Shazkar Shadowstorm on
    poo
  • BroloBrolo Broseidon Lord of the BroceanRegistered User regular
    edited August 2007
    Your site doesn't resize very well at all. Most people will drag in from the bottom right, but in this case it cuts off all of your text. This is Opera 9.2, by the way.

    I like the look, it seems fairly clean, but you might want to spend some time working on scalability.

    Brolo on
  • PiggoPiggo Registered User regular
    edited August 2007
    Okay, well there are obviously lots of things wrong with it! Joy!

    MKR I thought i was using divs and css correctly. I know i've used alot of divs buts thats because i was trying to get it to resize properly. The site was designed to be scalable but its obviously not working properly yet. How should i be using them?

    Im going to have to go on a windows computer and try and figure out why the sizing is messing up and the text column as well.

    Oh and it asked you to install quicktime because the middle column has a quicktime movie in it.

    Piggo on
  • MKRMKR Registered User regular
    edited August 2007
    "Oh and it asked you to install quicktime because the middle column has a quicktime movie in it."

    You missed my point - if it's going to ask me to install something, it needs to be explained what the page wants to show me somewhere on the page so I can assess whether or not it's worth installing it just to view a video.

    "MKR I thought i was using divs and css correctly. I know i've used alot of divs buts thats because i was trying to get it to resize properly. The site was designed to be scalable but its obviously not working properly yet. How should i be using them?"

    Oh, they're syntactically correct, but you could just as easily have done it with tables. The point is that CSS allows you to open a page up a bit, but you have everything squished together. It's very prison-like. Go use archive.org to look at any long-running website. See how they're bunched together and under 800x600? The technology of the times necessitated that, but now we can have nice, open pages.

    MKR on
  • PiggoPiggo Registered User regular
    edited August 2007
    I think i've fixed some stuff, finger crossed. The main problem is that i'm working too high a resolution. I was trying to get it too fit a 1028x756 resolution but i obviously misjudged.

    Piggo on
  • PiggoPiggo Registered User regular
    edited August 2007
    MKR wrote: »
    "Oh and it asked you to install quicktime because the middle column has a quicktime movie in it."

    You missed my point - if it's going to ask me to install something, it needs to be explained what the page wants to show me somewhere on the page so I can assess whether or not it's worth installing it just to view a video.

    Okay, when i start creating the rest of the site the main page won't have any quicktime stuff, and ill put a note about it. I hadn't considered that aspect as i thought that quicktime was common, but i obviously should have.

    MKR wrote: »
    "MKR I thought i was using divs and css correctly. I know i've used alot of divs buts thats because i was trying to get it to resize properly. The site was designed to be scalable but its obviously not working properly yet. How should i be using them?"

    Oh, they're syntactically correct, but you could just as easily have done it with tables. The point is that CSS allows you to open a page up a bit, but you have everything squished together. It's very prison-like. Go use archive.org to look at any long-running website. See how they're bunched together and under 800x600? The technology of the times necessitated that, but now we can have nice, open pages.

    The page does scale, but yes the 3 columns are fixed. I will have a play around with using a more scalable design for those parts as well.

    Thanks for the help by the way, much appreciated.

    Piggo on
  • MKRMKR Registered User regular
    edited August 2007
    Piggo wrote: »
    MKR wrote: »
    "Oh and it asked you to install quicktime because the middle column has a quicktime movie in it."

    You missed my point - if it's going to ask me to install something, it needs to be explained what the page wants to show me somewhere on the page so I can assess whether or not it's worth installing it just to view a video.

    Okay, when i start creating the rest of the site the main page won't have any quicktime stuff, and ill put a note about it. I hadn't considered that aspect as i thought that quicktime was common, but i obviously should have.

    MKR wrote: »
    "MKR I thought i was using divs and css correctly. I know i've used alot of divs buts thats because i was trying to get it to resize properly. The site was designed to be scalable but its obviously not working properly yet. How should i be using them?"

    Oh, they're syntactically correct, but you could just as easily have done it with tables. The point is that CSS allows you to open a page up a bit, but you have everything squished together. It's very prison-like. Go use archive.org to look at any long-running website. See how they're bunched together and under 800x600? The technology of the times necessitated that, but now we can have nice, open pages.

    The page does scale, but yes the 3 columns are fixed. I will have a play around with using a more scalable design for those parts as well.

    Thanks for the help by the way, much appreciated.

    "Fixed" and "scalable" are mutually exclusive.

    Edit: Look at my site. See how everything scales up and down cleanly as you size the browser (down to a certain point)? That's scalable.

    MKR on
  • PiggoPiggo Registered User regular
    edited August 2007
    MKR wrote: »

    "Fixed" and "scalable" are mutually exclusive.

    Edit: Look at my site. See how everything scales up and down cleanly as you size the browser (down to a certain point)? That's scalable.

    Yeah i understand what you mean. I had tried to make the site scale, the silver bar stays centered vertically and while the columns stay fixed the bar will extend to the right, with the gray diagonal lines always staying right at the edge. I will make the columns scale as well now, as it would be nicer if everything does.

    EDIT; The final column now scales, and I think it looks quite nice. It should also help fix the weird tiny column thing people were seeing. Quick link.

    Piggo on
  • srsizzysrsizzy Registered User regular
    edited August 2007
    Ugh, I just wrote a whole post and hit the back button on accident so now I have to rewrite it all...

    Okay, first I don't know why MKR is giving so much advice here. Your (MKR) website is not very good. Your content is everywhere, there's no borders, boxes, or lines to separate anything, you have few colors, one of which only exists on your minuscule banner, and your whole page has no margins. Piggo, I'm not sure you should take all your advice from him.

    Also, who doesn't have quicktime? that's one of the plugins that people generally just use and don't ask questions about. Lots of web pages have introductory Flash videos, are you saying they should start with introductory text telling you why you should have flash? No. Just get quicktime like all internet-users do. And wasn't the explanation text there from the beginning anyways?

    Now on to the advice:
    - The gray box with content in it runs into the right side of the screen, making the viewer think there's more content in that direction. If there's not, it's just confusing. You should find some way to stop the viewer from assuming this. Definitely more of a margin on the right side of the text would help.
    - You have too much space on the bottom of the page. You should fill up the whole page. Bigger text would work, yours is small, and if other pages have more/larger content, then it should be fine. I hope you plan on doing DIVs with independent scroll bars if your content grows too large. If You can't fill the grey box at all, then center your content vertically.
    - Your links are too small vertically. Your making a whole divider of space for them, but they're all in one corner. Either make them bigger, or outline them in a box, move the text to the left, and put the movie on the right. Again, fill your page, blank space is useless.
    - You need a more exciting banner. The banner you have on the side is boring and bland, it's blornd. If you made that video, I'm sure you can find some graphic way of making the text better, or mixing the text with some sort of elements in order to make it more exciting.
    - Your page doesn't work on a resolution lower than 1024x768. That's not good. Not everyone has big monitors nowadays. The way I did this with my school's website was center everything, and make sure everything could be seen easily in 800x600, but still look good in higher resolutions.

    That's all I can think of so far. You don't have anything else for me to look at yet. I'd say with that video you should have included more colors, or something...it's awesome, but it's missing some last little element that I can't exactly describe. Like if the objects/people that went by were moving that would have helped (like video instead of pictures moving) but that would have been really hard.

    srsizzy on
    BRO LET ME GET REAL WITH YOU AND SAY THAT MY FINGERS ARE PREPPED AND HOT LIKE THE SURFACE OF THE SUN TO BRING RADICAL BEATS SO SMOOTH THE SHIT WILL BE MEDICINAL-GRADE TRIPNASTY MAKING ALL BRAINWAVES ROLL ON THE SURFACE OF A BALLS-FEISTY NEURAL RAINBOW CRACKA-LACKIN' YOUR PERCEPTION OF THE HERE-NOW SPACE-TIME SITUATION THAT ALL OF LIFE BE JAMMED UP IN THROUGH THE UNIVERSAL FLOW BEATS
  • PiggoPiggo Registered User regular
    edited August 2007
    srsizzy; Thanks for that post ,very helpful. I think i need to rethink the whole site design slightly to optimise the use of blank space and how it will fit in 800x600 then scale up. The logo is quite boring but i was going for quite a simple design; i will take it into consideration though.

    And thanks for the crits on the video as well! Wasn't expecting that! As a bit of background; the site is going to be used as a portfolio as im studying graphics at the moment at uni, i've just finished my first year and that was the last thing i made. So it was the most obvious choice to use as content for the test page.

    Piggo on
  • PiggoPiggo Registered User regular
    edited August 2007
    mock-up-2.png___100___rgb_8_-20070812-014517.jpg

    Quick redesign idea. The main gray area should then be able to scale for all resolutions, a lot less space is wasted and it allows me to type as much or as little as i want. Not done anything to the logo yet, still thinking about that.

    Piggo on
  • MKRMKR Registered User regular
    edited August 2007
    Piggo wrote: »
    mock-up-2.png___100___rgb_8_-20070812-014517.jpg

    Quick redesign idea. The main gray area should then be able to scale for all resolutions, a lot less space is wasted and it allows me to type as much or as little as i want. Not done anything to the logo yet, still thinking about that.

    So what is this site about? It'll be easier to give advice if we know who you're designing for. :P

    MKR on
  • srsizzysrsizzy Registered User regular
    edited August 2007
    MKR wrote: »
    So what is this site about? It'll be easier to give advice if we know who you're designing for. :P
    Piggo wrote:
    As a bit of background; the site is going to be used as a portfolio as im studying graphics at the moment at uni, i've just finished my first year and that was the last thing i made. So it was the most obvious choice to use as content for the test page.



    As for the new design, awesome. I wasn't going to suggest a vertical layout because I thought what you had was original and new. I hesitated showing my own site design (www.northcoastprep.org) because it uses that same design. I think you can make it work though, and it's a good start. The space is used a lot better now.

    Now to move on to pointers that are more nitpicky than totally constructive...

    I'd say make the video a tad smaller and give the text a little space...but this actually depends on how big the content your showing is going to be on average. So say the top area is where the image/video is, and the bottom is where the text is. If there's going to be a lot of text, I'd say there should be a scroll box on the bottom for the text, and it should be a little larger in comparison to the content in the upper area, but not by all that much...basically, this:

    webhelpon2.jpg

    Resized and moved stuff, basically just a balancing issue. Also thought you might want to move your title, but it's a matter of preference, it's really not necessary. Keeping it where it is gives your page more of an individual look, and I'd keep any element that can do that. I'm also suggesting some sort of stylized box around the video/content on the top, but that's just something I'd do again. also, I think the banner could benefit from a border/box with some sort of graphic content as I mentioned earlier, but you mentioned you were thinking about that.

    These are all just random suggestions based on where I would go if this were my page. Only take to heart something you think would further the personal image you want to create, since this is your portfolio site. Though at the same time you have to keep the "customer" interested, so lot of different opinions helps. Anyways, keep it up. This layout is a step up in terms of convenience of use and usage of space.

    srsizzy on
    BRO LET ME GET REAL WITH YOU AND SAY THAT MY FINGERS ARE PREPPED AND HOT LIKE THE SURFACE OF THE SUN TO BRING RADICAL BEATS SO SMOOTH THE SHIT WILL BE MEDICINAL-GRADE TRIPNASTY MAKING ALL BRAINWAVES ROLL ON THE SURFACE OF A BALLS-FEISTY NEURAL RAINBOW CRACKA-LACKIN' YOUR PERCEPTION OF THE HERE-NOW SPACE-TIME SITUATION THAT ALL OF LIFE BE JAMMED UP IN THROUGH THE UNIVERSAL FLOW BEATS
  • PiggoPiggo Registered User regular
    edited August 2007
    srsizzy wrote: »
    As for the new design, awesome. I wasn't going to suggest a vertical layout because I thought what you had was original and new. I hesitated showing my own site design (www.northcoastprep.org) because it uses that same design. I think you can make it work though, and it's a good start. The space is used a lot better now.

    Yeah i liked the idea of doing a horizontal layout, but i think it is going to be easier doing it as a standard vertical design.
    srsizzy wrote: »
    Now to move on to pointers that are more nitpicky than totally constructive...

    I'd say make the video a tad smaller and give the text a little space...but this actually depends on how big the content your showing is going to be on average. So say the top area is where the image/video is, and the bottom is where the text is. If there's going to be a lot of text, I'd say there should be a scroll box on the bottom for the text, and it should be a little larger in comparison to the content in the upper area, but not by all that much...basically, this:

    IMAGE

    Resized and moved stuff, basically just a balancing issue. Also thought you might want to move your title, but it's a matter of preference, it's really not necessary. Keeping it where it is gives your page more of an individual look, and I'd keep any element that can do that. I'm also suggesting some sort of stylized box around the video/content on the top, but that's just something I'd do again. also, I think the banner could benefit from a border/box with some sort of graphic content as I mentioned earlier, but you mentioned you were thinking about that.

    These are all just random suggestions based on where I would go if this were my page. Only take to heart something you think would further the personal image you want to create, since this is your portfolio site. Though at the same time you have to keep the "customer" interested, so lot of different opinions helps. Anyways, keep it up. This layout is a step up in terms of convenience of use and usage of space.

    Thanks for all this, greatly apericated. I'm going to take the mock up and your crits and make it into a proper page and then go from there.

    Piggo on
  • MKRMKR Registered User regular
    edited August 2007
    srsizzy wrote: »
    Ugh, I just wrote a whole post and hit the back button on accident so now I have to rewrite it all...

    Okay, first I don't know why MKR is giving so much advice here. Your (MKR) website is not very good. Your content is everywhere, there's no borders, boxes, or lines to separate anything, you have few colors, one of which only exists on your minuscule banner, and your whole page has no margins. Piggo, I'm not sure you should take all your advice from him.

    The appearance of my site is completely intentional - I like minimalistic. I used it as an example of scalability, not style, and it does scale. The advice is still valid. :\

    MKR on
  • PiggoPiggo Registered User regular
    edited August 2007
    Well i've been working on the site over the week, and given it a complete redesign. While the site is still a fixed width, it can be read at 800x600 with a scaling background so it will still look good at higher resolutions. I have checked the site in as many browsers as possible, but there may still be problems and the site is still work in progress.

    I have only made two pages at the moment, the front page, and the redesigned page you have seen previously. Just click on the big image on the front page to get to that one.

    The logo at the top with the red background is going to change for each page to fit with the content on it. When i create a few more pages you will see this in effect.

    If you have any other comments or crits i'm still open to suggestions. Hope you like it!

    www.rosscubbon.com

    welcome_to_ross_cubbon_design-20070818-135536.jpg

    Piggo on
  • RyeRye Registered User regular
    edited August 2007
    I'm going to offer some vague design advice that you are at liberty to disregard (seeing as you're so far into the process). Perhaps I don't know what I'm talking about, but hear me out.

    When I see your site, I'm all too aware that I'm looking at a website. Everything is boxed in, and the boxes contain boxes. I (or rather the viewer) needs to be fooled or wowed in order to enjoy my stay at the hotel cubbon. Your motion graphics and logo work is very good, and I see no reason not to use that for your website's design direction.

    here's something I came up with:
    rosscubbon.jpg


    Also, if you want your banner to change, don' change themes. In fact, don't change colors. It's disorienting to a fresh viewer to see the banner change from red to blue - it feels like they left your site. Maybe move the text around change the background, but make sure it stays in the same style: I.E. communist china colors. Or whatever color scheme you end up choosing.

    Rye on
  • KVWKVW Registered User regular
    edited August 2007
    I dislike the text / background. I find it difficult to read it. Dont confuse that with unable to read. Just I find I have to focus more due to how close in colour your text and background gray are. I dislike the blue border as well as it is quite jarring from the red banners you have chosen for the interior section. I'm not an expert designer or anything though, so this is all just my opinion on it.

    I would also change your title font. It looks like a clip art font pasted on compared to the background you used. I would expect it to look similar in style and font to the text that is spattered about the banner, like where it says "to save these lives" on an upward angle on the right side. A pure black font would probably blend too much into the banner, but at least keep it similar to the grainy, non-straight edged font used in the banner. The polished gray/silver gradient just does not do it to me on the grungy, red and black background.

    KVW on
Sign In or Register to comment.