Illustration
Animation
Design
About
We love buttons
Contact
Stuff
Lookbook
Shop
Contact
Website Elements Kit
A collection of tried-and-true website elements that help craft an outstanding page with just a little creative tweaking. Headers, pop-ups, hotspots, slideshows and footers are all ready for publication in no time. Just click Open in Readymag at the bottom right corner of the page (and create an account if you don’t have one), then copy the elements you need to your own project, configure and hit Publish. Plus, it’s completely free.
Each template here is accompanied by a few of usability heuristics for interface design and some funny bits for your amusement. Hopefully, both will be useful.
This project was created by Readymag—a tool for designing the web without code.
00
Hey! Here are a few dos and don'ts of using popups.
While closing the pop ups on this page is fun, keep in mind that nonsensical modal windows and those of marketing purposes are an inherently user-hostile act. This sort of engagement basically trains your users to use ad-blockers instead of viewing the web unfiltered in the long run.
> Ok, got it
Yes, one more pop-up to close
Don’t use popups that take over the screen
one more window to close
(close)
Show popups to help users rather than push them
Close me
And the last one to close!
(Will do)
Pop-up windows can be helpful as well as distracting. A clear exit notice or a sort of discount announcement, when done right, are typically effective. But let’s imagine you run into a slew of popups browsing airline tickets.
Feels pretty annoying, right? Yeah, it is. Intrusive pop-ups and sidebars are pure distraction. Wield your power wisely.
02
Use text, image, or both in your Tip.
You’ve clicked on a Pin.
Surprise!
See? Hotspots can be activated on hover.
Add text and visual annotations with a Tip element.
You can select any symbol for your Pin, change color, and add a border. Just give it a try!
Place it anywhere on the page.
And create more engaging web projects!
You see this copy on a Tip.
Pins as well as Tips can be moved independently and placed anywhere in your layout.
This Hotspot is activated by click. Betting you’ll try to do that twice!
Anywhere!
Actually you can change the color of the Tip, add a radius, and turn off shadow for this pop-up window.
But first copy that into your account and open the widget settings.
Yeah, like this one.
If you’ve ever wondered how these sorts of show-stopping visuals are created, this section will be of most interest for you. That’s actually the power of Slideshow widgets with some specific settings turned on, grabbing your attention quickly and helping convey information in a genuinely unique way. Just copy this page to your account and explore the nuts and bolts of how to work with Picture and Slideshow widgets.
03
Hotspots are a great choice for crafting footnotes, price tags, notifications, burger menus, or even product galleries. As soon as visitors hover over or click on the Hotspot, a caption appears. Head over to the video tutorial for thorough instructions on how to set them up.
04
Concise well-crafted forms can help with gathering on-site user feedback, managing reservations, ordering products, or even collecting secret declarations of love. You can add six different field types to your forms in Readymag: starting with standard text, numbers and emails; and ending in specific checkboxes, dropdowns and files.
Setting up Forms is pretty cut and dry, but our video tutorial with all the necessary instructions is always close at hand. So, choose any form you like to style away and hit any button below to stay updated on Readymag features and editorial spotlights.
05
06
While footers get less attention than the top of the page, they should still be consistent, meaningful and easily accessible. The most common footer components include: company or product details, contact information, doormat navigation, site map, social media and secondary links, plus privacy and user policies. Add content to the footer and design based on the business and user goals.
hello@title.com
Nothing-to-add footer
2022
Just another footer
Use it a second chance to convince the visitor
2022
SEO-bomb footer
2022
Every template here can be added to your own project—just click Open in Readymag at the bottom right corner of the page and copy the elements you want.
If you need inspiration or a quick prompt to start designing, try our set of websites, portfolios, digital editorials and other web projects made by Readymag users.
07