Speaker A
This is half a design.
Learn eight professional and creative UI presentation techniques to showcase your designs effectively in portfolios and client meetings.
Key Takeaways
- Minimalism and subtle effects enhance UI visibility in creative presentations.
- Realistic mockups are crucial for professional client presentations to build trust.
- Using curated design libraries like Mobbin improves UI design quality and structure.
- Dynamic layouts with rotation and skewing create engaging multi-screen presentations.
- Prototyping adds polish by showing UI interactions and animations.
Summary
- Creative presentations use minimal backgrounds, subtle shadows, and glow effects to make UI designs pop.
- Dynamic effects like image exploding, skewing, and offsetting add visual interest to UI showcases.
- Professional presentations focus on realistic contexts using mockups to build client confidence.
- Mobbin is recommended as a resource for real-world UI patterns and design inspiration.
- Multiple screens can be displayed in creative collages with rotations and skewing to avoid boring grids.
- Images should complement UI without distracting, best used for physical products or integrated fluid gradients.
- AI tools can quickly generate custom product mockups with natural, detailed backgrounds for polished presentations.
- Prototyping is essential to demonstrate interactive UI features and animations that static images cannot convey.
Full Transcript — Download SRT & Markdown
Speaker A
The other half is right here.
Speaker A
Because whether you're aiming for simple or stunning, imaginative or professional.
Speaker A
Design looks better when it's presented.
Speaker A
We're going to walk through how to present one design multiple ways in both creative and professional settings, so you always end up with a perfect result.
Speaker A
First, the showcase.
Speaker A
These are the more creative presentation techniques that are best for your portfolio and social media.
Speaker A
The most basic and minimal is just a plain background color.
Speaker A
Seen throughout most of Dribble, it is remarkably hard to find suitable backgrounds on some designs.
Speaker A
On our light mode, the easiest way is to take our orange accent color, darken it, and desaturate it to make it a little gray, since brighter colors would pop more than the design itself.
Speaker A
Add a faint little shadow and it already looks fantastic.
Speaker A
But for dark mode, a popular technique is to add a subtle glow effect.
Speaker A
We can do this by adding some large blurred circles of our accent color behind the UI, this creates a soft ambient light that makes the design feel like it's emitting light.
Speaker A
You'll also often see a glassy background paired with a soft gradient stroke to define the edges, which adds another layer of depth.
Speaker A
Don't underestimate minimalism when you're displaying designs.
Speaker A
Take a look at these three.
Speaker A
They're all using relatively bland background colors, but it works well because it makes the design itself pop.
Speaker A
It's tough to go wrong with this and it works very well for nearly any design.
Speaker A
Now that we have the basics down, we can start adding some more dynamic components.
Speaker A
First up is something I call exploding the image.
Speaker A
Which for our example, consists of extending these lines down and allowing our dashboard to expand off the screen.
Speaker A
This clearly isn't super practical, but it is a cool effect.
Speaker A
Alternatively, something like this where we extend the pattern off the screen is an interesting effect too.
Speaker A
Here we see the same thing happen to this slider, but it's also an actual UI pattern up here.
Speaker A
The image could be cropped down like this, but by allowing it to expand, it makes it much more visually interesting.
Speaker A
And it doesn't even need to be a piece of the UI.
Speaker A
This design cleverly expands on the brand's visual identity by adding some important metrics to it.
Speaker A
Now, getting a little more complex.
Speaker A
We can do more to attract attention to our UI with a skew like this.
Speaker A
Make sure not to skew too much, just enough to get the effect.
Speaker A
Here I've skewed by 2 degrees vertically and -14 degrees horizontally.
Speaker A
But to drive in more attention to the dashboard, we can actually pop the dashboard out by offsetting it and adding a shadow to it.
Speaker A
Sometimes adding a gray placeholder where the dashboard was also accentuates the effect, but it's not always necessary.
Speaker A
But if you're presenting like a professional, then the UI should be equally as good.
Speaker A
That's why I use Mobbin, a library of hundreds of thousands of curated flows and designs that I take inspiration from.
Speaker A
It gives access to real world design patterns like UI components and user flows from top products.
Speaker A
Which show me how real teams actually structure their products, so you can see it in practice.
Speaker A
You can check out Mobbin using my link in the description to get 20% off.
Speaker A
Now, this looks great for our singular frame.
Speaker A
But our design has more than one screen to display.
Speaker A
Stacking them is pretty boring and doesn't work well.
Speaker A
So we can offset and slide them off the page slightly.
Speaker A
This is good and works well for mobile designs in the opposite orientation.
Speaker A
But with all this empty space, we can add an even more screens to form a collage.
Speaker A
Importantly, try not to make sure everything lines up in a grid because that's not as interesting.
Speaker A
And we don't need to stop there.
Speaker A
A few degrees of rotation adds a ton of motion.
Speaker A
Or once again, we can skew this entire thing.
Speaker A
We can even pop out one of the frames if it's more important than the rest, like our hero section.
Speaker A
An important note for these is the design itself should be large.
Speaker A
Meaning landing pages are the best for this, while dashboard details are too fine to really see them.
Speaker A
If we did want to display a dashboard, we could zoom way in to a specific section.
Speaker A
Animate it a touch and you end up with this.
Speaker A
Which looks both creative and professional.
Speaker A
Last but not least, images.
Speaker A
These are the hardest to balance with the UI, since it needs to be relevant, but also not distract from the design.
Speaker A
These are often better when you have a physical product, like a coffee shop or a car on the landing page.
Speaker A
Although something like this portfolio template has integrated the images with the UI exceptionally well without being overbearing.
Speaker A
For softwares, sometimes fluid gradient images work well.
Speaker A
But typically you'll see one of the previous methods used instead.
Speaker A
So far, we've made our designs look amazing for our portfolio.
Speaker A
But these strategies won't work as well in client meetings.
Speaker A
Because the goal isn't to wow them, it's to build confidence in the product.
Speaker A
When you present your work in a clear and realistic context, the client can truly understand what the final product is going to look like.
Speaker A
And the best way to immerse a client in the design is through mockups.
Speaker A
Not only do these look polished, but they show you product where it will ultimately be used.
Speaker A
Even a simple computer without much else does a lot to frame our design.
Speaker A
If we wanted to take it a step further, a lifestyle mockup where the UI is actually being used like this iPad.
Speaker A
Or even an Apple Watch screen can really elevate the design.
Speaker A
Now, there are a lot of great free mockups out there.
Speaker A
But sometimes you want it to feel fully custom.
Speaker A
Now, I don't think that AI is great at making thoughtful UIs.
Speaker A
But it is good at making mockups.
Speaker A
The gold standard is to use the latest Apple products.
Speaker A
So that's what we'll be doing.
Speaker A
A prompt like MacBook Air, green screen on screen, on an orange faux leather padded chair, notebook and stool in background.
Speaker A
Background blurred, soft shadows, moody lighting.
Speaker A
Natural, lived in.
Speaker A
Literally 30 words later and we get out something that looks like this.
Speaker A
We just punch out the green background and skew in our design and we've got a custom product mockup in two minutes.
Speaker A
But it doesn't stop there.
Speaker A
Minimal concrete cylinders with small cracks.
Speaker A
Beige living room with water stain.
Speaker A
It's the small details that sell the entire experience.
Speaker A
Just like with any UI design, and with AI, you can create any experience.
Speaker A
This skill is also very useful if you're designing an e-commerce since high quality product mockups are the difference between great and disastrous designs.
Speaker A
Finally, prototyping.
Speaker A
Don't describe, show.
Speaker A
This allows the user to see the experience with a visual mockup and then feel the experience with a working mockup.
Speaker A
It also lets you display intuitive but hidden features like common swipe actions.
Speaker A
Or for a dashboard, it could be showing how this create link modal elegantly animates in, or the animation sequence that happens when you delete a link.
Speaker A
It's these small details that communicate a level of polish and thoughtfulness that static images simply can't.
Speaker A
And there we have eight different ways of displaying your work in both creative and professional settings.
Speaker A
The link to check out Mobbin and get 20% off will be the first one down below.
Speaker A
And I've also put all of the design resources used in this video down there too.
Speaker A
Thanks for watching.
Speaker A
And I'll see you in the next one.
Topics:UI presentationdesign showcasecreative UIprofessional UImockupsMobbinprototypingdesign portfolioUI animationproduct mockups
![The Wounded Spirit – Timothy Keller [Sermon] — Transcript](https://i.ytimg.com/vi/pkL3R27ZV1o/maxresdefault.jpg)
