Request feedback on webpage

Radiant · Tue 05/07/2011 19:37:17

http://crystalshard.net/

We've recently redesigned our website, and I'd like to have some feedback or criticism on its layout, color scheme, and general clarity. The old site looks like this. Thank you for your time!

CaptainD · Tue 05/07/2011 21:50:13

Quote from: Radiant on Tue 05/07/2011 19:37:17
http://crystalshard.net/

We've recently redesigned our website, and I'd like to have some feedback or criticism on its layout, color scheme, and general clarity. The old site looks like this. Thank you for your time!

Much better than the old site - text is clearer, more contrast makes things stand out more, just looks a lot sharper overall.

Only two things I'd personally change - not keen on the font for "Featured Game", and I'd make the blue for the Welcome and Latest News headings a touch darker. But that's just me.

InCreator · Wed 06/07/2011 19:20:25

* logo image is bland
* left side box has a bit too big fonts and that big yellow donate button feels out of place
* contrast feels off bit. I'd suggest a bit darker page background or some bubbly/gradient shading to teal areas

Darius Poyer · Thu 07/07/2011 06:44:52

Titilium Maps looks odd, perhaps adding "text-shadow: 0 1px 1px rgba(255,255,255,.1);" to the h1,h2,h3 {} css code would help smooth out the strange anti-aliasing of the font.

All fonts are too unique, especially when mixing Serif and Sans Serif fonts. I would suggest using one font for headlines and one for texts if you want some variety, but three fonts that are this distinct make it look a bit unfocused.
In relation to fonts, the google font API is very good for remotely linking fonts and they have a great library of free to use fonts, look at that if you havent already.

The colors are a bit strange, The blue is too muddy for my tastes so id suggest using a different blue and also adding some color to work with the blues in general. a quick and striking example would be to incorporate orange, as thats blues complementary color. It could work for headlines or the menu when hovering. (I use this page for color selection, its a nice and simple online colorpicker http://www.colorpicker.com/)

also heres a fun simple bit of css code that lets you change the selection colors for text, i like to use this for pages i work on, should be self-esplanatory;

::-moz-selection{ background:#1C80EB; color:#fff; text-shadow: none; }
::selection { background:#1C80EB; color:#fff; text-shadow: none; }

Why bother with ie6 support by the way? seems like that's really pointless now, especially since ie9 solves almost all previous ie problems.

what I do is just use html5 and a reset.css, I havent had any cross browser issues with that so far.

adding this is to the header of all pages is a good idea:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
it forces IE to use chromeframe if its installed, just a precautionary measure.

Also your head tag doesn't close for some reason. At least when I view source I cant see any end tag for <head>.

Generally I find the page works well though, clear and far more comfortable then the old one.

you might want to take a look at this as well: http://border-radius.com/

Radiant · Mon 18/07/2011 16:18:12

Thanks for your feedback.

Quote from: CaptainD on Tue 05/07/2011 21:50:13
not keen on the font for "Featured Game", and I'd make the blue for the Welcome and Latest News headings a touch darker.

I've changed the blue to match the left panel. We're currently looking into fonts.

Quote from: InCreator+ on Wed 06/07/2011 19:20:25
* logo image is bland

It has some orange in it now, is that better?

Quote
* left side box has a bit too big fonts and that big yellow donate button feels out of place

And we're also looking into streamlined social networking buttons (this is Paypal's default button).

Quote from: Darius Poyer on Thu 07/07/2011 06:44:52
Titilium Maps looks odd, perhaps adding "text-shadow: 0 1px 1px rgba(255,255,255,.1);" to the h1,h2,h3 {} css code would help smooth out the strange anti-aliasing of the font.

I did that, but it doesn't seem to make a difference. We're down to two fonts now, though; maybe we'll have to replace Titillium by something else.

QuoteWhy bother with ie6 support by the way? seems like that's really pointless now, especially since ie9 solves almost all previous ie problems.

You'd be surprised what the market share for IE6 still is. Anyway, the name IE6.css is a shorthand, it works for IE6 and up. It took us quite a lot of time to get that right.

Quote
it forces IE to use chromeframe if its installed, just a precautionary measure.

I have no experience with that, what is it?

Quote
Also your head tag doesn't close for some reason. At least when I view source I cant see any end tag for <head>.

Well spotted, fixed now.

Quote
you might want to take a look at this as well: http://border-radius.com/

You mean making the four corners of the page round instead of square? That was my first suggestion too, but my artist suggested against it.

Darius Poyer · Tue 19/07/2011 00:33:32

QuoteI did that, but it doesn't seem to make a difference. We're down to two fonts now, though; maybe we'll have to replace Titillium by something else.

Its good to keep font-count low anyway in my opinion.

Quote(chrome frame) have no experience with that, what is it?

IE users could download this program called chrome frame that would enable pages browsed in Internet Explorer to render using chrome. That bit of code simply makes sure that if it exists it's used, just a nice precaution really.

QuoteYou mean making the four corners of the page round instead of square? That was my first suggestion too, but my artist suggested against it.

I just saw some removed bits of code in the bottom of the css that suggested to me that perhaps you tried to implement something like that but failed, so I though it could have helped if that was indeed the case.

Radiant · Thu 21/07/2011 10:14:32

Okay, I've taken out the Titillium font; the page now uses Arial instead, and TNR for the menu. Also, replaced the orange Paypal button by a blue one.

Also, on the main page, the middle and right panels are swapped, to get some more colorful screenshots in the middle of the page.

I'm not sure what to do with feedback like "the blue is too muddy for my tastes so I'd suggest using a different blue". Could you give an example please?

Darius Poyer · Thu 21/07/2011 10:54:49

Quote from: Radiant on Thu 21/07/2011 10:14:32
I'm not sure what to do with feedback like "the blue is too muddy for my tastes so I'd suggest using a different blue". Could you give an example please?

When working with color in general it's useful to understand the component's of a color. By varying all the components of a color you can easily create striking contrasts, and that's what I think you are lacking at the moment. Any color has a value, saturation and a hue. In the three main colors of the page, the one represented in the menu-bar, the column to the left and the background. They all have the same hue, hue being what you could roughly call the color of a color. Because of that they blend together without creating any contrasts between them.

to the left is a tiny mockup of the current colors(#124259,#1a5774), to the right, my altered palette (#123759,#22688d).

Ignoring the background for a moment. The colors currently used have a hue value (according to Photoshop) of 199 for both of them. In my example the hue value is 209 and 201. Its not that large of a difference but it makes the colors distinct without going off the blue hue spectrum. using the white background does help with that as well but I can completely understand why you would probably want to avoid that since the content columns of the page have a white background as well.

Basically, because you only changed value and saturation of the colors for the page ignoring the hue, you ended up with colors that bleed together a bit too much. It looks muddy because there is some lack of contrast.

Radiant · Tue 26/07/2011 14:45:17

Quote from: Darius Poyer on Thu 21/07/2011 10:54:49

to the left is a tiny mockup of the current colors(#124259,#1a5774), to the right, my altered palette (#123759,#22688d).

Hm, that makes sense. Could we get some additional opinions on this please?

Also, to add some color to the page, links now display in orange when hovered over. Otherwise, I think we've got a pretty good stable page for now, although additional suggestions are always welcome.

Darius Poyer · Tue 26/07/2011 16:52:26

Quote from: Radiant on Tue 26/07/2011 14:45:17
Also, to add some color to the page, links now display in orange when hovered over. Otherwise, I think we've got a pretty good stable page for now, although additional suggestions are always welcome.

The orange hover looks very nice.

deadsuperhero · Mon 12/09/2011 08:00:12

Hi Radiant,

First of all, I wanted to say congrats on the redesign! Redesigning a site can be very time-consuming, and moving over from one system from another is an incredible amount of work!

Before I begin, let me say this: it's certainly an improvement over the old site. I can't tell if you're using a CMS or not, but it's obvious that you've built your site using PHP, which is a pretty tried-and-true standard to build a site of this type against. If you aren't using a CMS, I'd highly recommend looking into it. Wordpress is great for small-scale websites, and Drupal can handle all kinds of things that you could expand your original use case on.

Here's what I liked:
-It's a fairly clean layout.
-Finding the plethora of information is relatively easy.
-The colors maintain the visual motif that I think you wanted to convey in your last design, which is certainly a welcome choice.
-You seem to respect a visual grid fairly well for the layout of the page, which is very important in designating how content is laid out.

And what I disliked:
-It's boring. Nowhere does the design express the visual excitement of a game development website. It may be easy on the eyes, but nothing really visually pops out.
-It feels conceptually antiquated. It looks like a magazine page from the 90's. If you were going for that nostalgic look, great, but I think a more modern approach could be achieved.
-The social media buttons visually clash and are an eyesore.
-The visual inconsistency with the forum is also a problem. Even if your mainsite looked far more up-to-date, the forum carries across very few visual motifs of the site itself at all.
-Overall, the site doesn't really lend itself to the idea of being a website for the community.
-I'm a bit iffy on the use of that particular font for navigation. That could be my own personal preference, though.
-The mouseover effect, while useful, is somewhat visually intrusive.
-The organization of your links in the navigation seems functionally confusing. Having "About Us" and "Forum" on the end and throwing the categories in the middle with "Home" at the very front creates a somewhat visual separation between the site itself and the community which backs it, which can cause some frustrations with usability.
-Lack of a search function on the front of an organizational website is puzzling.
-Upon closer inspection, some of the items in the sidebar (Guides, Translations) would really seem to do better either in the main menu, or in a sitemap in the footer. I'll play around with it.
-I don't like that the news is on a sidebar, rather than the main focus on the frontpage. By focusing more on the current developments of the projects themselves, you can drum up a more in-depth focus of your projects and get your news entries noticed more.

So, I will create a mockup over the next couple of minutes to try and characterize what I think would help the site immensely with some visual and functional suggestions. Watch this space!

deadsuperhero · Mon 12/09/2011 09:59:10

Okay. I know double-posting is a no-no traditionally, but I figured I'd bump this up a bit and also show what I've done over the last hour or two.

First and foremost, the mockup. I would've added some simple logos to the navigation menu, but frankly that's just too time-consuming to convey an idea, and I'd be here for longer than needed.

I had some fundamental problems with the layout and the design of the current site, so I decided to start over from scratch and re-position some elements. I tried to keep to the colors of the current site, though.

Before you look at this, I apologize for the dithering in the picture. This was a result of using Imgur.

First and foremost, I decided to try and make the news the center of attention. It's useful to do things that way, especially because it was very much away from any attention at all before. A user could miss a lot if they're just casually browsing the website.

Secondly, I felt it was necessary to break down the "Information" pane, seeing as it was really just a bunch of secondary links, and fit it into the footer sitemap.

I've also included a slider, which is actually pretty easy to implement with modern CMS'es using a bit of jQuery and PHP. This could be used to show latest posts, or showcase games, or whatever you want. I added four slide buttons, but you really could add as many as you want. Clicking one of the "lights" would cause the slider to slide back or forth in the corresponding direction of the currently lit "light". Furthermore, it would be possible to add in a description for the system to display when the slide came up.

Naturally, there's also a search function, which is useful if a user doesn't know where something is.

I added author information next to the news entries, in case there is more than one contributor to the news site.

I also re-named and re-ordered a few menu elements to make them fit better. Anyway, tell me what you think of it, I imagine it wouldn't be that hard to actually turn this into a cohesive theme depending on the underlying platform.

If you want, I can upload an XCF (I used GIMP), or try and convert it to a PSD and send it to you to play around with.

Edit: Oh yes. Also, I forgot to add these in since it's 4 AM, but there's plenty of space next to the search bar to add some social networking buttons. I can whip some up if necessary.