Design & Code: Flutter for designers
No, this is not another post about should designers do code or not, and also not about me transitioning to a technical role.
Some background, as part of the prototyping stream in my company, we are experimenting a lot using prototypes. We convert our design system to Protopie library, we advocate other designers when working on prototyping tasks, we play around with more advanced hi-fidelity concept prototype, we help researchers with a prototype for research/usability test, and recently we’re exploring Flutter (https://flutter.dev) for the next tool of prototyping.
Here are my takeaways so far, for better collaboration with developers, regardless of the framework or language of your choice.
Implementing pixel-perfect design to code takes time
Yes, it’s hard. Let’s not just simply think that the developer will figure it out and expecting a pixel-perfect implementation. It’s a back and forth process, if you have a QA session, join that session and see how’s the development version looks like.
Whatever the technology is, there will be always limitations, discuss the strategy with your developer, which one is doable and which one is not.
Structure your layer or group properly, less is better
More empathy to our fellow developers, imagine if you handover the design and they need to extract or read the design structure and seeing the above grouping. Well, at least named your layers with a meaningful name, try to reduce the nested layers, each layer could be a single widget or class in the development environment, meaning it could be multi-lines of code.
Literally “thinking inside the box”
Everything comes in boxes, vertically or horizontally stacked, think like building a puzzle. Breaking the rule for originality or creativity is a good thing, but remember, at the end of the day if you wanted your design to see the light you need to understand the limitations.
Take an example of the below screen.
Potentially, each of the elements will be nested inside a row or column. If you have time, try to build a simple block diagram to understand how the layout will be implemented.
Start designing using constraints instead of fixed size
Most of the time we designed our UIs using fixed height and width, nowadays people are using different devices with different screens size, it’s outside our control.
Questions like, “Should we make the button snapped to the bottom or not?”, “What happened with this section if the user using a larger screen?”, “Should we left-align the element or snap it to the edge?” will always be there while implementing the design in the dev environment.
Start thinking about responsive design while designing your screens, it will save a lot of time in the future.
That’s all for now, both designing and developing takes time to get an almost perfect result, for a better user experience we need to understand the platform. Have empathy for both sides.
P.S. I will write more about prototyping in the future! 🤞
