To get a trial key
fill out the form below
Team License (a basic version)
Enterprise License (extended version)
* By clicking this button you agree to our Privacy Policy statement

Request our prices
New License
License Renewal
--Select currency--
USD
EUR
GBP
RUB
* By clicking this button you agree to our Privacy Policy statement

Free PVS-Studio license for Microsoft MVP specialists
* By clicking this button you agree to our Privacy Policy statement

To get the licence for your open-source project, please fill out this form
* By clicking this button you agree to our Privacy Policy statement

I am interested to try it on the platforms:
* By clicking this button you agree to our Privacy Policy statement

Message submitted.

Your message has been sent. We will email you at


If you haven't received our response, please do the following:
check your Spam/Junk folder and click the "Not Spam" button for our message.
This way, you won't miss messages from our team in the future.

>
>
PVS-Studio's new website: how we design…

PVS-Studio's new website: how we designed It

Jun 04 2021

The PVS-Studio website turns 15 this year. This is quite significant for any internet resource. Back then, when our website was born, Russia announced 2006 as a year of humanities. That same year, in June, Denis Kryuchkov established a new platform, "Habrhabr" (now known as Habr). In November, Microsoft officially completed OS Windows Vista. That same month we registered the viva64.com domain.

We celebrated our domain's 10th anniversary with the website's redesign. After that, we would only change the resource capacity and features, but we'd never touch the design in any way. During this time, the number of articles grew so much that we needed to add tags to facilitate navigation. Right now we are also working on our YouTube channel. This means, you will see more and more new videos on our website as well. We keep adding new web pages at a tremendous rate, while the website's usability stays the same.

Time has come for big changes!

0833_how_the_new_website_design_was_made/image1.png

How we started

The first thing to understand about any global changes is why do them and whether they are needed at all. That's exactly where we started. We'd been playing around with the redesign idea for a while. And here's why:

  • People kept commenting our articles. In their comments, they were genuinely surprised that we provided a trial key. And that they could request one. And that they could easily do it on our website.
  • Sometimes we'd get questions about where to view "What's new" notes for the latest release.
0833_how_the_new_website_design_was_made/image2.png

We are still getting questions about the Linux version. Although, to be honest, there are fewer questions now.

  • Webvisor showed us all the challenges a client had to face on our download page.
0833_how_the_new_website_design_was_made/image4.png
  • In general, something was telling us that the long text describing the product was too long and complicated (your feedback demonstrated that, of course).
  • We also experienced difficulties with advertising and landing pages for it. The trial key request process was not intuitive. A client first had open the download page, then scroll it down, find the form, fill it in (choose a platform, trial version, email, first name, last name), add a comment (we've made this field optional only recently!)...).

We used that feedback and information as a foundation when prototyping our new website.

The prototype

Prototyping any resource starts with a goal. Information resources encourage their users to return and aim to keep them on the website longer. The goal for an online store is a purchase. In our case (a product website), the goal is a request of a trial key and price. A lead, to be precise.

Statistics show that users usually look at 3-4 pages before requesting a trial version. They would read some articles, open the product page, study various kinds of licenses, find out about where they can integrate the analyzer, and only after this some of them would download the distribution and request a trial.

So here's what we came to:

  • The trial request form must be on every page, and it should be simpler. Even simpler than that! Very simple!
0833_how_the_new_website_design_was_made/image6.png
  • Similarly, users must have direct access to downloading the distribution on every page.
  • We must provide different ways to download the distribution. If the first option does not work for someone, the second one might.
  • Our clients should see at once that the analyzer is available for three platforms. By all costs we need to avoid the scenario when somebody misses the fact that PVS-Studio is available for Linux and MacOS.
  • We must list the product's advantages clearly and concisely.
  • The website's main pages must answer our client's main questions.
  • Our blog and documentation must be in their own separate sections, so that working with them would be as convenient as possible. While browsing those, our users must not lose track of the product page.

So what did we come up with?

  • We reduced the trial form to a few fields and showed it one the website's every page.
0833_how_the_new_website_design_was_made/image7.png
  • We added the "Download" button to the header and pinned the header so that it's always visible when a user scrolls the page.
  • We created different download forms to show on the product and download page.
  • We specified steps to select and download the distribution. Choosing a platform (Windows, Linux, MacOS) became the first step.
  • We identified and briefly stated the PVS-Studio static analyzer's 10 main advantages and made them into an interactive list.
  • We specified which goals each page needed to achieve. Then we broke them down into blocks that helped meet these goals.
  • We created separate templates for publications and documentation. However, we used the same theme and the same domain.

Design

You get what you give - or, in our case, you get what you design. Indeed, design matters. A lot. It affects whether your users remember the resource. Whether they find all the elements you need them to find. Whether they click the "x" button after the website loads...

This is why we were ready to put in a lot of resources and effort into designing our website. We found a freelance designer with a decent portfolio. It did not matter that he was far away from us (in another city). We waited two weeks for our contracts to travel back and forth via snail mail. Then we waited two more weeks while the designer developed his version of our front page. Finally it was done. And all that waiting - it was all for nothing. What we got was nothing like what we wanted.

As they say: vague goals - vague result. We learned from our mistakes and detailed all changes we wanted to see in our front page's project. Bullet point by bullet point. With examples. I guess it was a little too much. Here's the reply we got:

0833_how_the_new_website_design_was_made/image9.png

So, a month had passed, and we had no designer.

0833_how_the_new_website_design_was_made/image10.png

Looking for a new one, spending time to sign contracts, hoping that this one won't quit on us - we did not want to take that road again. Not anymore. So we looked at a different road and got some help from a front-end web developer (spoiler).

We started with dropping by our staff designer Galina's office. Wondering why we didn't start with her? Well, that's because Galina is always working on other tasks we entrust her with. She draws, animates, prints, processes, invents... That's quite a bit for one person!

However, Galina did not say "no" and accepted that long list of our requirements:

  • Use colors from the PVS-Studio logo, but make them muted. Unmuted, our blue color looks too bright on white - and may feel uncomfortable to the eye. Especially for those who prefer dark themes. Gray solved their problem wonderfully - and also highlighted all elements and became a great background color.
  • Keep the unicorns, but reduce their number. Unfortunately, not everyone appreciates our mascot. Especially banks, especially major ones.
  • Replace the lost unicorns with geometric shapes, that are becoming increasingly popular.
  • Add gradient fills to keep up with the trends (have you noticed that many companies added gradient fills during rebranding? ;) ).
  • Add icons, draw infographics.
  • The most important point - it must look good!

If you think this is detailed, do not be mistaken, the actual specification was truly exhaustive.

So Galina got to work. Unicorns, geometry, all elements highlighted. The gaze is directed to all the right places.

0833_how_the_new_website_design_was_made/image11.png

Layout

Did you think our troubles with freelancers were over? That's not quite so. Now we had to look for a freelance front-end web developer, since we only had a back-end developer on our staff. We found a front-end web developer, signed a contract, sent him our specification, prototype and mock-up. Then we sat down and waited.

0833_how_the_new_website_design_was_made/image13.png

Two weeks passed, so we asked him to show us something. Got a response that it was too early. So we kept waiting.

0833_how_the_new_website_design_was_made/image13.png

A month had pased, we needed to see some result. But we just kept getting promises. One more week. We became more persistent - only to find out that the developer has a difficult personal situation. We empathized and canceled. That's when we understood that we wasted over a month - the work was not done and we did not have a front-end web developer anymore.

0833_how_the_new_website_design_was_made/image10.png

Did we go to see our staff developer? Sadly, no. A back-end developer is a back-end developer. So we had to look for a new front-end web developer. The Universe's proving grounds must have run out of obstacles, and we found a new front-end web developer quickly. We started our collaboration.

The frontender's first step was an attempt to sell us Next.js. We almost agreed. The pages loaded amazingly quickly. The SEO problem was easy to solve (search engines got HTML thanks to SPA). We pondered a bit, and hit an insurmountable obstacle: who's going to maintain all this beauty? So we went back to the good old HTML+CSS+JS.

Back end

The new layout required serious changes to the website engine. Fortunately, our staff back-end developer is a part-time wizard. That's why he took the layout and reassembled the website's engine from scratch, block by block. Although this might sound pretty easy, it took a lot of effort.

0833_how_the_new_website_design_was_made/image14.png

Domain change

Along with introducing the new design, we wanted to switch to a new domain. A domain whose name does not sound strange. If only you knew how often we had to explain why our website's name is viva64!

Changing the domain seemed easy: create a new website on a new domain, redirect users from viva64.com to pvs-studio.com. Done!

Well... not quite. Search engines just had to interfere with our plan. When a website's design and a website's domain change simultaneously, search engines logically see it as a new website. It takes new websites a long time to get to the top of search results. So we had to postpone the design change. Changing the domain became our first step. We sent a request to search engines and got their blessing. Only then did we present our redesigned pvs-studio.com website.

In conclusion

Although there's still much work to do, our website's first implementation is ready to welcome its first guests. As for us, we are ready for your comments: what you liked, what you would like us to improve. We know, there's no limit to perfection!

Popular related articles
The Evil within the Comparison Functions

Date: May 19 2017

Author: Andrey Karpov

Perhaps, readers remember my article titled "Last line effect". It describes a pattern I've once noticed: in most cases programmers make an error in the last line of similar text blocks. Now I want t…
The way static analyzers fight against false positives, and why they do it

Date: Mar 20 2017

Author: Andrey Karpov

In my previous article I wrote that I don't like the approach of evaluating the efficiency of static analyzers with the help of synthetic tests. In that article, I give the example of a code fragment…
PVS-Studio for Java

Date: Jan 17 2019

Author: Andrey Karpov

In the seventh version of the PVS-Studio static analyzer, we added support of the Java language. It's time for a brief story of how we've started making support of the Java language, how far we've co…
The Last Line Effect

Date: May 31 2014

Author: Andrey Karpov

I have studied many errors caused by the use of the Copy-Paste method, and can assure you that programmers most often tend to make mistakes in the last fragment of a homogeneous code block. I have ne…
The Ultimate Question of Programming, Refactoring, and Everything

Date: Apr 14 2016

Author: Andrey Karpov

Yes, you've guessed correctly - the answer is "42". In this article you will find 42 recommendations about coding in C++ that can help a programmer avoid a lot of errors, save time and effort. The au…
How PVS-Studio Proved to Be More Attentive Than Three and a Half Programmers

Date: Oct 22 2018

Author: Andrey Karpov

Just like other static analyzers, PVS-Studio often produces false positives. What you are about to read is a short story where I'll tell you how PVS-Studio proved, just one more time, to be more atte…
Technologies used in the PVS-Studio code analyzer for finding bugs and potential vulnerabilities

Date: Nov 21 2018

Author: Andrey Karpov

A brief description of technologies used in the PVS-Studio tool, which let us effectively detect a large number of error patterns and potential vulnerabilities. The article describes the implementati…
Free PVS-Studio for those who develops open source projects

Date: Dec 22 2018

Author: Andrey Karpov

On the New 2019 year's eve, a PVS-Studio team decided to make a nice gift for all contributors of open-source projects hosted on GitHub, GitLab or Bitbucket. They are given free usage of PVS-Studio s…
Static analysis as part of the development process in Unreal Engine

Date: Jun 27 2017

Author: Andrey Karpov

Unreal Engine continues to develop as new code is added and previously written code is changed. What is the inevitable consequence of ongoing development in a project? The emergence of new bugs in th…
Characteristics of PVS-Studio Analyzer by the Example of EFL Core Libraries, 10-15% of False Positives

Date: Jul 31 2017

Author: Andrey Karpov

After I wrote quite a big article about the analysis of the Tizen OS code, I received a large number of questions concerning the percentage of false positives and the density of errors (how many erro…

Comments (0)

Next comments
This website uses cookies and other technology to provide you a more personalized experience. By continuing the view of our web-pages you accept the terms of using these files. If you don't want your personal data to be processed, please, leave this site.
Learn More →
Accept