Public
These are the pages that are tagged with "Public".
-
Tools for designers
All you need to get you up and running as a designer for SEB.
-
Visual identity
Patterns and components described here are SEB global. We have them in common - no matter what user group, customer journey or system you work with.
-
Motion
Motion is all about reenforcing understanding and behaviour on user triggered actions. We use it to describe functionality, relationships and intention.
-
Tab
Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.
-
Tooltip
A tooltip is a text label that acts as a helper to a specific item.
-
Take-over
Takeover modals enable a user to focus on a specific task while having the ability to go back to their previous view quickly.
-
Slide-out
Slideout modals allow for more complex interactions while not navigating away from the current view
-
PW Author
Design description to follow.
-
Article item
Design description to follow. PWS local.
-
Contact us
This block shows contact information for an area of the bank (or a general number).
-
Contact me
A block for users to input their phone number so that SEB can contact them regarding a specific item/question/case/topic.
-
PW Buttons
Design description to follow.
-
Hook guide act
This block is meant to catch the interest of both customers that are ready to make a decision and those that still wants to know more before they do.
-
Disclaimer
Design description to follow. Global.
-
Eye catcher
This block is meant to catch the attention of the viewer and then keep their interest with its content.
-
Field-button group
An input field with a button next to it, for example used for search fields that are on pages or part of blocks.
-
Footnote
A note of reference, explanation, or comment usually placed below the text.
-
Story block
A block to promote an article or landing page.
-
Helper
Design description to follow. Global.
-
Text block
A generic block for body text.
-
Design hints
When talking to designers, valuable design hints have been shared with us. We have started to add them here.
-
Slider
The slider allows the user to select values within a predefined range. It makes it easy to adjust the value, as well as lets you enter a specific value via keyboard.
-
Expert quote
Used to highlight a quote from a block of text or an article.
-
Segmented control
A segmented control is a horizontal set of two or more segments. It’s used as toggles for features or content, similar to radio buttons but more visible and promote exploration.
-
Date picker
Date pickers simplify the task of selecting a date in a visual representation of a calendar.
-
Toggle button - will be removed
This button has a single select function, meaning only one can be chosen. The icons must relate to the choice or action they represent.
-
Alert ribbon (old)
A message bar informing the user of the state of the system/page/function.
-
Skeleton loader
Gives the user a glimpse of what content is going to turn up after data has been loaded into the interface.
-
-
Mega menu pane
Design description to follow. Local.
-
Ordered bullet list
Design description to follow. Typo, global.
-
PW Preamble
Design description to follow.
-
Search bar
The Search bar helps visitors find relevant content
-
Table
Use global
-
Theme header
A coloured area/border in the top of a page (above the bread crumbs).
-
Tooltip
Design description to follow.
-
Up button
This is a feature that helps the visitor back to the top of the page once they have scrolled through a certain amount of the content.
-
USP list
A list with green check marks.
-
AppInt presentation
Design description to follow.
-
Book counseling
Design description to follow.
-
Contact list
Design description to follow.
-
PW Crisis alert
Design description to follow.
-
PW Critical info
Design description to follow.
-
Epiforms block
Design description to follow. Global pattern?
-
PW Expandable list
Design description to follow.
-
Flex block
Design description to follow.
-
Highlighted text-columns block
Design description to follow.
-
PW Iframe
Design description to follow.
-
PW Image
Design description to follow.
-
Link list
Design description to follow. Global.
-
Article features
A collection of data that can be used with a Story page or News page to give the reader better overview of the articles meta-data (date published, time to read, ability to share etc).
-
Quick facts
A block with heading and text which gives the visitor an extract of facts from the content. It can also be used to summarise the important points of an article.
-
Rates
Design description to follow.
-
Related content
Presents similar or related content of the same type to the visitor that they are currently on
-
Video block
A block showing a video with related heading, text or bookmarks to sections in the video.
-
PW Calendar
Design description to follow.
-
PW Find
Design description to follow.
-
Page listing
Design description to follow.
-
Promo
Design description to follow. Global. Name?
-
Rating
A block to measure the customer experience of a page.
-
Slideshow
Design description to follow.
-
Welcome block
A block to highlight and show the most important or prioritised message for a start or landing page.
-
Focus bar block
A block to enhance and highlight information (such as numbers and results) relating to the page content.
-
Alert ribbons
The alert ribbon is a compontent containing information about the state of the system/page/function. Information can be plain information, success, warnings & critical information (such as errors).