“Darling, I got to tell you something, and I don’t say this to everybody, you look marvelous absolutely marvelous.”
Billy Crystal as Fernando
I find I have an abundance of ideas for apps I want to build with Flutter in my journey to become a seasoned Flutter developer. Typically, with blind exuberance, I’ll jump headfirst into creating a new Flutter app and begin coding up pages and views with beautiful widgets. I’ll design UI elements on the fly as ideas pop into my head. Things always started great, but I soon find myself getting bogged down tweaking pixels when there are huge, glaring holes in my overall UI/UX design. The truth is, I don’t have a design plan. I’m generally making things up as I go. Inevitably I get to feeling like I’m spinning my wheels only to fall out of the “coding zone” and not sure what to do next. I soon find I need a plan.
Flutter can enable developers to create beautiful and stunning applications. Unfortunately, as Uncle Ben advised Peter Parker, “With great power comes great responsibility.” Without a plan or design in hand, a developer can easily create a hot mess instead of a beautifully stunning Flutter app.
Simultaneously designing and coding an app was turning out to be a bad idea. At least it wasn’t the right way for me to work. I’d worked with UI/UX designers in the past and appreciated the detailed designs they’d provide for me to implement. While I don’t want to become a dedicated UI/UX designer, it was becoming apparent to me that I needed to up my design skills or hire a designer. After some investigation and much consideration, I decided I needed to build a reasonable set of competent design skills and experience with a design tool. Having these skills would allow me to flesh out my app ideas or coordinate effectively with a designer.
There are many mobile and web app design tools; Sketch, InVision, Adobe XD, Figma, and more. All of these design tools have their strengths and weaknesses. I’m not going to debate or defend my choice of Adobe XD except to say I chose Adobe XD for the following reasons:
- Has a free, entry-level pricing option
- Lots of free and low-cost templates (UI kits)
- Large user community to learn from and share ideas
- Announced support for export to Flutter
- Personal fondness and bias for Adobe products
In researching the various UX/UI design tools available, I read several articles by UI/UX designers saying they felt Adobe XD was a strong contender. I also found there is a large community of Adobe XD users and contractors on freelance work sites. So, I decided Adobe XD was to be my UX/UI design tool. Now I needed to learn how to use XD.
I went on to Udemy and looked over a number of the Adobe XD courses. I wanted a course to provide me with a quick overview of using XD while showing me tips, tricks, techniques, and a bit of UI design. I selected this course, “Learn Adobe Xd Webdesign: Design websites from zero: UX & UI.” While this course has a couple of minor issues, it was the perfect course for my needs. By the end of the course, I had the core competency I was seeking. I was comfortable using keyboard shortcuts to layout and design basic layouts. The two issues I have with the course are, not enough time spent on discussing the intelligent measurement system used in XD and Rino’s incorrect use of the artboard grid layout tool. I was able to quickly figure out both of these issues by reading the XD user guide.
With my newfound power and knowledge in hand, I’ve stepped back from several projects I was working on to coalesce my thoughts and focus on designing and layout my Flutter projects. I’m finding this is a good exercise for me as it forces me to think through my UX/UI design before blindly jumping into code. My app designs are still dynamic, but they capture a more comprehensive view of what I want to accomplish before I start coding. This approach also forces me to create a stylesheet for my projects and makes me consider color, font, and core UX/UI elements globally, like buttons and hyperlinks, for the app.
I plan to write about my UX/UI design experiences in my upcoming blog posts. I have an old GitHub Pages web site written using Jekyll. While this was an acceptable solution, I never really liked the limited look and feel of the web site. Also, I didn’t particularly like using HTML and CSS to design the web site. With Adobe XD and Flutter, I want to see how I can improve my old blog web site. Stay tuned.
References
Adobe XD – Adobe XD product information and download.