I'm so happy that you decided to create this series! I struggle with creating websites that look put together and nice, so I love this type of content. Thanks!
This isn't real. I'm a JS developer and I just started Web Designing today. How did you upload it exactly today o.O We all are a simulation. I knew it!!
Your work is amazing, I'm looking for this "fundamentals" 101 for a long time, and you just explained this in the best way possible. Thank you, and continue this incredible work
Hi Ed, love your things, but instead of using times 2 for fonts you should try using the golden ratio (also starting from 16px and multiplied by 1.618) (16px - 20px - 26px - 33px - 42px). The golden ratio will look more natural and it gives you a bit more control than the 2x method.
Hi DeoMaarMorro, i liked your idea of using golden ratio you have also mentioned these values in your comment (16px - 20px - 26px - 33px - 42px) what are these values
super valuable information. Been only up until 22 minutes (and I've been doing web/graphic design for YEARS) but so far I still really like your approach to clean type. Well done, thanks!
~Notes~ ## Typography 101 ### Alignment - align title, subtile, paragraph left ### Font Size - paragraph text: e.g. 16px - subtitle: e.g. 32px (16px * 2) - title: e.g. 64px (32px * 2) ### Spacing - line height between each paragraph: e.g. 20px - space (vertically )between paragraph and subtile: e.g. 30px - space (vertically ) between subtitle and title: e.g. 60px (30px * 2) - space (vertically ) between paragraph and small picture: e.g. 60px ### Font Family - if you want to go classic or elegant: serif (with tail at the end) - something crazy, very stylized, hand-writing, pixel fonts, only applies for certain things: display (e.g. halloween) - calm, easy to read: sans-serif (e.g. quicksand) - stay with one font (don't mix) ### Font Weight - put emphasis - paragraph: medium for readability - emphasized text in paragraph: bold - subtitle: medium - title: bold ### White Space - space between content - make it 12 columns (gap 20px ~ 50px) - content starts from second column ### Border Radius - keep consistency - image: e.g. 30px ### Contrast - don't ever use pure black - make paragraph content most grayish: e.g. #565656 - make subtitle second grayish: e.g. #333333 - make title least graish: e.g. #131313 ### Logo - choose another font to make it fun: e.g. lobster - font size: 32px - pick a text color from image
Thank you so much, I tend to struggle a lot designing pages and power point presentations, but not anymore thanks to your tips. This is just what I needed.
Figma tipster her: if you have a oject selected, hold down the alt-key and hover your mouse over another object you can se the px distance to that object/group With the arrow, if you put it in a group with ctrl + g and change scale mode by pressing the k- key it scales. ps it can still be a bit finicky so scale I found it best to scale it from the front point
I am glad you back. I try to follow up your sneaker example on Adobe Dreamwaver. Can it be Dreamwaver react different as your program? I have problem with content: flex; The text jump by content: flex; to the right ?! and not stay under the sneaker
That was a cool episode, learned a lot, THANKS! We hope you continue making those kind of videos, talking about colors matching and maybe responsive typography !
Hi, I learnt a lot from your Typography tutorial which I am looking for to learn. I created my portfolio but doesn't have this kind of idea how to give proper or specific font size and spacing between heading, subheading or paragraph. I'm grateful after watching this video. Looking forward for more you tube web design tutorial from you. 😉😊
Hey Ed i am a CS student, with hardware experience but crappy knowledge about web programming. Science i began to take a look at your videos i understood more and more content and i started my web programming journey xd. Just wanna thank you for the inspiration and keep up the good work
Smallll suggestion: having a software which will show your mouse cursor more clearly and show keyboard shortcuts pop up onto the screen when u press them is a major plus for designing tuts, it'll help out beginners more
Like to push and merge this comment folks. Personally like you and your "simple dude Ed style" also purchased your React course, but cmon. In future videos could you please cover 8px grid techniques, golden ratio principles(fibonacci sequence), Em and Rem overview and why we should use them or should we use Px? And finally keep focus on mobile web design cause you know it is already 80/20 mobile/desktop ratio usage in 2020
I'm in a graduate web dev/design program and while I'm learning a lot, I wish they dedicated more time to typography so thanks for this video Ed! I also might make the switch from XD to Figma now...
Hi Ed! I really love your channel! So informative and funny in many aspects! ❤️ Can I please make a future tutorial. A react WebApp multipage and responsive using : - react - material ui grid - sass Thanks alot
I'm so happy that you decided to create this series! I struggle with creating websites that look put together and nice, so I love this type of content. Thanks!
I also struggle with design
Your tutorials are always best and easiest in the WORLD !!! 🔥😎
As always, really well put together video !
I just slap Roboto font on anything that I do 😁
Man of culture
me too :D :D
@@developedbyed i read that in your voice
@@alwinvillero4404 ha ha it happens
This isn't real. I'm a JS developer and I just started Web Designing today. How did you upload it exactly today o.O
We all are a simulation. I knew it!!
That means Thanos still have reality stone 😂😂
and i also started learning bootstrap xd
coincidence? I think sooo... :P
Your work is amazing, I'm looking for this "fundamentals" 101 for a long time, and you just explained this in the best way possible. Thank you, and continue this incredible work
... someone is up to date with his Friends references ... haha
Hi Ed, love your things, but instead of using times 2 for fonts you should try using the golden ratio (also starting from 16px and multiplied by 1.618) (16px - 20px - 26px - 33px - 42px). The golden ratio will look more natural and it gives you a bit more control than the 2x method.
Hi DeoMaarMorro, i liked your idea of using golden ratio
you have also mentioned these values in your comment (16px - 20px - 26px - 33px - 42px) what are these values
Me: *Opens figma*
Also Me: He'Ll JuSt LiNk ThE dEsIgN
Looks in the description: *Screams in Anxiety*
keep this series going
I love you Dev Ed i got all ur courses
Lookin for this type of courses for a long time, thanks a lot Ed. Can't wait to see the other episodes (especially colors related)
This is really helpful. Thanks Ed!
You've a powerful sense of humour & you're cheerful, love your videos.
i learned so much from this video, keep it up ed!!
I'm the only one when I go to the video immediately put the like automatically?
Me too
Maybe not the only one, but you are the only one that made the comment on this channel and on fireship channel
You are everywhere over the youtube. I have seen your comment in 4 different channels now
@@rashminkumarmadan3393 exacly
super valuable information. Been only up until 22 minutes (and I've been doing web/graphic design for YEARS) but so far I still really like your approach to clean type. Well done, thanks!
~Notes~
## Typography 101
### Alignment
- align title, subtile, paragraph left
### Font Size
- paragraph text: e.g. 16px
- subtitle: e.g. 32px (16px * 2)
- title: e.g. 64px (32px * 2)
### Spacing
- line height between each paragraph: e.g. 20px
- space (vertically )between paragraph and subtile: e.g. 30px
- space (vertically ) between subtitle and title: e.g. 60px (30px * 2)
- space (vertically ) between paragraph and small picture: e.g. 60px
### Font Family
- if you want to go classic or elegant: serif (with tail at the end)
- something crazy, very stylized, hand-writing, pixel fonts, only applies for certain things: display (e.g. halloween)
- calm, easy to read: sans-serif (e.g. quicksand)
- stay with one font (don't mix)
### Font Weight
- put emphasis
- paragraph: medium for readability
- emphasized text in paragraph: bold
- subtitle: medium
- title: bold
### White Space
- space between content
- make it 12 columns (gap 20px ~ 50px)
- content starts from second column
### Border Radius
- keep consistency
- image: e.g. 30px
### Contrast
- don't ever use pure black
- make paragraph content most grayish: e.g. #565656
- make subtitle second grayish: e.g. #333333
- make title least graish: e.g. #131313
### Logo
- choose another font to make it fun: e.g. lobster
- font size: 32px
- pick a text color from image
Thank you so much, I tend to struggle a lot designing pages and power point presentations, but not anymore thanks to your tips. This is just what I needed.
A very talented teacher explain things in attractive method
I love all your videos I have been following them all them.
Keep it coming, please
Figma tipster her:
if you have a oject selected, hold down the alt-key and hover your mouse over another object you can se the px distance to that object/group
With the arrow, if you put it in a group with ctrl + g and change scale mode by pressing the k- key it scales. ps it can still be a bit finicky so scale I found it best to scale it from the front point
I am glad you back.
I try to follow up your sneaker example on Adobe Dreamwaver. Can it be Dreamwaver react different as your program? I have problem with content: flex; The text jump by content: flex; to the right ?! and not stay under the sneaker
That was a good demonstration. Do some more design videos. you're awesome.
Thanks for putting this video out. It really helped me. Cheers.
You Have Nailed it. Thank you so much
Informative and simple. Great job
You just basically saved me from a disaster. I've been looking for design tutorials and thank god you uploaded
That was a cool episode, learned a lot, THANKS!
We hope you continue making those kind of videos, talking about colors matching and maybe responsive typography !
Thank you so much. This was what I needed for my personal projects.
Somebody likes the tales of Joey Tribbiani hahaha!
Thanks ED!
(So excited about this series!)
This man knows how to get laid!
i have been waiting for this so long. Thank you so much!
Love this. Make more design videos
Typography lets do it now.
My notification is 1min late, damn
More like this, please. This is amazing.
Hi, I learnt a lot from your Typography tutorial which I am looking for to learn. I created my portfolio but doesn't have this kind of idea how to give proper or specific font size and spacing between heading, subheading or paragraph. I'm grateful after watching this video. Looking forward for more you tube web design tutorial from you. 😉😊
really very much excited about this web design series, I have been waiting for this series. thank you ED
Great !!! I am enjoying your teaching styles.
Great value. Thanks for sharing!
this is a clean teaching to basics. you are amazing. keep going please, i am following videos. 🥂
Continuity is a word and you used it correctly.
Can you tell what is you Microphone ?
Your videos get more and more interesting
Thanks you for the awesome video! I was struggling with this and It helped me a lot
Hey Ed i am a CS student, with hardware experience but crappy knowledge about web programming. Science i began to take a look at your videos i understood more and more content and i started my web programming journey xd. Just wanna thank you for the inspiration and keep up the good work
Very nice video Edward! I hope you are feeling well
I just watched your video of colour theory and it was amazing. Please make more videos about colours.
Smallll suggestion: having a software which will show your mouse cursor more clearly and show keyboard shortcuts pop up onto the screen when u press them is a major plus for designing tuts, it'll help out beginners more
Wonderful tutorial! Keep them coming. I find amazing the idea of making a serie about design.
Enjoyed watching this video, so much useful stuff.
Go on Ed, do all the videoooos about web design! I'm new and so into this :D and I'll be glad to see tutorial about colors and so on!
Someday somewhere somehow I'm Going to meet you and Just Give thanks in person ...Big Student Fan💯
Love this! Was just getting into ui design.
Ed: experince.
Also Ed: This makes so much sense
Nice videos man, your tips are really on point. Good job.
ruclips.net/video/--RgaEruNnY/видео.html
you are doing great work man
Thanks for this, helped me
That arm though! Are you working out? 🏋️♂️
Maybe 😏
Thank you for this content, it really helps
Learned a lot from you❣️❣️ thankuu ed
I needed this so bad! Struggling with web design while becoming a web developer isn't funny at all.
Like to push and merge this comment folks. Personally like you and your "simple dude Ed style" also purchased your React course, but cmon. In future videos could you please cover 8px grid techniques, golden ratio principles(fibonacci sequence), Em and Rem overview and why we should use them or should we use Px? And finally keep focus on mobile web design cause you know it is already 80/20 mobile/desktop ratio usage in 2020
Woow you are the best Dev.
Awesome ed binge watching this today
Really nice video, Ed! Thank you!
Yes, a colours video would be good!
Soo easily understandable tutorial. Thanks,
ED.
Thanks a lot. its very useful for me.
I'm in a graduate web dev/design program and while I'm learning a lot, I wish they dedicated more time to typography so thanks for this video Ed! I also might make the switch from XD to Figma now...
Thank you for your video, it helps me a lot!!!
excellent, keep them coming, and i'd love to see a colour tutorial please!
Really interesting! Please, go on with these lessons. Cheers from Italy!
I like the video before I watch it! You are awesome!
Please never leave the youtube 😭
Finally one of the first one....from notification squad ✌🏻
we need a backend course xd
Like the video! And yes, you can use pixels for a line-height in Figma.
Thanks a lot ,this was really helpful :)
Love the vids man, keep them coming.
Serif is actually easier to read for dyslexic people. The old rule in news print is to use serif as paragraph and sans on headlines and sub headlines.
Thank you so much! I really enjoyed and benefited from this video.
41:45 yes please!!
I strugle with design. Thanks you came up with this series.
Omg just the video I needed thank you so much 🙏
You're amazing, thank you so much.
When Ed makes a typo in the typography video ! experince = experience 😂
Nice tutorial!!!! Please also do a color one.
Youre a good man.
Sounds great! Thanks a lot 👍
Thank you as always!!! Learn so much from your content
First time seeing your videos, and when you said "bad, like naughty" I laughed so hard. Thank you for the charismatic nerdiness!
Keep this great content coming and SHAVE :D
Thank you!!!!! Not all heroes wear capes!
The thumbnail alone deserves a like xD
i like u as designer more than as a developer
Yes, Master. Teach us more about colors and stuffs. We need it. We want it.
Hi Ed! I really love your channel! So informative and funny in many aspects! ❤️ Can I please make a future tutorial. A react WebApp multipage and responsive using :
- react
- material ui grid
- sass
Thanks alot
Dev , can we expect a logo for this channel made by yourself , or can I make one for you ?
Awesome episode, thank you!
19:40 - not "sans and sans serif", but serif and sans serif fonts ;) But I love your videos anyway!
Love this content please make more videos like these❤