angle-left angle-right angle-down angle-up

Discover something amazing.

36hrs.in

, ,

36hrs.in is a collection of professional and user-curated travel itineraries, with destinations all over the world. Users can create their own by searching for points of interest or pinning them together from other itineraries.

The logo needed to be clean and modern, with a touch of class and sophistication. The website layout and brand identity would build off this, with subtle animated user interactions. Large, strong typography and bold imagery would excite the user and evoke a sense of adventure and the unknown.

01.
Logo & Brand Identity

36hrs-logo-design

The logo design is based on a natural proportional ratio of 4:3, width to height. Transposing a grid, you can see how the different elements hit these intersections, including the vertex of the clock hands and top of the larger arc.

36hrs-logo-design-layout

The 36hrs brand identity is composed of two primary colors used in the logo mark, with two additional supporting colors for all brand related materials.

The 36hrs brand identity consists of 2 typefaces. Univers 45 Light is the workhorse, being used for most headings and all body copy in print and digital mediums. For specific elements needing extra emphasis or a textural effect, we use OtamaEP.

36hrs-brand-typography

02.
The Website

Website/App Design, Responsive UI/UX, Front-end Development

36hrs-website-design-development

Responsive Design

We knew from the beginning that many users would access the site from a mobile device, so having a modular, responsive design was crucial. This became especially important as more features and functionality were added in additional phases of development. The UI keeps everything accessible to the user, without adding screen clutter.

36hrs-responsive-web-design

Iconography System

Several custom icons were developed to provide the user with an immediate visual understanding of what they can do through the 36hrs platform. The style of the icons reinforces the brand identity, a blend of sophistication, fun, and modern practicality.

36hrs-icon-design

Grids and Typography

The city and itinerary pages have their contents organized through grids, utilizing swiss design principles. This spatial arrangement allows a maximum amount of content to be shown to the user, while also creating a natural heirarchy to all the elements.

The texture and feel of each page is largely influenced by the distinct imagery and photography. Along with the grid structure, strong typographic design adds support and context.

36hrs-website-grid-swiss-design
36hrs-website-design-grid-typography


Related Work

Click here to view all projects