Edumall Preloader
WP Tutorials

KEY Web Design Principles: Navigation, Hierarchy & Color

KEY Web Design Principles: Navigation, Hierarchy & Color

πŸ€‘ FREE Web Design Workshop – Enroll here πŸ‘‰ πŸ€‘

πŸ“• FREE color guides:
The Complete Guide For Choosing Color πŸ‘‰
Color Psychology For Designers πŸ‘‰

Find me on other social media platforms:

#webdesign #webdevelopment #tutorial

Thanks for watching the video 3 Principles for better Web Design: Navigation, Hierarchy & Color


Comments (49)

  1. 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!

  2. Wow, good to know!

  3. 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

  4. Sooo helpful. Supef thanks❀

  5. Thank you MTNF for inviting me to watch this amazing vedio

  6. 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.

  7. Appreciate this video thank you

  8. Amazing thank you ❀

  9. This is a fantastic video. It's clear and easy to understand your explanations. Thank you for providing this information.

  10. I like how you say hover

  11. This is something you experience in big screen any suggestions for small screens

  12. Great video Thanks

  13. Great info. Thanks

  14. Put a de-esser on your audio because theyre really harsh

  15. That was a perfect breakdown of very important steps to be taken while designing a beautiful attention catching webdesign!

  16. One problem with the second page is that it didn't say law or lawyer anywhere

  17. So useful thank you!!

  18. 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 πŸ™‚

  19. Videos like this is exactly the reason I love the service YouTube provides, and the dedicated YouTubers that upload to it. Incredible breakdown. This is a college level, high level overview of this topic. Thanks!

  20. Well Done

  21. This is an awesome video on websites. I just subscribed! Thanks!

  22. amazing video I love it

  23. No, I don't know.

  24. 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.

  25. .

  26. 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.

  27. 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

  28. Thank You…

  29. thank you

  30. 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)

  31. Thx for this info!

  32. If I made the san Francisco website i'd take it personally

  33. 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

  34. anyone else go to the "bad" website and see how it's been redesigned? πŸ˜‚

  35. Great breakdown to help me explain these principles to clients, thank you!

  36. I NEVER use the hamburger menu on desktop. Why would anyone do that? It breaches basic design fundamentals it's bad SEO and frankly it's just bad practise!

  37. The first site is nevertheless superior. It violates all your rules yet is better. The whole s greater than the sum of the parts.

  38. 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?πŸ˜…

  39. I suck at matching colors, I just make every site "dark" mode.

  40. Amazing, so clear, thank you Ran !

  41. This is freaking helpful! Glad I found your channel πŸ₯°βœ¨

  42. Nice video.
    For SEO and conversions purposes, however, the 1st law firm example is better.

  43. I'm so glad to see your videos. Cuz I'm learning to design a web or digital product for my future. Thank you so much for making videos.

  44. Lovely explanation, thank you πŸ™‚

  45. Sir! You should become a professor someday, would never skip your class πŸ˜€ Simply explained, got through very easily. Thanks a lot, going to check out the other stuff you've posted!

  46. Which mic you're using?

  47. Dude, that was really interesting! Thanx

  48. truly helped alot. Luv frm India. πŸ™‚

Leave your thought here

Your email address will not be published. Required fields are marked *

Enable Notifications OK No thanks