In our Devportal Design Guide series, you will read about common design patterns, get an insight into our project work related experiences, and learn how we tackle the design of a developer portal user interface.

Why did we start researching design on devportals?

We found that dedicated research can help us to write more objectively about design patterns, and decide what the common practices are —based on statistics.

We examined 70+ developer portals from different industry fields, but also pulled in DevPortal Awards 2018 nominees and winners. We gathered information about various design aspects, like layout, responsiveness, color schemes, typography and the usage of graphical elements.

We will stay away from the most basic design principles but focus on devportal specific advice instead, and give related examples.

Part 3: Overall design style

FAQ

  • Is there an actual design trend for developer portals?
  • Should the developer portal have the same look as the corporate site?
  • Should the developer portal use the same branding as the corporate site?
  • Should the developer portal look like an eye-catchy “marketing site” or like a clean, technical documentation base?
  • How can you avoid that the developer portal looks like a site with only dry documentation? How can you improve this visually?

Experience and advice

Actual design trend

Similarly to the way trends change year by year in web design, the preferred visual styles of developer portals also change. Nowadays, it is really popular to use illustrations in certain page sections. These colorful, aesthetic illustrations can spice up the, dry, technical content and pages and give a nice first impression. These illustrations appear on several pages, consistently with the same graphical style and color scheme but in different amounts.



Illustrations on the DNB Developer portal.



Illustrations on the Twilio site.



Illustrations on the Mapbox developer portal.



Brand reflecting illustrations on the Android Developers portal.



You can read more about illustrations in part 4: Supporting graphical elements.

Brand consistency

It is possible and suggested to play with appealing images and illustrations, but you have to keep in mind that a developer portal —just like any other product of a company— should reflect the brand. Not just the colors and typography but the imagery should follow the brand rules as well. To ensure this designers always start with reading the brand book carefully and adjust the visuals to that. Besides being compliant to the brand, the design should also be consistent through the pages, This means the same graphical style, icon style, brand colors, box styles, etc. on all subpages.



Brand consistency on Nordea’s corporate site and developer portal. The dominant color, brand font is the same. The devportal reflects the brand.



Having said these, the developer portal can be just different enough from the company’s corporate site to make sure users realize that they are not on the corporate site. This difference can be reached with a logo version, just like in case of divisions or business units. It is a common practice to use the main brand’s logo with a text next to it saying: “Developer Portal” , “API store” , “Developer Center”, or “Documentation”. It comes in handy if the developer portal’s header or footer contains a link or button which leads back to the corporate site.



Header and logo versions of the Microsoft site site and the Microsoft Windows Dev Center. On the developer portal the “Windows Dev Center” text leads visitors to the home page of the devportal and the Microsoft logo links back to the corporate Microsoft site.



Logo variants on the Microsoft sites. The Dev Centers follow the logo pattern of the other Microsoft sites.



The distinction between the corporate site and the devportal can be reached with different colors as well. For example, it is a popular solution to use one of the primary or secondary brand colors -—but not the main primary color— on the developer portal as a dominant color. It is also common to choose different imagery styles on the devportal, for example, use photography on the corporate site and illustrations on the devportal. Just like on the Nordea sample above.



Deutsche Bank uses a lighter, friendlier composition of the color palette on its corporate site and a darker one on the developer portal. The dark background color is a good choice here as it highlights code sections and improves their readability. The photos are also replaced by illustrations.



The layout and design of the whole developer portal should focus on functionality. It’s not a commercial, marketing page, it has a different goal and target audience. A developer portal contains and organizes a huge amount of information, code and documentation. For a developer portal clean, transparent, functional design can provide the best user experience.

Balancing between aesthetics, content and functionality

In the case of developer portals, the main goal is to find the balance between visuals and content, and focus on functionality and usability. From outside the portal should be brand-consistent and appealing, while from inside it needs to be easily understandable and usable. We can reach this by changing the amount of visuals as we dive deeper into the IA.

We suggest keeping the design clean, simple and minimalistic on inner, technical pages (e.g. documentation, Swagger UI). However, visual elements on landing or API summary pages - marketing focused descriptional pages with various sections, CTAs, cards, etc. - can give users a nice first impression. You can improve these visually by using colorful, brand-consistent graphics, images, illustrations, backgrounds, even videos or gif animations (e.g. tutorials, how-to parts). You can also play with the size and arrangement of the sections. On these engaging pages don’t hesitate to use bigger hero sections with pretty pictures, prominent CTA sections. The main goal here is to onboard users and direct them.

On the more technical subpages a smaller header and clean style is more advantageous. You can still play with white space, element grouping and typography in order to show hierarchy. You can use graphical elements here as well, but you have to keep in mind that these should support functionality and content. The documentation, code samples and textual content should be given the greatest focus so don’t overwhelm these pages with graphics.



Advised ratio of graphics, content and functionality in case of devportals.



Examples from TomTom and Twilio devportals that reflect this ratio:



A product page (API summary page) and an API technical documentation page design on Tomtom. Note the huge difference in the amount of used visuals and technical parts.



A product page (summary page), a products overview (categorized API catalog) and an API technical documentation page on Twilio. As we dive deeper into the site’s information architecture (from the left to the right screenshot) they use less graphics and more technical sections.



We hope this article provided you with ideas about the visual style and mood of developer portals and gave you useful examples about the balanced amount of visuals on various pages, such as marketing, documentation, and technical pages.



What is next?

In our next article we’ll look into what viewpoints you can consider when you use basic graphical elements on developer portals, such as icons, colors, images, and fonts. How can these elements make a devportal more friendly, aesthetic and organized? What is important to keep in mind, how can the elements support functionality?



Pronovix Logo

Are you building a developer portal? Interested in a shortcut? As a devportal specialist, Pronovix has developed 30+ page templates specifically designed for devportals. Talk with us to learn how our MVP package can accelerate and simplify your devportal launch.

Contact us >



About the author

Gyöngy Gora

Senior Designer

Gyöngy is a Senior Designer. She enjoys working with UX researchers, developers and content writers to find the best visual interpretation of an idea. Although she is passionate about design, she likes to maintain balance between design, functionality and content.

She graduated as a computer program designer and specialized in image processing. This IT background helps her establish an efficient workflow between the design and development phases of projects.

Before entering the company she has worked as a webdesigner and mobile application designer, so she has been working as a designer altogether for 10 years now.