Browse Case Studies

Your Portfolio is empty. You can start adding Items throught your Wordpress admin panel!

All Posts in Responsive Web Design

05/09/2018 - No Comments!

Navigation Best Practices — Web App Design 101

Successful navigation orients users and empowers them to move efficiently.

Part One covered Layout Best Practices. Now let’s get into some tips on how to design navigation structures which are both intuitive and predictable, making them more user-friendly.

The purpose of a product’s navigation is two-fold.

  1. Help your user easily get to where they need to be.
  2. Provide visual cues as orientation for where they are now.

The ultimate goal of a navigational structure is for new and returning users to be able to figure out how to get around a digital product easily and efficiently.

 

This graphic here illustrates some of the questions a user may have when encountering a poorly structured navigation.

Let’s talk now about the specifics of building an effective nav.

Categories vs. Utilities

As you build out your navigation, you’ll want to keep in mind the difference between content categories and what I refer to as an product’s utilities.

Categories are content. They are high-level links to the main sections of your product’s content categories. Utilities, on the other hand are links to important elements of the app that aren’t really part of the content’s hierarchy. This includes tools and ancillary things like help screens, product authentication, error screens or a developer’s api documentation. These are all examples of utilities, and they vary fairly widely per-product.

When you’re structuring a navigation, you’ll want to be sure you’re not mixing these two types of link in your navigation.

Mixing these two types of links in a product’s navigation causes confusion. Eye tracking studies tell user researchers that users expect these two different types of links to be located in different places on the screen.

Twitter and InVision are both good examples of seperation between these two types of links in a product’s navigational structure. Here I highlighted the categories in green and utilities in pink.

User’s generally expect these types of links to be in these relative locations in a traditional web application’s layout.

The Three Most Common Navigation Structures

When it comes to physical placement of your categorical navigation, there are a few best practice “locations” within a screen’s real estate that lend themselves well to specific information architectures.

Let’s discuss the different areas of placement for your navigation. We’ll go through the top three positions, based on user expectations and space constraints.

Top Header

The first example is the top header placement.

This placement is ideal for your primary navigation because users look here for navigation intuitively. The header is also separated from the pages content, reducing confusion between navigation and content. Finally, the limited horizontal space forces you to organize your information clearly.

Subnavigation

The second recommended placement is the top Subnav.

This is useful when the header space isn’t large enough for all of your primary category links.

Similar to the top header pattern, users will still look here intuitively for their primary navigation links.

Side Navigation

Finally, there’s the side navigation.

This is a very common pattern, especially useful when you have a lot of category content in the product’s architecture.

It’s vertical structure supports scrolling, when the list becomes too long to fit within a window.

Combining Navigation Patterns

A few examples of product design navigation combinations.

With a complex project, you’ll likely find yourself combining these placements to form your navigation’s structure.

Here are some examples of how this may come together:

Header + Side Navigation — A very common structure with the primary navigation in the header and the secondary navigation in the sidebar.

Header + Sub Navigation — Also common, but use this only when both the primary and secondary navigation will fit in the space.

Sub Navigation + Side Navigation — Here the side navigation acts as our top-level, primary categorical navigation bar. The sub navigation acts as a secondary level, within the context of each screen.

Header + Sub Navigation + Side Navigation — All of the things! A useful pattern to follow within more complex products. Here the Header is primary, sub is secondary and side acts as a tertiary set of categorical navigation.

Read more

03/22/2017 - No Comments!

Design for Style Guides

How to craft and document modern component libraries

A primary point of contention in the product design to development workflow comes at the point of hand-off. As a project deadline looms, designers are typically scrambling to write specifications and export the necessary graphics to ensure the intended pixel designs are fully realized in the browser. This stage of a project is fairly fragmented industry-wide with each team doing their own thing with their own tooling. It’s a difficult stage that is regularly underestimated in terms of the time needed for proper completion.

In my experience as a product designer, front-end style guides are the missing deliverable at this stage of a product’s development. When supporting teams of developers, a style guide as design documentation is invaluable in contributing to a project’s long-term success.

When supporting teams of developers, a style guide as design documentation is invaluable in contributing to a project’s long-term success.

That said, I’d like to outline my approach to designing component-based systems with style guides in mind. Each project and the folks involved are unique, so be sure to bend and mold this process to your own situation. Design documentation doesn’t need to be perfect or even beautiful. It’s sole purpose functional, to ease the transition from designers to developers.

Read more

01/29/2015 - No Comments!

Mobile Testing w/ Edge Inspect

repeat-devices

Adobe Edge Inspect

Edge Inspect is an excellent application for web developers and designers alike who need to preview their content across multiple mobile devices. It makes a once manual and fairly painful process relatively quick and seamless. Its most notable features include the ability to navigate a the web from one machine with many mobile devices following, snapping mobile screenshots and inspecting the code on mobile screens. All of these features combined end up saving much valuable product design time.

Read more

08/18/2014 - 1 comment.

Sass for Web Designers

Wow - another great book from the folks over at A Book Apart. After reading most of the series up until now, I was more than excited to hear of their newest release - Sass for Web Designers. If you’re not familiar with this series of books, I cannot recommend them enough. They are, as told by ABA themselves, brief books for people that make websites. They act as quick, concise reads that can ramp up a new skill for a web designer of any skill level.

Read more

08/16/2013 - No Comments!

Strengthen Your CSS Layout Skills

All skills will be forgotten without regular practice. When I think of all the facts and skills I've memorized at some point in my life for a test or one-time exercise, it's truly baffling. While I'm sure this knowledge is rolling around in my gray matter somewhere, my knowledge of the path leading to it has been lost for years.

Read more

07/16/2013 - No Comments!

Responsive Retrofitting, Case Study

With or without justin productions logo

Recently, I revisited a side project website that I had built for a close friend of mine some years back. I'd originally used WordPress as a content management system; being that my friend had experience with it and an intention of blogging as a creative outlet. Since crafting the original design, I've learned a lot of new & powerful CSS skills. Most importantly, a working knowledge of responsive web design and some advanced CSS3 properties. I'd been looking for an outlet to apply these new skills, and decided to revisit this project.

Read more

05/30/2013 - No Comments!

Multi-Device Web Design & Beyond

San Diego Web Design Conference

On the final day of San Diego's 2013 An Event Apart conference, Luke Wroblewski delivered an all day workshop on multi-device web design. Luke managed to deliver a consistently captivating presentation throughout the seven hour workshop. He presented a vast amount of information, (nearly a 250 page workbook!) and practical methods for putting these responsive web design techniques to use. Most importantly, he spent much of the session discussing the history of this interesting subject, imparting the knowledge of how we got this point, justifying the current need for multi-device websites. Here are my notes from his session:

Read more

03/20/2013 - No Comments!

Responsive Web Design Bootcamp, Notes

In his webcast Responsive Web Design (RWD) Bootcamp hosted by O'Reilly Books, Jonathan Stark introduces the core concepts behind RWD and his recommended best practices for getting started in this evolving movement. Jonathan has authored three O'Reilly books including Building Android Apps with HTML, CSS & JavaScript & Building iPhone Apps with HTML, CSS & JavaScript.

Read more