The new Quasar website is online

A new UI for the open-source framework

The new Quasar open-source framework website is finally online. A new landing page to tell the story of the project and other updates which will lead the way to the coming platform as time goes on. The key words are: clarity, accessibility and content.

After the 2020 Quasar survey and our subsequent thoughts on framework communication and the new official Quasar logo announced in May 2021 the growth of this awesome technology continues. More or less, two years have passed since the start of this renewal and value adding process and we are pleased to see that the effort is paying off.

We had already announced the intention to start a renewal of the official quasar.dev site and finally here we are. This decision stems from two main needs: strengthening Quasar brand identity and improving communication about its qualities and the resources it has for developers.

In this article we will go over the main points of the new official Quasar portal.

More branding, more storytelling

Who says that the IT world has to be technical and cold? Who doesn’t like stories? Quasar has an amazing one to tell in which thousands of developers every day interact with web projects that can vary greatly by adopting new approaches and tools to constantly improve the quality of their code, setting the bar ever higher.

There is a daily challenge with technological progress which is based on many small choices and actions and that regularly redefines the borders of web design with regard to frontend design and an engineering approach to software.

We wanted to tell the story with an imagery which brought together the name Quasar with the frontier spirit and from there the concept of space as a new horizon to explore.

We worked on a simple, yet evocative communication plan, that could define a look that was immediately recognisable in the field of frameworks.
With its technical terminology and lines of code, a framework is by nature a tool that is difficult to convey a tangible image of – especially for someone outside the field – so we put aside excessively abstract geometries and concentrated on more concrete visual elements.

We want to talk about Quasar to a wider public, which includes managerial profiles. If, on one hand, the developers must have access to technical resources, on the other their colleagues who deal with project management and corporate strategies should also be involved.

Communicating with professionals who do not write code means making Quasar understandable to those who have the final word with regard to technological stacks.
From our statistical analysis we have learned that sometimes convincing managers to support Quasar economically is a critical point. We would like to offer to our community effective communication tools to convince those who have decisional power in the company with regard to technology. In our opinion this dialogue occurs on two levels, one perceptive and one more pragmatic. This brings us to the second point.

New sitemap and new navigation

The renewal of the site is not just an opportunity to showcase the new brand image. It’s not enough to have appeal, you also need some substance. When things get serious, managers and developers look beyond the brand so you can’t scam them.

Quasar is a universe of technological resources for developers and the problem with universes is that they are usually really difficult to convey all the way to their distant confines. Managing to express this complexity, making it more accessible is one of the challenges which is on the top of our list of priorities. The new website is a step in this direction.

Until now the Quasar site relied mainly on lateral navigation, using a navigation drawer, which is a common component in web apps. To improve access to information we have decided to increase the access points on the user interface, also revising the topics distribution on the UI.

Now on the app bar at the top margin you can find some of the most important sections that can convey a general overview of the framework also to less technical users. Other pages will soon be added that could not be included straight away.

New navigation app bar for the Quasar open source framework

The new app bar that has the most important pages that talk about the Quasar world.

At the bottom of the pages we have added a large footer containing the complete index of the pages, which can be scrolled to and acts as a backup index.

New navigation footer for the Quasar open source framework

The new Quasar footer, which helps user navigation when one reaches the page bottom.

A new and very important update which many will like is the gallery of web components, structured in a grid with filter options by category or by search, which will make it a lot easier to find the desired UI elements.

Web component gallery for the Quasar open source framework

The new gallery of web components with filters and search field.

A dark mode has also been integrated that had been waiting to be released before Dreamonkey took over the Quasar website. This feature is available in the docs area and we hope to support it with further improvements in the future.

In short, with these and other updates, the new site UI shows the hierarchical content relations more clearly, allowing for better user navigation.
We are confident that the proper use of typography, colors, sizes and layout help to identify information, technical resources and social channels in a more intuitive way than before.

This is where the fun begins

The updates illustrated are only a few stars of this galaxy, the new Quasar site has other surprises in store. Since the beginning we have opted for a step-by-step operative plan set out in a roadmap of priorities.

Since there is a lot to do and to tell, this method allows us to have a continuous workflow, focusing the attention of the community on pinpointed updates each time. Along with the rest of the Quasar Core Team, we can’t wait to show them to you.

If you want to stay up to date with the news, follow Quasar on Twitter or Facebook, or sign up for our newsletter.