Designing a Website using Website
Builder
So, what is web design and
As technology advances, it enables us to how do you get started?
achieve more and more tasks without even We’ve got the knowledge you
realizing how complex they are. Website need to put you on the right
design by yourself is one of these.
track. From choosing your
website builder and domain
name, to understanding how
Thanks to the evolution of website builders, to design each element of
you can design a website and craft an your site, this complete guide
impressive online presence of your own.
Using professional web design features, you will walk you through how to
can generate revenue, nurture a community design a website.
of fans, and promote your brand online.
01. Set your goal
How to
design a
weabsite
Before you design a website, be crystal-
clear about what you want to achieve. With
so many types of websites out there, you
should start by deciding which kind will
help you meet your goals:
An online store to sell your products
01. Set your goal A portfolio website to showcase your art
A business website to manage and grow your business
A resume website to grab the attention of potential employers
A blog to share your knowledge with the world
An event website for weddings, parties and company events
A photography website to display and sell prints
A fitness website to book new clients
A restaurant website to help with online orders, delivery and payment
02.
Choose
Now that you’ve identified your goal, your next
step is to choose the right website builder to
accomplish it. A website builder (also known as a
Content Management System) is a platform on
which you can design, personalize and publish a
website without any knowledge of coding.
your
website There are dozens of platforms available on the
market. Not sure which one to use?
builder
• Once you’re logged into your platform of choice,
it’s time to conceptualize your website layout. If you
03. Define want to start from scratch, you may want to map out
your website’s design on paper before you start to
your layout drag and drop. However, another option is to use a
template, which is a pre-designed layout created by a
professional designer.
04. Claim your domain name
Registering your domain name
To put it in simple terms, your
is critical for online success.
domain name is your address
Websites with a customized
on the internet. It’s what your
domain are automatically
visitors will see in the bar of
perceived by internet users as
their browser, right after the
more professional and
“www.”
trustworthy.
04. Claim your
domain name
Now, how do you choose a domain name for your
brand? To make it memorable, keep it:
• Short: The longer it is, the higher the chances of
visitors misspelling it.
• Simple: Avoid symbols, special characters and
numbers.
• Professional: Your domain name should
incorporate your own name or your business
name, to avoid confusion.
• Evocative: Hint about what you do into your
domain name by incorporating words that are
related to your business.
Domain name is available by using this domain registration tool.
05. Gather your
content
• Use your own material as much as possible to ensure you’re
offering unique and branded content. If you’re not using
original content, just make sure to acquire your resources
legally.
• While having plenty of material on your website is great,
remember to always put quality over quantity. In an era of
decreasing attention spans, the best way to catch your
visitors’ attention is to showcase only your best content.
• Finally, make sure your content is fully branded. Think of
your website as an online persona - everything from the
written content to the colors and fonts you use should reflect
who you are or what your brand identity is.
06. Add the right
pages
• Every business is unique, and so is every website.
Nevertheless, there are some traditional sections that your
site visitors will expect to see. If you’re going for a multi-
page website design, here are some must-have pages:
• Homepage: You have one chance to make a good first
impression, and your homepage is it. Since it’s likely to be
the first thing visitors will see, aim for a homepage that’s
clean, organized and eye-catching. It should clarify who you
are and what you do, and serve as a starting point for
visitors to navigate through your site.
• About Us page: Tell your story, and share your values,
methods and any other information that defines your
brand with an About Us page. Welcome new visitors by
using the first person (“I” or “We”), since it adds a
friendly touch of friendliness and warmth. Also, don’t
forget to include a picture of yourself or your team
members, since clients always like to see the face
behind a business.
06. Add the right
pages • Contact page: When visitors want to reach out, they
should be able to get hold of you easily. That’s where a
contact page comes in. Make sure to include your
phone number, postal address, business email address
and social media accounts. You can also consider adding
a live chat widget that gives visitors the chance to reach
out and get an immediate response, or a contact form
where they can write their message directly through
your site.
• Your product or service page: The product page (or
service page, depending on your industry) is where your
visitors discover what you have to offer, and if they’re
convinced, take out their credit card and make a
purchase.
06. Add the right
• When you design a website with a product or service
pages page in mind, here are some key recommendations:
Add high quality product photography, write precise and
engaging product or service descriptions, and be
transparent about your conditions (such as shipping,
return, or cancelation policies).
06. Add the right pages
A blog: creating a blog boosts
Testimonials: an honest testimonials page is a wonderfully
your reputation as an expert,
effective addition to your website design. Studies show that
helps you foster a loyal
77% of satisfied customers will recommend your business or
community, and is an effective
service to a friend after having a positive experience. If the
way to drive traffic to your
purpose of your website is to bring in new customers,
website.
leverage the power of word-of-mouth and let your satisfied
clients do the selling for you.
06. Add the right pages
FAQ page: an FAQ page is a
dedicated page on your
website that provides
visitors with quick and
simple answers to common
questions in an organized
Splash page: A splash page acts as a preview to your site, and structured manner. It
greeting visitors before they reach your homepage. This is a can save time by providing
great way to engage with visitors using high quality visuals or automated answers and
interesting text, or to promote a special offer or event. provide a great experience
for users.
07. Design your
website elements
• Here are some elements to work on when learning how to
design a website:
• Website architecture: In order to provide the best
website navigation experience for visitors, your pages need
to be properly connected to one another. Make sure visitors
can easily find the pages they need by adding a navigation
menu and implementing internal links. Ultimately, follow
the “two-click rule:” Your visitors shouldn’t have to click
more than once to access any page of your site, wherever
they are.
07. Design your
website elements
• Menu: This central element of your design will display
the different items featured on your website, ensuring
that visitors can easily find and navigate from one page
to another. Website menus range from the standard
horizontal header menu, to the condensed hamburger
menu. Whichever style you choose, it’s recommended
to make it accessible on every page of your site, and to
keep the number of items to a minimum to avoid
clustering the screen.
07. Design your website elements
Colors: Color psychology proves that different hues have different impacts on
human behavior, which is what makes it such an important aspect of website
design. When choosing your website color schtypographyeme, a general rule is
to limit yourself to three shades: one primary color (60% of the mix), one
secondary color (30%), and one accent color (10%). Of course, if you’ve already
solidified brand colors for yourself or your business, these should be included.
Fonts: When you choose fonts for your website, pick ones that are legible
(both on desktop and mobile) and consistent with your brand identity.
While the world of typography is vast, opt for a maximum of three fonts in
order to avoid visual chaos.
• Header & footer: Your website’s header and footer are
found at the very top and bottom of your website,
07. Design respectively. Both of these elements can be used in your
website’s design to enhance usability and engagement.
your • Motion: This refers to all of the non-static elements of
website your website, which can be very handy when you’re
trying to catch the eye of visitors. Motion can come in
many shapes, sizes and locations across your website
elements design: implementing hover effects to encourage
interaction, using VideoBox to add stunning effects, or
even uploading a full video background.
• Scroll effects: As the name suggests, scroll effects
appear when the visitors scroll up or down your site.
Their sophistication has the potential to draw
07. Design attention, but most importantly, they help create a
smooth transition between the different layers of a
your website page.
website • Favicon: A favicon is a small icon that will be used
in a website browser to “represent” your website.
elements Take a second to look up at this tab in your browser,
and you’ll see a tiny Wix logo in the left-hand corner
- that’s a favicon.
• Scheduling software: If you run a service business, your
website needs to be able to receive online reservations and
payments, 24/7. Wix’s scheduling software does just that. It
includes the most sophisticated options on the market,
from letting clients book appointments online to the ability
to manage your staff’s calendars.
08. Pick the • Online store: Want to sell your goods online and generate
a continuous stream of revenue? An online store is the way
professional tools you to go. From tracking your orders to using Wix Payments to
need get paid easily, you’ll be able to manage everything from
one dedicated place.
08. Pick the professional
tools you need
• Music: Wix Music is a cutting-edge platform for musicians
who want to expand their audience while maintaining total
creative freedom. It enables you to sell your music directly on
your website and keep 100% of the profits. Simultaneously, it
distributes your tunes to over 120 digital stores.
• Video Maker: Did you know videos can boost organic search
traffic to your website by 157%? With the Wix Video Maker,
you can enhance your website design with customized videos
in order to engage with your audience and improve traffic.
These can be used to promote your products or services, share
exciting updates, and more.
• Owner app: The Wix Owner app
08. Pick the conveniently allows you to run your site from
anywhere, whether this means live chatting
professional with visitors, or designing your website on-the-
go. You’ll even have a mobile space where your
tools you need regular followers and clients can join.
•
• Expert tip: The Wix App Market includes a
large selection of apps to boost your website’s
business potential. From chat to payment, pop-
ups and advertising on Google, there’s a tool
for every aspect of your business.
09. Make it accessible to everyone
• These days, a truly great website design should be accessible to everyone.
Web accessibility ensures that all people, regardless of their abilities, can
comfortably experience and interact with your website. This includes people
with vision impairment, temporary injuries, hearing loss and more. With over
one billion people living with some form of disability, catering to everyone’s
needs is crucial. It also shows that you and your business value inclusivity and
diversity.
10. Optimize for mobile
• Smaller screens do not equal smaller impact. With an increase in smartphone
and tablet usage, it’s crucial that you ensure a seamless browsing experience
across all devices by optimizing your mobile website design.
•
• When creating a site with Wix, a mobile version of your site is automatically
generated with the Mobile Editor. This means that you won’t have to worry
about building a new structure from scratch. However, it’s still up to you to make
sure you’re optimizing your content to fit this smaller piece of real estate.
11. Strengthen your SEO
• SEO requires time, patience and persistence in order to get results, but you
can start setting up your SEO as you design your website. Here are some SEO
tips that you can apply to your content to improve your chances of ranking in
the top results:
• Conduct keyword research: Keyword research will help you find the
keywords that are most relevant for your site. Once you have them, pick
one main keyword, and a couple of secondary ones - but no more than
that. Place your keywords in strategic locations across your site (SEO title
and description, homepage, etc.), but don’t overdo it. Search engines
penalize websites that “stuff” keywords unnaturally into their content.
• Include on-page SEO: This is about telling search
engines what your pages include. On each page,
your website builder will ask you to fill in the meta-
11. Strengthen data. This includes the URL, the SEO title (the blue
link you see on Google’s results page) and the
your SEO description. Although visitors may not notice these
elements, they’re important when it comes to
ranking.
• Add alt text: Alt text refers to the descriptions that
you give to your pictures. These won’t be visible to
your visitors, but they give a strong indication to
Google as to what the media is about. Google may
have a lot of knowledge, but it can’t “see” photos
or GIFs (yet!). Alt text will help your visual content
appear in Google results pages. Plus, writing SEO
friendly alt text for your images is also an
important practice in improving your website’s
accessibility.
11. Strengthen your SEO
• Boost internal linking: This will make ultimately it easier for Google’s bots
to navigate through and recognize your website. Adding links throughout
your website design will also encourage visitors to discover more pages.
• Pro tip: You can regularly track the growth and performance of your site by
utilizing Wix’s marketing integrations and connecting your website to
tracking tools, like Google Analytics or Google search console.
12. Engage with visitors
• Live chat: Adding a live chat widget to your site makes a big
difference in your visitors’ ability to interact with you. Whether it’s
to provide fast customer support or to help undecided visitors
make their way to the cart, this small window at the bottom of
your users’ screen is a friendly addition.
• Social media: Similar to your website, your social media channels
are an important aspect of your online presence. As you design
your website, add links to your social accounts to build your social
following and provide another outlet for visitors to connect with
you. These should be located somewhere visible, such as under the
menu, on the right or left side of your page, or in the footer.
12. Engage with visitors
Newsletter: Email marketing is a great way to maintain a connection with
your audience. You can use email newsletters to update visitors about the
latest sales on your online store, promote new blog articles, or celebrate your
achievements with subscribers. Invite visitors to subscribe to your newsletter
by placing a lightbox on your website.
Forms: One powerful way to build long-lasting relationships with your
customers is to ask for their feedback. Creating an online form for your
website makes sure that visitors have a safe place to share their thoughts
about your products, services, website or customer support.
13. Ask for
feedback
Is your web design optimized for mobile? Over
50% of internet users browse websites using a
mobile device. You certainly don’t want to leave
half of the world’s population frustrated.
13. Ask for Are all the links working? Click on every link to
make sure none of them return a 404 page (this
feedback indicates that the page doesn’t exist anymore).
Are the SEO elements filled out correctly?
From alt text to title tags, there are some items
to verify so you can rank higher and grow your
search engine visibility.
14. Publish and update
By Jenna Romano
Web Design Expert and
Writer
• As you learn how to design a website that constantly
grows and evolves,, you’ll need to know how to update
your site. There’s always room for improvement, and
you want to make sure that you keep your website
By Jonathan Sitbon
design fresh.
Writing Expert at
Wix •
Stay savvy by keeping up with web design trends, and
use that knowledge to update your site’s design
overtime. Don’t forget to keep your content up-to-date,
too. Make sure it’s always relevant and proves to
visitors that you’re on top of the latest developments in
your industry.
