Layout

Defining the layout of a product in a organised and meaningful way is fundamental for the functionality, usability and aesthetic of it. It is a good practice to break the content in a few recurring main elements that can be moved and placed across all the screens to help consistency and most of all, responsiveness. It is preferred to start laying out the mobile version first, as it is easier to convert a constricted mobile layout into its desktop version than the other way around. 

In order to keep consistency and usability, main elements as headers, navigation and tabs need to stay in the same place all across the product, while content and action button can be more fluid and can have they own grid and layout. This would give a bit of diversity and would break monotony through the screens, and would also make responsiveness easier, as the elements can move and re-arrange to fit different device canvas and needs.

1 column

2 buttons

2 columns

cards

1 columns

horizontal

cards

1 columns

horizontal

cards + action

Once the mobile layout has been defined and it is clear how all the elements function and where they are located, it is time to convert it into its desktop version. Even tho the functionality of the elements remains the same, they have to be relocated to their ''standard'' position where users can easily identify them ( for example, header navigation and search to the top bar, main actions across the right column. 

Once the mobile layout has been defined and it is clear how all the elements function and where they are located, it is time to convert the layout into its desktop version. Even tho the functionality of the elements remains the same, they have to be relocated to their ''standard'' position where users can easily identify them ( for example, header navigation and search to the top bar, main actions to the right column. 

Same thing can be done to covert the web mobile layout into a native app layout. We can have the same main elements but can re-organise them following native app standards, whether we are developing an android or ios app.