Thursday February 11, 2021 By Dave
Website Design: The Complete Guide

Disclosure: This content material is reader-supported, which suggests in the event you click on on a few of our hyperlinks that we could earn a fee.

Designing an internet site from scratch will be difficult. But it surely doesn’t must be.

Years in the past, after I first began creating my web sites, there weren’t a ton of assets. There have been principally two choices—study the fundamentals of web site programming languages or rent a designer. The primary selection is tough and time-consuming. The latter is pricey. 

After a quick try of attempting to design every part alone, I ended up spending prime greenback on a designer. It was greater than I wished to spend, however I didn’t actually have a lot selection.

Immediately, new web site homeowners have extra assets at their disposal. It’s attainable to design an expert web site with out hiring a designer or studying learn how to code. 

Sound too good to be true? It’s not. Whether or not you’re an entire newbie or simply on the lookout for an alternate approach to design web sites, you’ve come to the best place. I’ll clarify learn how to design an internet site under on this step-by-step information. 

My Favourite Device For Web site Design

Wix is my favourite device for web site design. It’s primarily an alternate technique to sidestep internet design altogether.

As a free web site builder, Wix makes it straightforward for anybody to construct and design an internet site from scratch—no expertise, growth expertise, or design data required. 

The rationale I like Wix a lot is that it’s simply so easy. Even for such a easy device, the ultimate design at all times seems professionally made. Folks will simply assume you employed a designer—it’s that good. 

Another excuse why I like to recommend Wix so extremely is due to its versatility. It may accommodate the design wants of just about each kind of web site below the solar. From easy blogs to portfolio websites, on-line shops, restaurant web sites, small enterprise websites, and extra, Wix can do all of it. Different web site builders available on the market simply don’t have the identical versatility. 

Proceed under, and I’ll train you learn how to design an internet site free of charge utilizing Wix. 

The very first thing it’s essential to do is join Wix. So head over to and create an account. That is 100% free to do, and also you don’t even have to present your bank card info.

Simply click on one of many many “Get Began” buttons on the homepage or anyplace else on the location.

In contrast to different platforms, the Wix sign-up course of will be accomplished in a matter of seconds. There aren’t any advanced type fields to fill out. They simply want your e mail and a password. 

You’ll be able to even bypass typing something and sign-up with a single click on utilizing Google or Fb. 

When you’re signed up, Wix will mechanically stroll you thru the web site design course of. 

Step #2: Select Your Web site Sort

Subsequent, you’ll want to determine what kind of web site you wish to design. Your reply can have a major influence in your design selections.

For instance, a private weblog and an ecommerce web site can have main variations in design selections. A portfolio web site used to showcase images or customized artwork gained’t have the identical design as an area restaurant web site.

Wix makes this step straightforward for you. You’ll be prompted to pick out your web site kind from a variety of potential choices.

Primarily based in your reply, Wix will mechanically current you with relevant templates in that class. For instance, if you choose “on-line retailer,” then the structure will accommodate product pages, product classes and make it straightforward so that you can design a checkout course of. 

When you select an internet site kind, Wix presents you with two choices on your design:

  • Let the Wix ADI create an internet site for you.
  • Create your web site with the editor.

The primary choice is easy and is superb for people who find themselves in a rush. You’ll simply reply just a few easy questions, and Wix will design a web site for you based mostly in your responses. It’s spectacular how rapidly the method takes. You’ll have a model new customized web site design in lower than a minute. The design comes out lovely, and except for customizing the pages with your personal content material, you’re performed.

For the needs of this tutorial, we’re going to stay with the second choice—making a web site with the Wix editor. This will provide you with extra freedom and management over each side of the design selections. 

Step #3: Choose a Template

Reasonably than attempting to design an internet site with a clean canvas, it’s a lot simpler to start out with a template.

Take a couple of minutes to flick thru the totally different choices. What types do you want? Which templates emulate your model picture? Wix has 1000’s of templates to select from. It may be a bit overwhelming at first. However slim your focus based mostly in your particular kind of web site.

For this instance, I select a “enterprise” web site. However that’s a very broad class. Should you look to the left aspect of the display screen, you possibly can slim your focus additional into sorts of companies. 

Wix has particular templates for consultants, actual property corporations, skilled providers like finance and regulation, advertising, and a lot extra. Each web site kind has totally different subcategories with templates. 

For instance, if you choose “on-line retailer,” then you definately’ll see templates for clothes, jewellery, electronics, house decor, magnificence provides, sports activities gear, and extra. Should you’re designing a weblog web site, Wix has templates for private blogs, journey blogs, trend blogs, podcasts, and many others.

Your template will grow to be the muse for the remainder of your web site design. So it’s essential to take your time and never rush by way of this step. You’ll nonetheless have the ability to customise totally different design parts to your liking, however that’s a lot simpler with the best template. 

Step #4: Edit Your Structure

Web site guests will type an opinion about your web site in lower than one second of touchdown on the house web page. That’s why the design is so essential, and all of it begins with the best structure.

Wix templates have already been optimized for a user-friendly design. However you’ve got the liberty and suppleness to make some modifications right here. 

On this instance, I’m modifying the “Enterprise Marketing consultant” template. Let’s say I wished to maneuver the positioning of the headline on this homepage. I’d merely click on the field within the Wix editor and drag it some other place on the web page. 

Or perhaps I wish to reposition that “Be taught Extra” call-to-action on the best half of the display screen. I can click on on it and drag the button anyplace I need. 

I encourage you to maneuver just a few issues round once you’re first getting began. This can introduce you to the Wix editor, so that you’re comfy down the highway. Should you in the end don’t wish to make any structure modifications, you possibly can at all times revert again to the unique design. 

Step #5: Put together Your Content material

Content material is a major factor of your web site’s design. You’ll be able to’t utterly finalize the design with out understanding precisely what supplies will probably be featured on the web site. 

Collect photographs, movies, GIFs, logos, slogans, textual content (copy), and no matter else you wish to show in your web site. 

Let me present you an instance as an example my level.

I’m nonetheless modifying that very same enterprise guide template. One of many first issues I’d do on this a part of the web page is swap the picture with an image of myself. However earlier than I try this, I’d additionally want to consider the corresponding textual content copy on the display screen’s backside left aspect. 

By default, the template has some clean house right here, as I’ve highlighted above. Whereas clean house is a crucial internet design function, I don’t love the way it’s used on this occasion.

So these are my choices:

  • Use a full-length picture (just like the one above) and add a paragraph within the clean house.
  • Use a smaller picture (like a headshot) and simply use a single paragraph of textual content.

Each will obtain my objective of eliminating that vacant part of the web page. Do you see how one part impacts one other? All of that is associated to the design, and it’s a lot simpler in case you have your content material ready forward of time. 

Step #6: Outline Your Branding Technique

Begin to consider how guests will understand your web site. Issues like the colour scheme, fonts, and different design elements will straight influence your model picture. 

Click on the “Theme Supervisor” on the left aspect of your Wix editor. That is the button with an “A” and what seems like a raindrop or paint drop.

From right here, you possibly can change your web site’s theme colours. You’ll even have the flexibility to edit your default textual content themes for headers and paragraphs. 

On this case, the present shade scheme works properly for a enterprise guide. It’s trendy {and professional}. However let’s say you have been designing an internet site for teenagers. You may have a bit extra enjoyable with brilliant colours and massive, daring fonts. 

Should you added your organization logos and different supplies again in step #5, you’ll wish to be sure that the colour scheme flows properly with the remainder of your content material. 

Step #7: Add Touchdown Pages

Your touchdown pages will every have distinctive designs. Whereas they need to all observe the identical branding ideas and theme of your own home web page, the design selections can have some variations.

So as to add a web page, click on the highest icon on the left aspect of your Wix editor. Then click on “add web page,” as I’ve highlighted under.

New pages will primarily be a clean canvas, besides on your header and footer. However slightly than ranging from scratch, you possibly can “add a strip” to any web page based mostly on what content material it can include. 

Simply click on the “+” button on the editor to flick thru some choices.

Consider this as a mini template. Apply the identical ideas you used again in step #3 once you first selected your total web site template. 

That is simply a better approach to design new touchdown pages. Wix already has so many nice choices that it’s not value attempting to construct your pages from scratch. 

Step #8: Concentrate on Usability

Generally in the course of the design course of, you can begin to lose concentrate on how guests will have interaction along with your web site. However consumer expertise (UX) can’t be ignored. 

There are particular design greatest practices individuals anticipate after they go to an internet site. For instance, they anticipate the navigation menu to be on the prime of the web page. They anticipate the footer to include contact info. They anticipate the brand to take them again to the house web page.

Let’s take a look at one thing easy, like a navigation menu:

On this instance, there are solely 4 pages within the menu. You may perhaps get away with including one or two extra. However past that, it’s an excessive amount of.

Think about if this web site had 10 or 20 pages within the menu. It might be a catastrophe. The highest of the web page can be too cluttered, and guests would by no means discover what they’re on the lookout for. General, that may be a poor design selection. 

Take into consideration usability with each design selection you make, from CTA placement to scroll results, white house, structure, and every part in between. 

Don’t attempt to reinvent the wheel right here. Observe internet design greatest practices, and the UX will probably be high-quality.  

Step #9: Optimize the Design For Cell Gadgets

According to Statista, roughly half of all world internet visitors comes from cell units. So there’s a coin-flip probability that every customer in your web site will probably be looking from a smartphone or pill. 

It is advisable to be sure that your web site design is mobile-friendly. In any other case, guests will bounce, and also you’ll by no means get cell conversions. 

Fortuitously, Wix makes this course of straightforward for you. 

From the editor or previewer web page, merely click on the cell icon to change away from the desktop view of your web site. 

Wix will mechanically optimize your web site for cell. But it surely’s nonetheless a good suggestion to verify every part out for your self to see if you wish to make any modifications. Should you see one thing you’d like to alter, you possibly can edit your web site’s cell design with out altering the desktop model. 

Step #10: Publish Your Web site

When you’ve finalized the design, it’s time to get your web site stay on the net. 

It’s value noting that your web site doesn’t must be 100% completed to publish it. You’ll be able to at all times return and add pages at a later time. However after you have a homepage, about web page, contact web page, and a handful of web site parts, get it printed so you can begin producing some visitors. Simply make certain you don’t publish any incomplete pages. 

Click on the blue “Publish” button on the prime proper of your Wix dashboard to proceed.

As I mentioned earlier than, you possibly can design and publish a web site with Wix 100% free of charge. However there’s a catch.

Free Wix customers gained’t get to customise their area. All domains embrace your Wix account title, adopted by Wix’s branding, after which your web site’s title. As you possibly can see from the instance above, the area right here can be:

This isn’t a viable choice for any business-related web site. It’s okay in the event you’re simply utilizing the location to mess around with internet design ideas. However if you’d like a reputable web site with actual guests, you’ll have to improve to a premium Wix plan. 

Now you’ll have the ability to use a customized area title, both bought straight by way of Wix or from a third-party area registrar. Should you don’t have already got a website, simply get it from Wix. It’s simpler to handle every part by way of a single platform.


Web site design has actually advanced through the years. What was as soon as a significant problem or costly enterprise for brand spanking new web site homeowners can now be achieved with ease.

Web site builders like Wix primarily get rid of the necessity to design web sites from scratch.

Non-technical customers and folks with zero design expertise can select a template and populate their web site with customized content material. There’s no have to study any internet programming languages or rent a designer. 

Sign up for Wix, observe the step-by-step course of listed above, and also you’ll have a professionally designed web site in a matter of minutes. It’s that easy!

Consulting with Neil Patel

See How My Company Can Drive Large Quantities of Visitors to Your Web site

  • web optimization – unlock huge quantities of web optimization visitors. See actual outcomes.
  • Content material Advertising and marketing – our group creates epic content material that may get shared, get hyperlinks, and entice visitors.
  • Paid Media – efficient paid methods with clear ROI.

Book a Call

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *