SlideShare a Scribd company logo
1 of 5
| Build a Mobile Experience

www.innovationm.com

Design Heights – a Design Innovation
Framework – from InnovationM

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

Design Heights – a Design Innovation Framework – from
InnovationM
InnovationM is pleased to formalize its’ UX/UI process / framework called “Design
Heights” – A Design Innovation Framework from InnovationM.
Design Heights is a repository of mobile & web design patterns. InnovationM has
collated these patterns over the last 14 months or so based on experience of designing
mobile solutions for our clients, internal Innovation Design Workshops as well a deep
research on the design patterns which the industry is following to solve common design
problems.
While every mobile solution is different in its own respect, there are a lot of features &
functionality which are common across various mobile solutions and which does not
require a new design “exercise” all the time. Instead these solutions need to be
benefited from some of the best design patterns available which not only saves time
while designing but also makes sure that the best & time-tested design patterns are
applied to solve a problem.

Design Heights – Applied
The diagram below gives an overview on how a new design request flows. While the
usual design process is followed (mock-ups, low-fidelity wire-frames, high-fidelity wireframes), an important “pit stop” in the process is re-fuelling of thoughts by working
through the pattern repository offered by Design Heights.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

The patterns in the repository provides tremendous value and inputs to the project
design team to solve some of the common problems in a as less time as possible and
with an assurance that the designer has picked the best designs patterns available to
solve a problem.

Developer & App Store Friendly
One other advantage of Design Heights is that all the patterns in it are “developer
friendly”. In one form or another, these design patterns have been applied by
developers to create mobile solutions. So, for new projects, the transition of a design
into code is as smooth as possible. In other words, anti-patterns are avoided as much
as possible leading to a clean and smooth development by the developers. Plus, it is
Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

made sure that none of the designs violate design guidelines from Apple or Google to
avoid any problem at a later stage with app store approvals.

Keeping Design Heights “fresh”
One of the key reasons for the success of Design Heights at InnovationM is that we
continuously keep on reviewing and adding design patterns to it. This is typically done in
two ways:
a)

InnovationM internal “Design Innovation” workshops

The Design Innovation workshops at InnovationM is not just a designer’s workshop but
people in various roles participate and contribute – Designers, Developers, Leads and
QA. Brainstorming existing patterns and coming up with new patterns is the key.
b)

Design Pattern Education & Research (External)

A deep and continuous research on some of the best mobile design patterns used in the
industry and applied across some of best mobile solutions in the world. The objective is
not to “emulate” what has already been created but to “challenge” the design to create
something better than that.
The Design Innovation workshops ensure that innovation is not restricted to patterns
already available but to keep on coming up with new patterns to solve some of the
common design problems. The good part is that these Design workshops are done “off
the project”, so there is no pressure or restriction imposed by project deadlines. There is
a lot of room for “fresh” thinking.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
| Build a Mobile Experience

www.innovationm.com

What are some of the patterns in Design Heights?
Some of the patterns in Design Heights are as below:
Sign-up / Sign-In

Splash Screen

Refresh Content

Notifications

Pagination

Confirming & Acknowledging

Search

Contextual Menu

Handling Categories of Data

Settings

Applying Slider

Quicker Action on Data

Collection View

Deleting Records from a List

Add / Edit Collection or List

Container Pattern

List View, Detail View

Video Content Display

Next Topic / Item

Navigation Bar

Segmented Control

Delete and Undo

Tab Bar

Tool Bar

Conclusion
Design Heights is “designer tool / framework”. It helps designers to focus on some of
the core design issues in a project taking their minds off designing for common
problems which have been solved many times in the past and the patterns for which are
neatly organized and available through Design Heights.

Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com

More Related Content

Viewers also liked

Presentación power point los colores
Presentación power point   los coloresPresentación power point   los colores
Presentación power point los colores
Carol de la Plaza
 

Viewers also liked (11)

Comunicación y habilidades sociales
Comunicación  y habilidades socialesComunicación  y habilidades sociales
Comunicación y habilidades sociales
 
Presentación power point los colores
Presentación power point   los coloresPresentación power point   los colores
Presentación power point los colores
 
курманова айдана+оформление стен и мебелей+конкуренты
курманова айдана+оформление стен и мебелей+конкурентыкурманова айдана+оформление стен и мебелей+конкуренты
курманова айдана+оформление стен и мебелей+конкуренты
 
Токбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ ПредпринимателиТокбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
 
ISSUE_8
ISSUE_8ISSUE_8
ISSUE_8
 
Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación
 
H3 104 s
H3 104 sH3 104 s
H3 104 s
 
Colorpainter W64s
Colorpainter W64sColorpainter W64s
Colorpainter W64s
 
Habilidades comunicativas
Habilidades comunicativasHabilidades comunicativas
Habilidades comunicativas
 
Lentera news ed. #21 Januari 2016
Lentera news  ed. #21 Januari 2016Lentera news  ed. #21 Januari 2016
Lentera news ed. #21 Januari 2016
 
Lentera news - mei 2016
Lentera news  - mei 2016Lentera news  - mei 2016
Lentera news - mei 2016
 

More from InnovationM

More from InnovationM (20)

How to use data binding in android
How to use data binding in androidHow to use data binding in android
How to use data binding in android
 
Capture image on eye blink
Capture image on eye blinkCapture image on eye blink
Capture image on eye blink
 
Mob x in react
Mob x in reactMob x in react
Mob x in react
 
How to use geolocation in react native apps
How to use geolocation in react native appsHow to use geolocation in react native apps
How to use geolocation in react native apps
 
Android 8 behavior changes
Android 8 behavior changesAndroid 8 behavior changes
Android 8 behavior changes
 
Understanding of react fiber architecture
Understanding of react fiber architectureUnderstanding of react fiber architecture
Understanding of react fiber architecture
 
Automatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swiftAutomatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swift
 
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?
 
React – Let’s “Hook” up
React – Let’s “Hook” upReact – Let’s “Hook” up
React – Let’s “Hook” up
 
Razorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS SwiftRazorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS Swift
 
Paytm integration in swift
Paytm integration in swiftPaytm integration in swift
Paytm integration in swift
 
Line Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-BootLine Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-Boot
 
Basic fundamental of ReactJS
Basic fundamental of ReactJSBasic fundamental of ReactJS
Basic fundamental of ReactJS
 
Basic Fundamental of Redux
Basic Fundamental of ReduxBasic Fundamental of Redux
Basic Fundamental of Redux
 
Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )
 
Serialization & De-serialization in Java
Serialization & De-serialization in JavaSerialization & De-serialization in Java
Serialization & De-serialization in Java
 
Concept of Stream API Java 1.8
Concept of Stream API Java 1.8Concept of Stream API Java 1.8
Concept of Stream API Java 1.8
 
How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?
 
Model View Presenter For Android
Model View Presenter For AndroidModel View Presenter For Android
Model View Presenter For Android
 

Recently uploaded

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 

Design Heights - a designer framework_InnovationM

  • 1. | Build a Mobile Experience www.innovationm.com Design Heights – a Design Innovation Framework – from InnovationM Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 2. | Build a Mobile Experience www.innovationm.com Design Heights – a Design Innovation Framework – from InnovationM InnovationM is pleased to formalize its’ UX/UI process / framework called “Design Heights” – A Design Innovation Framework from InnovationM. Design Heights is a repository of mobile & web design patterns. InnovationM has collated these patterns over the last 14 months or so based on experience of designing mobile solutions for our clients, internal Innovation Design Workshops as well a deep research on the design patterns which the industry is following to solve common design problems. While every mobile solution is different in its own respect, there are a lot of features & functionality which are common across various mobile solutions and which does not require a new design “exercise” all the time. Instead these solutions need to be benefited from some of the best design patterns available which not only saves time while designing but also makes sure that the best & time-tested design patterns are applied to solve a problem. Design Heights – Applied The diagram below gives an overview on how a new design request flows. While the usual design process is followed (mock-ups, low-fidelity wire-frames, high-fidelity wireframes), an important “pit stop” in the process is re-fuelling of thoughts by working through the pattern repository offered by Design Heights. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 3. | Build a Mobile Experience www.innovationm.com The patterns in the repository provides tremendous value and inputs to the project design team to solve some of the common problems in a as less time as possible and with an assurance that the designer has picked the best designs patterns available to solve a problem. Developer & App Store Friendly One other advantage of Design Heights is that all the patterns in it are “developer friendly”. In one form or another, these design patterns have been applied by developers to create mobile solutions. So, for new projects, the transition of a design into code is as smooth as possible. In other words, anti-patterns are avoided as much as possible leading to a clean and smooth development by the developers. Plus, it is Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 4. | Build a Mobile Experience www.innovationm.com made sure that none of the designs violate design guidelines from Apple or Google to avoid any problem at a later stage with app store approvals. Keeping Design Heights “fresh” One of the key reasons for the success of Design Heights at InnovationM is that we continuously keep on reviewing and adding design patterns to it. This is typically done in two ways: a) InnovationM internal “Design Innovation” workshops The Design Innovation workshops at InnovationM is not just a designer’s workshop but people in various roles participate and contribute – Designers, Developers, Leads and QA. Brainstorming existing patterns and coming up with new patterns is the key. b) Design Pattern Education & Research (External) A deep and continuous research on some of the best mobile design patterns used in the industry and applied across some of best mobile solutions in the world. The objective is not to “emulate” what has already been created but to “challenge” the design to create something better than that. The Design Innovation workshops ensure that innovation is not restricted to patterns already available but to keep on coming up with new patterns to solve some of the common design problems. The good part is that these Design workshops are done “off the project”, so there is no pressure or restriction imposed by project deadlines. There is a lot of room for “fresh” thinking. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • 5. | Build a Mobile Experience www.innovationm.com What are some of the patterns in Design Heights? Some of the patterns in Design Heights are as below: Sign-up / Sign-In Splash Screen Refresh Content Notifications Pagination Confirming & Acknowledging Search Contextual Menu Handling Categories of Data Settings Applying Slider Quicker Action on Data Collection View Deleting Records from a List Add / Edit Collection or List Container Pattern List View, Detail View Video Content Display Next Topic / Item Navigation Bar Segmented Control Delete and Undo Tab Bar Tool Bar Conclusion Design Heights is “designer tool / framework”. It helps designers to focus on some of the core design issues in a project taking their minds off designing for common problems which have been solved many times in the past and the patterns for which are neatly organized and available through Design Heights. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com