Advantech Web Design Resources

Design Resources is an selections of guidelines, components, and templates that support the best practices of Advantech's website design. Backed by open-source code, and helps teams quickly build beautiful products.

Webpage Design Checklist

Learn how to make your webpages look normal and standard

Get Start

UI Kit

Use components by copying and pasting to build consistent user interfaces effortlessly.

Content Page Design Guideline

The general guidelines for Solution page, please clcik to read more and download the templates to start

Basic - Corp. Site Webpage

For webpage that ONLY include Advantech logo in the header, please click to download the template

Download

Homepage Key Visual Guidelines

Find out what are the design principles that define the brands identity images.

Key Visual Guidelines

Help you to create image key visual or video key visual that presents our brands identity in consistency

Corporate Colors & Typefaces

Check out the latest corporate colors and typefaces for on-screen and digital use.

Download

Product Image Guidelines

Provide specifications and guidelines for creating product images, as well as a PSD template for use.

CMS edit suggestion and FAQs

When you are building content area in the CMS generator platform. There have something you need to know.

Heeob, The New Typography

Learn how to use font-weight to improve text readability

Content Layouts

Good Website Layout Ideas, the layout of your website can define its success

Colors

Color speaks volumes about a brand

Icons. Easy. Done.

Take the hassle out of icons in your website.

Pagination Guideline

Documentation and examples for showing pagination.

IoT Mart ATW

Learn how to create new web content on IoT Mart ATW.

Design Guideline for DUDA

Resources to help you start building the webpage

Web Accessibility

To better understand how to make Web Accessible

Web Accessibility Standards

Is your content's easily accessible and usable by all individuals?

Video Key Visual Replace Picture Key Visual

Find out which KV would be more suitable for your webpage.

Image Optimization

Use the information below to find the optimal settings for your images.