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