designing an app vs creating a design framework

roundel-original-c1925So when it comes to designing an app the first thing most designers think if creating a user flow and then just filling in the screens one by one. Although looking at flow is of course the first thing any designer should do the filling in of the blanks much too often happens in the present state of the app. Why present state? Because that’s what is being build right now and design has always struggled with the slower and changing pace of development of an app vs design. Many designs right now are create in one go. If things are missing there are issues, if things are added there are issues.

But there is a way for design to work with and in sync with development. A way where design is a tool, like code, for the direction the app is going in.

If you look a little closer to the Transport For London design you’ll know what I’m talking about. The overall form, flow and content might have changed over time but the central design philosophy of TFL hasn’t changed since the early 1900’s. This is because They’ve setup a design framework with iconic central design elements that might have morphed over time with the trends. But that are just as recognizable today as they were a little less than a hundred years ago. A design is fragile where as a framework can last the test of time.

Why

Even though frameworks are harder to maintain and harder to create they offer certain advantages over any other way of approaching design. A framework offers the ability to grow your app beyond the initial designs and still keep the overall look and feel. It also makes the design flexible by allowing small parts to be replaced across the framework to change the design over time.

How

When creating a design for an app is in many ways like designing a framework. But the problem is you’re creating the framework all bundled into a finished product. It’s like giving someone a pre-build lego box without the instruction on how to take it apart. Building a framework reverses that method of delivery to be like a traditional lego box. Providing the individual components, like lego bricks, and for a specific design plans to put them together makes it the way you talk about the app’s design a lot more fluid.

Personally I use a design method that is more integrated with development. Building a framework is for me the same as building an frontend or UI framework where I build my code in. This does constrict as a designer but due to my coding proficiency it’s part of my strength as well. But for non-coding designers creating a framework should be just as easy. Creating an overall flow and general wire-frame of the app will be your first steps. It’s important to identify the different components while doing the wire-framing. The following process it to design the component and let them work in unison for a specific page. It’s really important that you do not just create the designs you need but also test different combinations of components together. This way you can really test the scalability of your design and if it will work in other new and unforeseen cases.

What makes a good framework is the way it is documented. Not just in implementations but also in definition of use and it’s limitations. When designing a framework make sure the individual designs and components are accompanied with proper guidelines and documentation. This also makes it easier to morph as reasons behind design choices are more clear and together with the changed guide it’s easy to implement any changes. In many ways a well designed app is it’s own form of branding. Treat your framework documentation as part of your brand guide.

What

So in the past 5 years design frameworks have already become more popular and well spread. Frameworks like Twitter Bootstrap and Zurb’s foundation are prime examples not only of framework implementations but also to design conventions in action. Although not popular among many designers due it’s bland basic look, as a frame work they both have allowed for developers and designers alike to build on top of these framework to create new and innovative designs.

Another mentionable design framework is Google’s Material design that has been making some waves among designers. Not so much an implementation of design Google has focused their documentation mostly on design principle and establishing conventions for the framework. With stunning effect! Google uses this guide themselves for all the different platforms but other companies with apps are doing the same. The Android platform is getting more apps that are not built by Google but that are still following the same conventions.

For you as a designer or developer it might not be as profitable to build such an expansive framework as Google has created but it is still interesting to start with the basics. It’s just a small switch in method to start building a framework. Due to the fact that you can expand on it later and it will scale better over time it’s always a better choice than the traditional way. It’s all about how far you want to go and what makes sense to do.

One other options is that you can also build upon existing frameworks and replace components are you go along. Using bootstrap or foundation can help you get to designing things that look okay fast and due to the component nature of it you can re-design things just as quickly. And it can save you a ton of work you could be spending on flow and functionality.

TL;DR

Building a framework instead of just a design might seem a lot of work but at the end of the day it’s just a minor change in design flow and what you deliver as a finished design. By doing it you gain flexibility and the ability to grow upon your design more naturally. Build your own from scratch or use and of the existing to build upon. In most cases when working on products that will change and grow over time the initial investment is far more than worth it.

Advertisements

, , , , , , , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: