Hey, this afternoon i got inspiration to do some fast (sketch) redesign of Osu! web site front page. It is still pretty basic, but i hope you guys like it
Its more like personal project, i font try to do anything else, but showing some designs ^^

HOME PAGE UPDATE.1 : http://imageshack.com/a/img536/7269/ZpfBdU.jpg
HOME PAGE UPDATE.2 : http://imageshack.com/a/img539/2514/77QBPW.jpg
HOME PAGE UPDATE.3 : http://imageshack.com/a/img633/7435/weaWhb.jpg

-------------

PROFILE PAGE UPDATE 1 : http://imageshack.com/a/img661/4436/myKu4C.jpg



I really wish for some feedback I might do some other pages as well

PS: I hope i didnt mistaken the forum

lose the anime characters
if we do need characters, pippi and yuzu would be better
it's osu! not Osu!
latest announcements are missing
most played is missing as well
in fact, that whole section looks empty
beatmap search field has a search button, but the user search field doesn't
where are the sliders ;w;

I love you
I wish everyone gave feedback like yours! Thanks for that and i will work on it as well
"Stay tuned!"

About the latest anouncments: as i said its not finished at all. I just felt like its enought to share it as "concept" and [Work in Progress]
The same goes for most you say its missing.

The beatmap has search button because that way i concentrate more of the user's attention on it as i believe its more important in UX point of view. The user search form doesnt have for that sole purpose. Also if it did have, it will create a pattern that doesnt look that well up in the header. This is a way to create hierarchy in the point of interest so to say ... I hope i made sense

Ahh the sliders ... i need a little nerves to make them xD

I like the background image

Looks nice.

where is pippi ;w;

WindFleuret wrote:

I really wish for some feedback I might do some other pages as well

Good news.
I am actually looking forward to see the other pages happening!
and now getting back to CnC.

First things first; the design is pretty minimalistic so there's not a lot of gimmick going on there, which is a good point since a overcrowded design = not so nice, especially if it's visited by thousands of people every day.

The only thing that i really can't cope with is the almost solid black that you used as the menu-bar background.
I already saw that there's a small, vertical gradient from #000000 to #272727 in terms of the "black" that you used and i wish the same H0%/S0%/B15% distribution happening, but now maybe starting the gradient at #272727 rather from the solid black.
You should also consider experimenting with the increase by B20% or B25%~ ish. (B30% would be too light)
Reason for this is to smoothen out the pallet and not getting overpowered by first sight, especially since 90% of the page is using rather bright colors.

deadbeat wrote:

lose the anime characters
if we do need characters, pippi and yuzu would be better

^ this.
Please do not use any other characters than the osu! mascots if your design were to be a real product (i know you mentioned it's just your personal project but just FYI that mascots must be on the final revision)

and while we're at this; it's best if you also keep the background simple - thus i would recommend removing the catgirl entirely and just leave the hitobject design as it is, since a/ny character would steal the focus on the actual page you're having in front of you.
Besides, osu! forums isn't an anime forum or majorily anime related, whilst the content it offers - states otherwise - but keeping it neutral (meaning using only the things that represents osu!) is most of the times a much better choice.
If you were to put in any kind of character in the BG you would automatically create an unnecessary focal point and that's not the point in having a background that evenly distributes focus.

Also a very, very minor thing which is my own, personal preference, but i actually like the traditional envelope icon that notifies new messages more, than a bell one.
I don't know, i think it just makes it more "personal" to see that you received a message, but that's just my preference thing.

Any than that, the design looks pretty neat.

Oh, you also forgot about the social media buttons/links, so don't forget to add them on your next update, haha.

That's just my two cents,
cheers.

well nice design :3 idk why imo it's quite similar with store.ppy.sh design? but oh well ~

also yeah as deadbeat said, that "original" character (hello Kurumi) would be better replaced by Pippi's artwork, or maybe Yuzu(ru)

It's good to put PP in the main menubar, but where's the game mode :3

I like this design really much

Looking forward to other pages or updates on it.

You guys have no idea how happy i am to see so many responses! This give me motivation to work on it more ^^
Thanks for all the feeback, i read it twice so i dont miss anything and i respect the time you spend writing it.

@NotEvenDoomMusic, i can easily say that i agree with almoust all you say and i will put them as main thing to look when i work more on it.
I have to note one thing tho: the bell icon. I decided to use bell icon and not envelope, because the notifications may not only be messages This adds more functionality to the site which is pain in the ass to the developers i believe (im half web dev - premium wp themes) and i know how it feels to implement this.

So i thought that there could be more notifications up there like the messages originaly + if someone has taken your first place in beatmap, if your beatmap has been approoved, if someone added you as friend and so on. Yes, they can be summed up as messages, but its more user friendly to recieve them in simpler manner.

For the colors: yes, you are right, i will fix that, becuase i wasnt really happy with it too.


@Yuzuru, yeah, accidently it did came to look similar. I didnt knew about the store site and @deadbeat showed it to me yesterday I can say its cool coincidence ^^

Also one even Bigger favour: if you have any cool ideas for the homepage please share them Best to be NOT a new functionaly, but allready existing one that is not presented on the homepage. (example of this is the PP in the header).

Again, thanks for the comments people, i really appreciate it!

-------------------

EDIT: Here is the updated home page:
http://imageshack.com/a/img539/2514/77QBPW.jpg (still not all functionality is presented, if you give me some ideas i would love to add more there ^^)

i love you <3
it would be nice if you added slider too (as deadbeat said) at the background (or whatever is that)
confused about the bell beside the user, is that forum PM? if yes why not changing to mail lol
or probably it's reply on a subscribed thread? :/
you could add the youtube site below the first steps :b
and imo it shouldn't be latest beatmaps, but mostly played beatmaps, as showed on current homepage?

deadbeat wrote:

beatmap search field has a search button, but the user search field doesn't

and if this is really will be the new design, please make a mobile web version too pls. idk if it's a 2 different things, but mentioning it here is an idea too, right? lols
neat and simplistic design. love it <3

＠Senritsu、im sad to dissapoint you, but this is only "fan-made" so to say There is nothing here that is in some sort of consideration from osu! devs. I guess they even dont know of the excisting of this thread, so i want to make this clear:

This is NOT future site update! This is only fan-made and its nothing more than that.

And sorry if i missunderstood you I am saying this for all other who might read these posts.

Now about what you said hmmm ... a site is to be used from the users, and since all want envelope icon then i will change it But know that then it will only be for messages and all other possible notification functionalty is gone.

About home page, yes, i could make one, but i prefer doing the big screen ones first ^^

and imo it shouldn't be latest beatmaps, but mostly played beatmaps, as showed on current homepage?

Yes, you are right about that. I noticed it after i published it here ^^ Will be changed next time.

Also about the video.. mm ... i am not sure its all that great of thing to be there. Sure, it fills empty space, but if it was something more useful then it would be better. For now i might add it, but i am really not sure about that specialy.

The slider - it is in the background, but the footer hide it Didnt notice that too lol

WindFleuret wrote:

EDIT: Here is the updated home page:
http://imageshack.com/a/img539/2514/77QBPW.jpg (still not all functionality is presented, if you give me some ideas i would love to add more there ^^)

wow that's better,

imo, the osu!words should be a bit larger than that.
and is that for notification?

please add messages icon. (or something for messages)
sorry for bad english :c

@AllRiseSilver, as i said i will be changing it to message icon on the next update. I am doing this in my free time, so when i get some i will update it! Dont worry, i am really having fun with it, so i wont be delaying it at all!

imo, the osu!words should be a bit larger than that

What exactly you mean with this?

i think that's a bit too small.
just in my opinion

ok, i will test it and see if bigger one fits better. Just to add a little more weight up there

oh God even though it's fanmade i'd actually want for this to get implemented

well i believe peppy will change the template himself in the near future

Yuzuru wrote:

oh God even though it's fanmade i'd actually want for this to get implemented

well i believe peppy will change the template himself in the near future

this haha
yes the word seems like a bit small... and the color seems flat too. try making it gradient like the current one? ww

Wonderful, I like it

WindFleuret wrote:

EDIT: Here is the updated home page:
http://imageshack.com/a/img539/2514/77QBPW.jpg (still not all functionality is presented, if you give me some ideas i would love to add more there ^^)

eyegasm

Really well done on the updated version of the design, now everything is settle and works splendid together.
I'm sure there's still plenty of user friendly measurements in terms of hotlinking the right thing and even enable more options for the user to customize the top-layer to their likings.
But as of right now, i give it easily a 10/10.

Oh, also you mispelled "osu!first steps" as "osu!fisrt steps".
Just a typo i almost immediatelly caught haha.

Also, i think you already know this, but if this were to be a real thing that is live right now, the news feed box would have some considerable spacing inbetween each post or do you intend to have them a bit stuffed up like this?
Or would the design allow the user to click on, as an example, one of the news and it would expand it to it's original content size on your current page without leaving the homepage? and by clicking on the title of the news, would open the dedicated thread for that specific news?
Because if that's not the case, i would increase the spacing inbetween each article by a small bit so that it doesn't look pressed together.

I'm just curious if you don't mind, because i'm vaguely interested in how this would look as a live website in its end revision.

AllRiseSilver wrote:

i think that's a bit too small.
just in my opinion

The size is just fine,
you don't want your logo to fill up the entire upper screen.
Besides it would cut off too much of the logo if WindFleuret increases the size.

Also to put it up in a perspective, the current osu! logo is smaller than the one that OP did.
So he already increased it by an approximate 10%.

nice, but forum design?

Omggg why ppl (and me, too) don't realize this
Where's 'rhythm is just a click away' wwwwww

I really like the design, it's fresh and clean .

It looks really nice ^~^

I'm looking forward to seeing the other pages ~

Simplicity is the best!

I already Got the Idea of forum pages redesign

Ok guys, here comes the next update on the home page with your suggestions:
http://imageshack.com/a/img633/7435/weaWhb.jpg

What is changed:
1. A little more space for the news area as suggested
2. added "rhythm is just a click away" in the logo (i hope its not a problem ^^)
3. Another rather bigger change is the pink area under the menu. I think it make the whole design look a little more solid.
4. Small paddings changes in the footer
5. Now we have the envelope for messages :yay:

And here comes the new page - Profile:
http://imageshack.com/a/img661/4436/myKu4C.jpg

I had quite a lot of fun doing this one ^^ I hope you like my idea for organizing it.
*note - keep in mind that i still havent added quite a lof of content there, but i hope you get the idea how its going !

Updates will be comming!

i love you <3 [2]
PLEASE APPLY THIS KTHX
but where are http://puu.sh/aMnje.png
there's one thing i want to know about : that button at 'welcome, *user*'. if it's pressed, what will it show?
because this seems missing settings and log out button CAN'T LOG OUT SAO OMG

Ahahaha

Well, see.

As i said, those that you say that are missing ( http://puu.sh/aMnje.png ) are not yet added as i allready said. This is still WIP, so i will be adding them later on. meanwhile im sharing this, just in case some come with awesome idea that i can add ^^

that button at 'welcome, *user*'. if it's pressed, what will it show?

What will show from that button will be dropdown menu with many cool links I will show it in the next preview!
Dont worry, you can logout from my VRMMORPG

Btw, i am currently thinking on adding the customized user page content (the one everyone can add for himself) between the performance points line and the performance graph, as the main important thing is above the graph. The rest is just more and more information that is basicly said in the upper area.

may I know what font did you use in the page redesign? It looks cool (and it's very different from aller)

Lato - https://www.google.com/fonts/specimen/Lato - used for 99.99% of the time
Oswald - https://www.google.com/fonts/specimen/Oswald - used only for the 2 headings in the home page

thanks a lot! (though I'm not that good as a graphic artist, I think I can help)

Hmm, i would love to get some help on that from other people too ! Its fan made by me, but i dont mind cooperating with all that want to help
What i would ask you to do is image for the footer. (background). Something that will blend with it and not stay in the way, but still not make it that empty. Also it has to be related to the whole site tematic (we know what it is ).

1920x400px will be good start. Do whatever you want to, i will test it on the design and see if it fits

Love the profile design! It looks good *^*
Edit: where's the userpage? ;w;

For footer, how about adding mascots from all modes?
Idk tho, just suggestion of what suddenly comes to my mind

Hmm ... thats rather cool idea from both sides to put total of 4 to 6 images. Still, i am not sure if that will look good. Usually i would stay for the current footer, but if any cool graphics come up i would try them right away.

If you have any sugestions for which images of the mascots to add paste them here, i will try and if it looks good i will share

*throws invisible stars*

I'm to hyped for this ~

It's honestly looking great, I like the profile page so far ^^"

I'm thinking, for the characters, they could either be all together, or should be on different parts of the site .

Like for ex. Pippi will be on the homepage and then Yuzu (Wanna be Ryuuta =~= ) could be like on the forums part of the osu website ~

Though, this is only my opinion xD

and forum design ?? :O

Yes, forum will be here too, just wait a little more Im really bussy with other projects. I hope today i will be making some more !

currently not liking the profile page that much right now. i'll offer more feedback when it's finished. but it does need work

First of all I love you for doing this, and holy crap what a good job done.

Some feedback from a nitpicky narrb, these are just my personal opinion.

@-Iz, what you have wrote amaze me! Yeah, you do look at the details and i appreciate this very much. I will take into consideration most of what you wrote, but still there are a few thins i would love to leave as they are. And one of them is the darker menu line, because it gives more contrast to the page. More contrast means less problems navigating (simply visually speaking)

"What width are you going for?"
Its currently a design for 1920x1080px monitors, but its not problem to make it responsive if its being developed. For 2 years now, all my designs are responsive, so this is not an exception. Its just my workflow to do the fullsized desktop one first, so i know all elements there can be.

Facebook side-button's background isn't well hidden, unless it's intended
Thanks for bringing it to my attention. Acrually the button is placed ok, but as i see it it doenst add much contrast with the pink area on the left. I will probably swap them with twitter.

Site search looks really, really awkward
Hahaha, probably yes Well, the best solution i think of is one mixed search field, which is rather harder for implementation. If you have used spotify, there is exactly one like that. It searches Authors, Songs, Playlists all at once and presents them pretty neat. I wanted to make it simpler and leave more inoput fields The other solution is to make one only field and have a dropdown on the right side of it where the user can select what to search for.

Tagline looks weird, and off-place in the logo.
hmm ... i dont see it all that awkward. I will agree that this is NOT the logo of osu!, so its a problem, but i do like how it fits. What you sugested will only make it look like its glued there and its not quite readavle when its vertical.

pp on every page might strain the server depending on what's used.
Every piece of information is requrested every time from the server. So this one is not an exception and wont impact on it, dont worry about that

------------

Date of news are all the same
yes they are, i am lazy from time to time they are not important in any functional way, so i dont have to write diferent ones.

Honestly, honestly if I have to have that top left section, I would never ever see the top beatmaps and the other tabs.
AS you said it, its your personal way of browsing, nothing i can do here As long as its not making your browsing harder its not an issue.

In my opinion, on the home page people want information at a glance. As of your 3rd edit it's slightly too cramped for my liking with not much scrolling room
This is the problem im mostly focused on and not doing much about it. What i feel from inside is to flush it all and do it again, but i blieve its possible to fix it somehow. I should think more on it.

------------

Keep avatar size to 128x128 or smaller
Good idea, will try it out.

About the rest you wrote .. um ... yeah, i didnt get much :D

Would the header and navbar be frozen as the user scrolls down throughout the site?
It can be, it can be not. I will have to decide. When i add more content and i can test it i will post you screenshot to see for yourself ^^

For your footer, taking Senritsu's idea, but instead of the mascots themselves fully-coloured, how about silhouettes of osu! mascots/symbols? Simple grey outline of their silhouette, not too distracting and would blend in well with your background. Grey on black silhouettes are also nice.
Well, if they are only silluets new users will have no idea what they are. Even i could have hard time getting them ;/ I will say its not worth trying.

Little support thingy floating at the left for non-supporters?
Define left please ^^ (and not just "left, dont you know directions") What page, what region?

I'd find it weird if my pp/ranks are separated from the graph. I might be interpreting your sentence wrongly though so don't mind it.
yes, its weird, and just a suggestion. When i try things out i will know.

What about the video playlist at home page? That would greatly help people who have no idea what osu! is to let them know what osu! is.
Ahh that lovley playlist Ok, i will make a few more thoughts on it ^^


------------


Thanks for the long post, its really helpful. Please have a little patience for the next update, because im actually quite full of stuff to work on, and as i said im doing this in my spare time while relaxing the day ^^

For that support thingy on the left, I'm going with the "left is left" way. A picture speaks a thousand words so I'll let it do the job :p It appears on every single page as long as you are not logged in or are not a supporter(I think?)


I think it used to link to /p/support, I can't remember, but currently it brings up a small popup for Zendesk support. Nothing important actually, would just like to see it with the layout. And yeah was just dropping my 2 cents in here

I see Well, i am not fan of those sticky things, but if i can do one screenshot of it next time.

Ahh nice idea.. Shillouetes -> if cursor move to one of them, show the real pict and the name, with a little explanation of who are they? it would be nice if there's a page for themselves

implying i know it and still wrote it there. k lols

I hope they add this and add pippi everywhere and Yuzu too

Love this! i'm really amazed ♥