Vectornator Website Morphs Into An Immersive User Journey As Soon As The Visitor Starts Scrolling
Vectornator is a macOS/iOS app for illustration design, layout mockups and typography creation.
The app’s website was designed by Lift Agency, a company that specializes in UX design. The website serves as the app’s landing page, where potential users can learn more about the app’s capabilities and functionalities before downloading it.
Because the app is targeted at professional and aspiring designers, Vectornator website design had to deliver in creativity in order to persuade the prospects about the app’s quality and integrity. Web designers know that when targeting a specific audience, the design needs to resonate with their preferences and expectations.
Has Lift Agency managed to achieve this?
Yes – and they did so very convincingly.
The opening hero section of the website welcomes the visitors with full-screen background graphics and a very brief, to-the-point messaging explaining what Vectornator is.
Two prominent call-to-action buttons are featured in this above-the-fold section: “Download”, for visitors already at the end of their user journey, and “Watch more” for those still in the awareness/consideration stage.
But it is when the user starts scrolling that the magic starts to happen.
The background fades further away, lending a sense of depth to the home page, only to gradually appear on an illustrated laptop screen. Vectornator’s user interface tools and windows also join in, appearing on the said laptop to showcase the app’s look.
This multi-layered transition to the app’s appearance is followed by social proof: the number of times the app has been downloaded, its average AppStore rating and logos of brands using Vectornator.
Vectornator Website’s Brightly Colored Imagery Pops Against The Dark Background
As the visitors continue to scroll, they are greeted by the app’s main features and types of design it is capable of.
The website facilitates the navigation with a sticky main menu that stays with the user the whole time – along with a clearly visible call-to-action inviting them to get the app.
The combination of a dark background, vivid illustrations and striking CTAs make this user journey a very pleasant experience. It's similar to how branding professionals use contrasts to add an element of dynamism and excitement to the customer experience.
The app’s highlights like print, lettering and PDF editing are shown as vibrant illustrations within a tablet screen. Each functionality is complemented with a call-to-action in a royal blue hue, leading the visitor to a page where they can learn about each feature’s use cases.
The website’s dark mode may lead some to overlook the extensive use of negative (white) space. Every section and element on the website also has plenty of room to breathe. The strategically placed boxes of text and illustrations do form a good layout flow without any interrupting content.
Solid Typography Makes Vectornator Website Copy Legible & Understandable
Vectornator website design relies on Inter - one of sans-serif Google fonts - for excellent legibility on all devices and across all content sections, headings, sub-headings and paragraphs.
Messaging is the most important part of any product landing page. It is there to convince and educate the user through concise, benefit-driven copy.
Besides these qualities, the copy must also be easy to read. Lift Agency has achieved this with large headings, short paragraphs and a few bullet points for each feature.
The choice of typography is the final consideration when optimizing the website for legibility. Inter typeface ensures content “skimmability” while its colors make sure there is no eye fatigue: the headings are white, but the main portions of the text are in light grey, which forms the right amount of contrast with the website’s dark background.
Vectornator’s Blog Section Switches To Light Mode For Content-Heavy Pages
Vectornator’s website keeps the users in mind – from the content to the background color. Take the blog section for example. It is packed with useful, informative content on anything related to design: from inspirational ideas for beer labels to the history of the Bauhaus movement.
Unlike the rest of the website, Vectornator’s blog section features a light theme.
When reading or skimming through plenty of written content, a white background works better. It helps with the focus and is more eye-pleasing when a reader spends a prolonged amount of time on a single page.
Vectornator Website Design Relies On The Power Of Visuals & Information To Deliver Its Unique Values
Vectornator’s website design does a great job of emphasizing the app’s functionalities and features.
By offering captivating visuals and compelling colors, it creates the link between the product’s purpose and the user benefit. While it does rely heavily on big illustrations and animated effects, the Vectornator website never disregards the user experience, legibility and the importance of quality messaging.
It is the synergy of all these elements that make this website Lift Agency’s magnum opus and our pick for the Best Website Design award.
