Stripping Dribble

Josep
2 min readFeb 24, 2020

--

I picked Dribble for a very simple reason, it is a page that I visit everyday when I want to get some rest of my current job, and discovering so many artists doing such great things inspires me and gives me some fuel to continue with my day to day tasks.

The flow I’ve converted into wireframes is the one that would follow a user interested in hiring an artist, so the screens stripped are the ones since the user land into the page until those related to the artist profile.

Fig 1. Dribble landing page

COMMON ELEMENTS

The most common elements in Dribble’s page are the following ones:

  • Grids with images.
  • A top bar, which always clearly has two sections. The darkest, which contains user profile and global app navigation, and the white one, that contains options for the current scene.
  • Rectangular buttons. Depending on the level of attention required, they might be of different types or colors, or bordered instead of filled.
  • Modals, showing some specific actions or details.
Fig 2. Screenshots passed to wirefraemes.
Fig 3. Screenshots passed to wirefraemes.
Fig 4. Screenshots passed to wirefraemes.

RESULT

Once the six screens selected have been wireframed, a simple flow has been created using InVision.

--

--

Josep
Josep

No responses yet