Design Library is a set of individual styles and components, that when combined make delightful, intuitive designs and shape a consistent SEB user experience.
Home Page: http://designlibrary.sebgroup.com
http://designlibrary.sebank.se/
https://designlibrary.sebgroup.com/
Found a bug, have questions regarding design or how/when to use a specific compoment? Feel free to post an issue here
What is the equivalent of fish navigation with the current design?
What is the component to present second level-navigation?
Change
In short, background colour will be White or #F8F8F8
Details
https://designlibrary.sebgroup.com/visual-identity/colours/
After many discussions and synk between Design management and Bootstrap. See part of the discussion in this issue.
/Ulrika,
Design management
During my (Robert) and Panos exploration of the Arena shell last summer we altered the background color from #f8f8f8 to #f1f1f1 (darker) and the made the shadow of the cards more crisp, see comparison below.
Is this something we should merge back to design library perhaps?
Do you have a startpage with cards or a dashboard in your design? Maybe showing status or an overview? Show us your version please!
Our standard drop down component does not fit the content when using native.
Below is an example from our ongoing project Extra amortizing.
When long account names are used or the amount is very high the content does not fit. So at no point the user can see the entire account information.
We use a component that relies on the current operating system. So iOS opens its native menu (Safari) and Android (Google) its native and so on. The functionality will first be implemented in the app and then on iBP. This is built like a web component inside the app shell.
We are thinking on having a smaller font size on smaller screens, but there is a limit to how small we can go of course.
(Am learning github slowly... Am testing if the backlog works well here, in "projects" or in "Zenhub")
Thanks for discussing the structure here!
The accordion has been updated.
Change
Reason
Many reasons. First of all, it was time to specify the component better. We have adjusted to fit users’ need with more efficient use of space. The direction of chevron is updated to show how it is animated. We also noticed that the component has been (too) content-heavy and added clearer guidelines.
Specification
https://designlibrary.sebgroup.com/components/accordion/
Added to frameworks
Let us know if you have any questions!
/Ulrika
Design management
We have received feedback on tables. These are our thoughts so far:
Description for tables in Design Library:
https://designlibrary.sebgroup.com/components/table/
What more feedback do you have?
/Ulrika, Design management
As of 2018-12-11
font size: 16 px (1 rem)
weight: medium
line height: 20 px*
distance from input border to label: 8 px*
font size: 14 px (.875 rem)
weight: regular
line height: 20 px*
distance from input border to instruction: 8 px*
font size: 14 px (.875)
weight: regular
line height: 20*
distance from input border to error text: 8 px*
*Note that 8 pixles and line height 20 refers to actual pixels in design and not margin-bottom: 8 pixels and line height in browser, due to line height affecting actual space between input and text.
gdfg
We have been talking about a description that goes through the current design concept. The ideas came from the strategic and conceptual work that was done 2015-2017, after the latest redesign. Today we see the result not only in the rebranding, but in "the shell", the digital design principles, the Design Library, etc. We want to describe the thoughts and examples for navigation, login, support, etc so, that we can strive towards it. Easier than guessing!
Design change 2019-03-13
The design update on Toggle selector was reviewed March 13:
Change
See the details in the description: https://designlibrary.sebgroup.com/components/toggle-selector/
Reason
Analytics showed that the component was overlooked by users. It was unclear that the component was clickable.
My test issue comment
The discussion about label text sizes (#2) is finished but many of you also wanted to discuss what the error indicator on an input field looks like. So please, have a look at #2 for reference but these are the questions I pick up:
/Ulrika
Following adjustment to typography has been made 2019-01-21:
H2
weight: bold
H3
weight: bold
H6
Is no longer in use. Suggestion: make it look like H5.
New
If you are unsure, please see the complete list of sizes and line-height for each size: http://designlibrary.sebgroup.com/visual-identity/typography/#usage (scroll down on the page)
Ask us anything (about this)!
Thank you,
Ulrika, Design management
Hi, I have a task that requires to have consent for data usage/marketing offers.
I put together simple consent. I will try to validate this with legal. At the same time, I wanted to align it with rest of consent prompts SEB might have, but I couldn't find one.
Jess gave me a link to this as something to refer to:
https://sebgroup.github.io/bootstrap/modals
Maybe you guys have designed something like this?
Design change 2019-02-13
The Ghost button is updated to two versions:
Ghost button light
Ghost button dark
Reason:
The instruction for the Ghost button is clarified. It is used on coloured background and photographs. Ghost light is for darker backgrounds, and Ghost dark for lighter backgrounds.
Design Library description:
http://designlibrary.sebgroup.com/components/forms/button/#usage
Thank you!
/Ulrika
Design management
See:
Q: Increase the height of input fields and medium buttons to 44 px. First, explore contexts. Are there any consequences?
A: Design change 2019-01-30
The reasoning for this is that when labels got bigger, the form components follow in size to harmonise and match. Also, the mobile click area needed to be bigger so we want them to be the same size, to simplify and have fewer options (=easier to do it right).
See:
Pattern (sep 2019)
A pattern that describes a uniform way for the user to add both soft and hard properties. This two-step pattern is especially useful in pages where the user has to manually update values.
A white card triggers a slide-out. Use is the same behaviour for all devices.
Details
See the measurements (etc) in Design Library:
https://designlibrary.sebgroup.com/patterns/crud/#usage
Design library identifier: component-crud
Repostories
Any questions or feedback? /Ulrika [email protected]
Describe and give examples of our navigation. Describe patterns on Design Library
Links on http://designlibrary.sebgroup.com/about-this-site/repositories/ to Boostrap and React gives 404: Invalid request.
Design decision 2021-05-05
https://designlibrary.sebgroup.com/components/component-wizard
https://github.com/sebgroup/ng-wizard/releases
The wizard has been built so that more teams can reuse the same code. At the same time we gave the design a face lift.
If you're using angular or if you're in need of a wizard as part of a separate flow, we suggest that you use our new wizard component for angular which makes it really easy to create wizards using standard routes in angular (one route =one step).
What approach to large tables to we recommend from a design/user perspective? (both desktop and mobile)
Design decision 2021-11-19
https://designlibrary.sebgroup.com/components/component-pagination
/Ulrika
There are components in SEB Bootstrap that we should also see in Design Library: Toast notification, Cards, Breadcrumbs, Pagination, Loader, Nav bar.
Review 2019-02-27
At the review, Design working group decided to WAIT with publishing this component so we can evaluate the use (read further down on this thread). We will keep it in Design library, under Components/Upcoming for a while.
You are still welcome to use it, but please give us feedback on how it worked.
Need
A step indicator that shows progress in a flow. Today we have wizards which take-over the complete focus for the user. This indicator is a way to gently guide the user forward without loosing context.
Specification
Description
See details on Design library: http://designlibrary.sebgroup.com/components/upcoming/progress-indicator/#usage
Ulrika,
Design management
Change
Have a look at the specification (link below) because the component has been redesigned in a few ways, but a couple of details are:
Details
https://designlibrary.sebgroup.com/components/slider/#specification
Component identifier
component-slider
(Slider is built in Vanilla and React.)
/Ulrika, Design management
Hello there! I have tried out what digital signing might look like in the wizard with mobile BankID, Digipass and bankID on card. What do you think about it? I also heard that there might be new pictograms... what is the status?
If you look under Components/Upcoming in Design library, you will see 35 (!) re-usable components made by the development team for public websites (PWS). I am adding pages for each of them so they are shown in Design Library. They also need design descriptions (Jonas, or Anna-Karin, or?).
We see the need for components on coloured backgrounds. So far:
What more components do we need?
@splashdust @hjalmers, intra, public and Developer garden?
We would like these to be a general level (a common scheme, theme, library, etc) when possible. Let us know what you need!
What is this?
A new component to display a filter
Details
See the specification to get all the right details:
https://designlibrary.sebgroup.com/components/chips/#specification
Component identifier
component-chip
Follow up on development:
Thank you!
/Ulrika
Original post from Jessi:
Hey team!
I am adding the Tag/Label/Category component to the Design Library. Not as easy as I thought. This component can be used in some different ways and places. Sometimes it needs to be clickable, sometimes not. Sometimes in the context of a filter choice, sometimes as article labels, in tables and so on... So we need more than one component for it.
I need to understand some of the contexts for it to be able to make the designs.
How do you use it? It would really help me if you can give me some examples.
/Jessi
There is a new button variation. There are two versions:
Delete button
For complete specification, see Design library: https://designlibrary.sebgroup.com/components/forms/button/#usage
Component identifier: component-button
Thank you!
Ulrika, Design Management
For both designers and developers:
This is the log for Component Review. Anyone can submit a design. Book in Slack or contact Ulrika.
A mobile/desktop component. Placed at the top of the screen. Scroll down for more images.
The sticky bar is a new component in Design library. It can be used both on mobile and desktop. There are two versions, depending on placement and content. Go to the styles tab in Design library for detailed descriptions.
1. Sticky summary bar
2. Sticky button bar
Thank you,
Ulrika
Design management
In order to make wizards shorter, and more to the point. Me and Sofia suggest that we add a new component: Contextual receipt.
After user has completed a wizard, the take-over closes and she is back in the normal view (where she can continue to work un-interupted). But there still needs to be a clear feedback stating that the order/application/process was handled successfully (or not).
This should not be used for flows that require a more formal receipt (i.e. payments, loan applications)
This is sligthly related to Alert-ribbon, but that component should be used to state system status, and not directly linked to a user interaction.
See below:)
After a long period of testing, we have now updated the Alert ribbon component. See the full description for the details (measurements, colour codes, etc):
https://designlibrary.sebgroup.com/components/alerts/alert-ribbons/#guidelines
Feedback from user tests and usage from several channels, saying that purple was too loud. We also learned that the description in Design Library generally was too confusing. And we hade a design synk between Bootstrap and Design Library which generated sensible updates for both.
Let me know if anything is unclear. Thank you!
Ulrika,
Design Management
Original text: "The design on alerts vary in our different repos. Lets explore this and decide what they should look like."
We should use text balancing scripts for important texts! But how much and on which texts?
To increase readability an understandability of headlines and other short texts, it is important to 'wrap' or 'balance' them nicely. A long headline which is displayed in two lines, where the second line is much shorter than the first, is very bad communication. There is a big risk that the reader misses the second line and doesn't understand what we try to say. The solution is to make the two lines of text more or less the same width. But with responsive design, this is of course tricky.
See this example from seb.se: The problem is with the headline "Enkla firman — ..."
The smart people at New York Times have made a solution to the problem and have published it on GitHub. Please see https://open.nytimes.com/headline-balancing-act-6e92d3d6119
This could be used only on headlines, but in some instances, like some wizards and forms, it is important to use on labels, radio buttons etc.
This will of course decrease loading speed. But since New York Times use this - a public site with a LOT of headlines with a LOT of visitors - I suppose their solution is fast. However, using this on every line in a form or a wizard, that might be overkill.
Breadcrumbs has now an SEB-design:
Desktop:
Mobile:
Design review 2019-03-27
We are changing the name of the Toggle switch to Slide toggle and would like to you update the identifier:
Reason
To match convention in other frameworks. It also makes sense to change the identifier.
Description: https://designlibrary.sebgroup.com/components/slide-toggle/#usage
A while back, Meren and Didzis asked for examples of use of colour (I think it was you but Connections won't let me see or reply to the discussion). Anyway, thank you for this question - it made us focus on this for a bit! Always good! We have now added some examples on Design Library. The examples are mostly from public pages, but hopefully it can inspire you somewhat:
http://designlibrary.sebgroup.com/visual-identity/colours/#examples
/Ulrika, Ola, Jessi
Last week we discussed copy-writing with our copy-colleagues Karin and Gunilla. The topic was all the variations of Cancel in modals that we see in our systems. We agreed on some rules that we want to try to see if they stick:
Feel free to discuss this and add your own good and less good examples.
/Ulrika
Hi guys! Me, Susanna and Erik have found 3 different ways of saving in the wizard. Which should it be? Or a fourth option?
Currently we only have this defined in design library:
https://designlibrary.sebgroup.com/components/list/
In my opinion that's more of a grid or table, although the styling can be applied to a list too (should probably follow the style and design of a normal table). Nevertheless we need more list types.
Check lists
To accommodate for this use case we've added a check list too.
Bullet lists
Here's another use case from another project which requires "normal" bullets:
Examples
https://stackblitz.com/edit/list-options?embed=1&file=src/app/app.component.html&view=preview
Today we talked about the component library for AngularMaterial. The components are styled on Material Design based on Angular. Three teams in Vilnius use this today for about 8 projects for internal sites.
Test description
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
