The Great Python.org Redesign(jessenoller.com)
jessenoller.com
The Great Python.org Redesign
http://jessenoller.com/2012/11/28/the-great-python-org-redesign/
64 comments
Excellent presentation from divio, would highly recommend to check it out, especially for designers or those who work with designers. The wireframes_design.pdf, referenced from the presentation, apparently is also available: http://redesign.python.org/assets/wireframes_design.pdf
Added to my cache: http://jnoller.github.com/redesign_cache/
I wonder if it good UX that the site is designed around first-time-to-python users (and sponsors maybe?) and recurring reasons to come back such as events and the blog (the actual python users) are way down in the footer?
Events and blog entries featured on new landing page proposal, I believe, are also intended for new users, convincing them that the language is actively maintained and has an active community around.
Experienced developers probably don't come to Python.org for development news and new events anyway—there are other channels, including fellow programmers.
Those new to the subject (potential developers or sponsors), though, have nowhere else to go and are 100% likely to end up on Python.org. They also can easily leave forever if not interested.
So, from this standpoint the UX should work well for new users first and foremost. If it does, it's probably good UX.
Experienced developers probably don't come to Python.org for development news and new events anyway—there are other channels, including fellow programmers.
Those new to the subject (potential developers or sponsors), though, have nowhere else to go and are 100% likely to end up on Python.org. They also can easily leave forever if not interested.
So, from this standpoint the UX should work well for new users first and foremost. If it does, it's probably good UX.
Wow, I really, really, really like that second design. The two nav menu is brilliant. Maybe I'm behind the times (I think I am but that's why I'm not a designer) but it's sexy.
Cached version (thanks github pages): http://jnoller.github.com/redesign_cache/
[deleted](1)
The top navigation with the colored lines is great, similar to the bbc website http://www.bbc.co.uk/ where each of the topmost items have a different colored underline.
Now for the negatives:
those gradients in your main navigation ( ABOUT, DOWNLOADS, etc... ) is horrible. I see this a lot in bad Wordpress themes. It's dated, looks bad now, and will look worse in 6months.
The blue SEARCH font color on the blue background is a poor contrast choice.
Those Python 2.x, 3.x buttons look terrible too. It's the gradients, remove those inner grey gradients, it doesn't add anything to the buttons, doesn't even make them stand out.
Your code formatting screen looks great.
The responsive layout also needs work. The double navigation bar on ipad doesnt look nice. The search bar on the iphone is WAY too small. that should either be stacked / above / below the nav, not side by side on a 320px screen.
---
web design is going flat, with big font types, and big images, everything is square, clean.
http://www.hulu.com/ http://www.uniqlo.com/us/ http://www.ebay.com/new http://www.ign.com/articles/2012/11/05/the-walking-dead-kill...
Personally i would keep it simple like backbone documentation
http://backbonejs.org/
---
Good job though :)
Now for the negatives:
those gradients in your main navigation ( ABOUT, DOWNLOADS, etc... ) is horrible. I see this a lot in bad Wordpress themes. It's dated, looks bad now, and will look worse in 6months.
The blue SEARCH font color on the blue background is a poor contrast choice.
Those Python 2.x, 3.x buttons look terrible too. It's the gradients, remove those inner grey gradients, it doesn't add anything to the buttons, doesn't even make them stand out.
Your code formatting screen looks great.
The responsive layout also needs work. The double navigation bar on ipad doesnt look nice. The search bar on the iphone is WAY too small. that should either be stacked / above / below the nav, not side by side on a 320px screen.
---
web design is going flat, with big font types, and big images, everything is square, clean.
http://www.hulu.com/ http://www.uniqlo.com/us/ http://www.ebay.com/new http://www.ign.com/articles/2012/11/05/the-walking-dead-kill...
Personally i would keep it simple like backbone documentation
http://backbonejs.org/
---
Good job though :)
There's some odd execution-level details I noticed also: all the big grey buttons for downloads look pre-pressed because they use a dark-to-light gradient which makes them look beveled in. In case the designers have never actually seen a physical button in real life before, buttons pop out and need a light-to-dark gradient indicating that light is hitting the top of the button.
I wrote a blog entry on this topic awhile back: http://flyosity.com/design/making-rounded-rectangles-look-gr...
I wrote a blog entry on this topic awhile back: http://flyosity.com/design/making-rounded-rectangles-look-gr...
thank you
I agree. I looked at the wireframes in the proposals first and was very impressed. Once I saw the actual screenshots with the gradients and the dark color scheme, it no longer looked like such a big step forward.
That ebay page is pretty slick.
That ebay page is pretty slick.
Thank you for the feedback I will take it and give it to the team
Agreed, those buttons may be the weakest part of the design. Perhaps a compatible green would highlight them properly. Another choice might be black, but would be harder to pull off.
Man, I really thought that the OP was using a bit of hyperbole on the Divio proposal, but holy shit - that is the single best presented and thought out proposal I have ever seen. I'm sure they went a bit above and beyond due to the high profile of the site involved, but I'm seriously impressed. What a fantastic reference point for what a design and website proposal should be.
Agreed, their proposal was out of this world. Never seen a company pour that much time and effort into a presentation before.
What a smart marketing tactic (that paid off in a sales win too) to just throw everything into the proposal and kill it. Very smart, and it speaks volumes about the organisation.
[deleted]
The overuse of gradients really makes the website look cheap and like a malware website.
The highlighted gray navigation link on hover doesn't contrast at all with the blues.
On the other hand, disregarding the color scheme and gaudy gradients, the layout is solid. Clear separation of hierarchies and relationships will make for an easy to navigate website.
The highlighted gray navigation link on hover doesn't contrast at all with the blues.
On the other hand, disregarding the color scheme and gaudy gradients, the layout is solid. Clear separation of hierarchies and relationships will make for an easy to navigate website.
Don't know why you're being downvoted - I thought the exact same thing. It looks like it's from 2002, not 2012.
A (perhaps redundant) request: Please please do not sacrifice usability for beauty/design. I love current Python docs and I think they're one of the best out there.
Thanks for the hard work! It looks great. :)
Thanks for the hard work! It looks great. :)
I don't mean to be a pedant, but if a design sacrifices usability, it's not really design. But I agree with the sentiment, an overly-artistic design aesthetic would conflict with the goals of the site. Hopefully the designs will reflect this.
The docs are not part of the redesign except perhaps for updated style sheets. See http://pythonorg-redesign.readthedocs.org/en/latest/
I believe this is the relevant quote from the linked page:
> The proposal may feature a retheming of http://docs.python.org but need not do so.
IMO Python documentation actually looks very nice now (not sure if anything was written about that redesign). I hope very much that readability and clear looks won't be compromised. =) Docs may deserve some improvement from navigation standpoint, but this would require more than pure stylesheet update.
> The proposal may feature a retheming of http://docs.python.org but need not do so.
IMO Python documentation actually looks very nice now (not sure if anything was written about that redesign). I hope very much that readability and clear looks won't be compromised. =) Docs may deserve some improvement from navigation standpoint, but this would require more than pure stylesheet update.
The docs were recently migrated to a much cleaner and brighter look: http://docs.python.org/3/library/io.html
I don't expect the main site's redesign will impact the doc in any way, shape or form.
I don't expect the main site's redesign will impact the doc in any way, shape or form.
I was referring to the 2.7.3 docs. Personally I don't like the brighter 3+ docs.
This is much more readable to me despite just the sidebar being different: http://docs.python.org/2.7/library/io.html
I'm really curious as to what other subtle changes contribute to that but I just prefer the 2.7 docs over 3 given that the text area looks kind of similar if you ignore the sidebar.
This is much more readable to me despite just the sidebar being different: http://docs.python.org/2.7/library/io.html
I'm really curious as to what other subtle changes contribute to that but I just prefer the 2.7 docs over 3 given that the text area looks kind of similar if you ignore the sidebar.
It's the sidebar. At least that's what makes the difference for me.
The font and color of the 3.x sidebar are so similar to the main text that I find my eyes wandering into the sidebar as I read the text.
In the 2.7 version, the dark blue-green sidebar with inverse text is very different looking from the main area. It makes a hard stop on the left, so my eyes don't wander there as I read the main copy.
Testing this theory, if I collapse the sidebar in both versions, my discomfort with the 3.x docs goes away. Now they seem pretty similar - a few things I like better in the new, a few were better in the old, but nothing major like the sidebar.
I do like having different sidebar colors for the two versions, so there's a constant visual cue as to which version I'm looking at.
Another experiment: I viewed the 3.3 docs in IE8 so it knocked out the rounded corners. I definitely like the square corners better. A particularly bad example is the top of the sidebar margin after you collapse the sidebar - it looks really weird with the round corners. Much better looking in IE8 with the square corners.
I also get a much better sense of the top navigation in the 2.7 version. In the 3.3 docs there's some little stuff above the first heading, but it doesn't really feel like this is the top of the page. If I've scrolled down a ways and then scroll back to the top, I get the feeling that I might as well just keep on scrolling past the top. There just isn't a sense of it being something different from the rest of the page content.
(Yes, I know how to use the Home key - I'm not talking about physical navigation but how the page feels.)
In the 2.7 version, there's a clear stop at the top - and at the bottom - just like there is at the left. Also, all three margins connect, so it really sets off the main text. Everything looks pretty much the same in the 3.3 version; it doesn't have this clear separation of navigation from content.
The font and color of the 3.x sidebar are so similar to the main text that I find my eyes wandering into the sidebar as I read the text.
In the 2.7 version, the dark blue-green sidebar with inverse text is very different looking from the main area. It makes a hard stop on the left, so my eyes don't wander there as I read the main copy.
Testing this theory, if I collapse the sidebar in both versions, my discomfort with the 3.x docs goes away. Now they seem pretty similar - a few things I like better in the new, a few were better in the old, but nothing major like the sidebar.
I do like having different sidebar colors for the two versions, so there's a constant visual cue as to which version I'm looking at.
Another experiment: I viewed the 3.3 docs in IE8 so it knocked out the rounded corners. I definitely like the square corners better. A particularly bad example is the top of the sidebar margin after you collapse the sidebar - it looks really weird with the round corners. Much better looking in IE8 with the square corners.
I also get a much better sense of the top navigation in the 2.7 version. In the 3.3 docs there's some little stuff above the first heading, but it doesn't really feel like this is the top of the page. If I've scrolled down a ways and then scroll back to the top, I get the feeling that I might as well just keep on scrolling past the top. There just isn't a sense of it being something different from the rest of the page content.
(Yes, I know how to use the Home key - I'm not talking about physical navigation but how the page feels.)
In the 2.7 version, there's a clear stop at the top - and at the bottom - just like there is at the left. Also, all three margins connect, so it really sets off the main text. Everything looks pretty much the same in the 3.3 version; it doesn't have this clear separation of navigation from content.
You've hit the nail on the head. This describes perfectly the annoyances I come across while going through 3.3 docs.
Looks really modern. A really impressive improvement over what python.org currently has. I'm no usability expert, but links look like links and buttons look like they can actually be pressed, a small detail that gets overlooked these days.
We are definitely keeping an eye on usability we have several experts on the team reviewing each design bit by bit
Looks good. I think I should point out that the current version of python.org is actually pretty decent in the scheme of programming language/codebase sites (there are some real eyesores out there!)
We've heard this a lot, and I think many of us on the team do still have a soft spot for the current site. It has served us well over time, but it's really time to grow the site along with Python - the language, the community, and everything that goes with it.
One of the biggest parts of this redesign is happening on the back end. One thing I look after on the site is the PSF board resolutions and minutes pages. Oh you see a typo in the latest page? Here's how you fix it:
The new backend will continue to support the developer-like workflow (which really is good in some cases), and it'll support online editing which will be nice for a lot of things as well.
One of the biggest parts of this redesign is happening on the back end. One thing I look after on the site is the PSF board resolutions and minutes pages. Oh you see a typo in the latest page? Here's how you fix it:
Get to machine that has the checkout > svn up > edit file > rebuild website locally > run webserver and check local instance > svn ci > wait for server cron job to catch the change and update the live site > confirm on live site
The new backend will continue to support the developer-like workflow (which really is good in some cases), and it'll support online editing which will be nice for a lot of things as well.
Just to add - a comparison to the lowest common denominator is not what we're after :)
But he's right, the current Python website looks a lot better than some other websites coughPHPcoughGocough
My 2 cents, I really like Nodejs's website. Closer to Python, I'm really digging the websites for the Pocoo packages (Flask, Jinja2 etc).
My 2 cents, I really like Nodejs's website. Closer to Python, I'm really digging the websites for the Pocoo packages (Flask, Jinja2 etc).
No need to go site/language bashing :) We're going to make it look good, usable and a showcase for Python. Other language sites while good for "competitive analysis" aren't needed to make ours shine.
Let's just stay civil
Let's just stay civil
Yes while it may be better than some we can do all whole lot better and that's the goal
I love love love the final wireframes in the Divio presentation... They almost don't need to go any higher-res than that. But then the few linked screenshots at the bottom seem to suggest a very rendered look done in gradients and 3D buttons which I don't love as much.
There's also a version up on the PSF blog: http://pyfound.blogspot.co.uk/2012/11/pythonorg-is-getting-m...
And a cached copy: http://jnoller.github.com/redesign_cache/
Most open source projects need people like OP to rebuild their website!
Most open source projects would love to have $70K to spend on professional designers to rebuild their website. ;-)
And most would love to have people working on it for years to scrimp and save the money, evaluate proposals, fight the stop energy and "good enough" crowd.
Money was the least of the problems. That, at least you can make through hard work and sweat.
Money was the least of the problems. That, at least you can make through hard work and sweat.
I have put up a gh-pages quick and dirty cached version here: http://jnoller.github.com/redesign_cache/ I sincerely apologize for the total hosting fail.
Wow, 70k for a glitzy closed source web site? I'm much more impressed with things like npm-www which are clean, effective, and great examples of using the language in their own right.
Where do any of the posts, documentation, or other information suggest that any part of this would be closed source?
Asking because I will update that mistake immediately, so I could use a pointer or two.
Asking because I will update that mistake immediately, so I could use a pointer or two.
I'm pleasantly surprised that PyPi will be prominently featured on the official python.org redesign!
Tiny nit: the code examples seem to be using a variable named `l`, which is one of the "names to avoid" per PEP-8.
http://www.python.org/dev/peps/pep-0008/#names-to-avoid
http://www.python.org/dev/peps/pep-0008/#names-to-avoid
[deleted]
OT: Does anyone know what happened to official Ruby site redesign proposal?
l is a bad variable name, in that font it is worse.
Any cached version available?
If you're running Chrome, just add cache: in front of the URL and boom! Google cached version.
TIL how to use Chrome. Thank you.
I got tired of having to look this up and decided to write a Chrome plugin to load the cached version of pages. You can download the extension from here - http://blog.sdqali.in/downloads/GetCache.crx
You might find it useful.
EDIT: Fixed minor typo.
You might find it useful.
EDIT: Fixed minor typo.
I'm yelling at webfaction now
Link to the original RFP: http://pythonorg-redesign.readthedocs.org/en/latest/
PSF Blog post: http://pyfound.blogspot.co.uk/2012/11/pythonorg-is-getting-m...
Link to the winning bids:
http://redesign.python.org/assets/Python-proposal-Sept2012-c...
http://redesign.python.org/assets/divio_python_presentation....
I'm working on the hosting issue now.