Design Resources

[balupton]

Resources:

• modals
  • http://tympanus.net/Development/ModalWindowEffects/
• captions
  • http://tympanus.net/Tutorials/CaptionHoverEffects/index4.html
• loaders
  • http://codepen.io/collection/HtAne/
  • http://codepen.io/georgehastings/pen/skznp - green bars
  • http://codepen.io/joni/pen/drFzC - d'o'ing-y balls
  • http://codepen.io/stryju/pen/jpsIF - happy hula (only works in chrome)
  • http://codepen.io/hakimel/pen/aIhkf - spiral
• dribbble
  • http://dribbble.com/balupton/buckets/185841-InterConnect

[balupton]

Evaluating the sqwiggle design over the week, I've come to the conclusion that the sqwiggle design isn't actually the best for our use case, or maybe any for that reason — it's really a basic mvp design.

Our goal is to connect communities with faces, and be a social network for conversation.

The way we should facilitate this is be bevry community and people focused, not workspace focused like sqwiggle.

The way I see this working is that we have the following menus:

• Discover
  • Home
  • Communities
  • Conversations
  • People
• Joined Communities
  • DocPad
  • Node.js
  • Open-Source
• Active Calls
  • Rob, Yashar, Patrick
• Account
  • My Profile
  • Account Settings

On desktop we can have the menu as a series of dropdowns in a top bar. On mobile we can have it as a sidebar.

---

Communities will be listed by the community name, some stats in them, and the webcam snapshots of the people inside them. As well as indicators of their availability (in call that you can join, water cooler, available, busy). Something like:

DocPad
[2 active calls] [10 online people] [50 archived calls]
[face] [face] [face] [face]

Conversations will list the conversations currently happening and the snapshots of those inside it.

Benjamin Lupton, Yashar, Rob Loach [join]
[face] [face] [face]

People will list the people and the communities they are participating in:

[snapshot/avatar]   Benjamin Lupton [availability]
                    [5 communities] [105 archived calls]
                    [github] [twitter] [facebook] [gittip]

The question is when to use avatars, and when to use snapshots.

[balupton]

Here's the mockup I did:

People column on the right has two views. One view with profile info, another view with just snapshots/avatars/names. Which one is better I don't know.

Buttons up the top right toggle the different modes.

Presence/Available mode enables shapshots and makes you available for calling.

Still to decide: Whether presence and available should be different modes. So presence enable snapshots, and available enables calling. In which case they could be changed to: Snapshots, Interruptible.