https://bit.ly/38BL452 – Take my UI Design Bootcamp Now!
— Want to learn UI/UX? https://designcourse.com​
— Today, I’m going to show you how to use borders in your UI designs — both HIGH contrast borders and low contrast borders. Misusing borders can instantly kill the quality of a UI design. Make sure you get this right!

0:00 – Introduction
0:30 – An Awesome Offer
1:00 – Bad Borders Example
2:40 – Borders with a Background Color
3:50 – No Borders
5:25 – Low Contrast Borders Example
7:54 – Without Borders #2
9:15 – High Contrast Borders Example
10:34 – Outro

#ui #ux #borders

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

source

32 Comments

  2. Hi Gary, a thought that came to my mind scrolling through YouTube videos suggested to me, could you try to smile a bit on the video thumbnail picture? You are just too serious in the pictures. I bet you will notice a positive impact in your “click through” rate or whatever that is called. Let us know if you do.

  15. Thank you for your videos ! I'm a mobile developper, and I try to understand some of the basics of design to make my fellow UX/UI designer's work and mine a litlle bit easier. Sorry for my poor english, as everyone knows, foreign langage education in France is… lacking in quality to say the least ? ^^"

  20. Love ❤ for ur efforts and ur content
    In future I am expecting
    videos on Frontend roles and Responsibilities like
    1. What actually frontend developers do in realtime ( different tasks)
    2.. How manage 4+ experience ( fake experience) in realtime
    3. . How to crack any frontend interviews with 4+ years of experience

    4…..Easy way to to crack any angular/reactjs interviews with 4+ experience/10lack package ——) ))
    5….Top 20 program's to cover entire angular/reactjs syllabus.—-))
    6….Top 10 angular/reactjs concepts with examples

  21. Lo💛ve for ur efforts on angular/reactjs, in future I am expecting videos on
    1.Easy way to to crack any angular/reactjs interviews with 3+ experience/10lack package ——) ))
    2. Top 20 program's to cover entire angular/reactjs syllabus.—-))
    3…Top 10 angular/reactjs concepts with examples

  22. In the process of creating my own design language for my website I tried to avoid borders as much as possible and use shades to separate, but in more complex layouts there are so much shades you can apply before it looks tacky and weird, that's where very subtle borders (1px, 12% opacity) come in play, they clean up the look a lot, provide necesarry content separation and fill out places that feel too empty. In conclusion, use white space and shades of color to separate simple vertical layouts, use borders in compact layouts where there's horizontal separation needed.

    Also, use high contrast borders on important elements only for accessibility in high-contrast mode. Take a look at "Material You" (not yet released, only teasers), I like how they implemented high-contrast mode.

  23. I disagree with the first example – the borders actually look more visually pleasing in my opinion. The only problem is it makes me expect a shine when I hover over it, and I have no idea why.

  24. For the initial example, out of the 4 versions, version 4 (so last one) is better for readability on multiple displays (let's face it, very few have professional monitors to diferentiate good color gradients). I would implement that as a MUST if you ever do a "dark mode". Don't just change the section background to something dark, think about adding a background color to UI elements as well!

  27. I know we are talking about borders here but off topic,

    "Give us your email" is it ok to phrase it like that?

    I'd say"Join us" , or "Be the first and join" … etc are better

    and thank you for the awesome vids 🙂

  29. In some squared cards, buckets, or elements (with no border radius), I will sometimes do a border-top or border-left hover state. I can prefer the subtlety instead of changing background colors or scaling. But 9 out of 10 times, I try to live in a borderless existence (with the exception of form fields).

Leave A Reply

Please enter your comment!
Please enter your name here