When it comes to selecting a WordPress theme for your site, it can be tempting to go for the cheaper alternative – a free WordPress theme. If you’re seriously considering using a free theme, you should at least be aware of the disadvantages that come with it in the long run.

Here are some potential problems you could face with a free WordPress theme:

  • Poor customisability
  • Bad documentation
  • Poorly coded
  • No support
  • You could spend a couple of hours customising simple features such as shifting the sidebar from the right side of the page to the left, which could be achieved in less than a minute with a premium theme.

Whether you’re going with a free or premium theme, here’s a list of things you should look out for:

Features Availability and Customisability

On WordPress, some sections of your site (such as your header, navigation bar, sidebar locations, footer, colour scheme) are not easily editable without some coding involved. A robust premium theme can help you to achieve these objectives within a few clicks of a button.

If you’re looking to create CSS3 animations, HTML5 sliders, and Parallax effects without writing code, there are many premium themes with these features already built in with the theme’s framework. Alternatively, there are third party plugins such as Visual Composer that can help you achieve similar effects.

Well Documented

To save yourself from the headache of figuring everything out from scratch, choose a theme that includes comprehensive documentation. Even furniture from Ikea comes with a manual complete with detailed assembly instructions. Which brings us to the next point.

Good Support

Should you still run into any difficulties in setting up your theme, it would be more cost efficient (since time is money) to contact the theme support to solve any theme-related issues. Sometimes it could a bug in the theme that hasn’t been fixed until the next theme update release.

Comes with Demo Content/One-Click Setup

If you’ve ever bought a nice looking theme and installed it, only to find it looked nothing like the demo template, you’re not alone. Without a one-click setup with all the demo content installed and set up, you may have to spend gruelling hours figuring out how to make your new site look exactly like the demo site.

Regular Theme Updates

In order to ensure your site won’t break when you update WordPress, choose a theme that’s consistently updated and compatible with the latest version of WordPress. Outdated themes also risk security vulnerabilities.

Responsive Design

Responsive design is a more cost effective way to achieve a mobile-friendly website. To test whether your site is mobile-friendly, enter your URL into Google’s Mobile Friendly Testing tool.

Due to the surge of mobile users and after Google’s official announcement in 2015 that the number of mobile searches now overtake desktop, making your site responsive is no longer just a trend to adapt to, it’s become a necessity.

Compatible with Mainstream Browsers and Recent Older Browser Versions

Be sure to test the demo theme on mainstream browsers such as Google Chrome, Firefox, Safari, Internet Explorer, and Opera. Also check whether the theme is compatible with recent older browser versions.

Good Reviews

Looking through past user reviews can influence your buying decision and save you time and money. For example, users may comment on a theme that is very buggy (e.g. loads slow due to unoptimised code) and incompatible with a range of third party plugins.

Cost Effectiveness

Be sure to check whether the theme developer provides lifetime theme updates or lifetime support. Most premium themes will offer you lifetime theme updates and limited time support.

Theme Appearance Suitable For Your Industry

When a user lands on your homepage, the first impression has to be really impactful or else you’ll have already lost half the battle.

A corporate theme may not be suitable for you if you’re looking to sell things online and a magazine theme most probably wouldn’t cut it for a real estate niche.

Choosing a WordPress theme isn’t the hardest part; it’s getting it all set up and running smoothly. If you wish to learn how to create a WordPress website from scratch, attend our 2-day hands-on WordPress course.

Dylan Sun is the Founder of Equinet Academy, a Digital Marketing training organisation. Passionate in all aspects of Digital Marketing and Web Design, he extends his passion to helping people implement effective digital strategies to their businesses. Follow his blog at Equinet Academy to learn more about Digital Marketing and Design.

About a week ago, a friend of mine challenged me to create a 10-page training room rental catalogue website from scratch in a day. So why did I value it at SGD$1,500? I took the rate Singaporean web design companies charge – approximately $150 per page for a standard 10-page corporate website and did the math.

Here’s a preview of the home page of the website:

Training room rental web design preview

Based on my experience and having created dozens of websites over the years, some of which never took off, and some of which became really successful, this was extremely possible. But not without proper planning and execution.

In this article, I will reveal the step-by-step process from conducting keyword research, setting up a domain name and hosting account, designing site architecture, developing content, to launching a chic-looking catalogue website in just one day – If you’re new to all of this though, I’m sorry to break it to you but you probably won’t be able to finish a fully furnished catalogue website in a day. But who knows, you might just prove me wrong!

Website Creation Process:

1. Keyword research
2. Domain name, hosting account, content management system (CMS) installation
3. Designing site architecture and wire framing
4. Content development
5. Final checks, revisions

Keyword Research For Web Design Architecture

Why should keyword research be the first step? First and foremost, understanding what keyword search terms are being entered into search engines by your target market will give you both a marketer and user perspective when creating your website. It is also the foundation to creating both a well laid out site navigation and search engine optimized content.

The initial keyword research process (using the Google Keyword Planner Tool) usually doesn’t take up more than 2 hours for a 10-page website.

Google Planner Keyword Research for training course room rental

Here’s a sample list of keywords I gathered for my training room rental site:

  • Training room rental singapore
  • Seminar room rental
  • Classroom rental
  • Meeting rooms for rent

You typically want to gather keywords that have moderate to high monthly search volume. Through my experience advertising on Google AdWords, I’ve seen conversions from keywords that have as low as 40 monthly searches. Those keywords are usually long-tail though (2 or more words).

Once you’ve gathered a list of keyword variations and synonyms you think you can potentially rank for, it’s time to think of a catchy, brand-able domain name.

Domain Name, Hosting Account, CMS Installation

After roughly just 10 minutes of brain storming I decided on… Alstar Rental! Brainstorming a pleasant-sounding brand name could take me weeks at a time but I got rather lucky this time round.

Okay so the first thing I did was a trademark check at the USPTO site and Googled [“alstar” rental] to find any similar sites on the web so I could avoid proceeding with my chosen name if it could potentially cause any trademark disputes.

Next was a domain name registration at Namecheap and linking up with my existing hosting account with Siteground or Vodien.

Basically, just follow these 4 steps:

Step 1: Get your domain name from Namecheap.com
Step 2: Get your hosting account from Siteground or Vodien
Step 3: Set up your domain name servers (Contact your domain name provider for details on setting up your domain name servers)
Step 4: Install a Content Management System (CMS) through your hosting account.

Following this, it will take a couple of hours for the name servers to propagate before we can install the CMS (I recommend WordPress as it’s user-friendly and search engine optimized). While waiting for the propagation, let’s go over to the next step.

Designing Website Architecture and Wire Framing

It’s important to have some sort of rough idea what your site navigation structure will look like. A good rule of thumb is to adopt a flat site architecture – less than 3 clicks to any page from the home page. This will benefit your site in terms of SEO and user-friendliness.

Flat site architecture portraying good web design practice

Use a free tool like Gliffy to draft a site information architectural diagram like the example below. This will give you a clearer idea of your site’s design and also serves as a good point of reference.

alstar_rental_site_diagram

With Gliffy, you can also create a wire frame for each of your key landing pages. You can then refer to them while you’re building your web pages. See a rough sample below:

alstar_rental_wire_frame

By now, your name servers should have propagated and you may proceed to install WordPress/Drupal/Magento or any of your preferred open source CMSes. I personally recommend WordPress for its search engine friendliness, user-friendly interface, and wide support due to its huge user community base.

Once you’ve installed your CMS, the first thing you want to do is install a chic-looking theme/template. You can find great themes for various CMSes at Themeforest.net. Once that’s done, you may proceed to the content development phase.

Web Content Development

The content development phase makes up a large portion of the website creation process. In order to create great engaging content that converts visitors into leads/customers, you’ll need the following:

  1. Quality copywriting, articles
  2. Quality stock photos, product photos, logo
  3. Multimedia (Slideshow, photo gallery, video, etc)
  4. Conversion-optimized web forms

I personally take approximately an hour or less to finish writing 250 words or less, depending on the complexity of the subject topic. For the Alstar Rental project, there were only 5 pages that needed a little copywriting, so it didn’t take me more than 2 hours to finish the copywriting.

If writing’s your kryptonite, I recommend these three sites for outsourcing native english writers. ZerysUpwork, and Fiverr. Be careful with Fiverr though, you get really cheap articles but most of them lack quality and depth. Also, remember to include the keywords you gathered from your keyword research into your content for SEO purposes.

I recommend these few sites to get high quality royalty free stock photos. iStockPhoto, 123rf, Shutterstock (paid sites). Freeimages.com and Morguefile.com for free stock photos, expect lesser quality from the free sites however.

Multimedia web elements such as HTML5 slideshows, photo galleries, light boxes and more can be purchased as plugins/extensions from sites like CodeCanyon.net. I recommend purchasing the premium plugins as they come with better support, documentation, and step by step tutorials.

A basic contact form, application, lead signup form can be easily constructed in 15 minutes or less via a plugin/extension like Gravity Forms or Formidable Pro.

Given my experience and familiarity with the WordPress interface, I took an average of 45 minutes to design and complete each webpage. With a total of 10 pages, I took approximately 7.5 hours to finish constructing the pages.

Here’s a sample of a standard webpage from Alstar Rental:

Sample standard webpage design

Final Checks, Revisions

Once you’ve completed the site, you want to perform some final checks before launching it to the public. Some checks you may want to run:

  • Grammatical errors
  • Broken links (www.brokenlinkcheck.com)
  • Navigational flow (are there any blockages in the conversion funnel? e.g. no call-to-action on a key landing page, missing links to important pages of the site that could result in a high exit rate)

Fix any of this errors if you find any, read through your articles thoroughly to check for any inconsistencies in your message, make sure that visitors find a good reason to remain on your site upon landing on each page throughout the visit session and you should be good to go.

Wrapping Up

Overall the project took 10 hours of working time – I started at 9am and ended at around 9pm (12 hours) including lunch, dinner, and short breaks in between.

It was a challenging project but worth the time and effort. Oh, and did I mention, I won the bet and my friend had to treat me to my favorite Song Fa Bak Kut Teh at Clarke Quay!

*Update*

Alstar Rental has been relaunched as VenueSquare.com and is renting out actual training rooms, seminar rooms, and meeting rooms now.

If you’d like to learn how to create a professional-looking website that engages and converts your visitors into customers, I suggest checking out our WordPress Website Creation Course.

If you already have a website and want to learn how to be more visible on the search engines, you may want to check out our Search Engine Optimization Training Course in Singapore.

Dylan Sun is the Founder of Equinet Academy, a Digital Marketing training organisation. Passionate in all aspects of Digital Marketing and Web Design, he extends his passion to helping people implement effective digital strategies to their businesses. Follow his blog at Equinet Academy to learn more about Digital Marketing and Design.

So you’ve made the decision to build yourself a shiny new website, but you don’t know how. You look around for a few tools to help you on your way to web development prowess, and you hear about two very popular solutions to help you build your shiny new site – WordPress and Dreamweaver.

Now you’re in a dilemma. “If both are so good, which one should I choose?”

In reality, both are excellent ways to build a website, but which one is right for you depends on several key factors about your goals.

To make the comparison easier, here’s a summary table of the key differences between the two.

Dreamweaver-vs-wordpress

Criteria

WordPress

Dreamweaver

Verdict

Development ProcessFind a theme you like, install it, and most graphical choices are made for you.

Build a great looking site very quickly, but while it comes with a lot of customisation options, you still don’t have full control of the look without coding knowledge.

Functionality usually reserved for more advanced developers such as scroll effects come default in many themes, and if not can be added via plugins without the user needing to dabble in code.
Templates can be used to speed up development, but you have full control of every area of design.

Utilising more advanced functions often requires more in-depth understanding of code to implement.
If quick and simple yet gorgeous is what you’re looking for, WordPress is the way to go. Even HTML isn’t strictly necessary.

If you have a very strict set of requirements and have the technical expertise to execute it, Dreamweaver may be more suitable. HTML and CSS are absolutely necessary.
CustomisabilityLiterally thousands of themes to choose from that come in all shapes and sizes. Very likely to be able to find a theme that suits your needs.

Themes come with many default settings that very quickly make your site look modern even with little input, but making massive overhauls to the entire design can get messy.
Dreamweaver is designed for your website to be customised from the ground up. If you have the specifications of your website envisioned very clearly, Dreamweaver is among the best tools for the job.

If you’re new to web design, it can be very daunting for you to figure out how to create an excellent website design.
WordPress themes come with many default settings that look great without much input, but the level at which you can customise it depends on the theme you choose.

Dreamweaver was built to allow you to completely customise every aspect of your website’s appearance
Speed of DevelopmentWith literally thousands of ready-made themes, installation of a new WordPress site is a snap and almost any kind of additional feature may be added via plugins.

Many style settings are automatically applied across your entire site so your website will always look uniform. Meanwhile, you can still make changes to the layout.
Dreamweaver designs can be quickly deployed with templates, but additional features like animated sliders may need a bit of code to work the way you want.

Styles can be quickly applied to pages by creating and editing templates. However, this can be complicated and yield inconsistent results if you do not plan your website ahead of time.
Once you’ve learned the ropes, both WordPress and Dreamweaver can develop sites quickly.
Managing the WebsiteAdding new pages or blog posts can be as simple as clicking an add button, typing in your content and clicking publish.

As a CMS, contains dedicated menu where you can easily access all the pages on your website.
To add a new page, you need to open a new page using your saved template, type in your content, and then save and sync it to your server.

Site structure depends on how you organise the file on your local drive.
As a CMS, WordPress is highly effective if you’re intending to add a lot of pages. With a dedicated menu where you can view all your pages and many settings automatically applied across your site, it’s easy to give your site a uniform look.

On the other hand if your website will consist of only a few pages and you know exactly how you want your website to look, then Dreamweaver may be more suitable.
OverallFriendly enough for beginners, while functional enough even for demanding users.

Excellent for SEO because many settings are automatically optimised to be SEO-friendly.

Excellent for users who want a quick solution that looks great, without having to pay attention to so many technical details.

Great customisability, but out of luck if you can’t find a theme that matches the design you envision.
Steeper learning curve that takes time to get used to, but once proficient can create websites quickly.

Dreamweaver can create a site of any kind, exactly as you dream it.

Many advanced functions cannot be added without understanding code.

If you’re frequently adding new pages, can start to get messy and difficult to manage, especially without sufficient planning at the start of the project.
For the vast majority of users, WordPress is the easier, more functional option. From sliders to blogging to forums and even to membership sites, WordPress allows you to do almost anything Dreamweaver would allow you to do, in a fraction of the time, often by simply installing a plugin.

Again however, if you find that having the flexibility to customise your website’s design exactly as you envision it is worth the additional time and you have the necessary coding knowledge, then Dreamweaver may be the way to go.

The WordPress Approach

So what is this “WordPress” you keep hearing so much about? No, it’s not a lousy pun about pressing lots of words together. Before we get into the meat of this article, it’s important to differentiate between WordPress.org and WordPress.com. We will be referring to WordPress.org in this article.

What is WordPress?

WordPress is what is known as a Content Management System (CMS). The goal of a CMS is exactly as its name suggests – a system to manage content. But that sounds cryptic. In plain English, WordPress was designed to allow you to quickly add any number of webpages or blog posts without constantly having to worry about how it’s going to look.

Many have heard that WordPress was designed with blogging in mind. Yes it’s true – but fret not. By now WordPress has evolved to the point where most WordPress sites don’t even look like blogs. Even big brands like Sony, General Motors, UPS use WordPress. In fact WordPress’ blogging roots mean that adding content is snappy and hassle-free.

How Easy is it to Build a Website with WordPress?

So what’s it like building a website with WordPress? It’s actually quite like buying a house – you go house hunting, you find a house you like, you buy it, and then you do renovations to put in the final touches and you have a new house people can visit.

When developing a website with WordPress, you start by selecting your theme – this will set the tone for how your website layout is structured. Worried you can’t find a theme to suit your needs? Just as there are countless number of homes you can look at before deciding on your home, so too there are at least thousands of themes you can choose from.

Once you’ve selected your theme, many settings are automatically applied to new and current pages to make it a mostly pain-free experience. What does this mean for you? Well once you’re done with setting up the layout for blog posts, whenever you have a new article idea you want to share with your readers, adding a blog post is as simple as clicking “Add New Post”, typing out your article, and then clicking “Publish”.

While it is possible to create a website using WordPress without any prior knowledge of code, basic HTML and CSS knowledge comes highly recommended. Here’s an example scenario where basic CSS knowledge comes in handy.


Numbers-1-iconElement 1

 

Numbers-1-iconElement 1


If you want to increase the margin between Element 1 (Text) and Element 2 (Image), you need to know CSS.

You may be thinking, “But if I don’t know any code, how am I going to use all these cool features like slider animations, contact forms, and the like?” Simply add a plugin.

In fact, the official WordPress plugin directory has practically a plugin for every need. Ever heard of the term “a pill for every ill?” The WordPress plugin system is exactly that.

Need to backup your entire WordPress site? Install and activate the Duplicator plugin. Want a tool to filter out spam comments? Activate the Akismet plugin or Math Comment Spam plugin. Want to add a forum to your WordPress site? Install and activate bbPress. Want to start selling stuff on your site? Install and activate the WooCommerce plugin. Want to do anything else? Just ask Google and hunt for a new plugin.

The Dreamweaver Approach

“When I used Dreamweaver to build my website, it felt as though I was weaving a dream…” said no one ever. Still, that was the concept behind Dreamweaver – to bestow upon you full flexibility to weave your website into existence. Building a website with Dreamweaver is similar to designing your entire house from the ground up – complete freedom, but with a few caveats.

Firstly, you have to have a good idea of how your house is going to look. If you don’t, then by the time your house is built, you’ll realise you have a layout that makes absolutely no sense. Secondly, creating a thoughtful layout takes time, and if you’re already time starved as it is, you may not be able to complete your new house on schedule. Similarly when using Dreamweaver to build your website, it’s necessary to have a plan for your website design or your project will end in a mess before you know it.

What is Dreamweaver?

Dreamweaver is a What You See Is What You Get (WYSIWYG) editor, meaning you drag menus, frames and icons into position in a visual window to bring your website to life, and Dreamweaver writes the code for you. All that code is saved into local files on your computer, and will have to be uploaded to your web server before it will go live.

Is Building a Website with Dreamweaver Tough?

Fortunately, Dreamweaver comes with built-in functionality to handle all the uploading to your server – just key in your FTP information into Dreamweaver. If you’re uploading just one page to the server, select upload, and if you want all changes to be uploaded into your server, select sync.

As with most WYSIWYG editors, it’s likely it won’t work exactly as you want though, so it’s crucial for you to at least have HTML and CSS knowledge in order to touch up styling issues and to organise your web pages. Beyond that, knowledge in JavaScript, PHP and MySQL may also be necessary if you’re adding features like contact forms, registration pages or forums.

If you’ve no prior experience with HTML and CSS, it may seem daunting to have to learn two languages before you can start creating a site with Dreamweaver, but those two languages are relatively simple. If you’re looking for a free resource to learn these languages, w3schools has some excellent tutorials that will quickly get you proficient in these languages.

Templates can be used to quickly flesh out your website, which you can download or create on your own. If you’re experienced with web designs and you’re confident about your ability to create a fresh, compelling web design from the ground up, Dreamweaver is among the best tools for the job.

WordPress vs Dreamweaver – The Showdown Begins!

So now that we have a rough idea of what each solution does, it’s time for a direct comparison.

Development Process

WordPress

WordPress requires absolutely no knowledge of code in order to use. Even basic HTML knowledge is not strictly required, though it is highly recommended. With Dreamweaver however, developing your webpage without knowledge of basic HTML will quickly become a messy affair.

To establish the look and feel of the website, WordPress uses “themes”, while Dreamweaver uses “templates”. A WordPress theme automatically assumes many default options that generally give you a great looking website, but your ability to customise is limited by what the theme allows. With at least several thousand themes available on the market, it’s highly likely you’ll find a design to suit your needs, but there needs to be a certain attitude of “take what you get”.

Dreamweaver

A Dreamweaver site establishes its central design via templates. Load the template, make the necessary customisations for the page, then save and upload it to your server. The Dreamweaver solution allows you to fully customise each page to look how you want it to look.

What about adding functionality? For example, both WordPress and Dreamweaver allows you to add slideshows or sliders. The difference lies in how to add the function. With WordPress, you do this via plugins. Simply install a plugin like Revolution Slider or Fusion Slider, select a few images, toggle a few settings in a graphical interface and it’s all set – complete with animations! With the endless array of plugins, adding functionality to WordPress is never a problem.

With Dreamweaver however, most methods require you to understand code. If you’re an experienced web developer and you’re looking for complete customisation in every way imaginable, Dreamweaver may offer you the flexibility you’re looking for. But if you’re looking for a quick and reliable way to create and maintain a great looking website, WordPress is the more balanced option.

Customisability

Both WordPress and Dreamweaver allow almost unlimited customisation options. However, their approaches to achieving this is quite different.

WordPress

Themes and plugins are the essence of every WordPress site. Selecting a theme is going to set the design and tone of your website’s look for the long term, so it’s important to choose wisely.

Once you do that, everything from contact forms to sliders and even forums can be added simply by installing a plugin. With WordPress, you can effortlessly make a modern looking website, but it is inconvenient to make massive changes to a theme you’ve selected.

Similar to house hunting, you find a theme, and then furnish it with content and functions without altering the overall website framework. Your best bet is to find another theme that suits your needs and make minor customisations.

Dreamweaver

Dreamweaver allows you to build your websites from the ground up, so you have complete freedom over the design process – weaving your dream website into existence.

You can download templates to establish your website’s framework, and then make your own customisations from there. With all that freedom however, it’s important to remember that too much freedom can be daunting for newcomers who don’t know where to start.

In order to add a lot of the more advanced functions, you’ll also need to have at least a basic understanding of code. But if you already have or are willing to brush up on your technical expertise, and you have the perfect vision for your own website, Dreamweaver is an excellent tool.

Speed of Development

Both WordPress and Dreamweaver are great solutions, and can be used to create websites quickly once you get the hang of them. Once again, which solution is ideal for your situation is dependent on your goals.

WordPress

WordPress is the more beginner friendly option, yet doesn’t lose out in giving power-users the functionality they need. There are literally thousands of themes ready for you to use.

Installation of WordPress takes just 5 minutes, and every manner of functionality can be added simply by installing plugins. Since themes automatically apply many style settings by default, your site immediately looks great and ensures that your design is uniform no matter how many pages you add.

Dreamweaver

Dreamweaver also allows you to quickly deploy a website by downloading and opening a template. Make the necessary changes, save your new template, and then start adding pages while using your template. However if you’re not very sure about your final design, it might take a lot longer to complete.

Adding functionality to your site is also more cumbersome. Pretty much any sort of interactivity on your site is going to require knowledge of JavaScript or PHP, and in some cases MySQL. This isn’t likely to be too much of a problem once you’re an experienced developer and know exactly what you’re aiming for, but if you’re just starting out it may take a lot longer than it has to.

Managing the Website

Once you’ve established the layout, both solutions can be effective at managing your website content, although as a CMS, WordPress has a strong advantage if you’re going to be frequently publishing new pages.

WordPress

WordPress was first conceived as a blogging platform, and some of those excellent qualities persist till today. If you’re looking for a fuss-free solution to frequently add new content, WordPress is an excellent choice.

WordPress separates your website into webpages and blog posts. Generally, pages are more static and unchanging (about us page, product specifications, etc.), whereas posts are more timely (opinions, status updates, news).

Your website has to have at least one, but doesn’t need to have both (i.e you can have a website without a blog area, or you can have a blog area without a main website area, or you can have both a corporate website area with a blogging section). This versatility makes it suitable for a wide array of businesses.

To add a new post to your blog, simply go to your posts and select “Add New”, then type in your content and click “Publish”. Yes, it really is that simple. Adding a new page is also not much more complicated, with plenty of customisations available to make it any way you like. All pages and posts are automatically organised and can be accessed and edited from their respective menus in the administrative panel.

Dreamweaver

In Dreamweaver, files are most commonly developed on your local computer before being uploaded into your server. For Dreamweaver to know what files to upload into your site, you must define a local site folder for each new website you create, and how the site is structured will be modelled after it.

Once you understand how it works it isn’t difficult to do. In fact power users may appreciate the control they have over the site structure. But it also means that it’s not as hands-free as some may like.

Through the use of templates, web pages are relatively easy to add and manage, but creating a blog is a different matter. In order to add a blog to your website, it’s highly advisable to have knowledge of PHP and MySQL in order to build a CMS to manage blog posts on your website.

Overall

So now that we have a better understanding of how everything works, what can we conclude? For the vast majority of users, WordPress is the more balanced solution. Friendly enough for beginners, yet functional enough even for demanding users. WordPress allows you to do almost anything that Dreamweaver would allow you to do, often in a fraction of the time.

However, if you can’t find a theme that looks exactly the way you want, if you simply don’t want to manage your website with WordPress, or if you want to refine your skills as a web developer, Dreamweaver is one of the best tools you can use. However, you will at minimum require fluency with HTML and CSS, and if you want any moderately more advanced functions on your website you may require JavaScript, PHP and MySQL.

Parallax, responsive, card, and flat design are only a few modern Web Design trends that have taken the web by storm. I have listed 40 in this article, though I’m quite certain there’s more. So if you guys have spotted any modern trends that I’ve missed, just holla in the comments.

I have categorised these trends into six areas and I hope after reading this article, you’ll be able to apply some of these latest trends to your existing sites.

  1. User Interface (UI)
  2. Visual Effects
  3. Colour Schemes
  4. Navigation
  5. Media
  6. Text

***Update***

Our slide just got featured on the home page of SlideShare! You may download the embedded slides below for easier reference.

1. User Interface (UI)

Flat Design

Flat Design Evolution

Flat Design Evolution

In the world of tech, there seems to be a trend where thick bulky gadgets evolve into thin flat devices. I see the same trend happening in Web and Graphic Design. More and more sites are shifting away from box shadows, glossy buttons and adopting flat boxes and flat buttons. Even Microsoft has made this shift in Windows 8.

A visual example of flat design below.

Responsive Design (Mobile First)

Since April 2015, your rankings on Google mobile search results might take a toll if your site isn’t mobile-friendly. You can test the mobile-friendliness of your site by using this free tool by almighty Google.

But let’s ignore rankings for a second here and focus on what matters most – usability and user experience. Users are increasingly viewing web pages on their mobile devices, and it doesn’t get more frustrating than when they have to zoom in to enlarge text and scroll both horizontally and vertically when browsing through a site.

Responsive design solves these problems by making use of media queries, fluid grids, and fluid images. Basically the screen elements resize themselves depending on the screen resolution or browser size like the example below.

Screen Estate Maximisation

Another noticeable trend is wide or stretched layouts. Wide or stretched layouts make better use of screen estate compared to boxed layouts.

Boxed Vs Wide Layout

Wide Vs Boxed Layout by Kriesi Enfold Theme

Expandable/hide-able navigational menus and sidebars, tabs, accordions, and toggles can also maximise screen estate and help make text, images, or any other content look neater and less cluttered on your web pages. However some users may not know they can click on these elements to expand and hide content, so take that into consideration should you decide to use them.

Grid/Tiled Layouts

Grid and tiled layouts can be applied to blogrolls, portfolios, and bulletin board sections.

Cards

Cards have been used as a means to quickly convey and disseminate information for centuries. Playing cards were invented in Imperial China tracing back to as early as the 9th century. Identity cards, credit cards, and membership cards have also become an integral part of our lives.

There are countless reasons why cards will be the future of the web. Even social networking giants Facebook, Twitter, and Pinterest have well adapted card styles to their user interfaces.

Borderless

Borderless text boxes, like the example below, improves the reading flow and gives web pages a clean look. Too many borders and box sections on the other hand can make a web page look cluttered.

Spaceless

Here’s another trend in modern web design I’ve been observing. The complete absence of any padding or margin between web page elements.

Spaceless-Design-By-Expert-Marketing-Guru

Source: expertmarketingguru.com

Storytelling

Just as traditional billboard advertisements have evolved into creative attention-grabbing displays, websites have also evolved quickly over the past decade from merely online brochures to sophisticated storytelling visual experiences.

Split Screen Layouts

Another interesting modern web design trend are vertical split screen layouts, where the screen is split into two halves and displays separate content on both sides.

Source: tympanus.net

Source: tympanus.net

The One-Pager

The One-Pager design displays the entire site in one page instead of splitting content into multiple pages. It usually comes with a fixed navigational menu with its links taking users to different sections of the page instead of loading an entirely new page.

The question I get asked a lot is whether users tend to scroll all the way down to the bottom of a page.

There’s no definite answer to the above question. It really depends on whether users feel whether there is any value in scrolling further, and whether you include obvious visual cues (e.g. a click-to-scroll-down arrow button) to convey to the user that there’s more content below the fold.

2. Visual Effects

Hover Effects

Hover effects can improve user interactivity on desktops. However, hover works well on desktop versions but not on touch devices. Therefore there has to be clear visual cues that touching a web page element such as a button on a touch device will activate an effect or show/hide important details.

GIF Animations

No doubt GIF animations have been around for a very long time. Even in modern web design, a tiny touch of these animations can make your content more engaging. Just don’t go overboard.

Source: www.verzdesign.com

Parallax Design

First what is parallax design? You know those 2D games like Pokemon where the background moves at a slower rate than the character? Apply this concept to Web Design and you get parallax design.

Though parallax design may look cool and give your site the wow-factor, is it good or bad for SEO? Lindsay Kolowich explains this controversy on Hubspot. The conclusion is that the parallax design code itself doesn’t cause any SEO issues, but rather incorrect Web Design practices such as putting a ton of content on a single page.

Animated Sliders

Animated sliders give your site the wow-factor but the downside is that it may slow your site down. To decrease page loading time, save your images for web and optimise them further by removing junk metadata and unnecessary colour profiles with a software like ImageOptim.

Page Preloading Effect

These fancy page preloading effects appear on some sites while the user is waiting for a page to load. It’s a little something to entertain impatient users and reassure users who think their browser may have jammed that the page is still loading.

Here’s a guide on how to create this effect in case you do intend to use it.

Fade-In, Slide-In, & Pop-Up Content With Page Scrolling

What better way to encourage visitors to scroll further down than to use fade-in, slide-in or zoom-out effects on content as they scroll down your page?

I know I tend to want to scroll further down to see what more effects are in store. I can’t really explain the rationale behind this, but it’s like a subconscious thought that I’ve caused these effects as I scroll down my mouse wheel.

3. Colour Schemes

Monochromatic Colours

Monochromatic colours are all the colours (tints, tones, and shades) of a single hue. When you use only monochromatic colours on a web page, it shows you mean business as your written content comes into focus without all the distractions created by multiple hues.

Multivariate Colours

Some sites though, are more suited using 4 – 7 or more different colours. I’m referring to childcare centres, party supplies, and restaurant sites.

Source: www.thebitesizeconcepts.com

Source: www.thebitesizeconcepts.com

Transparent & Translucent Web Page Elements

Transparent buttons and translucent overlays coming together is the new contemporary look for modern websites.

Compact Navigation Menus

Give a user too many choices and he may make none. This may seem a little exaggerated but check out this study by kissmetrics.

Not only does the above theory apply but limiting what you put on your main navigation menu can give the user a faster and clearer overview of what your site is all about.

Mega Menus

If you really have to display a dozen or more links on your navigation menu, one way to reduce clutter and maintain a cleaner look is by creating mega menus. Lynda.com and MarketingProfs does a great job on that.

Hide-able & Expandable Navigation Menus

Talk about decluttering your site and maximising screen estate, hide-able and expandable navigation menus do the job just fine.

Hide-able & Expandable Navigation Menus by Sharkweb

Source: www.sharkweb.com.sg

Right/Left Sidebar Main Navigation Menus

I’ve seen this trend mainly on smaller sites such as personal blogs, photography-themed, and F&B-themed sites.

Sticky/Fixed Navigation Menu

One can argue that a sticky navigation menu can reduce screen estate and shrink the amount of space content can be displayed on screen.

However fixed navigation menus can be rather useful in maintaining visitor duration on-site, especially on long pages where the user doesn’t have to scroll all the way up just to view the navigation menu.

Then again, there are other web design tricks one can use like back-to-top buttons (in my next point) to take one back up to the top menu in an instant.

Scroll-Down & Back-To-Top Arrows

1. Back-to-top arrow button

Back-to-top arrow buttons, usually located on the bottom right of the screen, are a convenient way for users to scroll back up to the top of the page. Just remember to make it a little more visible in case users might miss it.

2. Click-to-Scroll-Down Arrow button

A good time to use click-to-scroll-down arrow buttons is when your the first content section of your landing page takes up the whole screen, before scrolling down the page. We refer to the content section as “above the fold of the page”.

Some users may not know that they can scroll down the page to view more content. So this button comes in handy.

One-Page Scrolling

The one-page scrolling navigation menu comes in handy for sites that include a whole lot of information on one page. The content on the page is split into different sections and clicking on the navigation menu links will take the user directly to the respective content sections.

Infinite/Endless Scrolling

This trend has been around for some time now, especially in the social sphere. Tumblr blogs, Pinterest, Your Facebook and Twitter news feed.

Do you love this feature or sometimes get annoyed? Designshack covers the pros and cons of endless scrolling.

5. Media

Rich Media

While websites have become more modern-looking, online ads have also become more creative and offer more ways to increase interaction between an audience and an ad. The digital advertising term for these creative interactive ads is known as rich media.

There are several types of creative rich media including Expanding, Floating/Interstitial, In-page with floating, Multi-directional Expanding (MDE), Video, VPAID, and more listed and defined here.

A modern-looking website filled with flashy GIF ad banners will kill the whole look, aesthetically speaking, whereas a rich media ad will blend well with a modern website.

360-Degree Virtual Tours

A cool interactive feature to include in real estate, e-commerce, and travel sites.

Source: www.view2offer.com

Source: www.view2offer.com

Video/Motion Backgrounds

No doubt video is becoming a more and more popular as a means of conveying information. See why video is the future of online marketing.

Large High Quality Custom Photography

Stock photography, especially those that are overly-used around the web, can make visitors lose trust in your site.

Including your own high quality custom photography adds a personal touch to your brand and website, increasing trust and possibly conversions.

Source: markvozzo.com

Source: markvozzo.com

Full-Width Imagery

Full-width images can sometimes expand past the site header and become the background of the navigation menu.

Source: tangozap.com

Source: tangozap.com

Box-Less Images

Box-less or border-free images make your page look more simple and uncomplicated.

Flat & Slender Icons

Sometimes instead of using stock or custom photography, we can use icons to give a clean and simple look. Some sites you can download free icons:

Flat-&-Slender-icons-by-ihubmedia

Circled, Hexagon, and Irregular-Shaped Images

Squarish images can cut it, but too much of it can get a little boring. How about spicing your images up with circled, hexagon and other irregular shapes using CSS? See this guide on how to make rounded images with CSS.

6. Text

Varied Typography

Other than for aesthetic design purposes, Mix and Match or Varied Typography is an effective way to prompt readers to pay more attention to specific words in any given paragraph.

Large Typography

Large typography certainly draws the attention of the reader, conveying that the text is important and is worth the time to digest.

Source: deanloh.com

Source: deanloh.com

Thin & Light Fonts

Hairline fonts certainly give a cleaner look and feel.

White Text on Dark Backgrounds

White text on dark backgrounds not only looks more meticulous, but also forces the reader to focus more on the text instead of the background.

Minimal text

Sometimes less is more. Which of these lead capture pages are you more like to give up your email address to?

1. Lead Capture Page One

I’m not too sure about this one.

Landing-Page-1

Landing Page One

2. Lead Capture Page Two

This one maybe?

Want to learn how to create a modern website with WordPress? Attend our hands-on WordPress Website Creation course.

If you’re looking for quality web design services in Singapore, visit Lemonade-IT.

Dylan Sun is the Founder of Equinet Academy, a Digital Marketing training organisation. Passionate in all aspects of Digital Marketing and Web Design, he extends his passion to helping people implement effective digital strategies to their businesses. Follow his blog at Equinet Academy to learn more about Digital Marketing and Design.

There are some stark differences between WordPress.Org and WordPress.Com. In this article, I’ll be explaining the 3 main differences:

  • Costs
  • Customisability
  • Maintenance

WordPress.Org Vs WordPress.Com

Wordpress.org vs. wordpress.com on computer screen

WordPress.Org

WordPress.Com

CostFree to download WordPress software. However domain name and web hosting is not included. You need to purchase your own domain & hosting and install WordPress software on your own.Free to sign up with subdomain and web hosting included. Paid upgrade options available i.e. TLDs (.com & .net.), space upgrades (>3gb), and more.
CustomisationAble to customise core files i.e. PHP, CSS, install third party themes, and plugins to extend functionality of site.Plugins are not available for installation. Unable to customise core files unless you pay for upgrades.
MaintenanceBacking up and updating your site, preventing spam, and enforcing site security is your responsibility. Only forum support available.Security and backups are included. Personal support and forum supports are available.

WordPress.Com

Costs

Let’s look at the costs of using WordPress.Com. It’s free to sign up and you can start customising your site almost immediately. However your domain will look something like this – yourcompanyname.wordpress.com, which isn’t exactly very nice if you’re a big brand. Web hosting is free with limited space (up to 3gb at this time of writing).

There are paid upgrade options which will allow you to get a custom domain i.e. www.yourcompanyname.com and increase your web hosting space.

Customisation

Customisation is very limited. You can only choose a free or premium/paid theme from the WordPress theme directory, unlike WordPress.Org which allows you to upload your own customised theme or a third party theme.

You are also not able to customise the core files such as the header.php, page.php, footer.php, etc and to further limit the customisability of your site, you cannot install any plugins.

Maintenance

Maintenance-wise, WordPress.Com may be more suitable for those who do not have time to manage backups and security updates. Personal support with the WordPress.Com customer service support team is also a feature that WordPress.Org does not have.

WordPress.Org

Costs

Unlike WordPress.Com, the WordPress.Org software is free to download. However in order to go live, you need to purchase your own domain name and web hosting server, then install the WordPress.Org software into your hosting server.

Customisation

Thankfully with WordPress.Org, you are able to customise the core files since you have root access to the WordPress core files. You are also able to purchase and install third party themes from sites like StudioPressElegant Themes, Woothemes, ColorlibSoloStream, and Themeforest which may offer many more features and customisability for your website compared to themes installed through WordPress.Com’s theme directory.

Maintenance

Unlike WordPress.Com, WordPress.Org does not offer personal support, only community support on the WordPress forums. Updating, backing up, and moving your site to another location is your responsibility. However with site backup plugins like Duplicator, the process of backing up and moving your site is much more simplified.

Who Uses WordPress.Com & WordPress.Org?

If you want to launch a personal blog or a simple catalogue website without the hassle of managing your own domain and hosting, or if you wish to try your hands on creating a website without committing to any costs upfront, WordPress.Com is for you.

If you want more control and better customisability over your site, which I think is a good enough reason to skip WordPress.Com, then go with WordPress.Org.

Dylan Sun is the Founder of Equinet Academy, a Digital Marketing training organisation. Passionate in all aspects of Digital Marketing and Web Design, he extends his passion to helping people implement effective digital strategies to their businesses. Follow his blog at Equinet Academy to learn more about Digital Marketing and Design.

Content Management Systems (Open Source CMS)

What is a CMS?

Easier FlexibilityThe main purpose of a Content Management System (CMS) is to display information on a website or blog. The features of a content management system are going to vary pretty widely from one system to the next. Simple systems will only showcase a handful of features (that are normally fairly easy to use) while “enterprise” systems tend to offer more complex and powerful features.

Some web designers and especially website owners who do not have web design experience consider CMS to be the “holy grail” of web design. However, it is important to realize that with anything – there are advantages and disadvantages to using it.

Why Use a CMS to Build Your Website?

One of the biggest advantages to using a CMS instead of the traditional method of self-updating webpages is that updating or adding a page to your website is extremely simple with a CMS. You do not have to worry about breaking the website, messing up the layout of the website or having to add a new link to your navigation on multiple pages.

There is a lot less room for error when an individual decides to use a CMS to manage and maintain their website. A website owner does not have to worry about a simple mistake appearing on their website just because they had to make the same small change on several pages.

CMS is also GREAT if you have multiple individuals updating content on your website. You can use a CMS to control who has access to what different sections of the website as well as who has permission to publish stuff to the website. You can even set a person as an editor and have them moderate content by other people before it gets published to the website.

Easier Flexibility, More Cost-Effective

Overall, it’s a great way to keep a large website organized. You’re not going to have to worry about paying someone to update your website for you even if you’re not great with web design. Individuals who use CMS only have to worry about and deal with the content on the website. Then, they get the pleasure of hiring a web designer JUST to focus on the design of the site.

The biggest downside to using a CMS is that you are going to need to have some computer skills. There may be some training required before you (and your staff) are able to fully use the CMS and all of its features.

All in all, it does not really matter what kind of website you are managing. A CMS can be a great way to organize and maintain all of the content on your website. Regardless of if you have a non-profit organization website, a classified advertisement website or a church website – you can use a CMS to organize the site if you really want to.

At this point if you’re excited to create your very own website, I suggest reading my article on how I created a $5,000 website in a day or checking out our web design training courses.

Available Courses

Internet Marketing Courses in Singapore

View our available internet marketing courses →

Dylan Sun is the Founder of Equinet Academy, a Digital Marketing training organisation. Passionate in all aspects of Digital Marketing and Web Design, he extends his passion to helping people implement effective digital strategies to their businesses. Follow his blog at Equinet Academy to learn more about Digital Marketing and Design.