Web site Design: The Full Information

Disclosure: This content material is reader-supported, which suggests for those who click on on a few of our hyperlinks that we might earn a fee.

Designing a web site from scratch may be difficult. Nevertheless it doesn’t must be.

Years in the past, once I first began creating my web sites, there weren’t a ton of sources. There have been mainly two choices—be taught the fundamentals of web site programming languages or rent a designer. The primary selection is troublesome and time-consuming. The latter is pricey. 

After a short try of making an attempt to design all the pieces alone, I ended up spending high greenback on a designer. It was greater than I needed to spend, however I didn’t actually have a lot selection.

Right now, new web site house owners have extra sources at their disposal. It’s attainable to design an expert web site with out hiring a designer or studying the best way to code. 

Sound too good to be true? It’s not. Whether or not you’re a whole newbie or simply in search of an alternate technique to design web sites, you’ve come to the precise place. I’ll clarify the best way to design a web site under on this step-by-step information. 

My Favourite Instrument For Web site Design

Wix is my favourite device for web site design. It’s basically an alternate methodology to sidestep net design altogether.

As a free web site builder, Wix makes it simple for anybody to construct and design a web site from scratch—no expertise, improvement abilities, or design information 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 to be professionally made. Folks will simply assume you employed a designer—it’s that good. 

One more reason why I like to recommend Wix so extremely is due to its versatility. It could actually accommodate the design wants of nearly each kind of web site underneath 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 educate you the best way to design a web site free of charge utilizing Wix. 

Step #1: Create a Wix Account

The very first thing you could do is join Wix. So head over to Wix.com and create an account. That is 100% free to do, and also you don’t even have to offer your bank card data.

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

Not like different platforms, the Wix sign-up course of may be accomplished in a matter of seconds. There aren’t any advanced kind 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 robotically 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 impression 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 received’t have the identical design as an area restaurant web site.

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

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

When you select a web site kind, Wix presents you with two choices on your design:

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

The primary choice is easy and is great for people who find themselves in a rush. You’ll simply reply a number of easy questions, and Wix will design a web site for you based mostly in your responses. It’s spectacular how shortly the method takes. You’ll have a model new customized web site design in lower than a minute. The design comes out lovely, and apart from customizing the pages with your individual content material, you’re accomplished.

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

Step #3: Choose a Template

Relatively than making an attempt to design a web 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 slender 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. For those who look to the left facet of the display, you possibly can slender your focus additional into sorts of companies. 

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

For instance, if you choose “on-line retailer,” you then’ll see templates for clothes, jewellery, electronics, house decor, magnificence provides, sports activities tools, and extra. For those who’re designing a weblog web site, Wix has templates for private blogs, journey blogs, vogue blogs, podcasts, and so on.

Your template will develop into the muse for the remainder of your web site design. So it’s essential to take your time and never rush by means of this step. You’ll nonetheless be capable of customise totally different design components to your liking, however that’s a lot simpler with the precise template. 

Step #4: Edit Your Structure

Web site guests will kind 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 precise format.

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

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

Or possibly I wish to reposition that “Be taught Extra” call-to-action on the precise half of the display. I can click on on it and drag the button wherever I would like. 

I encourage you to maneuver a number of issues round once you’re first getting began. This can introduce you to the Wix editor, so that you’re comfy down the highway. For those who finally don’t wish to make any format adjustments, 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 fully finalize the design with out understanding precisely what supplies shall be featured on the web site. 

Collect pictures, 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 instance my level.

I’m nonetheless modifying that very same enterprise advisor 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 do this, I’d additionally want to consider the corresponding textual content copy on the display’s backside left facet. 

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

So these are my choices:

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

Each will obtain my aim 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 you probably 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 parts will instantly impression your model picture. 

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

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

On this case, the present coloration scheme works properly for a enterprise advisor. It’s fashionable {and professional}. However let’s say you had been designing a web site for teenagers. You can have a bit extra enjoyable with brilliant colours and large, daring fonts. 

For those who added your organization logos and different supplies again in step #5, you’ll wish to make it possible for 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 property web page, the design selections can have some variations.

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

New pages will basically be a clean canvas, besides on your header and footer. However relatively 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 technique to design new touchdown pages. Wix already has so many nice choices that it’s not price making an attempt to construct your pages from scratch. 

Step #8: Concentrate on Usability

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

There are particular design greatest practices folks anticipate once they go to a web site. For instance, they anticipate the navigation menu to be on the high of the web page. They anticipate the footer to include contact data. 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 can possibly 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 will be a catastrophe. The highest of the web page can be too cluttered, and guests would by no means discover what they’re in search of. Total, 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 all the pieces in between. 

Don’t attempt to reinvent the wheel right here. Comply with net design greatest practices, and the UX shall be superb.  

Step #9: Optimize the Design For Cell Gadgets

In keeping with Statista, roughly half of all world net visitors comes from cell units. So there’s a coin-flip likelihood that every customer in your web site shall be searching from a smartphone or pill. 

You want to make 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. 

Happily, Wix makes this course of simple 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 robotically optimize your web site for cell. Nevertheless it’s nonetheless a good suggestion to test all the pieces out for your self to see if you wish to make any adjustments. For those who see one thing you’d like to vary, 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 reside on the net. 

It’s price 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 components, get it revealed 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 high 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 received’t get to customise their area. All domains embody your Wix account identify, adopted by Wix’s branding, after which your web site’s identify. 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 for those who’re simply utilizing the positioning to mess around with net design ideas. However if you’d like a authentic web site with actual guests, you’ll must improve to a premium Wix plan. 

Now you’ll be capable of use a customized area identify, both bought instantly by means of Wix or from a third-party area registrar. For those who don’t have already got a site, simply get it from Wix. It’s simpler to handle all the pieces by means of a single platform.


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

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

Non-technical customers and other people with zero design expertise can select a template and populate their web site with customized content material. There’s no must be taught any net programming languages or rent a designer. 

Join 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 straightforward!

The submit Web site Design: The Full Information appeared first on Neil Patel.

Leave a Reply

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