Promo Site for Webnauts UX/UI Design Services
The objective
Webnauts Design is a promo site for Webnauts design services that fully reveals the creative side of our company. The main objective of the project was to create a presentation site-portfolio of web design services, which would contain a minimum of information and a maximum of visibility.
An established, self-sufficient and modern design team whose services went far beyond UI/UX design needed a separate website. It’s no secret that our guys were involved in the design of the interface, so the site visitor runs the risk of getting a wow effect without even going to the portfolio section.
Interface design
It all started with UX analysis and prototyping, and only then this is followed by its majesty UI — visual design in the form of page concepts and drawing layouts. As a result, we got a user-friendly and attractive site. Simple navigation, large moving font and micro-animations are trends that immediately attract attention and, by the way, will be relevant in the UI/UX world for a long time to come. The minimalistic and neat interface somehow resonates with the corporate identity of Webnauts. These are readable sans-serif fonts, and subtle gray colors with a red tint, which gives the site a special accent and dynamism.
80 hours of analytical and creative work — and the design project is ready! And how without magic in the form of animation? Let’s talk about this in more detail later.
Website coding
Together with the designer, the developer brought the layouts to life using three front-end pillars: HTML, CSS(SCSS) and JavaScript.
Animated preloader
The implementation of an animated preloader was an interesting task, the purpose of which is to inform about the loading process of the site and brighten up the user’s waiting. The designer suggested notifying the progress of the download using a circular running indicator and using the user’s precious time to greet them in different languages of the world.
It was not difficult to animate and style the indicator for the design, but the animation with the greeting block was not easy. But still, after successful attempts to understand the algorithm, our developer got the desired result:
Parallax effect
The GSAP Scroll Trigger plugin with the locomotive-scroll.js library helped to implement an amazing parallax effect based on smooth page scrolling:
Running line effect
The first screen greets users with the line “WEBNAUTS DESIGN” running along the screen. A similar, but more spectacular effect can be observed if you hover over one of the portfolio works: in addition to the running red bar with an enlarged title, we also get a preview window showing the project in miniature:
If you wish, you can get to know each of the works in detail. One click takes the user to a separate page, where the tasks of the project and the creative process are described in a concise, interesting and accessible form (here we need to pay tribute to our copywriters), and of course, the result, supported by numerous images:
Microanimations
It is especially interesting to interact with microanimation of images. At first, the pictures on the site seem static and gray, but as soon as the cursor “touches” the photo, it seems to come to life and take on colors:
In addition, the horizontal scroll bar and the Drag graphic element (literally: Pull) prompts users that there is still content outside the screen, which can be seen by grabbing and dragging the gallery with the mouse.
Hover Rotation Effect
The rotation effect turned out to be interesting when hovering over links and menu items, and changing the color additionally focuses users’ attention on the desired object:
To make it pleasant for our audience to interact with the site through animation, our front-ender used the GSAP (GreenSock Animation Platform) JavaScript library.
To speed up the layout process, the Gulp assembler was used – a tool that allows you to automate the routine tasks of web development.
Adaptability
We pay special attention to website optimization, because more than 50% of Internet traffic comes from mobile devices.
Due to the small screen, the site should make the most positive impression on the user. Therefore, in the mobile version, we have shifted the focus from interest to convenience.
Due to the fact that the mobile version does not have a hover (cursor hover), there are fewer animation effects. So, the portfolio block has been modified: now, instead of the hover effect, we see a static and clickable case cover.
Site functionality
When the coding is ready, the back-end developer gets down to business and places the site on the platform. For this, the most popular CMS in the world was chosen — WordPress (WP), which has an infinite number of add-ons and features.
Let’s see how the main page is arranged. Navigation on the site is carried out using anchor links that move the user to the desired part of the landing:
Under the Cases section, a custom post type and related custom taxonomies Type and Services were created:
WordPress plugins
You can easily and quickly create custom fields using ACF (Advanced Custom Fields). This is not magic, this is a plugin — a mini-program that increases the standard features of a WordPress site. Our backender installed several plugins for all occasions:
- ShortPixel Image Optimizer — for optimizing images.
- WP Super Cache — for caching data.
- Yoast SEO — for search engine optimization of the site.
- LocoTranslate — for translating strings embedded in code (form responses, errors in form fields, text in form fields, and other small fragments).
- Polylang — for translating taxonomies and creating language versions of pages (Main and Cases).
- Yoast Duplicate Post — for cloning posts.
- WP Mail SMTP — for sending emails via SMTP.
Forms were implemented without additional WP plugins, but not without other technologies. Applications from the form on the site are sent to email using an Ajax approach that speeds up data exchange in the background.
Website protection
To protect the site from spam, the reCAPTCHA v3 technology was connected to the form – it analyzes the user’s behavior on the site before clicking on the Submit button: if the actions took place, then the user is not a bot – and only after that the data is sent.
To create a special custom field for entering the Site Key, another WordPress tool was used — the Settings API.
Fine-tuning of the site took the developer 40 hours. Now it is not just a beautiful, but also a reliable site with ample opportunities for creating and processing content.
The results
After 255 hours of teamwork of designers and developers, we have an attractive, modern and user-friendly portfolio website for UX/UI and graphic design services on WordPress. The combination of minimalism, clear navigation and hover animation from the first seconds gives users a fun and exciting experience. Can you ask for more from a design services website?
Comments