Imagine your very own cabinet of curiosities.
Full of the weird, and wonderful, and ordinary. Cabinets expanding and drawers opening, pops of colour and unexpected surprises – of all shapes and sizes. In a nutshell; OLX.
This concept drives all of our digital design —
to let our users show off their wares, hunt for hidden gems, and curate crazy collections.
We use a mix of large and small compartments for our listings. Larger compartments are reserved for paid featured listings. The inclusion of both portrait and landscape compartments ensures goods are displayed at their best.
Each of our categories uses a different selection of compartment sizes to best suit the type of listings.
Cars and homes are best showcased in landscape imagery, so portrait compartments are removed. Whereas jobs postings don’t require images so sit in shorter compartments.
Our grid responds to the size of the browser and showcases more compartments as the window grows.
Every listing on OLX can be previewed with it’s own compartment. The size of the compartment is determined by the category, content and status as either free or featured.
These compartments are gathered together to create our feed and collections.
Ad pages display the full details about a listing. These compartments help a seller to tell a rich story about the product and encourage sales.
OLX often appears to lend a helping hand to users. These compartments appear within our feed and offer timely tips for getting the most out of the platform and for your money.
Placed within the feed, ornaments help break up the squareness of our grid and offer advice with simple typographic messages.
Sizeboards offer the most opportunities to mix messaging with illustration and our art direction styles. Most sit within our feed, however our X-Large sideboard flows full width and can function as a carousel.
Shelves are useful for separating collections and breaking up our grid. They always feature a brand illustration which flows off of the top edge.
These scroll horizontally to provide an organised way to browse through our collections.
Our animations utilise the same motion curve. This motion was developed to mimic the action of closing a drawer in a cabinet. Movements slow towards their end as if they are being eased in to place.
Many of our animations use sliding behaviours to mimic the action of sliding doors and drawers open.
These scroll horizontally to provide an organised way to browse through our collections.
Inspired by the change in stroke thickness seen in our brand shapes and typeface, many of our elements pulse on interaction.
Simple elements such as buttons and icons change weight on rollover.
A series of pulsing circles can help us to indicate typing in our chat feature.
The change in scale seen in our logo, forms the basis of a movement that can provide dramatic or subtle ways of indicating an interaction has taken place.
Fast, dramatic changes of scale can trigger full screen takeovers.
Subtler scale changes can be found in the rollover state of our tertiary buttons.