Blog  /   Product Releases

Comment

Breaking Down Webydo’s New Themes.

By Caroline Reder

Apr 6, 2016

So often themes get a bad rap amongst designers. That’s most likely because of the small, yet noticeable minority of offenders that use themes, changing little more than the text and images.

That being said, if it’s done strategically and with care, using themes can be a powerful way to streamline your design process and rapidly create websites for your clients. All it takes is understanding what your clients need for their website. If you dig into a theme’s structure and customize, you will save both time and money while producing fresh results every time.

Our newest additions to the Webydo Studio - Creative Mess Agency, Marti Photography Portfolio and Pomodori Restaurant - are responsive, mobile-optimized themes designed for easy customization and to help you create a memorable browsing experience.

Designed for Conversion.

The attention ratio - ratio interaction points on a page to the number of intended actions - falls around 40:1 on a typical homepage. How to eliminate this noise and streamline what we are communicating to our visitors is one of the biggest challenges as a designer.

Gone are the days when a designer can simply create a site and collect the check. Marketing is a prerequisite as websites are expected to convert. Every page represents another chance to impact a visitor and drive them in a desired direction. Success is certainly being measured and if visitors aren’t converting into customers, then that means it’s time to take another look at the design (and copy).

Here are a few principles you will see cropping up across these new themes:

• Directional Cues
• Whitespace
• Scarcity
• Social Proof
• Contrasting CTAs

 Close-Up on Fluid & Fixed Grid Galleries.

A common thread across these themes is the use of Webydo’s new grid galleries, most prominently displayed in the portfolio theme.

Not 100% on the difference between fixed and fluid?

Fixed grid galleries are defined in pixel-based dimensions. That means that (ideally) you would adjust the width and height of these type of galleries at each breakpoint for an optimized viewing experience.

Fluid grid galleries are determined by percentage which means that they will automatically adjust to any user's screen resolution. They act exactly as they sound, flowing naturally within the dimensions of their parent container. Whenever the device or screen size is changed, the width and height automatically adjust to the specified proportions of the viewing environment.

In the Webydo Studio you have the option to:

• Add arrow navigation buttons on popups
• Create and combine hover effects simultaneously
• Set the number of columns in the gallery for desktop and mobile individually
• Fit images with the choice of ‘cover’ or ‘contain’
• Set the grid to produce full-width images on mobile
• Change the position of the title and description
• Display a text background and border

We invite you to take a deeper look into the features and techniques we used to create these new themes to better help you customize websites for your clients:

Creative Mess, A Theme for Digital Agencies

See Full Theme

Creative Mess is a modern agency theme, crafted to express a client’s brand, show off their range of services and highlight previous projects. This multi-page website is designed to create an impact, giving visitors a comprehensive look into who your client is and what type of work they produce.

The range of features used on this theme - from galleries and sliders to various effects and animations - serve to showcase how these work in tandem with one another to weave a comprehensive brand story for any client.

Feature Highlight: Video Background

You often see video backgrounds above the fold, in the hero section of a website. We decided to use this design element in a less obvious way to add atmosphere and interest to the contact form - a typically plain section and afterthought as far as design is concerned.

Here’s the breakdown of how we created this section:

Step 1: The Shape Element

We dragged the shape element onto our design canvas, set the height to 740px, selected fit-to-width and adjusted the opacity to 100%.

Step 2: Video

We then added the video element onto the canvas, set the height to the same height as the shape, selected fit-to-width, aligned the two elements and adjusted the opacity to 35% so that the video would take on the purple hue of the shape. The video itself, we set to autoplay, loop and we chose to hide comments. 

Step 3: Contact Form & Social Media Icons

The finishing touches were simply adding the form element, a text box with the contact information and social media icon images onto our design canvas. 

This theme also includes the following features:

• Client Logo Rotator
• Testimonials Slider
• Interactive Buttons
• Fluid & Fixed Grid Galleries
• Parallax Animation
• Image Hover Effects

Marti Photography, A Portfolio Theme

See Full Theme 

Marti Photography is not limited to photographers - this theme is suitable for a variety of small-medium businesses looking to display their work in an aesthetic way and promote their services. It was designed to not only visually display a range of work but also tell a story.

Adding user-generated content to your client’s site is a powerful conversion tool and creates a personal touch; customers trust the voice of other customers often more that of the brand. Marti enables this story-telling aspect by employing a testimonials slider right on the homepage and places for clients anecdotes throughout the site.

Layout Highlight: About Page

We decided to design the about page using the same technique as our blog; creating a split grid effect with a static image on one side.

Here’s the breakdown of how we created this page:

Step 1: Photoshop

We created this image Photoshop with a solid background fill and picture set to half of the width of our canvas. Then, we uploaded this image as the background of the About Page, selecting the following:

• Size: “Fit”
• Position: “Center”
• Fitting: “No Repeat”
• Scroll With Page: “No”

You might be asking why we didn’t just upload an image and put it on one-half of the page and add a shape to the other. If you are reading this article on a desktop, try slowly making your browser window smaller and see what happens; the picture to the right flows with the screen, adapting to every new size with which it’s presented while the true center stays the same. If we did use an image and a shape, you wouldn’t always get this perfect aspect ratio.

Step 2: Additional Elements

The rest of this page’s design was pretty straightforward. We added a textbox, hover button, image and gallery to the right side of the page.

This theme also includes the following features:

• Client Logo Rotator
• Testimonials Slider
• Interactive Buttons
• Fluid & Fixed Grid Galleries
• Parallax Animation
• Image Hover Effects

Pomodori, A Restaurant Theme

See Full Theme 

This restaurant theme was designed to immerse potential customers and get them to book a reservation. It embeds ample space in which to highlight a restaurant’s cuisine, ambience and branding with a CTA button for booking a table at every turn.

With a dedicated pages displaying the menu, events and reservation forms, the basic needs of any client running a restaurant are already there - you simply need to customize and design the site to complement your client’s business and branding. It should be noted that while we used a simple form for the Reservations Page, you’ll find a more advanced reservations plugin in the Widgets section of the Elements Panel in your Studio.

Element Highlight: 2-Column Fluid Grid Gallery

Using the fluid grid gallery in this way - with a solid color swatch and a picture - allowed us to optimize for any screen size and all breakpoints.

Here’s the breakdown of how we created this page:

Step 1: Fluid Grid Gallery

We dragged this element from the galleries section of the Elements Panel onto the design canvas and set to fit-to-width.

Step 2: Settings & Images

You can see a preview of the settings for this gallery in the image below and otherwise, we just loaded a color swatch and image into the gallery itself.

Step 3: Additional Elements

To complete this section, we added a textbox, hover button and image icon over the color swatch of the fluid grid gallery.

This theme also includes the following features:

• Client Logo Rotator
• Testimonials Slider
• Reservation Form
• Interactive Buttons
• Full Width, Fluid & Fixed Grid Galleries
• Parallax Animation
• Image Hover Effects

Webydo Spotlight: Themes.

Check out all of our themes in the Webydo Spotlight or by going into your Dashboard. If you have additional questions about any of the design features you see on these themes, please feel free to contact community@webydo.com.

Have you used any of the new themes? Tell us what you think in the comment below.

Brought to You by Webydo.

See how Webydo fits into your design workflow and business.