How to create the design of a mobile application or a website with MidJourney?

How to create the design of a mobile application or a website with MidJourney?

Midjourney is one of the leaders in the field of generative artificial intelligence. It runs on a Discord server. All you have to do is enter a command line (the “prompt”) in the simplest possible natural language to create 4 images, which can themselves be broken down into variations.

This Discord robot is best known for creating hyper-realistic visuals (which have also given rise to several fake news). But did you know that it can also be used by graphic designers to generate UI templates? For a mobile device or a website, we give you all the tips to make Midjourney your UI assistant!

How to create a mobile app or website design with MidJourney?

1. Launch a prompt

  • Go to one of the #newbies-xx rooms on the Midjourney discord server, on the left side of your screen.
MidJourney
  • Enter /imagine in one of the rooms to start writing your prompt. Validate with the Enter key or the space bar.
MidJourney

2. Choose interface model and sign type

Phone, tablet, computer… You must specify which device will be used to display your interface. Here are some examples :

  • website UI design;

  • mobile app UI design;

  • smartwatch UI design;

  • landing page UI design…

You can also indicate what type of sign it is, to start guiding the style of the interface.

MidJourney
MidJourney

3. Indicate the expected style

Depending on the type of products you sell and your company values, you can enter the expected style for your GUI.

MidJourney
MidJourney
MidJourney
MidJourney

As with photos and drawings, several styles can be combined, here are some:

  • minimalistic;

  • vintage;

  • elegant ;

  • luxury;

  • futuristic;

  • urban;

  • cartoonish;

  • high-tech;

  • retro…

4. Add all the details you can think of

Do not hesitate to indicate all the qualities that the rendering must have (no one wants an interface that is dated or difficult to use!): professional, intuitive navigation, visually appealing…

MidJourney
MidJourney

5. Choose the colors

You probably already have a graphic charter. You can indicate the colors that best match it. You can also adjust the graphic style: gradient color, pastel color, watercolor…

NB: it is not currently possible to enter the colors with their hexadecimal code, but using their common name allows you to have an overview of the final result.

MidJourney
MidJourney

6. Use references

If you like the style of a famous designer, give Midjourney the idea!

MidJourney
MidJourney

The order of the elements in the prompt does not matter. However, if you want to give greater weight to an instruction or a group of instructions, you can use the multiprompt system.

How to create icons for your app or website?

In addition to designing a website and a mobile app, you can design a logo with Midjourney, but also icons to match your interface, thanks to the “icon for…” instruction.

1. Launch a prompt

Enter the /imagine prompt and validate with the Enter key.

Enter the statement designating what you want to generate.

MidJourney
MidJourney

2. Add instructions to refine the result

If the results obtained are too detailed (an icon must be simple!), you can use the minimalism and/or flat design instructions.

MidJourney
MidJourney

3. Indicate the colors

As for the interface we created above, the tints will probably have to be rectified in an image editor, since Midjourney does not yet allow to interpret the hexadecimal codes. You just have to indicate the names of shades, to get a first overview.

MidJourney
MidJourney

Midjourney does not know how to read or write, it is useless to ask him for a precise design of your website or mobile application interface. The results must in any case be reviewed in an image editor or during development. However, artificial intelligence makes it possible to give ideas for the layout of an interface and offers an overview of the final rendering. As always, the more detailed the instructions, the more adequate Midjourney provides. Don’t forget to use parameters and multiprompts!

Recent Articles

Related Stories