These are the notes I took from the Introduction to UI/Design course I was at (https://www.meetup.com/Le-Wagon-Oslo-Coding-Bootcamp/events/264491352/)
Slides from the event can be found here: https://www.slideshare.net/secret/etXsS0a2MpZsJZ
Figma is a user interface / prototyping tool. (https://figma.com)
- Visual Identity
- Getting your visual identity is important, especially if you're large.
- Anyone can recognize brands like McDonalds from a mile away
- Font, Color, Logo
- Wireframes
- Figma components
- Figma has components so you can instantiate a component to create a clone of it. Any changes to the component is made to the clone.
- Figma pages
- Figma page links
- You can connect views to make a prototype interactive
- Figma overlays
- You can stack stuff on top of eachother
- You can trigger these via event listeners, ex on-hover
- Figma components
- UI Kits w/ components
- You can create an empty page in Figma to store all your components
- Makes it way easier to work with components, just create an instance from the ui kit.
- Color Trends
- Max 3 fonts
- Try to keep the amount of fonts as small as possible
- Many fonts can lead to confusion
- Font weight
- Font weight is an important part of your typography, use it.
- 1 Primary, 1 Secondary, possibly a tertiary color.
- One day to fix your identity
- I honestly don't remember what this one was about ...
- Contrasts your texts
- Make the important stuff bigger
- Make less important stuff smaller and brighter.
- Don't get fancy with colors
- Don't overdo your color palette.
- Stick to 2-3 colors (as noted above)
- Design = space
- The source that surrounds an object is as important as the object itself.
- Use appropriate margins / padding
- Filters and shadows
- Make all text readable
- Constrast
- Accessible Colors (https://accessible-colors.com)
- Good design is the one you don't notice
- Thin border radius
- Lighter border colors
- Use small shadows
- Size does not mean proportion
- Use the same proportions
- https://goodui.org
- Design is accessible to everyone
- There are many free resources for everyone to begin with UI/Design.
- Figma
Inspiration
These sites have loads of existing UIs. You can search for almost anything here and you'll find something.
This is nice if you're looking for a design for a login card or your 404 page.
- https://dribbble.com
- https://collectui.com/designs
- https://www.calltoidea.com/
- https://uimovement.com/
- https://www.awwwards.com/
Colors
- https://coolors.co/
- https://colorhunt.co/
- https://uigradients.com/#ByDesign
- https://www.grabient.com/
- https://material.io/resources/color/#!/
- I use this one a lot when finding color palettes for material design themes.
- https://sipapp.io/ (Extension)
- https://www.colorzilla.com/ (Extension)
Images (Royalty Free)
- https://unsplash.com/
- Probably one of (if not) the best free-to-use image services
- https://gratisography.com/
- https://duotone.shapefactory.co/
- https://undraw.co/
- https://www.flickr.com/ (Search for the Royalty Free tag)
Icons
These resources have loads of free icons. You preferably want to downlaod them as SVGs so you can just drop them right into Figma.
Fonts
- https://fonts.google.com/
- This is probably the most commonly used font service. It has loads of free to use fonts.
- https://www.myfonts.com/
- https://digitalsynopsis.com/
- https://fontpair.co/
- https://fontface.ninja/ (Extension)
- Fontninja lets you see what font a piece of text on a website is using as well as size and color.
Code Snippets
- https://codepen.io/
- You can find loads of nice css stuff on codepen. Especially loads of cool transitions and animations.