In the last post we talked about a few different styles we can use to anchor our website, and ground it in a visual philosophy that makes the page as a whole make sense. Today we’re going to get a bit more specific about what sort of elements and design patterns we can use on our web page, not just the general feel and style we want them to have. These will be the things on out page that make it functional, and give the user an interface to change navigate the page and change the information she’s looking at.
Explicit Nav Menus
Here we see possibly the most traditional tool for users to move around a webpage – the navbar. In the above example, notice that we also have a sidebar. What a developer decides to put in these types of nav elements is up to him. Some devs like to have single link that the user is allowed to visit in one nav, and others like to spread them between a navbar and siderbar, and maybe throw a few others down in the footer for good measure. If or how you use it is up to you. Users are generally comfortable with this kind of navigation and know how to use it, but it has the side effect of making your site look busier and more cluttered.
Hidden Nav Menus
That last problem can be addressed by hidden, expandable, ‘hamburger’ menus. Especially since the rise of bootstrap, these types of menus have become extremely popular for their ability to provide the best of both worlds: an uncluttered page upon the user’s arrival, with the option to see much more if desired. For the most part, these menus have just opened into drop-down lists, but devs are quickly realizing that they can use those little hamburgers to prompt the appearance of any kind of menu they like.
I found the preceding bit of CSS and many others like it at this website.
Headers and Footers
Headers are pretty simple. You can throw a brand name in there, maybe something about the status of the user (logged in status, shopping cart status, etc) and a navbar. The footer can help to reduce clutter by providing a place to hide away all the stuff the average user doesn’t really need to be bothered with – copyright information, careers, about page, social media links, etc. The size of the footer will depend on the website, and the degree to which you want the page above the fold to be free of excess links.
Single page scroll
One way to make building a website much easier and still make it beautiful is to make is a Single Page Scroll site. Just by continuously scrolling down, users experience all of the content you want them to, in the order you want them to. This also opens the door for lots of nifty features, like navbars that stick to the top of the screen while you scroll, populated with links that auto-scroll you to the right place on the page. Scroll-sensitive animations can be included in the page that fire as you slide further down the page. Backgrounds can change as you scroll with the use of CSS sprites, and some of the most beautiful sites built today are built around this feature.
A variation on Single Page Scroll, a Transparency results in text on a translucent background sliding over a stationary background as the user scrolls down. The effect can be striking as demonstrated if done correctly, and it can be employed in several different ways. Sometimes just a touch of a stationary background in an otherwise normal Single Page Scroll app can make the whole thing seem more professional. A touch of the technique can be seen here.
I’m having a great time, aren’t you!?! There are so many wonderful features to use in web design! Let’s take a break and we’ll come back for a few more to wrap up our design series in part 3!