Site Redesign

Ooka · Oct 11th, 2012, 8:29:53 AM

I work as a web designer for Audentio Design, and recently took a stab at this site, here's what I came up with after a half hour or so:

http://i.minus.com/incXdXfoA3Y4h.png

And I was wondering, is this something you guys would consider if I were to put actual work into it, or is it out of the question? (Free work of course)

I also did this for Pokemon Online's site, which you can see here: http://ericj.koding.com/po/ (Though I recently left their team)

***Zracknel**** · Oct 11th, 2012, 10:04:35 AM

That PO link is pretty smooth stuff imho.

Just curious, how comfortable are you working with others/working off of others' designs/artwork? Can you build stuff from flat PSD/AI files?

Ooka · Oct 11th, 2012, 10:09:31 AM

I'm pretty comfortable with it, I've collaborated on a few projects before and didn't have much trouble. Sometime coding from a flat file causes more images to be used than I'd like, but I can do that as well.

***Zracknel**** · Oct 11th, 2012, 10:18:37 AM

I think your input and assistance could be helpful :)

I will send you a PM with more info.

(I would personally encourage anyone else with a similar skillset/interest in potentially helping the site to post in this thread)

Ooka · Oct 11th, 2012, 10:29:53 AM

Alright, sounds good, I'll watch for it. ^.^

***Birkal**** · Oct 11th, 2012, 10:55:31 AM

Cool cool. I'll leave this thread here for about a day, but then I'll move it to the Projects forum. Thanks for volunteering Ooka (and any other future programmers that read this)! I'd love to see something come out of this =)

Zacchaeus · Oct 11th, 2012, 2:48:45 PM

I just want to note that many people access Smogon through their smartphone, Nintendo DS, or other devices, so it would be ideal if the redesigned site could be fully accessed and browsed from those devices

Firestorm · Oct 11th, 2012, 8:07:56 PM

Quote:

Originally Posted by Fat Ooka

I also did this for Pokemon Online's site, which you can see here: http://ericj.koding.com/po/ (Though I recently left their team)

Jesus this is so much better than the current PO site. I have some issues with a few of the elements, but overall great job and good luck with Smogon.

Scepticallistic · Oct 11th, 2012, 11:20:37 PM

Hi, I'm self-taught and amateurish, but I have had thoughts on the Smogon website design.

The web is definitely taking a move to clean, brisk looking designs, so Smogon is looking a bit aged. The proposed redesign by Ooka is great. It is looked refreshed, but it is still recognizable as Smogon.

What I feel really needs to go is the over-reliance on purple. It will make a fantastic accent color for the cool grays the site will be taking on. Right now, things like Pokemon Strategydex lists are just stark and jarring with awkward shades of purple/blue. I hope I do not offend whoever made these design decisions, but they are showing their age. It would be really simple to slap on some grays and format the font so that they are not the standard blue underlined hyperlinks.

The side navigation links could similarly be cleaned up as proposed by Ooka's mockup or receive maybe a slight reorganization, such as nesting links to parts of the site under broader categories to be accessed by a hover-over (or even a click-to-expand option for the menu for those accessing the site on touch-screen devices)) This will clean up the home page some more and create more elegant whitespace.

Heavier reliance on HTML5 and CSS3 will make the site more future-proof and help especially for mobile devices at the expense of potential compatibility issues with older versions of browsers (I'm looking at you, IE), whereas using images allows just a bit more flexibility in how things will look and guarantee uniform user experiences at the expense of requiring more loading data.

Those were just some disjointed thoughts; I apologize if I butted in inappropriately.

Ooka · Oct 12th, 2012, 4:29:44 AM

Yeah, I tried to retain what people identify the site with, but still bring it up to standards while I was working.

As far as HTML5 and CSS3 go in IE, html5shiv and CSS3 Pie help that a lot, and really make those more realistic choices than lots of images. The only users that will have trouble are those with Javascript disabled as well as using a version of IE prior to IE9 at the same time. They most likely aren't concerned with the UI if that's the case.

***Zarel**** · Oct 12th, 2012, 10:11:43 AM

You preserved the sidebar. Why did you preserve the sidebar? :/ The sidebar is a bunch of links that anyone sane is going to gloss over. It's really pointless.

I actually don't mind the rest of your design. Well, actually, your "Home | About | Forums" links are a bit too high up and easy to miss. I, err, like the search bar, though. And the purple background and the main area's shadow.

Basically, I like the design, but the layout could use a lot more work. :/ You basically preserved Smogon's current layout, and the problem is that Smogon's current layout sucks. :/

(But seriously, this is really nice, I just have really high standards.)

Ooka · Oct 12th, 2012, 10:30:17 AM

Yeah, I agree the sidebar could be removed, but the problem with that is it just creates tons of whitespace, due to the news posts not being very populated with information (I felt they would just look out of place and empty without some form of the sidebar). Also, I did try to compensate for the high links by increasing their actual height, and almost all users start reading from the top left, so I figured they'd be noticed.

But yeah, the layout definitely needs TONS more work, I just did a quick little mockup to see if anyone was interested in it.

***Zarel**** · Oct 12th, 2012, 3:07:33 PM

Well, I didn't mean to imply that it should be a single-column layout. Rather that there should not be a sidebar that's basically a list of links.

News makes sense as one column in a multicolumn layout. Now think about what the other column should be. ;)

Here's a layout I was thinking about.

As you can see, I couldn't really think of anything more interesting than an ad for another column. I'm sure you can do better. It might be better to put the intro in the other column, and some sort of navigation below the intro. It should not be a list of links anywhere near as dense as the current list, though.

Ooka · Oct 12th, 2012, 3:25:04 PM

Yeah, I saw that in the information Zracknel sent me, and included a couple aspects of it. Whenever you get time for a chat I'll show you the new mockup I've worked out.

**Arcticblast** · Oct 12th, 2012, 8:27:10 PM

Why get rid of the sidebar? And if it IS done away with, where will all of the information linked there go?

raikou00 · Oct 13th, 2012, 6:16:57 PM

I like the "design" that post Zarel. If you want I can help making the buttons and all that :D

Scepticallistic · Oct 14th, 2012, 5:25:04 PM

Arcticblast, maybe the sidebar skews the weight of the page. I think they are designing it so that the relevant links will now appear in dropdowns in a horizontal menu across the top of the page.

Brutaka · Oct 14th, 2012, 5:25:28 PM

Birkal had directed me here just a while ago...he said I might be able and/or be interested in this.

I do like the idea of the site redesign, and I'd love to help, but I dont think I can, I'm not that good yet.

My upper limits are a bit of Javascript (Flashy buttons, counters(like the Poketch Counter app), clocks, and images that change dependent on the date, that kind of stuff.) and thats about the highest i go.

Still, im interested in this.

**Toast++** · Oct 15th, 2012, 11:31:40 PM

I'm happy help with this. I work with this kind of stuff quite a bit. Feel free to message or catch me on irc.

Oct 11th, 2012, 8:29:53 AM	#1
Ooka Join Date: Sep 2007 Posts: 282	Site Redesign I work as a web designer for Audentio Design, and recently took a stab at this site, here's what I came up with after a half hour or so: http://i.minus.com/incXdXfoA3Y4h.png And I was wondering, is this something you guys would consider if I were to put actual work into it, or is it out of the question? (Free work of course) I also did this for Pokemon Online's site, which you can see here: http://ericj.koding.com/po/ (Though I recently left their team) Last edited by Ooka; Oct 11th, 2012 at 8:44:05 AM.

Oct 11th, 2012, 10:04:35 AM	#2
*Zracknel Super Moderator** Join Date: Jan 2006 Posts: 355 Queens, New York	That PO link is pretty smooth stuff imho. Just curious, how comfortable are you working with others/working off of others' designs/artwork? Can you build stuff from flat PSD/AI files? __________________ Logos

Oct 11th, 2012, 10:18:37 AM	#4
*Zracknel Super Moderator** Join Date: Jan 2006 Posts: 355 Queens, New York	I think your input and assistance could be helpful :) I will send you a PM with more info. (I would personally encourage anyone else with a similar skillset/interest in potentially helping the site to post in this thread) __________________ Logos

Oct 11th, 2012, 10:55:31 AM	#6
*Birkal We have the technology. Super Moderator** Join Date: Oct 2010 Posts: 3,017 The Mentor	Cool cool. I'll leave this thread here for about a day, but then I'll move it to the Projects forum. Thanks for volunteering Ooka (and any other future programmers that read this)! I'd love to see something come out of this =) __________________

Oct 11th, 2012, 11:20:37 PM	#9
Scepticallistic Join Date: Oct 2008 Posts: 1,166	Hi, I'm self-taught and amateurish, but I have had thoughts on the Smogon website design. The web is definitely taking a move to clean, brisk looking designs, so Smogon is looking a bit aged. The proposed redesign by Ooka is great. It is looked refreshed, but it is still recognizable as Smogon. What I feel really needs to go is the over-reliance on purple. It will make a fantastic accent color for the cool grays the site will be taking on. Right now, things like Pokemon Strategydex lists are just stark and jarring with awkward shades of purple/blue. I hope I do not offend whoever made these design decisions, but they are showing their age. It would be really simple to slap on some grays and format the font so that they are not the standard blue underlined hyperlinks. The side navigation links could similarly be cleaned up as proposed by Ooka's mockup or receive maybe a slight reorganization, such as nesting links to parts of the site under broader categories to be accessed by a hover-over (or even a click-to-expand option for the menu for those accessing the site on touch-screen devices)) This will clean up the home page some more and create more elegant whitespace. Heavier reliance on HTML5 and CSS3 will make the site more future-proof and help especially for mobile devices at the expense of potential compatibility issues with older versions of browsers (I'm looking at you, IE), whereas using images allows just a bit more flexibility in how things will look and guarantee uniform user experiences at the expense of requiring more loading data. Those were just some disjointed thoughts; I apologize if I butted in inappropriately. __________________ *Unicorn Parade \| Blogcomic* Doodles and ravings

Oct 11th, 2012, 10:09:31 AM	#3
Ooka Join Date: Sep 2007 Posts: 282	I'm pretty comfortable with it, I've collaborated on a few projects before and didn't have much trouble. Sometime coding from a flat file causes more images to be used than I'd like, but I can do that as well.

Oct 11th, 2012, 10:29:53 AM	#5
Ooka Join Date: Sep 2007 Posts: 282	Alright, sounds good, I'll watch for it. ^.^

Oct 11th, 2012, 2:48:45 PM	#7
Zacchaeus Join Date: Dec 2009 Posts: 3,268	I just want to note that many people access Smogon through their smartphone, Nintendo DS, or other devices, so it would be ideal if the redesigned site could be fully accessed and browsed from those devices

Oct 12th, 2012, 4:29:44 AM	#10
Ooka Join Date: Sep 2007 Posts: 282	Yeah, I tried to retain what people identify the site with, but still bring it up to standards while I was working. As far as HTML5 and CSS3 go in IE, html5shiv and CSS3 Pie help that a lot, and really make those more realistic choices than lots of images. The only users that will have trouble are those with Javascript disabled as well as using a version of IE prior to IE9 at the same time. They most likely aren't concerned with the UI if that's the case.

Oct 12th, 2012, 10:11:43 AM	#11
*Zarel >> BEGIN POSTBIT Super Moderator** Join Date: Aug 2011 Posts: 1,134 >> END POSTBIT	You preserved the sidebar. Why did you preserve the sidebar? :/ The sidebar is a bunch of links that anyone sane is going to gloss over. It's really pointless. I actually don't mind the rest of your design. Well, actually, your "Home \| About \| Forums" links are a bit too high up and easy to miss. I, err, like the search bar, though. And the purple background and the main area's shadow. Basically, I like the design, but the layout could use a lot more work. :/ You basically preserved Smogon's current layout, and the problem is that Smogon's current layout sucks. :/ (But seriously, this is really nice, I just have really high standards.) __________________ Pokemon Showdown \| Replay player \| No, I am not impressed that you know that my name is Guangcong Luo. The PS website says "Copyright Guangcong Luo" at the bottom, ffs.

Oct 12th, 2012, 10:30:17 AM	#12
Ooka Join Date: Sep 2007 Posts: 282	Yeah, I agree the sidebar could be removed, but the problem with that is it just creates tons of whitespace, due to the news posts not being very populated with information (I felt they would just look out of place and empty without some form of the sidebar). Also, I did try to compensate for the high links by increasing their actual height, and almost all users start reading from the top left, so I figured they'd be noticed. But yeah, the layout definitely needs TONS more work, I just did a quick little mockup to see if anyone was interested in it.

Oct 12th, 2012, 3:07:33 PM	#13
*Zarel >> BEGIN POSTBIT Super Moderator** Join Date: Aug 2011 Posts: 1,134 >> END POSTBIT	Well, I didn't mean to imply that it should be a single-column layout. Rather that there should not be a sidebar that's basically a list of links. News makes sense as one column in a multicolumn layout. Now think about what the other column should be. ;) Here's a layout I was thinking about. As you can see, I couldn't really think of anything more interesting than an ad for another column. I'm sure you can do better. It might be better to put the intro in the other column, and some sort of navigation below the intro. It should not be a list of links anywhere near as dense as the current list, though. __________________ Pokemon Showdown \| Replay player \| No, I am not impressed that you know that my name is Guangcong Luo. The PS website says "Copyright Guangcong Luo" at the bottom, ffs.

Oct 12th, 2012, 3:25:04 PM	#14
Ooka Join Date: Sep 2007 Posts: 282	Yeah, I saw that in the information Zracknel sent me, and included a couple aspects of it. Whenever you get time for a chat I'll show you the new mockup I've worked out.

Oct 12th, 2012, 8:27:10 PM	#15
Arcticblast is going goat Moderator Join Date: Nov 2008 Posts: 2,976 #serperiors Mentor	Why get rid of the sidebar? And if it IS done away with, where will all of the information linked there go? __________________ New to Smogon? Afraid to jump into discussion? Introduce yourself! ------------------- Fail Cup \| Scramble! \| RMTs: Blistering Sands (BH) Night Stall (OU) \| ARcTicblast \| Demon Spawn \| signature art by Zracknel additional credit to Pocket and AccidentalGreed

Oct 13th, 2012, 6:16:57 PM	#16
raikou00 Join Date: Apr 2011 Posts: 113 Wonderland	I like the "design" that post Zarel. If you want I can help making the buttons and all that :D

Oct 14th, 2012, 5:25:04 PM	#17
Scepticallistic Join Date: Oct 2008 Posts: 1,166	Arcticblast, maybe the sidebar skews the weight of the page. I think they are designing it so that the relevant links will now appear in dropdowns in a horizontal menu across the top of the page. __________________ *Unicorn Parade \| Blogcomic* Doodles and ravings

Oct 14th, 2012, 5:25:28 PM	#18
Brutaka Join Date: Jul 2011 Posts: 23	Birkal had directed me here just a while ago...he said I might be able and/or be interested in this. I do like the idea of the site redesign, and I'd love to help, but I dont think I can, I'm not that good yet. My upper limits are a bit of Javascript (Flashy buttons, counters(like the Poketch Counter app), clocks, and images that change dependent on the date, that kind of stuff.) and thats about the highest i go. Still, im interested in this. __________________ <\|Tech Banner Tutorial\|Userbar Tutorial\|deviantART Profile\|>