Internet Brands - Website Builder Tools
WORK
/
INTERNET BRANDS - WEBSITE BUILDER TOOLS
Internet Brands builds websites for medical businesses using its own content management system. Here are a few of the tools and features I helped design for our Website Builder.
Font Picker
To give visual flexibility to the websites we're building, we designed a custom Font Picker tool that was specific to our system.
Summary
This interface enabled the ability to switch between complete font pairs and the capability to fine-tune individual text properties including font family, weight, size, and line height for various text styles. The Font Picker provided our team with typographic control while maintaining design consistency across our web platforms.
Font Picker - Switching Font Pairs
Font Picker - Adjusting Font Properties
Section Picker
We redesigned the menu that displayed different prebuilt sections to more easily preview sections that would be added on the website.
Summary
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.
Section Picker
Color Palette Preview
We built an interface to preview color palettes and to show how the colors would be applied to the website.
Summary
In our website builder, when users set the colors for their website, the colors didn't change dynamically on their page. Often times, it took some guesswork on how text or buttons would look on certain backgrounds. I designed a preview in the color palette selector to show how the selected background, text, and component colors would work together. I included previews of the components on light and dark backgrounds.
Dark Mode Preview
Light Mode Preview
Token Studio - Color Tokens