Create a custom site design

Customize your site in no time, no design knowledge necessary

No design knowledge necessary

An algorithm that knows color theory, font choice, and button design for you.

Customize your site in no time

One short quiz, and you'll receive a site design guide that works for Wix sites in minutes.

Create a Site Design

Take a few minutes to tell us about your site and we’ll create a site design that works for you.

Results

down arrow

Design Guide | Quiz

0%

Site Basics:

Type of site:

Answer required question

Site Subject/Theme:

Answer required question

Site Content:

Amount of Content:

Answer required question

Media or Text:

Answer required question

Level of Interactivity:

Answer required question

Site Audience:

Main audience age:

Answer required question

Most important emotion to convey:

Answer required question

Second Most important emotion to convey:

Answer required question

Site Feel:

Simple or Complicated:

Answer required question

Bold or Understated:

Answer required question

Modern or Classic:

Answer required question

Fun or Serious:

Answer required question

Colors

Your Results: color and palette pattern, dark mode

Describe warm vs cool decision

Describe color decision

Describe pattern type and decision

Palette is five colors and are ordered to best fit Wix site customization format.

Describe dark vs light mode decision

Fonts

Your Results: heading font, paragraph font, and text decoration

Describe color decision

This font pairing is a built-in pairing for Wix site design customization.

Describe dark vs light mode decision

Buttons

Your Results: font choice and border radius

Describe font decision

Describe pattern type and decision

There are three types of buttons with corresponding styles:

  • Raised Button (primary): These buttons are solid-colored with a shadow to give a more 3D, realistic feel. Raised buttons draw users' attention, especially using the accent color (color 3), and makes the buttons' actions feel important.
  • Ghost Button (secondary): These buttons have no background, using a border instead. These buttons can still have a shadow for a realistic feel. Ghost buttons feel less urgent than raised ones, making them ideal for secondary actions.
  • Links (tertiary): While technically not buttons, links can add interactivity to a site beyond linking to another site. Links are ideal for in-text interactivity or dialog boxes. The key design goal with links is to have them stand out from their surrounding text without being too distracting. Underlined text in a different color is enough to visually signify links on websites.
What is a Style Guide?

A style guide is a document that outlines all design elements for a brand, site, app, or anything else that needs a cohesive design based on specific brand and user needs.

This site takes the information you gave about your site's type, topic, content, audience, and general feel and uses an algorithm to produce a currated style guide featuring colors, fonts, and buttons, along with their uses.

In short, this is a design guide designed for non-designers.

For professional style guides, more detail is better. However, this site's results are structured to reflect how to customize a site's design using Wix

More in-depth style guides can also include layout, form elements, language and tone, images, icons, and logos, but that is beyond the scope of this site for the time being.

How to Use Your Style Guide

How to turn your results into a beautiful Wix website

Note: These instructions are specific to Wix, but general principles can be applied to other website builders like Foursquare, Weebly, and Wordpress

  1. Open the Wix editor for your site
  2. On the left sidebar, click the "Site Design" option
  3. Hover over the "Color & Text Theme" box and click "Customize"
  4. Click the "Colors" button
  5. Click the leftmost color box for Color 1
  6. Halfway down the color picker popup you'll see a tab that says Hex. Once that tab is selected, copy and paste the hex code (six digit code preceeded by a '#' next to the color name on the style guide)
  7. Click apply to finalize the change
  8. Repeat for colors 2-5

  1. Open the Wix editor for your site
  2. On the left sidebar, click the "Site Design" option
  3. Hover over the "Color & Text Theme" box and click "Customize"
  4. Click the "Text" button
  5. Hover over the "Text Theme" box and click "Change"
  6. Scroll through the featured text themes and find the one that matches the heading and paragraph fonts listed. (Hint: the text theme will be titled after the heading font, and the paragraph font will be the first listed in the description.
  7. Click the box for the proper text theme, changes are automatic
  8. Click the back button to return to the main text customization section.
  9. Below the "Text Theme" box are all the heading and paragraph styles. For each heading and paragraph section, click the pencil "Edit" icon to the right and change the font size, underlining, and italics to match the style guide.

  1. Open the Wix editor for your site
  2. Click on the button that you wish to change
  3. Click the paintbrush "Design" icon
  4. At the bottom of the popup, click the "Customize Design" button
  5. Change the background fill, text, borders, corners (border-radius), and shadow sections to match the style guide based on the button's use (primary, secondary, or tertiary)

Style Guide

Colors

Color 1

#Hex

Use for site background

Color 2

#Hex

Main color: use for headings, less important buttons, etc.

Color 3

#Hex

Accent color: use for important buttons and other calls to action

Color 4

#Hex

Use for subheadings, section backgrounds, and other unimportant decorations

Color 5

#Hex

Alternate option for subheadings, section backgrounds, and other unimportant decorations

Fonts

HEADING 1

Font description

Heading 2

Font description

Heading 3

Font description

Heading 4

Font description

HEADING 5

Font description

Heading 6

Font description

Paragraph 1

Font description

Paragraph 2

Font description

Paragraph 3

Font description

Buttons

Primary Button: use for important actions and features only

Description

Secondary Button: use for less important actions and features

Description

Tertiary Button: use for dialogs and links only

Description