KEY Web Design Principles: Navigation, Hierarchy & Color
HTML-код
- Опубликовано: 2 июн 2024
- 🤑 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
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"
PERSPECTIVE
probably the client
Web design doesn't have to be difficult
All you need to do is to watch Ran Segal's Videos daily
That's the way it is :D
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.
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.
@@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.
Videos like this is exactly the reason I love the service RUclips provides, and the dedicated RUclipsrs that upload to it. Incredible breakdown. This is a college level, high level overview of this topic. Thanks!
I love how much you share with us!
I've learned so much from your videos. Thank you for sharing with us!
Thank you for the type of the content. We all need more such videos
That was a perfect breakdown of very important steps to be taken while designing a beautiful attention catching webdesign!
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!
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
Great breakdown to help me explain these principles to clients, thank you!
we need more content like these
On how to design better websites (advance only )
This is freaking helpful! Glad I found your channel 🥰✨
NO 2 is information overload!
Amazing, so clear, thank you Ran !
This is awesome ❤️
I will definitely make sure to follow this the next time...
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!
just amazing tips Love your speech .
Excellent synopsis thanks!
This is a fantastic video. It's clear and easy to understand your explanations. Thank you for providing this information.
Awesome video about the best web design practice.
The first site is nevertheless superior. It violates all your rules yet is better. The whole s greater than the sum of the parts.
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!
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.
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
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 :)
Wooow super helpful, thank you so much !!!
Great video ran, thanks for sharing this! :)
So useful thank you!!
Love your tutorials from pakistan
Sir withthe help of your tutorials i learned alot ideas...❤❤
Good video, very informative, I don't watch your channel regularly, but good job on the comitment to the channel and to your audience!
בהצלחה!
Your channel videos are super super useful
Great summary.
Wow, good to know!
Thx for this info!
Appreciate this video thank you
Those S sounds are tearing my eardrums . Good video btw
I suggest the usage of a DE-ESSER in order to eliminate the Sssss.
I only watch for Ran’s S’s
I came in comment to write this and saw this at the top
I actually watched a tutorial how to equalize my headset lol
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"
Well organised
Great info. Thanks
Amazing thank you ❤
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 :)
Lovely explanation, thank you :)
Sooo helpful. Supef thanks❤
Great content. Thank you so much. Your channel is one of my favs.
"Form follows function."
xz
Very helpful.
Thank You Sir😊
Dude, that was really interesting! Thanx
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
This is an awesome video on websites. I just subscribed! Thanks!
amazing video I love it
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.
Very useful video!
Great video Thanks
Thank you MTNF for inviting me to watch this amazing vedio
Nice and clear
truly helped alot. Luv frm India. 🙂
thank you for the videos! What camera/mic do you use?
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" ;)
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
Hi Flux ! As designer, San Francisco Website looked more alive. May be for us, right one is common and used everywhere.
exactly exactly . if everyone uses something it doesn't make that things bad
Thank you so much for your information.
and plz gifts some more information about web Design.
Good your teaching
Thank you.
informative video ran
7:48 that was a really thought out ui transition 😁😁
thank you
Awesome video
Thank You...
Great all information.
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
Well Done
Great video
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.
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?😅
great video
Thanks
I like how you say hover
i love it , and it was a really good explaination , by the way i think they will shout down that website hhhhh
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.
3 principles of web design:
1. Navigation
2. Hierarchy
3. Color
Great job, you wrote the title in a comment. You unlocked a new achievement: Parrot.
thank you.. from korean
good..info!!
Glad it was helpful!
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)
Please make a detailes video on web design principles.🙂
This is something you experience in big screen any suggestions for small screens
Is there a template for the example you are showing? I am trying to get a website for my new home remodeling company
can you explain both website design their strength and weakness
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
I thought web design was simple until I found out it would take decades to master
Let's make a drinking game! Every time Ran says "super" take a shot.
Because that means you alway drink 2 in a row.
Which mic you're using?
Nice video.
For SEO and conversions purposes, however, the 1st law firm example is better.
Thanks for the feedback. 🙂
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.
@@gr8bskt the CTA is in the banner and easy to see.
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
If I made the san Francisco website i'd take it personally
One problem with the second page is that it didn't say law or lawyer anywhere
I'm watching this video for a design class in college. Why can't college's watch this video to fix their awful websites
What are some other principles?
Here after ux gear
principle is core
Hey!Thanks for sharing.
#introduction_web_design_q
Thank you for sharing. I do appreciate this video. However, it will be better to start with a mobile version.
How do you communicate with the client who wants everything to be big like the first Law Firm example? I mean they clearly know shit about how the design work and if they pay you it's kinda ok. But how to try to explain to them that less is more here?
Part of the designer’s job is educating the client, well, trying to educate the client. Some simply don’t want to know.
Explain why, generally designers got poor comm skills.