Designer guidelines overview

The Yola Style 

A Yola Style is a design template built for the Yola site builder.
The Style defines the look and feel of a website outside of the content area that gets populated by a user. A Yola style has the following properties: Background, Page Header, Navigation, Banner and Content Area. We believe that a good Yola Style has polish and innovative style elements. We're fans of style elements like shadows, framing, gradients, reflection, graphic art, etc.

Design flexibility

It will be up to you, as a designer to decide if you want to allow the user to change the background and banner of a design. We have noticed that flexible designs tend to be more attractive to our users, although some designs with static backgrounds have fared well.

Width guidelines


Styles should have content areas that are either liquid, or support content of at least 950px wide.

Images

If we approve your style, your style will be integrated in either the Yola free style or premium style gallery. All images used in your style must be available for purchase with extended licenses or you must own and relinquish redistribution rights for that image once we pay for for the accepted style. For example, images you took or created fall into that category. If you use stock images you can use the watermarked picture or the limited license for your design, as long as you provide us with a link to buy the extended licenses. Our stock vendor of choice is Fotolia.com and once you become a regular designer you may become eligible for free Fotolia credits.

Images you find on the web that do not have specified rights are NOT acceptable.

 

Style Elements


The Background

The background of a style needs to work with variable screen heights and resolutions. The best way to achieve this is through solid colors or tiled backgrounds, although this could also be achieved through background images faded into a solid color, gradients or vertical tiles.

If you choose to have the background editable by the user, the background must be contained into one single layer. The foreground must keep its appearance and design integrity regardless of what the background would be.

 

Example 1: Background fading into a solid color

 Example 2: Background that tiles 

Example 3: Background non editable by user

The Page Header

The page header is an element that will always be editable by the user. You must choose the following properties not editable by the Yola user:
  • A position for the header. This can be on top of the banner, above the banner, under the banner, etc
  • A color and font for the header - this is not editable by user
  • Alignment (left, center, right, etc)

 

Example 1: Heading over banner 

Example 2: Heading over banner 

Example 3: Heading above banner, different styling 

The Banner

The banner is an optional element that can be set to be editable by the user. We advise to design with that in mind although we are open to designs with no banner (based on user requests) or designs with a banner that is so integrated with the design that can not be changed by the user. Due to user demand, we are also looking for creative designs that do not have a banner.

The recommended banner size: approx. 950 x 150px. If the banner has the same size as the body, minimum banner width should be approx 700px. We encourage creativity with your banner as we believe this element to be very flexible within the design you are creating. Framing, different shapes and sizes for your banner are encouraged. Any frames, shadows, accents should be provided as a different layer in the PSD document.

 

Example 1:  Banner framing, shadows, irregular shape

Default

Example 2: Framing, shadows, overlayed images (each on different psd layers)

Default

Example 3: Framing, shadows, overlayed images (each on different psd layers)

Default


Changed by user 


 Changed by user


Changed by user

The Menu

The menu is a page element editable by the user. Users can add menu items with any character length so any images used as background for menu items should tile appropriately. Some guidelines we encourage:
  • Provide us with styling for selected as well as unselected menu items and hover items
  • Do not make navigation in line with page header (as they both group they tend to break)
  • Explore different navigation layout (while our styles have mostly horizontal navigation we encourage designers to explore style using vertical navigation)

Content Area and Page Wrap

The content area is layered on top of the background and can have its own styling. The styling should contain:
  • Required paragraph font type, color, link color, hover color, heading color and font type
  • Optional framing, background color
  • Background should be as a separate layer than background, wrap, etc
In addition to the body area, styles can have a wrap area that holds the banner, menu and user content area together. This should be a on a separate PSD layer. The wrap and content area should be a full frame and should tile horizontally for variable content heights.

Example 1: Wrap with framing and file images, no framing on content area 

Example 2: Framed wrap and content area   >>>>>     .   >

Example 3: No wrap, framed content area with fixed bottom 

Design Elements

We believe design elements enhance a style and give it a unique look and feel. Some of the things we experimented with are shadows, frames, lines, static bottom images, etc. We encourage you to push these limits and come up with creative and polished designs.

PSD Layers 

Your Photoshop document should not have layers merged. When we integrate your style we'll need to separate some layers into different resources in the finished style to allow for user editable backgrounds and banners.

PSDs with merged layers will not be accepted.

© Copyright Yola 2009. All rights reserved.   Terms & Conditions  |  Contact us  |  Yola.com