Team App Designs (in the browser)

Time for another update on the design process for a team relationship management app we’re building. Today, things become a bit more “real”.  I’m showing you some coded designs I’ve been working on.  Follow the links below the screenshots to click around the designs in the browser.

The Team Page – View it in the browser

Here, you’re viewing your entire team at a glance.  You’ll have the ability to filter and sort.  Click any person’s “card” to get to the individual team member page.

Team Member Page – View it in the browser

Here you see an individual team member’s page.  This is where you store and view all of the info you need about them.  Stay in contact, keep up with their social media activity, assign them to a project, recommend them to someone else, etc.

Designing Responsively

One my primary goals in this design was to make it as responsive and fluid as possible.  Notice when you resize the browser (make it smaller), the content scales with the width and makes a few adjustments to tidy things up (notice how 3 columns become 2, then 1).  Check out a quick video of this in action.

A long way to go…

In case it’s not clear, this is not a functional app yet.  These are merely front-end (HTML5, CSS3, and a touch of jQuery) templates, not yet integrated with database functionality.

Of course, there are many other screens and interactions to design and build.  But I’m happy with how these initial screens turned out, and they’ll set the stage for the general look and feel moving forward.

Feedback welcome

I’m publish steady progress here for a reason, and that is to get constructive feedback every step of the way.  Let me know what you think.  What you like, and more importantly what’s not working for you (and why).

By the way, does this app have a name yet?  See if you can find it...

Not in on my newsletter yet? Join us