Your Mobile Navigations STINK! Better UX AWAITS!

Visit linode.com/desi... for a $20 credit on your new linode account.
-- In today's quick video, I'm going to take a very common mobile navigation UX pattern (that I see too many of you doing!) and make it much better through a series of 6 different improvements.
Let's get started!
#ux #mobile #navigations
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

As always, you know the drill -- sub up!

[@cwp888]

Done

[@farlight6044]

Subbed and notifications on! Love your work, and I'm excited for more content!

[@thinkingaloud7925]

Now it feels like 2020

[@JoshuaKisb]

just realized i wasnt subscribed. lol watched so many videos i just assumed... anyways... Subscribed!

[@iab2gaming]

@@thinkingaloud7925 css dark neomorphism login form ui design

[@Sysshad]

I dont like it - because to many controls and content at start makes a messy and hard to understand interface for unexperienced users. Just my 2 cents

[@pavankumarv5214]

Yes😅

[@disco.lemonade]

I would keep the blue bar, it makes all sense in the world to have CTA at the reach of your thumb with using two hands or a sort of reachability gesture. In fact, an 'experienced user' wouldn't need more like a couple of buttons to move around. That's where the blue bar makes perfect sense if someone doesn't want or know to dig around. That being said, that bar does not apply to all sites, and maybe I missed something but "View all my work" and "portfolio" seemed redundant. Also, I wouldn't place the carousel there. That, the hamburger menu, the blue bar, the 'view my work' and the gallery make the design too busy in my opinion, too busy for a smartphone anyway

[@eliastouil7686]

It's 'too many' controls that lead to the same place though. I would agree with you if this site had 10 places to go to, but it's not the case. If your user comes with the intention to look at the portfolio, wherever they look/click, they'll be there.

[@ben6]

The original is not a portfolio, it's just a useless landing page that will either piss people off when they're in a hurry, and at best delay them. Users are demanding. Give what people want ASAP, and make it easy. That's what this video was about.

[@pradeeppandey743]

If the UI feels too busy, it can def be timmed down and made to be fit into the original minimalist aesthetic for sure. But again, reiterating Gary's point, give em what they want first.

[@aidanbrumsickle]

I've never seen that "scroll indicator" before, I wouldn't know what on earth it meant or that i could scroll. I think we've gone too far in terms of abandoning affordances or over-abstracting them.

[@thedankest1974]

Aidan Brumsickle agreed

[@aidanbrumsickle]

I think that it would be a good idea to have something akin to the “prefers-reduced-motion” css query, but like, “prefers-increased-affordance” for people who are less fluent in modern web design language.

[@gileee]

Looks like some gamepad icon. Just use an arrow.

[@iab2gaming]

@@thedankest1974 css dark neomorphism login form ui design

[@mrleblanc]

Usually it would be animated to make it clear, the white ball would go from bottom to top

[@Bigheadedwon]

There's no good way to design a proper web site for viewing on a phone. I absolutely hate doing it, everything's a compromise. I can't stand that so many people don't view web sites on computers anymore.

[@dennishofke]

Yesss finally someone said it. I really dont get how people can design a website "mobile first", i always start off with the design for the biggest screens and then adapt the design for smaller ones. However when looking at the statistics it becomes very clear why you should focus more on mobile surfers

[@barasanasenya257]

Quit your job

[@JivanPal]

@@dennishofke, "mobile first" generally doesn't mean designing for mobile first, and then adapting that mobile design for larger viewports. Instead, it refers to writing your CSS so that it defaults to a mobile design. In fact, it's generally quite good practice to design for larger viewports first, and then think about how best to adapt the flow of the content to smaller viewports (but still write your CSS vice-versa as described above). Andy Clarke presented a really nice exploration of this at London Web Standards 2019: kzbin.info/www/bejne/eGSWgXSPpLp4i8k

[@diablo.the.cheater]

@@dennishofke What i do is "everything first" i just make two completely different interfaces for mobile and desktop, if you make desktop first, the mobile one is going to be a hell to do, and full of compromises, and if you do mobile first, the desktop one becomes very empty and basic, i think is better to offer each one a different experience catered to the needs without compromises from the other

[@ashokkumarsaxena7867]

Mobiles are cheaper and are mobile can be carried anywhere If you don't do it, you will be left behind because mobile is the way to go now

[@aseolin]

I will respectfully disagree with you this time. The original design is clean and intuitive, and most people are used to "scrolling down" to see the next contents. I showed it to 10 coworkers (from different professions, not designers), and 9 preferred the original version, claiming that the last version was very "visually polluted". Really, this menu at the bottom (which reminded me of some apps from 7 years ago) "fights" with the image and the hamburger menu. We don't know where to look first and we get lost in what to do. I'm sorry if I sounded rude or something, it wasn't my intention.

[@C2theCity]

Nice insights and they give a good indication that more user testing would be needed to see what's the better solution. I say this, because those statements are probably based on only showing the images from this tutorial. To get good and more valid insights you would normally need to have a prototype and give the test users a scenario based task. Would like to know what kind of findings would result from that. I do think that the explanation from this tutorial is logical, but of course only useful if implemented correctly and tested with users.

[@anansicreative4068]

I definitely agree with you regarding the final design, by putting so many individual elements above the fold it takes a long time to digest everything and as for me, my eyes end up darting all across the page and I don't really see anything; everyone who uses social media is used to scrolling. I do think the principles are spot on though if you let people know what they can find before scrolling, put some single interaction navigation on the page, get some key buttons close to the users hands and have messaging that addresses what the consumer will gain, you will end up with better UX. Just don't remove all negative space and hierarchy in the process, there is always more room below the fold

[@DesignCourse]

Thanks for the comment. There very well may be a happy medium found somewhere in the middle. But ultimately, the only way is to test with a target audience -- something that I want to start featuring in future videos.

[@anansicreative4068]

@@DesignCourse Thanks for all the work you put into this content! It is top notch and I'll definitely be approaching mobile UX differently after this

[@RusAnderson]

For the most part, the first design lacks discover-ability by forcing the user to scroll. So while the design is cleaner, it may not be better UX. The hamburger menu does similar by hiding areas of the site that you might want the user to easily find, so adding the portfolio link next to it is spot on. What I typically do in this situation is to place the logo top/center with a "standard" horizontal nav below it. In this case I would put the portfolio/skills/hire me links in order left-right and the final link would say "more..". This "more.." is a type of CTA that is a continuation of the navigation system that leads to the slide-out menu.

[@Ash-em5pm]

Jokes on you, my front end dev skills is the stuff that stinks.

[@g-virus4029]

Haha noobs these days.. Better u should see my design before speaking

[@MikeHalk100]

Designs? What designs? I don't know how to use .

[@MarkOhanesian]

Luckily there are so many frontend frameworks and free design assets for devs

[@joeldcanfield_spinhead]

Laying out for one-handed mobile use was something I hadn't considered-even though I've felt that frustration myself. Excellent stuff.

[@ericrovell1970]

There is also one particular problem with the fixed bottom bar: when the keyboard pop-up the bar are fixed to the keyboard...

[@ericrovell1970]

@@abraiyan7984 Well, you might need it if you use some input field on the page. This fixed bottom bar sticks to the virtual keyboard and might close the input field.

[@abraiyan7984]

Then there should be some system to save it. We have seen a lot of apps with a bottom tab bar. Right?

[@ericrovell1970]

@@abraiyan7984 I might be mistaken, but there is not yet. No easy way at least, just some hacks, like using absolute position instead with html 100% size.

[@abraiyan7984]

Thanks for reply. Have to learn a lot. Are you an app developer?

[@ericrovell1970]

@@abraiyan7984 Not a problem. I really love the idea of fixed bottom bar menu, but it was not easy to do. I am a web developer, didn't try native yet :)

[@illiablood3453]

Warning! Do NOT follow this design if you’re making a web app. ONLY for strict Mobile apps (Swift, etc) The bottom “nav” needs to stick to the bottom of the screen and it’s too jarring with your safari/chrome nav also at the bottom.

[@mogipls]

Exactly what I was about to say- But I actually wanna know how we'd be able to stop that feature for Mobile Web Browsers- :(

[@iab2gaming]

@@mogipls css dark neomorphism login form ui design

[@Indubita]

@@mogipls responsive web design?

[@mogipls]

Animation Bro What I meant was whenever you scroll down the web browser, the web browser’s viewport height changes. So the fixed bottom nav changes position every time you scroll down. This happens on all iOS Web Browsers iirc

[@diablo.the.cheater]

what if you make it a PWA?

[@WilliamsAlexanderAguilar]

"emphasize on benefits not features..." thats something I never thought and it has changed the way I put things now. Great video!

[@kotzikuche7883]

*cries in html*

[@raahimfareed]

Can you explain this a bit? Not native English speaker and a bit dumb. An example would be great if you can give it

[@sarerusoldone]

For those like me wondering about the bottom bar of Safari interfering with this design: html, body { height:100%; overflow-y:scroll; -webkit-overflow-scrolling:touch; } Using this will ensure that the Safari bottom bar will always stay visible

[@psy237]

i'd rather implement functions that prevent my sites from loading on safari browsers all together

[@vladimir_dev]

I've always said, "never put design before functionality"

[@gileee]

The first design definitely goes towards minimalism too much, to the detriment of utility. But everyone wants an eye catching website and cluttering the frontpage with too many elements, like it's a social media app with a million features, is a bad idea. Just like having everything behind a separate menu, having too many elements makes a page harder to use. The key is balance and knowing what users need access to quickly and what are secondary features.

[@fuzzypumpkin7743]

I strongly dislike 100vh header sections (I actually have "thinks 100vh hero images are so 2018" on my portfolio), so popping the projects up is great. Give me what I'm there for right there with no effort. My only criticism is that while a footer nav looks great, they just don't work well on phones when you have the phone's own nav getting in the way. I'd instead change up the header hamburger nav a bit to have more of the graphic look of the footer nav. Personally, I just try to keep the nav as simple as it can be. My portfolio is projects/resume/contact. No need to break it down further. It means I don't actually need to collapse the menu on narrow screens.

[@jpalvis86]

I liked the idea of moving most important sections of the app outside of the Hamburger, I often find myself going through it on mobile just to get what I'm looking for... this feels a better way As a user, I don't care how beautiful or good looking the page might be, but how fast and easy I find the stuff I need Thanks for the video!

[@JackWeller]

I can't be the only one who thinks that the final example looks far too cluttered as opposed to the first... I agree with all the points made, and the execution was good (the my work section for example) but it just doesn't look very nice at all...

[@msdhaliwal]

agreed 👍

[@RyanValizan]

it definitely gives me more of an app appearance than a marketing website. Too many CTA actions available for a marketing landing page. the only changes i feel that were beneficial was the change in copy, the portfolio button at the top, and the CTA button added below the marketing message. the rest was just too much for a website landing page, and it seemed like he was just reaching for items to add to make the bottom menu work (portfolio, skills, contact) just make a sticky contact button at the bottom of the page with an envelope icon to indicate to open the form up. Just way too much going on at the end of the video.

[@vladimir_dev]

Protip: Use the hamburger when working for cheap clients, and use the bottom fixed menu for the ones willing to pay more. That's how you make a difference so that when you hear that age-old question "what's the difference between a $200 website and a $1000 website", you know It's things like this

[@DerMBen]

I disagree on what you said about things being easy to reach. For me, the optimal place for elements is right in the middle and the bottom is stretch territory (at least when I'm not typing). Also, i think all the improvements combined are a tiny bit too cluttered.

[@sosasees]

This video was really annoying to watch because there's SOOO much Black and Empty Space to the Right. A much narrower aspect ratio would be much better for the context of this video to prevent artifically zooming out.

[@BrysonCreighton]

Love this approach... expected what I'm seeing in the comments. This is a concept I've been thinking through for a few years now as the mobile phone continues to grow in screen size. We've seen this in testing from large companies; one that comes to mind is Google. A few years back they tested a fixed nav to the bottom in the beta version of chrome. I loved this and it ended up going away. Not sure on reasoning. This would be a great AB test in a website redesign. I think one thing we have to remember as designers and developers is nothing we do is about us... it's all about the user. Sure many have gotten used to hamburger menus; that's because they had no choice. But if we really thing through the original hardware that brought the hamburger menu to life; that's ancient history in today's world. As screens become taller we have to be better about thinking about what the next stage of mobile UI/UX is; it's my belief this is it. With more data and content most users want easy access to whatever they came to your site or application for; that requires 'thumb reach' access. Samsung took this approach a few years back with One UI and they continue to push for more content within a thumbs reach. Google Maps is currently going through an update that puts more important components in the bottom navigation. This will continue as a trend and will become the norm as we move forward. As we can see in the video... the hamburger menu doesn't go away... but it does take a back seat!!!! Thanks for all you do Gary!!! @DesignCourse

[@SamuelNasta]

Surely would be a good AB test (despite that the purpose of AB tests are mainly to try ONE change and measure the results)

[@Ricardoromero4444]

The problem with bottom menus in webapps is that you will always be competing for space with the browser's navigation controls. Even worse, there's tons of unpredictable behaviors those navigation controls have. You don't know if it will be static, or appear and disappear depending on user scroll (the worst kind) Sadly the easiest fix for this is to not append content at the bottom of the viewport.

[@enchanted_swiftie]

You can view the "portfolio" and also view his "work" aren't both confusing? I think we should keep only one of them if there is not much difference.

[@josue1782]

I like the new design it's more intuitive. Yes, the first one looked cleaner but the second one makes your life easier, and in the end, that's what matters.

[@TejaSwaroopArukoti]

In terms of simplicity, I liked the first one. But yes, for navigational purposes, last version is better. May be depends on our choice?

[@MrW0rDs]

The navigation to the bottom seems nice, but everytime you tap on the bottom of the viewport, iOS will slideUp their browser navigation interface first, because of that you need to actaully tap twice to trigger the buttons. So it's not a great idea in the end, unless their is a solution but I never found one, any comments on that?

[@markocoetzee6101]

You could also open up the hamburger menu by swiping from the right. It's not the most obvious thing when you first use the app or website, but It's something I've been seeing a lot more in designs these days. I feel like it shouldn't replace being able to actually click/tap on a hamburger menu, though.

[@madebydevon]

but how does one do that?

[@adeshkantha7034]

I'm not a designer but making the carousel animation loop would be more satisfying to look at imo

[@muse-mech-moda]

Whether you like burger menus or not, they are a 'standard'. Everyone knows how to use them.

[@JamesYeang]

That's right everyone knows how to use them. The issue is I feel no one really knows what's inside them. Which is why I believe primary navigation was not recommended to be nested inside a hamburger menu

[@SilverSlayer23]

From what I understand. The hamburger menu on mobile devices could benefit from a center side swipe on the/side gutter to the center in order to prompt the menu open. It's the clicking only kind of interactions that aren't good. But still I agree with the fact that it shouldn't hide primary navigation on mobile.

[@srdjagunjic]

The thing is that most users know that such gesture is not doable on web, only on apps. Today we can make native mobile gesture on web sites but most users are not expecting it, however, time will change that.

[@kennyotsu4357]

I started to think outside the hamburger menu and ordered a pizza, thank you 👍

[@Philson]

Seriously. Tabs > Hamburger

[@codeSTACKr]

Awesome!!

[@MrSaeedibhai]

I don't get it. Hamburger is still there so what's exactly the point. I like both styles. But if you are gonna ridicule something, then propose a replacement, don't use it as a structure for improvised version.

[@curiouslycory]

A lot of good points and tips, though I would say the final design looks very busy compared to the first one. I personally think a more clean initial screen with the busyness below the fold is a better experience, but you definitely need to prioritize when you have sparse content. 100 clear screens > 1 busy one.

[@GregJoshuaW]

The best version of this, taking into account design, UI and UX, would be the replacing the original scroll icon with the blue nav bar, but the blue nav bar color needs to match the blue in the laptop screen. You made it too busy which evokes anxiety.

[@jimbob7424]

Anyone else ever find themselves looking at UI work such as this, and thinking where is my creative side? 😂😂

[@ajones1274]

ooo, really dont like the style of the footer at 7:57

[@AndersFloor]

I would never have recognized that thing as a scroll indicator. But maybe that's just me. Other than that: great video!

[@victorbjorklund]

Anders Floor agreed. Never seen a scroll indicator like that.

[@fidelynwa]

You'll usually see it with some kind of animation that sort of simulate the motion.

[@bas_kar_na_yar]

nlg, the first design had a lot of breathing room.. the second feels cumbersome..

[@dazai_dev]

Amazing video! I really enjoy your content and appreciate what you are doing. Getting such valuable information absolutely for free is amazing, and I love you for sharing your knowledge with us all! I will definitely implement these tips into my portfolio as I now realize just how outdated and non user-friendly it is. Thank you so much, and cheers from Serbia!

[@wro-story]

Very, very, very useful information and advices! Now I'm thinking))) Thank you very much.

[@LabhamJain]

Gary, Please Make On Landing Page I Always Confuse Where To Start And What To Show To Visitor That Can Blow Mind And Don't Forget Genres Like For Bloagging Page You Should Make Like This For Business Make Like This | Give Me Heart As A Response

[@waruidenis-fxtrader8479]

The biggest problem is that even the "coursetro.com" website has no such UI. Why are you giving designers a headache while your site is flat. ???????????????????

[@esu7116]

I definitely prefer that 🍔 button to all the 💩 stuff coming out at the beginning and just makes me want to leave in the next five seconds That's only my point of view.

[@ishtiakahmed6336]

I am designing my personal portfolio. Can someone help me with font size? I use 24, 36, 64px for 1920x1080 display but my display don;t have that much pixel. So can't feel what will be good.....

[@glomerol8300]

Hi Gary... Your end-design likely appeals to some people, while some elements of it, if not all, should appeal to others. You do have some good and valid points in your approach and end results. My own feeling about it is a little like my noticing that you have an apparent fishless/waterless aquarium on a bookshelf (I have my doubts that it would support one full of water anyway, at least long-term) under a row of guitars on the wall and a bookcase apparently in front of a door. LOL It's sort of kludgy, cluttered, potentially-problematic, ill-conceived and lacking in a tight concept-- feng shui, zen or whatever and all that. Hopefully, the guitars can be easily reached and aren't likely to fall into the aquarium by accident (and crush the hamster/gerbil/mouse/turtle/shallow-water fish?) and that you don't need to access too often what is behind the door that is behind the bookshelf that doesn't appear to have much in the way of books or anything else on it anyway. LOL But maybe you just moved in or are about to move out, but still have to record another YT video. Nevertheless, I think you're cute, clean-looking, clear-speaking, present your case reasonably well and I appreciate videos like yours. In any case, cellphones or so-called 'smart' phones seem to be trying to do too much within the constraints of their 'form factors' and I've even heard mumblings that some of them will be dumbed down a bit in the future, maybe already, like the old fashioned phones. Remember those? :)

[@harrydance1969]

Wrong: changing from “I build websites and apps” to “… experiences” is terrible advice. You’ve strayed into an area you don’t understand. “Experiences” means nothing and leaves people guessing - modern UX makes things clear and unambiguous.

[@masdzulfikar6201]

I'm not designer in any way. But I preferred the old design. Apart from the "scroll indicator", everything looks simple and intuitive, really nice to look at. The "upgraded" version looks cluttered and messy. Too many buttons to click at (burger menu, bottom menu, "view all works button"), not to mentions the scrollable aspects. At a glance, it's overwhelming. There's also redundancy on how "view all works" and "portfolio" differs. Not to mention confusion about the burger button and what it contains. It's better to just put the excessive menus in the burger and place it somewhere reachable.

[@mtljx]

Hey, I am beginning to sketch out a design for my Graphic and Web Design E-Portfolio. I have been watching DesignCourse throughout this summer to gather inspiration and I really want to add that carousel that flows from right to left on its own and of course would be interactive on mobile to my portfolio. Could anyone help me understand how that would be created? Would it be possible to do it with keyframes so HTML and CSS only? Would I need javascript, PHP? or Bootstrap? Thank you

[@WiseGuyFTW]

I am sick and tired of people trying to stand out by merely trying to change what is *familiar*. Better UI design is subjective in a lot of ways but where its not subjective is *familiarity*. Hamburger menu is familiar to most people who are using a modern touch based smartphone and thats a lof of people, any navigation design that deviates too much from that is a BAD UI design PERIOD!

[@jeroendesign]

You’re such an inspiration when it comes to content creation! Currently started my own channel as well and trying to one day be as good as you and present in a more professional way 🔥

[@khalidsafir]

9:23 Notice how most people put navigation in the "forget about it" zone. Maybe we should put all navigation on the bottom. Thanks for this great video.

[@timz9862]

Yikes. Do not add navigation as a footer. It interferes with iOS and Android interfaces. Also, always ass the word “Menu” or “Nav” next to a hamburger menu. Older folks don’t know what that icon means. People always neglect senior citizens when designing for the web. Additionally, do not encourage people to use their phones with one hand. That’s how accidents happen, which includes dropping your phone and watching it crack on the pavement.

[@LuBre]

I respectfully disagree with your approach, in this case. It's not wrong and it makes sense of course, but the original design (hamburger, big hero icon, scroll icon) is perfectly fine. People are very used to see (and interact with) both hamburger menus and scrolling CTA buttons. The original design is very clean and stylish. Your is more "complete", sure, but it's also very busy and it honestly... It kills the purpose of an elegant intro (which everyone knows it's an intro and everyone will be ready to scroll down in a split second).

[@synchromatik]

So basically you reinvented tabs? What about 5+ menu items? You would cram those to tabs also? What about submenu items? What about websites that display other fixed content like sign up buttons or promotions? Not all menus are created equal. Stop spreading misleading and generalized information for the sake of views. Clickbait much.

[@irwinlitvak4568]

What is the name of this theme? I like how the mobile navigation comes from the side? I'm new to WordPress and am using ASTRA and Elementor, but I don't like the default mobile nav animation and prefer the one presented in this video. I would appreciate any advice!

[@20171mohamed1]

You did a good job , but i expected you to change the place of the navigation drawer .. Material design says : if it's left to right language , the navigation drawer should be at the left side ..

[@sashaikevich]

The bottom menu is great, but how would it handle on scroll? Is it sticky? The 100vh is annoying with URL bars and browser menus changing the height of the page. Do you know of a good workaround?

[@delulu6969]

My feedback: 1. If you want to put the carousel up & front, you better choose cover images for each project that match up the whole mood of the first intended cover. Right now, you have cheapen the look with inconsistent imageries. 2. I understand you use the blue color to make the CTA button stand out during the 1st iteration, but at the end you're making the whole bottom navbar a big blue a** CTAs. That's such a turn-off, aesthetic wise. The original design has the direction for a subtle monochromatic look. It's better to keep one CTA button either as 'View all my work' or choose one item in the navbar to has a blue background for contrast while the rest of the navbar is best kept monochome.

[@toxaq]

A problem with side scrolling in mobile sites is that in Safari, if you don't contain your touch scroll to a small central part of the screen, you navigate back one page (which may not be your website). It's terrible UX (and Apple's fault).

[@catalinim4227]

Dude, don't get me wrong, your content is good, however, it would be nice if you and others stop the fuckin' shaming of others for doin' things certain ways.. ok, you have an idea, it's great, present it like that.. "here's an idea for better mobile blah blah blah". I'm not offended, usually I stop watching videos

[@icksv5529]

07:18 You know what is the problem? that it's in that way since ever. I had to wait 15 years before to see companies place the menu at the bottom where my thumb move around. Best of all? When finally they start to do it eg FB messenger, people were screaming about how much brilliant and genial was such innovative idea... -_-"

[@schimenykrikets9692]

In general a massive UX improvement, however IMO you did a bit too much. Achieving the goal of 'look at my work' is harder than it should be due the space being cluttered up with many distractions.

[@jesuscorona3077]

The new element arrangement is a good idea, but maybe the execution needs more exploration to totally sell it, things like shapes, color and transtions, all that GUI fun stuff. Still I like the idea of having a button on the screen that DOES TAKE YOU SOMEWHERE (like the cards or the menu at the button), and doesn't just show you more menus, or "scroll to see the actual content".

[@dekafmusic]

Wow, learned a lot from this. Especially the tips on benefits over features.

[@EnricoColautti]

As the main goal of the page is getting hired, I would replace the portfolio carousel section with a CTA button, leaving the portfolio link to the bottom bar. Adding the carousel makes the page very clogged. Empty spaces have their value, too

[@KangJangkrik]

If you're using Android 10, try open left navigation drawer by swipe. It's impossible

[@ВиталийБелушенко]

I think there are a lot of controls. This way of organizing content makes this screen the same as the mobile app. Especially the tab bar. Also, I don't like to add an eye icon to the blue button. It confuses me. It looks like a field for a password. But I appreciate some ideas like to add a call to action and add some copy for the boring heading. Anyway, @DesignCourse thank you for your opinion and this lesson.

[@jts04]

almost everything you said and did here is wrong, except for the ‘features vs. benefits’ part which wasn’t related to mobile nav. in the example you’re making a ‘portfolio’ link more visible while simultaneously putting the work in view by default, which makes no sense. you need to consider the importance of cognitive overload and understand scrolling is natural and easy. in this example the work could easily go right below the top section and everyone would find it. the only thing i would pull out of the nav is ‘hire me’ as the main cta. the rest are probably secondary items that can comfortably go in a tucked away menu. bottom bars can often be better solutions, but you should illustrate this with a better example, and not dismiss the mobile menu icon entirely, as it is widely used and recognized and serves a purpose

[@iamshadmirza]

Love your content, hate your thumbnails. It shows negativity first then tells how to get better. Don't @ me, it's honest feedback.

[@rphuntarchive1]

I am meh about most of this, but that thumb access idea is intriguing. I've been thinking about that before. In the past, for full screen sites, my approach was to always value the left top corner the most, then as you move away from it, the value goes down. Not for any ergonomic or psychological reason, but because when window sizes are changed, they resize relative to that corner. Designing mobile for the bottom is interesting. I'd like to see you implement that in a full design (I don't mean a full vertical cell phone design, but one that accomodates desktop, tablet, cellphone, in all orientations). Also, I don't think the 2-hand issue is as big a problem as you seem to. People are perfectly happy using both hands on their phone keyboard.

[@vintage.miniature]

But there is always a problem in bottom navigation, think of android users with gesture and system nav buttons at the bottom. It will overlap. I personally recommend bottom nav over hamburger

[@gradientO]

_Can you make tutorial for _*_applying dark theme_*_ ?_

[@PhilippeCorthout]

Don't like it actually. Too many elements that distract and make it visually unbalanced and cluttered. Just too much visual information on first view.

[@rafidev2099]

That was really nice ;) I also prefer bottom nav menu however I like to see in other orientation (mobile-landscape, tablet-portrait and tablet-landscape) maybe another video about this topic? There is soo many nice mobile app UI concept in mobile-portrait but do we really must make users to use only portrait mode?

[@lcansweringservice7167]

How did you build that? I am still learning and would love to learn how to build that kind of mobile site...especially that carousel.

[@slammerton]

In terms of UX I totally agree but the new 'design' looks very crowded to me. Great infos anyway!

[@SamuelNasta]

Understand every single step you did, but the final result is much uglier. It's like trying to fill every empty space, and it's clearly for me that the designer wanted to create a minimalist appleish style

[@pypalimti]

This is excellent stuff. I learned to think before diving into the designing. Thank you.

[@tekiero]

Why some brands use Burger menu on right side, some on left? Isn't right side more convenient?

[@Peter_Scott]

Tab bars are a great piece of UI but on smaller older phones, they really take up a huge chunk of real estate along with browser elements. But agree re mobile nav that important elements should sit outside of it ie portfolio, catalogue, donate etc...

[@Soramoi]

I can't focus over the awesome background jam 🤘💕

[@JohnWeland]

So what did I learn today? Well apparently I hold phones weird. I have a Note 9 and when I hold it in a one-handed use case I can easily access the top 3/4 with out stretching the lowest 1/4 takes a little stretching.

[@TheVeritimus]

These are great tips! How would you manage with mobile Safari bottom bar, which would cover bottom navbar?

[@LeviWhalen]

TheVeritimus this is doable with CSS!

[@TheVeritimus]

Levi Whalen, can you give a link to an example, please? :)

[@chrisj.2611]

Ha, a webdeveloper friend just laughed at me b/c i did put my mobile menu at the bottom. No i can just show him that im the one whos suppoesed to laugh.

[@existence.5806]

Exactly

[@Noah-vm8id]

I just wanted some info and you gave me a masterclass. Thats overdelivering, thanksss

[@lux-co3nl]

Dude the end product looks like something you would declutter in some of your other videos. Kind of a reverse design fix.

[@srdjagunjic]

What a great video Garry! Packed with useful info, all that under 10 minutes. A person can learn so much from you! Thanks!

[@manofqwerty]

This is content!

[@FlorinPop]

You Rock!! 🤩

[@miluna94]

I find the first version much more elegant but I definitely like the newer titles and your lower action buttons rather than the hamburger. I think the carousel takes the design too far from the original one, but it is a cool idea

[@cthuloox476]

This was an excellent video. Thanks for sharing this strong UX design.

[@chenjau]

New design seems kind of busy. I prefer original one that shows the author has good taste, and the target visitors are professionals that understand how websites work, so it's fine I think.

[@yashnagda9363]

many people said that final examples is looking very cluttered. One simple way to handle that to make bottom bar black and not very contrasting so it will blend in with the other content.

[@davidmikan7925]

i agree and disagree at the same time. the second design is extremely useful, but i wouldn’t want something like that to be the first thing people see when they come on my website. maybe a simple, clean first screen that morphs into the second design on scroll would be perfect

[@upulgrafix]

Superb description, thanks to you for sharing this.

[@thenoob9379]

nah, just use 2 hands. Nevermind pandering to lazy people

Thank you very much for the great tips! It is extremely useful, that you take us through the steps in an incremental fashion while also explaining the pros and cons.

[@luisab4047]

This makes miss the 90's. People got whatever they were given and were happy.

[@stinkleaf]

CTA's guide them through your site. No one navigates the way you assume.

[@abt6419]

Usually cool Videos. But this one is not. The target audience isn't a customer but companies so the slide thing etc. No one wants that.