Analyze My UI is a series where I breakdown the UI design of web apps and mobile apps. We’ll talk about the design and usability priorities, the hierarchy, the colors, and just about anything else that impacts the way that users interact with the application.
UI design is a balance of priorities and it can be difficult to find the proper balance for your application or product. Hopefully, this series helps you define the various priorities and make better decisions in your designs.
Today we’ll be going over Behance.net. The popular portfolio website does some interesting things to put it’s content in the spotlight and not distract from the primary purpose of the application. Let’s jump in.
Cards
Behance uses several different card layouts throughout their site. On the Home page, they already have two different layouts: a categorical filter and their flagship, “project” card.
Home Page
They also have a slightly different project card for the Search and Filter page. The differences make sense - just keep reading!
Search & Filter page
But in both the project cards, you can quickly see what Behance thinks is the most important data for you to see:
- The Design
- Creators name
- The Design's Name (only on the filter page)
- Number of likes
- Number of views
I think these make sense for a portfolio platform. Since you can’t do much on Behance but look at designs and follow designers, the emphasis on views, likes, and users make sense to me. They try to drive engagement through the few interactions they have on each post.
Let's walk through each one of the above a bit more:
1. Design
The backbone of the platform and the most important content. The rest of the data could be removed and the platform would still have some level of usefulness and relevance.
You might have missed the gravity of that statement. If Behance took away everything on their home page except the images of uploaded designs, their platform would still be useful! All the other stuff on the site is fluff...helpful fluff. But still fluff. It’s a lesson in radical prioritization as Behance has clearly made everything about the projects it hosts. Even it’s branding gives clues to this, but we’ll get to that in a sec.
2. Creators Name
Since it's a social platform, Behance has the creator's name on the card so that people can build a reputation and quickly navigate to other designers’ account pages. This shows us that Behance thinks that it's users, their reputation, and the ability for designers to follow each other is very important. They want people to connect person-to-person not just person-to-design.
Behance is a portfolio site which means there’s not much engagement to be had between users. But they try to drive engagement through the Follow, Save and Appreciate buttons within the design page. It’s completely normal for us to see actions like this nowadays, but I point it out to make you think about where you can add helpful and valuable, micro-engagements in your designs.
3. Design's Name
This one is funky. On the home page, the card doesn’t display the design name. But on the Search and Filter page, it does. What do you think that means?
I don’t work for Behance, so I can’t tell you why they made that decision, but I can tell you what I think. The home page and the Search and Filter page are about two different purposes. The home page is 100% presentation and ease of access. It’s heavily curated for showing the “best of” categories! Sounds like it’s the perfect place to quickly and easily get inspiration and see fellow designers work.
The Search and Filter page is for...well, searching for projects. The curation gives way to a giant search bar and secondary filters. This page needs more data on the card because here users are looking for in-depth content that matches a specific search query.
You might also notice the priority and ease of access to the text search versus secondary filters like "Tools" and "Creative Fields". This, in combination with the “more data” paradigm on the search and filter page, tells us that Behance thinks that users will find it easier to use the text search over other filtering tools.
4. Number of Likes
Similar to Instagram, displaying likes is a way to gamify or psychologize engagement. Based on how users interact with the platform they might want to follow designers with a huge amount of likes or they may search for lesser-known designers and give them likes. Regardless, it's a bit of a measuring stick that Behance thinks it important to drive engagement - probably since it's the only way to interact with a design outside of being able to "follow" another designer.
5. Number of Views
Views are the foundation of most things on the web. If you are particularly cruel to yourself you might compare views to likes and base your worth on the corresponding percentage. Don’t do that - you’re amazing as you are :)
Views are another way of driving engagement on content that is generally non-interactable as well.
Overall Priorities
The cards on Behance do two things. They present the most important data to the users and they show just enough data to entice engagement and curiosity.
I’d like to point out there at there is not “Show More” or “More Details” on the cards. Behance has shown it’s commitment to Hick’s Law by restricting the amount of data you see on the cards. Generally speaking, when in doubt, show less data.
Branding
Behance’s branding is very minimal. Being part of Adobe, even the Create Account and Login pages have creative designs but have very small amounts of standalone branding. This is not on accident, I’m sure.
Everything you do as a designer should have a purpose. Every color, placement, line, and character should have a meaning you can define.
Behance knows that it will be very difficult to have a strongly colored or designed brand while facilitating the curation of other designers’ work. Behance wants it’s branding to fall into the background and be invisible. You can tell this first and foremost by their use of color.
Black
Or Blackish….technically it’s #191919 which is few steps above black.
Their primary use of black in the header and solid white as the body background tells us that they don’t want users to be distracted by their branding. They once again focus their users wholeheartedly on their content.
The only other color I’ve seen them use is a primary-blue which contrasts nicely with the black and has enough contrast to stand out from white.
Branding and You
Branding and color are a hot topic. Every business wants an amazing brand that sets them apart. Something that isn’t readily thought of by most brands is how their brand interacts with their business. If you are a solo freelancer and your brand is your name, then a flashy and highly stylized brand & color guide would great! But for a company like Behance, that wouldn’t work at all.
Behance is a platform that helps designers through curation and promotion. It would be conflicting if they tried to step into center stage and took the focus off of their content.
Finally...
Behance is a pretty simple website. Or at least their superb use of design and navigation make it feel that way. Over and over again Behance has made design decisions that make its visitors focus on the content they host - at the very cost of Behance’s own identity. Imagine trying to explain that your non-designer boss, “I want to remove most of our branding and make our color palette pretty lame, so visitors don’t get distracted by it”.
But designing UIs is all about priorities. What your business deems the most important will be pushed up the hierarchy whether it’s your brand, your content, or your products.
If you’ve enjoyed this post and want to read more, let me know what website or app you’d like me to analyze next!
lukefrogger
https://lukefrauhiger.com
Top comments (0)