Get Started Building Your Website | Part One: Planning

Get started building

your website
Part Two: Website Design

www.yola.com

Design 101
Choosing a Style
Your Business Logo or Website Name
Developing Brand Colors
Picking Font Pairings

Table of Contents

Background and Banner Images

Customizing Your Layout

Creating Your Own Columns
Dividing Text with Horizontal Lines
Other Useful Widgets
Inspiring Visitors to Take Action

Publishing Your Website to the World

Get Started Building Your Website | Part Two: Website Design

Design 101

Get Started Building Your Website | Part Two: Website Design

Design 101

Writing, image searching, planning, oh me, oh

my, where does the actual site-building begin?
Right now, my friend. The fun begins.
Heres Part One: Planning in case you missed it.
Looking at site design from a birdseye view can be a bit intimidating. The Internet is chock-full of amazing web design,
but it also has its fair share of sites that are, well, somewhat lacking. No one chooses to have a less than appealing
website, so how do you avoid it?
Thus the panic begins.
Where do I put my logo? How many columns should each page have? What color suits my branding? Widgets?
What are widgets?!
Take a deep breath and rid yourself of the unnecessary uneasiness. Weve got you covered. Youve already made it this
far. With a little bit of explanation, your website will be well on the road to success.

Get Started Building Your Website | Part Two: Website Design

Design 101

Choosing a Style
Once youre ready to start building, enter the Yola Sitebuilder where your website patiently awaits.
From here, you can work on the default Style Super Flat or choose any of the available Styles.
When choosing a Style for your website, its important to note that a Style, or template, is really the
skeleton of your website, and can be completely customized to your tastes and needs.
Weve found that its very tempting to look for a Style that matches your business or personal site. For
example, if youre building a site for your school, you may select our Elementary Style; or if building a
site for a cake shop, you may choose our Pink Cupcakes Style.

For maximum control, we recommend using Super Flat or Skyline, as these are the
most flexible Styles we have available. You can see the level of customization you can
create without any previous website-building knowledge on the following page.

Get Started Building Your Website | Part Two: Website Design

Design 101

Super Flat

Default design

Customized design

Skyline

Default design

Customized design

Get Started Building Your Website | Part Two: Website Design

Design 101

Your Business Logo or

Website Name
In this day and age, logos are everywhere you turn. Billboards,
buildings, automobiles, cell phone cases, clothing you name it.
Creating a memorable logo and brand is a powerful way to help
your business stand out in peoples minds.
If you dont have a logo in order, you can always type in your
business name and choose a cool font thats different from the
ones you chose above. You can then take advantage of the
branding opportunities that come along with our dynamic new
Styles, Skyline and Super Flat.
Upon selecting Skyline out of the Styles tab, open up Style
Designer from the Page section and under Colors, you can
upload your Logo. Once uploaded, your logo and navigation
alignment is completely customizable.
Double click on the space where the logo and navigation live,
known as the header. This will display properties only pertaining
to the header. Under Layout, you can choose to have your logo
be positioned on the left, right, top or bottom of the navigation.
7

Get Started Building Your Website | Part Two: Website Design

Design 101

Want your logo within your banner? Super Flat is the way to go. Upon selecting
Super Flat, hop into Style Designer, upload your logo to begin customizing.

While in the Logo section, adjust its alignment, choosing

between left, right or center. Next, decide on the sizing of your
logo, using the Width scroll bar.
Once your logo is in place, your banner may feel like theres
something its lacking. Save and exit Style Designer, hover over
the banner area and click Edit Heading.

Fill in your Site Tagline with a phone number, tagline or slogan

to add more life to your Banner. If youd like your Tagline and
Heading to show up on all pages, be sure to check the box
that says Apply page heading to all pages.
8

Get Started Building Your Website | Part Two: Website Design

Design 101

Dont have a logo? Not a problem.

With Style Designer, create your own Main Header and Site Tagline font pairings,
making it easy to differentiate between your companys name and its tagline text.
Simply click within the banner section and change the Font Family under Tagline.

Get Started Building Your Website | Part Two: Website Design

Design 101

Developing Brand Colors

Between backgrounds, headers, sub headers, banners and copy, choosing your website
colors is one of the more exciting aspects of site building.
Before youve chosen your website color
palette, it may a good idea to delve into
the psychology of your color choices.
Yes, there is in fact a psychology behind
colors studies show that colors evoke
emotion and can represent different
messages. For example, blue conveys
clean, calming and focused, while yellow

Yes, there is in
fact a psychology
behind colors
studies show
that colors evoke
emotion and can
represent different
messages.

conveys bright, positive and youthful.

A great way to get the wheels turning is
to think of the tone youve envisioned for
your company (youve already done this in the Planning section with your website and blog
copy). Next, determine which color will provoke the desired emotions.

10

Get Started Building Your Website | Part Two: Website Design

Design 101

Ready to try on a few choices? Enter Sitebuilder and

open up Style Designer from the Page tab.
Spread across the left hand side of your screen are a
variety of properties available at your expense. Click
through the properties and add in any hex color code
that suits your fancy and watch your sites transformation
PAGE TAB

unfold before your eyes.

When you find the right color, take note of the hex color code located at the bottom for future use.
Upon clicking through Style Designer if you find yourself stumped on color choices, theres a great
tool called Adobe Kuler that can help you navigate the plethora of colors available. Choose a single
color, and it will give you an entire palette from which to choose.
If youve got a really great image for your banner, you can also select colors from that image to
help match your website. In the Image section, we showcase a website with a color scheme that
matches the banner image or logo.

Choose your shade

Choose your color

11

Get Started Building Your Website | Part Two: Website Design

Design 101

Once you find your perfect palette, itd be a shame to lose it.
Use the spaces below to jot down four or five colors to use:

1.
2.
3.
4.
5.

12

Get Started Building Your Website | Part Two: Website Design

Picking Font Pairings

Following suit with colors, fonts also have the capability of evoking emotion. Coming to a
website and seeing five or more different fonts tossed about the page can feel similar to
walking through a ransacked house.

Youd much rather have a website thats more welcoming.

When selecting fonts, try and stick to two or three selecting the first for your headers, the

Design 101

yola

second for your paragraph copy and maybe a third for a tertiary header.
Some typefaces give off a pleasing ambiance, whereas others feel illegible in comparison.
Bearing in mind that the main goal in web design is to appeal to your audience, helping them
to easily read and understand what you do and how you can help.
Before coming to a final decision, put yourself in your visitors shoes. Is this font something
you can imagine reading, page after page?
Fortunately, Style Designer provides plenty of font pairings that work well together. Choosing
one of these will spread each font across your entire site in an elegant manner.

Some typefaces
give off a pleasing
ambiance,
whereas others
feel illegible in
comparison.

13

Get Started Building Your Website | Part Two: Website Design

Design 101

In Sitebuilder, open up Style Designer from the Page

tab, and under the Presets section, select Fonts.
This will prompt a box on your left to open that
displays over 30 pairs of fonts for you to test on your
site. These dynamic font pairings allow you to blend
serif and san serif fonts, as well as having pairs of only
serif, and only san serif fonts.

serif

d d

Georgia

sans serif

Helvetica

Once you find a pairing that you like, write them down so you dont forget and
so that you can use them for both online and offline marketing:

1.
2.
3.

14

Get Started Building Your Website | Part Two: Website Design

Design 101

Background and Banner Images

Although deciding upon backgrounds and banner images may be a difficult feat, its such an
exciting process this is where your site really begins to come together.
Upon selecting a Style, your new website will pre-populate with a default background image.
As enticing as it may be to claim these new digs as your own, the way to make your site
stand out from the two billion (or more) other sites on the Web is to create a website to truly
call your own.
Fortunately, weve got a variety of backgrounds and themes from our newest Styles, Super
Flat and Skyline from which to draw inspiration.

...the way to make

your site stand
out from the two
billion (or more)
other sites on the
Web is to create
a website to truly
call your own.
15

Get Started Building Your Website | Part Two: Website Design

Design 101

To start, lets take a look at Super Flat. Upon entering Sitebuilder, Click the
Styles tab, select the Recommended section and chooseSuper Flat.
Next, hop into Style Designer by clicking on the Page tab and clicking
Style Designer.
From here, under Presets select Themes, and youre officially cruising
down Inspiration Dr. These themes display an array of background images
with matching color palettes. Go ahead and try a few on for size youll be
adding your own background image or texture in no time.

Now, onto Skyline.

In the Recommended tab of Styles, Select Skyline for a completely

different look at feel to your site. Upon opening Style Designer, youll see
a very different look than that of Super Flat. We like to call this handy, new
design tool Basic Mode.
Using basic mode, easily adjust your background by flipping through the
wide variety of samples under Background. Pair these with the color
changeable color palettes available to you in the Highlights section.
Miss the list of all the customizable properties in Style Designer? No
problem. Simply scroll to the top of Style Designer and toggle to Advanced,
and you can see all the twists and turns you can customize for your website.
16

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

17

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

Designing the layout of a website can

feel like climbing a mountain.
It takes dedication and strategy, but once accomplished,
you feel as though youre on top of the world. Fortunately,
its not nearly as strenuous! Lets get you to site-building
bliss, shall we?

So youve selected your Style, you have some copy and images and know which colors and
fonts to use now onward to layout. If you dont have a distinct layout in mind, try drawing
some inspiration by flipping through a few of our preset layouts.
While in Sitebuilder, click the Page tab, and select the Layout subcategory. This will open
an array of presets ranging from two columns, to three columns over one, thus giving you the
variety that any site-building buff may need. These layouts can be changed for each page.

18

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

Need to see some finished products to decide which would be most

suitable for your vision?
You can always browse the Internet in search for sites whose layout you like. Or, here we have Zek Design,
a site built with our default, or single column, layout with widgets dragged in for a customized layout:

19

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

And here we have Cozy Cakemaker, a site built with a double column layout:

Once youve decided on a layout, you may be itching for further customization
no problem. Weve got column dividers, custom panels and horizontal lines galore.

20

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

Creating Your Own Columns

Using our Column Divider widget, you have the ability to create custom columns and place them
anywhere with ease. Lets use Zek Design as an example.
Here we have the Column Divider widget used to properly align Picture and Text widgets, giving the site
a polished, professional look.

To try out the innovative tool, once in Sitebuilder, click the Widgets tab, and under the
Popular section, you will find the Column Divider widget. Drag and drop this the widget
to the area of your choice, and there you have it your own custom columns!

Widget tab

Column divider widget

21

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

When using the Column Divider widget its important to note that its is not
limited to pictures and text place any widget in your custom columns to
create your own unique design.
This includes placing columns within columns.
In the example, the column divider widget was used in conjunction with two more column divider widgets,
to create four, individual squares of copy. With this source of customization, your options are endless.

22

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

Dividing Text with Horizontal Lines

As simple as it may be, one of our favorite design tools is the horizontal line widget. This tool provides a sleek,
polished way to break up and organize your sites content.

Picture this: In planning your sites layout, you realize both your services and
pricing pages dont have enough content to keep them separated. Being the
planner that you are, you decide itd be optimal to combine them into one
page. Once the separate sections are sharing a page, how do you decipher
between the two?

This is where the horizontal line comes in.

Try out the Horizontal Line widget by going into the Popular tab of the Widgets section in Sitebuilder. Drag and drop
your line to the area of your choice, and youll be able to customize this divider to match your fresh, sleek design.

23

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

The default horizontal line is a thin, grey line, but you can
change the color, thickness or even make it dotted or dashed.
Dont be afraid to try a variety of styles, youll know the
perfect divider for your page when you see it.

Once you find the right one, be sure to make note of how you did it and use to
divide all of your sections so that your site maintains a consistent look:

---------------.....................

Straight

Dotted

Dashed

Color: #
Thickness: px

24

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

Other Useful Widgets

In addition to these widgets that help with your layout, there are a plethora of other elements that you
can drag and drop on your site from a fully-operational Online Store to email marketing from Constant
Contact and appointment scheduling.

You can even use the HTML widget to add any custom code from
social media sites or add Google Analytics tracking, a tool that helps
you track visitors on your website.

The options are endless.

25

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

Inspiring Visitors to Take Action

The last step is getting visitors to take action on your site. When visitors come to your website, there should be a primary
flow for how youd like them to click from page to page. Remember your primary goal or mission? Whether its buy now,
sign up, learn more or other, you want to guide visitors to take action and be active participants on your website.

A Call-To-Action (CTA) is a word or phrase that upon reading

your message, urges your visitor to take an immediate action

Get started

for example, buttons clearly stating Upgrade now or Sign up.

The goal of a CTA is to demand the attention of your visitors, alluring them to continue in the direction youd like them to go next.
Keep in mind that its not always Buy Now.

26

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

The contents of your CTAs should vary from page to page. Think of it this way youre
browsing the Internet in the hope of finding tips on interior design. You stumble across
a site. You see an eye catching CTA. What does the button say? Buy now?!
You barely know anything about the company. So, where do you go from there? You certainly arent going to click
that overzealous button of theirs. Youll most likely go back to your search result to browse the next site on the list.
Your CTAs should be enticing rather than bombarding. Instead of simply placing that Buy now button on each
page, try adding buttons such as Sign up on your homepage, and Support button on your FAQ page. To build
credibility, save the Buy now button for your pricing page and online store.
There are three main focuses when it comes to creating a successful CTA:
1. Placing them in the right location
2. Demanding users attention with the proper visuals
3. Choosing which actions are necessary for each of your pages

Considering a CTAs main objective is to direct your visitors through your flow, signing up
where you want them to sign up and purchasing where you want them to purchase.
27

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

A great example of a properly placed CTA is on Evernotes homepage.

Upon entering Evernotes homepage, users are prompted with a single-field form accompanied by a green button simply stating
Sign Up. More importantly, is the driver to that button, which is the promise of the content: Remember Everything.

28

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

Another example is to use the custom panel widget to highlight your CTA.

If
the
aim
of
your
website
is
to
drive
business,
then
you
.
may want to have a space for visitors to call you or to fill
out your contact form.
Or perhaps, you want to highlight a specific product line.

Here are a few examples of CTAs using the custom panel widget.

Call Us Now!
Phone: (415) 555-5555

This site was built on Skyline, a Yola template. Take

your business online and start building your website

201 Mission St.

today. In just a few minutes, you can create a

San Francisco, CA

professional website on Yola. Get Started.

Email: support@yola.com

29

Get Started Building Your Website | Part Two: Website Design

Customizing Your Layout

Think about the layout of your content.

Where is the best place for your driving message?
In the spaces below list four pages of your website (if you havent built one yet, try four pages you
plan on building), and what the CTA on each page will be and where it will take a visitor.

Page 1:

Page 2:

Page 3:

Page 4:

CTA:

CTA:

CTA:

CTA:

Goes to:

Goes to:

Goes to:

Goes to:

30

Get Started Building Your Website | Part Two: Website Design

Publishing Your Website to the World

31

Get Started Building Your Website | Part Two: Website Design

Publishing Your Website

Adding
to the
Content
World

Holy cow, youre almost done!

Take a deep breath, its gonna be ok.
Publishing your site can sometimes be a scary endeavor. Remember you can always change your website
and re-publish. Theres also a really great checklist to help make sure, youve covered everything.
When you build your site on Yola, you can publish it to a subdomain for free. What that means is that your
site will be live and viewable by anyone. However, you will have a .yolasite.com after your site name.
For example, instead of yola.com it would be yola.yolasite.com.

We highly recommend that you publish to your own custom domain (or URL), especially
since it helps build your sites credibility and is great for search engines. It also costs less
than a movie ticket or a large pizza whichever you prefer. But if youre not ready, theres
always the subdomain just to get you started.

32

Get Started Building Your Website | Part Two: Website Design

Publishing Your Website

Adding
to the
Content
World

Weve written plenty of blog articles on why a custom domain is important

and what to do if your domain is unavailable. Theres also plenty of tips on
how to choose a domain name.
e.
Youll find that once youve built and published your website, theres a whole other ballgame of getting visitors to your
website and even expanding your credibility and protecting your privacy.
One aspect to note is that you may want to have a custom email address to go with your domain. This is especially
important for businesses, but we find that a lot of our users like them for personal use as well.
Having your own domain and email address just makes sense. It also helps people remember who you are. Think
about it, would you open an email that comes from cocacola@gmail.com? Probably not, but you just might open one
from info@cocacola.com.

Ready to click that publish button?

Go for it! Were proud of you already. Let us see what youve done.

33

Its easy to have complete control over your website.

Create a professional website

in minutes with Yola.

Start building for free