Website Design and Cutup

Recommended practices for designing websites for use on Synergy 8.

The website cutup phase is the practice of converting a website from an image format (such as a Photoshop or Illustrator document) to a collection of HTML files, CSS rules and images. It's essentially turning an image into a website prototype.

A cutup website can be implemented on a website platform such as Synergy 8. By following these guidelines you will make the cutup process easy, as well as ensure your site is fully functional and easily maintainable by admin users.

1) Website Logo and Header

  • Keep the logo and header as small as possible while still achieving the desired result.
  • It is common practice to include phone number or other contact details in the header.

2) Dimension Restrictions

  • Canvas size: The background of the site needs to be visible in the mockup. Think about what will happen when the screen size expands, what colour is behind the main website area? If an image background has been used, what will happen when the background area expands? Also keep in mind your target audience will likely be viewing the website on a full resolution display, sometimes up to a width of 1920 pixels.
  • Fixed site width: For websites with a fixed width, do not have any non-body / non-background elements past the fixed width boundary (usually 1200 pixels).
  • Variable site width / responsive: Specify early on in the process which framework you will be using and consult their documentation to ensure that you mockup the design correctly. Using a responsive website framework will increase cutup costs in most cases. Alternatively you can use Synergy 8's mobile design feature to specify a desktop design and a separate mobile design.

3) Use a Grid System

  • Using a grid template in your favorite design software will help to ensure that your website translates to a web environment properly. The following templates are commonly used by our design team;

4) Use Consistent Margins and Spacing

  • Ensure that spacing and margins remain consistent throughout the designs. Keep in mind that a cutup team will be assigning coded rules for margins and padding in a pixel or percentage value.

5) Use Layers (or Pages in Fireworks)

  1. Where appropriate, use a layer for home page designs and a different layer for content page designs. If your home page differs to your content page, separate these with layers.
  2. Distinguish elements from the background. This provides a way for background images to be separated out, so that during cut up, text and other HTML elements can be used to overlay.
  3. Name your layers. Give your layers meaningful names. Do not use "Object 7 (Clone)". But rather "Subscribe Box" and "Tag Cloud".
  4. Remove excess layers. Do not leave excess layers in your PSD files that are no longer used as it can be quite confusing for the cutup team.

6) Website Navigation

  • We recommend primary header navigation with pop-out, drop down menus only where necessary.
  • Where a drop-down menu will be used, include an example in your mockup of one menu item being hovered over and an example of the drop down box.
  • Use links which will be cohesive with the structure of the site, try to have every navigation item open an actual page (even when they have drop down items beneath them).
  • Include selected page and hover styling on navigation items where necessary.

7) Example Content

  • Headings
    • Any font can be used, provided a TTF or OTF is sent with the PSD and that you have the paid license to use and embed such fonts.
    • Google fonts are free, downloadable and render nicely on the web.
  • Bullet point list
    • If customizing the appearance of lists include an example.
  • Body text
    • Recommended to be restricted to 'web safe fonts' such as Tahoma, Arial, Verdana or Helvetica
    • Try to use websites actual copy rather than Lorem Ipsum
  • A hyperlink in the text
    • Show the difference in colour between the body and the link

8) Editable Content Region

  • Synergy 8 allows each page to have a primary editable content region, and additional content regions where needed. Try to limit the number of additional content regions.
  • Try to simplify content in this area to allow easier editing.

9) Blog / News Posts

  • Keep the design of blog / news posts consistent. We recommend this practise becuase whenever an admin user creates a new post category page which automatically populates with posts, it uses a standard set layout.
  • Where the main function of a page is to display a list of posts, we recommend having each post consist of an image, title, short description, date and "read more" button, however you can add or leave any of these elements out.

10) Community Subscribe

  • Due to the Synergy 8 default customer fields, it's recommended that a first name, last name and e-mail address be used as minimum when adding a customer to your database.
  • Add a compelling reason why someone would want to subscribe. Eg -"Stay up to date with the latest news in property investing".
  • Consider putting out an offer like a "Free Consultation" or "Download your free eBook".
  • D

11) Image Sliders

  • The display of the Synergy 8 slider can be completely customized and can be any width and height. The slider is also responsive, meaning it can take up 100% of the screen width;
  • Next and previous slide controls can be images or text. They don't have to be included, however it's generally recommended.
  • You can have slide selectors as colored circles, squares or other images and place them anywhere.
  • All slides included in a single image slider need to have the same width and height.
  • You can have dynamic text in a slider, however it needs to be in the same location on each slide (advanced: you can get around this by creating a new post custom field for the text location).

12) Footer Links / Navigation

  • Useful for Search Engine Optimization.
  • Define your keywords and link to pages.

13) Other Design Elements

  • Privacy policy, terms and conditions and copyright details.
  • Define your keywords and link to pages.

14) Customizing The Cart / Order Process

  • The shopping cart can be customized, however when the website is developed this will require the cart pages to be overridden. Re-developing the cart process can be quite complicated and is generally not recommended.