Creating a beautiful website is one thing; transforming it into a whole experience that mesmerizes users and meets their every need is a different story altogether. These websites have managed just that, with spot-on UX design.
Crafting beautiful creations comes as second nature to most designers. Certain color combinations mesmerize us, our eyes are drawn to perfect compositions, and we have some kind of innate gene that tells us what looks good and what doesn’t (any scientists in the crowd? Don’t judge).
It’s true that crafting a beautiful website design is not a task to be taken lightly. But coming up with one that also creates a whole experience, has a logical layout and hierarchy on each page, enables users to navigate freely and tells a complete story from start to finish – or in other words, has perfect UX, really is a challenge (as you can tell from these UX design trends). We’ve handpicked five Wix websites whose talented designers have clearly considered the user throughout, resulting in truly successful UX design.
> One-pager with a fixed menu & a visual storytelling experience A powerful fullscreen video is the first thing that greets you on entering Run Wild’s website. This dramatic hero draws you in, while the extra details on the top fold serve a more functional role. The large, concise text immediately explains where you are, and the ‘show me how’ button indicates there’s more content to be found, making website navigation accessible to those who aren’t accustomed to scrolling. As you venture down the site, Run Wild’s story unravels before you, starting from a personal first paragraph, to design projects that integrate seamlessly into the experience, to testimonials and a ‘contact me’ section at the end. All this is presented in strips, with inviting text, big images and fun animations that make you want to explore further. The website menu at the bottom acts as a summary, as well as offering the user further actions, ensuring that the experience doesn’t end abruptly. Feeling short of time? Run Wild have thought of you too, adding fixed social icons and a hamburger menu for those who’d rather not scroll. The menu opens up as a fullscreen lightbox, so you can always close it and return to the point you were previously at. A satisfying ‘full circle’ sensation is created, with the top fold’s video being subtly incorporated into the logo at the very bottom of the page. But it doesn’t stop there: the experience is completed with the ‘back to top’ icon that takes you on a sped up journey back to the hero video, giving the user a recap and a sense of conclusion.
> Personal touch in the microcopy & a unified visual language in every detail The first thing you may notice about this website is the general bright and clean design, consistent throughout each and every detail. Yaya Ding, the face behind the brand, has added various elements that show that she’s clearly paid attention to the user’s comfort, putting the UX design in the forefront. The small ‘back to top’ icon that rightly appears just when you start scrolling down is a real time-saver, as is the search bar, that makes getting to the content you desire just that little bit easier. Additional nice touches are her handwritten logo at the top of the page, a personal ‘love, Yaya xo’ at the end of each blog post and cute microcopy, especially on the ‘contact’ page. Instead of ordering site visitors to follow her on social, she’s gone for a much friendlier ‘let’s get social!’. Placing her blog on the homepage, as opposed to her portfolio, shows that she’s less about selling her services and more about sharing her ideas. Starting a blog and writing content is also a great way to show users that you’re active and take your profession seriously. Last but certainly not least, are the crisp photos throughout the site, whose color palettes somehow harmonize perfectly.
> Organized menu & various navigation options to suit every user
Before we get carried away expressing our undying love for the gradient background and for the podcast itself, let’s focus on the website’s UX design (that’s what we’re here for, after all). Everything about Debbie Millman’s website is crystal clear, leaving no space for confusion: from the short and engaging explanation at the top, to the super organized menu bar that includes any details you could possibly need to locate a podcast on a specific topic. The fixed header means that even if you start by scrolling down to browse the interviews, you can always change your mind and search via the menu instead. It allows you to easily sort through the content, filter results and get to your desired page. If you’d rather a more fluid kind of navigation, you can search via tags. These diverse options suit all types of users, whether they know exactly what they’re looking for, or prefer to explore and see what interests them. By having a ‘load more’ button, the loading time is sped up – always a plus. Built with Velo by Wix, the site is full of rich content and dynamic pages. To top it all off, take a peek at the cute favicon (featuring an icon of Debbie Millman), indicating that this site’s creators really have considered the whole experience.
Design Matters' website
> Structure that emphasizes the works themselves & a fixed header that appears on every page This online portfolio by super talented multidisciplinary design director Liron Ashkenazi gives her works the platform they deserve. The website’s structure and the text in the header are simple and to the point. But don’t let that fool you – this portfolio is full of small tricks and attention to detail that take it to a whole other level. The individual pages have similar layouts, with each one being slightly adapted to suit the specific project. A few of them add variation by breaking the mold, while the header stays put throughout, creating a nice effect when navigating between pages. The gallery for The-Artery project combines screenshots, motion and brief explanatory headers in a seamless and unified language. A similar thing can be said for the 24 Hours in Icons page, which is full of movement and animations that transform it from a simple gallery to an engaging experience. From the works themselves, to the straightforward language (including the ‘Don’t steal anything. Duh’ in the footer) and seemingly effortless layout, Liron Ashkenazi manages to create an effective and nonchalant vibe. By showcasing the projects on the homepage and minimizing the number of CTAs, the emphasis is rightly placed on the works themselves.
Liron Ashkenazi's website
> Clear branding throughout & an organized structure Created by Studio & More, this website acts as a landing page for this year’s OFFF design conference in Tel Aviv. Not only are the essence and purpose of the website clear at first glance, but so is the branding, with a strong unified visual language in every detail. The designers behind this site have clearly considered the users, enabling them to reach the required pages quickly and easily; the two most important CTAs appear right in the center of the top fold and the fixed menu header means that you can either browse the site leisurely, or navigate through the pages in a more direct way. The ‘chat’ option improves the user experience, allowing them to speedily receive responses to any questions they may have. The subtle animation and hover effect on the ‘buy tickets’ button makes it stand out, grabbing visitors’ attention. A classic site structure is just right for this kind of event website. It starts out with a teaser at the top, goes on to present the speakers and ends with a big footer full of all the relevant info. As you move down the homepage, you discover that each strip has been designed in a different way, making the scrolling experience especially engaging. Your eyes are kept stimulated as you scroll, with an aesthetic combination of text, stills and videos layered in various ways, and certain elements that break the grid, shaking up the alignment. An extra sense of movement and energy is achieved by including animated headers on each page.
OFFF TLV 2018 website by Studio & More