Social Media Tools With Great Design
Design is the most crucial aspect of app development and its quality determines the success of an app. The two primary characteristics of great design are ease of use and experience.
Well-designed apps don’t make the user do any thinking. They are built to do all the work for them, and do it so smoothly that every task feels effortless.
Hundreds of apps are released on various app stores every day, but only a few would make a designer stop and take notes. Here are five social media tools that do so.
Sprout Social
Sprout Social comes with a host of features including a centralized social inbox, content discovery, content scheduling, social media analytics and task management. Here are a few screenshots of the tool.
Take Note:
- Type Design – If you look closely, you’ll see that the ‘r’ in ‘sprout’ is designed to look like a tender leaf. Together with the use of the color green, the type design used in the name coherently represents what the tool delivers.
- Layout – Sprout Social uses the much touted Holy Grail layout, which is a three column layout with fixed-width left sidebar for navigation, another right side bar for sub-menus and a fluid center column for the main content. Thanks to sufficient padding between the center column and right column the pages on Sprout are aesthetically pleasing.
- Navigation – The use of a global navigation bar makes the tool extremely easy to use. It sits perfectly well in the Holy Grail layout, with all the primary tabs above the fold. When you click on one tab, the menu within it appears in the left column. And for every item on the left-column, a sub-menu appears in the right column.
Sendible
Along with content discovery and analytics Sendible also offers a central inbox and task management features, allowing managers and team members to co-ordinate better. Look at the three screenshots of the tool below.
Take Note:
- Layout – Similar to Buffer (discussed later in this post), in terms of the basic page layout, Sendible takes it one level up with the use of visible vertical grids. As you can see in the second and third screenshots above, these grids are used on both pages where multiple sections of content need to be displayed on a single page.
- Transparency – The use of transparency is an elegant way of naturally bringing to focus a pop up window within the main window. It is a preferred technique among designers since it can also create an impression of space or depth depending on how it’s used.
- Navigation – Another design element on Sendible that deserves appreciation is the use of a global navigation bar. Considering that the tool does offer several features, global navigation helps users switch between them easily without having to go back to the previous page/ main page.
DrumUp
DrumUp is a free social media management tool that lets users find, schedule and edit curated content and also allows custom content to be added. It uses advanced NLP to find relevant content from the web based on the keywords or themes set by the user.
Take Note:
- Layout – DrumUp does the opposite of Sendible with neat, visible horizontal grids that are equally functional. It also uses the “F” pattern like both Buffer and Sendible. In terms of the grids, it betters Sendible with just titles and links on display and action buttons at the bottom of each grid. Considering that the reading habit of users is compatible with the Infinite Scroll, the minimalist horizontal grids on the Upcoming Posts page (see third screenshot) works better than a similar page on Sendible that also shows excerpts of the article within each grid. Unlike Sendible, the page on DrumUp doesn’t appear stuffed or heavy.
- White space – In contrast to Sendible, DrumUp uses a good amount of white space on all its pages. Jan Tschihold wrote in 1930, and it’s still relevant today – “White space is to be regarded as an active element not a passive background”. White space allows for easy readability while adding a touch of sophistication to the design.
- Tabs and Buttons – DrumUp uses simple buttons that combine text and graphic elements, so you don’t have to hover on a button to figure out what it does. The tabs are also well placed allowing the user to shift between them with ease.
Crowdbooster
Crowdbooster offers analytics and insight to social media managers working with Twitter and Facebook. Its features also include team collaboration and content scheduling. It’s useful in monitoring and enhancing engagement level of Twitter and Facebook campaigns.
Take Note:
- Color Scheme – In Color Theory it is said that orange stimulates mental activity. Considering that Crowdbooster is primarily a tool for analytics, the designers here seem to have made a brilliant choice of color. And the color green is also an apt choice for the action buttons. The neutral white background is particularly helpful when users have to be looking at colorful graphs and reports.
- Layout – The use of visibly well-defined text boxes boosts Crowdbooster’s usability, particularly in its display of charts and insights. It makes the reports easier to understand, while neatly presenting important information at a glance.
- Font – Variation in font style and font color and the use of text highlight (see screenshot 3) enhance readability, drawing the user attention to the important pieces of information on the page.
Buffer
Buffer is a social media management tool that lets users discover, schedule and share content on their social profiles. It also offers analytics to help social media managers track and measure social activity. Study the three screenshots below:
Take Note:
- Color Scheme – The dominant colors on Buffer are black, white and blue. This works perfectly well for the screen as it sticks to the three-color rule for web pages, In this case, white is the primary color (the one in which most part of the screen appears). Black is the secondary color (the one that is used to “back up” the primary color, in this case the font color). And Blue is the Highlight Color (the one that is use to highlight certain parts of the webpage, here the buttons). Also note that the side menu appears in a lighter shade of blue creating more harmony rather than contrast.
- Layout – Buffer boasts a clean layout, with a standard menu on the side and tabs spread horizontally on the top. There’s absolutely no clutter making it easy on the eyes. While you don’t have to literally calculate, Buffer’s layout appears to be quite close to Mark Boulton Divine Proportion, with the content block being sufficiently wider than the sidebar block.
- Buttons – Buttons are beautiful because they reduce every action down to a click. As long as it is feasible, apps should use buttons wherever possible, like Buffer does. Take special note of the second screenshot which shows the calendar to schedule posts on the app. Instead of the cumbersome little icon that is used as standard for calendars, Buffer uses individual buttons for each day of the week along with individual fields for time input.
From comparing the tools discussed, it can be concluded that layout, navigation and color scheme are three dominant aspects that determine the quality of design. To say that the tools discussed in this post have the ‘best’ design would be both inaccurate and unfair. This is no comprehensive list and the objective was not to identify the best, but to only consider what makes these tools work as well as they do. If you’ve used a tool that deserves a mention for its brilliance in design, leave a comment below.
