fbpx

Website UI Kit for NerdBrand

Every website or app has a User Interface.

Website UI Kits are like Brand Standard Guide for your website. This is what you refer to for any website element on your pages. It gives guidance to headings, forms, buttons, and more.

This is our guide for NerdBrand.

Contact us if your website looks like it’s not uniform in it’s design.

Typography

H1 heading

H2 heading

H3 heading

H4 heading

This is an example of how our Website UI Kit shows copy, that is the words, on the webpages should look both in italics and in bold.

Icons - Linetype Icons

NerdBrand iconography is line icons with a square border treatment around them. Orange is the primary color of the brand. Therefore, so its the icons color.

WordPress Image Gallery

Below is an example of the default WordPress image gallery function. Images on NerdBrand are to display the logo, and be 3 columns in a row.

Tab Elements

Tabs are how to show content that is voluminous and needs to be shown visibly still.

Accordian Elements

Accordions are like tabs. It’s not necessary to use both, but here’s how ours should look based on the website UI Kit standards.

Separator under a H2 heading (Left Aligned)

This is a H2 heading treatment. Each of these, when there is a paragraph, is to have a separator.

H2 heading (Left Aligned - no copy after, no separator)

Separator under a H2 heading (Center Aligned)

Website UI kits are important to keep your digital properties standardized as a brand guide keeps all your print standardized.

Separator with Text and icon

Separator with Text only

This is a information message box.

This is a warning message box.

This is a success message box.

Forms

This is a hover block element

This is an element rarely used. But when here’s how it should appear on the page.

Hover Box Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

FAQs Toggle

Toggle content goes here, and can contain: Images, videos, copy, or dynamic embedded content from social media.

Heading with Icon

Here’s how an icon and heading are to look together using the kine Icon family. To expand the icon set, Font Awesome is acceptable.

Image

seo ebook free download

Image with Border

seo ebook free download

Buttons

CTA with Icon and Button

Web Design & Web Development

UX, WordPress, eCommerce, Analytics, Visual Design

Your website is your first, most valuable expression of your brand. So after establishing a proper brand standards, we begin online.

I'm a default CTA

This is a subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Video Player

Google Maps

Graphs and Charts

Development
Design
Marketing
  • One
  • Two
  • Three
  • One
  • Two

Dynamic Post Grid

What Is A Marketing Retainer and How Do They Work?
brand identity
Brand Expansion
WordPress Statistics Podcast
This joint initiative offered by Go Social and NerdBrand is designed to address the critical digital marketing needs of small businesses caught off guard by the COVID-19 pandemic and shutdown.

Web Design

UX, WordPress, eCommerce, Analytics, Visual Design

Your website is your first, most valuable expression of your brand. So after establishing a proper brand standards, we begin online. If you want a UI Kit please contact us for your websites standards.

Does Your Business Need A Reboot?Quick, affordable digital marketing services to recover from COVID shutdowns.

We're here to help. Make a digital transition with our Small Business Digital Reboot Package, including a fresh WordPress website, strategic social media management, and more.

This package is ideal for any business that needs to rapidly build a digital presence. We'll get you back on track...

Learn More