Intro to Design Patterns

Reusable Solutions to Known Problems

In web design, a design pattern is not a visual “pattern” (e.g. a background image of repeating shapes and colors). It’s easy to see how one might immediately think of this when they put the words design and pattern together. Originating from software engineering, a web (UX, UI) design pattern is a reusable solution to a known problem.

User interface design patterns are descriptions of best practices within user interface design. They are general, reusable solutions to commonly occurring problems. As such, they form the backbone of “technical support.” However, as design patterns can be applied to a wide variety of instances, designers should adapt them to the specific context of use within each design project.
Interaction Design Foundation

Common Examples of Interactive UX/UI Design Patterns

Common Site Structural Design Patterns / Components:
- Site Headers
- Site Primary Navigation Bars
- Site Hero Sections aka Banners, Billboards, etc
- Site Footers
- Site Sidebars
Modals/Modal Windows/Overlays (related: Lightboxes)
- Example implementation: Fancybox
Carousels (related:Sliders, Slideshows)
- Example implementation: Swiper
Module Tabs
Accordions (e.g. Accordion Menus)
Breadcrumbs
Drop-down Menus (e.g. Vertical, Horizontal)
Image Galleries and Thumbnails
Mobile Toggle Navs
- Example: Toggle Menu Codepen
Etc.
… (there are many, many more)

Design Pattern Example: Site Headers

Site Headers & Site Branding, Identity, & Navigation

There are many different ways to structure and style your site header. Since it is is at the top of the interface, the site header plays an important role in establishing the site brand, identity, and navigational system. Below are a few different options to consider when customizing your site header.

Site Headers & Information Architecture (IA)

When it comes to site headers, one of the first decisions that web designers need to make is what content will be included within the header. Common elements and related concerns often times include:

Site Name
- often times located in the top-left corner
- clickable/linkable to the home page (e.g. href=”index.html”)
Logo
- if there are multiple versions, which version of the logo should be included here?
- Logo + Site name? Logo only?
- Responsive logo? (e.g. see responsive logos)
Navigation (Main Menu)
- How many sub pages should be included?
- Should a link to “Home” also be included within the nav?
- Should third-level pages also be included (e.g. via drop down menus)?
- Any call-to-action buttons (e.g. “Sign in”)

Site Headers & User Experience Design (UX)

How will the user interact with the header? How should the site header behave? Should it always be fixed at the top? or scroll away? Should it appear large at first when the user is at the top of the page, but then shrink in size as the user scrolls down? Should the header expand when the user hovers or clicks on certain parts of it (e.g. navigation items)? Where should the site identity/logo be placed? Top center? Top Left? How will users know what page they are on? Should the site header include a visual indicator to provide feedback to the user what page you are on? Will there be any changes to the user experience for small screens? extra large screens?

Site Headers & User Interface Design (UI)

What color should the site header be? What color should the text be? What typography works well to both communicate the brand and be usable/readable/legible? Should the site identity text be different (e.g. larger? bolder?) than the navigation text? What should the layout be? Header left-aligned and navigation right-aligned? Both centered and stacked? Should each element align to a grid? Should they align to a baseline? How should the site look on small screens? extra large screens?

Site Header Visual Examples

Below are a few examples of site headers that visually illustrate some of the concepts and questions from above.

Simple Header

See the Pen Simple Header by kccnma (@kccnma) on CodePen.0

Simple Header: Responsive w/ Flexbox

See the Pen Simple Header: Responsive w/ Flexbox by kccnma (@kccnma) on CodePen.0

Simple Header w/ Inline Image Logo

See the Pen Simple Header w/ Inline Image Logo by kccnma (@kccnma) on CodePen.0

Simple Header with Inline Image Logo and Hidden HTML Text

See the Pen Simple Header with Inline Image Logo and Hidden HTML Text by kccnma (@kccnma) on CodePen.0

Simple Header w/ CSS Image Background Logo (Leahy Technique)

See the Pen Simple Header w/ CSS Image Background Logo (Leahy Technique) by kccnma (@kccnma) on CodePen.0

Simple Header with CSS3 Animation

See the Pen Simple Header with CSS3 Animation by kccnma (@kccnma) on CodePen.0

Design Pattern Example: Site Hero Sections

Site Hero Sections aka Large Image Banners

Website hero sections, also known as hero banners and hero images, are typically large, prominently placed images and text that are often times the first thing that a user sees and therefore an opportunity for web designers and content creators to communicate important messages to the user. Similar to advertisements, hero sections often times will contain targeted marketing material, visually powerful imagery, creative copywriting, and distinct calls to action (e.g. large buttons).

In web design, a hero image is a large web banner image, prominently placed on a web page, generally in the front and center. The hero image is often the first visual element a visitor encounters on the site; it presents an overview of the site’s most important content. A hero image often consists of image and text, and can be static or dynamic (e.g. a rotating list of images and/or topics).
The content presented varies with the purpose of the site: it can be relevant news about the site, specific site-links, or—in the case of e-commerce—the best-selling or strategically placed products or services.
Wikipedia

Site Hero Qualities

Prominently positioned at prime real estate locations of web pages: typically at the top and centered
Prominently sized often times with large imagery and large typography
Often times the first thing a user sees
Provides an opportunity to:
- highlight important content
- communicate an important message
- direct a users to important parts of a site

Site Hero Content Variations

The content for hero sections will vary from site to site, often times with a combination of the following:

Large Imagery
- Photography
- Illustration
- Product(s)
- Large Logos, Icons, & Infographics
Large Imagery + Text
- Photography as Background Image (CSS), Text on Top (HTML)
- Text + Call-to-Action (CTA) Button(s)
Large Videos + Text
- Promotional Videos
- Aesthetic Background Videos
- Motion Graphics
- Animated InfoGraphics

Site Hero Layout Variations

The layout and presentational style of hero sections will vary depending upon the content. Below are some common hero section layout variations:

Centered Vertically + Horizontally
Split Layouts (dual content)
- Vertical Split: E.g. Image Left, Text Right (and vice versa)
- Horizontal Split: E.g. Image Top, Text Bottom (and vice versa)
Extra Large
- Sometimes fullscreen (100vh)
- Sometimes blends with or includes the header (e.g. logo and navigation rendering on top)

Site Hero Related Disciplines & Topics

Web designers and developers often times rely on a collaborative team to design effective hero sections. Some of the following area disciplines might play overlapping roles in determining the content, style, and tone of hero messages

Advertisers
- Art Directors
- Copy Writers
Artists
- Photographers
- Illustrators
- Digital Artists (e.g. specialist in creating custom digital imagery and info graphics)
Marketers
Sales Team Members
Customer Relations Experts
UX Professionals