Learn how to craft effective navigation for your website — on desktop or mobile. Design navigation that helps users easily find what they’re looking for.
The smallest parts of a design project can be the most important. It’s something we all know conceptually, right?
But do you ever get caught just filling in these details at the last minute? Does your micro-content suffer because you are ready to be finished with a project? Don’t let that happen. Plan out micro-content from the start to create better, more usable pieces that will help make the design better than you had hoped.
It’s time to talk about first screen design. The first screen is that initial glimpse that a user gets into your website. It’s everything above the scroll, whether the user accesses a website from a desktop, tablet or mobile device.
The information you include on this “first screen” is the key to website success. The design can entice and keep users clicking, or force them to navigate away from the page. What needs to be on the screen before users start scrolling? Let’s take a look.
When you hear grid, what’s the first thing that comes to mind? For most designers, it is often a horizontal based concept with columns across the canvas. This is especially true when thinking about web and digital design projects.
But what about vertical grids? It is just as important to create flow up and down the page as well. And there are a number of ways to do this with grid systems.
By now the term “hamburger menu” is something we are all familiar with. Love it or hate it, this little element has been one of the bigger trends in website navigation design this year.
But it is not the only big change that’s been happening when it comes to how we design navigation patterns and elements. From super small navigation – such as the hamburger – to oversized navigation options, providing users with a clear and easy path to information should be a top concern for designers.
Yes. Those little pop-ups matter, and are starting to matter more every day. Interstitial space – and content for it – is becoming an increasingly popular part of designing for the web. From ads, to forms, to bits of information, the interstitial experience is a vital part of the design process.
The dilemma for designers is to create something that users want to look at and not feel annoyed by. Here we’ll work to gain a better understanding of interstitial space and how you can work within it well.
When constructing a simple webpage, it can often make sense to fit the content into a single layout rather than multiple pages. These single-page websites are beneficial when you have a small project or portfolio which needs some online presence. If you split up content into neat sections, then visitors might use a small sliding navigation to quickly advance along the page.
In this tutorial I want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time. But I want to show how we can make this effect using only jQuery and the scrollTo plugin for optimized performance. Check out my live sample demo to catch a glimpse of what we will be making.
Typically web developers have been using JavaScript to create dynamic page animations. Hidden menus and subnavigation are just a couple examples for how these techniques would be used on a live website. Thanks to the addition of CSS3 transitions we can now mimic these animations, with no JavaScript in sight.
In this tutorial I want to demonstrate how to build an inner hidden content bar which slides down when hovering. You can place this into your header, footer, or even somewhere inside the page content. It is a very flexible technique which does not require a whole lot of time to get working. Plus all the modern web browsers will support CSS3 transition effects.
Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design.
This feature appeared at a point in the history of the Internet when the amount of information to be presented on web pages increased, and the speed of connections allowed the reader to access and transfer information at greater rates. The question of infinite scrolling on web pages is one of the aspects involved in the user experience design, and isn’t as cut-and-dry as you might think.
When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process. This often requires a quick-to-access menu or dropdown area for pulling links to other webpages.
In this tutorial I’m going to be building a top navigation bar which appears only after moving beyond the header navigation. This effect is great if you have a few pages which are most commonly accessed by visitors. The sticky navbar will stay fixed at the top of the screen and only disappear when re-entering the header nav zone. To get an idea of what we will be making check out my live demo example after the jump!
I love the challenge of building something with CSS that uses one item to trigger another. It can get pretty tricky to wrap your mind around all of the pieces involved and come up with a way to flow your HTML in a way that is easily controlled in your CSS.
Today we’re going to embark on just such a challenge. We’ll build a basic home page that swaps out background images based on the link that you’re hovering over in the navigation. Along the way, you’ll learn all about the idea of remote hovers and how to wield them in your projects.
Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design.
Follow along as we start from scratch and code a simple but effective responsive navigation menu that you can easily modify and reuse in your own projects.
Today’s awesome collection of design freebies brings you a veritable utopia of navigation menu bliss. Each of the fifteen navigation menus below are both completely gorgeous 100% free to download.
I’ve included both CSS and PSD menus so whether you’re just looking to create a mockup or need something fully functional, we’ve got you covered. Enjoy!