micromuseum.cc: Design & Wireframes
Something I don’t do often is UI wireframes or mockups. This doesn’t mean I don’t spend time designing the app but rather rely on the old fashioned paper and pencil. It feels and looks nice, but you start from scratch every time.
I purchased a while ago the full Adobe cc package - In my opinion well spent money, really good software for the price - and with it come Adobe XD.
This is in my opinion a valid alternative to more popular tools for UX design. If I didn’t have that subscription probably I would have used Keynote. The most popular tool today is Sketch, but having Illustrator et co. makes it pointless to get a license just for wire-framing.
With XD I quickly designed an actual working prototype of my interface. I found out ready made widgets for mobile that helped a lot bringing in good examples of material design for each screen category.
XD to Flutter
It turns out Flutter includes a nice widget set after all, and a powerful layout system that makes it really practical to design material interfaces.
The process to convert an XD design is made easy by the fact that the XD is actually an interactive mockup. So navigation is included in the design as well.
For converting the screens I started creating static pages for every screen, then build the navigation, and finally code in the actual business logic.
XD conveniently exports each screen as a separate file, so I can just go through each file to build the screens.
Screen layout
As I mentioned before, Flutter has a very comprehensive layout system, which comes handy when you need to build a modern interface, while keeping it looking as native as possible.
Basically you can arrange all content in rows and columns, nesting one inside another, but also leveraging different container types. Each container type allows a different layout, for example a grid, or absolute positioning, a stack, etc.
The basic concepts strictly follow the browser Flex layout model, so you can distribute space around the components, align them at the start or the end of a container, and so on. This makes it easy to be productive quickly with Flutter layout.
Again the Flutter team builds on the state of the art and packages it in a nicely integrated and robust implementation.
Some tips:
-
Try to keep your layout as simple as possible. In my case I won’t bother much to align elements in a pixel-perfect fashion, but rather build few general purpose screens that can easily be customised to fit the design. Users will love the consistency, and you save a ton of time doing custom layouts for every page.
-
Keep your components small. Nesting components seems easy at the beginning of a design, but at some point it will reduce a lot the readability of your code. The composition can be done incrementally building higher level components as much as you can.
-
Maintain your state in very few high level components. Not only this makes it accessible to all the sub-component hierarchy, but it will force you to handle the logic in few places, so it’s easier to maintain. I like the concept introduced by React high-level components, where there is a clear split between logic and presentation