Don’t Forget Design! (pt. 2)

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.

Image result for hamburger menu gif

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.

Transparency

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.

Conclusion

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!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s