Sandvox Designers Only

This is the design part of our Designer's Kit. This page has nothing to do with particular CSS or elements. It can be read by a web designer who is interested in mocking up a prototype of a Sandvox design, or it could be used as an introduction for a combination designer/coder.

Styles We Are Looking For

The sky is the limit! Styles can range from fancy and artistic such as those at CSS Zen Garden (subject to the technical constraints of a general website building program) to basic and simple like Wordpress themes.

Visual effects like gradients, subtle textures, shadows, and simulated glossy surfaces are nice elements to incorporate. Actual images, done tastefully, can enhance a design as well.

In practice, though, the simpler the design, the better, because it is more adaptable to a wider number of users.

Design Overview

Please download this reference page. You can use it as a checklist for components of a Sandvox design. See below for details.

Main Sections of a Page

These are the elements that are required for a sandvox design. But almost all elements are optional for the user to include on their website. In other words, the design must look good with the optional elements present or absent.

Header

Main Body

Objects are small areas of content (image, text, etc.) found in the sidebar or as part of the text content. A object optionally can have a Object Title.

Footer

The Footer is just an optional area at the bottom containing text.

Design Constraints

The designer has a lot of flexibility here but we do have some constraints and standards to keep in mind:

Logo Size
Maximum size is 200 pixels wide × 128 pixels tall. Here is an example (with transparency):

image:sample_logo.png

Object Width
A object's content area needs to fit images of 200 pixels wide or less. Consider margins around these images. Here is an example picture:

image:200wide.jpg

Site Menu
The design should accommodate at least 7 page titles in the site menu.
There are three possible states for a site menu option: Not selected (a link to that page), selected (not a link), and selected section (with a link to the main page for that section.)
Large Image
up to 640 pixels wide (on a page with no sidebar) or 320 pixels wide (on a page with a sidebar).
Thumbnail Grid
Images are up to 128 pixels square. Depending on spacing, there will usually be room for 3 or 4 across on a page with a sidebar; on a page without, maybe 4 or 5 across. Here are 3 examples in square, portrait, and landscape aspect ratios.

image:square.jpg image:portrait.jpg image:landscape.jpg

Color and Contrast
Text should be of decent contrast and size; color palettes should be used that work with the color blind. You can use Vischeck to test colors.
Page Width
A design should be no wider than 771 pixels. (Yes, many screens are wider than 800 pixels these days, but it is better not to force a user to have their browser window set to fill the whole screen width. Thus, we prefer to have our designs work with smaller widths. This is also advantageous for devices like the iPad, which don't have a wide screen.) Of course a background image will make a design look good when the window is stretched wider.

Planning for Varying Content

The design may be created such that it varies depending on the presence of optional elements. Here are some examples:

We also have a special distinction for Home Page. vs. other pages. Some designs might have a taller banner or larger site title but this is not common.

We also have the ability in the program to turn "bordered" attribute on objects. Please design for both options.

Building Variations

Many designers have been creating families of "variations" of a single design type. Usually everything is the same, except for the dominant color. Or, there may be a standard width design and a "wide" variation of the same design. Generally you would create a number of extra PhotoShop mockups after making the first prototype.

Design Flexibility

The designer has a number of choices:

Optional opportunities for nice "goodies" to make your design really shine.

Please take advantage of these as much as possible. Let's be sure that "special effects" should not be intrusive or annoying.

Delivery Suggestions

Main Content Variations:

There are three kinds of main content in a page. These could be placed into three separate mockups, or they could just be stacked on the same page mockup:

Since our web pages are fairly flexible, it may be useful to present a few variations of the basic page design if the presence or absence of an element, or a variation in size, would impact the overall look of the page. Depending on your design, some of these may or may not be worth doing.

Some suggested variations that might be useful. This is only a suggestion.

Additional Deliveries

Thumbnail (required)
A single thumbnail image representing your design. Not a miniaturized version of the page, but an image to indicate the essence (color and images, not text) of the design. Sandvox adds a rounded-rectangle border around this image, so do not include any border in your image. For thumbnails showing a pixel pattern from the design, the image can be its minimum size of 100 pixels wide by 65 pixels high. Most thumbnails should be double size (200 by 130) or even quadruple size (400 by 260) for a future version of Sandvox to display at a higher resolution ... but if the thumbnail image has pixel textures equivalent to the web page, it should not be scaled up. If your design comes with its own generic banner image (that can be redistributed with the design), it might be part of the thumbnail as well. You can use a multi-resolution TIFF if you want to make sure the thumbnail looks good in several sizes. Seven examples of different designs are shown below.
image:example_thumbnails.png
Banner Image (Depends on Design)
If your design requires a banner image, you should include a general-purpose, attractive image that complements the design.
Placeholder Image (optional)
It is often nice to have a sample image (640 pixels wide or 640 pixels tall) that works well as a "photo" page example, to match the graphical look or theme of the webpage.

Making Use of Third-Party Images

If you are distributing a design, it is your responsibility to make sure you have clearance for any content you use. You need to document the sources and permissions and include that in the deliverable.

Images used in designs you distribute need to be created by the designer, or need to be explicitly known to be OK for redistribution (since you are not just using the stock image, but are then distributing to others). This means no trademarked images (like company logos). For content by others, there a number of approaches:

Here are some stock photo sites with good potential:

Fonts

Fonts to use for standard text

  1. Feel free to specify Mac-specific and/or PC-specific fonts as first choice, in case the browser has those fonts installed. Please annotate the font names, and stick to standard fonts installed on Macs and/or PCs
  2. As a main fallback, specify a font that is found on both Macs and PCs:
    • Arial
    • Arial Black
    • Comic Sans MS
    • Courier New
    • Georgia
    • Helvetica
    • Impact
    • Times New Roman
    • Times
    • Trebuchet MS
    • Verdana

Fonts for Header Textual Images

You can make use of the fonts that are already installed on OS X if you are planning for this technique. (We can conceivably get the rights to other fonts but that's more difficult; see below.)

Using @font-face Fonts

This more modern technique is great for embedding different fonts, and it's much simpler than the Header Textual Images. However, it is not recommended to use these for the fonts that Sandvox users are likely to be editing, e.g. the body text, because it is not currently easy or possible to activate a whole font family on the bold and italic variations of what is typed into Sandvox. Plus, fonts loaded only over the web are not shown in the font chooser within Sandvox. Therefore, it's a good idea to stick only to titles and generated text, where the user is not likely to want to change the font.

Font Sources

Fonts for Header Textual Images need to be redistributable if you (or Karelia) is to make your design available to others. Here are some potential sources of fonts; you will need to secure permission and possibly pay a licensing fee to the creator of the font if you are going to be distributing your design.

FontSquirrel has a good source of fonts that can be embedded with @font-face. Another option is to reference (and not include) fonts that are available online, such as those from the Google Fonts.

Keywords: designer, designers, guide, guides, guidance, quick, quickly, modify, modifying, modified, change, changing, custom, customize, customizing, customized, theme, themes, design, designs, color, colors, colour, colours, layout

How can we improve this page? Let us know.