• 0k
  • 0
Web Design \ JAN 10th 2015

11 Steps for Building a Website from Scratch (for Pro Users)

The beauty about Wix is that you can choose the level of effort and independence in designing your website yourself. Users who don’t have experience with web design usually prefer to use one of our website templates and follow an easy process of customization.

There is another way, however, one that will appeal to the skilled and the seasoned. Wix pro users can design a site absolutely from scratch, using a blank website template that gives maximum freedom, combined with the ease of use of the Wix platform.

11 Steps for Creating a Website from a Blank Template (for Pro Users)

If you want to go pro and learn how to create a website, Wix has all the right tools to help you achieve your goal. We also have a detailed guide to walk you through this challenging but rewarding process.

1. Understand Your Site’s Goals:

Before you even begin to think about design, you need to define the goals you set for your website. These will help you understand the technical requirements as well the general message you want your site to convey. For instance, if the main goal of the website is to sell fashion designs, you know you need to include a product gallery, a shopping cart and a checkout procedure into your design scheme. If your site’s central focus is to promote a music act, you would want to include audio players, possibly video players too, and a tour date list.

Understand Your Site’s Goals
2. Inspire Yourself:

We recommend that you spend some good amount of time on research. As you start picturing how you want your site to function, go on a web tour and visit as websites both related and unrelated to your industry. Make note of what you find impressive in terms of design and of performance, and think about adopting these things in your own website.

A great place to start is the Wix templates gallery. You’ll find a huge variety of website templates in a variety of themes, all designed by the Wix Studio wizards. These templates are created to fit the highest professional standards so we’re sure you’ll pick up an inspiring vibe from them

Wix Templates
3. Create a Detailed Site Map:

This is a very important step in the process. Your site map is the blueprint of your site’s architecture and it will continue to guide you all throughout the design, so make sure you put some thinking into it. The site map should include a list of all the planned pages and indicate clearly which page links where and what anchors or subpages are included on what section. Sketch a rough draft of each page that will include all the content the page should eventually display – images, texts, videos, buttons, etc.

Site Map

4. Define Your Style:

Now that you have the goals and structure figured out, and after your thorough research introduced you to the latest design trends, it’s time to think about your website’s look and feel. This includes the color scheme, typography choice, header design, use of elements like shapes, vectors, illustrations, etc.

In the Wix editor, under the Design category, you can view a large selection of colors and fonts presets. As a start, you can go over these presets and see which best fits the design language you want for your site.

website from scratch8

5. Plan Your Image Use:

Images are critical for most websites, so it’s best to plan in advance how you want to use them in your design. Is your site going to rely heavily on visual content? Will you be uploading images frequently? Do you have high-resolution photos? These questions will determine what type of image display is the most appropriate for your site and will help you choose and design gallery styles.

Some things to keep in mind:

Free Images From Wix

6. Prepare Texts in Advance:

Sometimes the textual content can influence the design process. It’s best that you prepare the texts that you plan to use before you actually begin building the site. This includes not only long paragraphs, but also the site’s tagline for the header, the “Call to Action” texts you want to distribute across the site, the wording of buttons, and so forth.

Of course, you’ll be able to change and edit these texts as you progress, but if will be very helpful to design while having a clear idea about the message of each page and each section of your site.

7. Finalize the Layout:

Alright, now we’re finally getting into some serious action the Wix editor. Think of the site layout as the skeleton of the website before you add anything to it. It’s possible that you’ll need different layouts for different pages – online stores, contact pages, appointment booking pages, biographies – all of these have a different character and require a distinct layout.

Wix offers a variety of blank templates that already have a fixed layout so you can choose to go with an existing structure, add minor changes or design a completely individualized layout with the clean slate template (first option in the blank template page).

Blank Templates from Wix

8. Add Design Elements:

With the layout you set up the foundations of your website. Now it’s time to add the decorative touch that gives your website a unique vibe. Start with design elements that will appear on all pages (fixed header, static background image, navigation menu design, etc.), and move onwards to add elements that are singular to each and every page (text boxes, image galleries, social media feed, etc.)

9. Upload Content:

Remember all of those images, texts, videos and sounds that you prepared in advance and worked so hard on? all of that goes into the editor now. After you complete this step you should evaluate whether the content works well with the design scheme you created and make appropriate adjustments if needed.

image style

10. Give It a Boost:

You can enhance the site’s looks and performance with apps and functions that will increase its appeal to your target audience. For instance, if you just finished creating a website for a restaurant, you might want to consider the OpenTable app, or if the site is about teaching, you can use the Online Courses app to sell and play instructional videos.

11. QA, QA, and More QA!

After completing the 10 previous stages, you’re ready to test your site and prepare for the launch. It’s extremely important that you go over the texts and search for typos, that you make sure the images are all cropped properly, that links are leading where they’re supposed to lead, and that everything in your site is working the way it should.

You can use our Get Feedback feature to share your unpublished website privately with friends or colleagues. You’ll be able to see their feedback on your site’s draft!


Quick Tips for Blank Template Websites:

* Bring out those rulers as you design!  And make sure you use the “snap to object” tool to keep things aligned.
* Do you anticipate frequent updating of content? Use apps and tools that are built for that purpose, like the List Builder feature or a blog.
* Wix blank templates can be optimized for mobile viewing. Make sure you optimize your site to increase the visitors rate!
* Save your work often and it will save you some time and effort.

Get The Wix Blog
Straight to Your Email

Subscribe to the WixBlog And never miss an update!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address.

Join Us! \ 

Get the latest and freshest content on creating
& marketing your Wix website.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address.