The rapid evolution of the web signified major changes in the graphic design profession. While the necessity for print design and branding is still extremely important, most of our commissions as graphic designers now involve creating and managing websites.

The graphic design skills we spent years to perfect are still needed but insufficient by themselves to give us a competitive position in the website design market. Many veteran graphic designers unable to adapt and learn the new necessary web design skillsets have left the field, and the graphic designers who remained became enslaved to inefficient process that depended on developers to convert their graphic deign into handwritten HTML code.

Well, not any more! Webydo brings nothing less than a revolution in professional web design. In This post I’ll be analyzing this new free solution, in depth.

Webydo = Professional Code-Free Web Design:

Nowadays in almost every graphic design academic program, even though the focus is on still print design you are taught some basics on HTML, CSS and how to create websites from start to finish. I personally attended an academic graphic design program, after already having degree as web designer/developer because I wanted to enhance my print design skills further.

The coding knowledge in the graphic design program was insufficient to even build your own portfolio site, and honestly what made me frustrated was that they didn’t covered at all the emerging technologies while focused on explaining table based web design years after it was deprecated! I recall vividly the conversations with my co-students coming from different backgrounds and their frustration.

Your graphic design course experience might have been better, but you will definitely agree that by itself it wasn’t enough to provide you with all the freedom you felt in print design. And even after spending hundreds of hours of watching video tutorials and filling your head with HTML, CSS, JavaScript, jQuery, XML, MySQL & PHP, you probably realized that these are just the basics you need to know in order to build a modern dynamic website.

You might have give up and outsource your layout designs for other people to code; or simply continue learning, feeling frustrated that you no longer practice the creative profession you studied and love; or you compromise and buy premade templates and customize them as much as your coding knowledge allows it, still not feeling the joy and fulfillment of bringing your own vision to flesh.

So why be enslaved to this process that depends on handwritten code? Why lose money by outsourcing at least half of your web design project or buying templates? Why not design the website exactly as you want it to be? Aren’t you supposed to be a designer?

Webydo solves all these problems with sophisticated DMS (Design Management System), an online software that liberates us from our dependency on handwritten code or limiting DIY template. With Webydo we can see our design in action, immediately. Webydo’s graphic interface is WYSIWYG (What-You-See-Is-What-You-Get), extremely friendly yet professional and it allows designers to bring any web design to life. Webydo simply lets us focus on the creative side, while its innovative code generator automatically generates a code updated to the latest industry standards for us!

Webydo offers its revolutionary online software free of charge for designers. You can design, manage and host as many websites as you like on Webydo’s sub-domain, along with reasonably priced Premium plans for hosting on domain for your clients.

Webydo gives graphic designers full web powers and is a much-needed addition to our professional design toolkit, along with Adobe Photoshop, InDesign or Autodesk softwares.

Feel free to read my last tutorial on how easy it is to build your portfolio website with Webydo.

In this post I will provide a full analysis of Webydo, explaining how you can create and manage powerful HTML websites form scratch, as well as show you how you can easily add some more complex web design elements, such as sliders and forms that would otherwise require extensive coding knowledge. And we’ll do all that without writing a single line of code. Finally we’ll explore the CMS features and the creative freedom this new system is offering.

So, let’s see some action… 🙂

How to Work with Webydo:

I assume you already have an account in Webydo. If not register for one. The whole system is free for designers, so there is no risk involved. Following your log in – you’ll be greeted by this screen that let’s you choose your web design starting point.

How to Work with Webydo

How to Work with Webydo

For this demonstration purpose we’ll select “Blank”. This option allows you to start designing your website from scratch, with complete creative freedom.

How to Work with Webydo Screen2

How to Work with Webydo Screen2

All the tools we need to set our layout are located on top, below the black menu.

We can also right-click on the canvas, and from the menu select “Insert” then the element we want to place in the canvas.

Creating New Pages:

Click pages and then choose “New Page” and select Blank.

Creating New Page - Screen1

Creating New Page – Screen1

Creating New Page - Screen2

Creating New Page – Screen2

From the “Pages” menu you can then select “Page Settings” to name your page.

Setting Up a Grid:

Designers like to work in professional environment that allows pixel-by-pixel precision. Webydo has many tools, like smart guides and snapping and you can also set up a grid to help you compose your site.

To set up a grid simply go to “View” menu and select “Grid Overlay Generator”.

Setting up a Grid - Screen1

Setting up a Grid – Screen1

Click “Show” to make the grid visible. You can then fine tune the grid settings while seeing your grid changing in real time.

Setting up a Grid - Screen3

Setting up a Grid – Screen3

Shapes, Images and Text Frames:

Through the upper Insert menu, you can add – Images, Videos, Galleries, Menus, Forms, widgets, etc.

Text:

Let’s add a text frame, and take a moment to discuss how the elements are behaving in the editor. Clicking an element once gives us a bounding box around it where we can set its dimensions by clicking and dragging the anchor points. It also gives us access to options like stroke, fill and shadow on the left and dimensions/arrangement on the top.

Text - Screen1

Text – Screen1

We can also move the element around with the arrow keys or the mouse. And alt+drag it to duplicate it.

To edit the element we simply double click on it.

Text - Screen2

Text – Screen2

The top menu changes to reflect the nature of the element. In this case it gives us typography options so you can copy the text you want and change the font, size and color till it suit your needs. You can choose out of 600 free web fonts. Then you can also change the kerning and various paragraph settings.

Shapes:

To add a shape, simply click on the “Shape” tool.

Shapes - Screen1

Shapes – Screen1

You can right click it and choose “Arrange” -> “Send to back” to put it behind your text.

Also you can set a fill color from the “Fill” menu on the right and a stroke from the “Stroke” menu, and choose how to setup the corners of your shape to fit your composition.

Shapes - Screen2

Shapes – Screen2

Images:

To add images simply click the “Image” icon. You can then double-click the placeholder and add the image of your choice.

Aside from shapes you can change the corners in images and text frames in a similar way.

Images - Screen1

Images – Screen1

Adding a YouTube Video:

To add a YouTube video simply click the “Video” icon, from the elements menu and place the video wherever you like.

Adding a YouTube Video - Screen1

Adding a YouTube Video – Screen1

You then simply type its title and add its URL from YouTube, and that’s it!

Adding Widgets:

To embed external code on your website like for example Google maps or a social sharing button etc., you can use the Widget element. From the element menu click on “Widgets”, and place the bounding box where you want your widget to appear. In this example I will show you how to add a tweet button. Head over at Twitter Developers, and grab the tweet button code (https://dev.twitter.com/docs/tweet-button).

Adding a Widget - Screen1

Adding a Widget – Screen1

Select your Widget element and click HTML from the properties menu on top. Then simply paste the provided code, to the code box. Hit update and you are done! You can add more social buttons in a similar way, by copying their respective code in a widget!

Widgets are really powerful and will enhance your website’s functionality without much effort. You can even set and add a complete electronic store through the e-Commerce widget!

Adding a Widget - Screen2

Adding a Widget – Screen2

Adding a Slider:

To add a Slider we can use the “Gallery” element. You can place the element wherever you like and then customize it easily by exploring its options. For instance to specify the type of slider and whether it has text caption and arrows make sure you select the whole gallery element by clicking it.

Adding a Slider - Screen1

Adding a Slider – Screen1

You can add your images by clicking “Manage” and then “Upload Images”. You can delete an unwanted image by simply clicking delete and also arrange the order they appear using the quad arrow cross on their left and dragging the images up or down.

Adding a Slider - Screen2

Adding a Slider – Screen2

To specify the transition effect, double click on the image inside the gallery element. And select the desired image transition from the pull-down menu, fade in out and many other options. You can also specify the time duration of the transition in seconds.

Adding a Slider - Screen3

Adding a Slider – Screen3

You can click the arrows to see the next and previous frames and edit their caption text.

Adding a Slider - Screen4

Adding a Slider – Screen4

And basically that’s it! You have a working slider to your website!

Adding a Slider - Screen5

Adding a Slider – Screen5

Add a Contact Form:

To add a contact form, simply click on the “Form” element. While the form element is selected we can set the email or (emails) the form data will be sent to from the right panel.

Adding a Custom Form - Screen1

Adding a Custom Form – Screen1

You can then design your form by adding text inputs, dropdown menus, radio buttons, checkboxes, shapes, images and text from the top panel.

Adding a Custom Form - Screen2

Adding a Custom Form – Screen2

We can align our form elements (and all elements) by shift+clicking them and choosing the desired align option from the properties menu on top.

Adding a Custom Form - Screen3

Adding a Custom Form – Screen3

You can change the label texts by double clicking them.

Adding a Custom Form - Screen4

Adding a Custom Form – Screen4

Finally from the field menu on the right you can set the validation options of each field. You can also specify if the field is required or not, and if the error message is visible or not.

After you publish your website your form will be fully operational and you can receive the data in the email you specified and in your dashboard’s inbox.

Manage Content Easily:

Using the integrated CMS (Content Management System) you can enable your client to easily update the website’s content without messing up with your design and layout.

Your clients get a similar WYSIWYG canvas like yours but they can only see their own website, and they cannot mess up the design, only update text and images you left editable for them. When designing your site you can easily lock specific design elements, preventing your artistic control. You can preview what your clients will be seeing by switching to the “Content” tab.

Manage Content Easily - Screen1

Manage Content Easily – Screen1

Using the client’s CMS, your clients can simply change any element you have left editable by simply clicking on it, without affecting the layout at all!

Manage Content Easily - Screen2

Manage Content Easily – Screen2

To ensure that your clients won’t be able to change an element, you can simply select it (while on “Design” view) and click at “Non-editable by CMS”.

Manage Content Easily - Screen3

Manage Content Easily – Screen3

To add a new CMS user to a specific website go to your dashboard and select “New CMS User” then fill in your client’s details.

Manage Content Easily - Screen4

Manage Content Easily – Screen4

Note:

if you want to try this feature, DON’T use the same email you used to register on Webydo! This can limit your own designer permission, as one account can’t have 2 roles!

Publish Independently:

Press “Publish” and your client’s website is live online, immediately, enjoying advanced cloud hosting and built-in management tools (CMS+SEO). What you might want to do afterwards though is go and setup the analytics tracking code, and Google webmasters tools.

From your dashboard click the gear icon and then go to services. There you can simply add the respective codes. After you save make sure you re-publish your site for the changes to take effect.

Publish Independently - Screen1

Publish Independently – Screen1

In order to add your own domain name, go to the domain tab and click “Add new domain”. You will have to update to a Premium plan in order to do so. Webydo offers the Premium plan for $7.90 a month with a yearly plan, which is a great price for this holistic service.

Publish Independently - Screen2

Publish Independently – Screen2

Afterwards make sure to set your CNAME address in your domain settings to point at Webydo, and wait up to 2 – 24 hours for the DNS to update.

Participate – By Designers, for Designers:

Webydo is created by designers for designers. Every feature in the system is developed in order to fit your needs. Joining the Webydo community, you can suggest new features, report bugs, and vote to prioritize which feature will be developed first.

Participate - By Designers, for Designers

Participate – By Designers, for Designers

Your active participation ensures Webydo will continue to develop in a way that fits your specific professional needs, adding a valuable asset to your design toolkit. This “open source” development approach also differentiates Webydo from big professional software companies that missed out on this important aspect of web design, professional code-free web design.

Total Creative Freedom:

Graphic designers are coming out of years of slavery to handwritten code. With Webydo designers can finally see their design in action and be in charge of the whole website production process, easily creating and managing professional websites on their own.

I’m truly glad I came across Webydo and I am curious to see what you’ll think.

Try Webydo yourself, and tell me about your experience in the comments below!