Website Design Refresh

[balupton]

After listening to:

• Simon Sinek: How great leaders inspire action

I've decided that we need to refresh the bevry website, as right now it does a poor job reflecting what we are truly about.

I've taken a lot of inspiration from:

• Apple - Designed By Apple - Intention
• The Bevry purpose, objectives and principles

Here's my proposal. Strip everything away. And make it a simple single page website. With a menu up the top, or below the manifesto, allowing you to access things like documentation, wiki, blog, etc.

---

Bevry

[What we believe] We believe in open-collaboration.

[How we are different] We share our innovations abundantly, letting them become accessible to all. Remixed and reused to other collaborative minds, they cumulate their potential at an extraordinary rate. Birthing experiences of progress and joy, wherever they may grow.

[What we do to help] We're accomplishing this growth through the following initiatives:

• DocPad
  • The best experience to
  • Create decoupled websites
• Web Write
  • The best experience to
  • Manage content for any backend
• Startup Hostel
  • The best experience to
  • Co-work and co-live
• InterConnect
  • The best experience to
  • Connect with your online community
• History.js & Ajaxify
  • The best experience to
  • Create stateful web applications
• Static Site Generators.net
  • The best experience to
  • Find the right static website generator for you
• Go Static Campaign
  • The best experience to
  • Discovering the power of static websites
• Go Open Campaign
  • The best experience to
  • Discover the power of changing the world together
• Gittip [supporter]
  • The best experience to
  • Receive money while changing the world

[What we've accomplished] These companies, projects, and individuals are behind us, using our projects, and participating in our initiatives:

• asd

Here's what they've said:

• asd

[What you can do to help us] You can join our mission by:

• Take part in one of our intiatives by giving them a go!
• Contribute to our initatives via discussions, thoughts, feedback, issues, and pull requests.
• Join in on the public conversation via IRC, Twitter, Youtube, and Google Hangouts.
• Donate to our cause weekly via Gittip, monthly via Flattr, and once-off via the donation form.
• Schedule a consulting call with one of our founders via Clarity.fm
• Email us for an interview, conversation, press release, or general closed reply.

Let's empower the world together. Sincerely,

The Bevry Core Team,

• Benjamin Lupton
• Helen Lupton
• asd

The Bevry Extras Team,

• asd

The Bevry Participants,

• asd

[balupton]

/cc @chase @Greduan @deitch what are your thoughts?

[greduan]

@balupton It looks short, sweet and to the point. :)

The menu at the top, would it point to the parts that are already inside that page?

[deitch]

Quite clean, actually. The trick to any Web site is the same as any marketing materials. Think who you want to visit the site and who will do so; what they expect to get out of it, and what you want them to do (Call to Action); then just structure around that.

So... who are the targets for the Bevry Web site (as opposed to the DocPad site)?

[balupton]

Originally it was targeted for potential consulting clients, in terms of working on their projects to pay the bills.

But, that has always been more of a stepping stone, than a where we are going thing.

With this new direction, it will be a where we are going direction, focused on our creations and the opportunities there. Targeted at those who want to get onboard - individuals, companies, and clients alike.

[balupton]

Cool scrolling effects that we can take inspiration from:

• http://www.bagigia.com/
• http://www.iutopi.com/
• http://whiteboard.is/ - love this one
• http://tooyoungtowed.org/
• http://www.tokiolab.it/ - another firm

[greduan]

They're very nice however, the problem I find with these is that they're very JavaScript and image heavy, which may not give the correct idea about DocPad's speed.

Also I found all of them kinda hard to navigate, might just because I don't like these levels of fancy ness on websites... They're more designed for big screens I find, which mine isn't.

[balupton]

Agreed. At this stage, doing something much more simplistic would be nice. Just trying to figure out how we can have this header effect work well.

[greduan]

Well for this approach just spacing the points correctly and having a sticky menu bar at the top that points to the different points of the page is good enough IMO.

Sorta like this but better done: http://vim.spf13.com/

[balupton]

The issue with http://vim.spf13.com/ is that say we start below the fold, so the menu is on the top, and we scroll up. Then you see "Install Now / Learn More" first, instead of seeing "The Ultimate Vim Distribution" first. This is the advantage of the parallax effect, you get to see the top first, and then the higher you scroll, you then see the rest of the content.

[greduan]

Oh you don't like it using #ids in order to jump to the sections in the page?

[balupton]

well that too, it's hard to explain with text

[balupton]

Work has begun on this on the refresh branch.

Current screenshot:

[balupton]

@Greduan @RobLoach @KasperTidemann @deitch what do you guys think?

[balupton]

So clicking the years at the top will fade out certain elements and fade in others, to show the changes of Bevry from the past and into the future.

2010 will swap go on about how we are a "We’re a Sydney based Node.js, JavaScript and HTML5 company focused on empowering developers."

2020 will mostly be the same as this, but with more leadership roles, higher statistics, new projects, and my favourite bit: Our office is a hotel in Fiji that fellow startup folk can visit for the day for free, or rent out rooms overnight.

The learning centre http://bevry.me/learn will be moved off to it's own subdomain (and consequently separate website) at http://learn.bevry.me to allow us to develop the primary website as best as we can, and then develop the learning website the best we can, without contorting them together. I have design ideas for this already in mind.

[balupton]

Possible todos:

• see about having the first line of Donations and Are as the same, considering their similarity. Perhaps also rename
• perhaps merge Are and Do sections
• perhaps rename Leadership to Company and Members to Community, however Community is misleading as I would imagine that would include the users, not just the Team members. Maybe Leadership to Company, and Members to Team instead.
• perhaps add logos and descriptions for the partners, @KasperTidemann @yrassoulli would you like a description and logo to be added, or do you think it is fine as it is?
• perhaps add a "Participate" section for how to get started with helping out

[balupton]

Just implemented all the suggestions so far:

[greduan]

Looks awesome! Great job! :D

[balupton]

Put it up for testing here: http://bevry-refresh.herokuapp.com

[greduan]

Looks good. :)

One thing though, probably since it isn't finished yet, would be awesome if each contributor's image pointed to their GitHub profile, maybe grab something from their profile or something...

[balupton]

Yeah, we'll actually pull them down dynamically with all the correct info etc. Definitely on the todo, thanks for stating it :)

[greduan]

Ah OK. Excellent. :)

[RobLoach]

Just stumbled upon Civilization 5's site. I like the paging with the mousewheel. Pretty neat.

[greduan]

Seems like a cool feature, not disregarding it as one, but it's counter-intuitive for me. That's probably just me though.

[balupton]

Unfortunately the civ website doesn't work for me, it always jumps 2 sections instead of 1... The automatic scroll jump sections, never work well for me :-( It's like the trains in berlin, you touch the door handle and the train swings open. Something you had already started to do yourself.

[greduan]

That may have something to do with your mouse or some browser feature. Works fine for me.

[balupton]

Completed. New website is now live. http://bevry.me

Thanks everyone for your help and co-operation in this :)

[RobLoach]

@balupton

1. Congrats on the launch :-)
2. A new Simon Sinek: https://www.youtube.com/watch?v=lmyZMtPVodo&hd=1