Login button design
- Print
- PDF
Login button design
- Print
- PDF
Article Summary
Share feedback
Thanks for sharing your feedback!
Available in Classic and VPC
This section describes the design of the login button required when applying the login feature of NAVER Cloud Platform account to the user's application. Although it is possible to change the design of the login button to suit the application, it is recommended to maintain the following guidelines as much as possible in order to maintain the identity of NAVER Cloud Platform when designing.
You can download the login button that applies all the items presented in this guide below.
- Download login button: NAVER Cloud Platform_Signin_Button.zip
Note
If you do not have your own design guidelines, you may use the markup provided by the NAVER Cloud Platform to position the login button. For more details, see the Ncloud Single Sign-On login button markup guide.
Symbol
Apply the NAVER Cloud Platform symbol used in the NAVER Cloud Platform login button with one of the 3 colors.
- White or gray: apply if the login button has a dark color
- Black: apply if the login button has a bright color like white or gray
- NAVER Cloud Platform color: if the login button color is a bright color apply this as the official color of NAVER Cloud Platform
Note
Although you can adjust the size of the NAVER Cloud Platform symbol according to your own guide, you must maintain the aspect ratio of the width and height and not modify its shape or combine it with other forms.
Color
The color of the NAVER Cloud Platform login button can be selected from the basic line type and NAVER Cloud Platform color gradation type. When configuring your login page, make sure to compare it to login options for other companies for equal readability.
- Color configuration of the basic line type
- Background/HEX: #F9F9F9, RGB: 249/249/249
- Border/HEX: #AAAAAA, RGB: 170/170/170
- Color configuration of the NAVER Cloud Platform color gradation type
- Green HEX: #00C3C8, RGB: 3/199/90
- Cyan HEX: #03C75A, RGB: 0/195/200
The following is an example of applying the color guide for the login button.
Label
Position the label so that it fits appropriately on the page. You can choose to apply the label in either basic type or short type depending on the size of the login button.
| Type | Korean | English | Japanese |
|---|---|---|---|
| Basic type | NAVER Cloud Platform login | NAVER Cloud Platform Login | NAVERクラウドプラットフォーム・ログイン |
| Short type | Ncloud login | Ncloud Login | Ncloud でログイン |
You can also modify the label as follows according to the user's design guide.
| Type | Korean | English | Japanese |
|---|---|---|---|
| Basic type | NAVER Cloud Platform login | Log in with NAVER Cloud Platform | NAVERクラウドプラットフォームでログイン |
| Short type | Login with Ncloud ID | Log in with Ncloud ID | Ncloud ID でログイン |
Note
"NAVER Cloud Platform" and "Ncloud" within the label are symbols of NAVER Cloud Platform, so they cannot be arbitrarily changed. <Example> Ncloud
Examples of poor login button designs
The followings are examples of poor login button designs:
If the background of the login button has colors applied and a symbol in the color of the NAVER Cloud Platform is applied
If the symbol is not clearly legible
If colors other than those suggested in the guide are applied to the symbol
If an excessively long label is used within a small area
Was this article helpful?