Meta Refresh 2015

The phrase “scaling down” in the title tries to convey more than its literal meaning. It is the scaling down of the whole thought process to take a mobile first approach towards developing websites where content is the key focus.
In this talk we will discuss patterns and design considerations that one should take care of, when working on websites which have the business of showcasing content. Over time web designers have come up with innovative solutions for many problems related to visualisation of content on mobile. We will discuss those patterns analysing them in terms of basics of design to find out what works best in what context.

Outline

Why study patterns?. A statement from the book “Sketching User Experiences” by Bill Buxton says - “Time spent developing a technique provides the foundation for the creation of the art.”. In this case techniques are the many strategies designers and developers have already worked on while designing for the mobile ecosystem. Understanding what they have done will give us an insight of what works and what doesn’t so that we can ourself create a unique solution.

Specifically in this discussion we are looking at patterns where the challenge is to visualise content. There’s a common pattern with any system that has the basic job of visualising a lot of content and it hasn’t changed much with time. Three type of models are chosen and any interface has the challenge to visualise all these three.

1. Representing the list of items.
2. A categorization of the items where we have different groups of articles.
3. The actual item itselft which is the eventual purpose.

A simple example of this pattern being used, is in publications which has a list of articles categorised on different themes. It needs to showcase the list of articles, the different themes (tech, science, sports etc) on which articles are grouped and the article itself.

Each model above is unique and present its own challenges especially for mobile. We’ll first discuss the significance itself of each model and then lot of real life examples that have tried to solve them.
For instance, categorization which also serves as navigation for the app, has lot of patterns.

• The left nav flyout menu.
• Top navigation or do nothing.
• Full screen menu
• Carousel+.

It is also important to measure and analyse each pattern on the yardsticks of good design. That will help us understand what problems is each pattern solving and as such their true purpose. Some of the points include but not limited to

• The importance of whitespace and boundaries in design.
• User attention span.
• Utilising touch gestures effectively.
• The case of design discovery.

Every designer is working in a unique context and set of constraints in which they are trying to represent their content model. Learning about these patterns will help him/her objectively analyse what all things he should take care of design wise, so that he can give the best fit solution.

Speaker bio

Iam a front end developer, designer at Genwi. At genwi we are developing hybrid apps (IOS, Android, HTML5) targeted towards content marketing world where design (written in HTML,CSS,JS) is decoupled from the actual code to run the apps. Visualising content is key focus in our apps and we take care of client requirements which are challenging both in terms of design and functionality.
Iam an avid blogger as well, reading and writing about technology, good design and any insights or experiences that I gain.

Links

• aseemagarwal.in/?k1=portfolio
• github.com/agaase
• medium.com/@designalysed