INTRO TO LAYOUT: Free Web Design Course | Episode 6
HTML-код
- Опубликовано: 13 июн 2024
- In order to understand the secrets of composition for graphic design you first need to understand how powerful layouts can be.
🤑 FREE “Principles of Layout” Handbook - Download here 👉 bit.ly/3M7cuB3 🤑
These are the first steps for you to master this greatly important fundamentals of graphic design. Just like a good architect, if you have a good understanding of the laws of physics, composition, and human perceptions you are going to be able to create more impactful and well-designed outcomes.
Timestamps:
· Intro 0:22
· Examples 0:44
· What makes a good layout? 1:34
· Trick Number 1 2:14
· Trick Number 2 7:42
· Exercises 13:47
Watch every video of the Free Web Design course here: • Web Design 101: Free F...
Learn how to build custom websites with Webflow FAST: bit.ly/3xyBsoF
-
Find me on other social media platforms:
Instagram: / ransegall
Twitter: / ransegall
LinkedIn: / ran-segall-0b582a33
-
Gear & Book Recommendations: bit.ly/2ohFOuj
#FreeWebDesignCourse #webdesign #freelancer
Thanks for watching the video INTRO TO LAYOUT: Free Web Design Course | Episode 6
What makes a good layout:
- clear, not confusing
- interesting, not boring
- help users consume content
How to:
(02:30) 1. create hierachy / contrast (have at least something large, medium and small on your website)
(07:42) 2. use grids: usually a 12 column grid is used in webdesign (recommend book: "grid systems" by Josef Müller-Brockmann)
Is there any other book about grid that uptodate?i find josef muller lack of picture is confusing
Another tip not mentioned here is that white space is your friend. Don't afraid to use it.
it's so usefull
What is the software he used ?
@@MiMi-yc1ek Adobe Xd
I am 70 yrs and into website building. For beginners it is very useful. But it thoughtful for you to have selected the topic. Thanks Ran!
Always consider 1-2-3 in a design like big-medium-small to drive the user eye 👍 this is the best tip flux i'll keep that in mind
thanks! 🙏 ❤️
me too
amigo everything that comes out of your mouth is pure gold
Thank you so much for this Ran... We all appreciate what you're doing! You can't imagine all the help you provide us with this free course, especially to people like me who can't afford one. Thanks again, may God always take care of you brother!
You’re welcome Dave! Happy to
@@FluxAcademy Honestly, so much value here! God bless you. New subscriber :-)
Exactly my thought, thank you so much for your hardwork, we benefit from it so much. May God really bless you
@@FluxAcademy Hy am learning Ui Ux designing.
On RUclips No one Have any rules about Ui designing they just placing things contant on page but according to me there are Rules to placing things in web like what is font size of Nave bar contant How much Distance we place other contant plz guide me about it if any books about Rules plz let me know
My design journey is about to be a whole interesting ❤❤❤
Thank you! Your free course has really boosted my skills as a self-taught during the lockdown, and opened my perspective. I now have more clarity in design thinking. Keep up the amazing stuff
Thank you so much for this course! I have really enjoyed it so far as I am looking into becoming a web designer after college graduation. Of all the tutorials I've tried so far, this one is by far the best in that it is comprehensive, easy to understand, and well organized. Look foward to the rest of the vids, and Thanks again!
Your content really makes me feel more motivated. And the way you teach is what i was looking for a long time.
This series is just absolutely amazing. I am binge watching and taking notes:) Thank you so much!
Hello, please did this course work out for you?
Could you please make a detailed video on "how to estimate cost of a web development project as a beginner"? Please do this. There are almost no videos on this topic and as a beginner developer, I find it very hard to estimate correct cost to ask for.
Great basic content. "Basic" means everyone can enjoy it. really good stuff!
I'm amazed you managed to find a site like that.
@Anthony Okeiyi have you tried webdesignmuseum.org? They have super old, terrible websites from years past lol
@@yolandabenz4115 Thanks for linking that site! This is actually pretty awesome (esp the pepsi one 🤣)
@@yolandabenz4115 Thanks for this ,helps me to analyze the huge difference bet web design trends
How did he?
really thankful to you for teaching a layouts in a wonderful ways
Thank you very much for the content. There is no such detailed information in the Spanish language. I don't understand English but thanks to the subtitles I overcome this language barrier and it allows me to understand with greater precision things that are not taught at the university. Thank you! Greetings from Argentina
Thank you for this video!
This was really detailed, clear and easy to follow. Most importantly -- had information that is not easily found on the web.
keep up the amazing work :)
Thank you for this wonderful episode! really good.
These video's are amazing. Learned so much from them. Can't thank you enough for this!
Glad to hear! That’s why we do them 🙌
thank you so much for these free courses!!
This series is going to be amazing - I seriously need more help on design :P - thank you :D
Thanks Ran i appreciate your effort. This tutorial on web design is really helpful. Many thanks
I new to ront-end web development and these sessions are golden bro. Well explained!
Thanks so much ! amazing course.
Thank you so much for your kind help!
alread learnd so much from you dude, cant appreciate it enough
So happy to hear! Thanks for letting me know Thomas!
Thank you Ran, this is amazing!
I learn a lot watch this, my first website design is for my mom for health product but its quite good. But now I think I need redesign it
Great video Ran. The way you explain things is just really easy to understand. Keep it up.
That’s great feedback! Thanks
I love this course.
Clarity and Hierarchy, absolutely.
Thank you so much for this dude. love it
Man you are very knowledgeable. Thank you tons!
Thank you so much for this series!
Glad you like them!
very very helpful class for me .. Thank you so much...for your class...
Oh! So you're applying art theory to web design. I get it now!
Amazing video. Thanks so much
Thank you for you are improving our skills
thank you very much for this course
Something so simple escaped me! You are the best, Thank You!
your channel gave me a lot of inspiration when I get stuck, thanks Ran.
Happy to hear!
GREAT vid, hombre.
Learned something even more fundamental than big-medium-small or grid positioning. I learned to *separate layout design from web page coding.* Doing this - and *not* with a HTML/CSS building graphic tool like Bootstrap Studio but with a purely layout design tool like Canva - I lose no time building HTML and CSS for a page I may ultimately dislike.
I'll be back for more layout education.
Thanks for the wisdom!
Thank you so much what a great video
loved it, many thks
Thank You! ❤
Nice one with the big, medium and small principle. Really, really helped a lot of things click into place for me
Glad you found it helpful Sean! It’s one of my biggest takeaways from design school
Thanks for the size hierarchy tip!
Valuable video thanks
Thank you, very useful
Great video, awesome course
Much love from Nigeria
Thanks 🙌
Is there a video in this series that explains how to design for responsive web? I'm trying to look for one, but I don't see it.
Thanks for enlighten me
Very helpful content thank you
Thank you Ran , u know u r doing a wonderful work here keep it up 👍
Bravo, great video! Amazing feeling of the design :))))))
Thank you!!! 🙏✨
Thanks so much sir
This is a great chanal for frontend web developer.
Sooo Good👍
Everyday i am Waiting for you tutorials, i really love u
Thanks!! 🙌
Thanks you sir, it is sooooooo informative....................
0:17:
I think I've heard from somewhere before that this is a website design discipline.
Messy websites that were intended to be messy just like how there is maximalism and minimalism.
So helpful!
omg you're so good I'm gonna follow you sensei
Hi there!
On my 5th video already..
I’m 46 years old and I’m changing my job/ career, and just wanted to say that your explaining and sharing all this information is really helpful.
Thank you very much and well done!
Thanks
That's great Alan! We have lots of career changers at Flux Academy.
Thank you
Making my quarantine period useful....
All the way from India🇮🇳
Yey!
thank you, these hinte was really was
thank you sir ...
coming close to 300k
Must say that on that poster, the text was the last thing I noticed. It was first the face, the red element, the upper left and right text graphics, and then the big name text at the bottom.
I would say the same thing
Great one🙂
Hi. Thank you for this video. I am a web developer who don't know how to design. The big, medium and small hierarchy is very interesting. I always see web design as very very broad but with your videos I am on the right path.
Super happy to hear! You got this!
Also, check the #30dayswebdesignchallenge video and instagram hashtag. This might be helpful to you.
Thanks
BEST COURSE!
thank you 🙏 💜
Very helpful video ♥️
Thanks Amit 🙏
Thanks a lot 😊❤️😊
Happy to!
Thanks!
Appreciate it 🙏
thank you!:)))
This is so helpful Ran. I am so so happy I came across this. More power to you!!
There’s just no limit to creativity
3:20 i honestly like it :'D
Thanks you very much mrs for course
iam form INDONESIA
Happy to hear it was useful! thank you 🙏
Due to covid 19 i have to stay At home...for learning website design i have to go out to any IT CENTRE...It's high time to learn from FLUX RUclips channel...owe to Ran❤sir...Go Ahead...always love to you.🥰
Good use of you’re time!
"Number 1, number 2, number 3" on repeat.
היי רן אני מעצבת גרפית ומעצבת UI\UX כרגע בגלל המצב אני התחלתי בתור פרילנסרית
אני מאוד נהנית מהסרטונים שלך!
אשמח לקבל עוד טיפים לגבי תהליך עבודה עם לקוח
אם זה בעיצוב ראשוני של אתר או אפליקציה וטיפים של איך להחליט מה נכון או לא מבחינת חווית משתמש,
דברים שאתה נתקל בהם בטח לפעמים בעבודה עם לקוח.
תודה
oh my god!! your video are helpingme so much!
just one question though, i cannot find any video about designing huge touch screen. like "museum-type" touchscreen layouts. what should i consider when design a 55" or more touchscreen.
Thank you so much.. which software tool is best for web design? Adobe Dreamweaver?
Nice video
Hello RAN, I've been watching your videos for a while now and your content is really amazing. I just want to let you know that the link for the layout book is not working for some reason and it would be very nice if you re-uploaded it. Thank you so much for your content and waiting for your new videos.
Thank you very much for the video, it made a lot of sense, when I started to get excited, it ended = (, jokes aside, very good, I liked, let the next one come.
Haha! More coming up!
@@FluxAcademy I'm waiting
Sick :D
Thanks Ran for sharing tips and tricks.
Do you have same kind of tips for App Design. Which we consider before jumping into tools?
These are general design principles that you can apply to app design as well
I have understand the gradient course.
Hey, can you tell me what keys do you use to adjust the margin of the columns. As soon as I press the arrow key up and down, it shifts from the left-right margin selection to the single left margin and starts adjusting the margin towards the left side. Thanks for the help.
I search for the First Web example, the green hotels paris 13. and I belive that your review help them 'cause it looks a little bit different now. They remove a lot of the messy stuff thank to you i guess :D
I clicked on the download button on the website but i didn't go through. And i must say that a very nice website.
Hey I have actually worked for Green Hotels (as a waitress) ! Never knew their website was that bad
video completed
Hi Ran! Thanks for the video! Your content is great as usual!! I have a question ..Is there a way to change the size of the grid in webflow or is it something fixed in the designer view? .. And also..where can I buy this black background which I see in your videos? I assume it adds better quality for sound right:) Thanks
What grid? The you mean the guides (which you cannot change) or the grid component (which you can customize?)
@@FluxAcademy Sorry! yes..I meant guides!Ok..so they cannot be changed:(..I m designing certain pages with max width of 1200px..and Webflow's guides are a max of 980-1000px wide..Maybe I ll create a temporary Div as a guide and use that as a reference. Thank U for the clarification!:-)..And for the background ..did you pick this up in amazon?.. I was trying to search for this but didn't have luck finding it! Thanks again:)Have a lovely day! Hope the situation is better there! Be safe