Coming soon: the x264 website (looking for a graphic designer)

[Gabriel_Bouvigne]

Except the fact that it's orange...
I am wondering how are you going to have a gradient as background which looks good whatever the browser resolution?

And regarding the scrollbars:
"Though it may make sense to design a styling mechanism to control the presentation of scrollbars, the MSIE scrollbar-*-color properties make too many assumptions about a particular scrollbar appearance design.

The working group considered adding the scrollbar-*-color properties and rejected them quite some time ago.

For CSS3 Basic UI, it is too late to add such a significant new feature. It could be considered for a future version."
( http://www.w3.org/Style/css3-updates/css3-ui-comments )
Of course you could create some custom scrollbars totally from scratch using some javascript, but....

[smok3]

i don't have time, but i can still find some to be 'smart': the look of the site nowadays is almost completely irrelevant, only content matters, for something as specific as x264 that should be true even more.

[Zwitterion]

Here is the gimp file:
http://www.mediafire.com/?jmgrxjr4mrs
You'll probably need Arial Rounded MT Bold and uni 05_54 (from here (http://www.miniml.com/)).

I agree the colors and background need work.
But I like orange because Xvid, DivX, Ateme and Mainconcept all are blue. :eek:

grey/orange:
http://img230.imageshack.us/img230/3310/x264sketch2bxq6.th.png (http://img230.imageshack.us/my.php?image=x264sketch2bxq6.png)

[Sharktooth]

a variation based on Zwitterion idea.
http://www.webalice.it/f.corriga/x264/web/

[LoRd_MuldeR]

a variation based on Zwitterion idea.
http://www.webalice.it/f.corriga/x264/web/

Looks good, except for background :p

[Sharktooth]

background is a single vertical line to show horizontal gradients can be made.
it can be changed withouth too much problems.
the news are just an IFrame, so scrollbars are shown when needed, except for Opera that has its own behaviour...
the navigation buttons have a hovering effect too (im just learning how to play with Adobe Fireworks...).

[LoRd_MuldeR]

the navigation buttons have a hovering effect too

IMHO a more unobtrusive hover effect would look better...

[Blue_MiSfit]

IMHO a more unobtrusive hover effect would look better...

Concur, maybe a drop shadow or illumination effect would go nicer.

I do like the overall design more.

[Sharktooth]

tomorrow... :)

[Sharktooth]

update... same URL: http://www.webalice.it/f.corriga/x264/web/
html + sliced images: http://www.webalice.it/f.corriga/x264/x264_html_export.7z
fireworks .png with layers and slices: http://www.webalice.it/f.corriga/x264/x264webdraft.png

[Kurtnoise]

I see red/blue point on the left top corner when I click on buttons (Home, Download, etc..). Is it intentional ?

:p

I'm using FF3.

[Sharktooth]

uhm.. no? also i cant see them. what browser are you using?

[kemuri-_9]

he said he was using Firefox 3, as am I, and I'm getting the same problem:

it's this little small 2x2 or so square that appears at the top left of a button after it gets clicked.

it's blue from being clicked and turns red during a click.

[wyti]

He's using Firefox 3
I'm using it and i see the bug too
in css words : a:active display a red point (square ?) at the left top corner of the link and a:visited (i think) display a blue point

[Sharktooth]

firefox rendering bug? opera, safari and ie do not show that...
however i confirm FF3 shows the blu and red dots - it's a browser bug. dont worry, on the real website javascript wont be used for the hovering effects (it will be done with CSS... at least i was told so...).

[bob0r]

I love the basic photoshop filters used :p

That's why for my x264 logo, i used many and many until it became somewhat original....

Background and the logos/buttons need a lot more work.
Details on those are what make a difference + ofcourse proper css usage!

[Sharktooth]

i was told to keep minimal graphics. the logo... well... it's not a logo, it should be replaced.

[Brother John]

On the whole I like that design. It's plain and simple, easy to scale dynamically and different from most of the other quite corporately looking codec websites. It might not win a price for originality, but that's hardly a major goal. Anyway, very fitting for a straight forward no-nonsense type of project like x264.

On to the critique!
The background gradient doesn't blend in with the rest because it introduces too much “messyness” and the colours don't fit. Imo a plain light grey-brown or something similar would work better.

Also I'm against the newsbox-with-scrollbar because scrollbars in the middle of a page tend to be bad. Most of the time this leads to too small content areas in all non-enormous browser windows. It's a lot cleaner and more flexible if the whole page just extends downward as far as needed with a single vertical scrollbar for the whole window.

At the moment I find it a little hard to imagine how a wiki with it's rather rich functionality and accompanying UI elements can be integrated into this minimalistic approach. I'm not saying it can't be done, but it sure needs some serious thinking.

Oh, and I assume this is just intended as a design demo and commenting on technical implementation issues isn't useful?

[LoRd_MuldeR]

dont worry, on the real website javascript wont be used for the hovering effects (it will be done with CSS... at least i was told so...).

I hope so! There are very few web-designers that keep in mind that the user might disable JavaScript in his browser.
A lot of web-sites simply stop working or don't show up properly, when you disable JavaScript nowadays. That's really annoying.
You really shouldn't use JavaScript for things that can be done with simple HTML code plus CSS.
And if you really need to use JavaScript on your site, then please show some alternative content to None-JavaScript users.
The <noscript>...</noscript> tag exists for a reason!

[Sharktooth]

@brother john: got it i'll remove the box in the next update
the background, as i said, can be easily removed. it is there to show horizontal gradients can be made. ill remove it in the next update as well.

@lord mulder: as i said the guy that will build the website wont use JS. to quote him:
lets try to keep all clients preference offtopic
not modifing anything via JS/DOM of his browser
scrollbars-color/width/shape windowsize/title/rollovers/links
etc etc
CSS can handle it for all current browsers
(I'm one of these freaks who likes STANDARDS and validation)

[LoRd_MuldeR]

@lord mulder: as i said the guy that will build the website wont use JS. to quote him:
lets try to keep all clients preference offtopic
not modifing anything via JS/DOM of his browser
scrollbars-color/width/shape windowsize/title/rollovers/links
etc etc
CSS can handle it for all current browsers
(I'm one of these freaks who likes STANDARDS and validation)

Sounds like he is willing to do the job in the proper way :)

[Zwitterion]

Also I'm against the newsbox-with-scrollbar because scrollbars in the middle of a page tend to be bad. Most of the time this leads to too small content areas in all non-enormous browser windows.
Right now the newsbox is very big, but I see nothing against a small box that shows no more than two news entries at a time and would disappear when scrolling down.
Where to put the news instead anyway? I'd keep them on the front page, so that everyone immediately sees how active the project is. :)

some more thoughts:
- I'm not a big fan of dropshadows... they are a bit out of place here I think.
- For hovering effects I had a color change like this in mind:
http://img294.imageshack.us/img294/5954/hoverrt2.png (http://imageshack.us)
- What's that crease in the upper left corner?
- IMO lowercase would look better on the headlines.
- Does it have to be *.com? Usually I associate a *.org domain with an open source project.
- What about the logo from x264.nl (if there should be a logo at all):
http://img294.imageshack.us/img294/4898/x264logort6.png (http://imageshack.us)

[Sharktooth]

yup, that could be good... i have a "RGB" version of the x264.nl logo i made some time ago for the x264VFW encoder settings icon. i have to search it, ill show you tomorrow.

[Dark Shikari]

- Does it have to be *.com? Usually I associate a *.org domain with an open source project.Akupenguin owns both .com and .org, I believe, so we can get the best of both worlds.

[Sharktooth]

here it is... (i made some modifications... it now looks better):
http://www.webalice.it/f.corriga/x264/x264logo.png

[saint-francis]

If you're taking votes, honestly I'm partial to the x264.nl logo.

[kemuri-_9]

hmmm.... the first i thing i thought of when i saw the above logo was:
"Ugh.... micro$oft colors"

I'm just getting this large m$ feel from it... not particularly a good one either.

[Sharktooth]

not my fault if M$ uses RGB too in their windows logo...

[Warpman]

here it is... (i made some modifications... it now looks better):
http://www.webalice.it/f.corriga/x264/x264logo.png

oh nice! i like it :)

It's so shiny :D

[e-Pawel]

update... same URL: http://www.webalice.it/f.corriga/x264/web/

To be honest... I don't like it :( The layout is okay, but I neither like the combination of black and orange nor the background. As for me it doesn't look professional.

Here's a website a created (but I don't have anything in common with what's on the page :) ) quite a long time ago (which hasn't been finished til now and won't be):

http://growbusters.funpic.de/

I'd suggest rather such colors and such background.

Dunno why the buttons look that strange but it doesn't matter either.

[LoRd_MuldeR]

To be honest... I don't like it :( The layout is okay, but I neither like the combination of black and orange nor the background. As for me it doesn't look professional.

I don't like the background either, but AFAIK it's simply a demo/placeholder. The rest looks very promising...

[bob0r]

LOL don't use my x264.nl logo, its highly copyrighted and too beautiful to be used!

No really, we need some gfx people here :D

[Sharktooth]

i made another update...
*see below*

[Atak_Snajpera]

New logo prototype
http://img84.imageshack.us/img84/8569/new1bs0.th.png (http://img84.imageshack.us/my.php?image=new1bs0.png)

[Sharktooth]

nice... but could you try with different colors? maybe it's me... but i dont like yellow and cyan...

[BlackSharkfr]

You know what ?
i still prefer the simplicity and style of the x264.nl logo which was shown on the previous page

http://img294.imageshack.us/img294/4898/x264logort6.png

[Sharktooth]

D_S is quite busy actually but i've talked to him and he expressed his preference for the x264.nl logo (the one above) so... there we go...
heres another update ... same url (reload if necessary): http://www.webalice.it/f.corriga/x264/web/
html+sliced images: http://www.webalice.it/f.corriga/x264/x264_html_export.7z
fireworks .png + layers and slices: http://www.webalice.it/f.corriga/x264/x264webdraft.png
photoshop .psd export (fonts may be screwed - ensure you have Bitstream Vera Sans installed): http://www.webalice.it/f.corriga/x264/x264.psd

for the .psd and fireworks .png you may need the bitstream vera font: http://ftp.gnome.org/pub/GNOME/sources/ttf-bitstream-vera/1.10/

the vertical size is auto-adapting if the content grows.

[e-Pawel]

I like this logo fine.

http://img255.imageshack.us/img255/7803/x264ml3.th.png (http://img255.imageshack.us/my.php?image=x264ml3.png)

But I modified it a very little bit. The coloured surfaces are gradients from transparency to green/red/blue.

[Atak_Snajpera]

What do you think about this
http://img253.imageshack.us/img253/2789/new1ze9.th.png (http://img253.imageshack.us/my.php?image=new1ze9.png)

[e-Pawel]

What do you think about this
http://img253.imageshack.us/img253/2789/new1ze9.th.png (http://img253.imageshack.us/my.php?image=new1ze9.png)

Looks great :D Though I actually prefer the simple design of the old x264 logo, your one is great too and the page looks much more professional. But could you made the link-bar glossy?

[Sharktooth]

nice, i really like it. this time i like the colors too :)

[e-Pawel]

http://img237.imageshack.us/img237/6391/ataksnajperatv5.th.jpg (http://img237.imageshack.us/my.php?image=ataksnajperatv5.jpg)

That's how I'd like to see it.

And could you use another font for the caption above the logo ("highly...")? The one you've used in RipBot would be nice.

[plonk420]

if professional fonts are used in the logo, will you (or the company you work for) pay for them? or can a donation be taken up?

[Atak_Snajpera]

http://www.fontcenter.com/fonts/vdub.html

[Rumbah]

I really like the design but I have to say that I think that the contrast between the light brown background and the white of the font is too low. It may work for the big 264 but for the "small" words on top I think it's too hard to read (maybe it's my eyes ;) ).

So although I like the general design it's exhausting to look at it for my eyes. The orange/dark gray design was much easier to look at an I liked the colors :) .

[Atak_Snajpera]

I really like the design but I have to say that I think that the contrast between the light brown background and the white of the font is too low. It may work for the big 264 but for the "small" words on top I think it's too hard to read (maybe it's my eyes ).

I suggest you to calibrate monitor:)

[bob0r]

I suggest you to calibrate monitor:)

Nah he is right, on 1920x1200 its no so clear.
The orange theme demo is much clearer.

[LoRd_MuldeR]

I prefer the "orange" version and the simplistic (http://img294.imageshack.us/img294/4898/x264logort6.png) logo. The [><] logo looks too "commercial" to me ;)

[Brother John]

Yep, simplicity rules! Also the x264.nl style logo has the added benefit that it’s already well known. Because of it’s simplicity it’s also well suited to put on hardware devices. Just dream of a nice and shiny stylish multimedia box with integrated x264 encoder. :)

[audyovydeo]

any takers ?

http://mapage.noos.fr/manamba/x264/pm5544.png


;-)
a/v