Alex Tebbs - UI Developer | GoDaddy Styleguides
UI Engineer

Click on a letter of my name

About this design

I like to be flashy, but minimalism is important to me. This type of design is popular among photographers, artists, and fashion labels. The stark, unassuming nature of the design provides a blank canvas upon which content becomes the absolute focus.

Remember me? Skeuomorphic design dominated the late 2000's - early 2010's. Skeuomorphic is a funny word which essentially means design which attempts to mimic the physical world. Skeuomorphic design is dominated by gratuitous use of shading and lighting, and in more extreme cases, texture and graphics to make a digital product resemble it's physical counterpart.

When designers felt Skeuomorphic design was becoming too overbearing, there was a large shift in the design world towards stripping out excess shading, lighting, and other affordances associated with the previous trend. This left us with "Flat" design. To me, flat design means focusing on creating clean and usable interfaces without using visual flair as a crutch.

This is everything you should never do. Poor hierarchy, misuse of typefaces, dark UI patterns, no consideration for mobile devices, obnoxious color pairings, awful contrast, distracting elements. Please don't make me do this stuff.

Seriously, .

Liberal use of primary colors, larger type, and colored, illustrative, iconography are a few of the things that make this design feel whimsical or even a bit childish.

I hesitate to use primarily dark color schemes -- black-on-white text is easier to read. However, black is a powerful tool. A darker grey balance can evoke feelings of sleek, modern exclusivity and mystery. Dark schemes can be useful when creating a product or website meant to be a counterpart to an already existing property. I also think a darker UI is a better fit when working on websites that deal primarily with video/other media. This mimics our expectation that video/other media appears on a black background, as it does on our TV sets.

Serif typefaces are seldom used in web design, and for good reason. Sans-serif fonts are friendlier and have been proven to be easier to read on screens, especially at small sizes. However, when attempting to target certain markets or create a sense of luxury, a design using serifs can give the impression of a high-end restaurant menu. Furthermore, liberal white space, thin strokes, and reserved use of pastel shades give this design a feminine energy.

Swiss design (aka International Typographic Style) is a classic style which began to emerge in the 1920's, and is still influencing designers to this day. In Swiss design, typography is king. Common hallmarks of Swiss design include large, geometric typefaces (most ubiquitously Helvetica), rigid alignment to a multi-column grid, and carefully-placed flush-left text. Color is used liberally, but usually no more than one color is used in a piece.

Originating from architecture, the term "Brutalism" refers to design that is intentionally raw and unpolished. In the context of web design, this usually means rejecting commmon user interface patterns in favor of presenting a design so aggressive it almost shocks the user into sticking around to enjoy the content.

But hey, if it's not your thing, I understand. , there's plenty more.

UI Engineer
Click on a letter of my name

GoDaddy Styleguides

Expansive digital brand guidelines repository

  • Created a styleguide repository site and design showcase site containing hundreds of custom-designed pages.

  • Moved from "flat" PDFs to a web-based system, allowing for true content management, ease of sharing, and version control.

  • Added features only possible in digital environments such as deep-linking, navigation, click-to-copy, animation, etc.

Homepage for main brand style guide.
Homepage for main brand style guide.

GoDaddy is a large domain registrar and tech company with a brand that stretches across multiple product offerings - each with its own set of precise branding guidelines. When dealing with branding guidelines, it's important to have a single shared source of truth, and holding all that information inside flat PDF files isn't a viable solution at scale.

Working with my team at EAS, I led the effort to bring these style guides into the digital era, creating a website where the branding information could be deep-linked into, organized, version-controlled, and interacted with in a way that could never happen in PDF.

Side by side comparison of digital vs PDF styleguide.
Side by side comparison of digital vs PDF styleguide.

I started by analyzing the design patterns employed across hundreds of PDF pages to layout this branding information. Considerations were made to achieve a balance between preserving the original design of the PDFs versus templatizing their layout patterns into re-usable components. I identified a set of certain highly reusable components, as well as a few common modulations, and implemented these layouts in HTML/CSS.

GoDaddy styleguides color picker. Colors can be moused-over and clicked on to copy hex or RGB codes.
GoDaddy styleguides color picker. Colors can be moused-over and clicked on to copy hex or RGB codes.

Certain high-profile components were given special treatment, animations and click-to-copy functionality was added where it made sense to do so.

These components were then composed into large scrolling webpages, assets were normalized and hosted on CDN services, SVG files were cut from the PDFs and optimized for web presentation, a collapsible sidebar was created to intelligently manage navigation throughout a given brand vertical (guide), and a homepage created to manage navigating between guides.

Showing accommodation of multiple screen sizes. On mobile views menu can be expanded for navigation.
Showing accommodation of multiple screen sizes. On mobile views menu can be expanded for navigation.

Finally, each guide was optimized for mobile presentation, and a login/authentication system was implemented to tie into GoDaddy's existing corporate user management.

GoDaddy design showcase site. Initial layouts were provided by the GD design team - my team was responsible for animation and responsive layouts.

I've worked on a number of different projects with the GoDaddy brand - including developing their design showcase site (see above).

Back to all projects