Prototyping to Production: Bridging the Gap with a Common Tool (Google I/O '17)
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- Design and engineering collaboration is difficult but vital for iterative user-centered product development. Join us (a designer and UI developer) as we use the Flutter UI framework to evolve a UI concept from prototype to production code. You’ll leave this talk with a deeper understanding of how to bridge the gap between designers and UI developers through a prototyping-centric workflow, and why using a single framework between designers and developers helps your team work more efficiently.
See all the talks from Google I/O '17 here: goo.gl/D0D4VE
Watch more Android talks at I/O '17 here: goo.gl/c0LWYl
Watch more Chrome talks at I/O '17 here: goo.gl/Q1bFGY
Watch more Firebase talks at I/O '17 here: goo.gl/pmO4Dr
Subscribe to the Google Developers channel: goo.gl/mQyv5L
#io17 #GoogleIO #GoogleIO2017 event: Google I/O 2017; re_ty: Publish;
(disclaimer: I'm on the Flutter team at Google)
In response to Totoro Zhen and Louie Solomon about workflow disconnects -- I'm a programmer who also does design work, but I had the same reaction as you concerning the need for a more visual tool to help with the design side. As you know, Flutter is new but is already getting a lot of attention. In addition, Flutter is an open source project and we are encouraging other developers to get involved. If someone is interested in building a more design-oriented tool (or adapting an existing one) to work with Flutter I'd be happy to talk to them and help in any way I can.
Nevertheless, I was a little surprised after this talk at I/O when I talked to a few designers who were very excited about Flutter because it allowed them to build a non-static prototype quickly. They wanted to see interaction, animation, and other dynamic parts in their prototype. They didn't seem to mind the need for some simple code (one of them commented that it didn't look any more difficult than dealing with HTML and CSS). And they liked that it really helped the transition from design prototype to development.
I think what would be really cool would be a visual tool that answers your concerns about making the design process easier, but which still generates Flutter code so that it creates a working prototype.
Wm Leler it'd be extremely cool to get something like adobe XD to work to output to flutter code.. what do you think
Great Flutter demo.
This was a great video! I’m switching up my team on how we work in 2018.
I like Flutter idea a lot, I just feel that you could try do something like JSX for that build method, it just feels more intuitive and clean in my opinion.
I'll have to disagree. Dart provides a few utilities that jsx would make impossible. Const constructors is an example.
How do you turn on the visual debugger in IntelliJ?
I'm still seeing a pretty big disconnect with this workflow, but now it's design to design rather than design to development. As a designer, I iterate on ideas quickly, duplicating artboards to try out new ideas, changing type on the fly, experimenting with layouts etc. For me, the absolute quickest way to do this is by using a visual design tool.
Additionally, for any icon design or illustration, the designer is now left using their graphic design tool to create assets out of the context of the rest of the app. This tool seems to take some of the work away from developer, but proportionally adds that work back to designers.
If a tool like this is going to be successful for both designers and developers, it needs to better take the needs of designers into consideration. Allow shapes to be drawn into the live space using tools designers are used to, and generate columns and rows intelligently, or at least visually.
This is GEM! GEM I SAY!
It seems to me like flutter needs something like JSX to make this really useful for designers. Expecting them to learn a language just seems like a waste of time. Like the desiger here said, it took her a while to learn it and it involved plenty of questions with the team and stackoverflow - just like learning a new programming language does!
Why burden the developer with code in the first place? How about Photoshop-to-code frameworks like Altia to bridge the gap?
Totoro Zhen the point is that mobile designers should join the actual development and thats done by coding. Today many ux designers work by pushing psd files on development which rnt any more useful than sketches on a napkin. So like frontend devs in the web stack ux devs should replace designers who cant do anything but xd and ps
Microsoft did this 10 years ago with XAML and Blend. It so sad that the technology never took off because the idea was a game changer.
I think this is a more complicated way to achieve the same than React Native or NativeScript does, and the hype is all about being promoted by Google. At least with React Native and NativeScript, you already have a CSS - HTML syntax alike, which is more of a common ground for designers than learning all of this from the ground up.
Big advantage is cohesive tooling and thought out API / work flow. React native suffer from js problem of having 30 packages to do basic things.. redux, routing, animation, etc it's all left to developer as an exercise to figure out how to make them work together.
Whereas with flutter Google can take all lessons learned from Android and create awesome development experience esp with specifically designed ide helping you out.
With react native all 30 packages upgrade independently of each other and change their apis. Apis design dictates how you code, what pattern your app follows... But with constantly changing "apissss" your app structure becomes a mess.
Design by community sucks for developers. Reason flash was used to create so many games and yet there are hardly any html games, because it was easy and possible with flash where all parts were designed intelligently to work together.
Google realizes success of platform is dependent developer experience as they're the suppliers
ThunderousGlare which is why I included NativeScript in the mix, have you tried it? Things like navigation, notifications, animations are all included in the box, so the cohesive point is less relevant than it is on React Native. I would agree it's a bit more complicated to learn than React Native, but it's also more powerful without reinventing the wheel.
Is there already a maps widget in Flutter?
So, if I am making an android only app, should I try flutter or just stick to XML?
TheMightyJingles aj i recommend sticking to xml if you're already accustomed to it. Though using flutter is really fun and fast when developing to me so I think I'm moving to flutter :)
awesome tutorial
Can we see the hole files?
1:11
this is good
Now we can put our designers to work Muhahaha
Ux designer is not a developer . 🤔