-
- SVG Waves, Lines, Blobs etc
- Icons
- Placeholders
-
- Common Colours
- Companies
- Red
- Green
- Blue
-
- Colour and Contrast
- Visual Heirarchy
- Complexity vs Simplicity
- Consistency
- Scale
-
- Screen Sizes
- Text/Component Dimensions
-
- Figma Plugins
- Figma Components
- Code Components/Libraries
- DMSans: Similar to Montserrat, good for large text such as heros.
- Lato: Formal and good for small text.
- Montserrat: Bold and rounded, good for logos and headers.
-
SVG Waves, Lines, Blobs etc
- getwaves.io: Get custom svg waves to paste and act as content dividers.
- haikei.app: Custom svg objects like blobs, stars, waves etc. Creators of getwaves.io.
- bgjar.com: Cool custom svg's such as lines, waves for background.
-
Icons
- svgrepo.com: 300,000 svg icons and vectors for commercial use.
- fontawsome.com: Icons with simple html code ready to paste.
-
Placeholders
- uifaces.co: Pictures of people for profile icons. Filter by age, gender etc.
- placeholder.com: Easily link placeholder images online for custom sizes.
- loremipsum.io: Quickly generate dummy text.
-
Common Colours
- Pure White:
#ffffff - Soft White:
#f8faff - Pure Black:
#000000 - Soft Black:
#333333
- Pure White:
-
Companies
- Twitter Blue:
#1da1f2 - Facebook Blue:
#4267b2 - Discord Old Blue:
#7289da - Stripe Blue:
#008cdd - Shopify Green:
#96bf48 - Robinhood Green:
#78a175
- Twitter Blue:
-
Red
- Pure Red:
#ff0000 - Fun Red:
#e17a77 - Fun Orange:
#f4af78
- Pure Red:
-
Green
- Pure Green:
#008000 - Fun Green:
#85ec6b - Neon Green:
#39ff14
- Pure Green:
-
Blue
- Pure Blue:
#0000ff - Fun Blue:
#729fec - Fun Purple:
#5900cc
- Pure Blue:
-
Color And Contrast: The mix of different colours. No more than 3 different colours. Shades are nice, but important components should be easily visible.
-
White Space: The white space between components. White is nice, use it. Space out your components, but not too much. Keep an overall symmetry with your spacing.
-
Visual Heirarchy: The order in which your eyes input the site. For example looks at logo, then button then... Use scale, color and contrast to make important content stand out and be viewed first. Things such as hero and logo should be viewed first.
-
Complexity vs Simplicity: Most of the time, less is better. Too much content can make your site cluttered and messy, especially on mobile devices. Your design should be clear and straight to the point, especially with important components writtent above.
-
Consistency: The design colours and feel should be similar throughout the whole user flow. Helps build trust and users remember your theme. No consintancy can be daunting and look like you stuck different projects togethor.
-
Scale: Large enough so older people can read your text. No more than 4 text sizes.
-
Screen Sizes [WxH in px] (With Proportion of Users)
- Small Mobile: 360x640 (23%)
- Average Laptop: 1366x768 (12%)
- Large Desktop: 1920x1080 (7%)
- Average Mobile: 375x667 (5%)
- Average Desktop: 1440x900 (3%)
- Large Mobile: 720x1280 (%3)
-
Text/Component Dimensions
- NavBar Height: 64px
- Hero Image: 16:9
- Paragraph Text Size: 16px (21px for text heavy sites)
- Secondary Text Size: 14px
- Input Field Text Height: >16px
- Small Input/Buttons Height: 28px
- Medium Input/Buttons Height: 37px
- Large Input/Buttons Height: 46px
-
Figma Plugins
-
Figma Components
- Lo-fi Wireframe Kit: For creating wireframes.
- Food Delivery App UI: A modern food delivery app UI kit.
- Pegasus Design System: Modern components kit.
- Apple IOS 15 UI Kit: Apple iOS UI kit.
- Marvie IOS Dark Theme: Apple dark theme UI kit.
- Material Design Icons: Icons for material design.
-
Code Components/Libraries
- Bootstrap: HTML/CSS/React components and styling.
- Material UI: React components, look like Google's.
- Tailwind UI: Professional components for HTML, React and Vue.
- Tailwind CSS: Easy and effective CSS styling.