What can you learn from dribbble as a UI/UX designer? I analysed the Dribbble blog starting from Jan 2021 to find out the answer.

Dribbble is a premier design community for designers and artists. It features top quality work from various talented designers across the world.

I visit dribbble frequently to learn and find inspiration for my projects. The work displayed on dribbble never ceases to amaze me and inspires me to push my creative boundaries everytime.

Dribbble has a blog too. It’s called ‘Courtside’.

I read that with a keen interest as it contains well thought out and practical advice from the designers and professionals of the design field. Who better to learn design from than the practitioners of the craft?

But I don’t have a photographic memory and I tend to forget things often. This presented a problem.

To overcome this problem, I decided to create a repository of dribbble advice.

The method

I just went back and analysed posts from dribbble blog for UI/UX design articles starting from Jan 1, 2021.

The data

There were a total of 67 articles (covering various aspects of design) at the time of writing this article. I included the articles from Jan 1, 2021 till 28th June, 2021.

Now, remember that I focused on just the UI/UX design field in this article because otherwise the article would become too broad.

I would keep updating this article to include posts from future articles as well.

Finally, here are top things you can learn from dribbble as a UI/UX designer:

7 Type of projects that you need to include in your UI/UX design portfolio to land new clients

An e-commerce website: As the trend of online shopping continues to rise, every company is looking to capture the share of the pie online. This presents a huge opportunity to you as UI/UX designer to help create ecommerce experiences for your future clients. You can show to your clients that you can create e-commerce websites that offer a seamless experience to their users thus increasing the number of conversions to bring in more revenue for them.

SaaS website: Every company is selling some type of software these days. So a Software as a Service website will always be in demand. Creating a high converting SaaS website which encourages sign ups is a skill and If you can master it you would never be out of work.

Artist/personality website: These websites are focused on a specific personality or an artist. You can design a memorable experience for the fans of a particular celebrity/artist and help them promote their brand.

Your own personal portfolio website: This is a no brainer. You must have your own website to showcase your design chops. Your future client will google you before they make a decision to hire you. So ensure that your website offers great user experience and features your best work in a creative way.

A blogging website: Content marketing has become an essential component of online marketing. A Blog is the fundamental building block of a content marketing engine. Thus If you can show your clients that you can create high converting blogging websites with sign ups and opt-ins you would be at an advantage.

A website for a specific product: You can use this to show clients that you know how to present a single product in the best possible way to the customers online to increase purchases. This will show your ability to use proper images and content flow to guide the user along a journey to purchase that product.

Digital agency/consultancy website: This will help clients to know your ability to demonstrate their work online to convince customers to work with them.

5 tips on how to design visually beautiful interfaces

Master negative space: Giving more air to your designs will help you to create a cleaner, more professional and well balanced layout.

Treat everything like a box: A web page is made up of boxes stitched together. So you need to think of every element in your user interface as a boxed element. This will help in consistent spacing between those elements and thus give your designs that professional look.

Go with your gut: You need to trust yourself enough to make creative and bold design decisions sometimes. That is how your personality comes out in your designs and makes them unique. Never ignore your gut.

Use HSB: While designing UIs try using HSB mode instead of RGB. By using HSB, you will stay within a particular hue and just alter brightness or saturation to attain a beautiful, professional and a coherent color scheme for your project.

Copywriting is more important than you think: Words written on a page are important so don’t ignore copywriting in your designs. Learn the basics of copywriting to understand how to write basic headlines etc. This will help you become a more valuable designer.

6 steps on how to become a self‑taught UI/UX designer in 2021

Learn the fundamentals of UX design: Learning the basics of UX design will help you create a product that users love to use and experience. You would know why users take certain actions like adding to the cart or abandoning it and then use that knowledge to offer better solutions.

Develop an eye for good design: You develop this skill by seeing good designs and then analysing as to what makes them good. Study a particular site that you like and see what makes you like it. How is the typography laid out? What is the color scheme? What is the spacing between different elements? Eventually you would begin to see patterns and train your brain to apply the same in your work too.

Invest in the right design software: There is no one tool for UI/UX design. However there are few of them which are used by most professionals in the industry. These are FIgma, Sketch and Adobe XD.

Start building a portfolio of work: Theory alone wouldn’t work without practical experience. You need to practice and create a body of work which you can show to your clients or employer. Start creating sample projects on your own and redesign existing websites. This will challenge your creativity and help you think like a UI/UX designer.

Ask for feedback (and learn from it): In the beginning you wouldn’t be able to analyse your own work properly. It would help you greatly if you are able to find an experienced designer and ask for feedback on your design work. Ask them to become your mentor. Lot of professionals are willing to offer help to the beginners. A mentor will certainly be able to guide you and offer his experience to help you become a great designer.

Get real-world work experience: After you have created your portfolio you can start applying for entry level UI/UX design jobs. Even if you don’t get hired, the soft skills that you will be able to practice like communication and explaining the reasons behind your design decisions will help you immensely.

Key principles for choosing colors for your mobile apps

Color association: Different colors have different meanings and emotions attached to them. Always keep in mind these widely known associations to channel emotions of your users while using your app. For e.g. “Red is associated with speed, energy, and urgency. Orange signals fun and action, while yellow is optimistic and attention-grabber. Black color indicates a high-tech, sleek design, while pink is considered feminine. Green, unsurprisingly, signifies wealth.” But always remember that color associations vary across different cultures so know your target audience while using these associations in your designs.

Check your competition: Check what colors your competitors are using in their apps on the playstore. This will help you use color combinations which are unique and differentiate you from the herd.

7 best practices for a smooth design handoff with developers

Prevent issues early: This can be done by involving developers early in the design stage. The prototypes can be shown to the developers and they can point out the issues if any with the design from the development standpoint. That way any problems which could act as roadblock further down the road are avoided early on.

Use a design system: Design systems help create consistency across different products of a brand. It helps developers create patterns of code which they can reuse across different platforms. Design systems include UI components, forms and icons, code snippets, design toolkits, and other resources that can be used across the organization.

Reduce knowledge gaps: Both designers and developers should have a basic idea about various principles and conventions of each other’s fields. This helps them to communicate clearly with each other and increases efficiency. For e.g. a developer might refer to rounded corners as border radius whereas a designer might not be familiar with that term.

Streamline communication: Proper channels of communication must be established early on between designers and developers. For example, slack channels can be created for discussions and feedback. Also it can be made sure that the same software is being used by designers and developers to view the design. Within that same software chat or comment features can be used for feedback.

Design for edge cases and empty states: Edge cases occur at extreme sets of parameters. These deviate from normal user behavior. For example, error states. These extreme use cases of the product should be kept in mind and designs should be created for them. Do not ignore these cases. A user would face these cases sometimes and your UI must be prepared to deal with them when they arise. Empty states are screens when no data is populated yet by the user. For example, before creating their account on a dashboard, or before adding any items in the dropbox etc. These states are also an opportunity to communicate with the users. They should not be ignored and separate screens should be designed for them as well.

Clearly define user flows: Show developers how a page is connected to another and how a user would interact with them. This user flow will help avoid a lot of back and forth later on between designers and developers and also communicate functions of different elements in the design to developers .

Create a checklist of all necessary assets: All necessary assets required by the development team like, design files, user flows, interactive prototypes etc.must be provided to them and a checklist of these assets would help streamline this process.

4 tools to improve UX + increase conversions

Session recordings: With recordings you can actually see how your users are interacting with your website, what actions they take or buttons they click etc. This is vital information and can help uncover any bugs and roadblocks in conversions.

Surveys: Surveys can be of two types, Offline and online. Online site surveys can be added to various pages of the website to collect user feedback. They can also be added to the pages with high bounce rate to uncover the issues. Questions can be asked to users via these surveys to increase conversion, decrease bounce rates, test new products etc. .

Incoming feedback: Some companies offer incoming feedback widgets which can be placed directly on the website. Users can tell exactly which section they like or dislike and submit their feedback via suggestion box right on the page.

Heatmaps: Heatmaps are visual representations of user’s behavior on the page. There are 3 types of heatmaps, clickmaps (show where users click or tap), scrollmaps (show how far users scroll down the page) and movemaps (shows where users move their mouse on the page). All these types of heatmaps show which areas of the website are more popular and which are not and this information can be utilised to improve user experience.

8 skills you need in your design portfolio to get hired as UI/UX designer

User Research: This is an important part of creating any digital or physical product. You have to know who your users are, what are their needs and wants, etc. before you start designing. If you have proper understanding of your users and their problems only then will you be able to create a product which solves them. So you need to show in your portfolio the thinking behind your design decisions. Your design process is more important than the actual design because it shows that you can think like a designer.

Wireframing: This is one of the earliest stages of a product design process. Wireframes allow you to have a holistic view of a product. It clears out any potential problems down the road and allows for fast revision. Most of the user flow problems can be sorted out at this stage without the distraction of other details like, typography, color etc. Showing wireframes alongside the finished product will definitely grab the attention of the employer.

Prototyping: This is an advanced version of a wireframe. A prototype tilts more towards the finished product. It isn’t a finished product yet but it contains user interactions, animations etc. and shows the user flows.

Information Architecture: IA refers to the way the content is structured across the website. If the website is content heavy, IA becomes all the more important. Organising the content across the website is a challenge. You can show IA work on your portfolio by discussing various problems that you faced while organising the information on a project and how you overcame them.

Visual Design: The easiest skill to show amongst all the skills listed here. This can be shown by listing out beautiful UIs that you created for any project.But simply presenting the end design here won’t do you any good. Do mention all the design decisions that you took and why you took them through the design process to make that design.

UX Writing: UX writing is the practice of crafting UI copy that guides users within a product and helps them interact with it. For example, copy on the buttons, error messages, subheadings etc. You can highlight the UX copy in screenshots to show the employer that you have that skill too.

Interaction Design: Interaction design covers all the interactive parts of a digital product for example, buttons, icons, links etc. It is a part of UX design and the role of interaction designers in a smaller company is often played by the UX designer himself. You can learn more about it at Interaction design foundation (IDF).

Mobile Design: Majority of the online traffic today comes from handheld devices. So designing for mobile devices is a crucial skill for a designer these days. How your designs behave on a mobile device can be shown alongside your designs for wider screens. In fact, today most designers design using mobile first approach. As a designer you should be well versed with various constraints, smaller screens present. How your designs work well within these limits can be shown in your portfolio to display your skill.

Here is a list of the topics we covered above:

7 Type of projects that you need to include in your UI/UX design portfolio to land new clients

5 tips on how to design visually beautiful interfaces

6 steps on how to become a self‑taught UI/UX designer in 2021

Key principles for choosing colors for your mobile apps

7 best practices for a smooth design handoff with developers

4 tools to improve UX + increase conversions

8 skills you need in your design portfolio to get hired as UI/UX designer

If you are a UI/UX designer or want to enter this field then the above collection of advice from dribbble can really help you become a better designer.

This article would be updated regularly to include advice from the new articles on dribbble blog.

Till then keep designing!! 🙂

Thanks for reading this article! Please leave a 👏 like/comment below if you liked the article, it would mean the world to me😇.