Midjourney Version 5 for Web Design - The Results

DesignCourse · Beginner ·🖌️ UI/UX Design ·3y ago
Skills: UI Design80%

Key Takeaways

Uses Midjourney Version 5 to generate web designs for UI/UX design inspiration

Full Transcript

mid Journey version 5 just released late yesterday and today we're going to take a look at what it's capable of in terms of producing UI ux designs now for those that don't know mid-journey is a generative image AI That's capable of taking your text input and outputting some really awesome images and photographs oh in layouts too so here's the first prompt I issued a clean website landing page for a breakfast restaurant that makes waffles use a yellow black and white color scheme now for now you have to specify version 5 for the version 5 results now here's what it came up with overall this is a very solid first attempt it used the yellow black white color scheme but as you can see it still screws up the text but it does offer solid layout ideas I like the top right one and here it is upscaled not bad for just helping you generate color scheme and layout ideas now make sure to stick around because I'm also going to take one of these designs and make it Polished in the end now here's another prompt a dashboard designed for a cryptocurrency service that shows the current bitcoin price stats minimalistic version 5 ar-169 overall not bad at all it looks like it has some nice charts and I like the one on the lower right corner so here's that upscaled now you can also issue a prompt in the form of an image URL so I issued a prompt with this image here to see if it would output that design in a device mock-up and here's what it came up with as you can see same color scheme it recognized that there were charts in the original image so overall it didn't do that bad of a job mirroring the image that we fed it in a device mock-up format I saw another user issue this prompt for a vape web design but they forgot to add the version 5 tag at the end and this is the result of that default version 4. I then decided to issue the same exact prompt except add on to version 5 tag at the end I actually like the version 5 option more but it really doesn't seem that Superior it's just stylistically different here's another prompt testimonial section with large testimonial and three smaller testimonials underneath UI ux web design purple and white color scheme and here's the result and here's the result the only option here that seemed to give me what I asked for is the upper right corner there's a large testimonial up top and then three different cards underneath which could be construed as testimonials overall you can easily take this and use it for layout inspiration now having said that let's do exactly that let's say you found a layout for inspiration along with a color scheme and now it's time to make it a high polish design here's a time lapse of me working on one of the Vape layouts foreign [Music] foreign [Music] here's the original image from mid-journey and here's the polished version that I created in figma as you can see pretty awesome stuff utilizing generative AI for color scheme and layout ideas can be really useful especially if you're someone who has a hard time with layouts and colors in general if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy

Original Description

http://bit.ly/3JmcY70 👈 Learn UI/UX & CSS Today. Use "UI2023" for 23% Off! https://designcourse.com/af 👈 My upcoming "Advanced Frontends" Course -- Today, we're going to check out the newly released Midjourney V5 (Version 5) and how it can handle producing web designs for UI/UX design inspiration. I'll feature several examples, along with refining a design that midjourney produced. https://midjourney.com (Not a sponsored video) Let's get started! #midjourney #ai #uiux - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from DesignCourse · DesignCourse · 0 of 60

← Previous Next →
1 Photoshop Pen Tool Tutorial (Tattoo Design)
Photoshop Pen Tool Tutorial (Tattoo Design)
DesignCourse
2 How to Design the Microsoft Logo in Photoshop
How to Design the Microsoft Logo in Photoshop
DesignCourse
3 Photoshop Gradients Video Tutorial
Photoshop Gradients Video Tutorial
DesignCourse
4 Your Guide to Layer Styles
Your Guide to Layer Styles
DesignCourse
5 Layer Masks in Photoshop
Layer Masks in Photoshop
DesignCourse
6 iOS App Icon Design Tutorial in Illustrator CS6
iOS App Icon Design Tutorial in Illustrator CS6
DesignCourse
7 Illustrator CS6 Logo Design Tutorial - Archfold
Illustrator CS6 Logo Design Tutorial - Archfold
DesignCourse
8 Photoshop CS6 3D Tutorial - Magic Tent Illustration
Photoshop CS6 3D Tutorial - Magic Tent Illustration
DesignCourse
9 How to Design a Tshirt Tutorial - Adobe Illustrator
How to Design a Tshirt Tutorial - Adobe Illustrator
DesignCourse
10 Types of Logos - Lettermark & Monogram Logo Type
Types of Logos - Lettermark & Monogram Logo Type
DesignCourse
11 Banner Design in Photoshop CS6
Banner Design in Photoshop CS6
DesignCourse
12 How to Design a Logo in Illustrator CC
How to Design a Logo in Illustrator CC
DesignCourse
13 Designing a Logo in Photoshop CC
Designing a Logo in Photoshop CC
DesignCourse
14 1. Launch & Market a Web Based Business - Introduction
1. Launch & Market a Web Based Business - Introduction
DesignCourse
15 2. Launch & Market a Web Based Business - Logo Design
2. Launch & Market a Web Based Business - Logo Design
DesignCourse
16 3. Home Page Mockup in PS : Part 1
3. Home Page Mockup in PS : Part 1
DesignCourse
17 4. Home Page Mockup in PS : Part 2
4. Home Page Mockup in PS : Part 2
DesignCourse
18 5. Home Page Mockup in PS : Part 3
5. Home Page Mockup in PS : Part 3
DesignCourse
19 6. Home Page Mockup in PS : Part 4
6. Home Page Mockup in PS : Part 4
DesignCourse
20 7. Home Page HTML & CSS - Part 1
7. Home Page HTML & CSS - Part 1
DesignCourse
21 8. Home Page HTML & CSS - Part 2
8. Home Page HTML & CSS - Part 2
DesignCourse
22 Using Photoshop to Showcase Mobile Projects
Using Photoshop to Showcase Mobile Projects
DesignCourse
23 Flat Icon Design Tutorial in Illustrator CC
Flat Icon Design Tutorial in Illustrator CC
DesignCourse
24 Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
Illustrator CC Logo Design Tutorial - A Logo That "Pops"!
DesignCourse
25 Logo Design Follow Along 1: Emblem Logo Design
Logo Design Follow Along 1: Emblem Logo Design
DesignCourse
26 Showcasing Logos in 3D with Blender
Showcasing Logos in 3D with Blender
DesignCourse
27 How to Design an Effective Lettermark Logo
How to Design an Effective Lettermark Logo
DesignCourse
28 Squeeze Page Design Tutorial in Photoshop (Part 1)
Squeeze Page Design Tutorial in Photoshop (Part 1)
DesignCourse
29 Squeeze Page Design Tutorial in Photoshop (Part 2)
Squeeze Page Design Tutorial in Photoshop (Part 2)
DesignCourse
30 Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
Mobile GUI Element Design in Adobe Photoshop CC (Part 1)
DesignCourse
31 Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
Mobile GUI Element Design in Adobe Photoshop CC (Part 2)
DesignCourse
32 Flat Mobile App Design in Photoshop CC - Weather App
Flat Mobile App Design in Photoshop CC - Weather App
DesignCourse
33 Create Reflective 3D Text in Blender (Beginner)
Create Reflective 3D Text in Blender (Beginner)
DesignCourse
34 Animating a Logo with Adobe After Effects CC (Beginner)
Animating a Logo with Adobe After Effects CC (Beginner)
DesignCourse
35 Design a Game Website Mockup in Photoshop CC (Part 1)
Design a Game Website Mockup in Photoshop CC (Part 1)
DesignCourse
36 Design a Game Website Mockup in Photoshop CC (Part 2)
Design a Game Website Mockup in Photoshop CC (Part 2)
DesignCourse
37 Photo Manipulation Tutorial in Photoshop CC (Beginner)
Photo Manipulation Tutorial in Photoshop CC (Beginner)
DesignCourse
38 Advertising Illustration Tutorial in Photoshop CC
Advertising Illustration Tutorial in Photoshop CC
DesignCourse
39 Perspective Warp Tool Tutorial in Photoshop CC
Perspective Warp Tool Tutorial in Photoshop CC
DesignCourse
40 Free Giveaway Contest.  (WiseBanner Banner Maker).
Free Giveaway Contest. (WiseBanner Banner Maker).
DesignCourse
41 Design an Animated Loading/Download Icon (GIF)
Design an Animated Loading/Download Icon (GIF)
DesignCourse
42 Contest Winners (WiseBanner)
Contest Winners (WiseBanner)
DesignCourse
43 Model & Animate a 3D Push Button in Blender (Beginner)
Model & Animate a 3D Push Button in Blender (Beginner)
DesignCourse
44 Mega Tutorial - iPhone Breathalyzer - Project Introduction
Mega Tutorial - iPhone Breathalyzer - Project Introduction
DesignCourse
45 Part 1 - iPhone Breathalyzer - Blender
Part 1 - iPhone Breathalyzer - Blender
DesignCourse
46 Part 2 - iPhone Breathalyzer - Rendering & GUI Design
Part 2 - iPhone Breathalyzer - Rendering & GUI Design
DesignCourse
47 Part 3 - iPhone Breathalyzer - UI Animation in After Effects
Part 3 - iPhone Breathalyzer - UI Animation in After Effects
DesignCourse
48 Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
Part 4 - iPhone Breathalyzer - Website Design in Photoshop CC
DesignCourse
49 Part 5 - iPhone Breathalyzer - HTML Part 1
Part 5 - iPhone Breathalyzer - HTML Part 1
DesignCourse
50 Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
Part 6 - iPhone Breathalyzer - HTML/CSS Part 2
DesignCourse
51 Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
Part 7 - iPhone Breathalyzer - HTML/CSS Part 3
DesignCourse
52 Part 7 - iPhone Breathalyzer - Finishing Touches
Part 7 - iPhone Breathalyzer - Finishing Touches
DesignCourse
53 Square Space Logo Maker - C'mon People.
Square Space Logo Maker - C'mon People.
DesignCourse
54 Design a Bloody Knife in Photoshop CC
Design a Bloody Knife in Photoshop CC
DesignCourse
55 Typographic Poster Design Tutorial in Illustrator (Part 1)
Typographic Poster Design Tutorial in Illustrator (Part 1)
DesignCourse
56 Typographic Poster Design Tutorial in Illustrator (Part 2)
Typographic Poster Design Tutorial in Illustrator (Part 2)
DesignCourse
57 Modern Business Card Design in Illustrator CC (Part 1)
Modern Business Card Design in Illustrator CC (Part 1)
DesignCourse
58 Modern Business Card Design in Illustrator CC (Part 2)
Modern Business Card Design in Illustrator CC (Part 2)
DesignCourse
59 Parallax Tutorial using Parallax.JS
Parallax Tutorial using Parallax.JS
DesignCourse
60 Interview: Andrew Price of BlenderGuru.com
Interview: Andrew Price of BlenderGuru.com
DesignCourse

Related Reads

📰
UX Case Study — Menu Krusial Lapor Diri pada SPMB Online “Tidak Ditemukan”??
Learn how to identify and fix a crucial UX issue in a mobile application where an important menu is hidden from view, causing user confusion
Medium · UX Design
📰
Can we talk about the portfolio double standard for a minute?
Learn about the portfolio double standard in UX design and how to navigate it
Medium · UX Design
📰
Designing for Intelligence: 8 UX Patterns That Separate Good AI Products From Forgettable Ones
Learn 8 UX patterns to design effective AI products that stand out from the rest
Medium · AI
📰
Designing for Intelligence: 8 UX Patterns That Separate Good AI Products From Forgettable Ones
Learn 8 UX patterns to design intelligent AI products that stand out from the rest
Medium · UX Design
Up next
How To Add Reviews And Testimonials To Squarespace (FAST & EASY)
Tutorial Stack
Watch →