Design Heights - a designer framework
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 & functionalities 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 benefitted 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 shown below gives an overview on how a new design request flows. While the usual design process is followed (mock-ups, low-fidelity wireframes, 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.
The patterns in the repository provides tremendous value and inputs to the project design team to solve some of the common problems in 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 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.
What are some of the patterns in Design Heights?
- Sign-up / Sign-In
- Splash Screen
- Refresh Content
- Confirming & Acknowledging
- Contextual Menu
- Handling Categories of Data
- Applying Slider
- Collection View
- Deleting Records from a List
- Add / Edit Collection or List
- Container Pattern
- List View, Detail View
- Video Content Display
- Next Topic / Item
- Segmented Control
- Delete and Undo
- Tab Bar
- Tool Bar
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.