How to avoid designing BORING layouts

DesignCourse · Beginner ·📰 AI News & Updates ·1y ago

Key Takeaways

The video demonstrates how to avoid designing boring layouts using Mid Journey for vector-like assets and Rive for animations, showcasing a before-and-after example of a fictional business concept presented on a layout.

Full Transcript

take a look at this layout for a rent a pet service which by the way is an absolutely terrible idea but nonetheless this here is uninspired yet I see this sort of thing from many uiux designers on marketing landing pages it pays off to think more uniquely don't just slap cards everywhere so I'm going to show you how I would reimagine this section given the business so first off I've used mid Journey here to generate a vector-like asset of a dog now my idea is to take this dog front and center and then through design emphasize the various use cases and benefits of renting pets I'm also going to animate this entire section based on scroll position within RVE so make sure to stick around until the end to see the final result now in this next section I spent a considerable amount of time issuing various prompts to Mid journey to generate isometric based illustrations of people holding animals now it can take some time to get assets that are suitable and workable so just be patient during this process oh and for all you newbies out there level up your skills today by checking out my interactive uiux course today at designc course.com now the idea of this layout is to show people instead of telling them when you rent a pet show them people doing things with pets this is also more of an illustration rather than just slapping cards on there with type on them so when potential clients or employers see see this sort of unique approach in your portfolio you're showing them that you can think distinctively you can think outside of the box which is very crucial Additionally you no longer need to understand code to implement animations you don't need to spend months learning JavaScript with tools like R and spline 3D you can build out amazing interactive animations and then Implement them in the browser with low code tools like web flow framer so in this day and age there's no excuse for a uiux designer to lack the ability to make their layouts of reality in the browser so here is the first layout with the boring card approach for a marketing landing page this is uninspired and here is my layout which animates the entire illustration on scroll with the help of R so the takeaway here is that it pays off to take your time to try and be cre creative with your landing pages now if you want to see how I animated this section and activated it to a scroll position let me know in the comments and I will see you very soon

Original Description

https://bit.ly/4bTD5zu 👈 Design & code like me. Use "UI2024" for 25% Off! https://bit.ly/4dVpgRa - Get notified when my Rive course is released! -- Today, I'm going to show you a before (typical card-based approach) and after of a fictional business concept presented on a layout. If you want to land more clients, higher paying clients, you need to learn how to think creatively with your landing pages. Let's get started! #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

The video teaches how to create unique and interactive layouts using Mid Journey and Rive, and how to implement animations in the browser using low-code tools like Webflow and Framer. By following the steps outlined in the video, viewers can learn how to avoid designing boring layouts and create more engaging user experiences.

Key Takeaways
  1. Use Mid Journey to generate vector-like assets
  2. Create isometric illustrations using Mid Journey
  3. Animate the entire section using Rive
  4. Implement animations in the browser using Webflow or Framer
  5. Use low-code tools to build interactive animations
  6. Test and refine the layout and animation
💡 Taking the time to be creative with layout design and using tools like Mid Journey and Rive can help UI/UX designers create unique and engaging user experiences.

Related Reads

📰
Reading The Tea Leaves On AI
Learn how AI is predicted to impact prosperity, human potential, and disruption, and understand the ongoing uncertainty and skepticism surrounding its adoption.
Forbes Innovation
📰
Will a Degree Still Matter in the AI Era?
In the AI era, a degree may still open doors, but its value is being reevaluated, making it essential to acquire relevant skills to remain competitive
Medium · AI
📰
Will a Degree Still Matter in the AI Era?
In the AI era, a degree may not be the sole determinant of career success, but it can still open doors and provide foundational knowledge
Medium · Startup
📰
AI Is Not the Enemy of Journalists, but a Test of Journalism’s Integrity
AI is transforming journalism, but its impact depends on the integrity of journalists, who must learn to work with AI tools while maintaining ethical standards
Medium · AI
Up next
I Lost 94% of My Traffic. Then I Found the Unfair Advantage
Conor Martin
Watch →