Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Visual Style Guide This guide is for use on oﬃcial Scribd.com sites. Do not use

Visual Style Guide This guide is for use on oﬃcial Scribd.com sites. Do not use this for businesses, local groups and sites, which should have their own brand and identity. Questions & comments: design@scribd.c0m The purpose of this document is to provide Scribd or associates with the design tools necessary to maintain the Scribd brand and any content online or offline associated with Scribd. As new content types are added or content is updated, thoughtful application of the details described here will help maintain a consistent look and feel for Scribd. GUIDE Brand encompasses the values, culture, mission, personality, and image of Scribd; as well as the associations of our users, clients, employees, and their experience when interacting with Scribd products or services. Brand expression (such as design elements, ui, identity, tone), and brand experience (the customerʼs experiences when using our product) imprint the brand in the userʼs mind. People walk away with an emotional sense of what Scribd is. As the content evolves, so does the Scribd brand. The Scribd mission is to create an experience that is a strong reflection of the brand (such as the culture, mission, and personality), and to effectively win over more potential users by ensuring that every point of contact between the user/visitor and Scribd reinforces Scribds brand. BRAND Scribd design principles Design should be unobtrusive. Connect our users with compelling content fast and easy by creating an experience that does not distract from the content. Try to avoid the overuse of graphics or visuals that make it difficult for a user to parse the information we want them to digest. User focus Every decision in the design process should be done with the userʼs wants and what we believe a user needs in mind. We can do this by engaging new users and creating a compelling experience for existing users. It is the voice of the user and evolution of a design through testing that makes our design better and beneficial for our users. Be fast Time is valued to our users and the folks developing the site. Letʼs ensure our design is mindful of the content and platforms. We should make sacrifices such as light weight graphics with less visual noise making it harder for users to access content. Prioritize the information Prioritize and bring the most useful information to the visible space while narrowing down to the essentials that make the experience and product flow all the more seamless. Prioritize the component or feature that is best suited for the user or give them the ability to customize. The more itʼs used, the better it is. The product itself cannot exist or thrive without an expanding active user base. Letʼs ensure our users are given the tools and means necessary to create and manage content as easily as possible. Letʼs be vocal and passionate about the function of our design and ensure we are understanding the pulse of our users. Grammar schooled We should try to enhance the experience while sticking to what makes the written word powerful. Structure. Letʼs try to incorporate traditional grammatical values into our design such as punctuation, justification etc. This is especially key in our marketing collateral but can also be translated as a design element in our site design as well. Be human Design is human and so is Scribd. Be human in tone and conversational messaging. Be human in design and technology by responding to the direct needs of our users feedback and queries. Unexpected elements and humor such as easter eggs or conversational messaging will add to the human element of Scribd. Content is precious to our users Whether it be a college thesis, 16th century scroll or a 5th grade poetry project. Our content is precious to our users so letʼs take care of it by providing a framework that allows them to feel safe, secure and most of all important. One example is designing and using assets, fonts and graphics that enhance our users content and not drown it out. Evolve With the ever changing trends of web and mobile, good design doesnʼt have to last forever but it should be built to evolve with the addition of new content types and messaging. We should be able to make design and visual sacrifices for a better overall site experience. DESIGN PRINCIPLES The Scribd wordmark is a key building block of the visual identity, the primary visual element that identiﬁes Scribd. The logo was derived from our orginal wordmark. The new variant is a solid color black or white with no additional secondary color elements. This allows the logo to be crisp and clear on various backgrounds as well as allowing the content to have visual prominence. The Scribd wordmark should never be embellished, outlined, or altered in any way. Always use an approved electronic version. It is important to keep corporate marks clear of any other graphic elements. To regulate this, an exclusion zone has been established around the wordmark. This exclusion zone indicates the closest any other graphic element or message can be positioned in relation to the mark. Usage examples are on the following page. LOGO The favicon! Yay! The favicon is designed to be simple and fun. It is a stylized version of the “S” in the Scribd logo that is meant to be somewhat abstract. The contrasting colors are intentional for it to stay visible at smaller sizes as well as several background colors. FAVICON Colors are used to code sections, visual hierarcy, deﬁne content and direct users to important content as well as visually convey the brand identity. The colors were chosen as both evolutions from the previous Scribd pallette as well as through market analysis of our users and the sites they frequent. The colors are meant to feel modern, refined and unobtrusive while users are browsing or creating content on Scribd. Each color wheel represents a specific brand element that should always be associated with their associated colors. The primary colors are given larger portions of the wheel while complimentary colors are given the smaller portions. 1. #022F40 2. #146C88 3. #8EB8C6 4. #67828C 5. #355966 6. #259FDB 7. #4CB4E8 8. #99D3F0 9. #7FB340 10. #8DC63F 11. #B2D18C 12. #F36F21 13. #F68620 14. #F8A97A COLORS BRAND UPLOAD DOWNLOAD COMMERCE ALERT SHARE COMMUNICATE UI 1 2 3 4 5 4 5 6 7 8 8 9 10 11 3 1 12 13 14 25 24 26 27 28 3 5 23 24 25 3 5 18 19 20 21 22 3 5 15 16 17 2 3 15. #CA7A0A 16. #DA9509 17. #E9BF6B 18. #350E00 19. #744B29 20. #8C6239 21. #EBEAE5 22. #C4BFB2 23. #D54147 24. #F14950 25. #F79296 26. #573855 27. #744A71 28. #AC92AA Button styling consists of a soft gradient to maintain the button feel but remain consistent with the simpliﬁed site UI. The Scribd button family are our main calls to action. Publish will appear on most Scribd pages. The download button will appear on most read pages. The colors are associated with specific brand elements and site actions so our users can begin to associate a certain color on our site with a specific action. For exampl, the green social buttons are for use to indicate sharing or following of a specific user, group, document or collection. Some common rules are to not go button crazy. Use a text link when the Upload and Download buttons appear on the same page but one requires prominence over the other. Use secondary palette colors to indicate inactive buttons. All buttons will share the same common size of 94x30 pixels and corner radius of 3px with the exception of places where more descriptive button wording is necessary which would extend the button length. The numbers below each button specifies the color and edge overlay image that should be added to the top right corner of each button. The static button has a 2 color gradient where as the hover and click state only have one color. BUTTONS Search Search Search Publish Social Commerce UI Alert Communication Download Brand Buy now Buy now Buy now Download Download Download Cancel Cancel Cancel Next Next Next Follow Learn more Publish Publish Publish Follow Follow Learn more Learn more #8DC63F #7FB340 btn_edge-grn_28_x_28.png #F68620 #F36F21 btn_edge_ora_28_x_28.png #4CB4E8 #259FDB btn_buttonedge-lightblue_28x28.png #4CB4E8 btn_buttonedge-lightblue_28x28.png #259FDB btn_buttonedge-lightblue_28x28.png #146C88 #02FF40 btn_buttonedge-db_28x28.png #DA9509 #CA7A0A btn_buttonedge-ora_28x28.png #CA7A0A btn_buttonedge-ora_28x28.png #DA9509 btn_buttonedge-ora_28x28.png #8C6239 #744B29 btn_buttonedge-brn_28x28.png #744B29 btn_buttonedge-brn_28x28.png #8C6239 btn_buttonedge-brn_28x28.png #F14950 #D54147 btn_edge-rd_28_x_28.png #D54147 btn_edge-rd_28_x_28.png #F14950 btn_edge-rd_28_x_28.png #744A71 #573855 btn_edge-pl_28_x_28.png #573855 btn_edge-pl_28_x_28.png #744A71 btn_edge-pl_28_x_28.png #146C88 btn_buttonedge-db_28x28.png #02FF40 btn_buttonedge-db_28x28.png #7FB340 btn_edge-grn_28_x_28.png #F36F21 btn_edge-grn_28_x_28.png #8DC63F btn_edge-grn_28_x_28.png #F68620 btn_edge-grn_28_x_28.png Typography is important to the identity of a product as it conveys tone, design and should be ﬂexible across all products and platforms. The font family for Scribd is Athelas. The font itself was chosen for its classic serif style and modern attributes. Itʼs bridging the gap from the serif news fonts of old with a quality that lends itself to more modern applications. Much like the Scribd brand it pays homage uploads/Litterature/ scribd-visual-style-guide.pdf