Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web parts, elements and user controls Width: 350 px / Height: 125 px Rounded corners: Rounding 6 px Background color: ? Name text: Arial, Bold, 12 px,

Similar presentations


Presentation on theme: "Web parts, elements and user controls Width: 350 px / Height: 125 px Rounded corners: Rounding 6 px Background color: ? Name text: Arial, Bold, 12 px,"— Presentation transcript:

1 Web parts, elements and user controls Width: 350 px / Height: 125 px Rounded corners: Rounding 6 px Background color: ? Name text: Arial, Bold, 12 px, #000000 Title text: Arial, 12 px, #000000 Image: 64 x 64 Font: 12 px Icon colour: #3e6b1c Link colour: #529900 Link hover: #F08C00 Button: Rounded corners: Radius 5 px Contact box Heading: Arial 15 px, #000000 Link text: Arial, 12 px, #529900 Background color: ? Icon colour: #3e6b1c Green teaser box

2 Summary links Title: Arial 16 px, #000000 Background color: ? Link color: #529900 Link hover: #F08C00 Icon colour #3e6b1c Link colour #529900 Hover link #F08C00 and underlined Link text 12 px Rounded corners: Radius 5 px

3 Example of web parts 3 Content editor web part Twitter web part RSS feed web part

4 Alert box 4 Background: Background color #ec3700, Text color #ffffff, Rounded corners 5px Wide Desktop Title: Corporate A, Regular, font-size 20px Text: Corporate S, Regular, font-size 16px Link: Corporate S, Regular, font-size 14px / Hover: underline Desktop Title: Corporate A, Regular, font-size 18px Text: Corporate S, Regular, font-size 15px Link: Corporate S, Regular, font-size 13px / Hover: underline Tablet Title: Corporate A, Regular, font-size 18px Text: Corporate S, Regular, font-size 15px Link: Corporate S, Regular, font-size 13px / Hover: underline Mobile Title: Corporate A, Regular, font-size 18px Text: Corporate S, Regular, font-size 15px Link: Corporate S, Regular, font-size 14px / Hover: underline Wide DesktopDesktop Tablet Mobile

5 Tables 5 Fortum data table: Light green # E4F4D2 Fortum coloured data table: Light green # E4F4D2 Light grey # F2F1F1

6 User controls User Controls for redirecting, filtering and updating the filtering on a page should be designed so that the information is immediately updated as soon as the user has finished making all the selections. Single selection field For a single selection field, the information should be updated as soon as the user has made a selection. The user should immediately get a visual cue that the information is being updated. In specific cases it is also possible to update only after the user has pressed a button to confirm the selection. 6

7 Multiple selection field 7 If the user can make several selections, these should be grouped in an information container and the information should be updated when the user clicks the button.


Download ppt "Web parts, elements and user controls Width: 350 px / Height: 125 px Rounded corners: Rounding 6 px Background color: ? Name text: Arial, Bold, 12 px,"

Similar presentations


Ads by Google