1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Please critique my web design. (photoshop images only, not live)

Discussion in 'Off Topic' started by Andrew, Apr 3, 2012.

  1. Andrew

    Andrew Well-Known Member

    Hello everyone,

    Today I present a Minecraft website theme I have been working on. This is suppose to be a "Minecraft Super Site" that uses absolutely no images other than stock xf icons and user content. Since user content is the main focus, I don't want the user to have to download a image/resource heavy web layout. The layout I have created can be made with 99% css. I would assume this would mean faster loading for the website.

    Anyway here is the design in a very rough draft form. It's all photoshop and none of its perfected, but its far enough along that I can get user input.


    [​IMG]


    History:
    The design is lacking icons and a few other elements. It is just a rough draft to see what it's suppose to look like while I'm coding the thing.

    Things I need to know;
    • How does it look on your browser? Is it too dark?
    • Do you have any suggestions for fonts or colored font ideas?
    • Does this website deliver a clear fluid visual path from logo, to ad, to content, to sidebar, to footer ad, to footer notes, to end?
    • Does this website look professional or does it just look like "another forum theme?"
    Please leave me your comments about this design. It still needs a ton of work and some nice fancy minecraft icons, but I think it should be a pretty clear, understandable website for all ages.

    Thanks,
    Andrew
     
  2. Ingenious

    Ingenious Well-Known Member

    The design is simple and clean but personally I am not sold on the colours. It's a bit grey overall and hard to read for my eyes. I think the changes I would make would be to make the forum names in bold and the discussions/post underneath brighter. Plus, I would definitely add a very colourful forum icon for each forum - you have to get people's eyes to your content, rather than the adverts, which are currently the most colourful thing on the page. In the breadcrumb, "forums" is bright blue and stands out a lot - but why, as that's on your forum home page anyway? Suggest changing that colour, or remove the breadcrumb from the forum homepage (I did the latter in mine, makes the front end a lot cleaner). I have a feeling you will only need a few tweaks and a few bits of colour to make this look awesome, so good job so far!
     
    Andrew likes this.
  3. Andrew

    Andrew Well-Known Member

    Ingenious, thank you for your review. I appreciate you taking the time to look at what I have so far :D

    With over 50 plus views, I would think at least more than one person has an opinion, good or bad.
     
  4. Andrew

    Andrew Well-Known Member

    Okay I took your suggestions and put them into play while trying to improve the overall contrast.

    I still haven't ripped the icons and images from minecraft to create icons. I will do that later. here is the latest preview.

    http://img705.imageshack.us/img705/1521/designv3.png
     
  5. Adam Howard

    Adam Howard Well-Known Member

    In the 1st pick, the word FORUM was in a nice blue color. Rather than orange in your 2nd pic, you could try that blue ;)
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I like the embossed style of the sidebar blocks.
     
  7. DRE

    DRE Well-Known Member

    What the postbit look like?

    It fits the minecraft theme of squareboxes.
     
  8. Andrew

    Andrew Well-Known Member

    I loooove the blue color. But it does not provide enough contrast. As I've been developing the skin I have found out that the gold give's greater contrast as opposed to the blue (especially on mobile devices). However the trick to making the gold look good is not to over use it. That is something I am combating at the moment.

    Thanks Jake!

    This is a "work-in-progress" screen shot. The postbit font size and color will be edited and the user box/bit on the left will feel some love with a overhaul of that area (still working on ideas).

    [​IMG]
     
  9. mrGTB

    mrGTB Well-Known Member

    Same view also as you now, but did used to be a big fan of dark themes. Grey and gold text on dark backgrounds works well, but never looks that nice visually and becomes hard on the eyes for looking at quickly. Dark themes are very 90's in my opinion as well - go look at Facebook, Twitter, WordPress and other well know sites on the web all using light airy theme colours similar to one another. That seems the "in-thing" today in 2012.
     
    Andrew likes this.
  10. Shelley

    Shelley Well-Known Member

    I like the concept you have with the greyscale look (I did a greyscale back in the vb days) and I don't think you should deviate from that if this is what you originally had in mind?

    Personally, I'm not to keen especially on the sideblocks, specifically the embossing you have going with it really makes them look outdated.

    Are you planning on making this a pure imageless style? Such as the node icons? I'm assuming there's some imagery you can't avoid using/creating but if your going to inject colour or even feel the need to inject colouring stick with the greyscale in the style and introduce the images in a coloured format.

    The contrast of the links (gold/yellow) is far too much imo. to me it's a unnecessary focus point for people that doesn't need focusing upon.

    Since you know your way around photoshop, I think you should set yourself a challenge and stick with the greyscale look and if your wanting to inject colour doing it with the images is my suggestion not links. And if your going for a fully greyscaled look I'd say persevere with that concept because you may surprise yourself how good a greyscale style can look.
     
    Andrew likes this.
  11. Andrew

    Andrew Well-Known Member

    You are definitely right about those websites being very well designed and loved by many people. This design does have similar elements. It is still XenForo, I have just removed all gradients and 99% of all rounded corners. The reason for developing the website in a dark theme was a decision that took some time to settle in.

    One of the main reasons I chose a dark theme over a light design is because I don't want this website to look like any other generic minecraft website. No other popular Minecraft content/resource distributor use's a dark theme.

    My goal for the design is to create a dark theme, that looks great on all devices, while making it user friendly and easy to navigate. Start the concept design, code it and add in Minecraft images/drawings later in certain areas where it seems appropriate. The website also needs to be fast and the website design shouldn't be a large download (<3 for mobile devices). The skin you see use's less images than the default XenForo theme. Which might make it just that much faster for the end user. This speed is important when the user is viewing content and images created by other people.

    Hope that jumble of text makes sense :LOL:


    Thank you for a nice descriptive and informative review. I have taken everything you mentioned into consideration and I am working to minimize the use of that color. Though I have run into a problem of contrast. It is important to me that all users are able to view the website on a mobile device, tablets, etc and have a easy viewing and reading experience. Dark themes on these devices look great, but I have noticed while similar colors on the pc are easily identified as seprate colors, but on a handheld if the colors are too similar you can not make out the difference where as on a pc you can. So some experimenting is needed to make the color scheme better for links to have less contrast but are still noticeable. That's just my two cents though. :whistle:
     
  12. Andrew

    Andrew Well-Known Member

    Okay I have made some changes to the colors like you suggested. Would you mind taking a look?

    Shelley please let me know what you think of this version of the design.

    http://img839.imageshack.us/img839/4752/designv5.png (also updated and shown in first post)

    Note: The ad's in this version were copied from newgrouds.com
    EDIT: Logo is a place holder. I hired someone to make a new one.
     

Share This Page