Webflow
Analysis of a perfect Website in terms of UX and UI
The user should immediately be able to understand what is the purpose of the website, while they don’t want to spend time trying to find the solution on their problem. There are billions of websites, and the competition is too high. So it’s effortless for the user to leave a website and to look for the next one, which will give him/her the solution to their problem.
Let’s have a look on the website of webflow so that I will justify why is this website an excellent example in terms of User Experience and User Interface Design.
Purpose
· By putting more visual weight on an important message, you increase chances that users will read it. Bold and catchy typography is the solution for this website layout. Bold and catchy typography is one of the Web design trends today as well.
· Vivid colors and gradients are another Web design trend today. Colors grab the attention of the users and invoke emotions; they are as crucial as the backgrounders images. Gradients are the multipurpose color trend that works on pretty much any type of design.
· Animations. Motion design and graphics keep the UI feeling alive and guides the user’s navigation through the web. They are used to bring attention to specific elements and explain the relationships between objects.
· An essential CTA part is in the hero section, so the user can immediately act on it. In this case, the highlighter makes the CTA button to be visible, easily accessible, and attractive, so the one and clear conversion goal to get a new user is already evident from the beginning.
Useful
· A website needs to tell a story that addresses user problems, how to solve it , and how your product can help. This makes it useful and it’s an important factor that adds value to the users experience.
Usable
· The website must be easy to use and here the Simplicity is over complexity. In this website, by scrolling only down, you travel through the history of the interactions in Web design.
Desirable
· Communicated in design through branding, imagery, identity, aesthetics and emotion. The designer is using Shapes to represent ideas and feelings.
· The form can be considered as a powerful tool like color or words. Using simple shapes in design is not a trend. Designers have been using geometric shapes as decorative and structural elements in our designs for practically a century.
Squares & Rectangles
· Sharp corners perfectly show the classic style, while straight lines and right angles of these two shapes give a sense of reliability and security.
Rounded Corners
· Rounding corners makes your interface more cute and friendly by adding harmony, unity, amity and eternity. Also, Hyper rounding is now a trend.
Circles
· Circles is the best shape to use when you want to make a playful design.
In combination with color is perfect for entertaining niches. Circles don’t have angles so it makes them softer. This is a good reason to convey warm emotions.
· According with the F-shaped reading pattern the users will start with the main message first by reading the text group on the left side of the layout.
· Black color means elegance, power and authority. At the same time, it creates high contrast with the blue color on top of it and creates a joyful and trustworthy sense.
· Typography is as wide as it is necessary so that the user will read the text easily.
CTA
· After the user became familiar with the brand and its services there is one final CTA section at the end of the page. Using a center aligned approach here ensures that there are no distractions that can get in the way of using the last call-to-action option.
Real Time Interactions
All of the choices of the interactions that you will have if you start using the Webflow are represented visually in this story. In my opinion, the visual way of description makes this website unique.
While scrolling down, you meet real-time interactions. Also known as direct manipulation, the user is interacting with the interface objects directly and immediately. This fact adds value to the user’s experience and every single movement we see aims to a specific thing.
For example, the Dolly and Zoom movement which comes from the video discipline, it behaves like a frame of the video which changes from general to medium and close-up. Spatially in UX, this motion could refer either to a change in the viewers perspective or to the perspective remaining static while the object changes position.
The designers from Webflow are using many types of real-time Interactions to provoke emotions that will make the user journey unique and unforgettable.
Takeaways
This challenge was an excellent opportunity to think more deeply about UX and UI Design with different decisions that go into such details as the placement of the CTA buttons and the establishment of Bold typefacesand gradients.
If you are a newbie in this field, I would recommend you to make as much research as you can, to get inspiration from UXers that are already established in the market and to experiment by designing projects that they have been done already.
