Can a design concept become a working interface? Everything you need to know about Dribbble shots

If you've ever used Dribbble to find inspiration for your future project, you've definitely seen shots — design concepts of 2-3 screens that show how a certain app would look like. For people inexperienced in UI/UX design, any shot can seem like a potentially working interface. In fact, designers often create good-looking concepts that can't be used for actual interface design. Their main goal is to attract attention rather than show something realistic. It, in its turn, often causes frustration among entrepreneurs who wish to get the design they saw on Dribbble because when they approach a design company, it turns out that the actual interface needs to look a lot different to be usable.

At Ronas It, we solve this issue by designing both realistic and good-looking shots. In this article, we share how we establish our design process, how our design department works, and how it helps us build interfaces faster and create correct expectations for our clients searching for inspiration on Dribbble.

Dribbble shots = design concepts?

A shot is a small fragment of a design project.

A concept is like a plan for a future project which gives the customer an idea of what their future interface will look like. Using the concept, the designer shows the general idea, style, and vibe of the interface. Sometimes, a shot can serve as a concept as well.

The goal of shots is to be good-looking and attract attention, while interfaces for real applications should be convenient and implementable in terms of development. On Dribbble, you can often find shots that are impossible to develop — they look good but have poor UX.

In our opinion, shots should be close to actual interfaces, because otherwise designers can mislead their clients and create incorrect expectations for them. Our designers create shots that can be used as concepts for future applications. If you visit our Dribbble profile, you will see not just beautiful pictures there, but examples of what your application can really look like.

There are some differences though: When we create interfaces for projects, we follow iOS and Android guidelines strictly. When we design shots, we can combine small elements of these guidelines to make them look more attractive. All the other parts like the interface logic, design complexity, layout, etc. — can be implemented during the development phase just like a design concept.

The process of designing Dribbble shots

We have a design system with a detailed process for creating Dribbble shots. By following these directions, any of our designers can build high-quality concepts. Here are the steps they take:

1. Creating a task

First, a manager chooses a relevant topic, based on our past projects, design trends, and popular applications in the app stores. Then they write a specified task and attach examples.

2. Collecting references

We have a knowledge base with resources where designers can find high-quality references. These can be ready-made concepts, as well as references on color schemes, fonts, illustrations, and so on. We tend to use both style and functionality refs in our work. Collecting references is a creative process and, basically, designers can be inspired by anything. References are needed to find innovative ideas and get a solid foundation for the future interface looks.

3. Designing the interface

We usually make 2-3 screens for mobile applications and 1-2 screens for the web. We spend up to 16 hours on web apps and up to 12 hours on mobile ones. If we are making a web application, we use the mobile-first approach to make the interface convenient to use from a mobile phone. Further, we can animate the shots to attract attention and illustrate how the interface works.

4. Showing the finished shot to a reviewer

The reviewer looks at the shot based on design principles and quality criteria, not on their tastes. We have a design quality control checklist in our design system and our reviewers use it in the process.

Quality criteria examples:

• The work should look completed. The style of work should correspond to the theme and mood stated in the task. The work should create a sense of integrity, and the contents of the shot should be designed in the same style. The work should maintain a balance between the real interface and an attractive shot.
• The text should be readable and contrasting, and its size should be at least 12px. The headings of different levels should differ markedly from each other and the main text.
• The colors should be used correctly, without creating color noise. The colors in the palette should complement each other, observing the principles of contrast.
• Blocks with the same meaning should be separated by equal distances, for example, card__card__card. Blocks that differ in meaning should be separated by different indents: title__text___button.
• Content blocks should be based on real interfaces and be interconnected, following the principles of logic.

5. Working on the texts

A copywriter checks that the texts are written correctly, look harmonious, and correspond to our tone of voice. Next, we describe what is depicted on each screen, what colors we used and why, and what are the unique features of this shot — this is necessary to explain our design decisions. The description is also important so that visually impaired people can better understand what is depicted in the shot using the voice description function in smartphones.

6. Posting 🎉

When everything's ready, the manager publishes the shot on Dribbble.

This process not only helps us to improve the skills of designers but also speeds up work on real projects of our clients. Since we post shots almost every day, designers are constantly practicing and it becomes easier for them to solve complex tasks on projects and the whole process takes less time.

This process not only helps us to improve the skills of designers but also speeds up work on real projects of our clients. Since we post shots almost every day, designers are constantly practicing and it becomes easier for them to solve complex tasks on projects and the whole process takes less time.

The main difference in the process is which references we take. When we create shots, our manager sets a specific task with style and functionality references, while when we work on projects, our manager asks customers to share references and anti-references in order to better understand their preferences.

A client can also give us a Dribbble shot as a reference, and we will create a concept based on the shot. For example, on the Chains Card project, our customer requested a design based on one of our shots:

The shot shows an investment app interface — users can see stocks in the portfolio and information about expenses and cash back. Chains Card is a banking application, but it's not related to investments, the main feature here is that users can link their bank card to a crypto wallet and use this app to pay anywhere.

The shot and the application are similar in theme — both are banking apps. There are many points that overlap, like currencies, cards, registration, etc. At some points they are similar in functionality, but since the core idea of the application is different, respectively, and the logic is different. In the concept, we used the style of the shot and added a gradient, a dark theme, and a similar color scheme.

Here you can see how the home screen differs between the shot and the finished project:

However, since we create shots that are close to real applications, our shots can be not only references but also working concepts for future projects. We would only need to adjust them to the platform-specific guidelines.

How our design department operates

As we've already mentioned, we have a team of designers, copywriters, and managers who engage in the creation of every shot to ensure the high quality of the work.

The whole team grows its expertise — our designers regularly monitor trends and updates of design sites and train their 'design eye' to make concepts better. We have a lot of internal events inside the department, like workshops, design trainings, and meetups. All these activities are aimed at improving the services we deliver to entrepreneurs.

Because we have a well-established process, any of our designers can continue working on any concept. Plus, since our team clearly knows the process, every designer can make concepts quickly and efficiently, as they are trained on shots. Our designers know the guidelines of iOS and Android perfectly, and we trust them with the process. Clearly structured work also saves our clients time and gives the fastest possible result on projects.

Thanks to our process, we also have a pool of ready-made concepts with different topics, styles, and types of applications. For example, if you want to get a messaging app with chats, we can show you some of our related shots and you can choose what you like best and use it as a reference or as a concept for your project.

To conclude

Using Dribbble, we show entrepreneurs what a design project can really look like and help them find inspiration. The path from Dribbble shots to functioning interfaces is not just a dream but an achievable reality with the right approach. At Ronas It, we bridge the gap between eye-catching shots and practical UI/UX designs. We tune into the latest trends and tailor each concept to ensure it meets the high standards of design and functionality without compromising on aesthetics. Let us be your guide through the transformation of inspiration into application — contact us by filling out the form below.