So you know your way around a site backend, and can design basic sites with your eyes closed. If you’re looking for more advanced creative inspiration, you’ve come to the right place.
We asked Editor X’s new design visionaries team, our informal creative inspiration group, to share their most creative projects yet—and how they did it, so you can try it yourself (or riff on it with your own design).
1. A top nav Piet Mondrian would envy
Create a colorblocked top nav that takes cues from the famed modernist painter, and gives your logo and menu equal billing with this website menu tutorial by Vered Bloch, lead designer for Shaping Design and Academy X. Bloch also runs an inspirational web design feed under the handle @eyecandiex (you’ll especially appreciate it if you have a sweet tooth).
Bloch says this unified, high-contrast menu design would work well for almost any site. “The style options will suit designers who want to show a more sophisticated website menu into their design,” she says.
2. Hover interactions that make a night and day difference
Interactive site sections are a sophisticated way to deliver a more elegant and impressive user experience—and they’re not nearly as difficult to do as meets the eye. In fact, with a few clicks in the backend, you can change a site element into a hover interaction trigger, and change the entire look of your site in the process.
If you want to try something more advanced, follow along with this tutorial by Editor X research and development designer Amit Asulin and brand designer Eliran Vahdi, as they create hover interaction that changes the site’s background color, this time around a comet, and is sure to leave users starry-eyed. For more inspo like this, follow Asulin and Vahdi under their handle @spoootx.
3. Font-forward web design for type nerds at heart
Editor X has all the classic fonts a designer could want: Budoni, Helvetica, Futura. But we don’t restrict to icons only.
If you have a type craving that you can’t satiate within our default menu, or you have a custom font you’ve crafted with a type foundry, you can easily upload external fonts to include type that speaks to your client’s brand point of view. Follow this tutorial by brand designer and type connoisseur Linor Pinto to add additional fonts (like my personal fave, Cooper Black) to your next project. Follow her handle @weirdfonts and see how she follows her own advice to “be bold and don't be afraid to spice up your typography” on the daily.
4. Posters for the digital era (no wheat paste required)
Tech designer Sari Lorber uses the backend of the web builder to design what she calls “posters,” that are responsive in a way that analog versions simply can’t be. The idea of making a poster in a web builder may seem counterintuitive, but with the ability to upload custom fonts, image, and videos; add lottie animations; and design right in the editor, it's easy to develop creative that feels cohesive within the overall architecture of a site.
See how Lorber integrates filters, typically associated with social apps, into her web designs and get poster inspo of your own under the handle @sari2000____.
5. No-touch galleries that are low-touch to make
You might have created a slideshow of images in website 101, but you’ve graduated beyond intro level design work. How about upping the sophistication of your site design with display images that slide and loop automatically, no clicks required?
Designer Chen Rozen uses the Pro Gallery with Infinite Loop to rotate images automatically on a range of sites, but auto galleries are especially great for sites that need to “showcase images and videos in an engaging and visually appealing way,” says Rozen, like photography websites, eCommerce, blogs, and online publications. Follow this tutorial to try it yourself, and follow Rozen @x__education for more design tricks.
6. Transparent video that makes a clear case for motion
There are several ways to inject a sense of movement into your website (hover interactions, lottie animations, auto slideshows) but transparent video is one of the easiest—that also offers a super polished, hi-fi result.
Web and brand designer Hadar Yamini uses transparent video to build a dynamic site, and “aesthetically uplift the entire website experience,” she says. No small feat. Here, she pulled a transparent video (which refers to a video’s transparent background) from Editor X’s existing library, placed it on a gradient background, and set both opposite an image of graffiti she captured on the streets of Tel Aviv. Follow her inspo account @ra_dar____ for more.
7. Transparent video with custom colors to fit your client’s brand (or aura)
Step one was placing transparent video. But you can customize it beyond placing the video on the background of your choice—you can recolor the video itself. According to brand designer Anita Goldstein, this can also save time since you can edit the video right in the editor.
Goldstein recolored a default organic shape from Editor X’s transparent video library from drab brown to vivid periwinkle so it would fit the needs of her overall composition. Learn how to do the same with this transparent video recoloring tutorial, and follow Goldstein @_blabablob_ to more organic, occasionally motion-activated blobby shapes.
8. An intricate microgrid that’s both beautiful and responsive
There are grids—and then there are grids. If you can make responsive grids typically used to layout and structure a site in your sleep, try your hand at this responsive grid design by design team lead Shir Berkovitz. Her design uses a 10x20 grid—that’s 200 equal, square, gradient sections, by the way—to make a super sophisticated design that looks like a digital weave.
Take the on challenge with her step-by-step tutorial, and follow her @sisypheax for more on responsive shapes and grids.
