Social Media Websites are designed to be addictive.

What makes them so?

Let’s look at some practices for UI design with specific examples from the top social media websites.

Let’s start with Instagram.

Now, we have to remember what the goal of these landing pages is. In this case, it’s to get someone to download and use the Instagram app.

This is a straightforward and minimal design and straightforward. On the left, we have a mockup of the app on an iPhone and Android device. What’s interesting about this is, this is a clever way to not exclude anyone depending on the device they use. So, it’s a subtle thing but very powerful.

It’s the same here with the icons that show download on the App Store and get it on Google Play. This helps show someone where they could download this app, and you can click on it and be directed to the download.

Even though Instagram is primarily a mobile app, you can also use it on a desktop. Here, it allows you to log in or create a new login account if you don’t already have one.

With these types of forms, you always want to have as little information as possible. The more forms there are to fill out, the more likely someone will exit out and not take any action. So I think Instagram does an excellent job of this. It’s just asking for either a phone number, username, or email and a password.

Alternatively, you could also log in with Facebook.

Another subtle thing about this landing page that I think is successful is that it’s not just a still image going back to these mockups.

It’s rotating between a couple of different images. It rotates through five different stills within the iPhone, so you can get an idea of what you can do with this app. You see the grid; you see individual photos with like engagement, you see that you can edit your photos directly within the app, and you can also see messages. This helps show the app’s depth while still having a minimal design with just one image.

It’s a very clever idea. Now let’s take a look at Facebook.

Immediately what strikes me about this landing page design is how on-brand it is. Everything from the logo, the typography, and the color choice screams Facebook.

Facebook is a lot more complicated than Instagram as it’s not just an app; it’s also a mobile and desktop app.

Compared to Instagram, there are a lot more forms here to fill out. We have the first name, last name, mobile number, email, password, birthday, and gender. This information is a basis for someone to create their profile.

If someone already has an account with Facebook, then they can just login here at the top. This isn’t my favorite design, but just because I don’t like the design doesn’t mean that it isn’t successful. As I mentioned, it’s very on-brand for Facebook.

Something else that I think is super helpful is this information here on the left where it says, “Connect with friends and the world around you on Facebook, see photos and updates, share what’s new, find more.”

This is super helpful to give someone an idea in three bullet points of what Facebook is all about. Your homepage real estate is significant. So everything you include has to have a purpose. If it doesn’t tell someone more about the brand, what the product is, or bring them closer to taking action like signing up, then it probably doesn’t belong there.

The Twitter homepage.

This is a favorite landing page design of mine. I think the split page layout is super successful.

I love how you get a glimpse into the Twitter brand on the left because we’re cropping into the logo. You can see that Twitter bird. Like the Facebook website, we’re getting those three bullet points to tell us more about what Twitter is and what you can do.

“Follow your interests, hear what people are talking about, join the conversation.”

I also appreciate how they include these little icons to the left of the talking points. I think that lends a little bit to the Twitter brand.

One of the big differences between Twitter and Facebook is brand tone and voice.

Twitter has a fun conversational tone to its design, whereas Facebook is much more subdued, which probably has a lot to do with its target audience.

Most people are on Facebook nowadays, and the age ranges from young to old. So they need to cater to a lot of different audiences. Whereas Twitter, I think, is still a little bit more of a younger audience.

Then on the right of the landing page design, we have login information at the top if someone already has an account. But then we have this super simple design. A great headline, “See what’s happening in the world right now.”

And two calls to action, sign up or log in. Again, part of Twitter’s brand is to be conversational, which they’re very successful at. If you look at all of the copy on this page, from the three bullet points on the left to that main headline, it’s all very intentional. Even the text that says, “Join Twitter today” and the use of punctuation, everything is intentional, very on-brand for Twitter, but also great for conversion.

So I think we can learn a lot from Twitter for best UI design practices.

I also love the two-toned monochromatic color palette. Of course, this has to do with the Twitter brand, but it’s something to consider when creating your designs. Think about how you want to use color intentionally.

Pinterest.

What I immediately love about the Pinterest website is how it circulates through four different screens. This is perfect because people use Pinterest for so many reasons.

Some people use it to find healthy recipes that they want to make for dinner; some look for ways to improve their house and maybe want some interior design ideas. There are so many reasons why someone will search on Pinterest and not just for one. So they might use it for many reasons.

You could argue that Pinterest isn’t a social media site. And that’s true because it has a search element to it which Instagram, Facebook, and well, Twitter has a little bit of that search capability.

But Facebook and Instagram are not driven by search. Whereas people go to Pinterest because they’re looking for something specific, they want ideas, inspiration, and pin things on their board. The navigation bar is super simple. In the top left, we have the Pinterest logo, and then on the right, we have about, business, blog. And then the two buttons for login and sign up.

We noticed this also on Twitter; one button would be one color while the other is more subdued. Here for Pinterest, the login button is highlighted in red as the most important one. Whereas Twitter decided to highlight the sign-up button. This is a subtle difference.

Twitter is highlighting new sign-ups while Pinterest is highlighting returning users. Depending on your website’s goals, this may dictate small design decisions like this, but it’s always a good idea to think about; what does your business care more about right now. Sign-ups or returning users?

You’ll notice there’s a white gradation at the bottom of the screen as well as a bouncing arrow icon. This catches the eye and prompts the user to click on the button to see more.

We scroll through some more pins, and then we’re met with this sign-up page. Then, forms for email, password, age, and options to log in with either Facebook or Google. This is a super successful move on Pinterest’s part because it’s two web pages in one. At the top, we were met with getting ideas for recipes or your next outfit, so we got an idea of what Pinterest was about. Then we click or scroll down and are met with a sign-up option.

Remember that Facebook and Instagram prompted you to sign up immediately. Pinterest takes on a more subtle action, introduces you to the brand, and then asks you to sign up.

Yet another reason why I think Pinterest’s website is the most successful.

Recap

Some of the best design elements of the Instagram landing page are the rotating screenshots on the iPhone mockup, the fact that it shows both an iOS and Android device, and the minimal sign-up form.

A quick recap on design tips from the Facebook landing page design: The three bullet points with the icons to the left telling you exactly what Facebook is. It’s very on-brand. The split login and sign-up is a successful design element as it’s effortless for someone to see where they could log in or sign up for the first time.

Design tips from the Twitter landing page are a good use of brand personality, great copywriting, and the split design where on the left, it’s very on-brand and on the right, a minimal sign-up form design.

Design tips from the Pinterest landing page are the rotating screens for all the different ways that someone might be searching on Pinterest, having the two-in-one webpage where the login is below the fold. Having a clear mission, everything from the design and copywriting, you understand what the Pinterest brand is and what you’ll get when you sign up.

I’d love to know your thoughts.