Web Design Archives - Design Theory

Cost Comparison: WordPress vs. Squarespace

All Posts, Web Design, Web Development, WordPress

Most new business professionals and entrepreneurs are bootstrapping when they’re starting their new venture. Hiring a staff or agency isn’t always financially possible, and so they’ll try and learn and do as much as they can to get their business to a viable start with a limited budget. When it comes to the cost of building and maintaining a website, business professionals need to consider more than just the initial price of investment, they’ll also need to consider the quality (and functional features) and the amount of time it will take to launch. While WordPress and Squarespace have different pricing structures, there are hidden costs associated with both platforms, from time investment to ongoing maintenance.

Let’s break down the costs involved in building and running a website on each platform, so you can make an informed decision about where to invest your time and money.

WordPress: A Customizable, Pay-As-You-Go Approach

With WordPress, the cost can range widely depending on your needs and how much customization you require.

Cost Breakdown for WordPress:

1.Domain Name:

Typically you can purchase your domain for an annual cost of $10 to $20 per year. You can purchase your domain from a variety of providers, such as GoDaddy or IONOS (Formally 1and1).

2.Hosting:

WordPress doesn’t include hosting, so you’ll need to factor that in. Shared hosting plans start at around $3 to $10 per month, but if you need better performance, expect to pay for managed WordPress hosting, which can range from $20 to $100+ per month for higher traffic or resource-heavy websites. We recommend SiteGround for their great customer support, server performance, and pricing tiers.

3.Themes and Plugins:

While there are free themes and plugins available, many businesses go for premium options to achieve a more professional look and enhanced functionality. Premium themes range from $30 to $100 that may be one time or have an annual license that includes regular updates. Plugins can cost anywhere from $5 to $200+ per year depending on the functionality you need.

4.Developer Fees (Optional):

If you need custom functionality or advanced design, hiring a developer can cost anywhere from $50 to $200+ per hour. If your project requires extensive custom coding, expect a web development budget starting at $500 to several thousand dollars, depending on the complexity of your project.

5.Maintenance and Security:

Since you’re responsible for managing updates, security patches, and backups, you may want to invest in a managed service or security plugin. Budget $10 to $50 per month for these services, or more if you opt for premium backup and security solutions.

Time Investment for WordPress:

•Building the Site:

Depending on your experience, building a WordPress site from scratch can take anywhere from 20 to 100+ hours. If you’re using a pre-built theme and plugins, it will take less time, but customizations will add hours to the process. If it is your first time, prepare to spend quite a bit of time learning some technical aspects of the infrastructure setup. You’ll want to have a good idea for where you want your website to be and look initially and what growing it with additional features and functions will entail.

•Maintenance:

WordPress requires regular updates, both for the platform itself and for plugins and themes. Budget a few hours per month for this, or pay for a managed service if you want to offload the responsibility. You’ll also need to periodically monitor performance, security, and backups. Many of these tasks can be automated, and that will save you a lot of time. You can also hire an agency to monitor and maintain your website and perform the necessary updates and backups for you so that you can toss that hat away.

Squarespace: All-Inclusive with Transparent Pricing

Squarespace offers an all-in-one solution with pricing that covers hosting, design templates, and even e-commerce features if needed. While the price is more straightforward, you may end up paying more for features that come standard in WordPress via free plugins.

Cost Breakdown for Squarespace:

1.Domain Name:

Squarespace offers a free domain for the first year when you sign up for an annual plan. After that, the domain renewal costs about $20 to $40 per year.

2.Monthly Subscription:

Squarespace’s pricing is subscription-based. Plans range from $16 to $65 per month, depending on whether you need basic website functionality or more advanced e-commerce features.

Personal Plan: $16/month – Basic website with a few pages and no e-commerce functionality.
Business Plan: $23/month – Adds e-commerce and marketing tools.
Basic Commerce: $27/month – Ideal for businesses selling products online.
Advanced Commerce: $49/month – Includes advanced e-commerce features, such as abandoned cart recovery and subscriptions.

3.Design Templates and Features:

Squarespace includes a selection of high-quality, responsive templates at no additional cost. There are no additional fees for themes or templates, unlike WordPress, where premium themes are often necessary for a more polished look.

4.Additional Costs:

Squarespace’s integrated tools may reduce the need for third-party services, but some features (like advanced marketing integrations) could still require additional investment, such as paying for email marketing services or external plugins.

Time Investment for Squarespace:

•Building the Site:

Squarespace is designed for users with little to no coding experience. You can build a simple site in 5 to 20 hours, depending on how much customization and content you need to add. Most of the process involves selecting a template and adjusting it to fit your brand.

•Maintenance:

Squarespace takes care of updates, security, and backups for you. This significantly reduces the time you’ll need to spend maintaining the site. Business owners can expect to spend less than 1 hour per month on upkeep—typically updating content or adding new features.

Important Considerations for Business Professionals

1.Budget Flexibility:

If you’re operating on a tight budget, WordPress offers more flexibility. You can start with a low-cost hosting plan and add features as your business grows. Squarespace, while convenient, has fixed subscription costs that may not scale as efficiently as your site’s needs grow.

2.Time vs. Customization:

WordPress demands more time to learn, build, and maintain, but in return, you get unmatched customization and scalability. Squarespace, on the other hand, saves time with its ease of use but sacrifices flexibility. Consider how much time you can dedicate upfront and over the long term when making your decision.

3.Long-Term Growth:

If you anticipate significant growth in your business or need advanced functionality like a custom-built e-commerce system, membership site, or integrations with other platforms, WordPress is a better long-term solution. Squarespace is great for small to medium-sized businesses that value simplicity but may fall short as your business scales.

4.Tech Expertise:

If you don’t have technical expertise and don’t want to hire a developer, Squarespace is the easier, lower-maintenance option. WordPress, while powerful, requires either tech knowledge or the willingness to invest in professional support.

Our Final Thoughts on Cost and Time Involvement

When choosing between WordPress and Squarespace, it boils down to balancing cost, time, and flexibility. WordPress allows you to start small and grow with your business, but the hidden costs in development, maintenance, and plugins can add up. Squarespace provides a more predictable cost structure, but if your business outgrows its capabilities, you may need to switch platforms down the line. If you’re a business professional looking for a quick, hands-off solution, Squarespace’s ease of use is hard to beat. However, if you’re in it for the long haul and envision a website that evolves as your business grows, WordPress offers the versatility to make that happen if you’re willing to put in the time.

Not every website project is the same and so we couldn’t recommend one of these to everyone. Hopefully after reading this article and seeing the different options you now have a better idea of which platform will be best for you and your business.

Is There A Difference Between Development and Design?

Web Design, Web Development

At first glance, design and development may seem so similar that only one is necessary. However, a good grasp of the difference between web design and web development is crucial to ensure a successful and effective website project, for both the client and the digital team.

Web Design
Web design focuses on the visual aspects and user experience of a website. It includes designing the layout, color scheme, typography, imagery, and overall aesthetic. This process uses graphic design software like Adobe Photoshop, Illustrator, or Sketch to create mockups and wireframes. Web designers are skilled in graphic design, typography, color theory, and user experience (UX) design, which are all essential for creating visually appealing and user-friendly websites. The end product of web design is a set of static visuals or mockups that showcase the planned appearance and layout of the website.

Web Development
Web development, on the other hand, is about building and maintaining the functionality and interactivity of a website. This involves writing code to implement the design elements and create interactive features like forms, navigation menus, animations, and dynamic content. Developers use programming languages such as HTML, CSS, and JavaScript to construct the structure, style, and behavior of web pages. They possess skills in coding, scripting, and problem-solving to bring the design concepts to life and ensure the website works correctly across different devices and browsers. The outcome of web development is a functional website with interactive features and dynamic content.

The Balance
An imbalance between web design and development can lead to a website that is either beautiful but clunky or unattractive but functional. When design dominates, the site may look great but perform poorly. If development overshadows design, the site may be fast but lack visual appeal. Understanding these roles helps clients set realistic expectations, plan effectively, and communicate clearly, resulting in a successful final product. Balancing design and development is essential for a website that is both appealing and functional.

5 Things To Consider With Website Redesigns

Business Strategy, Web Design

Define Your Goal(s)

It’s important to have a an accepted end point that you and your team share, and then you can build the roadmap to how to achieve it. Having clear and defined goals help to ensure the success of your efforts with the redesign. It also will bring into scope what content, functions, specific designs, and other elements that will be required and allow you to break each goal down into silos with milestones and tasks.

Create Attractive Content For Your Audience

The best content is content made for specific individuals. The idea of generalized media with a spaghetti on the wall approach is meaningless and a waste of time (and money). So instead, do some research on what your custom avatar is challenged with and how your MVP is going to address their issue(s). You’ll want to lead with that on your home page, then provide proof of concepts, examples, case studies, and testimonials. If you have some big partnerships or known influencers, leverage their contributions and feedback as well. All of these can greatly help change a potential client/customer from kicking tires to frantically looking for a BUY NOW button.

Design For Mobile Use

The data shows that more websites are viewed on a mobile device over desktops. Yes widescreen monitors are nice and I’m sure your brand graphics could look amazing on them. But going back to the goals, what is the main function your online visitors are expected to want to do? Are they mainly going to pull up your website to see graphics and ponies scroll across the screen in a parallax or slider? Is that going to make them more inclined to use your call to actions or sign ups? If so and you can make all that work on a mobile device using average network speeds, go for it all. Otherwise it may be worth to disable some elements that are useful on the desktop but not necessary for a mobile experience so that your content loads even faster and satisfies the ever dwindling patience of today’s society.

Make The Navigation Flow Easy

A hamburger menu is those three lines at the top corner of the website – on mobile – that help visitors click to show a full menu of pages and subpages to navigate or jump to. If your site doesn’t have this as a feature, you’ll certainly want to incorporate it. Being responsive and Google Mobile Friends is also key for SEO purposes and for Accessibility. Those are the technical, but let’s also take a second to consider how your visitors “should” be navigating from page to page like as if they were reading a book. Will you have landing pages optimized with content that you’ll be using ads and retargeting so that when visitors do “click” and get to your landing page(s), they’re offered a seemless experience and then can easily tell what their next steps should be? Are large buttons and large arrows necessary? Or do images alongside content helping the eye navigate along a page clear interaction points shown. PRO TIP: On your current website, install a Heat Map so that you can see how and what people are using their mouse and spending time on for each page on your website.

Create Multiple Landing Page With Specific Strategies

I’ve hinted about landing pages above, but let’s talk a bit more about it here. Landing pages serve singular purposes, and that’s to provide information on a product or service with a clear and sometimes repeated offering or call to action. The normal top or side page navigation menus are not aways displayed because we’re hoping to keep the visitor focused on just what they see on the page. There may be an introductory video, infogrpaphic, product images, before and after photos, you name it. All of these along with supporting text that better describes a need or challenge that the visitor can have solved by taking another step. Maybe that’s to sign up for a newsletter, purchase a product, subscribe to a newsletter or mailing list. There’s no limit on the amount of content needed on each of your landing pages or a limit on how many landing pages you can or should create. Having multiple can help with A/B testing, segmenting your audience, providing variations for your digital marketing ad traffic and audience and more. Consider your landing page almost like a deal closer that can speak to anyone in your target audience, but in a specific way that they’ll understand individually and appreciate.

I hope that you found these points useful and relevant if you’re going through or planning a redesign with your company website. Each business is different and there are many other things to consider. If you’d like help with a strategy for your own redesign be sure to contact us.

How to Install a Reading Progress Bar

All Posts, Web Design

In this short video, I show how to create a reading progress bar using a free WordPress Plugin called Reading Progress bar from Jean-Baptiste Audras. This is ideal for websites with blogs or long form content where your readers will see their progress as they scroll down reading. It keeps a custom colored progress bar at the top of the screen just below the URL address bar of the browser and scrolls from left to right as the reader continues to scroll down the page.

When Doing Your Own Redesign Takes A Long Time

All Posts, Blog, Marketing, Web Design

We’ve all been there. Some of us more than others – yet still the idea of a redesign initially starts out with great aspirations, then leads to feverish or lackluster enthusiasm weeks later. Let me back up and explain my story.

It’s been probably three or four years since our last redesign of the Design Theory Website. Years ago I can remember when I first tried WordPress and had a blog in a sub-domain while having our main website in HTML on the root. It worked out better than I could have expected and within about nine months I was ready to convert everything into one site on WordPress.

Fast forward to present day, and I can honestly say that I’ve been working on this redesign for about two months. Not consistently, more on-and-off. Reason being is that, well, we’ve been busy. Being busy is a good thing when you’re a creative but only to a certain point. Some of our best ideas get filtered into our client websites and strategy efforts, meanwhile our own website gets the cold shoulder.

Why Are We Taking So Long

To be honest and short, we want a really good and clean experience for you. We want all of our services laid out in a way that is easier to navigate, lead/sales funnels created with purpose, and products easier to identify and purchase. What we’ve learned over the years is that the customer experience is what matters the most in any website. It kind of needs to be catered to them more so than what I think the website should be designed like.

Another reason for the redesign is to make the new website load much faster than the current one does. Realizing that more web traffic is done via mobile browsers than desktops, we have to make sure that our website loads smooth and fast on hand-held devices. Make sure that it’s also Google Mobile Friendly is key too. It’s important to make sure that the almighty Google deems our website acceptable.

Lastly, we believe it’s time for a refresh. There are a lot of ideas that we want to do that include a rebrand, but we’re going to have to hold off on some of those bigger and more time intensive initiatives to be able to focus on tangible goals and a timeline. Good ideas are great but they’re truly a dime a dozen. It’s really about executing and to be able to launch some of our more necessary ideas we have to stay focused. When it comes to our customer redesigns we treat them the same. We come up with a lot of great ideas from improved functionality, new software, and new graphics, but we also stage things out in milestones so that there is always something to look forward to over the next several weeks and months.

As you can see we’ve got a lot to consider with our redesign. It’s more important to us that it’s done right than just putting together a new design and layout without constructive though behind it for usability. Have you been thinking about a redesign of your website? What is holding you back from getting started? Let us know in the comments below or contact us directly if we can help.

Developer and Client Transparency Presentation [VIDEO]