"404 page not found" is one message website visitors are never supposed to see. Yet, people do land on 404 pages from time to time and, unfortunately, can be put off by your clients’ site as a result. That's because not all 404 pages are well-designed. Product teams typically dedicate a lot of attention to polishing active pages, while 404 pages are treated as an afterthought because they're an empty state that doesn't belong to a happy path; a scenario featuring no error conditions. However, how a 404 page is designed can significantly impact how users feel about a website design. A page created with love can make a positive impression on your visitors and minimize the chances of leaving a website. This article will discuss what a 404 page is, why customizing a 404 page can benefit website design, and offer ten practical tips on how to design a 404 page. What is a 404 page? First of all, what does 404 mean? In simple terms, a 404 page is an error page that web visitors see when they click on a broken link. From the technical perspective, 404 is an HTTP error message code that a web server sends to the client (your web browser) when the server cannot find what the user requested. There are three main reasons why a link can be broken: Content is no longer available for visitors. The company removed the content from the website, but the link is still available in Google search results. Website content moderator or web developer added an incorrect link to the website. For example, a moderator mistyped the URL address or moved the page to a different URL but forgot to add a permanent redirect. Website visitors mistyped the URL of the page. Typing is error-prone activity. It is especially true for mobile users since it's much easier to make a mistake when you enter data on a tiny screen of a mobile device. What are the benefits of a 404 page? In a perfect world, website visitors never see your 404 page. But in the real world, both website visitors and website moderators make mistakes, and it's nearly impossible to avoid showing the 404 page at some point along the user journey. Poorly designed 404 pages can fill visitors with frustration, while a well-designed 404 page can turn that moment of frustration into a moment of delight. Here are the main benefits that a well thought out 404 page design can bring: User experience benefits. A well-designed 404 page doesn't feel like a dead-end page; it's a page that helps visitors decide what they can do next. For example, it can offer a few high-level pages that a person can visit depending on their goal. Visual benefits. Nice visual design can create a positive impression on your visitors. In fact, aesthetics-usability effect suggests that users are more tolerant of minor usability issues when they find an interface visually appealing. Marketing benefits. Good design can strengthen your brand image. The best 404 pages guide visitors to the right decisions and become a huge conversion opportunity. How to design custom 404 pages: Best practices with examples So, how do you design a great 404 page? “Keep it simple” is by far the most important rule to remember when building a 404 page. Just because you want to create a custom 404 page doesn’t mean you have to create something completely innovative. The primary purpose of the 404 page is to give users a clear signal of where they are and what they can do next. That's why it's recommended to follow minimalist design principles when designing the page—less text and less visual details—to make it more effective for average users. The secondary purpose of the 404 page is to prevent visitors from abandoning a website by engaging them in interaction. Depending on the nature of your website, is it possible to achieve the goal by adding functional or decorative elements to the page. Here are ten tips you'll want to keep on hand to improve 404 page design: 1. Don’t add too much content on the page We know that people on the web don’t read, they scan. This rule applies to all web pages, including 404. Visitors aren’t supposed to read the text on 404 pages, they are supposed to glance at the page and understand what is happening. That's why you should avoid writing long passages of text. Instead, make every word count and get straight to the point. For example, Zhenya Rynzuk’s 404 page features only one sentence (404 error) and a single navigation option (bring me back) that leads to the homepage 2. Avoid generic 404 page messages When it comes to writing an error message for 404 pages, it's not enough to write a clear and concise copy. You also need to ensure that the message has the right tone. Generic messages like "404: Page Not Found" sound cold and robotic and don't positively impact visitors' moods. It's better to use a more human-friendly tone such as "Oops! This page doesn't exist." Hugoware went even further with its 404 message—they say "404. Page was sucked into the vortex!" and…literally show how every page element goes into the vortex. 3. Maintain visual consistency Visual consistency is an integral property of good design. The same visual language should apply to all product parts, including 404 pages. By doing that, you will create a familiar experience for your audience and help them easier navigate your website. A 404 page should align perfectly with the rest of the site’s branding, both in terms of language and styling. You need to use the same visual attributes (colors, fonts, spacing) that you use on all other pages on your website. Notice how Mailchimp, the email automation service, maintains visual consistency on its 404 page. A call to action button that says “Mailchimp Home” has the same styling properties as “Sign Up Free” in the top right corner. 4. Make the page functional The primary purpose of the 404 page is to guide the visitor on what they can do next, so it's essential to offer a next step (or steps). Depending on the nature of your website, you can offer one link (i.e., "Go to homepage"), a few links to key pages of your website (i.e., for a corporate website, you can add "Home," "Products" and "About Us") or even add a search bar (i.e., for an eCommerce website). On its 404 page, Airbnb offers a few key directions that represent main functionalities and areas of the website. It's vital not to go overboard with offering too many options. Presenting too many choices makes the page less visually appealing and makes it harder for a visitor to decide what they want to do next. This phenomenon is known as analysis paralysis. Use your analytics data to understand what parts of your website are the most important to your visitors, choose the top important ones (as a rule of thumb, up to 5) and add them on this page. 5. Add relevant imagery A picture is worth a thousand words. Using relevant imagery is a great way to communicate with your audience visually and demonstrate great attention to detail. Properly selected illustration, photo, or video can help you draw interest and create an emotional connection with your audience and encourages them to stay at your website. A music streaming service Spotify uses very relevant imagery on its 404 page. An illustration of a vinyl disk is an excellent visual metaphor that is clear to the music-loving audience of this service. If you want to use imagery on your 404 page, you need to ensure that you select imagery that the majority of your visitors associate with your brand. It should be easier for visitors to decode the meaning. For example, if you sell automobiles, you can use imagery of a car on your 404 page. 6. Use generous whitespace Since the 404 page doesn't feature a lot of content, it's possible to use whitespace to let content breathe. The more whitespace you add around an individual element, the more user attention it will receive. A very interesting example of using generous whitespace can be found on the CUSP 404 page. A simple black and white page features a pseudo-3D sphere in the center that rotates together with the mouse cursor's movement. Contrast and whitespace work in tandem to direct entire user attention to the key message. It's vital to remember that the layout of your page should look equally good on any screen and resolution. 7. Utilize your brand attributes Ask yourself, "Can I show what my company does visually?" If the answer is yes, congratulations—you should be able to find unique ways to express its 404 pages visually, too. Myriad Video, a creative agency specializing in video production, uses fairly common imagery that mimics the classic color bars that used to appear on old TVs. Most TV users are familiar with this signal and can easily understand the company's area of work (video production). 8. Introduce creative visual effects Motion effects can make the page more dynamic and alive. Original animation can demonstrate your level of craftsmanship and surprise your visitors. Below you can see the 404 page from the personal website of Andrea Reni, a software developer. The animated element in the center of the page symbolizes the glitch. This glitch moves as you move your cursor, which creates lovely visual feedback for visitors. 9. Add a healthy dose of humor Adding humor is the best way to connect with your audience on a personal level. A funny 404 page can make visitors chuckle and stay on your website longer. Humor can be anything—from a joke that you crack on the page to the fun game you invite visitors to participate in. A web creator from France, Romain Brasier, found a pretty unusual way to incorporate humor on the 404 page. Once visitors land on the 404 page, they are engaged in a fun game where they need to save lemmings that fall from the top of the screen. This smart design decision adds another layer of interest, and makes the website itself a bit more human and engaging–even when the user landed there by accident. At the same time, being humorous is not an easy task. If you want to add humor to your website, ensure that your jokes resonate with your users. Visitors should not feel offended by your jokes. Learn more about your target audience and use this information to design jokes that work for them. 10. Add unexpected but useful functionality Adding an unexpected but very useful feature on a 404 page can shift a moment of aggravation into a moment of delight. Dribbble, a social network platform for visual designers, uses the minimal layout for its 404 page that gives users essential information they need, but it also lets visitors generate HEX colors using a slider. It is a neat and beneficial feature for many people in the design industry. What's included in a 404 page? Every web page is created from the foundational building blocks— header, body, and footer. To make the 404 page look consistent, you make the header and footer the same as on any other web page. For example, you should put the site's logo and top-level menu in the header. The footer should contain key navigation options. The body should feature content that is relevant to the 404 page. [Related: Learn how to make the most of styled horizontal menus.] Copy that reads “page not found” is the absolute bare minimum of what you can show on a 404 page. If your website contains a lot of content, you can also offer a search bar to help users find what they are looking for. For example, Apple uses a fairly standard design for its 404 page—the text section and search bar. It's possible to make the page more visually appealing by adding an illustration or photo. Visuals can convey the main idea much faster than plain words. Ideally, text messages and illustrations should reinforce each other and help visitors understand what is happening. Lego’s 404 page is an excellent example of pairing great visuals with a fine copy. Common mistakes to avoid with 404 pages Now that you know the best practices, be sure to look out for these typical pitfalls designers encounter when creating 404 pages for their agency’s clients. Don't lean too heavily on your 404 page. While you don’t want to treat it as an afterthought, you still want to make sure people don’t land on it too often. Don’t some to ‘show off’ your creativity with 404 pages, after all, users should only ever arrive here by accident. Make sure you don’t have any links that point to deleted content somewhere on your clients’ websites. Running routine maintenance checks for any broken links can help your clients reduce how many 404 pages appear on their website. Sometimes 404 pages pop up because your clients' users are making typos. Note the most common spelling mistakes they make and consider redirecting those wrong urls to the right page instead. 404 problems can also be caused by caching issues. Suggest clearing them within the 404 page’s copy to resolve the issue. Turn failures into opportunities Design is in the details. The more you polish individual design decisions, the better experience your users will have. The quality of error pages, including 404 pages, can say a lot about your attention to detail. Fine-crafted 404 page design is a prime indication that product creators genuinely care about their users and want to offer the best possible experience to them. In the grand scheme of things, you want to think of 404 pages not just as a mistake to curtail, but an opportunity to redirect your clients’ users towards actions you want them to take. Get leads and prospects back on track with meaningful 404 pages that are memorable for all the right reasons.

Dev leaders at fast-growing agencies know that the one caveat of scaling their business is the added complexity that comes with it. Staying on top of even more client work with tight deadlines and uncompromising budgets requires leaders to take a step back for a moment and reassess their workflows and processes. That’s where Wix Studio comes in. You probably already know Wix Studio as a low-code no-code web platform for agencies offering services such as responsive web design, CMS and SEO, but did you know it has robust development capabilities too? With a vast dev toolkit of best-in-class products, your team can get the job done fast and efficiently in the way that suits them (without sacrificing quality). Let’s explore some of Wix Studio’s lesser-known workflows. 01. Build reusable apps for clients, then launch them to millions of Wix users 02. Accelerate your output with AI code assistants 03. Write code faster with a mega library of NPM and Velo packages 04. Unlock limitless possibilities with Wix Headless 05. Take (version) control with our GitHub integration 01. Build reusable apps for clients, then launch them to millions of Wix users Does your team need to roll out app updates simultaneously to dozens of websites across multiple clients? Wix Blocks is a standalone Wix editor for building reusable web widgets and apps, complete with UI, code, databases and back-office management. Create a Blocks app, install it on your clients’ sites, update it once—and it updates everywhere.“We worked with a company that provides advanced technology solutions and services for libraries, which began developing Blocks apps less than a year ago and have apps across 61 sites,” says Kenny Shen, Wix Enterprise solution engineer. “Blocks allowed them to seamlessly integrate content from the online catalog and event management systems of the libraries they work with.” By creating reusable apps for clients, dev teams are inadvertently creating market-ready products as well. For a double win, you can take your Blocks creation from your own library straight to the Wix App Market to sell your app, unlocking new revenue streams for your agency. At the click of a button, your app will be reviewed by an expert and ultimately launched to a ready-and-waiting marketplace of Wix’s 250m+ users. Create an account to start building with Wix Blocks today. 02. Accelerate your output with AI code assistants Many agencies are already using AI for design and marketing, but few have revolutionized their entire coding process with AI. With Wix Studio’s AI code assistant, writer’s block is a thing of the past. Never get stuck again by using artificial intelligence to take care of basic coding, then editing and filling in the rest with your human touch. “AI is an excellent way for devs to create a feedback loop without actually having another person there,” says Emmy Cao, developer advocate at Wix. “Our AI code assistant makes for an excellent pair programmer to bounce ideas back and forth or debug faulty code.” To get started, go to your Wix IDE and find the AI Assistant in the sidebar. Generate code, fix code and discover Wix API capabilities by selecting ‘look up documentation’ and asking a question. In the macro, AI code assistants free your developers up to focus on more strategic work. “It's also a way to verbalize your thought processes and code structure,” adds Cao. 03. Write code faster with a mega library of potent NPM and Velo packages Navigate over to the code section of the Wix Studio platform and select ‘Packages & Apps’ to install NPM and Velo packages (which allow you to reuse already-written code). NPM works on Node.js, and features an especially large library of packages, whereas Velo packages are made by Wix and are used to connect Wix sites to third-party services like Google, GCP Cloud Trace and Zoom. “The ‘moment’ package is one example of a library that helps you parse all sorts of date and time formatting, which is a handy function to be able to implement (especially if you don’t have to write that logic yourself),” says Cao. Another NPM package, PDFKit, lets you convert user data into a downloadable PDF. "It would typically be time-consuming to code an app from scratch to do this for you. However, since it’s a commonly implemented functionality, we recommend first searching for publicly available packages before trying to code it yourself,” adds Cao. Learn more about Wix Studio’s dev capabilities here. 04. Unlock limitless possibilities with Wix Headless What if you had the power to break free from the confines of a single platform? With Wix Headless, you can leverage APIs to extract vital information from your client’s business and seamlessly integrate it into any front end, from mobile applications to custom websites. Whether you’re operating an eCommerce empire or managing bookings for an events business, Wix Headless allows you to maintain brand consistency while diversifying your digital strategies. “Consider an agency that builds sites for boutique store owners on Wix Studio,” says Shani Shabag, product manager of Wix Headless. “Through Wix Headless, they can expand their client’s offering by accessing crucial information, such as product listings, inventory levels and customer reviews via APIs. This data can then be integrated into a sleek, user-friendly mobile app, extending their client’s reach to customers on any device.” In a world where adaptability is paramount, Wix Headless could be the invaluable tool you’re looking for to help liberate business info into a multi-platform approach.Get started with a React Native app template to give you a powerful starting point for building dynamic mobile applications that seamlessly interact with their Wix backend. 05. Take (version) control with our GitHub Integration It’s important for any dev team delivering projects at velocity to stick with their preferred workflows. That’s why we engineered our platform to effortlessly mesh with industry-standard tools like GitHub to help keep things familiar while enhancing the overall development process. You can harness the power of favored IDEs like VS Code, Webstorm or Zed, while seamlessly managing version control through GitHub. Imagine coding offline in your preferred local environment, testing creations in real time and deploying them, all while continuing to use the flows and tools you’ve already mastered. Use the GitHub Integration panel on the Code sidebar within the Wix Studio editor to create a new GitHub repository for storing your site's files. Once your repo is set up using the Wix CLI, you can clone it to your computer and write code in it as you would in any other non-Wix project. “With more complex code, version control allows you to quickly revert to previous versions or other branches for testing. Larger developer teams can also benefit from conducting code reviews before pushing to production,” says Cao.

Some clients couldn’t care less whether you build their website on the back of a napkin or with state-of-the-art technology as long as it matches—or exceeds—their expectations. After all, you’re the expert. But a lot of clients do care about the website builder you choose. Some fear change and are reluctant to have a newly built site migrated from their existing CMS. Some have preconceptions about specific platforms, while others need extra convincing that the platform you use includes the right functionality to build the site of their dreams. So, even if you’re excited about Wix Studio’s new AI capabilities, responsive behaviors, intuitive grid and centralized workspace, you might need to explain Wix Studio’s key strengths on their terms. With this in mind, we’ve put together a simple guide so you’ll be ready to highlight Studio’s capabilities based on the prospect you’re pitching to. Use these ready-to-go pitch templates, built on Wix Studio, for your next client meeting. 1. Clients who put design first You know the type of client—the one who tells you unequivocally they want a website that wows. Often creative businesses, quirky startups or vibrant brands, these clients judge your work on how it looks. Wix Studio is packed with advanced design capabilities to deliver the exceptional-looking sites they want. But they won’t want to hear about all the technical stuff—they’ll want to see results. Emphasize the creative freedom Studio offers your agency and how its out-of-the-box features can help turn ordinary pages into highly engaging experiences, like adding gradients, big scroll effects and masks. You can add character to their sites with the latest motion and effects features and achieve eye-catching interactions using entrance, loop animations and custom cursors. Also, Studio is built with flexibility in mind, which means you can get super specific and deliver more bespoke designs using custom CSS. Not only do you have the tools to create intricate layouts and complex sites, but you can fully customize design elements like typography and color styles to match your client’s brand. 2. Clients with complex business needs Whether it’s for a web summit in Dubai or a medical tourism company in Kyoto, Studio’s native professional solutions help you deliver projects for just about any business. Build an online store, create members’ areas, set up chat and subscriptions with solutions that are reliable and secure. Add events, blog, classes, videos and menus for more specific verticals. From the client’s perspective, a site built on Studio means all the business functionality they need is ready to go, out-of-the-box and in one place. No need for them to get bogged down with messy plugins or 3rd party applications. Instead, they save time and costs and can keep the business ops side of their site simple and streamlined. You have the option to extend these native business solutions with hundreds of APIs and powerful web apps, so you can customize the functionality of your client sites. You can also integrate with external systems like ERP and CRM so clients can continue to manage their business with ease. Got a client operating across multiple regions? Studio covers over 180 languages, so chances are it supports theirs. Use this pitch template for clients who want an online store on Wix Studio. 3. Clients obsessed with SEO Not all clients have the in-house expertise, time or resources to cover SEO. But more and more care about it, because they understand its importance for growth. Studio’s big selling point here is that SEO is at the platform’s core and baked into everything you or your client do with a website. Wix works closely with leading search engines like Google and Bing to ensure web crawlers can always access your client sites. Its engineers also monitor issues around the clock, which is like your client having its very own technical SEO team. Plus, the underpinnings of all Wix sites are continuously enhanced to ensure they stay aligned with Google's technical requirements. With the right SEO strategy, your client’s site will be in a great position to secure some prime real estate at the top of Google’s search results. Even after your handover, built-ins like automatic redirects help client sites stay optimized for long-term growth, so clients won’t have to worry about regular check-ins. Using data in your pitch reinforces your message, so here’s an impressive stat to share: 40 percent of all traffic to Wix sites comes from organic search. If they still don’t get it, tell them Google does. Here’s what John Mueller, Google Search Advocate, says about Wix’s SEO: “Wix has been doing fantastic stuff for a number of years now. I'm impressed. They've been raising the bar not only for their services, but the industry overall.” Of course, it’s important not to overpromise. Your client should know that ranking in search is a long-term commitment that requires time, effort and ongoing optimization. You can help their business stay competitive with the latest SEO and content tactics should they need that support, but Wix’s ultra-strong technical foundation is the perfect launching pad for their website. 4. Clients with a ton of content One of the biggest challenges of delivering content-heavy websites for clients is often not the actual build, but the handover. You want to give your clients the tools and assurance they need to efficiently manage their site and make edits without disrupting the design. (By the way, here are 7 ways Wix Studio empowers agencies to work efficiently at scale.) Studio’s native, no-code and robust CMS enables your agency to create extensive database collections and seamlessly connect them to your client’s designs. It’s a powerful tool for clients with tons of data running in the background, like property management companies, online stores and educational institutions. It will depend on the client as to how much control you want to give them. You can assign permissions so they can edit content in collections but not in layouts. This means they can update basic page elements like text, button labels, links and images from an intuitive dashboard or on the go from the Wix Owner app. Not only does Studio’s CMS give your clients the freedom to manage their sites seamlessly, but it cuts out unnecessary contact with you after the project is complete. It also enables you to create dynamic, content-driven sites without code so you can deliver great sites faster. 5. Clients who prioritize security The constantly evolving threat of cybersecurity is keeping business owners up at night, which means you’ll be hearing it come up in more of your client meetings, particularly with those who manage large volumes of data. New research shows that 43 percent of SMBs across key global markets believe security education and support should come from their trusted tech partners, so you need to have your security straight. Firstly, let them know that Wix is compliant with the highest international security standards and protects the sites and data of 258 million users—from sole traders to large enterprises—so it’s no stranger to top-notch security. With Studio’s fully managed, enterprise-grade security, your client site stays secure 24/7. Oleg Davydov, Wix Partner and founder of Davydov Consulting, says he covers security in every client pitch because he sees a significant demand for it. “They want peace of mind, and it’s not always enough for someone like us to provide it,” he says. Davydov explains to clients that it’s not only his agency that offers support, but that Wix provides the foundation. He shares his analogy that generally gets prospects over the line. “Wix is the art shop, somewhere you don’t buy the picture but the tools; like paper, brushes and paints. We are the artists who can draw it for you. However, once we do, it gets transferred into the Wix art gallery, where they’re responsible for the security of the pictures. Then they get it. It gives them peace of mind, and they trust us.” 6. Clients who want more integrations Every client has their favorite tech and sacrificing one of their go-to apps for the sake of the web creation platform you choose could make or break your pitch. The good news for your clients is Studio offers deep, native integrations with platforms like Google, Bing, Amazon, TikTok and Etsy, which are built, maintained and updated in direct partnership with these market-leading companies. That means Studio creates integrations with the actual source themselves rather than using messy third-party plug-ins, so your clients’ apps work smoothly from one place. The same seamless integration process is applied to leading third-party marketing tools like Klaviyo, OpenAI, Google Merchant, Semrush and SERanking, as well as social apps including Instagram, Meta and TikTok. You can also integrate sites with search engines so clients can take a deep dive into their site performance, organic traffic and indexation status. Read more about our marketing integrations, and share Wix’s extensive app market with your clients so they can choose from more than 500 apps designed to work in harmony with their sites. 7. Clients with high volumes of traffic Big-ticket clients like busy eComm sites, online marketplaces, news websites and streaming services need many things from a platform, but they won’t compromise on reliability. A figure worth sharing with these clients: 4.5 billion. That’s how many requests, along with millions of transactions, Wix handles each day. And if required, it could handle more than double that. With automatic scalability built into each site and regular stain testing of data centers, your clients can go as viral as they want—Studio can handle it. Wix’s dedicated data centers are combined with other best-in-class hosting providers like AWS, Google Cloud, and Fastly, so the platform uses traffic-shifting technology to ensure your clients’ users get continuous access to their sites. Your clients can read about how Google Cloud partnered with Wix to optimize the platform’s ability in this Google case study. Use this template to pitch a Wix Studio website to your next Enterprise client. 8. Clients who think Wix is not for pros “Wix is only for DIY.” “Anyone can build on Wix.” “Why would I pay someone to use Wix when I can do that myself?” Sound familiar? Well, Studio tackles these misconceptions head-on, because, as we say in the tagline, it’s the web creation platform built for agencies, and designed to help you work better and faster. You can tell clients that means high-quality, responsive sites delivered in a quicker turnaround time through smooth handovers. Get a conversation going in our Community Forum to see how other professionals are pitching Studio to their clients.

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 01. Get started with wireframes 02. Define your breakpoints 03. Design for small screens first 04. Create a fluid grid 05. Optimize images for responsive design 06. Choose the right 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. Choose the right 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.