The Web guideline changes

The new edition of the Web guideline reflects the changes that happened in the brand identity and therefore in the brand communications. It also provides a more pragmatic and detailed guidance on the area of typography.

Happening end of 2018, the brand identity refresh saw the launch of a minimized version of the Orange historical logo: The Small logo. On digital screens, it happens very often that the Orange logo is reduced in size. It is particularly the case on mobile, when the logo appears in a website header or in a browser’s tab favicon. It occurs also when the logo is used as a profile picture on social networks such as Facebook, Instagram or Twitter. The Small logo is intended to cover these use cases where the Orange word can’t be read because the Master logo is being reduced significantly. The Small log is made of an orange square in which the Orange word is replaced by a thick white rectangle. The new version of the web guidelines presents detailed guidance on how to use and implement correctly both Master logo  and Small logo.

The brand identity refresh also saw the drop of the visual architecture made of frames and pop outs. In 2018, a test phase showed that there was not a significant difference in the attribution to Orange between campaigns displaying a frame with its accompanying pop out and a campaign that would not. The overall return on experience raised the necessity to simplify the company’s communications. The objective then was to create a much simpler design for brand communications, rooted in the historical elements of the Orange identity: flat core colors, typography and meaningful imagery. As a replacement to the pop out, the rounded sticker has been introduced to keep on carrying the responding part of our promise: ‘Listening and responding”. Making sure that the new design would be easier to implement on digital than the previous one (with frames and pop outs), was a key driver in the thinking. On websites, this affects the promotional banners that usually sit at the top of the page below the header. The design approach was to create flexible layouts in order to take into account the different types of products and services that can be promoted, but also to allow for different rhythms within the same web page. The new guideline embeds the do’s and dont’s about the implementation of this essential change.

The new edition of the web guideline also carries some important changes regarding the use of typography. At Orange, the typology of websites in presence is broad. A website can be about a punctual event, a single product or service, an entire organization, an Eshop or an Ecare space, etc. Typography plays an important role in establishing a visual hierarchy between the different levels of information. And it becomes more crucial as the density and the granularity of information increases. This is why the recommendation around the maximum number of text styles evolves from three to five for a better coverage of heavy content use cases. In an effort to help designers rationalizing the use of typography across a website and use it according to device and context, the guideline also introduces recommended typography sets for mobile, tablet and desktops. The web guideline is released in conjunction with the Orange Web UI design kit for Sketch where the typography sets can be found as text styles to ease the design process.

Finally, the document goes deeper into specifying standard values for line spacing and letter spacing in web pages, because these elements are crucial for readability and are often underestimated.

The Web Guideline version 2.0 can be downloaded from here