How to do web design without coding

by
Monica Galvan
How to Do Web Design Without Coding
It’s the ultimate question. Can you become a web designer without learning how to code? The short answer is yes. In this article, we’ll dive into the best ways to approach how you can do web design without coding.

While learning the basics of code, like how HTML and CSS work, will help you understand how to design for the web, it’s no longer required knowledge if you want to be a web designer. We’ll cover 4 solutions for how you can create your own websites without code. Some options are better than others, we’ll share the pros and cons of each. We’ll also offer recommendations and next steps if you want to pursue a career in web design.

First, you need a domain

No matter how you end up creating a website, you’ll need a domain. Your domain is the URL you type into a browser to visit a website. Some of the methods mentioned in this article will offer you a free domain when you signup with their service but it’s usually better to purchase your domain separately. That way if you ever decide to change how you host your site, it’s not difficult to transfer your domain and point it to the new service. Some examples of popular domain name registrars include GoDaddy, Namecheap, and Google.

1. Hire a developer

Depending on the extent of your website project, the quickest way to design a website without having to code is to outsource it. By partnering with a web developer, you can focus solely on the strategy, planning, wireframe layout solutions, visual design elements, and mocking up the final UI for the website. Then all you’ll need to do is have a proper hand off and a good working relationship with the developer to bring the website to life on the web. 

If you decide to go this route, you may want to look for a developer you can work with on an ongoing basis. The better relationship you have with a developer, the smoother the whole process will be. If you work with a new developer each time you design a website for a new client, you’ll likely spend a lot of time communicating on processes to get each other up to speed. Whereas if you’ve already worked on projects together, you’ll finish websites faster. The more websites you can work on, the more freelance projects and money you’ll earn.

Pros of hiring a developer

It’s a done for you solution. You can focus solely on design because you have a partner who focuses on development.

Cons of hiring a developer

Developers are expensive. If you’re working on a large website project, maybe a complete redesign for a big company then it may make sense to hire a developer. But if you’re just getting started with freelance design, then you may not yet be charging enough to hire a developer.

If you eventually want to expand and build a full team rather than be a solo freelancer, then it’s helpful to start hiring developers. You always want to have other designers and developers on hand to contact in case you need extra help on your client projects. 

2. Use WordPress and modify a theme

Another way you can create your own websites is to choose a hosting platform, purchase a template, and use WordPress as the CMS (content management system) to add and edit content.

WordPress has been around since 2003 and powers over 35% of all websites on the Internet. It’s one of the most well-known content management systems available on the web today. The WordPress platform itself is free to use, just sign up for an account and you can start using it today. However, you need to purchase hosting and a domain in order to turn in into a working website.

Here’s an example of what the WordPress CMS dashboard looks like when you’re logged in. From the backend, you can create new webpages, new blog posts, add photos and media, and more. 

Example of WordPress CMS dashboard (source: Hostinger)
Example of WordPress CMS dashboard (source: Hostinger)

WordPress offers some free templates but there are plenty available on third-party marketplaces to buy. You never want to use a template right out of the box, unless you don’t mind your website looking like everyone else’s. Instead, you’ll want to modify the design to match your client’s company branding and messaging. 

Elegant Themes is an example of a company that sells WordPress themes. Divi is their flagship theme and visual page builder. It’s a website building framework that makes it easy to create a website without touching a single line of code or installing several plugins. 

Pros of using a WordPress theme

Aside from hosting, it’s a low-cost solution to creating a website fast. Hosting is pretty cheap these days so if cost is your main concern, then you may want to take the time to really master the WordPress platform. 

The CMS is easy to use if you want to add or update information quickly. This makes for a smooth transition for clients if they want to keep website maintenance in-house. 

Cons of using a WordPress theme

Using WordPress was once considered taboo due to the fact that it’s opensource, websites were prone to hacking and easily broke when a new version of WordPress came out. In recent years, this is less of a concern but remember if something happens to your site, you’ll need to become your own IT department or hire a WordPress developer to help.

A major con to using WordPress and modifying a theme is it tends to create bloated code on the backend which could make your website run slower, create errors, or crash completely. 

WordPress started as a blogging platform. But more often than not, you may want to design eCommerce sites for clients. While there are plugins like WooCommerce that allow you turn a WordPress website into an eCommerce platform, it can be tricky to customize and use, especially without a developer.

Probably the most important con of WordPress is the lack of flexibility when it comes to design. If you truly want to design a custom website, you just can’t do that on WordPress without learning how to code. You can modify a theme all you want, but there are still limitations.

3. Use a WYSIWYG editor

WYSIWYG stands for “what you see is what you get”. With a WYSIWYG editor, you can edit the content of your website and see how it appears in real-time. Also known as website builders, they are a user-friendly way for anyone to get started with building a website on their own, with no prior knowledge necessary. WYSIWYGs have surged in popularity over the years as companies like Squarespace and Wix have dominated the field.

Squarespace is known for its minimal design themes and 24/7 customer service. The main difference between using a WordPress theme vs a Squarespace theme is you have a whole customer service team available to answer any questions you have as you set up your website. They also have an engineer and design team dedicated to creating new themes and improving current ones so you know they will work responsively on any device no matter what. 

Example of Squarespace editor
Example of Squarespace editor

Wix is another competitor that offers pretty much the same features as Squarespace. You can create a blog, an online store, optimize for SEO, and more within their editing platform.

Example of Wix visual editor
Example of Wix visual editor


Pros of using a WYSIWYG editor

These are best for non-technical people. It might take a while to learn how to use the editor but for the most part, anyone can figure out how to use them and create a simple website in a couple of hours.

These editors make it easy for anyone to make a simple copy or image update. You could even update the typography or color scheme quickly within the design editor, all changes will update globally across the site. 

Cons of using a WYSIWYG editor

They can be expensive. Squarespace starts at $16 per month for a basic personal website but if you want to add eCommerce capabilities the price quickly goes up to $26, $30, $46, and so forth depending on which features you need. Since you are paying for a service, it can add up so make sure it’s worth what you’re paying for. 

Same with WordPress, another major con of WYSIWYG editors is the lack of design customization. Yes, you can update type, color, and layout with various themes but you have to get crafty and hack things together if you want to create a more customized experience.

4. Try Webflow

Our best solution for how to design websites without coding is Webflow. The Webflow editor empowers designers to build professional, custom websites in a completely visual way. Essentially, you get the best of both worlds. You get the advantages of using a WYSIWG editor with the added flexibility of creating a completely custom website from the ground up.

Check out this video for an explanation from Ran on why Webflow is a better solution compared to WordPress.

Pros of Webflow

You can create a fully custom design without code. The limitations of most of the tools and software mentioned above in this article are the lack of design customization. Templates are a great starting point but if you want to charge more for your web design services, you’ll need to design a truly unique website experience for your clients. Webflow gives you the tools you need to build a custom site, exactly how you designed it.

Webflow creates clean code for your websites. No bloated code like WordPress or Squarespace. Why is clean code important? It helps your site load faster. You have the power of HTML, CSS, and JavaScript at your fingertips in a visual canvas, without actually having to know how to code. 

Example of the Webflow editor (source: Webflow)
Example of the Webflow editor (source: Webflow)

You can build website interactions and animations visually within the Webflow tool. For example, take a look at our website with interactions built completely on Webflow. Adding small interactive touches like this to your websites will keep you ahead of the curb on design trends. 

Webflow also has a CMS. Create the content structures you need, add content (by hand, from a CSV, or via their API), then design it visually. It’s a content management system that works for editors, designers, and developers.

Webflow also offers eCommerce features. Create an end-to-end customer experience from customizing your cart and checkout experience, transactional emails, and custom interaction and animations all along the way.

Another feature Webflow offers is its own hosting. Enjoy the fastest, most scalable hosting technology for your website without all the hassles of domain setup, FTP, and cPanel. IDEO, Gusto, Khan Academy, Dropbox, Zendesk, and Lattice (to name a few) are all companies that use Webflow’s hosting.

Webflow offers a “free until you’re ready to launch” plan. You can get started with using Webflow to build your first site today at no cost. When you’re ready to add more pages or connect a domain, then you can update to a paid plan.

Cons of Webflow

The only con to using Webflow is there can be a learning curve when you first start using the tool. But if you’re interested in learning how to master using Webflow to design and build your own websites, we have a solution. Check out The Webflow Masterclass. You can also search on Webflow University for articles and videos on how to use the platform.

Get started with designing websites without code

We’ve discussed the best ways to do web design without learning how to code. But what’s next if you want to become a successful freelance web designer? Here are our suggestions for next steps.

Learn Webflow on your own time

Sign up for Webflow for free, play around with the platform on your own, and build your first website. With time and consistent practice, you’ll be a pro in no time.

Check out the Flux YouTube channel 

We have hundreds of design tutorial videos and we publish fresh new videos weekly. We have a playlist just on Webflow Tutorials alone. 

Want to save time and become a pro faster? 

Consider joining our Freelance Web Designer Bundle. In course 1, you’ll learn everything you need to know on how to design a website from creative strategy, layouts and wireframes, visuals and interactions, and more. In course 2, you’ll learn how to build a website with Webflow. We’ll show you exactly how to use the tool, even if you’ve never used it before. The bundle course option is perfect if you want to learn how to design and develop websites. By adding development to your design services, you can charge more because you’re offering more value to your clients by being an all in one solution for web design.

FREE WEBDESIGN COURSE IN YOUR INBOX

Start growing your business today with Ran’s High-Value Web Designer Secrets email course that teaches you the three most significant things he’s learned as a freelancer.

Design Files Sale: 29% OFF

00
days
00
hours
00
minutes
00
seconds

Opening Enrollments on

August 24, 2021