DEV Community: Vlad Migulia

How Much Does the Website Cost?

Vlad Migulia — Tue, 27 Apr 2021 13:04:34 +0000

The most popular questions clients ask in the first few messages are related to budget estimates and timelines. And it is obvious, to be honest. But what makes an impact on a cost and time estimate? It depends on several factors:

Does it a marketing website or a web application?
Do we speak about website design? Or is it about development? Or maybe both?
Do you need a freelancer or a professional studio?
Does it complicated in terms of pages' quantity or system architecture?
What is the performers' experience?

Here is my try to expand this number list more.

Marketing website vs Web App

Most of the people unrelated to web IT don’t know the difference. And it’s totally OK! Let’s compare those two.

Marketing website

Unikorns.work is a marketing website. It is a bunch of pages full of content that plays the role of a marketing tool. People can learn more about your company, check your services, subscribe to a newsletter, fill a contact form, find contact information, etc.

Usually, the marketing website price starts from 25$/month to 500$/month if you use a website builder. This option is not a professional solution, but it is well-fitted for a tight budget.

If you going serious about your website and choose a professional web studio or freelancer, the price ranges between 1000$ to 300.000$ (if you want a super fancy design from a famous design studio).

Web application

It is a kind of application software that runs on a web server and used via a browser. Unlike the marketing website, web apps provide a diverse spectrum of actions users can make to manipulate specific content. For example, registration, emailing (Gmail), buying products (E-commerce), and other (bank applications, booking services, etc.)

Web apps are more expensive than marketing website because of the functionality it contains and architecture complexity. Usually, the price for a well-built web app starts from 15.000$ (but really a simple one) to millions of dollars.

Web design vs Web development vs Full-cycle

On the market currently available multiple service providers, but services categories are everywhere the same.

Web design studio/boutique/shop/agency

Here you can ask for a design for websites or web apps, illustrations, animations, etc. Those guys are all in design. The price for design creative work of super-skilled experts sometimes could go beyond the sky.

You can check Awwwards to see quite fancy works that reach hundreds of thousands of dollars. But in general, you can find a really great place with a 40-80$/hour rate and get a decent result.

Web development studio/shop/agency

Here you can ask for development services only. These people are techy experts and all about development and testing. Development prices depend on project complexity, technologies, and project uncertainties.

The common practice is to use an hourly rate pricing system. I am sure you can find a great place with 40-80$/hour bends as well.

Full-cycle web design & development studio/agency

The services spectrum could really vary from company to company. But in general, you can expect a bunch of services. It could be:

Web design + Web dev
Branding + Web design + Web dev
Branding + Web design + Web dev + Marketing Strategy + SEO optimization

What is the main advantage of those studios/agencies? They work holistically. Imagine you have a web app idea. You want to build it from zero. And you want separate teams (branding, design, dev) to know the context. The context is what helps to simplify the workflow on the project.

The case example. You received a design for a web app, and now you go to web development. During the web development, the team discovers some design issues that could complicate the functionality. What will be easier and more consistent in that case:

Ask external designers that made your design to implement changes (they probably don’t know the development context)?
Make a design in a full-cycle studio and ask designers from the same studio you are making development to make some updates or changes (they probably know the context)?

The answer is obvious.

Freelancer vs Professional studio

This topic is really complex. We had a long-read article answering who is more reliable: Freelancer or Web Design Studio? In general, the article is not only about a web design studio. The conclusions relate to any freelancers or studios related to design or development. I will make some bullet-point lists to show the pros and cons of both.

Freelancers

Hiring a freelancer, you can be sure that:

They cost less than a studio (15-30$/hour is an average);
More available than studios;
More flexible when it comes to changes.

But you have to be ready that more often than not:

There is no comprehensive approach;
You are insecure regarding the legal stuff and payments;
They have a full-time job, and it can impact quality;
There is no comprehensive project management.

Studio

Hiring a studio, you can be sure that:

There is a much higher likelihood that you will hire experts (because people work for a boss who might have requirements);
You will be safe when it comes to legal stuff and payments;
You can be sure that there are project management processes available.

But you will face some cons as well:

Be ready to pay more (50-100$/hour is an average in Europe);
The realization process can take more time due to internal processes.

Hint

Pay attention to questions being asked by a studio or a single designer. A good company will be interested in discussing not only design but also the development and business needs.
Take your time. Make decisions without a rush!
Paying thousands of dollars for design studio services doesn’t mean outstanding quality. Some specialists have low skills, studios too. Choose the best web design company whose level of expertise is higher than yours.

Project complexity and pages quantity

It has the biggest impact on the price when it comes to estimates.

Marketing website

A 10-page well-done marketing website takes around 100-150 hours of design and 150-200 hours of development (250-350 hours in total). Multiply it by rate, and you will get the price: 50$/hour multiplied by 250-350 hours that make 12.500$-17.500$. Sounds reasonable for a good product, right? If you want unusual animations, page transitions, effects, be ready for higher invoices.

Our 7-page website took us 170 hours. And we continuously improve it. Don’t forget that a custom build website requires continuous maintenance and periodic improvements.

Web applications

Web applications have a different approach to development and engage backend developers more often. When it comes to web app coding, marketing website prices could become a drop in the ocean. Let’s consider a simplified example.

You are a clothes shop owner, and you need an e-commerce website with 500 pages. You want to have:

10 cloth categories and 60 subcategories;
Product pages;
Multiple payment methods;
An option to find products by QR code;
An interactive map that shows all your stores in near location;
Precise products synchronization between frontend-warehouse;

To build such a store takes around 1000-1200 hours multiplied by 50$/hour, which makes 50.000$-60.000$. Not bad, huh? The more functionality you need, the higher the price will be.

Performers' experience

The more experienced the performer, the higher the hourly rate, the lesser the time estimate. With an expert team, you pay not only for quality but for speed as well.

This dependency is perfectly working when it comes to project estimates. Experienced and devoted performers with good project management skills (or processes) usually make a deep analysis of the future project and apply top-down or bottom-up estimation techniques.

Bottom-up approach

This estimating technique is usually used when the budget is not fixed (but exceptions happen) and the environment of the project is relatively stable.

In this case, performers need to have well-defined tasks. The entire project is broken down into pieces (so-called Work Breakdown Structure), and each small section is estimated separately, then all separate estimates are gathered into one. This estimating technique is excellent, but requires two things:

Well defined tasks
Performers' expertise on similar projects.

Top-down approach

This estimating technique is usually used when the budget is fixed, tasks are not well-defined, and the environment is not stable. It is the least desirable since its precision is much lesser than the bottom-up.

In this case. we can use the phrase “a ballpark figure” because there are no well-defined timeframes and tasks. It only relies on experts' experience and historical data (well-defined tasks are the key to precise estimate).

The conclusions

Take into consideration those 5 factors and decide what is important for you. Remember, everyone has their own needs and story, I will be happy to hear yours!

Are you looking for a professional lightning-fast website?
Don’t hesitate to send us a note at hello@unikorns.work or visit our website: www.unikorns.work

Why SEO Is Important: Case Study

Vlad Migulia — Mon, 25 Jan 2021 13:06:15 +0000

One day, every micro, small, or medium business meets a question: “how to make the website show up better in search results”? It may take days, weeks, months, or even years since the foundation of the company. Unikorns is not an exception. We met this question after the first 2 months of the foundation.

We spend months learning how to get better and make our website more SEO friendly. Are we experts now? Hell no! But we got precious knowledge on how to build a beautiful, fast, and SEO-friendly website for our clients as well as avoid common mistakes some web studios do. Sit your belt tight and prepare for the journey.

P.S. This article is not for experts but for people who have heard of the word “SEO” and know what it is. But don’t actually know much about its benefits and role in Web Design Agencies/Studios.

“You guys are lame at SEO!”

Let me stop you there and explain something. There is a confusion that sounds something like: “If I will get a website anywhere, no matter expensive or not, I will skyrocket in SERP.” Eh, nope. You won’t.

Web studio field of work

Basically, a web studio makes web design and web development. It’s not required for a web studio to have SEO experts that boost your website. But here is a tricky moment - your website can only organically rank well thanks to SEO (organically, not thanks to Google Ads). It's not about design or development but Search Engine Optimization.

Sometimes an unpleasant situation happens when a client gets a desirable website but doesn’t show up in SERP after a while. Then comes million of google queries, reading, and inspecting what’s going on. And at some point client find out the truth - his website has Search Engine Unoptimization (big brain jokes, I know).

Website Wars research from Moz

There was a comparison in 2013 between the SEO Agencies and Web Design Agencies in Search Engine Optimization.

It came out that Web Design Agencies often got a fancy design, but common SEO characteristics are:

Defective SEO web architecture and no on-site SEO;
Poor generic words ranking and lack of keywords orientation;
Poor website optimization.

SEO Agencies appeared to be well-optimized from the SEO perspective, but common Design characteristics are:

Content clutter;
No entertainment, only informativeness;
No style, no animation, no custom fonts, old fashioned, and template-based;
Used old technologies.

If you think that it was in old-fashioned 2013, I have sad news… Just go to Dribbble or Clutch and find some unpopular design studios/agencies and check their SEO in SERP or Chrome Inspector. Why unpopular? Because most of the clients can’t afford studios/agencies' that have highly paid and skilled employees, marketers, and SEO consultancies.

You can do the same with SEO Agencies, just go to Google and try to find some. You’ll be surprised by their UX/UI design and “modernness”.

No-brainers

However, there are some no-brainer SEO rules required in design and development.

For instance, design

You want your website to be “dressed” to kill, right? For that, you need a bombastic design, but with the basic SEO principles that are thought over during the design phase:

What does “bombastic design” mean? A few things: animations, interaction features, visual accessibility, interface clarity.
What does “basic SEO principles in design” mean? A few things: headings hierarchy, content logic, navigation, internal linking logic between pages.

Why SEO is here? Because you want your website to be very accessible for the crawl/spider bots. Well-made wireframes (website page blueprints) are the initial step to that accessibility.

If you’re curious what your web page consists of from the UX perspective, I totally recommend you to check the 7th week on 52weeksofux. Fundamental website frameworks (structural, visual, social, and contextual) are really well described there.

Now, let’s move to the dev no-brainers

You want your website to be well-optimized and visible in SERP, right? For that, you need to develop a website with some standards:

Using HTTPS protocol;
Limit the use of the client-side javascript;
Optimize page speed;
Careful use of robots.txt;
Get an XML sitemap.

Where is SEO? All 5 points are SEO-friendly standards. In addition to the smooth and fast website, it will be more friendly to the crawl bots that will inspect it.

If you want to know more about SEO, I recommend you to check the SEO article at Moz. They’ve made an understandable and short explanation of what it is.

To sum up

Web design studio/agency ≠ good Search Engine Optimization for your website. It doesn't mean SEO would be weak, though. SEO is just another kind of service that is not mandatory in web studios.

Our experience with SEO

The enigma has appeared when we asked ourselves: “why the hell we don’t show up in search results?!”. We have blog posts, a kick-ass website, posts on social media, some followers - what’s wrong? We made some google and discovered two things:

SEO is much more important than we thought. We have to make something with our lame one;
We have to patiently wait for results (it could take weeks/months);

Here come the changes…

Title

We started from the most eye-catching one - title. First of all, we speak about the HTML element:

We discovered a great thing that Google likes some limits if it comes to SEO:

We tried to wrap our titles in a 60 characters limit on each page. If a title is too long, it may cut off the information at the end, so we need to make the right information order first;
We discovered that it’s a great practice to have different titles on each page that provide a unique value; It also affects how users see our pages in SERP.
We should avoid keyword stuffing. It can make Google algorithms penalize for over-optimization.

Above you see how it was before we tried to optimize it. Here is what we got after the optimization:

Here you can read a more detailed guide to title optimization at Moz.

Meta descriptions

Once again, it’s about the HTML element:

We discovered a problem, we didn’t make different meta descriptions for our pages. That means each page had the same one and quite a long one - 240 characters. Google likes meta descriptions that are up to about 160 characters.

We decided to limit it to 120 characters. Why? It was our personal preference 'cause mobile browsers often cut off meta descriptions that are longer than 120 characters. From statistics comes that 60-70% of users use mobile devices for surfing.
We’ve made a unique meta description on each page. It gave our pages more unique values for crawl bots and users who read them via SERP.

Now, our pages look more accessible (but from some perspective, it has less valuable information in it):

Here you can read a more detailed guide to meta description optimization at Moz.

Alt tags

We've added alt tags to every image on our website. People know that it’s essential. But why? If crawl bots can read all information on your website, they can fit this information into people’s queries in Google. That can increase the possibility to appear in Google Images results as well.

More important is accessibility. People with vision problems could use text to speech readers without limitations and content loss.

Here you can read a more detailed guide to alt tags at Moz.

Canonicalization

My favorite one:

The same day we started our Magazine, we began Medium blogging. Oh, that was a mistake…

The canonical tag tells the search engine where the master page location is.

<link rel=”canonical” href=”URL”

What does it mean? You want to make your website the original source of information or ask duplicated website URLs to point on a master page. Why? Because if you don’t, Google will make it for you. And the result won't be satisfying in the most cases :)

That what’s happened to us. Because of the low page authority and unknowledge of canonical tags, Medium and Google decided to make Medium the original source of information for our articles. Googling our articles was showing Medium in SERP first.

We canonicalized all our pages first. Now it tells search engines that our website is the original source of information.
We changed canonicalization on Medium in settings that pointed to our website articles. Now we pay close attention to canonical tags on other platforms either.

Here you can read a more detailed guide to canonicalization at Moz.

Keywords

At the very beginning, we had a 2-page MVP version of our website with no JAMstack words in it. Well, we didn’t think of it then. After some googling, we discovered that valuable texts are one of the steps to better SEO.

We released the 1.1 version of the website and expanded it to 5 pages to create space for extra valuable information (excluding articles' pages). Also, we made internal links between the Services and Magazine pages;
We filled pages with relevant and valuable texts regarding our company. Keyword stuffing is in oblivion, so we decided to rely on LSI (Latent Semantic Indexing).

Here you can read a more detailed guide to LSI at Blue Corona.

Results

We noticed after a month that we jumped higher in search results thanks to these improvements. These topics above are not expert SEO knowledge, it’s just basic rules some people might don’t know. What does it mean for us as a Web Studio? We can’t help clients to make content for their website, but we can guide them in the right direction toward better SEO.

Some basics take little time from our side to set up (canonicalization and proper titles and meta descriptions visibility), some take much effort from the client side to be made (texts and images). But cooperating during the project can bring great results: a good basic SEO out of the box. Not excellent optimization, but essential. The one that won’t hurt the website in SERP.

What’s next?

It’s our personal aim for the website. We have three things we want to work on that related to SEO. We want to make our website content highly understandable for search engines and to increase domain authority.

Schema.org. We want to make structured data on our website. It will make the information on our website easier to interpret by bots.
Topic cluster strategy. It will help us to improve our site authority and bring more value to our SEO strategy in a long run.
Quality backlinks. The backlink network gives a huge boost to domain relevance and authority.

The fin

We know that understanding a bit more than average is great, and we won’t let our clients go with the lame SEO right out of the box. Does it mean we provide SEO services now? No. Does it mean we will educate our clients more? Yes. We are not afraid to share our knowledge and failures because we are just humans. The key here is to make the knowledge derived from failures become our strengths.

If you have any questions and concerns, we are always happy to answer, help, consult and just talk about JAMstack and headless approach as such. Feel free to write us at hello@unikorns.work.