As part of our classes for this module we had Ronan come in and give us technical tutorials. Ronan works in the design industry so it was great to have him come in and give us tutorials on whatever technical questions we had.
He first set us a task to complete so that he could see where we were at as UX/UI designers. He gave us 3 Gmail screens to recreate, and he done this to see how we take on designing a UI, setting some traps that we could fall into. We were given 45 minutes to recreate these screens and after he would give us some feedback/advice on how he would go about creating these screens. The main takeaways from this tutorial was designing efficiently. One of the screens had a lot of icons on it, so one of the traps he set was whether anyone would spend all of the time trying to recreate the icons from scratch. He told us about a plugin called Iconify, which gives us access to pretty much any icon we want. This saves time on a quick task like this. He also stressed the importance of using components or groups, especially for repeated elements. This was something that I done and it definitely saved me a lot of time. Another trap that he set was one that I fell in to, and this was trying to recreate the screenshot instead of the app. I was spending loads of time writing out the exact text that was on the screenshot, but this wasn’t what he was looking for, instead he wanted us to recreate the interface. Instead of doing this he suggested using place holder text like lorem ipsum. Overall I thought that this design task was quite fun and I got a lot out what he was teaching us.
The next part of the tutorial was him showcasing Figma’s new AI tools, one of them being First Draft. This is currently in beta so I couldn’t use it myself, but I was able to get a decent showcase of it from watching what Ronan was doing. Using prompts, he was able to ask AI to make him a UI from scratch. They came out looking very good but he pointed out some mistakes that it made. One of these was a messaging UI in which the conversation started at the top and made it’s way down, even though the key pad was at the bottom. He pointed out that this means that the elements were disconnected as the message would jump from the bottom of the screen to the top. The point he was trying to make is that although AI is great for taking away the mundane tasks, it still doesn’t know how to design for a human-centered experience. The UI’s that they create look great but whether they function properly is still uncertain. They are great for making wireframes and starting off with a layout, but we need to still analyse and test how usable the designs it’s designs are. It can also be used to prototype, but it can get confused with complex prototypes. This quick AI walkthrough was super helpful and cool to learn about.
