Feedback Needed / Larger Logos in OOTP HTML Reports

[udbacker58]

I'm assuming it would look similar to Picture 1. I'd propose a look similar to picture 2 to make it look a little cleaner. Obviously that is a quick and dirty mock up and would need to be tidied up some.

[Andreas Raht]

Let me try to explain the idea a little bit more:

Logos will be 150x150 in OOTP 10, we will not change the logo size.
Transparency will not become a bad thing. Transparency is great!
We just want to display the logos as big as possible because they lose a lot of their quality when they are resized to 50x50 pixels as they currently are for most reports.
So the idea is to use the whole height of the headline of the reports. We would then create an HTML table with one cell on the right or on the left side where we can put the logo in. On the other side of this cell we would have three rows for BNN banner, menu and title of the report. The three rows together would have the same height as the logo cell.

The logo cell needs a background. This could for example be a graphic which looks like the banner on top of the reports and with a white square on it where the logo would be placed on.

A problem with several external browsers is that they resize the logos badly. So in OOTP 10 you will have logos for different sizes like 150, 100, 90, 50, 40 and 25 pixels width and height. OOTP creates them automatically if they don't exist, and OOTP will do a much better job than the MS Internet Explorer for example. You could also create your own logos for each size so the game would use the 100x100 logo on the team reports and a completely different logo in 25x25 on the teams list report.

[Andreas Raht]

udbacker, that's right. Unfortunately I cannot do it as in #1 because I cannot have three "rows" of background colors in a single cell. I have to do that page without using DHTML or stuff like that, only plain HTML. So #2 will be the way to go anyway.

Probably best would be to do it as in #2 but with the logo on the right side?

[truthserum]

Originally Posted by Andreas Raht

Probably best would be to do it as in #2 but with the logo on the right side?

I do like the idea of #2 more anyway, either right or left. Looks like it was supposed to be there. A great idea, thank you.

[koohead]

hmm...i kinda liked picture 1.

[Andreas Raht]

Here's a first draft...

[kq76]

I like #1 way better. Andreas's example looks a little boxy when other lines are diagonal, but it's not too bad. I don't understand why you can't do the 3 cell thing with css though. It's pretty easy once you read a tutorial on how to do it.

[Andreas Raht]

Originally Posted by kq76

I like #1 way better. Andreas's example looks a little boxy when other lines are diagonal, but it's not too bad. I don't understand why you can't do the 3 cell thing with css though. It's pretty easy once you read a tutorial on how to do it.

Sure, I could do that, but the in-game browser would not understand it

[Le Grande Orange]

Originally Posted by Andreas Raht

So in OOTP 10 you will have logos for different sizes like 150, 100, 90, 50, 40 and 25 pixels width and height.

My first suggestion there is to not use so many varying sizes. (It's a suggestion I made way back during OOTP 2006's beta in reaction to all the many logo display sizes used in that version.)

It's better, from a consistency point of view, to only use three or four display sizes. I would suggest display sizes of 150x150 and 100x100 for primary team logos, and 75x75 and 50x50 for secondary team logos. (The latter, of course, would mean implementing the option to have secondary team logos. That is something I definitely recommend.)


In terms of the mockups presented, I think I'd prefer the team logo being presented on the left side rather than the right.

[kq76]

Originally Posted by Andreas Raht

Sure, I could do that, but the in-game browser would not understand it

Oh. Well, I guess you could improve your in-game browser to read that stuff or go with something like in your proposal. Either way, I think it's probably better with larger logos than smaller.

[fhomess]

Honestly, it all looks very forced. There's no grace to it. From a page consistency point of view, it just looks weird. You've got the team logo and a game-wide banner taking up the same vertical space. It's as if the game banner is a subsection of the team page, when in reality, the information flow is opposite. If tranparency works, then you could maybe round off the BNN banner and have the team background color underneath it as the cell bg color. With the same color behind the team logo, it'd all look like part of the same section. Another idea that would help separate the two might be to give the BNN banner a 3-D edge look that it's elevated in front of or dropped back behind the team banner section. That'd really help the page look better and still allow the team logo to be displayed at the larger size. By putting the 3-D effect on the BNN banner, you let the cell background colors bleed throught he transparent part of the image and still use regular HTML.

FWIW, I'll also chime in that the in-game HTML leaves you with about a half screen worth of viewable data. Pretty lousy. The in-game browser really ought to be able to handle anything an out-of-game browser can do, or maybe HTML isn't the best option for in-game views.

[PSUColonel]

Originally Posted by fhomess

Honestly, it all looks very forced. There's no grace to it. From a page consistency point of view, it just looks weird. You've got the team logo and a game-wide banner taking up the same vertical space. It's as if the game banner is a subsection of the team page, when in reality, the information flow is opposite.

which is why it's fine in it's current form IMO. If it ain't broke, don't fix it.

[fhomess]

Originally Posted by PSUColonel

which is why it's fine in it's current form IMO. If it ain't broke, don't fix it.

Well, define broke. I think a number of logo designers would feel that losing significant details of their creations would qualify as broke. The HTML changes required are pretty basic. Here's a quick and dirty mockup of what it could look like with a little styling (just cut off some of the top banner and added a beveled edge). IMO, it already looks much better than Andreas' blocky prototype, and the curved edge with bevel lets you see that the logo goes with the team stuff regardless of what background color is used.

[MB.Pelicans]

Originally Posted by fhomess

Well, define broke. I think a number of logo designers would feel that losing significant details of their creations would qualify as broke. The HTML changes required are pretty basic. Here's a quick and dirty mockup of what it could look like with a little styling (just cut off some of the top banner and added a beveled edge). IMO, it already looks much better than Andreas' blocky prototype, and the curved edge with bevel lets you see that the logo goes with the team stuff regardless of what background color is used.

I hope Markus and Andreas take a good look at this, I love this mockup

[truthserum]

You are right....that does have a better look. Nice job.

[Le Grande Orange]

This thread is reminding me that I have to try and get started on my "LGO's Big Book of Redesigned OOTP screens and interface" project...

[silvam14]

Originally Posted by fhomess

Well, define broke. I think a number of logo designers would feel that losing significant details of their creations would qualify as broke. The HTML changes required are pretty basic. Here's a quick and dirty mockup of what it could look like with a little styling (just cut off some of the top banner and added a beveled edge). IMO, it already looks much better than Andreas' blocky prototype, and the curved edge with bevel lets you see that the logo goes with the team stuff regardless of what background color is used.

I like this look the most

[Andreas Raht]

Originally Posted by fhomess

Well, define broke. I think a number of logo designers would feel that losing significant details of their creations would qualify as broke. The HTML changes required are pretty basic. Here's a quick and dirty mockup of what it could look like with a little styling (just cut off some of the top banner and added a beveled edge). IMO, it already looks much better than Andreas' blocky prototype, and the curved edge with bevel lets you see that the logo goes with the team stuff regardless of what background color is used.

This is much better than my draft

But there's still room for improvement... our graphic designer saw this thread and couldn't sleep anymore We'll provide another draft tomorrow!

[MB.Pelicans]

I was wondering if it would be possible to expand on somehting that was said earlier in this post, did I read Andreas correctly that we will now be able to use completely different logos for each size logo that the game will use in OOTP 10?

If so, can the game still automaticallly shrink logos to the desired sizes? I am asking because I have lots of alternative logos that I could plug in, but they are all a standard 150x150, So I am curious if its just going to be something in the name, or in the location they are saved that will decide where and what sizes the game will use the logos?

[Andreas Raht]

Originally Posted by MB.Pelicans

I was wondering if it would be possible to expand on something that was said earlier in this post, did I read Andreas correctly that we will now be able to use completely different logos for each size logo that the game will use in OOTP 10?

If so, can the game still automaticallly shrink logos to the desired sizes? I am asking because I have lots of alternative logos that I could plug in, but they are all a standard 150x150, So I am curious if its just going to be something in the name, or in the location they are saved that will decide where and what sizes the game will use the logos?

Just put them in, OOTP will resize them automatically if the files don't exist. For example if there's a team named Denver Demolishers, OOTP wants to use a logo file Denver_Demolishers.png from the images folder. If it doesn't exist, it will create one: OOTP will check the /logos folder for a logo matching that name or OOTP will create a fictional logo.
After doing that, OOTP will check the images folder for a logo file Denver_Demolishers_100.png. If it doesn't exist, it will be created. OOTP will do this for each dimension, using the appropriate number, down to Denver_Demolishers_25.png.
OOTP will not resize the original logo of course. The original logo will remain 150x150 pixels.

So, you can either let OOTP do that or you create your own logo(s) for one or more dimensions and save them in the images folder. OOTP checks each single file and if one of the files already exists it will be used.

Here's the next draft of the reports header, made by our graphics designer Aurelio! There are 110x110 pixel now for the logo. This report header could be customized much easier than the old one. Online leagues could just replace the head line and the logo on the right with their own logo!
Do you like the draft?