1. Subtle Animation<\/h2>\n
<\/a><\/p>\n At first glance, you might not even see the navigation menu at the top of the website for Buttermilk and Maple. But there are plenty of little animations to ensure that you don\u2019t completely miss it.<\/p>\n Each element includes simple animation that adds emphasis to what is happening to the nav so that you never get lost in the design. This design is highly visual and these simple cues are a major bonus to enhance usability.<\/p>\n <\/a><\/p>\n When the navigation is hidden \u2013 as is trending with many website designs \u2013 you need to provide plenty of cues to the user. <\/p>\n <\/a><\/p>\n What if the navigation is the most important element on the screen? Make it the focus of the visual design.<\/p>\n JYBH has a beautiful minimal design with a textured animation in the background and three simple navigation options in the middle of the screen. This tells users exactly what they have to do next. <\/p>\n <\/a><\/p>\n Along that same train of thought is creating a design that asks users to make a choice: Do you want to do this or that? This binary navigation option should help get people exactly where they want to be with the design quickly.<\/p>\n It can work exceptionally well if the design has two target audiences with different user paths. <\/p>\n Seedlip Drinks does this rather effectively with options to buy their products or use their products. It\u2019s a clever approach to retail. <\/p>\n The design also includes a subtle hamburger icon \u2013 can we keep calling it that now that the trend has shifted to two lines, rather than three?<\/em> \u2013 with additional information. <\/p>\n <\/a><\/p>\n Sometimes the best use of a trend is to stick with a classic example that works. A simple, traditional navigation menu never goes out of style.<\/p>\n The approach for Chou Wen-Chung provides a static location for the main navigation on a full-screen photo without getting in the way. Some of the menu elements include a \u201cmega-style\u201d card with additional information. (These almost seem to get in the way.) <\/p>\n <\/a><\/p>\n Mobile design practices dominate many desktop versions as well. Oversized pop-out menus (almost always from a hamburger-style icon) mimic the experience on smaller devices.<\/p>\n And there\u2019s nothing wrong with this approach. (I\u2019ll never fault anyone for consistent user experience.) <\/p>\n The key elements to making this work are ensuring that the pop-out is obvious, all the necessary information is included, and there\u2019s no issue with usability (everything is easy to click or tap). <\/p>\n <\/a><\/p>\n This is one of those navigation ideas that only work in specific use cases \u2013 you need four primary locations to send users to.<\/p>\n But if you do, one navigation element in each corner of the screen can be a fun and interesting alternative to planning and designing a modern navigation style. <\/p>\n It works rather beautifully for the design above, thanks to a simple overall aesthetic and easy to understand navigation options \u2013 the company name, about, work and contact. (There\u2019s no question what you will get from those click elements.) <\/p>\n <\/a><\/p>\n Vertical navigation menus looked like an idea that was really going to take off when monitors kept getting wider. It didn\u2019t quite get there, although more designs are starting to feature this design trend again.<\/p>\n TMC uses vertical main navigation on the left side of the screen (this is a good option since people read from left to right) with the main content area and then a cut off content area that cue users to move horizontally with the design.<\/p>\n The rest of the design uses timeline dots and arrows to direct users through the content. It\u2019s a fun design. The only downside is that if you get too deep into it, there\u2019s no way back. <\/p>\n <\/a><\/p>\n Every now and then you come across pairs of unexpected elements that work exceptionally well. That\u2019s the case with what we\u2019ll call the \u201cskinny flip\u201d navigation menu above. <\/p>\n The top three navigation elements are stacked on the right side of the screen. They are in a timeline style format that shifts with scrolling or clicking. <\/p>\n The hamburger icon is actually tucked in the bottom right corner and opens to a full navigation menu at the bottom of the screen. This is one of the most unusual versions of down page navigation I have seen, but it seems to work. (Maybe because there are plenty of visual cues, from color and elements that drive you across the screen from left to right and then down to that hamburger in the corner.) <\/p>\n <\/a><\/p>\n Since we got into the idea of down page navigation, it\u2019s good to look at a highly usable approach to this concept. <\/p>\n Renewal has four things to dive into on the website. Each is noted at the bottom left corner of the homepage. What\u2019s nice about this style of navigation is that it\u2019s not at all hidden, doesn\u2019t get in the way of the content above and is in a natural location to click through. <\/p>\n It also works as a quasi-timeline element as the navigation is part of a bigger slider that helps users get an introduction to all four content paths. <\/p>\n When it comes to thinking about modern navigation, remember it\u2019s more than just a menu. Navigation is everything a user needs to move around the design with ease.<\/p>\n It likely starts with some type of main navigation menu but can include timelines and scroll reminders and anything else that helps a user find what they are looking for. <\/p>\n Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":" One of the elements of website design that you don\u2019t always think about first is navigation. (Although you probably should.) How will users move around the design? How will they find elements that aren\u2019t obvious to them? Website navigation trends have changed a lot; moving away from overwhelming mega menus to lighter more minimal options…. Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":62502,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-62501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/buttermilk.gif?w=900\")
<\/div>\n<\/p>\n\n
2. Provide Plenty of Cues<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/rally.gif?w=900\")
<\/div>\n<\/p>\n\n
3. Make it the Only Option<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/jybh.jpg?w=900\")
<\/div>\n<\/p>\n4. This or That<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/seedlip.jpg?w=900\")
<\/div>\n<\/p>\n5. Simple and Traditional<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/chou.jpg?w=900\")
<\/div>\n<\/p>\n6. Oversized Pop-Outs<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/whiteboard.jpg?w=900\")
<\/div>\n<\/p>\n7. Try Four Corners<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/gothdig.jpg?w=900\")
<\/div>\n<\/p>\n8. Vertical Stack<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/tmc.jpg?w=900\")
<\/div>\n<\/p>\n9. The \u201cSkinny Flip\u201d<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/lafinesse.gif?w=900\")
<\/div>\n<\/p>\n10. Downpage Nav<\/h2>\n
![\"website](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/renewal.jpg?w=900\")
<\/div>\n<\/p>\nConclusion<\/h2>\n