"Little UI Details" summarizing some tips on UI visual design



TightenYaLaravelSteve Schoger who was in charge of designing@ steveschoger), A moment summarizing the tips on visual design by "Little UI Details"Has been published.

Little UI Details
https://twitter.com/i/moments/880688233641848832

When adding white text on a bright background color, adding a shadow slightly will not only make the characters easier to see but also pops.


Adjusting the hue by 10 to 20 degrees in both directions makes the gradation look more vivid.


StripeIt really likes to hover the button a little bit when hovering over the button on the site of the site. When you mouse over the button, the button moves up one pixel and the drop shadow is loaded.


Applying a slight vertical offset to the box shadow makes it look more natural.


Aligning text is an easy way to clean the design and make the content easier to see.


Pure gray text is always invisible in colored backgrounds. The easiest way to fix it is to add the hue of the background color to the text.


If you are using a more prominent icon than text, set it to be slightly brighter than the text if the icon is inactive.


Using icons such as arrows and checkmarks instead of standard bullets, you can make visual interest in unordered lists.


You can add vibrancy to your design by adding a line with a thickness of 4 to 6 pixels at the top of the site.


It changes to a nice appearance by using a two-color gradation.


Instead of drawing a key line between the title and the body, this is shown by slightly changing the contrast of the background color.


In addition to size and thickness, using color and contrast is the best way to create a printed hierarchy.


If not decided it is best to use a 16px font 1.5 lines high for body copy.


Text in bold text may sometimes be difficult to read. Consider adjusting the character spacing to give room for breathing even in the text.


Technique to make a stylish map even without graphic design skills.


The key line not only splits the content, it also makes it easier for the decoupled content to connect more easily.


Defining the spacing with multiples is an excellent way to get a vertical rhythm.


Picture with low saturation + bold color scheme + CSSBlend mode(blend-mode: multiply) is best for enhancing the contrast between the hero banner and the text.


The overlapping of elements on a page is a great way to make depth and encourage users to scroll


Negative secondary action buttons work better than normal buttons.


By creating a hierarchy for buttons it is possible to make the button you want to be pressed more prominently.


Design may be busy when there are too many boundaries.


The two-column form layout is ideal for organizing meaninglessly long forms and filling a wide screen with suitable size forms and text

Related Posts:

in Design, Posted by logu_ii