SplashDamage.com Redesign Preview!


(badman) #1

Hey guys,

For the past weeks and months, we’ve been busy working on a new design for the Splash Damage website. I thought I’d give you a sneak peek here before it all goes live so you can have a look and give us some early feedback.

The main goal for us was to build the site around the content and not vice versa (the current design, pretty as it is, is very problematic in this regard). With that in mind, we’ve kept things fairly minimalistic to give our content a good amount of breathing room.

BTW, the forums are not going to change aside from the top status bar, which’ll look similar to the one on the new SD site.

Anyway, enough waffling. Have a look at the shots of the main page and a random content page and post up any feedback or questions you might have:

www.splashdamage.com/images/sd_main.jpg
www.splashdamage.com/images/sd_content.jpg

Thanks!
-b


(light_sh4v0r) #2

I suppose that wouldn’t scare me off just yet :slight_smile:
Looks great guys!


(Paul) #3

Looks very clean, nice guys :slight_smile:


(Indloon) #4

The footer should be litter smaller,seems like it is 140px but there is the empty space in the bottom of footer,use smaller value of footer height.

Colors are nice,they go into SplashDamage well!

The HOT NEWS border color is too light, I would use darker color like #e4e4e4 or #ccc(extrem case) or even #dbdbdb.

Also about the breadcrumbs in Splash Damage blog.

It would be good decision to take a look at this article/tutorial of CSS3 breadcrumbs http://www.red-team-design.com/css3-breadcrumbs

If you don’t understand where that bread shape comes,then take a look at this good article explaining this oldschool trick with borders: http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/

[strike]However, these CSS3 breadcrumbs are not support in IE8/IE7/IE6 -.-[/strike]
EDIT: My mistake, they are.

But you can always use extra stylesheet for IE…

I did notice a gradient in footer,however then, please take a look at this: http://www.colorzilla.com/gradient-editor/

The orange radius gradient shoud look like this,just tweak the colors :slight_smile:


background: #ffa84c;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmE4NGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3YjBkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  #ffa84c 0%, #ff7b0d 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d));
background: -webkit-radial-gradient(center, ellipse cover,  #ffa84c 0%,#ff7b0d 100%);
background: -o-radial-gradient(center, ellipse cover,  #ffa84c 0%,#ff7b0d 100%);
background: -ms-radial-gradient(center, ellipse cover,  #ffa84c 0%,#ff7b0d 100%);
background: radial-gradient(center, ellipse cover,  #ffa84c 0%,#ff7b0d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 );

Over of all I like it still, just keep in mind, the font size would be bigger, because most of visitors have big screens and its not good to read at 13px font size :frowning:

Use the CSS media queries for that: http://css-tricks.com/css-media-queries/ 

Btw,use CSS3!!! IE 9 supports it,what else is needed, tough jQuery is for older IE versions than 9…

I forgoted to add that use sprites for images, it reduces HTTP requests: http://css-tricks.com/css-sprites/

And don’t forget to compress CSS files and JS files! They are also downloaded to clients browser buffer :stroggtapir:


(Salteh) #5

“zomgs!” :slight_smile:


(SockDog) #6

Looks nice. Suggestions off the top of my head.

Extend the developer posts on the front page, you guys contribute a lot to the forums, would be great if first time visitors could link right into posts you make in the forum. Same for the social feed.

G+ in the top bar please. :slight_smile:

Splash Damage logo seems a little… out of place… low prominence. I’m not sure what needs to be done. :confused:


(UJERebel) #7

I really like the neat interface :slight_smile: kind of reminds me of metro interface with these arranged squares :slight_smile:
Good job!

i’m ready to check it when it comes online hihi (just sitting here with a broken ankle anyway :D)


(Ruben0s) #8

Splash Damage logo seems a little… out of place… low prominence. I’m not sure what needs to be done. :confused:

I agree, the logo should be imo either in the left top or exactly in the middle. First thing that I see right now is powered by fireteam, because I always look at that place because almost every website has its logo there. I also think that the “powered by” should be in the footer.


(Humate) #9

Is it possible to remove the Brink picture?
Everything else looks nice :slight_smile:


(Slade05) #10

It`s workable at least.