Do You know how to design your websites🤔??
Here's a list of the Top 10 components of UI that will help you get a good understanding of UI.
🧵👇
Here's a list of the Top 10 components of UI that will help you get a good understanding of UI.
🧵👇
1⃣. Typography
01. Use only good and popular typefaces and play it safe.
02. It’s okay to use just one typeface per page! If you want more, limit it to 2 typefaces.
03. Choose the right typeface according to your website personality.
👇
01. Use only good and popular typefaces and play it safe.
02. It’s okay to use just one typeface per page! If you want more, limit it to 2 typefaces.
03. Choose the right typeface according to your website personality.
👇
04. When choosing font sizes, limit choices! Use a “type scale” tool or other pre-defined range.
05. Use a font size between 16px and 32px for “normal” text.
06. For long text (like a blog post), try a size of 20px or even bigger.
05. Use a font size between 16px and 32px for “normal” text.
06. For long text (like a blog post), try a size of 20px or even bigger.
2⃣. Colors
01. Make the main colour match your website’s personality: colours convey meaning!
02. Use a good colour tone! Don’t choose a random tone or CSS named colours.
03. You need at least two types of colours in your colour palette: the main colour and grey colour.
👇
01. Make the main colour match your website’s personality: colours convey meaning!
02. Use a good colour tone! Don’t choose a random tone or CSS named colours.
03. You need at least two types of colours in your colour palette: the main colour and grey colour.
👇
04. With more experience, you can add more colours: accent (secondary) colours (use a tool).
05. For diversity, create lighter and darker “versions” (tints and shades)
06. Use your main colour to draw attention to the most important elements on the page.
05. For diversity, create lighter and darker “versions” (tints and shades)
06. Use your main colour to draw attention to the most important elements on the page.
3⃣. Images and Illustrations
01. Use images to support your website’s message and story. So only use relevant images!
02. Prefer original images. If not possible, use original-looking stock images (not generic ones!)
03. Try to show real people to trigger the user’s emotions.
01. Use images to support your website’s message and story. So only use relevant images!
02. Prefer original images. If not possible, use original-looking stock images (not generic ones!)
03. Try to show real people to trigger the user’s emotions.
4⃣. Icons
01. Use a good icon pack, there are tons of free and paid icons packs.
02. Use only one icon pack. Don’t mix icons from different icon packs.
03. Use SVG icons or icon fonts. Don’t use bitmap image formats (.jpg and .png)!
04. Adjust to website personality (style)!
01. Use a good icon pack, there are tons of free and paid icons packs.
02. Use only one icon pack. Don’t mix icons from different icon packs.
03. Use SVG icons or icon fonts. Don’t use bitmap image formats (.jpg and .png)!
04. Adjust to website personality (style)!
5⃣ Shadows
01. You don’t have to use shadows! Only use them if it makes sense for the website personality!
02. Use shadows in small doses: don’t add shadows to every element!
03. Bonus: Experiment with glows (coloured shadows).
01. You don’t have to use shadows! Only use them if it makes sense for the website personality!
02. Use shadows in small doses: don’t add shadows to every element!
03. Bonus: Experiment with glows (coloured shadows).
6⃣. Border-radius
This CSS property sets the rounded borders around an element.
01. Use border-radius to increase the playfulness and fun of the design, to make it less serious.
02. Use border radius on buttons, images, around icons, standout sections, and other elements.
This CSS property sets the rounded borders around an element.
01. Use border-radius to increase the playfulness and fun of the design, to make it less serious.
02. Use border radius on buttons, images, around icons, standout sections, and other elements.
7⃣. Whitespace
It is the space between two elements. so try to use it mindfully.
01. Try a hard rule, such as using multiples of 16px for all spacing.
02. The more some elements (or groups of elements) belong together, the closer they should be!
It is the space between two elements. so try to use it mindfully.
01. Try a hard rule, such as using multiples of 16px for all spacing.
02. The more some elements (or groups of elements) belong together, the closer they should be!
8⃣. Visual Hierarchy
It defines the importance and sequence of elements within a composition.
01. Position important elements closer to the top of the page, where they get more attention.
02. use images mindfully, as they get more attention.
03. emphasize important elements.
It defines the importance and sequence of elements within a composition.
01. Position important elements closer to the top of the page, where they get more attention.
02. use images mindfully, as they get more attention.
03. emphasize important elements.
9⃣. User Experience
UX design is the process used to determine what the experience will be like when a user interacts with your product.
--
@lauraklein
01. Focus on user action buttons & forms.
02. animation short(200-500ms) & simple.
03. Keep design & layouts simple & easy.
UX design is the process used to determine what the experience will be like when a user interacts with your product.
--
@lauraklein
01. Focus on user action buttons & forms.
02. animation short(200-500ms) & simple.
03. Keep design & layouts simple & easy.
🔟.Components and Layout
01. Use common elements and components to convey your website’s information.
02. Combine components into layouts using common layout patterns.
03. Assemble different layout areas into a complete.
01. Use common elements and components to convey your website’s information.
02. Combine components into layouts using common layout patterns.
03. Assemble different layout areas into a complete.
📌Conclusion
I know there are some people who are good at coding but bad with the design, then try these tricks that will help you design.
These tips are inspired by the HTML CSS course of Jonas Schmedtmann. You can check their course for more explanation and details.
I know there are some people who are good at coding but bad with the design, then try these tricks that will help you design.
These tips are inspired by the HTML CSS course of Jonas Schmedtmann. You can check their course for more explanation and details.
Thanks for reading the thread.
If you find it useful. Give the first one a retweet and if you have any feedback, let me know in the comment.
🔗
If you find it useful. Give the first one a retweet and if you have any feedback, let me know in the comment.
🔗
Loading suggestions...