Scribd
Upload
20 views2 pages

Ui Ux

The document provides guidelines for typography, image usage, icon incorporation, and layout spacing in design. It includes specific font sizes, styles, and CSS examples for text-on-image effects, as well as tips for using icons effectively. Additionally, it offers Figma shortcuts and best practices for creating responsive designs and utilizing plugins.

Uploaded by

Tanupriya Kamble
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views2 pages

Ui Ux

The document provides guidelines for typography, image usage, icon incorporation, and layout spacing in design. It includes specific font sizes, styles, and CSS examples for text-on-image effects, as well as tips for using icons effectively. Additionally, it offers Figma shortcuts and best practices for creating responsive designs and utilizing plugins.

Uploaded by

Tanupriya Kamble
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

=> Typography:

1. Font size(for body text): 15-25px (22px)


2. Use BIG FONT sizes for headline: 32-60px
3. Use line spacing b/w 120 and 150%
4. 45-90 characters per line
5. Use good fonts: like - Sans-serif - Open Sans, Lato, Raleway, Monsterrat, PT
Sans/ Serif(red serifs) - Cardo Merriweather,
PT Serif

-----------------------------------------------------------------------------------
----------

=> Working with images:


1. Put text directly on the image
2. Overlay the image
3. Put your text in a box
4. Blur the image
5. The floor fade

To achieve the text-on-image effects I showed you before, you can use CSS for your
websites. Here is example CSS code for some of the effects. Please change it
according to your needs.

-> Overlay the image

.darken {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR


IMAGE HERE);

}
Example: http://jsfiddle.net/drpak8vy/1/

-> Put text in a box

.text-box {

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

display: inline;

padding: 10px;

Example: http://jsfiddle.net/qg83m36p/

-> Floor fade

.floor-fade {

background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ),


url(YOUR IMAGE HERE);

}
Example: http://jsfiddle.net/gRzPF/409/

=> Working with icons


1. Use icons to list features/steps
2. Use icons for actions and links
3. Icons should be recognizable
4. Label your icons
5. Icons should not take a center stage
6. Use icon fonts whenever possible

=> Spacing and Layout


1. Use white spaces
- Put whitespace between your elements
- Put whitespace b/w ur group of elements
- Put whitespace b/w ur website's section
- But dont't exaggerate
2. Define Hierarchy
- Define where you want ur audience to look first
- Establish a flow that corresponds to your content's message
- Use whitespace to build that flow

-----------------------------------------------------------------------------------
-------------------------------------------------------------------------

FIGMA:

Use Shift key to align item


dont use rectangle use frame instead
crl+shift+R - paste to replace
Shift+R to view ruler
Shift+G to group elements - do not use grouping
Shift+A to Auto Layou+
to Renaming the name of all frame Press Crl+R
Multi Edit right click and select matching layer
to create button - type button then select and add auto layout to it - Shift+A to
add a background/layout to it
Select All Right click then select auto layout then Suggest Auto layout
Use wrapping to make it responsive
Component and Instance- Ctrl+D
UI kits
Max & Min width - add max n min to fix the content
3 best figma plugins - 1. Unsplash(free images) 2. QoQo.ai generated UX
Figma AI features - Rewtite, First Drafting(), Rename Layers

You might also like