Last updated: March 11, 2021, 16:39
Principles
01
Make it personal
Each element reflects and reverberates my point on design
02
Build upon logic and simplicity
Orientate on Atomic Design to bring logic and structure, and deliver fast.
03
Evolve and adapt
A portfolio is a process and therefore is simultaneously always ready and never done.
Tokens
(...)
Color
white
standard bg, text on red 1 and blue
ghost-white
bg
red 1
elements and bg
red 2
links
blue
emphasized text, bg
black
text, bg
Spacing
Base Unit
1 em ≙ base font size of body all pages tag set in "VW" = Viewport Width. 1 VW = 1% of Viewport width.
Body All Pages Tag for Desktop is 1,175 VW; scale body all pages tag for smaller breakpoints up and larger breakpoints down.
XXS ≈ 4 px
¼ em - Used for padding inside molecules if more granularity needed (i.e. icons) // NOT IN USE YET
XS ≈ 8 px
½ em - Used for padding inside molecules
S ≈ 16 px
1,5 em - Used for padding inside organisms
M ≈ 32 px
2 em - used for padding between organisms
L ≈ 56 px
3 em - used for padding between organisms // NOT IN USE
XL ≈ 64 px
4 em - used for top margins
XXL ≈ 96 px
4 em - used for top margins
Margin Top
Margin Left and Right
3 em - Standard Margin for Containers (set as padding and margin to auto)
6,5 em - Margin for About page (set as padding and margin to auto)
Grid
Golden Cut
Typography
Font
IBM Plex Sans for Paragraphs
Weight
light
regular
Aa
Aa
light
Aa
Aa
regular
Aa
Aa
bold
Aligment
What is "Good" Design? 6 of Dieter Rams' 10 Principles.
left
Good design is innovative. Good design makes a product useful
justified
Good design is aesthetic. Good design is unobtrusive
center
Good design is honest. Good design is long-lasting
right
Size
>1 em scaled by the perfect fifth (1.5) , <1 em="" scaled="" by="" the="" major="" second="" (1.125),="">2 scaled by (...)</1>
0,889 EM
P small
1 EM
P regular
1,5 EM
P large
2 EM
P extra-large
4 EM
5 EM
Shapes
Design Element
Scroll Indicator
The Dot
Icons
Skillset
Wireframing & Prototyping
Strategy & Planning
Flow Charts
Research & Analysis
Design System
UCD
Methods
Wireframing
Wireframing
User Research
Journey Map
Wireframing & Prototyping
User Centred Design
Strategy & Planning
Information Architecture
Research & Analysis
Persona
Market Research
Design System
Feedback
Macroenvironment
Flow Chart
Opportunities
Zoom
Image Recognition
Search on Runtime
Machine Learning
In Chat Scheduling
Direct Editing
GPS Integration
Pictograms/Beekeeping
Urban Biodiversity
Target Audience
Pesticides & Monocultures
Novices
Ageing
Colonies
Suppply Chain
Tools 44x44
Usability Hub
Optimal Workshop
Wireframing
Wireframing
Wireframing
Wireframing
Wireframing
Atoms
Guidelines
Paragraph Elements
Description
Description
Description
Description Emphasis
Description
Description
Paragraph
This is the default text value for a symbol field
This is the default text value for a symbol field
Quotes
Subtle
Regular
Emphasis
Large Subtle
Large Regular
Large Emphasis
Molecules
Guidelines
Titles
About Page
This is the default text value for a symbol field
Home Page
This is the default text value for a symbol field
Case Study Titles
Description
Description
Paragraphs
Description left
Description
This is the default text value for a symbol field
Description
This is the default text value for a symbol field
Description right
Description
This is a paragraph with description
Description
This is a paragraph with description
Caption
This is a caption
For Infographics
78 %
This is a paragraph with description
Lists
small
01
Description
This is the default text value for a symbol field
Normal
1
Description
This is the default text value for a symbol field
Bullet List
User Interviews
Discussing behavior and needs around beekeeping, knowledge transfer, and digital with 6 beekeepers and aspiring ones between 30 and 71 revealed:
-
Elderly are less tech-savvy but used to basic functions: calls, messages, and take, send, and get images.
Buttons / Links
In Paragraph
In Paragraph Bold
After Paragraph
After Title
Navigation
Default
Hover
Current
Back to top
Overview CS Static
Overview CS Dynamic
Previous CS
Next CS
Exploration
↑
Organisms
Guidelines
Misc
Table/Symbol
Tools
Pictogram/Symbol
78 %
This is the default text value for a symbol field
Pictogram/Symbol
This is a paragraph
Pictogram/Symbol
Description
This is a paragraph without description
Functional / Movement
Notes
Div Overflow Content = horizontal scroll
Animation - Div "Thumbnail" - Hover effect
Playground
Guidelines
Paragraph L