New design for pyjs.org website - WE WANT YOU!

[Peter Bittner]

Hi everyone,

you may have noticed that the project's website at http://pyjs.org has
changed at least twice, and quite a bit since our project transition
and the move to the GitHub platform earlier this year. We will take
the final step now, and we need YOUR support: If you are a web
designer or just a natural born wizard of beautiful design ideas and
stunning logos. Please volunteer now, WE WANT YOU!

From the very beginning the plan was to move the website into an
environment where it can be edited both easily and safely by everyone
in our community, and provide the collaboratively collected
information on Pyjs as a good-looking state-of-the-art website that
attracts new users and serves all the information needed by people
interested in Pyjs. The not totally obvious, but probably clever
choice was that we wanted to use GitHub's convenient (Wiki)
infrastructure, and use a tool to automagically create a beautiful
website out of it.

The tool of choice was and stil is Sphinx [1], most notably a Python
technology (of course!) to create documentation from reStructuredText
files. The current website is generated from .rest files already,
which is what Wiki pages are on GitHub: version-controlled .rest
files. Sphinx will replace the "hand-coded" generation of the website
that Anthony hacked into the build.py script [2]. What is missing now
is a great design for the new webstite. We need a Corporate Design
with the existing or a new Pyjs logo as a basis for all this.

Can YOU do this? Please volunteer!

Technically, the new website will run Sphinx themes. Built-in themes
are here [3], we'll probably take one of those and adapt it to our
needs. This will be the second part of the web design work we're
looking for volunteers for. If YOU think you can do some of that work,
please speak up now.

Thank you everyone!


[1] http://sphinx.pocoo.org
[2] https://github.com/pyjs/pyjs.org/blob/master/build.py
[3] http://sphinx.pocoo.org/theming.html#builtin-themes

[Alessandro D' Aquino]

Hi Peter,

I would love to change pyjs "corporate design", but the time at my disposal to volunteer is limited, but at least, here is my first try for a new pyjs logo: If you like it I have the vector file, I could create a repo on github and post the link here on the group, or make a pull request on the pyjs repo of a directory calle "cd" as a beginning with the files inside if you want, just let me know what is the preferred method. As I said I don't have the time to develop the cd further but you can count on me about the logo :)

A note to the logo: This is the raw logo, as you can easily identify my inspiration was to make a pictogram of a python merged with the omnipresent "curly braces" that javascript has.
In terms of meaning, it should mean that python is versatile and can easily take different shapes, in this case that of javascript!

cheers,

Alex

[C Anthony Risinger]

On Sat, Jul 21, 2012 at 9:07 AM, Alessandro D' Aquino
<alex.d...@gmail.com> wrote:
>
> Hi Peter,
>
> I would love to change pyjs "corporate design", but the time at my
> disposal to volunteer is limited, but at least, here is my first try for a
> new pyjs logo: If you like it I have the vector file, I could create a repo
> on github and post the link here on the group, or make a pull request on the
> pyjs repo of a directory calle "cd" as a beginning with the files inside if
> you want, just let me know what is the preferred method. As I said I don't
> have the time to develop the cd further but you can count on me about the
> logo :)
>
> A note to the logo: This is the raw logo, as you can easily identify my
> inspiration was to make a pictogram of a python merged with the omnipresent
> "curly braces" that javascript has.
> In terms of meaning, it should mean that python is versatile and can
> easily take different shapes, in this case that of javascript!

whoa -- that's pretty damn cool :-) ... nice work.

--

C Anthony

[C Anthony Risinger]

Alex,

here is a respin based of your initial design, a font i've always liked (your desgin instantly reminded me of it), and a little bit of GIMP action:

http://www.fontsquirrel.com/fonts/Pincoyablack

--

C Anthony

[C Anthony Risinger]

... and one more in the same spirit -- the first felt too cramped IMO, and weakened the your braces ... now i have to get back to work :-(

 

--

C Anthony

[C Anthony Risinger]

er ... after this i have to work :-D ...  my fiancee suggested a small smile or tongue flicker on the snake, which i think would look pretty awesome but i don't have time to play with.

anyways, nice work Alex -- and anyone else with ideas or comps -- please share!

--

C Anthony

[pjshab]

Nice ideas!

I agree that a python definitely needs a tongue
Also how about a leftbrace which the python can curl round?

I tried to draw what I mean but my python ended up looking  a bit malicious:

[Alessandro D' Aquino]

Hi guys, I've absorbed all your nice ideas and comments and tried to take everything into consideration (the font, the snake tongue, etc) I showed all the logo variations also to my wife and my very interested 7 months old daughter :) and after an intensive "creative" state of mind and some vector work that is what I came up with... i have to admit that deep in my heart I'm a designer and in my honest opinion a logo should have enough abstraction and less details to let space for the observer to make his own interpretation. This is a slightly changed version ready for new constructive comments :)

I've also tried to make some application examples:

cheers,
Alex

[Alessandro D' Aquino]

Hi everyone, inspired by the logo I created a simple website mockup :) just to see the logo in more contexts...

[Greg Warner]

Very nice Alessandro.  This has been needed for a long time.  Keep up the good work.

--
 
 
 

[Apexi 200sx]

I agree, definitely what pyjs needs

BH

--
 
 
 

[Daniel Gonzalez]

Really cool Alex!

Disclaimer: Alessandro and myself are business partners, and we are using pyjs to build our customer portal.

[C Anthony Risinger]

On Sun, Jul 22, 2012 at 7:26 AM, Alessandro D' Aquino
<alex.d...@gmail.com> wrote:
>
> Hi guys, I've absorbed all your nice ideas and comments and tried to take everything into consideration (the font, the snake tongue, etc) I showed all the logo variations also to my wife and my very interested 7 months old daughter :) and after an intensive "creative" state of mind and some vector work that is what I came up with... i have to admit that deep in my heart I'm a designer and in my honest opinion a logo should have enough abstraction and less details to let space for the observer to make his own interpretation. This is a slightly changed version ready for new constructive comments :)

yes i think i like your original, maybe with some small font tweaks
still, but not much else.

can you spin one with the python/snake facing sideways (like the
initial/original) but with some wavy tongue action? i personally like
the snake facing left, but i think a small *hiss* would look nice :-)

--

C Anthony

[Alessandro D' Aquino]

Hi Anthony, I had some time to rework the logo including your comments (and your favorite font :) have a look:

Cheers,

Alex

On Monday, July 23, 2012 2:34:04 PM UTC+2, C Anthony Risinger wrote:

[Luc Chase]

How does it look if the Python's head is at the top of the curve?.

--

Luc.

[C Anthony Risinger]

On Mon, Jul 23, 2012 at 3:33 PM, Alessandro D' Aquino
<alex.d...@gmail.com> wrote:
>
>
> Hi Anthony, I had some time to rework the logo including your comments
> (and your favorite font :) have a look:

hooray! that looks awesome :-)

btw, i'm not dead set on using that font or anything (tho i do like
the result!), i just think it matches the bracket/snake well ... it's
a tough bid because i like the contrast of slim letters too ...

this is why i'm not a designer ;-) i'll easily spend 10hrs on even the
most mundane details.

aside: we need a new tagline -- shorter, sweeter, crisper, awesome-y-er.

--

C Anthony

[Alessandro D' Aquino]

Hey Anthony, cool that you like the logo :)

The tagline can be separated from the main logo and is of course optional. Later on a tagline of choice can be added to the logo (with some easy photo editing action or even in pure text in a HTML pag) depending on the context used.

Now, If you really like the logo I would love to contribute it. how do you want me to deliver? ;) I can send you the logo file per email, or I can upload it anywhe you want. Then, what format do you prefer? It should be a vector capable format like .eps so you can later export what ever resolution is needed out of the vector file. If you want I can also export easily some png's like, 100x200, 200x400px, etc. so it can be directly be used, only for convenience.

Another small question arises, the snake eye! Right now the snake eye is white overlaid on top of the black snake body, but, I could cut the eye out so the eye circle would let shine trough the background in a transparent png or gif setup. Would you like the eye white or cut out?

Just let me know :)

Cheers,
Alex

[Greg Warner]

I like the original font best.  I think the tagline should be something like: python to javascript translator.  I mean, afterall, that's what it is.  

--

[Alessandro D' Aquino]

Here a simple comparison ...

[C Anthony Risinger]

On Tue, Jul 24, 2012 at 1:10 PM, Alessandro D' Aquino
<alex.d...@gmail.com> wrote:
>
> Here a simple comparison ...

hmm .. i kinda like the compactness of the "top snake" ... sweet spot
is prob somewhere in between (might add some nice angular lines too).

i'm also starting to think that fatty font doesn't look as good or
contrast as well as your original ... what are some nice SANS or
monospace fonts? "Just Say No" to Serif (and drugs too i guess).

as for contributing, we'll likely do a simpl on-list poll -- if you
could send me the SVG files that would be fantastic -- i will ensure
your name is correctly set in the "Authors" field if/when it's
committed.

i also like the mocked site you made, very sleek. i'm no designer, so
i have trouble creating comps; i do 100% backend Python now but in a
past life i used to slice up such images into real websites -- any
assets/comps/PSD/whatever you'd like to provide there would also be
much appreciated. as you (thus far) have been the primary force here,
i'd also ensure you'd have a public place to point references in the
end ;-)

thanks!

--

C Anthony

[Alessandro D' Aquino]

Hi Anthony,

after some reshaping here is now the new version of the logo.

The snake head is now at 45º from the original position, this is the sweet spot I think, look at the "s" from "js" the "s" shape is like the horizontally mirrored snake silhouette, this detail could mean that still in the converted javascript is the soul of the python snake ;)

The font I used for the "pyjs" is this one (http://www.google.com/webfonts/specimen/Raleway), it is very similar to the designer workhorse Helvetica... but free!

I've also traced down the font and modified slightly the shape, just to have something that is unique :)

Here we go, have a look.

I have also removed the tagline, because it is not part of the logo I think, but it can be added in the website later or where ever the logo is used,

On Friday, July 27, 2012 6:27:48 AM UTC+2, C Anthony Risinger wrote:

On Tue, Jul 24, 2012 at 1:10 PM, Alessandro D' Aquino wrote:
>
> Here a simple comparison ...

hmm .. i kinda like the compactness of the "top snake" ... sweet spot
is prob somewhere in between (might add some nice angular lines too).

i'm also starting to think that fatty font doesn't look as good or
contrast as well as your original ... what are some nice SANS or
monospace fonts? "Just Say No" to Serif (and drugs too i guess).
 

as for contributing, we'll likely do a simpl on-list poll -- if you
could send me the SVG files that would be fantastic --

I'll wait with the SVG until the final shape is concretized ok?

 

i will ensure
your name is correctly set in the "Authors" field if/when it's
committed.
 

i also like the mocked site you made, very sleek.  i'm no designer, so
i have trouble creating comps; i do 100% backend Python now but in a
past life i used to slice up such images into real websites -- any
assets/comps/PSD/whatever you'd like to provide there would also be
much appreciated.  as you (thus far) have been the primary force here,
i'd also ensure you'd have a public place to point references in the
end ;-)

as for the comps, the image I posted is made in Photoshop, but the menubar, the buttons and the layout is mostly Twitter bootstrap components (http://twitter.github.com/bootstrap/, http://twitter.github.com/bootstrap/examples.html) and this free icon set (http://dryicons.com/free-icons/preview/stylistica-icons-set/), the rest is dummy text - but it will not help you much I think, because it's a mess of overloaded layers and cuttet screenshots for a quick proof of concept :) but If you want the psd file, no problem!

thanks!

--

C Anthony

Thanks!

Alex

 

[Alessandro D' Aquino]

On Friday, July 27, 2012 6:27:48 AM UTC+2, C Anthony Risinger wrote:

"If I find time" I could provide at least some static html markup for the landing page using the correct logo and the twitter bootstrap css applied instead of the cumbersome psd file I have :), this could then later be easier ported to your theming engine ...

 

thanks!

--

C Anthony

On Friday, July 27, 2012 6:27:48 AM UTC+2, C Anthony Risinger wrote:

[Peter Bittner]

Hi all,

very, very nice work, Alessandro! Bellissimo!

Just some thoughts (be)for(e) bringing this online:

1. Squared logo version: Usually, when you have a logo there should be a roughly squared (n:n) version, which is easier to use -- think of profile pictures, avatars, website logos in the top left corner, etc.
   How do we solve that? (Just omit the "pyjs"? Split up the "py" and "js", and place it one on top of the other? Rotate the "pyjs" by 90 degrees? ...)
2. pyjs vs. Pyjs: The current design suggests that "pyjs" (all small caps) is the preferred version of spelling. We should agree on whether this is what we want, or whether "Pyjs" (camel case) is the preferred version. As soon as something is part of a logo it written law.
3. Shadow: I believe the shadow is not final, right? Just thinking, if a shadow goes into a (larger sized) version of the logo it should be real(istic), i.e. a drop shadow of the logo and the writing. I think. Not being a designer myself. (Ignore this if it is ignorant bullshit! :-) )

Cheers,

Peter

2012/7/28 Alessandro D' Aquino <alex.d...@gmail.com>

 

--
 
 
 

[Alessandro D' Aquino]

Hi,

On Wednesday, August 1, 2012 7:58:10 AM UTC+2, peter.bittner wrote:

Hi all,

very, very nice work, Alessandro! Bellissimo!

Peter, mille grazie :)

 

Just some thoughts (be)for(e) bringing this online:

1. Squared logo version: Usually, when you have a logo there should be a roughly squared (n:n) version, which is easier to use -- think of profile pictures, avatars, website logos in the top left corner, etc.
   How do we solve that? (Just omit the "pyjs"? Split up the "py" and "js", and place it one on top of the other? Rotate the "pyjs" by 90 degrees? ...)

Good point! Since the logo is high metaphoric, I think omitting the "pyjs" would be a good option. The pure emblematic shape would be used. To undermine what I mean I just made up quickly an iPhone App Icon (It's of course ironically ment :) to see the logo in action without the "pyjs", I think the shape alone has the necessary features to be easy recognizable.

 

1. pyjs vs. Pyjs: The current design suggests that "pyjs" (all small caps) is the preferred version of spelling. We should agree on whether this is what we want, or whether "Pyjs" (camel case) is the preferred version. As soon as something is part of a logo it written law.

Personally I prefer "pyjs" before: Pyjs, PyJS or PYJS, simply because the lowercase letters are more geometrically "quiet" and don't steal the attention of the main logo shape. But this is my personal opinion as always.

 

1. Shadow: I believe the shadow is not final, right? Just thinking, if a shadow goes into a (larger sized) version of the logo it should be real(istic), i.e. a drop shadow of the logo and the writing. I think. Not being a designer myself. (Ignore this if it is ignorant bullshit! :-) )

You are completely right! 

No, the shadow is not part of the logo (neither is the light circular gradient around the logo) all stuff beside the logo was only for "logo presentation" purposes, to let things clear the logo is what follows :)

Cheers,
Alex

 

Cheers,

Peter

2012/7/28 Alessandro D' Aquino

[Greg Warner]

Now I really want an android/iphone app to go with the square version!

--
 
 
 

[C Anthony Risinger]

On Wed, Aug 1, 2012 at 9:48 AM, Alessandro D' Aquino
<alex.d...@gmail.com> wrote:
> On Wednesday, August 1, 2012 7:58:10 AM UTC+2, peter.bittner wrote:
>>
>> Squared logo version: Usually, when you have a logo there should be a
>> roughly squared (n:n) version, which is easier to use -- think of profile
>> pictures, avatars, website logos in the top left corner, etc.
>> How do we solve that? (Just omit the "pyjs"? Split up the "py" and "js",
>> and place it one on top of the other? Rotate the "pyjs" by 90 degrees? ...)
>
> Good point! Since the logo is high metaphoric, I think omitting the "pyjs"
> would be a good option. The pure emblematic shape would be used. To
> undermine what I mean I just made up quickly an iPhone App Icon (It's of
> course ironically ment :) to see the logo in action without the "pyjs", I
> think the shape alone has the necessary features to be easy recognizable.

yes i agree -- omitting the name altogether yields a nice looking emblem,

>> pyjs vs. Pyjs: The current design suggests that "pyjs" (all small caps)
>> is the preferred version of spelling. We should agree on whether this is
>> what we want, or whether "Pyjs" (camel case) is the preferred version. As
>> soon as something is part of a logo it written law.
>
> Personally I prefer "pyjs" before: Pyjs, PyJS or PYJS, simply because the
> lowercase letters are more geometrically "quiet" and don't steal the
> attention of the main logo shape. But this is my personal opinion as always.

same -- i prefer the all lowercase as well ... i pretty much never use
uppercase unless i'm corresponding with clients or something :-)

if anyone has good reason for preferring otherwise -- speak now!

>> Shadow: I believe the shadow is not final, right? Just thinking, if a
>> shadow goes into a (larger sized) version of the logo it should be
>> real(istic), i.e. a drop shadow of the logo and the writing. I think. Not
>> being a designer myself. (Ignore this if it is ignorant bullshit! :-) )
>
> You are completely right!
> No, the shadow is not part of the logo (neither is the light circular
> gradient around the logo) all stuff beside the logo was only for "logo
> presentation" purposes, to let things clear the logo is what follows :)

this is looking really great Alex -- the 45deg snake head looks
awesome, like he's (she's?) look straight ahead at what's coming :-)

it might just be me nitpicking, but the text feels a bit cramped to
me, ie. too close to the logo. it looks like the same space was used
as other letters, but the logo part is so much thicker than a letter
that it needs more whitespace ... but you're the pro so i defer to
your judgement.

if anyone has any additional final input, let's hear it now! the logo
bits look great as Alessandro has been kind enough to donate time in
refining it ... seems a good time to direct our energies to other
parts of the site that require some design thought.

--

C Anthony

[Peter Bittner]

2012/8/2 C Anthony Risinger <ant...@xtfx.me>:
[...]

>>
>> Personally I prefer "pyjs" before: Pyjs, PyJS or PYJS, simply because the
>> lowercase letters are more geometrically "quiet" and don't steal the
>> attention of the main logo shape. But this is my personal opinion as always.
>
> same -- i prefer the all lowercase as well ... i pretty much never use
> uppercase unless i'm corresponding with clients or something :-)

I've taken the time to update the content articles (wiki) of the
current website, replacing all Pyjs occurences by their pyjs
counterparts. Also, I've tried to take care that all pythons read
"Python" (capital first letter), and all javascript reads "JavaScript"
(CamelCase) everywhere on pyjs.org. What I also did, I removed the
"Features" page and added its content as a new section to the
"Overview" page.

Anthony, as the automatic re-generation is disabled, could you please ... :-)

>> No, the shadow is not part of the logo (neither is the light circular
>> gradient around the logo) all stuff beside the logo was only for "logo
>> presentation" purposes, to let things clear the logo is what follows :)
>
> this is looking really great Alex -- the 45deg snake head looks
> awesome, like he's (she's?) look straight ahead at what's coming :-)
>
> it might just be me nitpicking, but the text feels a bit cramped to
> me, ie. too close to the logo. it looks like the same space was used
> as other letters, but the logo part is so much thicker than a letter
> that it needs more whitespace ... but you're the pro so i defer to
> your judgement.

Alessandro, as it looks like you're the perfect designer, graphic
artist, and font editor all in one person: Could you put the new logo
as well as the font you modified into a single web-font file? That
would just be great!

I found a neat article on doing that: "How to make your own icon
webfont" [1]. We should then put all the logos and icons we need into
that font file in the Unicode Private Area [2]. More on best practices
aka neat tricks is described in [3] and [4] (taken from the comments
section of the article).

[1] http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/
[2] http://en.wikipedia.org/wiki/Private_Use_(Unicode)
[3] http://www.heydonworks.com/article/using-icon-web-fonts
[4] http://jsfiddle.net/sujumaku/eNhUf/

I'd love to see all pyjs.org design resources in a single font file
(probably except for a few large graphics or so...), wow! :-)

> if anyone has any additional final input, let's hear it now! the logo
> bits look great as Alessandro has been kind enough to donate time in
> refining it ... seems a good time to direct our energies to other
> parts of the site that require some design thought.

Styling the logo is easy with CSS3 as soon as we have a web font with
logos and icons. We could even put the new logo on the current
website, and adapt the color scheme accordingly, all with CSS only.

Anyone having a great design idea, or at least a color preference for
the pyjs.org website?

Cheers, Peter

[Michael Moore]

You know, the reason I am here is that I love Python and suck at front-end stuff.  So I would like to see something that appeals to my fellow backend toolsmiths, even if it is a cheap 3D depiction of a lathe or vertical bore mill.

But pay no attention to me;  I sucjk at front-end.

Michael

--

[Peter Bittner]

You're great, Michael! We need more of you. Toolsmiths.

You can make the examples' source code shine bright, others will take
care of the website's color scheme. :-)

Peter


2012/8/14 Michael Moore <michaelg...@gmail.com>: