Team App Designs (in the browser)

by Brian Casel  ·  Get free updates of new articles here

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...

Enjoyed this?

Join thousands and get my weekly newsletter with new ideas to level up your business.

Discuss

  • Looking great Brian!

    • Brian Casel

      Thanks!

  • Looking great 🙂

    Small suggestion – I mistook the two horizontal lines of the ‘open filter’ button for a draggable element rather than a clickable element.

    • Good point, I can see how that can be confused. #thinking…