KEY Web Design Principles: Navigation, Hierarchy & Color

  Рет қаралды 267,585

Flux Academy

Flux Academy

Күн бұрын

🤑 FREE Web Design Workshop - Enroll here 👉 bit.ly/3sjixLx 🤑
-
📕 FREE color guides:
The Complete Guide For Choosing Color 👉 bit.ly/3BoNSlA
Color Psychology For Designers 👉 bit.ly/3whb4jf
-
Find me on other social media platforms:
Instagram: / ransegall
Twitter: / ransegall
LinkedIn: / ran-segall-0b582a33
-
#webdesign #webdevelopment #tutorial
Thanks for watching the video 3 Principles for better Web Design: Navigation, Hierarchy & Color

Пікірлер: 144
@victordabak794
@victordabak794 4 жыл бұрын
Web design doesn't have to be difficult All you need to do is to watch Ran Segal's Videos daily
@user-bq6jv7iz2q
@user-bq6jv7iz2q 4 жыл бұрын
That's the way it is :D
@jg_quan
@jg_quan Жыл бұрын
Videos like this is exactly the reason I love the service KZfaq provides, and the dedicated KZfaqrs that upload to it. Incredible breakdown. This is a college level, high level overview of this topic. Thanks!
@ashleyrossgoingmerrily
@ashleyrossgoingmerrily 4 жыл бұрын
That was an excellent breakdown! Thank you for the reminder to think about how color is used as a way to tell the user something, not just for looks. Makes for efficient design.
@ownzies100
@ownzies100 Жыл бұрын
@comzideroninstagramdesigns4318 hahaha, next time you're trying to write fraudulent reviews and advertisements for your own company, make sure it's not being posted by your own companies account. Lmfao. Your username is literally Comzider and you're saying that "Comzider designed my website and it's so perfect, I love Comzider" -Comzider Hilariously stupid.
@bigfoot131
@bigfoot131 4 жыл бұрын
I used to think animation and the current trends were the most captivating aspect of a web site. But in reality it’s the basic simple things that really mater. Clarity to what ur trying to sell or communicate.
@mrgngrn
@mrgngrn 3 жыл бұрын
After some work experience I now always wonder whether it was the designer who did not so great or was it the client who was like "I want this bigger, and this bigger, and it's so dark with the black overlay let's get rid of it"
@DD-tb4op
@DD-tb4op 2 жыл бұрын
PERSPECTIVE
@timothy2204
@timothy2204 Жыл бұрын
probably the client
@samialvi4226
@samialvi4226 Жыл бұрын
That was a perfect breakdown of very important steps to be taken while designing a beautiful attention catching webdesign!
@adityachatterjee8839
@adityachatterjee8839 2 жыл бұрын
Sir! You should become a professor someday, would never skip your class :D Simply explained, got through very easily. Thanks a lot, going to check out the other stuff you've posted!
@annlishchynska978
@annlishchynska978 4 жыл бұрын
Thank you for the type of the content. We all need more such videos
@TheBrandSamurai
@TheBrandSamurai 3 жыл бұрын
I love how much you share with us! I've learned so much from your videos. Thank you for sharing with us!
@recipehacker9752
@recipehacker9752 2 жыл бұрын
The first site is nevertheless superior. It violates all your rules yet is better. The whole s greater than the sum of the parts.
@tysonlind4488
@tysonlind4488 5 ай бұрын
I will say that I THINK that first design was attempting to go for more of a blue/orange theme which are complentary and will make each other pop, but like you pointed out, they missed the mark and the color was more purple, making the contrast just worse AND the background was too bright and not colored well to provide contrast. Great video, I sent this along to the execs on my team! I especially liked the way that you broke down hierarchy. Will definitely be checking out more of your design videos on the channel. I'd really like to better understand image and text placement, button placement, and choosing how to break up assets and sections on a page in a way that looks professional. Hopefully I find some videos on that here, but if not, there's some ideas for future vids!
@galenhogg5324
@galenhogg5324 2 жыл бұрын
Great breakdown to help me explain these principles to clients, thank you!
@Prashant0333
@Prashant0333 4 жыл бұрын
we need more content like these On how to design better websites (advance only )
@kimcruz3889
@kimcruz3889 2 жыл бұрын
This is freaking helpful! Glad I found your channel 🥰✨
@aym280
@aym280 3 жыл бұрын
NO 2 is information overload!
@BBI-Brandboost
@BBI-Brandboost 3 жыл бұрын
With online competition continually growing, the need to have a website which provides a high quality user experience is essential. This can either be done in house if capable developers are on hand, or outsourced to a professional website design agency. Whether creating a website from scratch, or redesigning a current one, when choosing an agency to work with, it is important to understand what they will do for your website.
@nicolastorgovnick1797
@nicolastorgovnick1797 2 жыл бұрын
Amazing, so clear, thank you Ran !
@evergreen7781
@evergreen7781 3 жыл бұрын
This is awesome ❤️ I will definitely make sure to follow this the next time...
@JuliaBudahazy_authentic
@JuliaBudahazy_authentic 3 жыл бұрын
This is a real website! I had to google this to verify because it seemed like you would've gone to a lot of work to mock this up. Great review... Tx!
@henrythomas7112
@henrythomas7112 Жыл бұрын
This is a fantastic video. It's clear and easy to understand your explanations. Thank you for providing this information.
@decado7
@decado7 3 жыл бұрын
Great vid! Can I ask your thoughts on simple menu structure? Specifically how do you feel about top level menus being clickable to a page rather than just expanding a sub menu? Design wise I’m struggling to find consensus on a good way to do this
@marleyrosen3175
@marleyrosen3175 Жыл бұрын
I liked this 40 seconds in because that is exactly my issue. THank you so much for making it so clear what you will be teaching sio I won't be wasting my time (which I'm not :)
@ckernest
@ckernest 3 жыл бұрын
Awesome video about the best web design practice.
@madhumia1196
@madhumia1196 3 жыл бұрын
just amazing tips Love your speech .
@aqibafridi5281
@aqibafridi5281 3 жыл бұрын
Love your tutorials from pakistan Sir withthe help of your tutorials i learned alot ideas...❤❤
@mike85180
@mike85180 3 жыл бұрын
Excellent synopsis thanks!
@SahilSaini-fk4bg
@SahilSaini-fk4bg 4 жыл бұрын
Great video ran, thanks for sharing this! :)
@andrewcooke-hedin1903
@andrewcooke-hedin1903 Жыл бұрын
So useful thank you!!
@geniuskatie6813
@geniuskatie6813 3 жыл бұрын
Wooow super helpful, thank you so much !!!
@AndreyUrman
@AndreyUrman 4 жыл бұрын
Good video, very informative, I don't watch your channel regularly, but good job on the comitment to the channel and to your audience! בהצלחה!
@sandy_inksane
@sandy_inksane 2 жыл бұрын
Thx for this info!
@ketchups2777
@ketchups2777 10 ай бұрын
Appreciate this video thank you
@hustlershorts
@hustlershorts 4 жыл бұрын
Your channel videos are super super useful
@Sun-mc8ph
@Sun-mc8ph Жыл бұрын
Great info. Thanks
@carlcai8857
@carlcai8857 2 жыл бұрын
thanks! helpful tips :] yeah i agree that the first website did too much to grab attention and u ended up losing focus, whereas the second website did a really good job of establishing a hierarchy that actually directs ur attention to a specific main title
@seyittumturk3769
@seyittumturk3769 3 жыл бұрын
Great summary.
@amc998
@amc998 2 жыл бұрын
Lovely explanation, thank you :)
@aidavaziry8391
@aidavaziry8391 8 ай бұрын
Sooo helpful. Supef thanks❤
@valerijstolmacevs8341
@valerijstolmacevs8341 3 жыл бұрын
In my opinion, the main principle in web design is to use good content and show it right .Remaining is in the second place, anyway, it depends on your type of business, your business goals, and the position of your brand. Anyway, thanks for the video, you are doing good content
@jevgenisuija
@jevgenisuija 5 ай бұрын
Wow, good to know!
@Jewish5783
@Jewish5783 4 жыл бұрын
Thank You Sir😊
@usamasayed9553
@usamasayed9553 4 жыл бұрын
Well organised
@KundanKumar-jv7uy
@KundanKumar-jv7uy 2 жыл бұрын
truly helped alot. Luv frm India. 🙂
@NAZIFIMAGAJI-co8pi
@NAZIFIMAGAJI-co8pi 9 ай бұрын
Thank you MTNF for inviting me to watch this amazing vedio
@hakimmaghnem6288
@hakimmaghnem6288 Жыл бұрын
Great video Thanks
@expresstv6800
@expresstv6800 Жыл бұрын
amazing video I love it
@aurielklasovsky1435
@aurielklasovsky1435 2 жыл бұрын
Dude, that was really interesting! Thanx
@Asmar196
@Asmar196 10 ай бұрын
Amazing thank you ❤
@ankushladani496
@ankushladani496 2 жыл бұрын
Thank You...
@sarabose2564
@sarabose2564 3 жыл бұрын
Thank you.
@arish6406
@arish6406 4 жыл бұрын
Very helpful.
@balinthonvari7723
@balinthonvari7723 3 жыл бұрын
Very useful video!
@mohashinhossainmehrab6960
@mohashinhossainmehrab6960 4 жыл бұрын
Good your teaching
@sabia6211
@sabia6211 4 жыл бұрын
Thank you so much for your information. and plz gifts some more information about web Design.
@SUNILJOSEPH2030
@SUNILJOSEPH2030 2 жыл бұрын
thank you
@loopsdotscreative9744
@loopsdotscreative9744 3 жыл бұрын
7:48 that was a really thought out ui transition 😁😁
@despacitodaniel801
@despacitodaniel801 Жыл бұрын
I like how you say hover
@vintageretromanmusic_official
@vintageretromanmusic_official Жыл бұрын
This is an awesome video on websites. I just subscribed! Thanks!
@BugArray
@BugArray 2 жыл бұрын
Nice and clear
@manarali4094
@manarali4094 Жыл бұрын
Well Done
@anantsharma5330
@anantsharma5330 3 жыл бұрын
Hi Flux ! As designer, San Francisco Website looked more alive. May be for us, right one is common and used everywhere.
@ajiteshmishra
@ajiteshmishra 3 жыл бұрын
exactly exactly . if everyone uses something it doesn't make that things bad
@junaidtariq4547
@junaidtariq4547 4 жыл бұрын
informative video ran
@DanielMajyarov
@DanielMajyarov 3 жыл бұрын
Thanks
@hsh2119
@hsh2119 4 жыл бұрын
Those S sounds are tearing my eardrums . Good video btw
@davidecastellana01
@davidecastellana01 4 жыл бұрын
I suggest the usage of a DE-ESSER in order to eliminate the Sssss.
@michaellancaster6490
@michaellancaster6490 4 жыл бұрын
I only watch for Ran’s S’s
@satanshupathak196
@satanshupathak196 4 жыл бұрын
I came in comment to write this and saw this at the top
@David-wi1ou
@David-wi1ou 3 жыл бұрын
I actually watched a tutorial how to equalize my headset lol
@Whatdisaypt1and2
@Whatdisaypt1and2 3 жыл бұрын
I wonder if there is a guy teaching how to make videos and using his video as an example. "you hear that S sound? That's not supposed to be so jarring, watch this video over here, that's how the S should sound"
@sherefahmed7216
@sherefahmed7216 2 жыл бұрын
Awesome video
@Dinophox
@Dinophox 4 жыл бұрын
Great video as always! What about doing some videos about making websites for mobile devices? For example traffic on my client's website is roughly 50% from a smartphone. I know desktop is a "priority" but would like some advice from you Ran :)
@ztq9117
@ztq9117 2 жыл бұрын
Great video
@nate4732
@nate4732 3 жыл бұрын
"Form follows function."
@kouilyphaboriboune9518
@kouilyphaboriboune9518 3 жыл бұрын
xz
@mdruhulamin9132
@mdruhulamin9132 3 жыл бұрын
Great all information.
@mdruhulamin9132
@mdruhulamin9132 3 жыл бұрын
We are the Best Web Design Professional Expert Designer Tehran. Leave the design of your own website to the professional design team of Spad Company. Your website reflects the values, beliefs and identity of your business, also referred to as a virtual office. (Best Web Design Professional Expert Designer Tehran)(بهترین طراح متخصص حرفه ای طراحی وب تهران)With a professional website, your business will be available to anyone who needs your services anywhere in the world, 24 hours a day, 7 days a week. Contact us if you need professional website design. More information Click this Links:www.spad.co/services/website-design
@christinegivens9048
@christinegivens9048 4 жыл бұрын
Great content. Thank you so much. Your channel is one of my favs.
@pavelmyshov464
@pavelmyshov464 4 жыл бұрын
thank you for the videos! What camera/mic do you use?
@rajdeepbanik9539
@rajdeepbanik9539 2 жыл бұрын
great video
@pipublic_de
@pipublic_de 4 жыл бұрын
Is it really considered as "Bad practice" to use a hamburger menu button instead of a nav bar on a desktop website? In my opinion there are 2 factors to consider: 1. People are used to hamburger menu buttons as they are using it on mobile devices all the time. So a good placed and well designed menu button isn't confusing or feels too much as an unnecessary extra-click for users. 2. A hamburger menu button can improve hierarchy on a page. As it lets the eyes focus on the content of the page instead of distracting the eyes with nav bar menu items. --- So I would answer my own question in the first line of my comment with: "It depends" ;)
@doncarlmikoquirante78
@doncarlmikoquirante78 4 жыл бұрын
Actually if the user is using desktop, It's better to use the nav bar. It just really depends on heirarchy and how you are going to use it properly without confusing or distracting the user on where to look. If the visitor of the website is using mobile, you can just easily make it responsive
@user-wx7qx8mw6p
@user-wx7qx8mw6p 3 жыл бұрын
thank you.. from korean good..info!!
@FluxAcademy
@FluxAcademy 3 жыл бұрын
Glad it was helpful!
@mattyblake9427
@mattyblake9427 3 жыл бұрын
i love it , and it was a really good explaination , by the way i think they will shout down that website hhhhh
@dhstrother
@dhstrother Жыл бұрын
i mean when you use language the way you do, yeah it seems like the first design was "harder" but actually the hamburger menu is always accessible on every page and has the exact same submenu system. i think you're speaking more to convention trends than what is actually "good" or "easy" just wanted to point this out because i think changing our perspective on how we present this info brings us closer to an objective look at user experience personally, i think both websites suffer from all the same design flaws.
@Tophymaster
@Tophymaster Жыл бұрын
To be fair, the first Law Firm has the better headline (not perfect but better). The second one "Exceptional Outcomes" is so generic and can be used for everything. With the first one I know from the beginning that the firm is focused on Family Law and centered in San Francisco. I have hint if the site is the right one for my intentions.
@chriswilcox8977
@chriswilcox8977 4 жыл бұрын
That's an interesting thought on using the mobile menu style for desktop...I've never been a fan - I'm not entirely convinced on left vertical menu designs either. However, the mobile menu style is relevant to mobile...however, in my growing opinion, the mobile menu needs to be ignored, or at best considered secondary. Mobile visitors should be able to navigate the core pages without using the menu. Often, I find this mobile-first approach is missing, even from the most expensive websites.
@aakash-codes
@aakash-codes 3 жыл бұрын
Please make a detailes video on web design principles.🙂
@rajatsinha9671
@rajatsinha9671 Жыл бұрын
This is something you experience in big screen any suggestions for small screens
@florivalsousaguterresbelo5860
@florivalsousaguterresbelo5860 2 жыл бұрын
can you explain both website design their strength and weakness
@talben-zvi575
@talben-zvi575 2 жыл бұрын
Great video! Feel like it's going to help me out a lot. Random thought I had- did you make the worse website yourself for the demonstration or did you just pick a random website to talk smack on?😅
@kabiawuabdulwaduud4204
@kabiawuabdulwaduud4204 2 жыл бұрын
Hi guys, really nice video But I have a question, how to do I get Web page templates that I can implement as a beginner in Web development (html,css,js)
@vicky.y8922
@vicky.y8922 5 ай бұрын
but what would make a good color contrast? Because for the "bad site"i understand the artist's choice for colors..they must have chosen them because thow are on the opposite ends of the spectrum on the color wheel and make a good contrast in drawing
@rt4476
@rt4476 3 жыл бұрын
Is there a template for the example you are showing? I am trying to get a website for my new home remodeling company
@ck0024
@ck0024 3 жыл бұрын
3 principles of web design: 1. Navigation 2. Hierarchy 3. Color
@SPL1NTER_SE
@SPL1NTER_SE 2 жыл бұрын
Great job, you wrote the title in a comment. You unlocked a new achievement: Parrot.
@alexb8455
@alexb8455 2 жыл бұрын
If I made the san Francisco website i'd take it personally
@AFMCarlos
@AFMCarlos 4 жыл бұрын
I thought web design was simple until I found out it would take decades to master
@carlosadolfoamarante7801
@carlosadolfoamarante7801 2 жыл бұрын
From mi pov, the first web is better designed. Even though the second one is prettier, the first one is focused on converting to sell. So you have a big title telling what they are and where (they are in San Francisco and they provided law services specialized in family), short comments of the services they have already provided, and two buttons, one to talk with someone or maybe send and email and other one to read testimonials from previous clients. Also the logo is there and a phone to call. On the other hand, in the other page I only see the logo and text talking about how is their service but you can't know more unless you start navigating the site. I'm pretty sure that the first one produces more sales than the second one
@ani3188
@ani3188 2 жыл бұрын
Which mic you're using?
@koraanjamar
@koraanjamar 2 жыл бұрын
Nice video. For SEO and conversions purposes, however, the 1st law firm example is better.
@FluxAcademy
@FluxAcademy 2 жыл бұрын
Thanks for the feedback. 🙂
@gr8bskt
@gr8bskt 2 жыл бұрын
Can you help me understand why the first website is better for SEO and conversion? If I was looking for those specific services, I would have x'd out of that page in 2 seconds. Way too noisy. Gives me no confidence that they will be concerned with me as a paying client if the website isn't even interested.
@VengeanceSinX
@VengeanceSinX 2 жыл бұрын
@@gr8bskt the CTA is in the banner and easy to see.
@soundsgate5068
@soundsgate5068 3 жыл бұрын
Let's make a drinking game! Every time Ran says "super" take a shot. Because that means you alway drink 2 in a row.
@Digitalassest
@Digitalassest 2 жыл бұрын
principle is core
@MeVerseMinato
@MeVerseMinato 3 жыл бұрын
Here after ux gear
@LinhTran-hx6xh
@LinhTran-hx6xh 3 жыл бұрын
Thank you for sharing. I do appreciate this video. However, it will be better to start with a mobile version.
@king0vdarkness
@king0vdarkness Жыл бұрын
One problem with the second page is that it didn't say law or lawyer anywhere
@illeone5433
@illeone5433 3 жыл бұрын
What are some other principles?
@oracleofcourage
@oracleofcourage 3 жыл бұрын
I'm watching this video for a design class in college. Why can't college's watch this video to fix their awful websites
@willw4096
@willw4096 Жыл бұрын
9:00 10:10
@sertayeee4414
@sertayeee4414 10 ай бұрын
The second website's use of color on text was not exclusively links, certain key numbers and words were coloured. I think this is good design but its unfair to critique the first website on this point when the second website does it too.
3 Ways To Improve Your Design (FAST)
4:20
Flux Academy
Рет қаралды 35 М.
The 5 Design Principles (But in Web Design)
11:07
The Website Architect
Рет қаралды 62 М.
Каха заблудился в горах
00:57
К-Media
Рет қаралды 9 МЛН
A teacher captured the cutest moment at the nursery #shorts
00:33
Fabiosa Stories
Рет қаралды 49 МЛН
Iron Chin ✅ Isaih made this look too easy
00:13
Power Slap
Рет қаралды 36 МЛН
Before & After: Small Business Websites Redesigned
13:47
Flux Academy
Рет қаралды 329 М.
Designers Only Need These 6 Fonts. Trash the Rest.
8:10
Flux Academy
Рет қаралды 626 М.
Everything About Above The Folds
17:04
The Website Architect
Рет қаралды 47 М.
Psychology of Website Design: Neuromarketing and Lead Generation
15:23
Orbit Media Studios
Рет қаралды 9 М.
4 Foundational UI Design Principles | C.R.A.P.
9:16
Jesse Showalter
Рет қаралды 198 М.
Web Design: The Complete guide to getting started in 2022
34:50
Flux Academy
Рет қаралды 233 М.
Unwritten Rules for Better Web Design w/ Vitaly Friedman
8:42
Everything About Website Navigations
16:20
The Website Architect
Рет қаралды 90 М.
The 5 Levels of Web Design - Worst to BEST UI/UX
11:22
DesignCourse
Рет қаралды 65 М.
Website Design Process for Clients (Start to Finish)
18:49
Megan Weeks
Рет қаралды 82 М.