Internet Brands - Website Builder Tools
Description
Our team at Internet Brands audited and cleaned up features on the ‘Settings’ pages of our Content Management System.
OVERVIEW
Internet Brands builds websites for medical businesses using its own content management system, similar to a Wordpress or Squarespace. Here are a few of the tools and features I helped design for our Website Builder.
FONT PICKER
I designed a Font Picker tool that would give us the flexibility in changing the font properties for our websites. We wanted to the tool to accomplish the following:
- Switch the font pair.
- Change text properties for text styles (e.g. font family, weight, size, line height).
We made this specific to how our system. Below is a clip of the Font Picker in action.
Font Picker - Switching Font Pairs
Font Picker - Adjusting Font Properties
SECTION PICKER
To add sections to a website, we have a menu that displays the different sections that could be added. We created prebuilt sections (e.g. different banners, services, staff) and needed a way to display them. These are the updates we made to the Section Picker:
- We created a side menu and organized the section headers and subheaders.
- We created larger cards that would hold screenshots of the different prebuilt sections.
- We updated the horizontal slider for the cards to a vertical scroll.
Below is a clip of the Section Picker in action.
Section Picker
COLOR PALETTE PREVIEW
In our website builder, when users are setting the colors for their website, the colors don’t change dynamically on their page. Often times, it takes some guesswork on how text or buttons will look on certain backgrounds. We put in a preview in the color palette selector to show how the selected background, text and component colors would work together. We included previews of the components on light and dark backgrounds.
Below is a clip of the Color Palette Preview in action.
Dark Mode Preview
Light Mode Preview
