presentation design dribbble

• Graphic assets
• Design tools
• Inspiration
• become an author
• about icons8

Subscribe to Icons8 Newsletter!

Stay tuned and get the latest news in design world.

Welcome to the community, buddy. We promise never to spam you.

Please, try another combination.

How to design a beautiful Dribbble shot

Dribbble is a great place for inspiration. And it is also the platform where creatives meet their clients. So the way you present your work there matters like nowhere else. If you’re just starting your journey as a designer and want to make your first steps on Dribbble, then this tutorial is for you.

I will show you how to design a Dribbble-worth shot using Lunacy , a 100% free design app that has everything you need for the task. We will create a couple of views for a concept of a mobile app with fancy graphics. And we will do that without even leaving Lunacy. You can watch this video or follow the step-by-step guide below.

Download .sketch file

Let’s start with the background of our shot. Launch Lunacy and create a new document. Create an artboard (A) . I selected the Dribbble Shot Retina option from the list of presets in the right panel. Adjust the zoom so that the artboard fits the canvas. Add a rectangle (R) the size of the artboard. Change the Fill of the rectangle to #CEC2FF .

Add some ellipses (O) and adjust their colors. I used the following: #9B85F3 , #F385EE , #B3FFA4 , and #AEF4FF .

Add another rectangle over the ellipses:

• Color: #FFFFFF
• Opacity: 5%
• Background blur: 400 or more

The background is ready. Group (Ctrl+G / ⌘ G) all the objects on the artboard and then lock the group to prevent it from accidental editing. Now create another rectangle :

• Size: 375*812 px
• Corner radius: 24 px

This will be a view of a mobile app.

Open the UI Kits tab and select the Apple iOS UI Kit . Add the following top bar components:

• Bars/Navigation Bar/iPhone – Compact/Light/Default
• Bars/Status Bar/iPhone/Light

Select the Bars/Navigation Bar/iPhone – Compact/Light/Default component and detach it from components.

Adjust the object: remove the unnecessary elements, edit the text, color, and alignment of objects. I removed the plus button, changed the texts to Back and Categories , and set the texts’ color to #000000 . Also, I set the radius of the upper corners to 24 px .

Now let’s switch to the bottom of the app view and add a new rectangle of 375*84 px in size. Set the radius of the lower corners to 24 px .

Copy the style of the navigation bar background ( Ctrl+Alt+C / ⌘ ⌥ C or using the context menu).

And paste this style to the new rectangle ( Ctrl+Alt+V / ⌘ ⌥ V or using the context menu). That’s a very useful feature. No need to set up object properties in the right panel.

Open the Icons tab and select an icon. I used the Paper icon in the Fluent Systems Filled style. Then add a text block ( T ) below the icon. Set the Tint of the icon to #898989 . The text settings are the following: Inter Semi Bold , size 11 px , color #1A1A1A , opacity 40% . Then select the text and the icon and align them horizontally.

Group the icon and text and create four duplicates ( Ctrl+D / ⌘ D ). Select all the icon-and-text groups and align them. Try the Tidy up button and the Smart Distribute feature.

Change the icons and texts of the duplicates. Then change the color of the group in the center to #000000 .

Add a small rectangle below the bar. This will be the Home indicator. Set its size to 135*5 px , corner radius to 10 , and color to #D2D2D2 . You can use the eyedropper ( I ) to pick up the color of existing objects.

Now let’s add some beauty. Go back to the top of the app view and add a 160*160 px rectangle . Set its color to #FFBCBA , and the corner radius to 12 .

In the Icons tab , select the Emoji style. Find an icon, for example, Musical note. Place the icon over the rectangle. Align the icon to the center of the rectangle.

Then add two text blocks below the rectangle:

Select the rectangle, icons, and texts, and group them.

Now duplicate this group 5 times and make some changes:

You should get a result like this:

Select all the objects making up the app view and create a duplicate.

In the duplicate, select the cards and the bottom bar, and delete them. Also, delete the Categories text on the top bar.

Select the Text tool and create a large text block as shown below. I used the following text settings: Inter Black , size 40 px , and color #000000 .

Now create a text field with a placeholder text and a button. For the text field create a 335*44 px rectangle . Set its color to #F7F7F7 and corner radius to 8 . For the text, use the following settings: Inter Medium , 18 px , color #000000 , opacity 40% , align left .

For the second button, create a rectangle with size 335*44 px and corner radius 8 . Delete the fill and add a border with color #1A1A1A and thickness 2 . Add a text to the center of the rectangle: Inter Medium , size 20 px , color #000000 .

Select both groups. Set the horizontal space between them to 200 . Align the groups to the center of the artboard.

And the last step. Open the Illustration tab and add some illustrations. I used the images in the Casual life 3D style.

That’s it. Our design is ready.

Create your designs in Lunacy and share them with us on social media: Twitter , Facebook , and Discord .

Check out the other Lunacy tutorials:

• Neon Effect
• Paper cut-out effect
• Landing page

Don’t forget to tell your fellow designers and developers that starting from version 8 Lunacy runs not only on Windows but also on macOS and Linux . Send them this link https://icons8.com/lunacy and help us spread the word about Lunacy.

About the author: Julia G, a wonderful creature responsible for QA and SMM at the Lunacy team.

Yay! You have successfully subscribed!

Something went wrong :(.

Related Posts

How Human Memory Works: Tips for UX Designers

File types in graphic design and how to choose them

8 Popular Trends in UI Design on Dribbble in 2020

Visual storytelling explained with… tomatoes

Dribbble Presentation Mock-Up Templates

Hi guys, i made a free dribbble presentation mock-up for your design.

I upload UI elements and don't forget to follow me on Instagram, Here is the link to make your day better. @Emmah_ux

Connect With Me On LinkedIn:  @emmah-priestley

Follow Me on Twitter:  @Emmah_ux

• First version published

Welcome to the MIT CISR website!

This site uses cookies. Review our Privacy Statement.

Designing Transformative Employee Experiences—Session Presentation

Why can't i view this research.

This presentation from MIT CISR's 2024 European International Executive Forum event is available only to logged-in members and attendees of the event.

See the list of MIT CISR members

Related publications.

Research Briefing

The employee experience of digital business transformation.

Management Journal Article

Digital workplace design: transforming for high performance.

About the Researcher

Nick van der Meulen, Research Scientist, MIT Center for Information Systems Research (CISR)

Mit center for information systems research (cisr).

Founded in 1974 and grounded in MIT's tradition of combining academic knowledge and practical purpose, MIT CISR helps executives meet the challenge of leading increasingly digital and data-driven organizations. We work directly with digital leaders, executives, and boards to develop our insights. Our consortium forms a global community that comprises more than seventy-five organizations.

MIT CISR Associate Members

MIT CISR wishes to thank all of our associate members for their support and contributions.

MIT CISR's Mission Expand

MIT CISR helps executives meet the challenge of leading increasingly digital and data-driven organizations. We provide insights on how organizations effectively realize value from approaches such as digital business transformation, data monetization, business ecosystems, and the digital workplace. Founded in 1974 and grounded in MIT’s tradition of combining academic knowledge and practical purpose, we work directly with digital leaders, executives, and boards to develop our insights. Our consortium forms a global community that comprises more than seventy-five organizations.