Scribd
Upload
20 views8 pages

Ui Degins

Ui patterns

Uploaded by

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

Ui Degins

Ui patterns

Uploaded by

websitesipartnerim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 8
How to: Improve your Ul Designs 8 @ui.sergio g @uiadrian ? g @ui.sergio 02. The border radius trick Don’t use the same rounded corner for a shape inside another one, it will look off. Instead, use the 1:2 rule. This way, your component will look perfectly fitted. 24 px Michael Scott World's best boss Michael Scott World's best boss 24 px 12 px g @uiadrian 03. Use clear language Use action verbs that relate to the label in the same context. Labelling your answer Yes and No might be confusing and mean both things in some examples. a A Save changes? Save changes? Would you like to save your Would you like to save your settings before exiting? settings before exiting? NO YES DISCARD g @uisergio 04. Make selected items pop This is acommon way to let your user know that something happened. Make those selected items stand out and grab the user’s attention. To-do list Meeting with Daniel Buy vegetables ob Handoff 30min nap:) To-do list Moeting with Daniel Buy vegetables 30min nap:) 3 @uiadrian 05. Touch targets Touch targets should go beyond an element's visible boundaries. A button or an icon, for example, can appear to be much smaller, yet the surrounding padding contains the entire 44 x 44 px touch target. 44 px 9:41 ale 44 px = et Login Enter the email address you'd like to use to sign in to SmartBank. Email address g @ui.sergio 06. Don’t use thin and light fonts Although it sometimes can look good, it will be very difficult for some people to read it. To improve the readability of your designs, use at least the regular weight of the font. 64 6) oo Readability test This is much better and helps to improve its rea vy. —_ aD Readability tes You will find thi Q @uiadrian o7. Use proper font sizes Make sure to use typography to your advantage and convey the content hierarchy by using proper font sizes. If in doubt, refer to standardized type scales for iOS and Android. For web, start from 16 px for body text and increase it by 8 for every heading size from hé5 to hl. g @uisergio 08. Provide extra information Sometimes we try to design in a "minimalist" way and leave behind some elements that we think are not very important. It never hurts to over-inform our user in some cases. SF Dropbor + Protes SF reptox loons.fig Gz Logo. loons.fig 659% Logo.at —

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy