Ci logo

User Experience

Style Guide Glossary

Responsive Style Guide

Our design standards, elements, components and patterns that are built using our StyleBitz technology framework and support cross-device design for CustomInk.com moving forward.

Legacy Style Guide

The Style Guide seen at http://legacy-styleguide.customink.com/. It represents most web styles seen on fixed width, non-responsive pages on the site today. As more pages are redesigned to be responsive and mobile-friendly, these styles and the markup/stylesheets supporting it will decrease in use on the site. It’s worth noting that the current version of the new/responsive style guide mirrors a lot of the visual design seen in the legacy style guide, but updated to be responsive. This “do no harm” approach helps maintain visual consistency from page to page on the site as we work toward more responsive pages.

StyleBitz

The technical framework, or building blocks, for CustomInk’s mobile/responsive websites. StyleBitz is a Sass framework built on top of a variety of open source technologies. It enables the development of responsive web pages using shared styles for CustomInk user interface elements and components.

Living Style Guide (Documentation)

The Living Style Guide documents all aspects of StyleBitz - the technologies it’s built on, an inventory of components and styles we’ve created for CustomInk.com, how to get setup for development and high-level UX rules. The Living Style Guide grows as we add to or edit StyleBitz and is the best real-time reference for individuals that need to design or develop using StyleBitz. It’s considered “living” because the documentation itself is a working representation of the design standards, elements, components and technology supporting it - a form example in the living style guide is built with the same HTML markup and stylesheet that a responsive form would use on our production site.

Responsive Design

This is a web design/development approach where a webpage scales and adjusts to be optimized for a variety of screen and device sizes. It supports mobile, tablet and desktop optimized experiences while only using one coded page, keeping content and style updates manageable and the user experience consistent across multiple devices.

Breakpoints

Breakpoints or breakpoint ranges refer to designated browser window sizes (in pixels) and are used to optimize the user experience at each size via stylesheets. Our default breakpoint widths are at 700px, 1024px and 1300px and roughly correspond to mobile (below 700px), tablet (below 1024px), desktop (below 1300px) and x-large desktop (above 1300px). You can read more details about our breakpoints in the Living Style Guide.

Grid

This is a set of vertical columns with spacing in between that is used in web design and development. Our responsive grid has a different number of equally sized columns at each of our breakpoints. For mobile (below 700px), we design with 4 columns, tablet (below 1024px) 12 columns, desktop (below 1300px) 12 columns and extra large desktop (above 1300px) 16 columns. Columns have spacing between them, which is often referred to as a gutter. A designer or developer can explain more details if needed.

Framework

A framework provides existing functionality to help expedite and standardize building something. StyleBitz is referred to as a framework, or technical framework, because it is a set of web technologies and our own stylesheets that provide reusable design elements and components. Using the StyleBitz framework helps expedite design and development of CustomInk web pages.

Core Elements

Core Elements are basic HTML elements (headings, paragraphs, etc.) and foundational design elements such as colors, fonts and icons in our Style Guide. You can review CustomInk Style Guide core elements in our Living Style Guide documentation.

Global Components

Global Components are very high level pieces of the UI that are used once per page. Currently these include headers and footers and can be reviewed in our Living Style Guide.

Reusable Components

Reusable Components are small UI pieces that can be used one or more times on a page. Currently these include alerts, dialogs, panels, tables, etc. As new product development work is completed, this section will grow to include other components we need in many places across the site, such as modals. You can review reusable components in our Living Style Guide.

Forms

Forms include one or more of input fields (text, radio buttons, etc.) and a submit button. They are used to collect and store information from our users, such as email addresses, shipping information, etc. on web pages. We break forms out separately from reusable components in the Style Guide because of their frequency/importance of use and there are a variety of use cases, form types, patterns and best practice on our site to document. You can review forms in our Living Style Guide documentation.

Prototype

A prototype generally refers a model of something. A web prototype may include clickable wireframes or full-color mocks or even a working web page to demonstrate functionality and user workflows. Prototypes made with code are generally accepted as non-production quality, so if you see a prototype of something it does not imply that engineering work has begun.

A StyleBitz prototype refers to a responsive model that works in a browser and was built on top of our StyleBitz framework. StyleBitz allows designers with some knowledge of HTML/CSS to quickly build functional, responsive pages using existing elements and components to solidify user experience and layout specs for engineers, demo product concepts to stakeholders and user test across devices.

Mobile-Friendly

Mobile-friendly at CustomInk generally means that a web page has been optimized to be viewed on a mobile device - easy to read, touch-friendly buttons and inputs, good page load time, etc. In the context of StyleBitz, mobile-friendly pages are likely responsive (designed with all device sizes in mind) but you may hear about mobile-only pages (such as the mobile homepage or the New Design Experience/Lab) in this context as well.

Mobile Web vs. Native App

Mobile web refers to web pages that are viewed in a browser on a mobile device while native app refers to something that user downloads from an app store onto their device. Today CustomInk is focused on making all of our web pages responsive and mobile-friendly with the use of our responsive Style Guide and the StyleBitz framework. At this point we do not have any native app development planned.