Site Media‎ > ‎

Site Design Best Practices

Here we have all the details you will need regarding your site design. If you hit any walls or can't figure something out, let us know and we'll help you get on your feet.

The elements of your design outlined below are all controlled through the Site Design tab in Radmin.


Table of Contents


01 Logo

02 Color

03 Font

04 Header Images

05 Default Images

06 Image Mask Texture



01 Logo


Once you've gone through design brainstorming and settled on a logo (see this guidance and reference our other Do logos), you'll need a hi-res version.


Your website is on a responsive framework, meaning that the logo will change in size depending on what device and what size window/device the user is browsing on.


You'll need 1 large version of your logo saved out with the template provided below (fig 01a). Try to fit your logo as big as you can in the attached template, and save as a png. Remember, this is your logo at twice the size it will actually display on the website. It’s twice as big here to accommodate for retina displays.




fig. 01a


Logo

Specs: 106 px high and no wider than 400px
Setup:
Step 1: Download the newly resized .PSD Template. This will make it scale to fit the nav header placement or anywhere else on your new site.
Step 2: Upload the logo to the Images tab in Radmin under "Logo URL"

Mobile Logo

This logo fits better with responsive resizing. If you don't input a mobile logo, your site will simply keep the regular logo and it will resize

Specs: We recommend the same height as your current logo but square, so 106x106.
SetupUpload the logo to the Images tab in Radmin under "Mobile Logo URL"

Logo Versions

These are the different sized versions for different locations where your logo appears.
Specs:
16x16
44x44
90x90
177x177

Setup:
Step 1: Upload these in your assets
Step 2: Input the links in the comment section of the corresponding Asana Design task so that we can upload those for you


Back to Top


02 Color


fig. 02a


Our color palette breaks down into two core groups: base and accent (fig 02a) in order to delineate between page/content hierarchy and points of user interaction (navigation, call to action, etc)


Base Colors

fig. 02b


The example base palette (fig. 02b) has a balance of dark and light shades of grey. If you browse the demo site, you'll see that

  • Header/Footer areas are always dark grey background

  • Main content areas are light grey background


This is a deliberate design decision to help the user clearly orient themselves within the different sections of each template. While the base colors themselves can change, the contrast between the two sections cannot. Any variation that doesn't have a very obvious contrast between the two sides will result in a less intuitive hierarchy and a lack of organization for the site (fig 2c.i.).


fig 2c.i.


And, if you would like the darker base to be a navy blue, make sure the navy blue is around the same level of darkness as the grey (fig. 02c.ii.)



fig. 02c.ii


Lastly, you'll notice the base color palette also contains white, and not as one of the two dark and light base colors. We use this often on hover interactions, to put sidebar modules on, and for grouping information (fig. 02d). Why bring this up? Because we want you to use something other than white as your light base color :)  


fig. 02d




Accent Colors

fig. 02f


Enough base talk, lets talk accent colors-- the fun stuff. These colors are sprinkled throughout the design system to identify and group together specific types of interactions, calls to action, and general content separation and detailing. By grouping and arranging colors we are introducing some clear cognitive hooks for users.


You’ll need to choose at least three accent colors for three different types of interaction around the site. As you can see in our example palette above (fig 02f) we have 6 colors. You can too! Below, we break down some of the places where you see accent colors.


01. Navigation & Function

Global and functional navigation around the platform (fig. 02g). Think search, view toggle, dropdowns, add to MyXXX, etc.


fig. 02g



02. Call to Action / Site Activity

This grouping covers things like the Win or RSVP buttons, and visual elements around user activity like listening to music, following a band, or committing to a show.  (fig. 02h)


fig. 02h



03. Offsite Linking

An edge case, but there will be more in the future. This grouping is to articulate any activity done on the DoXXX platform that will send a user elsewhere on the web to help get them to an event. Right now this is only the Buy Tickets button (fig. 02i)

(fig. 02i)


States: Static/Inactive, Hover/Tap, Active/Focus

Note that in the first view of our color palette, each accent color has 3 states to it. To make life easier, we’ve handled both the static/inactive state and the active/focus states in code. This means you should pick  your accent colors carefully in their brightest state. (fig. 02f)


Color Summary

To best determine base and accent colors here is how it would look like in the Colors tab in Radmin:





Fields you can edit:

  • Base colors! Choose your palette of dark, light, and white.

  • Accent colors (the confetti) with all locations clearly designated. For more guidance, see this screenshot and note that the 4th accent color is not yet included.


NOTE: You'll want to use your new CSS editing capability VERY sparingly and ONLY for colors. Making layout or positioning changes (like you could with your old site) will make it impossible for us to keep your new site updated as we make changes to improve it once rolled out.


Back to Top

03 Font

Choosing your core font(s) is a very important decision. Take your time, have a designer explore options, and chat with our team as you go through the process. The default Open Sans and Open Sans Condensed.


Headlines, navigation and functional buttons all use the condensed version of the font (fig. 03a). By keeping all these elements in a condensed font, it allows the platform to be much more flexible with different screen sizes and devices.


In the example we’ve made all headlines (event titles) in all caps to gain some consistency and make the site easier to browse.

fig. 03a


We use the non-condensed version of the font for all body copy or text that isn’t ‘functional’ or ‘headliney’(fig. 03b) because we have more room to work with in these areas and the text is meant for reading rather than skimming


fig. 03b




fig. 03c

Setup:
Step 1: Choose a font family wisely. Your options aren’t unlimited, you’ve got to use a web-enabled font family. You can pick fonts from services like google fonts and typekit to avoid expensive licensing costs.
Step 2: Have your designer play with fonts you might want when testing the colors, and once you pick a web-ready font-- link it up!
Step 3: Include the font link.
Step 4: Include the Regular Font Family and Condensed Font Family (both fields must be filled).
EX. Font Family 'Open Sans', sans-serif
EX. Condensed Font Family: 'Open Sans Condensed', sans-serif

Note:
  • If you have purchased a custom font, the top field is where you enter the full path to the font that you should have received. Otherwise, you can leave blank.

  • The regular and condensed font family must be entered.  The family can be found easily in either the Google or Typekit font CSS info.



04 Header Image

The header across the top of your site behind your logo and Latest/MyXXX/Search navigation should be a customized image that reflects your city and scene.

Specs: 1200x125

SetupUpload the file to the Images tab in Radmin under "Header"


05 Default Images

fig. 04a



The Cover Image is the image that shows at the top of your event, artist, venue, and user/list pages. It is a big space to better showcase quality images. When an image is not uploaded relevant to the page, a default image you assign will appear in that space.


A default image is assigned to an artist, venue, or user/list page if none has been selected through a media search or manually uploaded. It also shows at the top of your "Latest" and "Search Results" pages.


What You Need To Do:

Select a default image or group of default images that fit with your city/scene design theme.


Specs: 1200x450

SetupUpload the file to the Images tab in Radmin under "Default Hero"

Back to Top
 


06 Image Mask Texture

fig. 06a


You can choose a texture overlayed on top of images to give the nice background effect you see on other Do sites (fig. 06a). The example is a simple duo-tone style overlay that subdues contrast and gives a euphoric look to the background imagery. Yours could be some simple film grain or noise, some scratchy effects, etc. We advise keeping it simple or going with nothing at all.


Specs
*1000px by 1000px
*100% opacity
*.png

Steps:
Step 1: Have your designer explore in your design comps and once you’ve arrived at a decision, have ‘em save save it out at 100% opacity, as a .png, and pop it into the site.
Step 2: Upload the file to the Images tab in Radmin under "Background Texture URL"

Back to Top





.

Comments