Designer guide

Getsocio is highly customizable, you may find some tips for customization here ,the majority of elements are optional, but there's still a number of "must have" things to keep in mind to get your head around this design task. Here you can find a description of Getsocio layout and the list of features to be present in the design mockup. The mockup should be in Photoshop PSD format with each element on a separate layer. In case the non-standard fonts are used, they should be sent over as TTF files.

Though the number of pages can vary from one site to another, in most cases custom visuals are needed for only three pages - Today's deal (the main page), Recent deals and Your order. This guide gives a full list of elements present on the main page, though some of them are optional, it'd be better to give them some consideration or at least not to replace them with any other elements.

Here you can view full today's deal page layout with the elements indicated

Page Template

This is the basic template for header and footer elements present on all pages of the site.

• Newsletter subscription area
• Locations list (optional)
• Category list (optional)
• Location selection button. If several locations are available, it shows the drop-down menu
• Facebook Login button (optional)
• Top menu
• Referral program (optional)
• Error message shown on invalid email address
• Sign In/Sign Up links
• "My Stuff" menu
• Bottom menu: one or more groups of links
• Follow us block: RSS feed, Twitter, Facebook, email

Click this link to view the layout

Deal area

In fact, this is what the main page will show and also where the major user experience is concentrated, none of the elements should be deprecated.

• Vendor Info: company name, website and the address, where the coupon should be redeemed
• Deal description
• Side bar
• Side deals block
• Comments block. Can be absent if Facebook comments are on or this feature is disabled
• "Share this deal" - options to send the deal via email, Facebook (Like and Send), Twitter, also has the embed code button
• Highlights
• Fine Print
• Deal status. Has the progress bar for untipped deals and for tipped ones shows the message "The deal is on!"
• Time left to buy the deal or date when it ended
• “Buy it for a friend” button
• Actual value of the product, percentage of discount and the amount saved
• "Buy" button for past and sold out deals
• Multi-option deal block.

Click this link to view the layout

Recent deals page

This page will have absolutely the same header and footer as today's deal, the task is to organize the past deals to align them with the overall design concept. Elements to pay attention to:

• Page header
• Deal title
• Deal price
• Saved amount
• Deal value
• Number of items sold

Click this link to view the layout

Your Order page

Header and footer come from the main template. There can be some visuals to simplify the payment process, logo for credit cards accepted or the payment processor seal.