Webydo: WYSIWYG Web Design For The Pros

Think of getting yourself a website – how would you go about it? Some might suggest employing a web designer, but a growing range of folks would be confident about creating their own website, thanks to the proliferation of WYSIWYG, do-it-yourself services like Weebly, Moonfruit, or Basekit.

The DIY route doesn’t always provide the best results, though – professional designers, whatever their preferred medium, still tend to produce the best-looking and most creative end products. It is strange, then, that there is a distinct lack of WYSIWYG services aimed specifically at the professionals.

Perhaps Webydo can start to change that. Webydo features Photoshop-style layout creation, drag-and-drop controls, and an enticing freemium pricing model. But can Webydo really be the breakthrough product for designers wishing to unleash their creativity on the web?

Like the article? You should subscribe and follow us on twitter.

Starting Out

Webydo’s commitment to design is immediately evident. The options for creating a new site include using a blank slate or a pre-shaped template. Alternatively, you can view a complete example site for some inspiration.

Webydo's initially offers one of three template options

Webydo’s initially offers one of three template options

Helpfully, Webydo provides a number of introductory videos, and, to be honest, they’re needed. The editing suite looks messy on first inspection, and it gives the impression that it has been set up for graphic design. Watch the videos, though, and things become clearer.

Webydo's tutorial videos are very helpful

Webydo’s tutorial videos are very helpful

Getting the Look

Despite first impressions, Webydo is actually pretty simple to get to grips with.

Webydo splits sites into the familiar structures of a header, a content section and a footer, and these are demarcated on-screen with Photoshop-like rulers. These rulers can be dragged around the editing area to adjust the size and alignment of your site’s various segments. The site’s overall width and alignment can also easily be modified via the Site Size menu, which is made available by clicking anywhere on the site’s background.

Webydo's Photoshop-like rulers are easy to work with

Webydo’s Photoshop-like rulers are easy to work with

To continue the background-related theme, should you choose a blank canvas as your website’s starting point (as I did) you’ll probably want to customize your background. The Site Background menu is home to options for plain colour and gradient backgrounds, along with images. Interestingly, the opacity of all backgrounds can be adjusted, leaving room for creative freedom.

Adding Content

Webydo offers a modest selection of content widgets in comparison to the likes of Weebly and Moonfruit. It is also abundantly clear from the selection on offer that Webydo is most suited to static, highly visual online presences. Widgets are a constant at the top of the editor screen, and each may be clicked to add an element to your site.

The first option is to add a shape. Shapes can be placed and resized manually with the click-and-drag technique, but one-click sizing options – making a shape fill your site’s width or height – are also available. For those looking for a bit more mathematical precision, shapes can also be resized to a specific number of pixels.

Shapes in Webydo are using to play around with

Shapes in Webydo are using to play around with

Webydo’s likeness to Photoshop becomes apparent, once again, when you come to fill your shape. The options of Fill (which includes the ability to use an image), Stroke and Shadow are all borrowed from graphic design. The addition of a lone image to your site is a very similar process to adding a shape, with the additional options to fill in alternative text, a title and a caption.

You can add captions to your images

You can add captions to your images

Text-specific areas can be size adjusted too, but otherwise, everything text-related is edited with a fairly unexciting palette of word processor-like tools. Nice to see a few non-standard fonts, though. Webydo’s video widget definitely deserves praise. Whilst it only runs using Flash, it allows for embedded YouTube videos to be resized at will, and the video controls can be colored to suit the rest of your design.

The text controls aren't anything special, but the video widget is nicely customizable

The text controls aren’t anything special, but the video widget is nicely customizable

Speaking of embedding, any Flash, HTML or iFrame content can be integrated into your Webydo site, which is just as well given the lack of available native blog function. Business owners, especially, will be happy to see Webydo’s drag-and-drop form builder, which has all the basic tick boxes, radio buttons and text fields one might expect.

Forms are easy to build

Forms are easy to build

Finally, there is Webydo’s Gallery widget. The three flavours it comes in are Slider, Slider Show and Matrix. Slider fades one image into the next, Slider Show slides between images, and Matrix displays clickable thumbnails in addition to the main photo on display.

There are three nice-looking slideshow styles to choose from in Webydo

There are three nice-looking slideshow styles to choose from in Webydo

The whole design area of Webydo seems very much aimed at the non-coding designer, who is likely to want something technologically simple, yet well-equipped to create striking visuals.


Here is Webydo’s strength, though – the CMS. Once you exit the Design area, and enter the Content editor, the various elements you’ve added are no longer moveable, but their content is editable. This is an arrangement which reminds me of the editable regions in Concrete5 sites, and it is perfect for creatives wishing to protect their design, whilst giving their clients control over content.

For even more control, Webydo allows you to choose, individually, which widgets should be editable in the client-facing Content section. The other notable professional tool available in the Webydo CMS is page-by-page SEO fields, which should make for good search rankings.

Subscription Options

Webydo’s freemium model is incredibly generous: you can host an unlimited number of sites on a Webydo sub-domain without charge, with each site containing 15 pages and coming equipped with 1GB of storage space, as well as unlimited bandwidth. You only pay to upgrade individual sites to a larger number of pages, or a greater storage capacity. If you pay annually, $7.90/month ($9 month-to-month) will get you 30 pages and 2GB of storage, and $15/month ($19 month-to-month) will get you a completely unrestricted site.


According to Webydo’s About Us page, this design suite was originally constructed as an in-house tool for a creative agency, and that is precisely what Webydo feels like – it is unpolished, but well-equipped for designers wanting an easy way to create simple, good-looking sites for clients.

Given that Webydo is still in beta, it would be nice to see more functionality added in the long run – a blog option, for instance, would be a good start. It also must be said that, for the average, non-professional user looking to create an affordable, basic website, Webydo simply can’t compete with the simplicity of Weebly or Moonfruit.

Webydo has been created with professional use in mind, though, and given that it provides both a competent design suite and a good client CMS, any code-phobic designers wanting a convenient, start-to-finish web design solution should certainly give Webydo a try.


An unpolished, but competent WYSIWYG editor for the professional