Are you a visual designer or UX engineer?
Do you work with developers on a daily basis?
Does designing for development sometimes make
you want to curl up in a ball and cry?
Well, your friendly neighborhood graphic designer turned lite coder is here to help. At Webjunto, we separate front-end and back-end development at the Design and Development team levels. The Design team is responsible for UI, UX, Graphic Design, and front-end implementation (HTML & CSS), and the back-end team takes everything from Angular.js onward.
Having our design team integrated in such a way makes a lot of sense, because when we design we actually think about how the designs will be implemented; but it also puts a lot of responsibility on us. That’s where Templatizing comes in. Now, some may be thinking:
“WOAH there buddy! You jabronis use templates?!
That’s not design, that’s just being a derivative poser!”
And you have a point, it’s a challenge to truly solve a problem creatively when chunks of the solution are already laid out for you. But how important is it to re-invent the wheel every single time? You need flows that make sense. Your creative genius or whatever probably doesn’t live in the Forgot Password page. Customizing a base of what you know is possible leads to better decision making. Better decision making allows for a more implementable solution that looks good too.
So, let’s talk very briefly about how we “kicked things into high gear”.
(We sped up the Design team production by about 125%)
What we did:
- We found templates. For mobile applications we use Ionic and for web applications we use Bootstrap.
- We utilize the templates directly in our designs. It doesn’t make any sense to design something, and then have to modify the designs after-the-fact when you realize the framework doesn’t support what you created. We take the framework into account when designing our client applications which is better for everyone in the long run, including our clients.
- Here are some templates we use on the daily:
- We made templates. While this sounds excessive this one really helped us out. Since each application has certain pages and components that exist in every application, we designed a series of base apps. Now when we start the design process, we pull from a base application and are able to deliver much quicker, and with more reliability.
How does this help?
- It saves time. Not only are we not building components from scratch but we also have a base application to play around with styles on and start to iron out the stylistic properties of the application.
- It leaves less room for error. With all necessary pages and components already accounted for they are no longer left out of the process and easily added to other flows.
- It keeps our designs consistent. Since we now have access to the components and grid structure it makes sure our designs are consistent and easily translate into the frameworks for front-end development.
Let’s Recap:
-
Make your designs super radical (within your framework, of course)
-
Then make it even cooler and more radical, my dude
-
Hand it off
Peace out, earthlings
*Webjunto’s design team would like to give a shout out to Sketch symbols. You the real mvp.
