Finding the right Design Patterns

Julio Silva
Jul 24, 2017 · 5 min read

I recently finished a case study for an insurance company called, Kaus. It involved secondary and primary research, collecting data and interpreting that data into other contributions relating to the case study. It is very long and extensive to mention all of the steps taken, and for that reason I will jump straight into why I even brought it up in the first place. This case study for Kaus helped me build a foundation to creating a sitemap, task flow and user flow for their webpage. I now have a sense of where, how, why, and what my users would be doing while navigating through the webpage and at the same time know their pains and gains throughout their experience.

All of this leads to, “How the design should be executed?” I can approach this many ways, but when time is the essence and you are on a critical dead line there is no time to be innovative or trying to reinvent the wheel. That is why Design Patterns exist, they are a library of commonly used functions throughout websites and applications. They can be used for inspiration or a fast and easy way to put together a prototype. They are the building blocks towards creating your next product online, UI comes in later when you are aesthetically making it look good but for now the foundation is most important.

Below I provided examples of different Design Patterns from multiple websites, they are the closest thing to how my website should function due to the extensive amount of information being provided. These examples will be covering fundamentals of: Navigation, Global Search, and Breadcrumbs.


  1. Navigation Patterns — User needs to navigate through sections of a webpage.
Navigation from Dribbble

This navigation drop down menu is a good design solution when it involves saving space. On the navigation bar there are sections, and when the users mouse cursor goes over one of the sections it drops down a list of new options. These options could be presented in the homepage, but there is not enough space to hold all of this content. That is why the drop down menu is a good design pattern to incorporate in high content websites.

Navigation from Square Enix

This type of navigation bar has the same drop down menu solution, but I presented this because it has something the other menu does not, Accessibility. On the first screen there is a frame around the home icon, letting me know I am on the home page. On the second screen the frame is now on the games section, letting me know I am no longer on the main homepage but instead in the games section. For someone who is color blind, this is a big deal because they will know what part of the website they are navigating through.


2. Search Patterns — Made of several components such as an input field, search text, and search icon (magnifying glass). For the most part it is located on the top right section of a homepage.

Search from Apple

When you select the magnifying glass icon, the search input field replaces the sections in the navigation bar. Depending on what is entered, an auto suggest will provide a list of suitable results. This type of search pattern would help my users find what they are looking for quickly.

Search from Netflix

In this version of the search pattern for Netflix, not only is the magnifying glass icon present but also the text “Search.” This could be a case where a hearing impaired person who is using a speech recognition program such as Dragon, can identify the icon not as a magnifying glass but as the search engine for the webpage. This is something I would like to have on my webpage for those who have accessibility issues.


3. Breadcrumb Pattern — Location in the website’s hierarchical structure in order to possibly browse back.

Breadcrumb from Blizzard

This version of the Breadcrumb Pattern is simple, elegant, and gets a point across as to where the user has landed. A user sometimes never gets to a page starting from the homepage, but instead through a blog or search engine. The function and simple elegance behind this trail makes me want to incorporate it into my design, because most insurance companies have a very in depth structure that consists of many pages.

Breadcrumb from Target

This example is from Target, it is almost the same as Blizzard’s breadcrumb trail but instead underlines the words making it more obvious that they are links. This is another form of accessibility, the obvious isn’t always visible.


Design Patterns are very important if you are not trying to reinvent the wheel, they save you time and they are convenient for putting materials together quickly. The ones I had previously mentioned are not the only ones available, there are so many out there to use, save, reuse for any upcoming projects. Throughout time as you work for multiple companies or firms, you will start to see Design Patterns everywhere that you will eventually create your very own library of different materials and functions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade