As a UX designer I used to get frustrated when I had the feeling my designs didn’t really get built in the fashion I designed it. That’s the reason why I started to explore the way my UX designs get built. I learned about agile & lean, but also a lot of code. My biggest lesson so far: Think outside the box, but design within the framework.
In this post I would like to discuss different frameworks that impact our work as UX designers. I also would like to explain which frameworks you can use and how you can use them to create better user experiences.
What is a framework?
Wikipedia defines a (software) framework as follows:
In computer programming, a software framework is an abstraction in which software providing generic functionality can be selectively changed by user code, thus providing application specific software. A software framework is a universal, reusable software platform used to develop applications, products and solutions. Software frameworks include support programs, compilers, code libraries, an application programming interface (API) and tool sets that bring together all the different components to enable development of a project or solution.
If you don’t understand all of this, don’t worry, neither do I. What I make from this definition is that a framework is a set of functional, predefined, reusable components that can be bundled in a specific working solution.
A style guide is (not) a framework!
In a way you could argue that a style guide is a framework, and you are right. However a style guide has no function in the end product, it’s merely a document to help you create the end product. So for the sake of this article, a style guide is not a framework.
Why are frameworks so important?
1. Frameworks enforce consistency
When you get familiar around frameworks and use them in a good way, you will find they can act like a style guide. Just like style guides, also frameworks provide consistency, the main difference is that a framework actually is part of the end product and therefore always up to date and always accurate. Frameworks make sure your work is consistent even when your design evolves over time.
2. Frameworks allow you to be creative
If you don’t use frameworks you will find yourself specifying every single detail of every single component (and probably specifying it poorly) while many components really are premade and prespecified. By using what is already there, you can focus on what UX designers do best, create a user experience, instead of specifying a pixel. Specifying a component doesn’t require much creative thinking, defining a great user experience does.
3. Frameworks allow you to speak the same language
I find it funny to see how often communication goes wrong. A common example is that designers call a dropdown field a dropdown field, while many developers call it a listbox. Then again I have seen designers call something completely different a listbox. You get the idea, if you have two different jargons when you work on the same product is confusing. However, if you share the same framework, you will (have to) speak a common language. Use jQuery as a framework and a slider is a carrousel. Use YUI and a slider is a control used to input a number within a range.
4. Frameworks are more or less self maintainable
What works now, may not work anymore next year. This is the case in software, but definitely also in UX. 10 years ago, it was normal to submit a page in order to upload a photo. Nowadays a fancy, in page uploader is the standard. If you use good frameworks, they will evolve over time, which makes keeping your website up to date easier as well.
5. Frameworks can inspire you in new directions
Somewhere, someone might have built something that would help you, but you don’t know about it. Frameworks are a great platform for creative work to be shared and reused by other designers. Getting inspired by other people’s work doesn’t mean you simply copy what someone else did but actually using what’s already there and making it into something better.
The movie Flash of Genius is a great way to explain why reusing something that’s already there requires both creativity and craftsmanship. The main character, Robert Kearns, invents the interval setting of a windscreen wiper. None of the elements were invented by him (not the wiper, not the motor, not any of the elements) but combined they become something that millions of people now benefit from every day. The best part about this movie is that it’s based on a true story. If Robert was a UX designer, windscreen wiper and other elements were components in his framework and the interval setting was the user experience he designed.
6. Frameworks & mobile
Mobile devices are much more consistent than desktop devices. This usually makes the UX for a mobile device better. If you design for mobile you should feel comfortable around designing within a framework. I genuinely believe this fresh mobile perspective will make users demand such a consistent experience on desktop, too.
What are UX frameworks that I can use?
I think the main frameworks we can reuse in our work can be put into four categories: grids, animations, UI components and interactions.
Grids
Grids are surprisingly well adapted within the UX community. This is probably because working in grids is a very natural thing to do from a design perspective. I do however believe that we are moving from the classic fixed layout grids such as 960.gs towards dynamic (responsive) grids such as 1140css. Another awesome way of defining your own grid is gridpak, which allows you to define a grid that fits your experience best. Also, with this grid you can output both code and a fireworks template. Grids are the way to have a consistent, clear and frankly good looking layout for your content.
Interactions
Dragging, dropping, hiding, scrolling, selecting, deselecting, selecting multiple, loading, aborting, hovering and so on. Pretty generic interactions which you need when designing for any interactive product. If you don’t use a proper framework for this, you will definitely get a very inconsistent and overly complex User Interface. Frameworks, such as jQuery and YUI, have many interactions prebuilt, which are better than what any UX designer can design within a reasonable amount of time and budget. Knowing which interactions are available can help you choose the right one for the task you are designing. There is not really a template of interactions that you can use, but you will find the available interactions of jQuery and YUI on their demo pages.
Animations
Often, animations are ‘forgotten’ by UX designers. Of course they are not really forgotten but specifying animations on paper is like learning to ride a bike from a book.
I think that when you want to design a website or application that really gives your users a good feeling you need animation. Having gorgeous animations is not difficult at all anymore. Fore example, Animate.js is a great source for good animations. Besides Animate.js, there is also a lot of good animation possible using jQuery.
UI – Components
With UI components I mean things like spinners, sliders, buttons and draggable fields, accordions. Nothing grinds my gears more than poorly designed / built UI components. Especially the jQueryUI components are really easy to use on just about any website and perform really smoothly for the visitors of your website. On jQuery UI you can even style the way the components to your brand using what they call the Themeroller. Sometimes when I have to design something quickly, I use the themeroller to generate the UI and take a copy paste screenshots of it in my design. It might seem a little strange to develop code and take screenshots of how it looks to put in your design, but but it is that easy to create controls that are both good and fast to design.
Tips for designing within a framework
1. Style guides
Definitely the most important part when designing within a framework is to have a good style guide for yourself, but also for your developer friends. Using roughly the same categories as I laid out earlier for your style guide will help in keeping your style guide usable for every stakeholder. If you are dealing with stakeholders, who aren’t very tech savvy, you might want to rename them to Layouts (grids), Behaviour (interactions), Animations and screen elements (UI components).
2. Form follows function
As a UX designer you should really justify the decisions for any component, grid, interaction, or animation with they have. Try to connect the function to the form and you know why and when to use your component, grid, interaction or animation.
3. Sketch
Low fidelity sketches are a great way to sketch out a flow and see if the whole picture before putting too much time and effort in something that doesn’t works. Try to sketch out as many different flows as possible with your stakeholders but also with your developer friends.
4. Prototype
The good part about most UI frameworks is that they are very easy to implement and just as easy to prototype. Prototype as quickly as you can and do what you do best; bring users into the design process and use your prototype to validate your design decisions.
Conclusion
Frameworks are fantastic and belong in every designers toolkit. Though it might seem that you need a lot of technical skills to understand them, it is definitely worth to look into them. Invest some time to get to know and play around with frameworks, you will find out it’s both fun and useful.
As a designer you can use frameworks to get out of the specification business and make your work about creating great experiences. You don’t need to know any code to use frameworks, but understanding them will certainly improve the communication with your developer team.
No Related Posts
The post Think Outside The Box, But Design Within The Framework appeared first on The Usabilla Blog.
