WOW AI - Using image generators in screen design
November 20, 2023
Why limit Midjourney and DALL-E to just content? They can generate screens too. Yes, they can. But remember - they're not the be-all and end-all of screen design.
Early screen design adventures and wins
We decided to see if Midjourney or DALL-E could handle our screen design work. We weren't just talking about prettying things up with text and images; we were going for the heart of the matter: user interface design.
Our first efforts? Let's just say it was a learning curve. Our prompts lacked focus. But we quickly learned that knowing exactly what you want makes all the difference in the world. We began to craft our prompts more deliberately, making sure they aligned with the design concepts we already had in mind. Surprisingly, just a few simple words like "clean," "minimalist," or "bright" worked wonders. Adding some trendy words like "award-winning" or a mention of "Figma" really helped us nail that modern, stylish look.
Here's a tip: Don't hesitate to reuse the same prompts. The image generators keep churning out different versions, so we got a nice range of screen designs.
"modern iOS ui/ux design of a banking dashboard in an app, professional ui design, award-winning, Figma, dark mode, blue tones"
Mockups and formats
Trying to create desktop screen designs? Throw in the term "web design". But there's a catch: your design ends up on a laptop screen surrounded by a scene. Therefore, it takes up a small portion of the whole image. The workaround? Use "no laptop" in your prompt for the full-size designs you want.
Getting certain elements right on the screens was a bit more challenging. We had success with the header, though. One useful tip: specifying the format, such as 16:9, can really help.
"layout suggestion for website, bakery, brown and black"
AI in screen design: room for improvement
We found our groove with the header using prompts. But when it came to designing other elements with descriptions, not so much. And as for prompting an entire site structure into a screen design? We're still figuring that out. We're exploring new strategies to improve our approach. Once we have a reliable method, we'll be sure to share it.
"minimalistic web design for a car brand, light, ui, Figma, -- no laptop, – ar 16:9"
Image generators: jumpstarting your design journey
It turns out that image generators are fantastic for sparking ideas and setting the overall aesthetic. They play an important role in the creative journey, especially in kick-starting the screen design process. When combined with traditional user interface design techniques, they become an invaluable resource.