Web design hasn’t changed drastically in the past twenty-three years that I remember. You plan a hierarchy of content, write that content, decide on a layout and go about creating your web pages. In theory of course.
When I use the term ‘website’ I simply mean a site that has many pages. The term can be used to refer to database driven applications, but that requires an entirely different skillset, training and tools.
There are many ways you can still create a website without spending money on hiring web design help or signing up for some DIY web design service. Here are a few ways it can be done, absolutely free.
Websites aren’t just visual entities, they’re a mix of visuals and code. Here’s an example, when you see an image on a web page, it’s represented as follows in code:
Though you see the photograph, your web browser renders it as a photograph by looking at that small piece of HTML text above. Once you add a link to your image to make it clickable, HTML changes too:
<a href="mynicepage.html"><img src="/myniceimage.jpg"></a>
Let’s say we thought it would be nice to accompany that image with some text under it. Here’s how you would add a link to your image:
<a href="mynicepage.html"><img src="/myniceimage.jpg"><br>Click here to visit my nice page.</a>
So you get the idea? What you see in this case, the image and small line of text right below it, is not what you see when you design your html page. It’s not WYSIWYG – What You See Is What You Get – it’s pretty much code.
A simple web page if written in code requires you to learn some HTML and there are some wonderful resources online to do just that:
If you’re planning a small project and can manage writing some HTML, creating your website is absolutely fun that way. Try it and you could develop this new skill into a web development career.
HTML web design use case:
All pages running our ordering system at https://secure.spiderz.com/domain-names were hand coded using HTML (and a few other things like Bootstrap, CSS, JS, PHP and MySQL).
WYSIWYG website editors are computer software one can use to quickly create a website. I can’t recall the last time having used one, but when we used to, our favorite application was Adobe Dreamweaver.
For those who would remember, Dreamweaver was published by a company called Macromedia which was later bought by Adobe.
A WYSIWYG editor does one simple thing, it lets you use a mouse and a took-box to create your website visually, thereby taking away the pain of writing HTML by hand. Some editors can help you in even more ways.
There are a dozens WYSIWYG web design tools you can use and this is how, back in the day, in the later months of 1997, I discovered Microsoft Frontpage and used it to create web pages for the first time. I published my first HTML website that year and posted it on Geocities, some 23 years ago!
Here are a few website editors I’ve used in the past (and some I’ve totally discovered for the first time!)
WYSIWYG web design tools I’ve used in the past:
Adobe Dreamweaver – Mac OS X and Windows
Free to try, then pay for a subscription.
Dreamweaver is a lovely tool. It’s over-kill if you’re simply starting out. It has a paid subscription and prices differ from personal to business use to monthly and annual tenures.
It can be great if your school or university can provide you access to Dreamweaver. I wouldn’t recommend it for professional development (though the product is just that, aims at the professional market).
Microsoft Expression Web – Windows-only
Free to use. I couldn’t find a paid version.
I certainly used Microsoft Frontpage (in the late 90s) which was later replaced with Microsoft Expression Web. I’ve used Expression Web for a bit on Windows, but from 2011 I have moved to the Mac platform. I’d still give it a try if I were on Windows – should be a pretty okay tool.
WYSIWYG web design tool that I’m using at present:
Elementor Pro – WordPress-only
Free version is called Elementor. Pro version is a subscription.
We use Elementor to design web pages at Spiderz – in so much as it offers WYSIWYG editing, it also takes care of a whole lot of layout and design challenges that web developers must undertake when creating a website.
Elementor isn’t a stand alone program that runs on your PC or Mac. It’s a plugin designed for WordPress so it installs atop a WordPress install. To run WordPress you require a web host that allows you to install custom-plugins (so WordPress.com is out!).
WYSIWYG web design tool that I discovered today!
Google Web Designer – Mac and Windows
Free to use.
I’ve only run the app this morning, for the first time. If I get around to using it for a project in future, I’ll come back and update this article.
WYSIWYG web design use case:
The Spiderz website is designed using Elementor Pro. We do use a little hand-written CSS to style a few elements here and there, but for the large part, everything’s built using the Elementor page builder.
Web design today seems to be all about WordPress and it powers 34% of the internet. It’s also free to use, forever.
WordPress is classically known as a CMS (Content Management System) but that definition is broken for many reasons. It’s more of a platform, than anything else since we can use WordPress in more ways than we can think of.
You need to get it running and then get about your business of writing, designing and publishing web pages (the same goes for your blog). If you write one as a business, that is.
You can install WordPress using the famous 5-minute install, ask your web host to install it for you or use a 1-Click WordPress installer provided by them to automate the installation process. It’s not really difficult to get done.
Once WordPress is installed and you get to login, you’re faced with the dilemma of how to design your pages. You may know that Themes can do the job and given that there are thousands of free Themes, your task is made simpler if not almost DIY-ready. That is, if you simply want something to get going – a ready-made theme should do it.
Having chosen a theme, your next step is to create your pages, update your website’s menu and you’re done. Done as in, version one website can go online. You can keep building on top of that, as and when you have time.
A word of caution about Themes – try to use one from a reliable source – many a themes are known to be poorly coded and some can be hacked, so your best bet is to use a theme like GeneratePress, that is well-written, insanely popular and free to use.
We use GeneratePress Premium at Spiderz and simply love this theme. It’s superbly-supported and updated all the time.
Now, if you’re anything like a kung-fu web designer, you’re going to want to have a layout that’s unique to you, something that shares your style and represents your skills as a designer – welcome Elementor.
Elementor offers an abstraction layer over your theme (GeneratePress in our case) and lets you design while it writes all the underlying HTML, CSS and JS required to translate your design into code, and it does this in real-time, in your web browser.
Elementor is a free plugin and well maintained. If you’re planning to design a website with all bells and whistles, opt for Elementor Pro – which is what we use at Spiderz.
WordPress web design use case:
This blog is one example. It uses WordPress. Our Spiderz.com website uses WordPress. All client websites we develop, use WordPress.
You can create a website for free even today. There are several ways to do this and I have highlighted a few that we have used in the past. Web pages can be hand-coded using HTML, CSS, JS (PHP too), they can be created using WYSIWYG website editors and they can be created using WordPress.
The only paid component in creating your website is hosting, i.e. the place where you plan to reside your website. That’s the only cost you’ll incur.
The question is, ‘Are you ready to create your first website?’
This article is authored by Yasser Masood, a partner at Spiderz Web International. He fulfills the role of Technical Product Manager and Solutions Consultant at the company. Yasser co-founded Spiderz in 2002, some seventeen years ago. Spiderz is a web services provider in the United Arab Emirates. Write to him at firstname.lastname@example.org – he’ll be happy to hear from you!