Responsive web design has gone from ‘nice to have,’ to ‘need to have’ for agencies looking to build differentiated websites for their clients. As the amount of devices online has skyrocketed, designing for specific screen dimensions has clear limitations: you have to account for more screen sizes with less margin for error in your designs. In contrast, a responsive approach ensures your website looks polished at all breakpoints. Improve your clients' UX and increase traffic by catering to all devices when you make the switch to responsive design. What is responsive design? Responsive web design is the process of designing websites that adjust to the size and capabilities of every device or browser it’s viewed on, thereby guaranteeing that visitors always see the best possible version of your site. With so many devices, browsers and resolutions available on the market today, creating a responsive website is now essential for crafting a successful user experience. What makes your website responsive? If you’re a designer or web creator about to embark on a new responsive project, you’ll probably need to adjust to thinking in relative sizes and proportions rather than envisioning one fixed and final layout. Since responsive websites scale according to their dimensions, Read on for expert tips on how to make a responsive website from start to finish. How to make a responsive website Get started with wireframes Define your breakpoints Design for small screens first Create a fluid grid Optimize images for responsive design Optimize typography for responsive design 01. Get started with wireframes The process of how to design a website always starts with planning the layout, and there’s no better tool for early layouting than wireframes. A wireframe is a schematic representation of a future design, and it's a convenient method for structuring your layout in an organized, yet low-fidelity manner. Here are a few important points to consider when wireframing: Keep your wireframes unpolished Speed and simplicity are two key attributes of wireframes. At the early stages of product design, you need to experiment and see what solutions work best for your users. Don’t spend extra time making your wireframes pixel perfect. Instead, create your layout and validate it with your target audience and stakeholders, focusing on functionality and information architecture rather than aesthetics. Create wireframes for different groups of devices Mobile, tablet and desktop are the most common types of devices that people use to browse the web. When creating wireframes, try and address all three groups to see whether your design scales well across them. 02. Define your breakpoints Breakpoints are the building blocks of responsive design, making them a crucial step when making a responsive website. Breakpoints are the pixel values at which your design is adjusted, so that visitors always see the best possible version of your site, on any viewport size. Breakpoints are defined by CSS media queries width (min-width and max-width) and height (min-height and max-height). Those media queries determine the conditions under which specific media attributes are applied, allowing you to change styles based on the type of device or browser that renders the content. If you’re building your website on Wix Studio, you’ll have 3 default breakpoints to start with: desktop (1,001 pixels and up), tablet (751-1,000 pixels) and mobile (350-750 pixels). You can also edit the existing breakpoints or add custom breakpoints to fit your project’s needs, code-free. While there is no universal set of breakpoints, there are a few recommendations you can follow when choosing yours: Try to maintain the least number of breakpoints possible. Since designers have to adjust content to match breakpoints, you should strive for around 3 breakpoints for the most device flexibility. The main criteria in choosing your breakpoints shouldn’t be your devices, but the content you have. Your content should determine how the layout adjusts to its container. Customize the design for every viewport Be intentional about what you show or hide at different breakpoints. For example, a common approach on mobile is to hide top-level navigation options and use hamburger menus instead. This approach helps you save more real estate on your screen and makes the experience more content-focused. At the same time, make sure not to hide any content that can detract from the user experience. 03. Design for small screens first When it comes to creating responsive layouts, most designers follow a mobile-first approach, meaning they design the content to fit a small screen size first. Create a layout that works well at the smallest breakpoint and then adjust it for larger viewports. Practice a content-first way of thinking When designers craft a mobile experience, they have to think about what content they want to provide users with, and in what order. The small screen size is great motivation to conduct content inventory, evaluate the content and prioritize it according to the needs of end-users. This process helps distinguish essential content from unnecessary elements that on smaller screens, can become a distraction. The content-first approach also helps create a more solid visual hierarchy. By clearly prioritizing your content and messages, you’re likely to decide what content should be viewed first, what should come up second and so on. Consider the physical characteristics of the device itself When you design for mobile, you don’t only design for a small screen size. You also design for a touchscreen. Both content and interactive elements should be optimized for comfortable interaction with a finger. It is possible to use media queries like orientation and aspect-ratio to define condition checks and alter the design based on the user's device. Test your design on a real device A design might look perfect on your monitor, but as soon as you start interacting with it on your smartphone, you notice some drawbacks. Define a few key scenarios of interaction such as key tasks that your users want to complete on your website, and try to complete them yourself on an actual mobile phone. 04. Create a fluid grid A grid is a two-dimensional framework consisting of columns and rows that allows you to precisely position UI elements on a page. Proper use of a grid will help you avoid situations in which individual UI elements overlap in different screen sizes, resulting in a solid layout that’s fully responsive. Grid allows for the flexibility of creating a tailored layout for each breakpoint you've defined, so that the content and design will perfectly fit each viewport. Changing the number of columns and rows in a grid, as well as their size and spacing, can create a better layout for site visitors. The size of the columns and rows can be defined using different types of grids: Fixed (pixels): To create such a grid, you need to set the size of one of your columns or rows to a specific number of screen pixels. This grid type means that your one or all of your columns or rows will maintain a fixed size across all devices. Fluid (percentages or fractions): Fluid grids automatically adjust to the available screen space, maintaining a consistent look and feel across multiple devices. Using fraction as a measuring unit makes the size of grid items proportional to each other (e.g. in a grid of 2 columns, if the fraction for the left column is set to 2, and the fraction of right one is set to 1, the left column will take up 2/3 of the available screen space). 05. Optimize images for responsive design The quality of images greatly affects the perception of a design. A web page with crisp, properly-sized pictures is more likely to make a positive impression on the site's visitors. The problem with images is that they are not naturally fluid, yet you can still modify them to different resolutions. It's vital to ensure that your visuals retain their highest quality and correct aspect ratio on every screen size. Resize images appropriately It’s possible to resize an image with CSS: CSS: The CSS width and max-width attribute can help you to adapt the image to different screen resolutions. The width property defines the fixed width of the image, while max-width makes your image maintain its exact aspect ratio and proportions. Wix Studio: You don't have to use CSS to make images look great on every screen resolution. Instead, you can control an image’s fluidity by setting an exact width or height, and alternatively by setting a max width or height in percentage or pixel values. This option will scale the image proportionally to the viewport. High-resolution devices might need to render images at two or three times the normal resolution to achieve decent visual quality (@2x, and @3x). There are various online tools, like Responsive Breakpoints, that can generate the optimal responsive image dimensions. Use SVG files when possible Raster images (images in JPG and PNG formats) have fixed resolutions, but Scalar Vector Graphic (SVG) images are resolution-independent because they're a vector format that allows the images to scale in size without losing quality. As a result, SVGs retain the same quality at all resolutions and don't require any extra optimization. When using vector graphics, try to use SVG files so that they easily scale. 06. Optimize typography for responsive design Images and text are two building blocks of a web experience. Good readability and legibility are essential properties of a good user experience. Select a font family that scales well When choosing a font family for your design, be sure that your font selection works well both on large and small displays. This allows your typeface to scale nicely across different screen sizes and resolutions. Generally, it's recommended to use web-safe fonts, or some of the best fonts for websites like Helvetica and Roboto, because they are optimized to look good at different resolutions. Define font size in fluid units Apart from choosing the right font family, it's also vital to ensure your text will scale smoothly as you resize the screen. Mobile users should never have to pinch to zoom to read the content. There are many ways designers can define font size, mainly fixed (pixels) and fluid (em and rems). Rems is a type of unit defined in CSS3; font size for text in a container will be selected based on the container width. Here is a code sample for font size in rems: html { font-size:100%; } @media (min-width: 320px) { body {font-size:1rem;} } @media (min-width: 640px) { body {font-size:1.5rem;} } Using text scale, Wix Studio creators can set a minimum and maximum font size for any text element in the editor. You can also set the text to scale between different ranges of maximum and minimum size for different breakpoints to make your website typography fully responsive. Can I make an already created website responsive? Converting an adaptively designed website to a responsive one is definitely possible. To achieve this, you'll want to think in terms of proportionalities (such as custom breakpoints and percentages instead of pixels). Consider how to reformat your designs to take the best practices mentioned above into consideration. Plus, you can always use Wix Studio’s responsive AI (either on one section at a time, or on mobile breakpoints), which takes a lot of the manual labor out of the equation. While it may still require some effort and testing to ensure everything looks and functions as intended across devices, it's a worthwhile investment to improve your clients’ user experience and reach broader audiences. How to test responsiveness of a website Once you’ve created a responsive website, you’ll want to test it to ensure it behaves as intended. There are two main methods to test responsiveness effectively: Using browser developer tools (such as those found in Google Chrome or Firefox) or platforms like BrowserStack or Responsinator to simulate different device sizes and view how your website responds in real-time. Manual testing on actual devices, including smartphones, tablets, and different desktop screen sizes, which is equally essential to catch any issues that might not be apparent in simulated environments (such as how your website looks in certain lighting, or how well it performs on accessibility standards for specific user groups). By combining these methods, you can ensure that your clients’ website is truly responsive and delivers a seamless experience across all devices. With every iteration of a web design, you’ll want to retest the responsiveness to ensure new and changed elements continue to play well with all screen sizes.

For web creators looking to add character, dimension or sophistication to a website, the mouse parallax effect delivers all three. And now that some web platforms, like Wix Studio, offer mouse parallax without the need to write any code, it’s a good idea to become better acquainted with it in order to maximize its full creative potential. In this article, we cover the fundamentals of mouse parallax web effect: first with a basic overview and brief history, and then with guidance on implementation. You’ll even hear directly from Wix’s WOW Team—the visual innovation team that created Wix Studio’s mouse-parallax feature—on how they use the effect in their designs. What is mouse parallax? Mouse parallax is a visual effect in which elements on a web page move as your cursor moves. This adds depth, dynamism and a three-dimensional feel to your site when viewed on a two-dimensional screen. Parallax sounds familiar, right? That’s because mouse parallax and scroll-based parallax are both popular website animations. The major difference between the two has to do with what triggers the movement: Mouse parallax responds to cursor movement, creating an immediate and direct interaction. Scroll-based parallax is triggered by scrolling and uses a predetermined speed to reveal content and tell a story. Here's how the mouse parallax effect typically works Base layer: The base layer remains stationary and serves as the reference point for the visitor's eyes. Front layers: One or more layers of elements (e.g., images, text, or other UI elements like decorative icons or shapes) are positioned on top of the base layer. Mouse movement detection: JavaScript in the site detects the movement of the user's mouse cursor on the page or screen. Parallax calculation: Based on the mouse cursor position, the script calculates the offset or movement values for each foreground layer. This calculation is used to show a parallax effect when the mouse moves. History of mouse parallax The history of mouse parallax is intertwined with the broader evolution of web technologies toward more dynamic and interactive user experiences. Let’s go back in time a bit. 1990s Remember the first websites you visited? Sites then were largely static, consisting of text and images with minimal interaction beyond hyperlink navigation. Then came CSS and JavaScript, and web designers could finally create more entertaining and engaging experiences. At that time, complex visual effects, like parallax, still required custom code. Even so, these languages led the way to more dynamic and visually compelling websites without compromising site performance. Early 2000s Parallax scrolling, which was already in use for decades in the entertainment and gaming industries, emerged on the web. Taking inspiration from games like Super Mario and animated films, designers started using scrollbar movement to trigger subtle changes within their site designs. At this point, 2D web designs on every PC now had depth. Somewhere along the way, mouse parallax was born. 2010s - today As web standards and capabilities evolved, new web platforms emerged that democratized and spread web creation. Even designers without coding knowledge could now implement complex visual effects. And today, web platforms like Wix Studio also make it even easier to add mouse parallax without needing to write a single line of code. Learn more about Wix Studio’s design capabilities. Of course, the rise of mouse-free, touch-screen devices—like smartphones and tablets— limits how many users can experience this effect. This is why it’s important to follow best practices when designing with mouse parallax in mind. Best practices for using mouse parallax effect Mouse parallax is versatile. It can be applied to small details or have a dominant presence on a page. But not all users or devices can handle the effect. These best practices will help you determine how to best use mouse parallax on your site. Add effects with purpose The mouse effects on your site could range from being on full blast, small and subtle, or somewhere in between. Whichever effect you choose should align with the goal of your site. For example, quiet and elegant effects would suit a law firm’s website, while bold and dominating effects would suit an art gallery’s website. “When working for a client,” advises Ziv Moshe, visual designer on Wix’s WOW Team, “you can make the user’s first landing on the page calm and playful by using the effect in the header, and then more of it in pauses between folds.” Just ensure that any effects fit with your client’s brand language and are discussed upfront so there are no unpleasant surprises. Plan your mouse effects from the beginning of your design flow It’s a common misconception that website effects and animations aren’t relevant until the site design is finished and it’s time to build. As a result, the elements on your web page may feel forced together rather than conceived together. With this in mind, “mouse parallax needs to serve the narrative of the website,” recommends Avital Santo, head of design at Wix’s WOW Team. “You need to know your audience—how much and for how long you can engage them—and decide accordingly which effects you will add.” Don’t let effects cause UX friction Minimizing friction is one of the core web design principles. Ensure that the mouse parallax effect does not hinder navigation, readability or the user journey. Keep in mind that using the effect “changes the website layout,” says Moshe, “and make sure there is enough white space around [the elements] for the animation. Use it practically and don’t distract the user.” The effect should enhance the content and functionality of your website, not overshadow it. Make sure your site accommodates users with reduced motion settings Some users have limitations, such as motion sickness, and might find websites with mouse parallax effects challenging or disorienting. Offer them the option to disable or adjust the intensity of the effects. Other users might exclusively navigate sites with a keyboard, instead of a mouse, so be sure that your web design works for them too. Adi Huri, creative director and product manager on Wix’s WOW Team, explains, “We work closely with the accessibility team when we are creating new features for Wix Studio. We developed [the mouse parallax feature] in such a way that people with disabilities can experience the content without the effects.” Anticipate touch-screen devices without cursors Since mouse parallax relies on cursor movement, consider an alternate approach for touch devices. “Because mouse parallax creates a fun, engaging and interactive experience, for mobile, I’d create a similar experience—like with loop animations,” says Moshe. When recreating this on Wix Studio, Moshe recommends “to place the element in a container in order to apply several animations to the same element—but not too many which could lead to bad performance on the browser.” In some cases touch-screen devices are not completely off-limits; users who connect an external mouse will still enjoy the mouse parallax experience. Mouse parallax effect case study: Mouse Parallax Goes to Wonderland To better understand how to introduce mouse parallax effects into your work, we spoke with the creators of Mouse Parallax Goes to Wonderland from Wix’s WOW Team. Why did you decide to use a mouse parallax in the first place? Adi Huri, creative director and product manager, WOW Team: Our ultimate goal was to improve user engagement and help visitors consume the content more easily. Before choosing mouse parallax, we explored the web, looking at various trends and taking them down to their essence to understand technical feasibility. It turned out that mouse parallax is very useful both from the user's point of view (easy to interact with) and from the tech's perspective (easy to add animations and effects). Why Alice in Wonderland? How does it benefit the story? Adi Huri: The goal was to show the magic of the feature with something that makes it pop. We decided to use mouse parallax because it adds an illusion of depth and layers. When an effect is introduced properly it supports the narrative of the product. Ziv Moshe, visual designer, WOW Team: Each section describes a different part of Alice’s story and leads the visitor to the following sections. We used the preset mouse effects to pull the visitor to interact with the site and to move through the story, as if unveiling the Alice mystery. And all this time the website is dynamic—the assets fly, spin and move following the user's mouse. What is your process of finding a balance between usability and accessibility? Adi Huri: It's essential to think about accessibility right from the start and work closely with the accessibility team when designing a product. Doing that will maximize the chances of creating a product everyone can use. When it comes to mouse parallax, visitors should have an option to minimize motion effects, and with reduced motion, mouse parallax won't appear on their screens. Why is it important to have mouse parallax as a code-free feature? Adi Huri: Having mouse parallax as a code-free feature is much more than just saving development time. It gives the joy of creation to anyone, no matter whether they have coding skills or not. When the process of creating a parallax effect is so smooth that it's barely noticeable, creators start to focus on the actual design solution rather than on technical details. Avital Santo, head of design, WOW Team: What I love most about mouse parallax on Wix Studio as a website designer is that it’s so easy to implement. And the site visitor gets playfulness and interactivity. It’s instant gratification from the site. Unlike other effects that need more planning and a better understanding of layout and motion, adding mouse effects requires nothing more than your creativity. How far can you push a code-free feature? Ziv Moshe: In more complex cases, we used two effects on the same element. For example, the Cheshire cat's eyes are separate PNGs that follow the mouse (using a “track” preset) while the cat's head is a group using the “airy” preset. Recreate this experience on Wix Studio—sign up for an account today. How to create a mouse parallax effect on Wix Studio Wix Studio offers a wide range of code-free animations and effects, and is unique in that no custom CSS or JavaScript is required. To add a mouse parallax effect in Wix Studio: Select a specific object on the canvas. Navigate to the Animations and Effects tab in the right sidebar. Click Mouse Effects, where you can choose from various mouse effects, such as tracking, tilting, obscuring, resizing and more. Select an effect, and Wix Studio immediately adds it to the element so you can preview it in real time. If desired, click Adjust Animation to adjust the controls and customize the effect properties, such as velocity and perspective. As a reminder, Wix Studio automatically disables mouse parallax on mobile. In other words, since mouse effects require a mouse cursor, they will not play on touchscreen devices. Try adding mouse parallax effects to your Wix Studio website with this tutorial. It'll guide you through the entire process step by step in an easy-to-follow way.

The Wix Studio design team has just returned from OFFF Barcelona 2024, and even though the event only ran for three days, there were plenty of takeaways to inspire us all year long. Shir Berkovitz, brand design team lead for Wix Studio, has attended the events for the last few years and finds inspiration in the “new techniques, on-site collaborations and new relationships that continue even after the event is over.” Whether or not you were able to attend this year’s event (or even if you did, perhaps you were busy running in circles like a kid in a candy store), this OFFF Barcelona 2024 recap brings you the top lessons we learned from some of the most creative minds. 01. The most memorable sites are designed by feelings, not by formulas. When making sites for clients day in and day out, it's common to use a formula that makes your work process more efficient. But too much of the formula creates a sea of similar-looking sites. Browsing the web “you see lots of sites and portfolios,” Berkovitz reflects, “but you will remember the one site that’s different and has something surprising—even if it’s something small.” Designers can follow the example of Talia Cotton, formerly of Pentagram, who founded her own creative agency and design consultancy called Cotton in New York. Playfulness and surprise—not traditional web best practices—drive Cotton’s creativity. Cotton uses this approach to create on-site experiences that visitors don’t want to leave, at least not until they’ve finished having their fun. Two examples we love: Talia's personal portfolio first appears as very traditional, highly structured and even conservative. But move your cursor or scroll down the page and immediately a playful and whimsical experience takes hold. Elegantly fusing business with artistry and code, it’s a style that’s consistent across Cotton’s body of work. Arrive at the site for the architecture and design practice Almost Studio (created by Cotton) and you are invited to play. The call-to-action “DRAW” is just one of multiple playful moments throughout the site, emblematic of Cotton’s creative coding approach. And yet, this mechanic is more than a creative element. It expresses the essence of the brand itself. To draw, create and reveal are at the heart of Almost Studio’s practice, and for a moment, visitors can share in the joy of their work and mission. Though at OFFF Barcelona, Cotton elaborated on her use of code—describing her approach as “purposeful design work with code”—these days, it’s not necessary for designers to write custom code to achieve a similar experience. Inspired by Cotton’s techniques, web creators can turn to platforms like Wix Studio for a range of immersive, no-code design capabilities that include scroll effects, mouse effects, hover effects and more. What can you do? On your next site project, lead with emotion. What do you want your visitors to feel or which feeling best represents your brand? This way, from the get-go, you can choose the styles and effects that best deliver this. Create a site on Wix Studio using code-free animations and effects. 02. The physical world is the most engaging screen, even more than the screens in our pockets. With Covid trending downward and screen time trending upward, it’s natural that crowds are eager to fill up public spaces for disruptive, larger-than-life entertainment experiences. And for creators, this means the canvas is bigger than ever: Moment Factory makes it clear that public spaces are their canvas of choice, declaring, “We do it in public” as their tagline. Employing video, sound, lighting and technology, the studio projects three-dimensional, 360-degree immersive experiences in and on public spaces—notably AURA Invalides at (or rather, on) Les Invalides in Paris. Each curve, pillar and negative space of the 17th-century building is treated like a screen. At times the video and light projections pay homage to the historic architecture, while at other times they dominate the space in a delirious and flamboyant spectacle. The Museum of the Future in Dubai sounds like a contradiction—using its physical space to display the not-yet-physical future. But seeing that we’re already accustomed to AI, cryptocurrencies and lab-grown meat, how much of the future will be physical anyway? At the museum, visitors can wander through an immersive environment of neon lights, 3D galactic projections and glowing operation panels. Each interaction with the museum’s digital content carries a meaningful lesson on future technologies, specimens and ecosystems. Armed with this knowledge, there’s hope that visitors—and potentially the wider human race—will feel more connected to our future world and its preservation. What can you do? As demonstrated in the examples above, find a new interpretation of your goal or design. “Guidelines shouldn’t be closed,” Berkovitz suggests, “they should be dynamic.” Consider how you can use new styles to evolve your brand, or new technologies to engage your audience beyond the typical web browsers, social feeds and streaming platforms. 03. Nothing impresses digital creatives like physical, handmade designs. For a while now, we’ve seen the growth of online designs inspired by offline styles, such as handwriting fonts and cutout collages. At OFFF Barcelona, we met creators who have gone one step further by taking one step back, and who eschew digital tools in favor of get-your-hands-dirty, fully physical creation. For some of us, the handmade approach is nostalgic (flashback to Sesame Street and Wallace and Gromit). But for others—in particular, creators who were trained to use software and computers from the get-go—it’s a shifting mindset in favor of tactile production. Netherlands-based studios Studio Mals and Setreset Films specialize in stop motion animation and lift the hood on their handmade production process. Visit their websites or Instagram pages and you’ll see the craftsmanship that brings everything to life—from sewing and spraying, to assembling and hanging. At OFFF Barcelona 2024, the duo debuted a short film (and shared some behind-the-scenes shots) that excited us about what’s possible when we ditch trackpads for our bare hands. “When you see the handmade details and all the physical elements of the video’s entire process, you’re reminded of another way to create. Their process spanned multiple categories of creation: writing, sculpting, building, filming, editing and beyond. We were all really excited by their video,” recalls Berkovitz. What can you do? Look up from your screens and explore the offline world for inspiration, materials and techniques. What would you discover if you closed your laptop and began your next wireframe with pen and paper? What new color could you create by mixing paints instead of plugging in hex numbers? 04. It’s ok to use AI (as part of your process). Countless creative professionals are sharing their positive experiences about using AI as part of their workflow. But it’s important to remember that AI is a human-centric tool—it will only be as good as your prompts, and, as Berkovitz confirms, “it’s up to you [the designer] to add your own layers and influence” to create a fully formed design. Vincent Schwenk, a 3D artist from Hamburg, Germany, shared how he uses visual AI as a starting point and then takes the reins to develop his projects further. To date, Schwenk has been very transparent about his fascination and concerns with AI. On Instagram, he documents his experience using Midjourney to replicate his own designs—and the outcome is reassuring. The resulting images bear a resemblance to Schwenk’s work and can serve as a starting point for more development. But they are far from finished and lack the originality, spontaneity and depth of their original counterparts. Ultimately, AI does not compete or replace human creativity, it simply assists. What can you do? Try one of the myriad AI tools out there, whether it’s an AI tool for web design or AI for creativity and ideation. You can even build a custom GPT that you can use repeatedly. The bottom line is that these tools are here. They aren’t going to disappear, and even the most experienced creatives are using them for impressive results. Start now with AI tools on Wix Studio that generate website images, responsive layouts, SEO tags and more.

Couch versus sofa, soda versus pop, typeface versus font—they’re the same thing, right? Well, not all of them. Sure, the first two examples might be synonymous, but there’s a difference between typefaces and fonts: the latter is stylistic variation of the former. And while confusing the two terms won’t make or break the quality of your web design projects, it can be useful to know the difference (and the various classifications and styles of each). Not only will this help you stay on top of industry jargon, but it can help you to precisely articulate your creative vision to your colleagues and peers. With that in mind, let’s go over the differences between a typeface and a font, a brief history of both, and whether or not knowing this distinction really matters for web design. Typeface vs. font The words “typeface” and “font” are typically thought of as synonymous, but they actually refer to different things. While a typeface describes a particular style of lettering, a font refers to variations of a typeface, like its size and weight. The simplest way to understand this difference is that a typeface is a set of fonts with common aesthetic qualities. Let’s break this down even further. What is a typeface? Typically, what we refer to as a font is actually a typeface. That is, Times New Roman, Helvetica, and Arial are not actually fonts—they’re typefaces. Essentially, a typeface is the set of design features that characterize a particular style of lettering. This may include the presence (or lack) of a serif; the relative height, spacing and width of the letters; and any other aesthetic embellishments, like expressive swashes or tiny counters. There are several different type classifications, including: Serif typefaces These are typefaces that include serifs, which are slight projections added to the ends of a stroke. In web design, this style tends to evoke a sophisticated and timeless feel. Perhaps the most obvious example of a serif typeface is Times New Roman. Classic and readable (but, arguably, without much character), it was originally designed in 1932 for The Times of London newspaper. Today, it’s still widely used in printed newspapers and news websites. You’ve also seen it as the default font on some of the older versions of Microsoft Word. (Expressive type has also evolved a lot since then.) Of course, as a web designer, Times New Roman probably isn’t your go-to. Georgia is another serif typeface that has more character and charm. Inspired by Scotch Roman typefaces of the 1800s, it was invented by Matthew Carter in 1993. A particularly elegant serif typeface is Linotype Dido. Its delicate old world style makes it one of the best fonts for digital publications and blogs: Sans serif typefaces A second classification of typeface is the sans serif typeface. As the name suggests, these are styles without the tails at the end of a stroke. While this style started developing in the 1800s, it wasn’t widely used until the 1920s and 1930s, when the Bauhaus movement embraced the sans serif as a reaction to the more embellished Art Noveau typefaces. It continues to be popular because it’s refreshingly clean, minimalist and bare, with a more relaxed and casual feel than serifs. Especially on mobile websites (whether designed with responsive web design or adaptive design technologies)—sans serif typefaces prove to be easier to read when perusing on a small screen. Helvetica, originally designed in Switzerland in 1957, is one of the most well known sans serif typefaces. It’s widely used for printed materials, websites, signage and corporate branding. In fact, Helvetica is everywhere—it’s the typeface for the Target and American Airlines logos, BMW, and the New York City subway system. It’s even the subject of research in a documentary film (aptly titled Helvetica). Then there’s the iconic sans serif typeface Futura, which was invented in 1927 by German type designer Paul Renner. Also based on the Bauhaus movement, it was praised for its functional geometry and stripped-down style. The book Never Use Futura argues that the font never went out of style—and, in fact, has only gained momentum with each new generation. More on making the most of typography. Bite into the history of the squishy sans serifs making scrolling sweeter Typeset a mood with the spookiest type in pop culture, from 'Psycho' to 'Suspiria' Get in on the psychedelic design trend with these groovy typefaces Open Sans, based on an earlier Google typeface called Droid Sans, is another widely used sans serif typeface. In fact, it ranks among the most popular Google Fonts with more than 1.5 trillion views in a year. Script typefaces A third kind of typeface is the script typeface, which is designed to look like cursive handwriting. This category includes creative designs like Clattering, a carefree brushstroke typeface and Barcelony, an elegant signature-style script. Decorative typefaces These experimental typefaces are decorative and fun. Because they’re highly embellished, they’re ornamental rather than practical. As such, they’re better off used for titles and headers rather than body text. These include Morris Troy, an Art Nouveau-style typeface, and Outlaw, a design evocative of the Wild West. Didone This typeface classification is a genre of the serif typeface. Didones are marked by thin, unbracketed serifs, thick vertical strokes, a contrast of bold and delicate lines, and ball terminal endings on some of the letters. Originating in the late 18th century in France, didones became popular in the 19th and early 20th centuries for newspaper headlines and advertisements. Thanks to their contrasting weights and elegant curves, these typefaces are refined, attention-grabbing, and easily readable. A popular type of didone is the fat face, a kind of didone marked by an extremely bold design. Take Abril Fatface, for example, or Quiche Fine Black, another stunning didone typeface. This high contrast style evokes drama and sophistication: Old Style Before we move on to fonts, let’s discuss one more typeface classification—Old Style typefaces. These are characterized by curved strokes with an axis that inclines to the left, as well as subtle contrast between thick and thin lines. A classic typeface in this category is ITC Berkeley Old Style, designed by Frederic W. Goudy in 1938 for the University of California, Berkeley. Another old style typeface is Bembo, which was inspired by a printed travelogue by the Renaissance Italian writer Pietro Bembo. What is a font? So, if all the examples in the previous section are typefaces, then what’s a font? A font is just a more specific way of defining the kind of text you’re using. It hones in on both the size and weight of a typeface. Let’s look at the typeface Helvetica Neue as an example: As you can see, there are lots of variations of Helvetica Neue (each assigned a different number). Each line in the image above—Helvetica Neue 25 Ultra Light, Helvetica Neue 35 Ultra Thin, Helvetica Neue 45 Light, and so on—represents a different font. These eight fonts are distinct because of their different weights, but they all lie within the same typeface: Helvetica Neue. (More on font sizes here.) In this way, a typeface is a broader term that encompasses all the possible versions of that particular design—whether it’s large, small, italic, bold, expanded or condensed. Here’s a breakdown of the ways that fonts of the same typeface can vary from one another: Size You know how titles and headings tend to be larger than body text? Technically, that makes them different fonts, even when the typeface is identical. That’s right—Garamond 12 pt and Garamond 16 pt are two distinct fonts. Weight The example of Helvetica Neue shows how fonts can be different by virtue of their weights, even when the typeface is the same. That is, Helvetica Neue 12 pt Light is a different font from Helvetica Neue 12 pt Bold, with the latter having incrementally thicker strokes. Letterform width Spacing further highlights the difference between typefaces versus fonts. As a web designer, you can get creative with typefaces by expanding or condensing them (creating more or less space between each letter). When you squish the letters together, you’re compressing them. When you space them far apart, you’re expanding them. There’s a whole range of letterform widths: compressed, condensed, semi-condensed, narrow, normal, extended, extra extended, and expanded. Just like font weights, different widths indicate different fonts. Italics Likewise, characters that are italicized versus roman represent different fonts. That means when I write “Do you like pizza?” versus “Do you like pizza?”, I’m changing the font of the word “you.” Typeface vs. font: A brief history Most of the time people talk about fonts, they’re really talking about typefaces. This colloquialism didn’t emerge by chance. We can, in part, thank Microsoft for making “font” the more popular term of the two. Since the earliest versions of Word in the late 1980s, they’ve labeled their list of typefaces “fonts,” catapulting the term into everyday vernacular. But the history of typefaces versus fonts goes even further back than that. The distinction has its origins in the history of printing. The word “font” itself comes from the Middle French word “fonte” of the late 16th century. This word denoted the action or process of casting in metal. During this period, printers needed to cast complete sets of letters in metal in order to make a font. Fonts with a common design were called a typeface. This would include the capital and lowercase versions of that particular design, as well as different sizes or weights. As you may suspect, manual typesetting involved a bit more work than simply hitting the keyboard. Typesetters needed to line up the individual blocks letter by letter to form a page layout. Once their layout was complete, they’d roll it with ink and press it onto paper to make prints. You can imagine how something so tedious would require meticulous organization. To make the job quick and efficient, each font was placed in a separate metal case (the capital letter case was typically placed above or behind the small letter case, which is where the terms “uppercase” and “lowercase” originated). Think about how frustrating it would be if different sizes and widths were all jumbled together! For typesetters, knowing where different fonts were located was critical to success. When web typography emerged centuries later, the terminology remained the same even as the old technology disappeared. But these days, the distinction is a bit outdated, at least on a practical level. In the computing world, it’s easy to scale a typeface to obtain any font of that style. A click of the mouse is all you need to create new sizes, weights, and more, because all that data is automatically saved to your font file. Why does this matter as a web designer? That brings us to the inevitable question: Is the typeface versus font distinction actually important? Is it just an example of snooty academic jargon, or can it have a tangible impact on your work as a web designer? Thierry Blancpain, a designer, art director, and co-founder of the type studio Grilli Type, doesn’t think that knowing specific terminology is essential to producing great work. He explains, “Every single person in the room will know what you mean no matter if you call it a typeface or a font. In the few cases where the distinction is truly relevant and could lead to problems down the line, you can easily communicate that in other ways.” Of course, knowing the right words helps you communicate these concepts more clearly. It can also help you better understand your colleagues and avoid grinding the gears of linguistic purists. But as Blancpain notes, being able to articulate differences like size and weight is far more important than knowing the proper terms. “We do think that the designer caring about typography is a very important aspect for the quality of a website,” he adds. The verdict? Your own knowledge of type—and your ability to prioritize it as an integral part of the web design process—is far more critical than the language you use. Still, a little vocab now and then can’t hurt. Subscribe to the FWD newsletter for more stories from industry experts in your inbox.

Tick tock. Tick tock. Is time running out for TikTok? It wouldn't be the first time we thought so. The possible ban of the social video app is (yet again) sending ripples through government halls worldwide, including in the United States and Germany. (Not to mention in India and Nepal where the app has already been fully banned for some time.) An all-out ban on TikTok could lie ahead, and some marketers and agencies are concerned. “Our clients reached out in droves,” says Dana Neujahr, managing director at socially led creative agency We Are Social + Narrative. “[They] want to make sure they aren’t investing in a platform if it isn’t sustainable long-term.” Yet, Neujahr and many other creative professionals are not panicking. On the contrary,  many are taking steps to make the most of TikTok while it’s still relevant, and only plan on adjusting their strategies if and when a ban is finalized. Among them is Timipre Maxwell, CEO and founder of influencer marketing company Kreate. “[A potential ban] doesn’t affect us because as marketers we are trained to look for attention,” he says. “The attention on the platform is what builds your brand. So if [brands] aren't able to reach audiences on this specific platform, it only makes sense that they will filter across to others.” We spoke with Neujahr, Maxwell and other experts in brand management, social media campaigns and influencer marketing. Based on their analyses of the TikTok dilemma, we learned how—even now—brands and agencies can sustain and strengthen their content and creator strategies. Subscribe to the FWD newsletter for fresh stories each week. 01. Keep going on TikTok—it's probably not going away soon. There is broad agreement that any changes to the status quo will take more than half a year to take effect, and that an immediate shift away from marketing on TikTok is premature and risky. “This is a developing situation that could take months to resolve. Brands should continue to create planned and reactive organic content for TikTok.” - Dana Neujahr, managing director, We Are Social + Narrative “We're still closing deals on TikTok. And I think I would only stop if and when the ban is real. We’ll still continue with TikTok for our target countries that are not the U.S.” - Sarah Adam, head of partnerships and influencer marketing, Wix Studio “Despite a slight slowdown in TikTok user growth YoY, it still hosts more than half of the U.S. population. [Now is] an opportunity for brands to capitalize on the transition period, by maintaining a presence on TikTok while others preemptively retreat. During this time, brands have an opportunity to secure a larger share of the audience and reach active users.” - Norel Mancuso, chief executive officer, Social House, Inc. “A brand has to keep posting on TikTok. You have to ignore everything that's going on and stay relevant because, at the end of the day, TikTok is still the platform that has the most attention on social [media] right now. You can't pull your content from this platform before [it is] banned because you would put yourself at a disadvantage.” - Timipre Maxwell, CEO and founder, Kreate The bottom line: Keep going with your TikTok activities. Create new content, engage with your audience and connect your fans to your other platforms. Use these next few months to gather insights—“It could also be an opportunity to understand who [your] engaged TikTok audiences are across brands and start to show up to those audiences in the other places they’re spending their time on social media,” notes Neujahr. 02. Get your footing across all the other content platforms. Even if TikTok is the preferred app of your target audience, it’s not the only place they’re consuming content. Established platforms are already making moves to grab their attention—like LinkedIn, which is already testing a new video feed—and it’s prime time for new platforms to swoop in and claim TikTok’s space. “A well-rounded approach to reaching audiences and communities across the right social platforms will almost always benefit brands more than going all in on only one platform.” - Dana Neujahr “It’s important to have a cross-channel plan. Target audiences use several platforms, so we need to meet them where they are and not be focused only on one. Don't have all your eggs in one basket.” - Sarah Adam “In the months following TikTok's ban in India, several Indian copycat apps emerged offering short-form video feeds, while Instagram and YouTube launched new short-form video functionality. What emerged from this was growth for Instagram and YouTube in the Indian market. It would be safe to assume that much of the spillover in brand advertising dollars would be reallocated to these American-based platforms.” - Norel Mancuso “Brands have an opportunity to branch out of the current trend of short videos and complement with platforms for live streaming that, although not new, continue to garner consistent viewership and usually help creators consolidate a more loyal audience. This can be on Twitch and Kick, for example.” - Alejandra Thomas, software engineer and content creator, @pikacodes (IG / X / TT) The bottom line: Strengthen your presence on platforms like Instagram, YouTube and X (formerly Twitter). Revisit Snapchat. Explore Reddit, Twitch or Kick. Be poised to greet your target audience wherever they end up next. 03. Develop your storytelling for long-term gains. Since TikTok launched globally in 2017, brands have constantly raced to "win" on the platform. But to maximize engagement or drive sales, brands have often relied on tricks and gimmicks—or in Mancuso's words, "‘viral’ trends and challenges"—at the expense of a deeper audience connection. So, in the days after TikTok, what will happen to the fanbase you built? What's the compelling, insightful narrative that keeps your fans engaged no matter the platform or creative format you use? “[The ban] may lead to the emergence of platforms emphasizing authentic engagement and community connections versus ‘viral’ trends and challenges, fostering new types of content creation.” - Norel Mancuso “With so many brands—big and small—taking a social-first approach to marketing, it is more important than ever to remember that social moves at the speed of culture, and is often driven by consumer behavior and sentiment. [Plan] for the unplanned by having a clear social north star, defined brand personality and strong understanding of the audiences and communities you want to reach.” - Dana Neujahr “Storytelling is the key to making connections. It makes your audience look forward to those videos just as much as the rest because the storytelling is just as enthralling.” - Alejandra Thomas “The only way as a brand to have success and to stay at the forefront of consumers’ minds over the next decade is to expand media reach and create really great, engaging content. You are competing with Netflix, Hulu and Disney+ right now.” - Timipre Maxwell The bottom line: Work with your teams or clients to create a brand storyline that goes deeper than the product. Use this to create content that users seek out beyond their app feeds. Looking for inspiration? Maxwell suggests Pretty Little Thing and Foot Asylum as brands who lead by example, with long-form content series that indulge their target audience’s entertainment needs over the brand’s sales needs. It’s a sure stamp of success that each long-form video exceeds 1 million views. 04. Prioritize channels that you can truly own. Previously, social platforms (like TikTok) were considered “owned” channels—the owner (i.e., the brand) controlled the content, the conversation and the experience. Algorithms—and now regulatory requirements—have upended that, making it essential for creators to update their mix of channels. “What a brand needs to be doing now is actually building community…that you can move to a third party place like a Discord, for example. So, if TikTok does get banned, you are now sending people from this platform to an owned community [where] you can push your content on [any] platform.” - Timipre Maxwell “Imagine you can involve an influencer to take over your newsletter, to host a webinar, to speak at your conference or run a workshop. There are endless things you could do on your own platforms.” - Sarah Adam The bottom line: Invest in channels and assets you can directly own—your content, your distribution, your data and your audience. Email marketing, forums on your domain and online events are just a few ways brands can build community and share content entirely on their own terms. 05. Take risks. Many of the best practices we follow today would’ve sounded preposterous 10 years ago—for example, it would’ve sounded ludicrous to put branded content creation in the hands of someone outside of the company and with minimal oversight. But the only reason it’s the status quo today is because someone before us took that risk and it paid off. “This could be an opportunity for creative agencies to use a test and learn approach to platforms that they’ve never activated on before.” - Dana Neujahr “Platforms aren't immune to regulatory challenges, highlighting the need to diversify and capitalize on emerging platforms early on. Exploring alternative avenues ensures that your brand will remain ahead of the curve to maximize reach.” - Norel Mancuso “The most successful brands are open-minded.” - Timipre Maxwell “[Brands should] take that chance and let influencers do what they do best. Brands interfere too much in the creative process and that's a mistake. Because it’s about letting go. It's a lot of risk-taking.” - Sarah Adam “I am all for brands taking creative risks—it's how trends get started! Risks in content creation help bring in new audiences and get them talking about your brand.” - Alejandra Thomas The bottom line: Find something your brand is doing routinely and comfortably—and now turn it on its head. As you develop content, find ways to deliver the unexpected. Whether you’re experimenting with a new content format, distribution channel or creative execution, ask yourself if what you’re creating has stopping power. Luxury fashion accessories brand Alexis Bittar has a feed full of atypical luxury content: rough shots, damaged clothing, hidden merchandise and no sales call-to-action. And yet, videos like the one below are reaching over 200K views on Instagram and over 700K views on TikTok. It pays off to take a risk.

When OpenAI unveiled its GPT Store, it had high hopes. The store would allow anyone to discover and share custom chatbots (called “GPTs”) built with OpenAI’s generative AI tech. But just two months after its launch, TechCrunch raised a flag: the GPT Store was littered with spam. The store “is flooded with bizarre, potentially copyright-infringing GPTs that imply a light touch where it concerns OpenAI’s moderation efforts…[and that] serve as little more than funnels to third-party paid services,” TechCrunch reported. This begged the question—can you trust what’s offered in the GPT Store? More importantly, instead of borrowing someone else’s invention, should you just create your own? Jacob Cass, founder of branding and design consultancy JUST Creative, is a proponent of building your own GPT. “I know that it’s not for everyone and a lot of people are intimidated by it,” says Cass about how some creative professionals perceive AI tools. “But once people are shown how it's done, they're like, ‘Oh, I get it now!’ Something clicks.” To date, Cass has authored various GPTs—for his own use and available to all on ChatGPT-4—to help with everything from creating visual mood boards to blog posts. In his own words, Cass shares more about his experience with GPTs and how to go about creating your own. How did you first get started with GPTs? Jacob Cass: I'm a pretty early adopter of new technology: crypto, Web3 and NFTs. I have a bit of a “shiny object syndrome.” I love exploring new things and experimenting to see how they can influence or impact my career. AI has just blown my mind. Now, it's much more accessible and it's moving at such an incredible pace. It's hard to keep up. At heart, I'm a designer and am classically trained in visual communication. And as someone specializing in branding, marketing and content creation, I wanted to create a bot that specialized in those areas. So, I created a custom GPT and trained it on those subjects and on some of my own materials—ebooks, articles and so forth—so it could understand my point of view. How do you use custom GPTs in your workflow? Jacob Cass: I've created a number of different GPTs (or I prefer the word “bots”) to serve my creative practice: A brand bot: An ideation tool for branding, marketing, design and strategy, like customer personas. A mood board maker: It outputs mood boards or stylescapes and has things like fonts, colors, photography, art direction, color palettes and so forth in an image. In the past, you'd have to scour books, Pinterest, the web, blogs and so forth, and it could take a long time. But [using this bot,] you input some of the characteristics you're looking for and it can generate it on the fly. A minimal logo bot: For simple and versatile logos that send a clear message don’t combine too many things into one. I trained it to just do black and white. A packaging mockup bot: When we're sending things to a client or we're trying to communicate an idea how things integrate together, like fonts, colors and a 3d tangible item, you want to be able to see how it looks and feels, so you can literally type in. You create a 3D, very realistic photo of it in seconds. How do these custom GPTs help you in your creative work? Jacob Cass: Productivity has been supercharged. They’ve sped up my workflow incredibly. You write your inputs and instantly get what you need so you don't have to search for it. Why a custom GPT and not an existing, specialized GPT from the store? Jacob Cass: Well, first off, is [a custom GPT] needed? Is there something else out there that could serve this purpose already? Look in the GPT Store and see if [an existing GPT] works for your particular scenario. I start by using their suggested default prompts. If it doesn't work, then experiment a bit further and decide to move on or not. [GPTs are] built on an amazing large language model. So you're standing on the shoulders of giants, really. They've made it extremely easy to create your own GPT, which is both a blessing and a curse, because there's a lot of trash out there and you don't know what's good or not. As a designer, I felt [public GPTs] were limited and they weren't trained to my style, my aesthetic and what I wanted. So that's why I went and created my own. What is the trade-off between creating on your own from the ground up and using a GPT? Jacob Cass: In general with GPTs, there are some downfalls because you don't have as much control. But for ideation, this is where I see the biggest benefit. You can input your thoughts and you get an output very quickly. Once you know how, it's a matter of putting in the right prompts and the right variables. For anyone creating GPTs (both first-timers or even repeat creators), what guidelines should they follow for the best results? Jacob Cass: Upload training and onboarding material: See if you can create your own GPT with the variables that you want. Upload the data that you want it to use. [For my custom logo bot,] I gave it variables of how it should work and what the output should be: simple, minimal, clean, geometric. This is my style and my aesthetic, and what I think makes a really strong logo.For better outputs, you definitely should train it and say how it should act. I trained it to act in a conversational, inspiring and engaging way to make it a bit more fun. I trained it to ask a question back, for example, if it needs more variables to provide a better output. So this way it gets more information out of the user. Experiment: Try different prompts, and ask it to do different things. You see the results and then you know what’s working or not. Tell the AI to simulate a persona: [Give] a direction of who [the bot] should be acting like—[who] you’re pulling information for and you will get better results. [Tell it to] act, for example, as a marketing expert. Write your task and outline the task steps. If you give it more variables, it will give you a better output. Let's say, create ten taglines and each should be two to six words. Give it context, such as the product’s core selling point. Give it a goal, or describe what the task needs to achieve. Describe the output. What does the output look like? For example, the output should be a bullet point list. Be mindful when instructing the AI to “do” vs. “don’t” do something. I have found that bots don’t listen very well to things like “do not.” It's better if you train it on how to do things versus not doing things. Share your bot with others and get feedback. A lot of people have been using [my] Brand Bot and I've received output of how people are using it. How should we determine where in our workflows to integrate GPTs? Jacob Cass: What you really need to figure out is where ChatGPT or custom GPTs can make your processes more efficient or more effective—and then reverse engineer that. I’ve found so many uses for it. For me, it’s not just for design or strategy. There are so many other aspects; I’m not a developer but I’ve used it to generate code. I’ve used it for SEO, articles and content creation. It's about experimenting to see where it can be used, and then trying it because you learn and then you can improve it. How should professionals decide which AI tools to use? Jacob Cass: It’s about understanding what you're trying to do and finding the right tool to do it. You cannot access or create custom GPTs without the paid version [of ChatGPT] and I’ve definitely noticed a difference in the output from [ChatGPT-] 3.5 to 4. The image creation feature is a paid feature, but you can get around that paid feature by using the same image creation model on Bing. There are other tools out there that give you more flexibility and customization versus ChatGPT or Midjourney. You should also consider where you draw the line in the sand regarding ethics. For example, Adobe Firefly has been modeled on their own stock photography and not scraped from the web, so that could be a better choice for some creatives. But then Adobe has also used its whole library and the people that have contributed their images weren't paid for their contributions, so where do you personally draw this ethical line? How are you communicating with clients about your use of GPTs for their projects? Jacob Cass: When it comes to using AI-generated artwork, I find the output is kind of like the new stock photo so I haven't used it [as final imagery] in any client projects. It's more for the ideation process. It hasn't got to a point where I can get final images for a website that I'd be happy with. [Recently,] I was in a [client] workshop and we had a document that they had worked on in the past, with their mission and vision, and it was all in Italian. So, I uploaded this [into ChatGPT] to translate and summarize, told it to act as a branding professional, and to provide core values and a description of each one. We got some great results, and the client and I were blown away. But before I did any of this, I did ask my client, are you okay if we experiment with AI for this process? What type of industry backlash have you seen about GPTs and AI tools? Jacob Cass: Firstly, there are brands that try to get away with [using AI discreetly], and then there's backlash. BMW did a Christmas ad with reindeer, but one of them had a fifth leg. Plus, I've lost a ton of followers and subscribers because I talk up AI, and there are illustrators, artists and photographers out there that just can't wrap their heads around it. They're in denial about AI, and [worry it’s] going to take their jobs. I think AI is like horses before cars—you have to embrace it and use it because it's not going anywhere. It's the way things are going. What do you see next for AI tools in the creative industry? Jacob Cass: AI video is crazy. What I find fascinating is the storytellers, the creative directors and the producers—and how they put together the angles, the shots and the art direction to tell a better story. They can control the AI better because they know what makes a good story and video. That’s really only possible if you have the knowledge and theory beforehand. It’s AI plus humans. That’s what it comes down to, not just AI. Subscribe to the FWD newsletter for more stories from industry experts in your inbox.

Typography can make or break your web design. Alongside identifying the best fonts for your website, it’s also vital to pick the right font sizes. The size of your font can create contrast and help users focus on your key message. However, one size does not fit all. The websites you design are viewed on all sorts of different browsers and viewport sizes: laptops, tablets, TVs, smartphones — maybe even smartwatches. You therefore need to consider your font size carefully, and here’s what to keep in mind. Font size in web design Fonts can be sized in a number of different ways on the web: Pixel (px) Point (pt) em: The font size is relative to the parent container’s font size. Root em (rem): The font size inherits from the root of the styling. Percentage (%) Viewport width or height (vw or vh) Centimeter (cm) Millimetre (mm) Inch (in) In most cases, you should avoid absolute measurements like cm, mm, in and pt for web designs as they will look different on every device. Pixel is somewhat of an absolute size, as it is based on the pixel size of the user’s screen. However, using px for font sizing is quite a common practice and most web browsers are equipped to make your design look similar across different resolutions even when using px. It’s also a very easy unit to use when considering the collaboration between design teams who would typically design by pixel. Another option is to utilize em and rem. em inherits its size from its parent, while rem inherits from the root styling (hence, why it’s named root em). The default font size in all browsers tends to be approximately 16 pixels. A common practice is to set the root font-size to 62.5%, which translates the default 16px to approximately 10px. We do this to make the mental conversion of the font size easier when using em or rem (e.g. 1 rem = approx. 10 pixels, while 1.8 rem = approx. 18 pixels). This is a handy approach for two reasons: The mental conversion between pixels and rem is easy to calculate in your head. A user can change their preferred default font size and the website would adjust automatically to suit their needs. Now, the next thing to consider is that font-sizes need to be different across different devices. On a desktop monitor there is more room and so fonts can (and should) be larger, while on mobile the screen is smaller so the font size should be decreased so all the text can fit on the page. In CSS, we do this with media queries. For example, we can set a default font size for a h1 element to 3.5 rem. This might look great on desktop, but on mobile it would be way too big. Therefore we could have a media query like: h1 { font-size: 3.5rem; } @media only screen and (max-width: 400px) { h1 { font-size: 2rem; } } This would adjust the font sizes appropriately for a mobile viewport (assuming 400px is the width of the mobile). Even after all this tweaking you may be looking at your screen and thinking: this font looks smaller, or larger, than it should be. This is due to how digital typefaces are designed. Different fonts’ ascenders and descenders generally vary from typeface to typeface, which may make them seem like their proportions are different. (You should , too.) More on making the most of typography. Bite into the history of the squishy sans serifs making scrolling sweeter Typeset a mood with the spookiest type in pop culture, from 'Psycho' to 'Suspiria' Get in on the psychedelic design trend with these groovy typefaces Make online feel offline with one of these handwriting fonts Establish a baseline: Know the difference between typefaces and fonts Optimal font sizes for desktop There are no exact rules for font sizing, but there are some generally good practices to think about when designing for desktop: Body text - Font sizes should be around 16px to 18px for legibility (or 1.6rem to 1.8rem using our sizing rules mentioned above). Keep in mind that more expressive typefaces may be less legible, so if you can afford to go a bit larger, then, even 21px can be pleasant to read. Headings - The headings should be around 1.96 times larger than your body text to create a sufficient contrast. This would mean that if you use 18px for body font size, then you would use around 35px for headings. Expressive or experimental type type generally works best here, since the larger size makes it more legible. Subheadings - These should be slightly smaller than heading size, with some adjustments like less weight to create a contrast between the two. For example, if we used 35px for the heading, we should use around 30px for the subheading. Input fields - These should closely match the body text’s rules. Optimal font sizes for mobile On mobile, you have less room to display your content. Additionally, users typically hold the devices closer to their eyes than they would a laptop or desktop screen - which means your typefaces can (and should) be smaller than on desktop: Body text - Font sizes should be at least 16px for body text. In some cases, you may be able to go smaller (for example. if a typeface has unusually large characters or you are using uppercase letters), with 14px being the smallest you should go. For context, Google’s Material Design uses a minimum suggestion of 14px for their secondary font size, while Apple’s guidelines use 15px for theirs. Headings - Headings should be around 1.3 times larger than your body text to create a sufficient contrast. This would mean if you use 16px for body font size, then you would use ~21px. This is scaled down from the 3.5rem we used on desktop. Subheadings - Here too, these would often be scaled down from the heading size, but we have a slight issue here in which the subheading may look too similar to the body font size. For this reason, some designers choose to make the subheading visually different through the use of weight, formatting like italics and letter spacing. If we used 21px for a heading, we might choose 18px or 16px for a subheading, but with lighter weight than the heading or body text. Input fields - These should closely match the body text’s rules. Responsive font sizes on Wix Studio Wix Studio allows you to create scalable, fluid text adjustments through different breakpoints like desktop, mobile and more. Using the text editor, you can set a minimum and maximum font size for any text element. For example, you could set the maximum font size for a heading to 35 and the minimum to 21 on desktop. This will ensure your text will scale smoothly as you resize the screen. The maximum font size remains relative to the 1920px screen width reference point on Wix Studio, while the minimum font size is relative to the 320px screen width point. You can also set the text to scale between different ranges for different breakpoints and even create custom breakpoints according to your needs, in order to make your website typography fully responsive. Build your website with Responsive AI on Wix Studio.

Clients want to increase their search traffic, and an SEO-driven content strategy is just the thing they need to do it. But how should you frame your SEO proposal? And how much should you charge for your services? The Wix SEO Hub has a few ideas. Listen to experts walk through their SEO experiences (and what you can learn from them) in this podcast The SERPs Up podcast, hosted by Mordy Oberstein, Wix’s Head of SEO Brand and Crystal Carter, Wix’s Head of SEO Communications, is your weekly series of search engine optimization insights. Each episode features a guest SEO expert who shares their real world experience on the episode’s topic, including opportunities, roadblocks and how they overcame certain challenges. Check out these episodes to learn more about marketing your SEO services: Building the processes for marketing agency efficiency Creating effective marketing processes is one of the biggest challenges for any digital marketing agency. Here’s how to get your SEO & content operations right to drive client success. Does AI content rank? It’s no secret that AI is unlocking new opportunities for content marketing, but does AI-driven content top the SERP? Here’s what to tell your clients when considering whether or not to integrate AI into their content strategy. Read about SEO pricing, proposals and brief strategies below The SEO Hub captures a variety of experts’ takes such as Gus Pelogia, Giuseppe Caltabiano and Ray Martinez on SEO basics, advanced SEO, strategies, topic research, on-site optimization, analytics & reporting, Wix SEO Tools and localized SEO. It’s curated for all proficiency levels, whether you’re starting your first project or hitting new milestones in total clients serviced. SEO agency pricing blueprint: Define your pricing and protect your margins As generative AI and new developments disrupt the SEO industry, agencies must be proactive to protect their margins and ensure they stay in business. Price your work in a way that serves both you and your clients. Create SEO proposals that get approved: Pitching big initiatives to clients and stakeholders More complex projects often require buy-in from multiple stakeholders. Mitigate push-back by writing SEO proposals that correctly size the opportunity, consider what the project would look like as an MVP, and pinpoint where you might incur technical debt, among other considerations. Create SEO proposals that win over your dream clients. How to craft the perfect SEO content brief: The elements you need to include SEO content briefs ensure that your client’s content is not only compelling and relevant to their audience, but is also optimized for search. The recipe calls for a number of ingredients including CTA strategies, internal linking and keyword research. Craft an SEO content brief complete with all the elements that'll help you and your clients' content top the SERP.

Web design is transforming at a rapid pace, thanks to the ongoing integration of tech’s newest powerplayer: AI. AI web design tools are now an active part of agency work processes: generating copy, images, code and even full-on websites. So if you want to keep your finger on the pulse, it's vital to gain a baseline understanding of how you can use AI as a web designer. This article explains how to use AI tools to assist your web design process so you can test them out for yourself and weigh their pros and cons of each. You’ll also learn how to create a website using AI tools, like the image generators Midjourney and Dalle-3, and chatbots ChatGPT and Claude. Is AI going to take over web design? Much like all other creative avenues agencies work in, web design is undergoing a major transformation. As agencies reimagine their strategies to play to this changing landscape, they’re asking important questions, like, “Where does this leave humans?” The truth is that AI is a tool, and our tools change all the time. With new tools come new skills however. While computers will certainly take over much of the rote design and development work agencies are still used to doing currently, human creativity and contextual understanding will still be required to build high quality web experiences that delight clients. Can I design a website using AI? Though it’s not the end all be all, AI can definitely put together an initial layout for your website, down to the content and copy. Wix Studio offers a range of functionality to transform how agencies build sites for their clients. Supercharge your productivity with AI-powered tools: speed up workflows, innovate faster, ship code, create images and enhance your website all with the power of artificial intelligence. Using an AI website builder to design a website with AI & what to look for Consider the following factors when considering which AI website builder you’d like to use: Is the builder flexible? Can you further customize options to align with the specific needs and branding requirements of the project? Does the platform work by leveraging robust analytics capabilities? Are you able to see website performance, user engagement, and conversion rates? How well do the AI-generated web designs integrate with other tools and platforms, such as e-commerce solutions and social media platforms? How much customer support, documentation, and community resources are available for troubleshooting when you get stuck? By looking out for these various aspects in the web design process, agencies can determine which AI website builder to leverage for the best outcomes. How is AI used in web design? Suggesting web design ideas Assisting with user research Generating imagery Generating videos Generating real copy Writing code AI tools have swiftly pushed the boundaries of web design, providing designers with a slew of capabilities they can use to streamline agency work processes and elevate the creative process. Here are a few ways to use AI. 01. Suggesting web design ideas. AI can help designers overcome creative block. You’ve no doubt heard about ChatGPT, a sophisticated generative AI chatbot that accepts text as input and generates the output based on it. You can ask ChatGPT something like "Suggest ideas for a promo page that sells shoes," and it will generate a list of ideas to work from. You can also ask follow-up questions to get a more relevant answer to your questions. If you don't like the ideas the tool generated for you, say something like, "Give me five more ideas," and the tool will generate them for you. As founder and strategist Zoe Scaman tweeted, a great use of these kinds of AI tools in strategy work “is to get the obvious, clichéd and overused angles out of the way, fast. That way you can concentrate on unexplored and unique ways into an idea.” 02. Assisting with user research. The better you understand the needs of your target audience, the higher the chance of creating the right design for them. Most web professionals understand the value of user research, but sometimes, strict deadlines and budgeting limitations prevent the team from actually conducting it in a robust way. In fact, 80% of researchers think their company could stand to do more research, according to a 2020 study. AI tools can be used for initial research on the target audience. For example, if you’re building a website that sells shoes, you can input a prompt like, “Generate a customer persona who buys sports sneakers with orthotic insoles,” to learn more about this category of users. But don’t use this data without varying it first, and always fact-check the output information through multiple reliable sources to ensure that it is accurate. The tools can also assist with in-depth analysis of existing analytics data about your customers. Simply export analytics data from tools like Google Analytics or Hotjar as a file, submit it to ChatGPT or Claude, a sophisticated AI chatbot created by the company Anthropic, as a file and ask questions about your users. 03. Generating imagery. It goes without saying that images help to reinforce the idea your client wants to communicate in text. No wonder designers constantly look for the right images when they create websites. Subscriptions to stock photo banks like Stocksy have been popular for a while, but let’s be real, we can all spot those photos of happy coworkers in generic workplaces from a mile away at this point. Now, Midjourney, Dalle-3 and Wix Studio (with an Open AI-powered image generator in the editor itself) can generate tailored visuals web designers can use instead, based on the text prompt you provide. You can choose from a variety of image styles to refine the result. It’s worth noting that while these tools are great at generating abstract backgrounds, they have some downsides when it comes to portraying humans: they might add extra fingers to human hands, extra legs and incorrect properties. So AI-generated images still require a human touch (and review). Generated images can be convenient during the design process, but AI tools can’t beat human artists when it comes to creating truly unique images for a client. If you have the time and budget, you should of course still consider working with seasoned photographers and CG artists. They bring a bespoke approach and their own visual style to a brand identity. Plus, they can elevate your website through the professional association and audience reach. It's important to mention that the US Copyright Law stated that images generated by AI tools like Midjourney are not “works of authorship” because they have no human authors. In other words, images created by AI alone are not protected by copyright because they belong to the public domain. 04. Generating videos. Pikalabs and Runway Gen-2 are two AI tools that can generate videos based on either a text prompt or static image. (Wix Studio AI will have this capability soon.) Video AI web design tools are particularly useful because they quickly add visual interest and a hi-fi feel to your client’s site: use them  to create a video background for a landing page or turn a static photo of your client’s product into a video preview. Similar to Midjourney and Dalle-3, you can fine-tune output results by refining the text prompt, adding essential details or introducing visual effects (such as camera movement or zoom-in). 05. Generating real copy. Instead of using Lorem Ipsum text, web designers can ask OpenAI’s ChatGPT, Claude or Google Bard to generate text by entering a prompt relevant to your client needs, like "write key features of the mid-range sports shoes for recreational trail running." Since the prompts are open-ended, these standalone copy generation tools best serve more in-depth or length copy needs. You can prompt them to generate just about any kind of copy (which you’ll then need to refine to your client brand tone and fact-check). If you have more specific website copy needs, you can avoid toggling between tabs completely by using Wix Studio’s ChatGPT-powered text creator. It’s right in the editor, so you just need to navigate to the text box you want to use and click “create AI text.” Instead of writing an open-ended prompt, you answer a few specific questions, like your client’s business type and name, the topic (like “welcome,” “product description” or “team intro”) and a few must-have details you need included in the text. It’ll produce a few options, and once you select one, you can see the copy in situ right away. Of course, from a design strategy POV, you might still prefer generic Lorem ipsum filler copy, like designer and partner at the digital consulting firm Autogram Karen McGrane. From McGrane’s experience, clients tune Lorem ipsum text out more easily, allowing them to “focus on the conversation about the design.” But it’s really personal preference—having realistic copy can also be super important to the web design process, if you find the copy to be helpful rather than distracting. Real copy can allow you to adequately align content blocks and create a more relevant visual hierarchy of the page. Use Wix's AI text creator to generate website copy. 06. Writing code. AI code generators are super helpful when you’re in need of a fresh approach, when you just can’t figure out what’s gone wrong in the code or when you need a custom element in a pinch. There are a few tools to try here. First, keep your design process super fluid and generate code snippets in-editor with Wix Studio’s AI code generator. Alternatively, platforms like ChatGPT, GitHub’s Copilot and Claude can also generate decent code samples for individual web elements like input forms. The great thing about these tools is that they explain the rationale about the code they provide, making it easier for web professionals to improve their coding skills. But similar to imagery, the code samples generated by AI also require moderation and refinement. The great thing about Claude and ChatGPT is that you can submit the code they generate and ask them to validate it and fix errors. You can use this approach for the code you write and the code the tools generate for you, but it doesn’t work for some reason. How to create a website using AI tools The most straightforward way to do this is using a web design platform like Wix Studio, which is Wix's premium platform for professional designers that offers in-editor AI tools. If you don't need the advanced design and coding capabilities provided within Wix Studio, you can use an all-in-one AI website builder. Otherwise, creating a website using AI tools will require three additional steps before getting into the editor itself: generating a structure for the page using Midjourney; then generating content using ChatGPT, and lastly, combining design and content together into a web layout. 01. Creating a layout for the web page You can use AI to create a layout for your future page in high fidelity. If you’re using Midjourney, you need to type the command "/imagine [what you want to see]" in a chat. You can provide a prompt like "/imagine a beautiful website for shoes" to see AI-generated web design for a shoes website. As you can see, Midjourney was able to generate a few variants of the hero section for us. Some are more usable than others. (You can also start with one of Wix Studio’s professional-grade templates, and then adjust sections to be instantly responsive and fit all screen sizes by using the editor’s responsive AI capability.) There are a few tricks to keep in mind. The better you articulate your intention in a prompt, the better the tool’s chances of generating the right visualization in response. When creating a design for the client website, it's better to explicitly mention keywords like "UX" and "UI" in the prompt so that the tool can understand that you want to see a web layout. /imagine modern website for shoes, ui, ux, ui/ux” You can also add visual references with the text prompt. For instance, say you find a web design that you like Pinterest, Dribbble or Behance. You can add it as an input signal to Midjourney along with your text prompt. The tool will match text prompts to the image you've added and will be more likely to generate a relevant image. But, there’s a caveat: sometimes generative AI tools create a very close copy of the image you provide as a reference, so it's important to moderate the output the system provides in order to avoid copying other designer’s work—and its potential legal implications. There are a few keywords you can add to your prompt to receive a higher-quality visual design that’s close to your specific needs. For example, you can add the keywords "HQ" and "4K" to your prompt, and the tool will understand that you want to see high-quality visualization of web layout: /imagine beautiful website for shoes, ui, ux, ui/ux, HQ, 4K” Midjourney has a few critical downsides. The tool often adds visual noise to the images, like additional, unnecessary graphic details (like those extra fingers referenced earlier, or extra decorative details on the background). So, before using this output in web design, you’ll likely need to polish it a bit in a photo editor. 02. Writing content for the website It goes without saying that well-crafted copy directly impacts how visitors perceive your site design. As mentioned in the AI copy generation section above, web designers often use placeholder text instead of the actual copy when working on a layout, but Wix’s ChatGPT-powered AI text creator (and other AI tools like it) offer a new alternative by producing AI-generated website content instead. ChatGPT can be used for a lot of tasks you’d rather not do yourself, like writing marketing copy, product descriptions and even the copy for an entire web page. (Though you’re going to want to give that copy a once over and make it your own.) I’ve used ChatGPT to generate content for an entire landing page, including error and success messages for visitors’ actions. Even though I had to validate the copy and sometimes rework it, using an AI tool was a net positive because it improved my overall project efficiency and sped up my design process. Again, the better you articulate your intention in the prompt, the more relevant the response will be to your AI web design. You need to specify enough detail so the tool understands exactly what you want to see. For instance, you could enter a prompt like, "Provide content for the landing page that promotes sports shoes. Content for hero and product features section." As you see, the sections we mentioned in our prompt match the sections we have in the design generated by Midjourney. ChatGPT tends to generate long text, so you’ll likely need to adjust its output before adding it to your actual design. But remember that you have control over the AI. If you want to see text up to 100 words, simply write a prompt like “Write for the hero section in under 100 words and content for the product features section in under 80 words” to give ChatGPT clear instructions for the content length. You can also ask follow-up questions to receive more relevant responses. Suppose the tool generates text for the call to action button, and you don't like it. You can create a follow-up prompt to get the tool to generate copy alternatives that are closer to what you had in mind, like, "generate a few more examples of text for a call to action button." You can also generate text for individual sections and text boxes, using Wix Studio’s in-editor text creator. 03. Turning your design into a fully functioning website Once you have the page layout and content, you can use them as references to create the fully functioning version of your website. Refer to your AI-produced layout like you would a drafted layout in Figma, and build your site out accordingly. Then paste the AI-generated copy (which you edited and fact-checked) where applicable. And once you’ve defined the structure of your page, you can then copy and paste visual elements, like images of shoes generated by Midjourney, and fill out content blocks with the text generated by ChatGPT. The role of AI tools in web design process A lot of people in the design world are concerned about AI tools, and whether or not AI will replace graphic designers. There is some reason to be. AI tools are causing the line between creating and copying to blur. Ever since 2023, the first full year of many of these AI tools’ existence, creatives have also been filing class-action lawsuits against them, alleging they used artist images scraped from the internet to train their tools without their consent. Some influencers are positioning the tech as a way to get rich quick, selling its potential quantity of output in lieu of dependable quality. The tech has led to misinformation and online content farms. And in some instances, clients are in fact opting for AI tools rather than hiring creatives, as recently happened to UK-based Studio AAA. So, is AI generated web design the future of the web? Not without the designers who build it.  Used responsibly, the primary objective of AI web design tools is not to replace people with robots, but to improve the efficiency of the person who uses them. In theory, artificial intelligence tools could free up web designers from routine operations, like writing realistic copy, to give them more time to experiment with design and find unconventional solutions. Some studios, like Ogilvy Paris, use the tools to jump start creative campaigns. Web designers who use AI tools will likely have a significant competitive advantage over other designers, because they will be able to go from ideation to final design much faster. Ultimately, AI web design is about co-creation—not co-opting.

Low-code no-code development platforms forever changed the way people and businesses create online tools. While software development was once the exclusive domain of programmers and developers, now anyone – including designers, content creators, and business owners – can build websites and apps of their own. (See: Strategies to scale your agency faster with no-code/low-code solutions). With Statista forecasting the global low-code no-code market revenue to reach 65 billion dollars in 2027 (as compared to its 13 billion dollars valuation in 2020), and Gartner predicting that 70% of new applications developed by enterprises will use low-code no-code technologies by 2025, it’s evident that low-code no-code isn’t just the domain of DIYers, but web design professionals and agencies, too. And low-code no-code tools are already ubiquitous; it’s up to agencies to determine which tool works best for them and how to integrate it into their processes. In this article, we’re going to take a closer look at no-code low-code development, its benefits, as well as the reasons for its rapid emergence in the digital creation space. We’re also providing a list of the top 10 low-code and no-code tools so that you can try this trend yourself. What is low-code no-code application development? Low-code and no-code platforms like Wix Studio enable programmers and non-programmers alike to create websites, apps, and other software without writing code. What is no-code web development? In the no-code space, people can create fully functional platforms without any programming knowledge at all. Before low code no code capabilities were around, creating and designing a website seemed like a long shot for a lot of people (unless creative coding is your thing). Now, however, these tools have democratized a space that was once dominated by developers. Whether people specialize in tech, real estate, wellness or somewhere in between, they can now create their own websites without relying on a programmer. Likewise, web designers can focus on the visual element of website building, without needing to learn coding first. What is low-code web development? The low-code space is similar, enabling the creation of more advanced applications with minimal coding, think: AI code generation and visual programming. Tools like Wix Studio make use of drag-and-drop building blocks and templates to create websites and apps. The code is still there–it’s just prearranged into bite-sized visual elements that creators can use to start designing right away. While developers will always have a role in creating the code that underlies every feature, anyone can piece together these features themselves. This means you still get the functionality of HTML5, JavaScript and CSS, but the building process is simpler and more efficient. What are the benefits of working with a low–code no-code platform? There's lots of hype around the low-code, no-code movement, and for good reason. There are several benefits of working with such a platform: 1. Simplifies prototyping Before going live with a new product, you can use a low-code or no-code platform to efficiently create a prototype. While it’s wise to do engineering or programming prior to the launch stage, drag-and-drop tools can be used to build the initial model without the involvement of a developer. This will communicate your idea to potential inventors, early adopters, team members and other stakeholders before you invest time and resources in programming. 2. Speeds up digital transformation One of the main reasons for the movement’s growing popularity is that it speeds up the time it takes to produce new applications. Using a low-code platform, you can build software that readily adapts to increases in traffic or scalability. For enterprise-level agencies, a project that otherwise may have taken one year is now reduced to a few months. Because the process of building and producing software is faster and less complex, low-code development platforms can help companies innovate more quickly and keep up with changes in the market. Using these platforms, businesses can stay competitive by efficiently adapting to meet the market’s needs. 3. Enables a smarter use of resources Low-code and no-code development platforms help businesses allocate their resources in a smarter way. Because these platforms make use of existing templates, pre-built forms and other elements, even low-code platforms don’t require a programming background to build functional applications. If custom coding is needed to further develop the application, IT departments can dedicate their time and focus exclusively to those more advanced elements. This helps them prioritize more critical projects, rather than writing each line of code manually. 4. Improves workplace efficiency Relatedly, the low-code movement means that team members without programming knowledge–such as designers, content creators, and project managers–can have a hand in software, website, and app development directly. When it comes to website development, for instance, content and design teams can work together to independently create landing pages and other site elements, without needing to pull a developer from important product work. Another advantage of this is that it reduces the number of cooks in the website building kitchen. Writers–rather than simply writing the content on a separate document and then relying on other teams to upload it–can add the content directly to the CMS. Likewise, designers can create and manipulate visual elements without needing to work hand-in-hand with a developer. 5. Inspires creative autonomy Whether you’re working independently or on a team, low-code and no-code platforms support the goals of creatives. Because these platforms are readily adaptable, marketing, design and content professionals can experiment with the layout of landing pages, forms, and other key assets. This means they can adjust these elements based on their own research, data, and user feedback, and act on their findings right away. 6. Supports independent business owners and hobbyists For those creating a website, app or software to support their own hobby or small business, low-code and no-code platforms help them turn their creative visions into reality. Artists and designers, for instance, can build a custom website to showcase their portfolio–displaying their work online while also highlighting their style and skills through their site design. Likewise, small business owners can create websites, apps and even software of their own to promote and sell their products online. Best low-code no-code tools and platforms For those curious about using no-code and low-code platforms for your own projects, here are some of the best: 01. Wix Studio 02. Oracle APEX 03. Quickbase 04. Zoho Creator 05. Kissflow 06. Voiceflow 07. Bubble 08. Airtable 09. Zapier 10. Mendix 1. Wix Studio Wix Studio is a low-code website creation platform for advanced, professional designers. The tool allows you to conceptualize and design responsive websites using smooth drag and drop tools. Wix Studio is equipped with advanced design features, including flex and grid layouts, full breakpoint control and custom interactions. 2. Oracle APEX Oracle APEX is a low-code tool for building enterprise apps. Because it doesn’t require scratch-made code, it allows companies to quickly develop and deploy apps. The apps are scalable and secure, with features such as data filtering and charting and a responsive user interface. 3. Quickbase Quickbase is an application development platform with both low-code and no-code functionalities. It offers tightly integrated dashboards, reporting, and insights in order to streamline project workflows. The tool enables citizen developers to continuously improve business applications while maintaining enterprise-level security and compliance standards. 4. Zoho Creator Zoho Creator is a low-code application development platform that lets you use drag-and-drop elements to create iOS and Android apps. It offers over 550 pre-built integrations so that you can connect all your business’s tools–including your CRM, email platform, and project management tools–and run them from a single app. 5. Kissflow Kissflow is a low-code digital workforce software with a drag-and-drop interface. It includes mobile access, drag-and-drop coding as well as hand coding, and data synchronization. The platform has multiple use cases for businesses, including project management, issue tracking, and process automation. 6. Voiceflow Voiceflow is a no-code collaborative tool for designing, prototyping, and building virtual conversational assistants. It enables companies to rapidly integrate and deploy custom chatbots, interactive voice response assistants, and in-car assistants. The tool doesn’t require any knowledge of coding, instead using drag-and-drop tools that let people create and reuse components. 7. Bubble Bubble is a no-code platform for building web apps. The tool is usable on both computer and mobile browsers and offers advanced capabilities such as creating chats, news feeds, and other real-time interactivity. It allows multiple team members to collaborate in the creation process simultaneously and share feedback within the platform. 8. Airtable Airtable is a no-code platform that brings spreadsheets and databases together. The tool is highly versatile, helping businesses manage workflows by creating calendars, assigning projects, and syncing data. The platform offers pre-made templates that can be customized for different projects. 9. Zapier Zapier is a no-code workflow automation tool that integrates between more than 3000 web apps without requiring the help of a developer. The tool passes information between these apps to create efficient workflows and automatically completes routine business actions, such as copying attachments or sending updates through Slack. 10. Mendix Mendix is a low-code RAD tool that allows enterprises to create apps with little coding. As a cloud-native platform, it allows citizen developers without specialized expertise to build portable, scalable, easily deployable applications. It also makes use of built-in automation and machine learning.

Artificial intelligence might be the most buzzed about topic of the moment, but Wix and AI have had a long-term relationship. We launched our first AI website generator, Artificial Design Intelligence (ADI), back in 2016. It was a game-changer for building basic websites, but it was never intended to replace web designers and agencies. We know the sites you create are bespoke, but there’s a good chance you want to create those bespoke and tailored sites faster and more efficiently. That’s where Wix Studio’s AI tools come in. (You can read about our other features in this guide to Wix Studio.) “AI completely disrupts the way creators work, not just in terms of efficiency but in terms of helping them shine and do a better job creating websites,” says Naama Ben-Oliel Ronen, the product team lead who spearheaded Wix Studio’s Responsive AI. “At Wix Studio, we’re giving you the AI tools to scale up your work so you create both better and faster.” (By the way, we also spoke to Ogilvy Paris’ David Raichman and Mathieu Plassard about leading an agency in the age of AI.) The Wix Studio AI tools changing the game Responsive AI Let’s start with Responsive AI, a feature that’s totally unique to Wix Studio. Wix Studio’s Responsive AI applies optimized layout tools and responsive behaviors to either one site section at a time, affecting all screen widths, or to the mobile breakpoint while maintaining the desktop design. To build it, we labeled thousands of Wix sites to teach the tool how to detect related groups of elements in a site section. From there, the AI optimizes the section based on the hierarchy of those elements and responsive design best practices. “We have an advantage at Wix since we have so many different sites we can analyze,” she says. “This feature is truly a game-changer. A single click does so much behind the scenes and disrupts the web creation process.” AI Code Assistant Developers will also want to try the AI Code Assistant. It offers code suggestions in real time, helping you build more complex and custom sites faster. It also explains its suggestions along the way so you know what’s up. “The AI was trained on Velo examples, documentation and best practices to create idiomatic Javascript code for the Wix platform,” says Yoav Abrahami, Head of Wix Code Products. It’s built right into the Wix IDE and you can click the Wix AI Assistant icon in the sidebar to access it. (Read more from the Studio team: exactly how the Wix Partners product & UX teams designed the new workspace) More AI capabilities you should know Wix has rolled out tons of AI tools to help site builders and business owners use AI in their web designs at all experience levels and disciplines. You can read more about our CEO’s commitment to AI, but here’s a quick look at some additional features: AI Meta Tag Creator: Wix’s first AI-powered SEO tool generates title tags and meta-descriptions tailored to every page. From there, you’ll be able to choose from several suggestions, then refine with prompts and tailor the tone of voice to suit your needs. AI Image Creator: Describe the image you’d like to feature—a woman doing yoga, a restaurant full of happy customers—and the tool will generate a photo you can instantly add to the site. AI Text Creator: Just provide the topic, plus anything that’s important to mention about it, and the AI will write your copy for you. AI eCommerce Descriptions: Explain the business type and quickly describe the item to generate as much product copy as you need. AI CMS Assistant: With just a few details, generate a new collection for your CMS, including suggested fields and sample content. If you’re as committed to AI as we are, you’ll be happy to know that this is just the beginning. We’re rolling out more AI tools all year long, so check out the product roadmap if you don’t see your dream feature yet. (Learn more about Wix's new premium plans.) It’ll be worth the wait. “AI already enhances efficiency, and as it improves, it will also serve as a catalyst for inspiration through generative AI and other technologies,” Ben-Oliel Ronen says, “like a collaborative assistant that frees you up to focus on the creative and strategic work that scales your business. Going forward, AI will evolve to be proactive and suggest actions rather than reacting to requests.”

With the surge of online brands and services, now might be a better time than ever to start a web design business. But if you’re on the fence about whether to make this your full-time gig, then you’ll want to take the time to understand what you’re getting yourself into. After all, it’s not just about having the technical know-how; it’s about understanding the market, the challenges and the true value you can offer to your clients. For web designer Derek Hairston, his ‘aha’ moment came with the realization that “most web design agencies leave clients in the dark with unexpected costs, delays, and no visibility into the process.” “We bring our clients’ vision to life and give them peace of mind at every step of the way,” he says about his full-service agency, Olam Sites. “We specialize in building custom websites and features on Wix Studio.” Learn more about how to manage your agency on Wix Studio. Below, we cover the essential steps of starting your web design business. Keep reading for tips on running an agency and finding your own conviction to get started. How to start a web design business Every business is a little bit different, but in general, you’ll need to take these steps: Choose your niche Decide which web design services to offer Register and license your web design business Create a business plan and set goals Price your services Build your portfolio or website Promote and market your web design business 01. Choose your niche To stand out in a crowded market, you’ll want to know your “who” and “why.” In other words, it’s a good idea to narrow down your focus and decide on the types of clients you’d like to take on. “Deciding on your niche is a blend of self-discovery and essentially asking the question, ‘Who would I be excited to wake up and serve every day?’” notes Brad Hussey, web designer and founder of the Creative Crew community. “You’ll be spending considerable time, energy and money being around these people at trade shows, on podcasts, writing content for, networking with—and ultimately producing solutions for.” Remember that just because you decide on a particular niche now doesn’t mean you can’t broaden your reach and services later on. It’s much easier to start small than to start too broad, or to bite off more than you can chew. If you’re struggling to decide on your niche, start by defining why you do what you do. For example, are you passionate about the restaurant industry and see an opportunity to build more professional online experiences for them? If so, start there. In the video below, Hussey gives additional tips for solidifying your niche and the “why” behind what you’re doing. 02. Decide which web design services to offer Once you’ve settled on your “who” and “why,” the “what” should come somewhat naturally. Decide what services you can (and want) to offer your clients. Your services could include: Website design and development Ecommerce solutions User experience (UX) design User interface (UI) design Search engine optimization (SEO) Mobile app design and development Website accessibility Graphic design Custom web application development Online branding Think about which services can be offered on a regular basis—such as graphic design or SEO—and thereby supplement larger one-off projects by bringing in recurring revenue. Also, consider ways in which you can package your services together to better service your clients. 03. Register and license your business Before diving into creative work, it's important to address the legalities of starting your own business. You’ll need to register your business with the relevant authorities. In most U.S. states, this will be your Secretary of State. To register your business, you’ll need to choose a business name and decide on your legal business structure. Consider, how big do you plan on growing your team? Do you plan on managing the business alone or with a partner(s)? Ultimately, what is the vision for your business and how it will evolve? The answers to these questions will help you choose between several structures, the most popular of which include: Sole proprietorship: Owned and operated by a single individual. As the owner you have unlimited personal liability and business income is reported on your personal tax return. Limited liability company (LLC): Combines elements of partnerships and corporations, offering limited liability for owners (members) and flexibility in management. Income is typically passed through to individual tax returns. Partnership: A business owned by two or more individuals who share profits and liabilities. There are general partnerships (equal sharing) and limited partnerships (with limited liability for some partners). Corporation: A legal entity separate from its owners, providing limited liability protection. Shareholders own the corporation and it can be taxed as a C corporation (double taxation) or an S corporation (pass-through taxation). As shown above, each structure has its own tax obligations, protections and requirements. You’ll therefore want to make sure to thoroughly research your options and consult a business attorney, consultant or accountant before making a final decision. At this stage, consider whether you’ll need to apply for an Employer Identification Number (EIN) from the IRS and open any business accounts with your bank to keep your finances in order. Make sure to obtain all necessary licenses, insurance and permits for running a web design business in your region, too. 04. Create a business plan and set goals There are many other decisions you’ll have to make from both an operational and strategic side. A good place to start is by tackling your business plan. Your business plan will serve as your roadmap, outlining things like: Your business description Target market Competition Organization and management Services and products Goals and strategies Financial projections Do your due diligence and don’t rush this step. As you build out your business plan, you may realize things you hadn’t before—like the need to secure outside funding. “I started off as a penny-pinching bootstrapper, although I’m not convinced that’s the best way,” reflects Hairston on the early days of Olam Sites. “I projected revenue based on the potential customers in my immediate environment, but this limiting mindset put a ceiling on our earnings and scalability.” “My suggestion when getting started,” he adds, “is that your projections and confidence should justify raising funds for greater scalability. Otherwise, what’s the point?” Whether you need extra resources to expand your services, grow your team or invest in marketing—a business plan can help you decide when and how to raise money. It can also show where the money will go when approaching investors, banks or other potential backers. 05. Price your services As your financial and personal goals for your business start to take shape, so too will your perspective on how to price your services. Oftentimes deciding on what price to charge can feel like taking a shot in the dark. Or, you may feel pressure to price your services low if you’re just starting out. However, you’ll want to avoid selling yourself too short. At the same time, know what your competitors are charging. Identify your differentiators while weighing your expenses and ideal profit margin. Think about the different clients you plan to take on as well as the different web design pricing models you can offer: Flat fee (a.k.a. “Project-based pricing”): A fixed amount that you and your client agreed on at the start of the project. Hourly fee: An hourly cost, ensuring that you get paid the agreed-upon amount for every hour you spend on a project. Monthly fee (a.k.a. “monthly retainer”): A contract, either measured in time or value, that involves monthly payments for a certain amount or type of work. Learn more: Choosing the right business model 06. Build your portfolio or website A strong portfolio is key to attracting clients and showcasing your design skills. This is your chance to show (not just tell) future clients what you’re capable of creating online. When creating a website for your web design business, consider using a platform that can host both your website and your work for clients. This not only helps to keep everything in one place but also helps you to get ultra-familiar with the web tool you’re offering your clients. The most effective creative portfolios include sections, pages or CTAs like: About: Introduce yourself and your team, including your credentials like any relevant education, industry awards and your value proposition. “Our Work”: Showcase projects that represent your best work, and make sure there is a brief but clear backstory so that visitors understand how you solved your clients’ needs. Keep in mind that before uploading client projects, you should always get client approval in case projects are confidential or not yet live. Services: List the different services you offer so that you’ll spend less time weeding through requests and more time connecting with relevant prospects whose needs match your skills. Contact: Make it easy for people to contact you with any questions, and consider embedding a form into your site to collect useful information from prospects (such as their company name, current website’s URL, etc.). “Book a Meeting”: Offer high-intent prospects the opportunity to meet you face-to-face via an online booking feature. A solution like Wix Studio, for example, is tailored for agency work. It brings together features—including AI tools—for web design, development, SEO,  eCommerce, website maintenance, CMS and more. Beyond having the tools to design cool, interactive sites for your clients at scale, you can enjoy built-in capabilities that allow you to expand your services. Build your agency site on Wix Studio with one of these responsive templates. 07. Promote and market your web design business Once you’ve published your site and opened yourself up for business, take steps to establish your brand and to proactively get in front of potential clients. “Building authority in your industry by creating content is like investing money in the stock market,” says Hussey. “When I started creating videos, writing blogs, appearing on others’ podcasts—those efforts may not have produced results in the immediate term, but over time, the benefits have paid me back in multiples.” Exercise your existing network and ask for referrals. Engage with folks on social media. Scour job boards, including LinkedIn, for any calls for help. Here Hussey suggests four additional ideas for your outreach: Don’t forget to invest in your personal brand. Given how nearly 70% of consumers trust influencers, friends and family over information coming directly from a brand, it’s always a good idea to use your own sphere of influence to connect people with your agency. Note that Wix Studio includes marketing integrations that allow you to schedule social posts, send emails and track performance—both for your clients and yourself. Use these tools to your advantage as you spread the word about your business. Web design businesses and agencies built on Wix Studio to inspire your own One way to jumpstart your business’s website creation is to follow the examples of established, successful agencies, like the sites below. In addition to providing fundamental information, each of these sites packs a creative punch and demonstrates the creative potential to future clients. The Boathouse Agency This creative design agency shows that there is no limit to the growth potential of your web design business. The Boathouse Agency goes beyond web design and offers complete 360 creative and branding solutions for brands of all sizes. Visual Identity Visual Identity is a web design studio specializing in site design, UI/UX, development and branding. Their site’s black-and-white design, typography and visual elements create a bold and impactful statement about their vision and purpose. Scopetheory Scopetheory leads with results-driven design for their clients that involves taking branding to another level. The homepage makes it easy for prospects to see the agency’s results, with prominent callouts that highlight their clients’ accomplishments. What is a web design business? A web design business is a type of design agency that specializes in creating and maintaining websites for clients. However, more often than not, it’s about more than just design; it’s about building functional, user-friendly online spaces that serve a specific purpose for a client. The scope of work involved in a web design business can be broad. They can range from simple static pages to complex web applications and everything in between. Whether it's an eCommerce platform, a personal blog or a corporate website, each project comes with its own set of design and development challenges and requirements. Why start a web design business? The web design industry offers a world of business opportunities for creative and tech-savvy entrepreneurs. Starting your own web design business not only taps into a field that blends art and technology but also positions you in a market with high demand for your services. The benefits of starting a web design business are numerous. Here are some of the most compelling reasons to consider: High demand: In a digital age, nearly every business needs a website, increasing the demand for skilled web designers. Flexibility: Running your own business means you can set your own hours and work from anywhere, be it your home office or a beach in Bali. Creative freedom: As the owner of a design business, you have the freedom to express your creativity and make decisions that align with your vision—from the clients you choose to take on, to the design and website niche you specialize in. Considerations when starting a web design business Starting your own web design business is a big step professionally and it's often accompanied by a set of important considerations that any new business owner should be aware of. Is web design a profitable business? The profitability of a web design business can be significant if managed correctly. Here's what you should keep in mind: Demand for services: With more businesses going online, the need for professional web design services is on the rise. Tapping into that demand can mean a lot of work for a web design firm. You’ll need to think about things, such as your sales process for your web design business, amongst other key business needs. Pricing strategy: Setting competitive rates that reflect the quality of your work and the value you provide is the key to profitability. To do this, you’ll need to have an idea of what your competitors offer and how they package similar services. Be mindful of value-pricing, which is setting your rates according to the value of your work, not just the time spent on it. Marketing: You’ll need to promote your business to give yourself the best chance of securing long-term and profitable clients and projects. This could include networking or connecting with related online and offline communities to promote yourself and your business. Encourage your current clients to refer you to others who might need the same services and build your freelance community along the way. Diversify your services: Offer a range of services within the field, including content management and social media promotion, if relevant to your expertise. Build client relationships: Establishing long-term relationships with clients is crucial to getting repeat business and securing more freelance design clients. Stay updated with industry trends and changes: The web design industry is constantly evolving. Keep learning new skills and staying abreast of trends to remain competitive. Can I start a web design business with no experience? With no prior experience, starting any type of business can be challenging. However, focusing on education and growth from the outset can help you maintain momentum and see measurable development over time. These steps can be a solid guide for your first few months: Learn the fundamentals: To understand web design from the ground up, get familiar with user experience, content writing and responsive web design. While these days it’s not necessary to create websites with code, an online coding class in HTML, CSS or JavaScript will help you understand the backbone of your websites. Practice your skills: As you learn new concepts, put them to use. One option is to recreate websites you find online, down to the details of hover interactions and entrance animations. Practicing on Wix Studio can help you focus on your web design skills, since the platform has extensive no-code design capabilities. Share your progress: Whether you’ve created wireframes, designs or live websites, share your real-time process and finished products on your social channels. You’ll receive encouragement and feedback from professionals, plus you’ll enjoy going back to your old posts to see how far you’ve come. Connect with professional heroes and mentors: “Become an apprentice of someone who is already successful in the industry to gain the skills, experience and industry insight,” advises Hairston of Olam Sites. “This could be in a variety of forms: employee, mentee or YouTube channel subscription.” Choosing a professional hero—someone whose style you admire and want to emulate—will give you a wealth of creative inspiration. Plus, it’s never a bad idea to get in touch with them; they might be happy to provide mentorship and feedback as you find your feet. Build your online presence: Now that you’ve completed a few projects, organize everything on a portfolio website. You’ll have one link that you can easily share to show off your past work, whether you’re looking to take on clients or build up your network. Can I start a web design business from home? Starting your web design business from home brings great advantages like no commute time, significant cost savings and complete control over your work environment. And though this also comes with its challenges, you can overcome them with these best practices: Enlist time management for work-life balance: Different from project management, time management helps you organize your day across your different tasks, including any personal tasks that you may have to take care of while at home. Set a clear start and end for your work hours, as well as offline times for lunch and screen breaks. Create a Zoom-friendly space: Video conferencing isn’t unique to working from home, but take notice of what’s behind you when you’re on camera for video calls. Make a good impression by clearing away laundry and dirty dishes, and find a space away from household interference. Connect with online communities and local organizations: Without an outside office space, it can be more difficult to cross paths with like-minded professionals for shared learning and networking. But with a little effort, there’s a big payoff. Join online professional communities like Freelance Fam for web design freelancers, and Creative Crew for web design agencies. Find nearby events to attend via resources like Meetup. Schedule in-person meetings: While it’s comfortable and convenient at home, health experts encourage getting out of the house daily for physical and mental well-being. Do this by finding time to meet with colleagues or clients face-to-face, whether for business meetings or casual coffee chats. Learn more: Guide to Remote Work Tips for managing your web design business Effectively managing your web design business helps keep projects flowing—on time, on budget and on brief—and ensures a positive experience, both for your team as well as for your clients. First create a solid project management process and then choose a project management software that meets your needs and budget. Best practices for project management Keeping projects on track ensures client satisfaction and repeat business. Clear communication: Establish open lines of communication with clients to manage expectations and keep them updated on progress. Project management tools: Utilize software like Monday or Asana to organize tasks, owners, dependencies, deadlines and collaborations. Hairston provides some insight into Olam Sites’s efficient management practices: “Our operations strategy is centered around standard operating procedures, leveraging efficient tools (Asana, Hubspot, Wix Studio, etc.), and a phenomenal project manager. Wix Studio centralizes all client websites and team access, making the deliverable handoff process seamless and scalable.” With Wix Studio’s management tools, you can work from a unified workplace no matter how many employees are working together. And for teams on the go, the mobile app keeps everyone involved and up to date. Other features include a collaboration suite, handover resources and reusable assets. Business software solutions Leveraging the right business tools can greatly enhance your efficiency as a business owner. Invoicing and accounting: Software like FreshBooks or the Wix invoice maker can simplify financial management by helping you create invoices. Time tracking: Tools such as Harvest or Toggl help you keep track of billable hours for each project.