Having award-winning websites in your portfolio is a great way to gain trust among customers and recognition in the industry. In this post, we will show you how to create one-of-a-kind websites without code using Tilda. It’s a powerful and intuitive website-building platform for designers who want to make award-winning projects on their own with no code and no developer standing in the way between creative vision and creative expression.
Websites built on Tilda regularly win Awwwards, CSS Design Awards, CSS Winner, and other design awards. Designers choose the platform to make all kinds of projects. Whether it’s an eye-catching portfolio, landing page, business website, online store, educational platform, event promo page, the platform provides robust features and gives freedom to make top-notch websites without code that will qualify for the worlds’ most renowned awards.
In this post, we’ll walk you through what it takes to create an award-winning website without a line of code.
✏️ Thanks to our friends at Tilda for sponsoring this blog post!
What makes a design “award” worthy?
In design, every single detail matters. For award-winning design, every detail has to be impeccable. To reach this level, designers need a tool with advanced instruments that allow the in-depth adjustment of every aspect of the layout and at the same time grant the necessary freedom to implement creative vision.
We’ve summarized four key points that empower designers and their projects to rock it:
- Make a one-of-a-kind design, without code
- Create a superior UX while enjoying your designer’s experience
- Go the extra mile with visual solutions
- Be on the cutting edge of technology
Let’s have a closer look at these tasks and see how a no code platform can help achieve them.
1. Make a one-of-a-kind design, without code
If you were to start a visual diary and had to buy a notebook, which type of notebook would you choose: One with blank or lined pages?
It’s clear that the one with plain pages would give more creative freedom. Same thing in web design—unique layouts are likely to be born out of design tools where no limits are imposed. There are two issues with such limitless tools, however: Either a developer has to be involved causing costs but also creating an obstacle between the designer and her design; or the tool would be so complicated that the learning process will take days, weeks, or even months, and who can afford to spend all this time to explore a tool?
Tilda solves both issues with their no code website building platform that, on one hand, comes with a powerful built-in web design editor Zero Block that allows realizing any creative idea, and on the other—has an intuitive interface with comprehensive structure, so you can get right to work, saving you hours and days of watching tutorials across YouTube.
Tilda has been the pioneering website builder to introduce the principle of creating pages from blocks. What makes it stand out, is the fact that along with a collection of 550+ responsive blocks such as menus, online forms, contacts, etc., Tilda offers a killer tool Zero Block editor that provides full control over the content and layout and allows the design of outside-the-box websites.
It’s a favorite tool for award-winning designers mainly thanks to its powerful toolkit and easy-to-use interface that won’t scare anyone who has ever used a graphics editor.
“You can do pretty much anything with Zero Block, I really love it.” — Simon Wijers, Web Designer @SW Designs
📌 Pro Tip: Submit your Tilda-made website to Made on Tilda awards and visit the gallery to get inspired by outstanding web projects created on the platform.
Express your ideas with a variety of content types
Content matters. Your challenge as a designer is to find the most accurate way to present content, ideally so that each visual element contributes to uncovering meaning.
Since every story is different, you don’t want to be limited with the types of content and media you can use in your design. A wide range of elements is necessary in order to tell a story: Text, image, shape, button, as well as video, tooltip, HTML, online form, gallery. All these elements are highly customizable in Zero Block.
As a designer, you have full control over elements’ appearance, positioning, behavior on scroll; you can play around with the illusion of depth using layers, make pixel-perfect alignments with guides. Also, it’s easy to go wild with animation, custom gradients, flexible modular grids, resizing and aligning groups of elements, etc.
2. Create a superior UX while enjoying your designer’s experience
Creating great content is already a challenge. Making it user-friendly is doubly so. Fortunately, there are some best practices that can help improve your website’s user experience and give you the superpowers you need to create a web design masterpiece.
Make sure your design looks great on any screen
One of the first things any award jury member (and search crawlers, too, by the way) checks is how your design looks on different screen resolutions. Impressive websites should impress on any screen, so take your time and adapt your website carefully.
📌 Pro Tip: Responsiveness doesn’t only apply to the mobile version of your design. You also need to consider tablets and smartphones that can display your design in vertical and horizontal positions. Provide at least 5 perfect versions of your website: Desktop, vertical tablet, horizontal tablet, vertical phone, and horizontal phone.
On Zero Block, you can switch between 5 screens and manually adjust each element on each screen, change the composition, as well as set up a custom layout height. However, adapting your layouts 100% manually may be tiresome and time-consuming. See our favorite tricks to optimize the design workflow below.
Set your elements’ position in pixels or in percentage
To create pixel-perfect compositions, you want to control the position of each element on the X-axis and Y-axis as well as its width and height. In graphics editors, you would use pixels as units of measure. In Zero Block, you can use both pixels and percentages. Switch to the percentage in order to set a responsive element position that would change according to the screen size.
Bind elements to X and Y-axis
Fixing the position of an element on the X and Y-axis regardless of which screen it is seen from is another trick that saves time and ensures design clarity. Let’s say you want the logo to be always displayed in the upper left corner. You can then set the anchor for the element on the X-axis and Y-axis by choosing to align it to the Center, Left, Right, Top, or Bottom.
Auto-scale the layout
You can also automatically make your layout responsive to the screen width by auto-scaling toggle. This way, your design will stretch and always take up 100% of the browser window, even if your website is projected on a wall (during the award ceremony, for example 😉).
Customize modular grid as you like
In many cases, a website design starts with a modular grid. By defining the visual structure of your page, you maintain the visual order of elements and sections across your website.
Designers like to break the rules especially if their ambitions are sky-high. That’s why on Zero Block, you can configure your own modular grid: Set any number of columns, edit column width and spacing, margins, and more. This way, you take control of the composition on your site or of a particular section, as well as flexibly design typography and recurring modules.
Turn your Figma files into a live website. Automatically.
If you design website layouts in Figma, you’d be delighted to learn that the website layout created on Figma can be quickly turned into a live Tilda website using automatic import to Zero Block. This feature spares you from transferring every element from the graphics editor to the platform and manually rebuilding the layout.
The import process takes a couple of minutes: You prepare the Figma layout, get the API token and layout URL on Figma, paste it into Tilda, and the layout appears on Zero Block immediately. The desktop version is done. All that’s left is to adjust the layout to mobile screens, and the website is ready to go live. If you decide to change or edit the layout, you can modify or animate it as you like.
Find an illustrated guide to Figma into Tilda import, and see below what the process looks like:
3. Come up with impressive visual solutions
Typography is a game-changer, so use it wisely
Text often takes up a large area of a website, so typography has to be taken seriously. Sometimes creative work with typography alone can result in an honorable mention or an award.
Tilda believes that designers should not be restricted in their choice of fonts for a project. That’s why you’ll find all the necessary font sources to configure typography in the best possible way.
You can choose any font from a built-in font library with a variety of hand-picked web fonts including world-famous Futura, Open Sans, Georgia, Roboto, Graphik, as well as Tilda’s signature variable typeface Tilda Sans. You can also easily connect any font from the Google Fonts and Adobe Fonts libraries. On top of that, you can upload your own custom font files in 9 weights from Thin (100) to Black (900). Finally, you can upload and use variable fonts that are single font files containing an infinite number of variations of font weights.
Add magic to your website with animation
Animated websites are often several points ahead of non-animated ones as they look classy, create the “WOW” factor and increase engagement on your websites. Tilda comes with powerful yet easy-to-use animation tools that don’t require either code or any prior knowledge in the complex world of motion. You can select pre-designed effects (Basic Animation), create custom animations (Step-by-Step Animation), and make your site interactive.
✨ Basic Animation:
With Basic animation, you can revitalize the page in no time and animate elements as they appear on the screen. Six effects are available: Fade in, Fade in up, Fade in down, Fade in left, Fade in right, and Zoom in. Once you’ve chosen an effect out of the drop-down list, you can modify its parameters such as Duration (how long the effect will take), Distance (the range of motion for elements appearing from the side), Delay (allows you to dealy animation playback), etc.
The beauty of Basic animation is that you don’t risk making a mistake: All effects are built and tested by Tilda designers, the range of settings is carefully calculated. You can see the effect in action without leaving the editor which makes animation a piece of cake.
✨ Step-by-Step Animation:
You can make your story interactive and engage visitors (and jury) by setting up animation effects triggered by clicking, hovering, scrolling the page, etc. The effect won’t start unless the visitor performs a certain action, so it’d be a nice idea to add a hint, e.g. import an SVG arrow and add a text like “Hover over me.”
You have limitless ways to create memorable playful experiences.
Mobile animation? Yes, it’s supported. Moreover, you can change properties for each resolution to personalize each version of the website. This shows the attention to every little detail and can be a small but significant point when it comes to assessing a site for an award.
✨ Guide to Web Animation:
If you feel like animating your website but don’t know where to start, get inspired and use some ideas from Tilda’s Free Guide to Web Animation. It’s a collection of 25+ animation techniques with how-to video tutorials and pre-designed templates that you can add to your project and learn by doing.
4. Be on the cutting edge of technology
Web design is not only about visuals and UX, it also has to be technically optimized and comply with all the latest trends in SEO, security, adaptability, etc. In this section, get a list of essential tech requirements every website should meet and useful tools to expand website capabilities.
SEO at hand
All modern websites must be optimized. Period. But how do you optimize for SEO without hiring an expert? On, Tilda, you can do it yourself easily.
All Tilda-made pages are indexed well on search engines thanks to the consecutive positioning of blocks in the code. You can further optimize your website with a bunch of easy-to-set-up parameters: Page title and description, keywords and H1, H2, H3 header tags, alt text for images, free SSL certificate, redirects (301/HTTPS/WWW), custom 404 error page, etc. A built-in SEO Assistant will highlight any possible errors so that you can quickly fix them. Auto-generated robots.txt and sitemap.xml files also help improve page rankings without you doing anything for it.
Ensure the page loads quickly
This parameter influences SEO and clearly affects user experience, so you don’t want to screw up here. It’s especially relevant for “heavy” websites with lots of images and animation effects—just like the ones that qualified for awards. What can be done to keep your page load speed in the green zone? It’s a good idea to reduce the image size before uploading images to the website (it’s easy to do with online services such as TinyPNG). A lot depends on your platform.
On Tilda, the latest technologies are applied to optimize image loading and ultimately speed up the page such as Lady load, CDN (Content Delivery Network of servers deployed around the world that helps deliver images faster), WebP (images are automatically converted to this next-gen format), Adaptive image resizing technology, etc.
Secure your website
There are several risks that you and your website should be ready to face. First, DDoS attacks can make your site fully or partially unavailable. All Tilda-made websites are protected with special equipment designed to withstand multiple attacks at the same time.
Also, it’s crucial that you use HTTPS protocol for a secure connection. All data transfers that go through Tilda are encrypted and have a cryptographic SSL connection by default.
Collect user data and manage leads efficiently
No matter what website you are working on—an artistic portfolio or a practical business page—chances are, you have to add an online form to it. Not only this form has to be carefully designed but it also has to be correctly set up so that you won’t lose your potential customers.
For effective lead capture, you can set up online forms on Tilda and integrate them with 20+ data collections services, such as Google Sheets, Trello, Salesforce, Notion, Monday.com, etc. On top of that, built-in free Tilda CRM comes in handy for lead management.
Accept payments from all over the world
If you are about to design an online store, usability becomes one of the key factors to distinguishing a high-quality eCommerce website. On Tilda, you can create a fully-fledged online store thanks to the built-in Product Catalog and shopping cart and set up payment methods such as Stripe, PayPal, 2Checkout to accept payments across the globe.
Create a website together with your team
No matter what type of web project you’re building on Tilda, you can do it together with your co-workers. Collaborators feature allows teamwork for groups of creatives: You can grant various levels of access to your colleagues or add your client to the project in case they need to modify something.
Create your next award-winning site on Tilda without code
One image is worth a thousand words, one trial session is worth a thousand reviews—we’ll be thrilled if you decide to build your next outstanding project on Tilda (be sure to share it with the community, hashtag #madeontilda), sign up for Tilda now. ■
Tilda is a no code website building platform that empowers millions of people around the world to create award-winning websites, portfolios, business portals, landing pages, online stores, blogs, etc. On Tilda, you can build outstanding websites out of 550+ responsive blocks and use Zero Block, a built-in web design editor, to express your creative visions and make unique web designs. All these are wrapped up in an intuitive interface.
Find more Community stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
